:root {
  color-scheme: light;

  /* BIMFlow Design System v1.1 — CSS token foundation.
     These tokens are intentionally site-owned. MudBlazor is aligned to them
     in the next commit; public pages should not depend on raw Mud variables. */
  --bf-font-sans: "Vazirmatn", "IRANSansX", "Tahoma", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bf-ink: #0B1220;
  --bf-ink-soft: #111827;
  --bf-text: #0F172A;
  --bf-muted: #475569;
  --bf-subtle: #64748B;

  --bf-bg: #F6F8FB;
  --bf-bg-warm: #FBF7F0;
  --bf-surface: #FFFFFF;
  --bf-surface-soft: #F9FAFB;

  --bf-border: #D8E0EC;
  --bf-border-strong: #AEBBCD;

  --bf-accent: #F59E0B;
  --bf-accent-dark: #D97706;
  --bf-accent-soft: #FFF7ED;

  --bf-danger: #B91C1C;
  --bf-success: #047857;
  --bf-info: #0369A1;

  --bf-radius-sm: 12px;
  --bf-radius-md: 18px;
  --bf-radius-lg: 28px;
  --bf-radius-xl: 36px;
  --bf-radius-pill: 999px;

  --bf-shadow-card: 0 10px 30px rgba(15, 23, 42, 0.06);
  --bf-shadow-soft: 0 18px 50px rgba(15, 23, 42, 0.08);
  --bf-shadow-video: 0 24px 70px rgba(15, 23, 42, 0.18);

  --bf-container: 1180px;
  --bf-container-wide: 1280px;
  --bf-container-narrow: 820px;
  --bf-section-y: clamp(64px, 8vw, 112px);
  --bf-section-y-compact: clamp(40px, 5vw, 72px);
  --bf-card-gap: clamp(18px, 2.2vw, 32px);

  --bf-video-radius: 28px;
  --bf-video-bg: #0B1220;
  --bf-video-border: rgba(255, 255, 255, 0.12);
  --bf-video-aspect: 16 / 9;

  /* Legacy aliases retained so existing pages still render while the new
     BIMFlow wrappers are introduced in later commits. */
  --bf-primary: var(--bf-ink);
  --bf-accent-2: #FB923C;
  --bf-section-py: var(--bf-section-y-compact);
  --bf-divider-my: clamp(14px, 2vw, 20px);
  --bf-t-fast: 170ms ease;
  --bf-t-medium: 260ms ease;

  --bf-space-1: 4px;
  --bf-space-2: 8px;
  --bf-space-3: 12px;
  --bf-space-4: 16px;
  --bf-space-5: 20px;
  --bf-space-6: 24px;
  --bf-space-7: 28px;

  /* Approximate MudAppBar height (Dense=true). Used for viewport hero sizing. */
  --bf-appbar-h: 56px;
}

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

html {
  scroll-behavior: smooth;
  direction: rtl;
  background: var(--bf-bg);
}

/* --- Commit 25: Accessibility Baseline --- */
/* Skip link (keyboard users) */
.bf-skip-link {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bf-surface);
  color: var(--bf-text);
  border: 1px solid var(--bf-border);
  text-decoration: none;
  z-index: 10000;
  transform: translateY(-140%);
  transition: transform var(--bf-t-fast);
}

.bf-skip-link:focus-visible {
  transform: translateY(0);
}

/* Global focus-visible ring (do not rely on browser defaults) */
:where(a, button, input, textarea, select, summary, [role="button"], [tabindex]):focus-visible {
  outline: 3px solid var(--bf-accent);
  outline-offset: 3px;
}

/* Avoid clipped focus rings on common interactive containers */
.bf-grid,
.bf-nextprev,
.bf-related,
.bf-toc,
.bf-toc-mobile,
.bf-card,
.mud-card,
.mud-paper {
  overflow: visible;
}

html,
body {
  min-height: 100%;
}

body {
  direction: rtl;
  font-family: var(--bf-font-sans);
  margin: 0;
  padding: 0;
  color: var(--bf-text);
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.08), transparent 32rem),
    linear-gradient(180deg, #f8fafc 0%, var(--bf-bg) 100%);
  line-height: 1.85;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:where(img, svg, video, canvas) {
  max-width: 100%;
}

/* ----- Commit A2: MudLayout (AppBar/Drawer/MainContent/Footer) ----- */
.bf-appbar {
  background: var(--bf-surface) !important;
  color: var(--bf-text) !important;
  border-bottom: 1px solid var(--bf-border);
  /* Dropdown panels must be able to escape the AppBar box */
  overflow: visible !important;
}

.bf-toolbar {
  padding: 0 12px;
  /* Keep nav + CTA on one logical row when possible, but allow wrapping on narrow widths */
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  /* Allow dropdown panels to render outside the toolbar height */
  overflow: visible;
}

.bf-brand {
  font-weight: 800;
  letter-spacing: 0.2px;
  text-decoration: none;
  color: inherit;
  font-size: 18px;
}

/* ----- Mobile menu (SSR-only <details>) ----- */
.bf-mobilemenu {
  display: none;
  position: relative;
}

.bf-mobilemenu__summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--bf-border);
  background: var(--bf-surface);
  font-size: 18px;
}

.bf-mobilemenu__summary::-webkit-details-marker { display: none; }

.bf-mobilemenu__panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  width: min(92vw, 360px);
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 12px;
  background: var(--bf-surface);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  z-index: 60;
}

.bf-mobilemenu__group {
  padding: 10px 8px;
  border-radius: 14px;
}

.bf-mobilemenu__group + .bf-mobilemenu__group {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.bf-mobilemenu__title {
  font-weight: 850;
  color: var(--bf-text);
  margin-bottom: 6px;
}

.bf-mobilemenu__item {
  display: block;
  padding: 9px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--bf-text);
  font-weight: 650;
}

.bf-mobilemenu__item:hover {
  background: rgba(15, 23, 42, 0.04);
}

.bf-mobilemenu__item.active {
  color: var(--bf-text);
  font-weight: 850;
  text-decoration-line: underline;
  text-decoration-color: var(--bf-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.bf-mobilemenu__cta {
  display: block;
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: #111;
  font-weight: 900;
  background: rgba(251, 146, 60, 0.22);
  border: 1px solid rgba(251, 146, 60, 0.35);
}

/* Responsive behavior: on small screens, use the SSR-only mobile menu and hide hover dropdown nav. */
@media (max-width: 960px) {
  .bf-mobilemenu { display: inline-block; }
  .bf-toplinks { display: none; }

  /* Give CTA room: prevent overflow. */
  .bf-toolbar { gap: 10px; }
  .bf-toolbar-cta .mud-button-root { padding-inline: 12px; }
}

.bf-toplinks .mud-button-root {
  font-weight: 600;
}

/* SSR-safe top nav (plain anchors) */
.bf-toplinks {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  /* Keep links grouped on the "start" side (RTL: right). */
  justify-content: flex-start;
  /* IMPORTANT: dropdown panels must be able to escape the header.
     Any overflow scrolling here will clip the submenu and make it look like
     "nothing opens". */
  overflow: visible;
  max-width: none;
}

.bf-toplinks::-webkit-scrollbar { height: 0; }
.bf-toplinks { scrollbar-width: none; }


/* Push the CTA to the opposite edge (RTL: left) without relying on JS/Drawer */
.bf-toolbar-cta {
  margin-inline-start: auto;
  flex: 0 0 auto;
}

/* ----- Commit A5: AppBar polish (active links + micro-interactions) ----- */
.bf-topnav {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  font-weight: 650;
  transition: background 140ms ease, transform 140ms ease;
  white-space: nowrap;
}

.bf-topnav:hover {
  background: rgba(15, 23, 42, 0.04);
}

/* MudNavLink adds either "active" or "mud-nav-link-active" depending on version */
.bf-topnav.active,
.bf-topnav.mud-nav-link-active {
  color: var(--bf-text);
  font-weight: 850;
}

.bf-topnav.active::after,
.bf-topnav.mud-nav-link-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  background: var(--bf-accent);
  border-radius: 999px;
}

.bf-cta {
  border-radius: 12px;
  /* Contrast sanity: ensure border is visible even if theme palette is light */
  border-color: var(--bf-primary) !important;
}

/* Fixed CTA (serious, always visible) */
.bf-cta-struct {
  font-weight: 800;
  letter-spacing: -0.2px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

/* -------- SSR-safe dropdown (no JS): clickable headers + toggle caret -------- */
.bf-navlist{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:4px;
  padding:0;
  margin:0;
  list-style:none;
  overflow: visible;
}

.bf-dd{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:4px;
  z-index:150;
  overflow: visible;
}

.bf-navlink{
  display:inline-flex;
}

.bf-dd-toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.bf-dd-caret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  cursor:pointer;
  user-select:none;
  border-radius:12px;
  line-height:1;
  color: inherit;
  pointer-events:auto;
  position:relative;
  z-index:200; /* ensure caret is above any toolbar overlays */
  transition: background 140ms ease;
}

.bf-dd-caret:hover{
  background: rgba(15, 23, 42, 0.04);
}

.bf-dd-panel{
  position:absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0; /* RTL-safe */
  min-width: 260px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  display:none;
  /* Must sit above the AppBar/Toolbar stacking context */
  z-index:1200;
}

/*
  Desktop UX fix:
  There is an intentional visual gap (8px) between the nav row and the dropdown panel.
  Without a hover "bridge", moving the mouse from the caret to the panel can briefly
  pass through that gap and collapse the dropdown before the user can click an item.
  This transparent pseudo-element fills the gap as part of the panel hit-area.
*/
.bf-dd-panel::before{
  content:"";
  position:absolute;
  top:-8px;
  left:0;
  right:0;
  height:8px;
}

/* Open on hover/focus for desktop + click caret (checkbox) for touch */
.bf-dd:hover .bf-dd-panel,
.bf-dd:focus-within .bf-dd-panel,
.bf-dd-toggle:checked ~ .bf-dd-panel{
  display:block;
}

.bf-dd-item{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: inherit;
  white-space: nowrap;
  font-weight: 650;
}

.bf-dd-item:hover,
.bf-dd-item:focus-visible{
  background: rgba(15, 23, 42, 0.05);
  outline: none;
}

/* Primary links should be readable (contrast quick pass) */
.mud-link,
a {
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

.bf-drawer {
  width: 320px;
}

.bf-drawer-body {
  padding: 14px 14px 18px;
}

.bf-drawer-cta {
  border-radius: 14px;
}

.bf-page {
  padding-top: 24px;
  padding-bottom: 28px;
}

/* Page sections: give rhythm + depth (avoid "flat" pages) */
.bf-section {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.06);
}

/* RTL lists: keep bullets comfortably inside the section */
.bf-section ul,
.bf-section ol {
  margin: 0;
  padding-inline-start: 1.6rem; /* start == right in RTL */
  list-style-position: outside;
}

.bf-section li {
  margin-block: 6px;
}

.bf-section--cta {
  border-color: rgba(245, 158, 11, 0.28);
  box-shadow: 0 10px 34px rgba(245, 158, 11, 0.10);
}

.bf-quote {
  margin: 0;
  padding: 14px 16px;
  border-inline-start: 4px solid var(--bf-accent);
  background: rgba(15, 23, 42, 0.03);
  border-radius: 16px;
}

/* /platform: 3-line architecture statement (centered, RTL-safe) */
.bf-platform-pillars {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  text-align: center;
  font-weight: 500;
}

.bf-footer {
  padding: 10px 0 26px;
}

.bf-footer-title {
  margin-bottom: 8px;
}

.bf-footer .mud-link,
.bf-footer a {
  color: var(--bf-muted);
  text-decoration: none;
}

.bf-footer .mud-link:hover,
.bf-footer a:hover {
  color: var(--bf-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(245, 158, 11, 0.7);
  text-underline-offset: 3px;
}


.bf-footer .mud-link,
.bf-footer a {
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

.bf-footer-bottom {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bf-muted {
  color: var(--bf-muted) !important;
}

.w-100 { width: 100%; }

/* Readability + rhythm */
.container {
  max-width: 1040px;
  margin: 0 auto;
  width: 100%;
  padding: 0 16px;
}

.page { min-height: 100vh; display:flex; flex-direction:column; }

.topbar {
  border-bottom: 1px solid var(--bf-border);
  padding: 12px 0;
  background: var(--bf-surface);
}

.nav {
  display:flex;
  gap: 14px;
  align-items:center;
  flex-wrap:wrap;
}

.nav a {
  text-decoration:none;
  color: var(--bf-text);
  padding: 6px 8px;
  border-radius: 8px;
}

.nav a:hover { background: rgba(15, 23, 42, 0.04); }
.nav a:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 2px; }

.brand { font-weight: 800; letter-spacing: 0.2px; }

.content {
  flex: 1;
  padding: 22px 0;
}

.footer {
  border-top: 1px solid var(--bf-border);
  padding: 14px 0;
  font-size: 13px;
  color: var(--bf-muted);
}

/* Typography */
h1 { margin: 0 0 10px 0; font-size: 32px; line-height: 1.2; }
h2 { margin: 0 0 10px 0; font-size: 22px; line-height: 1.3; }
p { margin: 0 0 10px 0; color: var(--bf-text); line-height: 1.9; }

/* Sections */
.section { margin-top: 26px; }
.section-head { display:flex; justify-content:space-between; align-items:baseline; gap: 12px; }
.section-head a { font-size: 14px; color: #111; text-decoration: none; }
.section-head a { color: var(--bf-text); }
.section-head a:hover { text-decoration: underline; text-decoration-color: var(--bf-accent); }

/* Cards */
.cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.card { display:block; padding: 14px; border:1px solid var(--bf-border); border-radius: 14px; background:var(--bf-surface); }
.card:hover { border-color: rgba(245, 158, 11, 0.55); box-shadow: 0 2px 12px rgba(15,23,42,0.06); }
.card-title { font-weight: 700; margin: 0 0 6px 0; }
.card-desc { font-size: 14px; color:#333; margin: 0; }

/* ----- Phase B: product-grade listings ----- */
.bf-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.bf-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .bf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bf-grid, .bf-grid--compact { grid-template-columns: 1fr; } }

.bf-content-card {
  display:block;
  text-decoration:none;
  color: inherit;
  background: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-radius: 16px;
  padding: 14px;
  min-height: 168px;
  transition: transform var(--bf-t-fast), border-color var(--bf-t-fast), box-shadow var(--bf-t-fast);
}
.bf-content-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
}
.bf-content-card__title { font-weight: 800; margin: 0 0 8px 0; line-height: 1.35; }
.bf-content-card__meta { font-size: 12px; color: var(--bf-muted); display:flex; gap: 8px; align-items:center; margin-top: -2px; }
.bf-content-card__meta-sep { opacity: 0.6; }
.bf-content-card__excerpt { font-size: 14px; color: var(--bf-muted); line-height: 1.9; margin-top: 6px; }
.bf-content-card__tags { margin-top: 10px; }
.bf-content-card__cta { display:flex; justify-content:space-between; align-items:center; margin-top: 10px; color: var(--bf-text); }
.bf-content-card__cta-text { font-weight: 700; font-size: 13px; }
.bf-content-card--compact { min-height: 0; }
.bf-content-card--compact .bf-content-card__excerpt { display:none; }

.bf-listing__filters { display:flex; flex-direction:column; gap: 10px; margin: 14px 0; }
.bf-listing__search { max-width: 520px; }
.bf-listing__chips { display:flex; flex-direction:column; gap: 6px; }
.bf-clear { align-self:flex-start; }

.bf-empty { border: 1px dashed var(--bf-border); border-radius: 18px; padding: 22px; text-align:center; color: var(--bf-muted); }
.bf-empty__icon { opacity: 0.65; margin-bottom: 10px; }
.bf-empty__title { font-weight: 800; color: var(--bf-text); margin-bottom: 6px; }

/* ----- Phase B: TOC + reading nav ----- */
.bf-toc { position: sticky; top: 88px; padding: 6px 2px; }
.bf-toc__title { font-weight: 800; margin-bottom: 8px; }
.bf-toc__list { display:flex; flex-direction:column; gap: 6px; }
.bf-toc__item { text-decoration:none; color: var(--bf-muted); border-radius: 10px; padding: 6px 8px; transition: background var(--bf-t-fast), color var(--bf-t-fast); }
.bf-toc__item:hover { background: rgba(15,23,42,0.04); color: var(--bf-text); }
.bf-toc__item--h3 { padding-right: 18px; font-size: 13px; }

.bf-nextprev { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
@media (max-width: 640px) { .bf-nextprev { grid-template-columns: 1fr; } }

.bf-backpillar { margin-top: 6px; }
.bf-backpillar__link { display:inline-flex; gap: 8px; align-items:center; text-decoration:none; color: var(--bf-muted); font-weight: 700; border: 1px solid var(--bf-border); border-radius: 999px; padding: 6px 10px; background: var(--bf-surface); transition: transform var(--bf-t-fast), border-color var(--bf-t-fast), color var(--bf-t-fast); }
.bf-backpillar__link:hover { transform: translateY(-2px); border-color: rgba(245, 158, 11, 0.55); color: var(--bf-text); }
.bf-nextprev__card { display:block; text-decoration:none; color: inherit; border: 1px solid var(--bf-border); border-radius: 16px; background: var(--bf-surface); padding: 12px; transition: transform var(--bf-t-fast), border-color var(--bf-t-fast); }
.bf-nextprev__card:hover { transform: translateY(-3px); border-color: rgba(245, 158, 11, 0.55); }
.bf-nextprev__label { font-size: 12px; color: var(--bf-muted); margin-bottom: 6px; }
.bf-nextprev__title { font-weight: 800; line-height: 1.4; }

.bf-related { margin-top: 16px; }
.bf-related__title { font-weight: 800; margin-bottom: 6px; }

/* ----- Phase B: pillar hub blocks ----- */
.bf-hub { margin-bottom: 16px; }
.bf-hub-card { border: 1px solid var(--bf-border); border-radius: 18px; padding: 14px; background: var(--bf-surface); }
.bf-hub-card__title { margin-bottom: 6px; }
.bf-hub-card__desc { color: var(--bf-muted); }
.bf-faq-teaser { margin-top: 18px; }

/* Hero */
.hero { padding: 18px 0 8px 0; }
.hero p { max-width: 60ch; }
.cta-row { display:flex; gap: 10px; flex-wrap: nowrap; margin-top: 14px; }
.btn {
  display:inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--bf-border);
  color: var(--bf-text);
  text-decoration: none;
}
.btn.primary {
  border-color: var(--bf-accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}
.btn:hover { background: rgba(15, 23, 42, 0.04); }

/* Content rendering */
.content-html :is(h1,h2,h3) { margin-top: 18px; }
.content-html a { color: var(--bf-text); text-decoration-color: rgba(245,158,11,0.55); }
.content-html a:hover { color: var(--bf-primary); text-decoration-color: var(--bf-accent); }
.content-html ul { margin: 8px 0 12px; padding-right: 22px; }

.form { margin: 10px 0; display:flex; flex-direction:column; gap: 6px; max-width: 520px; }
.ok { margin-top: 12px; }

/* ----- Commit 06: page templates ----- */
.content-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 8px 0 18px;
}

.page-header { margin-bottom: 16px; }
.page-lead { opacity: 0.85; max-width: 70ch; }

.meta-row {
  display:flex;
  flex-wrap: nowrap;
  gap: 10px;
  font-size: 13px;
  opacity: 0.85;
}
.meta-row a { color:#111; }

.tag-row { display:flex; flex-wrap: nowrap; gap: 6px; margin-top: 8px; }
.tag { font-size: 12px; border:1px solid #eee; border-radius: 999px; padding: 2px 8px; }

.toc {
  border:1px solid #eee;
  border-radius: 14px;
  padding: 12px;
  margin: 12px 0 18px;
  background: #fff;
}
.toc-title { font-weight: 700; margin-bottom: 8px; }
.toc ul { margin: 0; padding-right: 18px; }
.toc a { text-decoration:none; }
.toc a:hover { text-decoration: underline; }

.bottom-cta {
  margin-top: 24px;
  border:1px solid #eee;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}
.bottom-cta__title { font-weight: 700; margin-bottom: 10px; }
.bottom-cta__actions { display:flex; gap: 10px; flex-wrap: nowrap; }
.btn--ghost { background: transparent; }

/* ----- Commit A3: legacy page section primitives (MudBlazor) ----- */

/* ----- Page sections (long-form pages) ----- */
.bf-page-section {
  max-width: 980px;
  margin-inline: auto;
  padding: 10px 12px;
}

/* ----- Long-form readability (RTL justify) ----- */
.bf-longform p {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: right;
}

.bf-longform li {
  text-align: justify;
  text-justify: inter-word;
  text-align-last: right;
}

/* ----- Callout (policy-style emphasis block) ----- */
.bf-callout {
  border: 1px solid var(--bf-border);
  background: rgba(245,158,11,0.06);
  border-radius: 18px;
  padding: 14px 16px;
  margin-block: 14px;
}
.bf-callout__title { font-weight: 900; margin-bottom: 4px; }
.bf-callout__body { font-weight: 800; }

/* ----- Infrastructure Reference Model (IRM) diagram ----- */
.bf-irm {
  margin-block: 18px 8px;
}
.bf-irm__stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bf-irm__layer {
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: var(--bf-surface);
  padding: 14px 16px;
}
.bf-irm__layer--base {
  /* Foundation should feel heavier */
  border-width: 2px;
  padding-block: 16px;
  box-shadow: 0 10px 26px rgba(15,23,42,0.06);
}
.bf-irm__row {
  display:flex;
  flex-direction: column;
  gap: 2px;
}
.bf-irm__title { font-weight: 950; font-size: 18px; }
.bf-irm__subtitle { color: var(--bf-muted); font-size: 13px; line-height: 1.7; }
.bf-irm__bullets {
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 6px;
  color: var(--bf-muted);
  font-size: 14px;
}
.bf-irm__chips {
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bf-irm__chip {
  border: 1px solid var(--bf-border);
  background: rgba(15,23,42,0.02);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.bf-irm__arrow {
  display:flex;
  justify-content: center;
  align-items: center;
  opacity: 0.65;
}
.bf-irm__arrow svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.bf-irm__caption {
  margin-top: 10px;
  color: var(--bf-muted);
  font-size: 13px;
}
.bf-irm__caption-strong { font-weight: 900; color: inherit; }


/* Commit UI-03: problem diagnosis table */
.bf-diagnosis {
  margin-top: 12px;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.bf-diagnosis__table {
  width: 100%;
  border-collapse: collapse;
}
.bf-diagnosis__table th,
.bf-diagnosis__table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bf-border);
  vertical-align: top;
}
.bf-diagnosis__table thead th {
  font-weight: 800;
  background: rgba(15, 23, 42, 0.02);
}
.bf-diagnosis__table tbody tr:last-child td { border-bottom: none; }
.bf-diagnosis__table td:nth-child(1) { font-weight: 700; white-space: nowrap; }
.bf-diagnosis__table td:nth-child(2) { font-weight: 700; }

@media (max-width: 900px) {
  /* turn table into stacked cards without JS */
  .bf-diagnosis__table,
  .bf-diagnosis__table thead,
  .bf-diagnosis__table tbody,
  .bf-diagnosis__table th,
  .bf-diagnosis__table td,
  .bf-diagnosis__table tr {
    display: block;
  }
  .bf-diagnosis__table thead { display: none; }
  .bf-diagnosis__table tr {
    border-bottom: 1px solid var(--bf-border);
  }
  .bf-diagnosis__table tr:last-child { border-bottom: none; }
  .bf-diagnosis__table td {
    border: none;
    padding: 10px 14px;
  }
  .bf-diagnosis__table td:nth-child(1)::before {
    content: "باور رایج";
    display:block;
    font-size: 12px;
    color: var(--bf-muted);
    margin-bottom: 4px;
    font-weight: 600;
  }
  .bf-diagnosis__table td:nth-child(2)::before {
    content: "نتیجه واقعی";
    display:block;
    font-size: 12px;
    color: var(--bf-muted);
    margin-bottom: 4px;
    font-weight: 600;
  }
  .bf-diagnosis__table td:nth-child(3)::before {
    content: "علت ریشه‌ای";
    display:block;
    font-size: 12px;
    color: var(--bf-muted);
    margin-bottom: 4px;
    font-weight: 600;
  }
  .bf-diagnosis__table td:nth-child(1) { white-space: normal; }
}


.bf-hero-graphic { width: 100%; height: auto; display:block; }

.bf-divider { margin: var(--bf-divider-my) 0; opacity: 0.6; }

.bf-section-head {
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 10px;
}
.bf-section-head__title { font-weight: 800; }
.bf-section-head__stack { display:flex; flex-direction:column; gap: 2px; }
.bf-section-head__subtitle { opacity: 0.85; }
.bf-section-head__link { padding-inline: 6px; }

.bf-card {
  display:flex;
  gap: 10px;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  padding: 14px 14px;
  background: var(--bf-surface);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.bf-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 6px 18px rgba(15,23,42,0.08);
}
.bf-card:focus-visible {
  outline: 3px solid rgba(245,158,11,0.25);
  outline-offset: 2px;
}
.bf-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--bf-border);
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(245,158,11,0.08);
  flex: 0 0 auto;
}
.bf-card__icon .mud-icon-root { font-size: 22px !important; }
.bf-card__title { font-weight: 800; margin-bottom: 2px; }
.bf-card__desc { opacity: 0.9; }
.bf-card__chevron { margin-right: auto; opacity: 0.55; align-self: center; }

/* ----- UI-06: framework cards (hierarchy + descriptor) ----- */
.bf-frameworkcard {
  display:flex;
  gap: 12px;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  padding: 14px 14px;
  background: var(--bf-surface);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-height: 162px;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.bf-frameworkcard:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 6px 18px rgba(15,23,42,0.08);
}
.bf-frameworkcard:focus-visible {
  outline: 3px solid rgba(245,158,11,0.25);
  outline-offset: 2px;
}
.bf-frameworkcard__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--bf-border);
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(245,158,11,0.08);
  flex: 0 0 auto;
}
.bf-frameworkcard__icon .mud-icon-root { font-size: 22px !important; }
.bf-frameworkcard--featured .bf-frameworkcard__icon .mud-icon-root { font-size: 26px !important; }
.bf-frameworkcard__body { flex: 1 1 auto; min-width: 0; }
.bf-frameworkcard__kicker {
  opacity: 0.95;
  font-weight: 700;
  margin-bottom: 4px;
}
.bf-frameworkcard__title { font-weight: 900; margin-bottom: 4px; }
.bf-frameworkcard__desc { opacity: 0.9; }
.bf-frameworkcard__chevron { margin-right: auto; opacity: 0.55; align-self: center; }

.bf-frameworkcard--featured {
  min-height: 186px;
  background: linear-gradient(135deg, rgba(245,158,11,0.13), rgba(15,23,42,0.02));
  border-color: rgba(245, 158, 11, 0.35);
}
.bf-frameworkcard--featured .bf-frameworkcard__icon {
  width: 48px;
  height: 48px;
  background: rgba(245,158,11,0.12);
}

/* ----- UI-04: solve cards (denser, more "instrument" feel) ----- */
.bf-solvecard {
  display:flex;
  gap: 12px;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  padding: 14px 14px;
  background: var(--bf-surface);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-height: 168px; /* keep grid rows visually aligned */
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.bf-solvecard:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 6px 18px rgba(15,23,42,0.08);
}
.bf-solvecard:focus-visible {
  outline: 3px solid rgba(245,158,11,0.25);
  outline-offset: 2px;
}
.bf-solvecard__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--bf-border);
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(245,158,11,0.08);
  flex: 0 0 auto;
}
.bf-solvecard__icon .mud-icon-root { font-size: 22px !important; }
.bf-solvecard__body { flex: 1 1 auto; min-width: 0; }
.bf-solvecard__title { font-weight: 900; margin-bottom: 4px; }
.bf-solvecard__outcome { font-weight: 700; opacity: 0.95; margin-bottom: 8px; }
.bf-solvecard__bullets { margin: 0; padding: 0 18px 0 0; list-style: disc; opacity: 0.9; }
.bf-solvecard__bullets li { margin: 3px 0; font-size: 13px; }
.bf-solvecard__chevron { margin-right: auto; opacity: 0.55; align-self: center; }

.bf-solvecard--primary {
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(15,23,42,0.02));
  border-color: rgba(245, 158, 11, 0.35);
}
.bf-solvecard--primary .bf-solvecard__icon {
  background: rgba(245,158,11,0.14);
  border-color: rgba(245, 158, 11, 0.30);
}

.bf-process {
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  padding: 14px;
  background: var(--bf-surface);
}
.bf-step__title { font-weight: 800; }
.bf-step__desc { opacity: 0.9; }

/* UI-05 — RTL-friendly timeline (deterministic, no MudTimeline quirks) */
.bf-steps { display:flex; flex-direction: column; gap: 14px; }
.bf-step {
  display:flex;
  flex-direction: row-reverse; /* rail on the right in RTL */
  gap: 14px;
  align-items: flex-start;
}
.bf-step__rail {
  width: 34px;
  display:flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2px;
  flex: 0 0 34px;
}
.bf-step__dot {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,0.25);
  background: rgba(245,158,11,0.10);
  display:flex;
  align-items: center;
  justify-content: center;
}
.bf-step__dot .mud-icon-root { font-size: 18px; opacity: 0.95; }
.bf-step__line {
  width: 2px;
  height: 100%;
  min-height: 44px;
  margin-top: 8px;
  border-radius: 999px;
  background: rgba(15,23,42,0.10);
}
.bf-step__content { flex: 1 1 auto; padding-top: 1px; }
.bf-step__title { margin-bottom: 4px; }
/* Let descriptions use the full available width (avoid artificial wrapping on wide layouts). */
.bf-step__desc { max-width: none; }

@media (max-width: 600px) {
  .bf-step { gap: 12px; }
  .bf-step__desc { max-width: none; }
}

/* ----- Commit 07: internal linking blocks ----- */
.breadcrumbs {
  font-size: 13px;
  opacity: 0.9;
  margin: 8px 0 14px;
  display:flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}
.breadcrumbs a { color:#111; text-decoration:none; }
.breadcrumbs a:hover { text-decoration: underline; }
.bc-sep { opacity: 0.5; }

.nav-block, .ref-block {
  margin: 16px 0;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}
.nav-block__title, .ref-block__title { font-weight: 700; margin-bottom: 8px; }
.ref-block__desc { font-size: 13px; opacity: 0.85; margin-bottom: 10px; }

.nav-block__links { display:flex; flex-wrap: nowrap; gap: 8px; }
.nav-pill {
  display:inline-block;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid #eee;
  text-decoration:none;
  color:#111;
  font-size: 13px;
}
.nav-pill:hover { background:#f6f6f6; }

.ref-card {
  display:block;
  border:1px solid #eee;
  border-radius: 14px;
  padding: 12px;
  text-decoration:none;
  color:#111;
}
.ref-card:hover { border-color:#ddd; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.ref-card__kicker { font-size: 12px; opacity: 0.7; margin-bottom: 6px; }
.ref-card__title { font-weight: 800; margin-bottom: 4px; }
.ref-card__meta { font-size: 12px; opacity: 0.75; }


/* =========================
   Commit A4 — Content templates styling
   ========================= */
.bf-page { padding-top: 18px; padding-bottom: 64px; }
.bf-breadcrumbs { margin-top: 10px; margin-bottom: 14px; }

.bf-page-header { margin-top: 6px; margin-bottom: 12px; text-align: right; }
.bf-page-title { font-weight: 900; letter-spacing: -0.2px; }
.bf-page-lead { opacity: 0.88; margin-top: 8px; max-width: none; width: 100%; }

.bf-meta-row { margin-top: 10px; display:flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.bf-meta-row__type {
  display: inline-flex;
  width: fit-content;
  border: 1px solid rgba(245, 158, 11, .38);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent-soft);
  color: var(--bf-accent-dark);
  padding: .32rem .62rem;
  font-size: .82rem;
  font-weight: 700;
}
.bf-meta-row__item { color: var(--bf-muted); font-size: .82rem; font-weight: 700; }
.bf-meta-row__item + .bf-meta-row__item::before { content: "·"; margin-left: .6rem; color: #94a3b8; }
.bf-chip { border-radius: 999px; }
.bf-tags { margin-top: 10px; }
.bf-tag { opacity: 0.85; }

.bf-content-surface {
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  padding: 18px 18px;
}

.bf-side-surface {
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  padding: 16px 16px;
}

.bf-side-title { font-weight: 900; margin-bottom: 6px; }
.bf-side-desc { font-size: 13px; opacity: 0.8; line-height: 1.85; }
.bf-divider { margin: var(--bf-divider-my) 0; opacity: 0.6; }
.bf-side-block { margin-top: 12px; }

.bf-prose { line-height: 2.05; font-size: 16px; }
.bf-prose h2 { margin-top: 26px; margin-bottom: 10px; font-weight: 900; }
.bf-prose h3 { margin-top: 20px; margin-bottom: 8px; font-weight: 850; }
.bf-prose p { margin: 10px 0; }
.bf-prose ul, .bf-prose ol { margin: 10px 0 10px 0; padding-right: 22px; }
.bf-prose li { margin: 6px 0; }
.bf-prose blockquote {
  margin: 14px 0;
  padding: 10px 14px;
  border-right: 4px solid rgba(245,158,11,0.85);
  background: rgba(245,158,11,0.08);
  border-radius: 14px;
}
.bf-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.92em;
  background: rgba(15,23,42,0.06);
  border-radius: 8px;
  padding: 2px 6px;
}
.bf-prose pre {
  background: rgba(15,23,42,0.06);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 14px;
  padding: 12px 14px;
  overflow: auto;
}
.bf-prose pre code { background: transparent; padding: 0; }
.bf-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.08);
}
.bf-prose th, .bf-prose td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  vertical-align: top;
}
.bf-prose th { background: rgba(15,23,42,0.04); font-weight: 900; }

.bf-cta-surface {
  margin-top: 18px;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(245,158,11,0.10), rgba(255,255,255,0.92));
  padding: 16px 16px;
}
.bf-cta-title { font-weight: 900; }
.bf-cta-sub { opacity: 0.82; margin-top: 6px; }
.bf-cta-actions { margin-top: 12px; flex-wrap: nowrap; }

.bf-list-section { margin-top: 34px; }
.bf-list-card {
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.bf-list-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245,158,11,0.55);
  box-shadow: 0 8px 26px rgba(2,6,23,0.08);
}
.bf-list-title { font-weight: 900; }
.bf-list-desc { opacity: 0.8; margin-top: 6px; }
.bf-card-actions { padding-top: 0; }

/* ----- Phase C: micro-polish (interaction system) ----- */

/* Standardize interaction timing across custom elements */
.bf-topnav {
  transition: background var(--bf-t-fast), transform var(--bf-t-fast), color var(--bf-t-fast) !important;
}

.bf-footer .mud-link,
.bf-footer a {
  transition: color var(--bf-t-fast), text-decoration-color var(--bf-t-fast) !important;
}

/* AppBar: shadow only after scroll (JS toggles .bf-appbar--scrolled) */
.bf-appbar.bf-appbar--scrolled {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  border-bottom-color: transparent;
}

/* Buttons: consistent hover/active behavior (avoid touching icon buttons) */
.mud-button-root:not(.mud-icon-button) {
  transition:
    transform var(--bf-t-fast),
    box-shadow var(--bf-t-fast),
    background-color var(--bf-t-fast),
    border-color var(--bf-t-fast);
}

.mud-button-root:not(.mud-icon-button):hover {
  transform: translateY(-1px);
}

.mud-button-root:not(.mud-icon-button):active {
  transform: translateY(0) scale(0.99);
}

/* Focus: keyboard-visible without ugliness */
.bf-topnav:focus-visible,
.bf-content-card:focus-visible,
.mud-button-root:focus-visible {
  outline: 2px solid rgba(245, 158, 11, 0.75);
  outline-offset: 2px;
  border-radius: 14px;
}


/* ------------------------------
   Phase C2 — Mobile reading UX
   ------------------------------ */

.bf-prose h2, .bf-prose h3 { scroll-margin-top: 96px; }

/* Tables must not break layout on small screens */
.bf-prose table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Mobile TOC (inline) */
.bf-toc-mobile {
  display: none;
  position: sticky;
  top: 70px;
  z-index: 2;
  margin: 10px 0 14px 0;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
}

.bf-toc-mobile__summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-weight: 900;
  user-select: none;
}

.bf-toc-mobile__summary::-webkit-details-marker { display: none; }

.bf-toc-mobile__panel {
  padding: 0 10px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Responsive reading rhythm */
@media (max-width: 900px) {
  .bf-toc--desktop { display: none; }
  .bf-toc-mobile { display: block; }

  .bf-prose { font-size: 15px; line-height: 1.95; }
  .bf-prose h2 { margin-top: 22px; margin-bottom: 8px; }
  .bf-prose h3 { margin-top: 16px; margin-bottom: 6px; }
  .bf-prose ul, .bf-prose ol { padding-right: 18px; }
}


/* --- Hero: text vertical shift + justified subhead (override) --- */
.bf-hero__content--text {
  padding-top: clamp(18px, 4vh, 64px);
}

.bf-hero__title {
  line-height: 1.35;
  margin-top: clamp(6px, 1.2vh, 18px);
}

.bf-hero__lead {
  max-width: 560px;
  line-height: 1.95;
  direction: rtl;
  text-align: justify;
  text-justify: inter-word;
  text-align-last: right;
}


/* --- Hero: slight CTA vertical shift --- */
.bf-hero__cta {
  margin-top: 28px; /* was ~14px — moved down slightly */
}


/* --- SolveCard: Pain/Correction formatting --- */
.bf-solvecard__outcome {
  white-space: pre-line;      /* render \n as line breaks */
  text-align: justify;        /* align line endings */
  text-justify: inter-word;
  text-align-last: right;     /* last line aligns right in RTL */
}


/* --- SolveCard: make pain (red line) softer --- */
.bf-solvecard__outcome::first-line {
  color: #6b7280;     /* softer gray */
  font-weight: 400;   /* less bold */
}


/* --- SolveCard: precise pain/correction styling --- */
.bf-solvecard__pain {
  color: #6b7280;     /* gray */
  font-weight: 400;   /* lighter */
}

.bf-solvecard__correction {
  font-weight: 600;   /* stronger */
}


/* --- SolveCard: equal heights across the row --- */
.bf-solvecard {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.bf-solvecard__body {
  flex: 1 1 auto;
}

/* --- Section lead line (methodology) --- */
.bf-section__lead {
  margin: -6px 0 14px;
  opacity: 0.85;
}

/* --- Section CTAs --- */
.bf-section__cta {
  margin-top: 12px;
  flex-wrap: wrap;
}

/* --- Section footnote --- */
.bf-section__footnote {
  margin-top: 12px;
  opacity: 0.75;
}

/* --- Methodology: keep step titles on one line (desktop) --- */
@media (min-width: 900px) {
  .bf-step__title {
    white-space: nowrap;
    max-width: none;
  }
}


/* --- Methodology: widen step content column + remove artificial constraint --- */
.bf-step__content {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 12px; /* was larger; caused unnecessary wrapping/visual compression */
}

.bf-step__title {
  max-width: 100%;
}


/* --- Methodology: width + wrapping rules (single source of truth) --- */
/* Match other home sections: full width inside the page MudContainer. */
.bf-process {
  width: 100%;
  max-width: none;
}

/* Titles should stay one-line on desktop, but remain flexible on mobile. */
@media (min-width: 900px) {
  .bf-step__title { white-space: nowrap; }
}

.bf-dd-toggle:checked ~ .bf-dd-caret{ background: rgba(15, 23, 42, 0.06); }
.bf-dd-caret:hover{ background: rgba(15, 23, 42, 0.06); }
.bf-dd-caret:focus-visible{ outline: 2px solid rgba(245, 158, 11, 0.55); outline-offset: 2px; }

/* --- Comparison table (Infrastructure) --- */
.bf-compare-table-wrap {
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--bf-surface);
}
.bf-compare-table {
  width: 100%;
  border-collapse: collapse;
}
.bf-compare-table th,
.bf-compare-table td {
  padding: 14px 14px;
  vertical-align: top;
  text-align: right;
  border-top: 1px solid var(--bf-border);
}
.bf-compare-table thead th {
  font-weight: 800;
  border-top: none;
  background: linear-gradient(180deg, rgba(245,158,11,0.10), rgba(245,158,11,0.00));
}
.bf-compare-table tbody th {
  font-weight: 800;
  width: 18%;
  white-space: nowrap;
}
.bf-compare-table td {
  width: 27.3%;
}

@media (max-width: 900px) {
  .bf-compare-table-wrap { overflow-x: auto; }
  .bf-compare-table { min-width: 820px; }
}


/* Equal height cards - WhoItsFor */
.bf-card--fullheight {
    display: flex;
    flex-direction: column;
    height: 100%;
}


/* Platform page: cards + CTAs */
.bf-cta-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
}

.bf-quote-sep{
  margin: 0 10px;
  opacity: .6;
}

.bf-card{
  padding: 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  height: 100%;
  display:flex;
  flex-direction:column;
}

.bf-card-title{ margin-bottom: 6px; }
.bf-card-body{ flex: 1; margin-bottom: 12px; }
.bf-card-cta{ align-self: flex-start; }

.bf-steps{
  margin: 8px 0 0 0;
  padding-right: 18px;
}


/* Platform: module cards (prevent MudGrid from being hijacked by .bf-grid CSS grid) */
.bf-module-grid { margin-top: 18px; }

.bf-module-card{
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  padding: 32px 32px;
  background: var(--bf-surface);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: right;
}

/* Use when the card includes a CTA button (keep CTA pinned while body stays readable). */
.bf-module-card--cta{
  min-height: 340px;
  justify-content: space-between;
}

/* Stack wrapper to vertically center title+body within tall cards. */
.bf-module-card__stack{
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  margin: auto 0;
}

.bf-module-card__title{ margin: 0; font-weight: 800; }
.bf-module-card__body{ opacity: 0.92; line-height: 1.85; width: 100%; }
.bf-module-card__cta{ align-self: flex-start; }

@media (max-width: 900px){
  .bf-module-card{ padding: 28px 22px; min-height: 0; }
  .bf-module-card--cta{ min-height: 0; }
}


.bf-cde-pillars{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  text-align:center;
}

.bf-cde-pillars .bf-quote-sep{
  opacity:0.6;
}


/* =========================
   Commit 2 — BIMFlow Design System v1.1 foundation
   CSS tokens + base layout utilities only; page redesign starts later.
   ========================= */

.bf-container {
  width: min(100% - 2rem, var(--bf-container));
  margin-inline: auto;
}

.bf-container-wide {
  width: min(100% - 2rem, var(--bf-container-wide));
  margin-inline: auto;
}

.bf-container-narrow {
  width: min(100% - 2rem, var(--bf-container-narrow));
  margin-inline: auto;
}

.bf-section,
section.bf-section {
  padding-block: var(--bf-section-y);
}

.bf-section-compact,
section.bf-section-compact {
  padding-block: var(--bf-section-y-compact);
}

/* Existing MudPaper-based pages still use bf-section as a surface until they
   are migrated to the new wrapper components. Plain <section class="bf-section">
   now behaves as spacing-only to avoid the endless-card rhythm. */
section.bf-section {
  display: block;
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.mud-paper.bf-section,
.bf-section.bf-section--surface,
.bf-section.bf-surface {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--bf-shadow-card);
}

.bf-section--cta,
.bf-section-cta {
  border-color: rgba(245, 158, 11, 0.30) !important;
  background:
    linear-gradient(180deg, rgba(255, 247, 237, 0.78), rgba(255, 255, 255, 0.96)) !important;
  box-shadow: 0 14px 40px rgba(245, 158, 11, 0.10) !important;
}

.bf-display {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--bf-text);
}

.bf-page-title {
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bf-text);
}

.bf-section-title {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--bf-text);
}

.bf-card-title {
  font-size: clamp(1.15rem, 1.35vw, 1.35rem);
  line-height: 1.45;
  font-weight: 700;
  color: var(--bf-text);
}

.bf-lead,
.bf-page-lead {
  color: var(--bf-muted);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 2;
}

.bf-body {
  color: var(--bf-text);
  font-size: clamp(1rem, 1.05vw, 1.05rem);
  line-height: 1.95;
}

.bf-meta,
.bf-eyebrow {
  color: var(--bf-accent-dark);
  font-size: clamp(0.8rem, 0.95vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0;
}

.bf-caption {
  color: var(--bf-subtle);
  font-size: clamp(0.75rem, 0.85vw, 0.85rem);
  line-height: 1.65;
}

.bf-surface {
  background: var(--bf-surface);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  box-shadow: var(--bf-shadow-card);
}

.bf-surface-soft {
  background: var(--bf-surface-soft);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
}

.bf-authority-surface {
  background: var(--bf-ink);
  color: #fff;
  border-radius: var(--bf-radius-xl);
  box-shadow: var(--bf-shadow-soft);
}

.bf-grid-auto,
.bf-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--bf-card-gap);
}

.bf-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bf-space-3);
}

.bf-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-4);
}

.bf-stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--bf-space-6);
}

.bf-text-balance {
  text-wrap: balance;
}

.bf-readable {
  max-width: 70ch;
}

.bf-readable-narrow {
  max-width: 58ch;
}

.bf-muted {
  color: var(--bf-muted) !important;
}

.bf-subtle {
  color: var(--bf-subtle) !important;
}

.bf-video-shell {
  aspect-ratio: var(--bf-video-aspect);
  overflow: hidden;
  border-radius: var(--bf-video-radius);
  background: var(--bf-video-bg);
  border: 1px solid var(--bf-video-border);
  box-shadow: var(--bf-shadow-video);
}

@media (max-width: 700px) {
  .bf-container,
  .bf-container-wide,
  .bf-container-narrow {
    width: min(100% - 1.25rem, var(--bf-container));
  }

  .bf-section,
  section.bf-section {
    padding-block: clamp(48px, 10vw, 72px);
  }

  .bf-section-compact,
  section.bf-section-compact {
    padding-block: clamp(36px, 8vw, 56px);
  }

  .mud-paper.bf-section,
  .bf-section.bf-section--surface,
  .bf-section.bf-surface {
    padding: 18px;
    border-radius: var(--bf-radius-md);
  }
}

/* =========================
   Commit 4 — Core BIMFlow wrapper components
   Public pages should compose these wrappers instead of raw MudBlazor primitives.
   ========================= */

.bf-section--warm {
  background: linear-gradient(180deg, rgba(251, 247, 240, 0.74), rgba(255, 255, 255, 0));
}

.bf-section--authority {
  overflow: hidden;
  border-radius: var(--bf-radius-xl);
  background: var(--bf-ink);
  color: #fff;
}

.bf-section-header {
  display: grid;
  gap: clamp(8px, 1.4vw, 14px);
  max-width: 760px;
  margin-bottom: clamp(26px, 4vw, 46px);
  text-align: right;
}

.bf-section-header--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.bf-section-header__eyebrow,
.bf-section-header__title,
.bf-section-header__intro {
  margin: 0;
}

.bf-section-header__content {
  margin-top: 4px;
}

.bf-button {
  --bf-button-bg: var(--bf-ink);
  --bf-button-fg: #fff;
  --bf-button-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.76rem 1.12rem;
  border: 1px solid var(--bf-button-border);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-button-bg);
  color: var(--bf-button-fg);
  font-family: var(--bf-font-sans);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--bf-t-fast), background-color var(--bf-t-fast), border-color var(--bf-t-fast), color var(--bf-t-fast), box-shadow var(--bf-t-fast);
}

.bf-button:hover {
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.10);
}

.bf-button:active {
  transform: translateY(0);
}

.bf-button--primary {
  --bf-button-bg: var(--bf-ink);
  --bf-button-fg: #fff;
}

.bf-button--primary:hover {
  --bf-button-bg: var(--bf-ink-soft);
}

.bf-button--accent {
  --bf-button-bg: var(--bf-accent);
  --bf-button-fg: var(--bf-ink);
}

.bf-button--accent:hover {
  --bf-button-bg: var(--bf-accent-dark);
  --bf-button-fg: #fff;
}

.bf-button--secondary {
  --bf-button-bg: rgba(255, 255, 255, 0.72);
  --bf-button-fg: var(--bf-ink);
  --bf-button-border: var(--bf-border-strong);
}

.bf-button--secondary:hover {
  --bf-button-bg: #fff;
  --bf-button-border: var(--bf-ink);
}

.bf-button--text {
  --bf-button-bg: transparent;
  --bf-button-fg: var(--bf-ink);
  --bf-button-border: transparent;
  padding-inline: 0.35rem;
}

.bf-button--text:hover {
  box-shadow: none;
  color: var(--bf-accent-dark);
}

.bf-button--sm {
  min-height: 38px;
  padding: 0.58rem 0.92rem;
  font-size: 0.86rem;
}

.bf-button--lg {
  min-height: 50px;
  padding: 0.9rem 1.35rem;
  font-size: 1rem;
}

.bf-button--disabled,
.bf-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
  box-shadow: none;
}

.bf-button__icon {
  font-size: 1.1rem !important;
}

.bf-hero-split-section {
  padding-block-start: clamp(52px, 8vw, 104px);
}

.bf-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.88fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.bf-hero-split--reverse {
  grid-template-columns: minmax(320px, 0.88fr) minmax(0, 1.02fr);
}

.bf-hero-split--reverse .bf-hero-split__content {
  order: 2;
}

.bf-hero-split--reverse .bf-hero-split__visual {
  order: 1;
}

.bf-hero-split__content {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  justify-items: start;
  text-align: right;
}

.bf-hero-split__eyebrow,
.bf-hero-split__title,
.bf-hero-split__lead {
  margin: 0;
}

.bf-hero-split__lead {
  max-width: 64ch;
}

.bf-hero-split__body {
  max-width: 68ch;
  color: var(--bf-muted);
}

.bf-hero-split__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.bf-hero-split__visual {
  min-height: clamp(280px, 35vw, 460px);
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 34px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-xl);
  background:
    linear-gradient(135deg, rgba(255, 247, 237, 0.82), rgba(255, 255, 255, 0.96)),
    var(--bf-surface);
  box-shadow: var(--bf-shadow-soft);
  overflow: hidden;
}

.bf-capability-card,
.bf-service-card {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--bf-shadow-card);
  text-align: right;
  transition: transform var(--bf-t-fast), border-color var(--bf-t-fast), box-shadow var(--bf-t-fast);
}

.bf-capability-card:hover,
.bf-service-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.38);
  box-shadow: var(--bf-shadow-soft);
}

.bf-capability-card--featured,
.bf-service-card--featured {
  border-color: rgba(245, 158, 11, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 247, 237, 0.82), rgba(255, 255, 255, 0.98));
}

.bf-capability-card__head,
.bf-service-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
}

.bf-capability-card__index,
.bf-service-card__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.5rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
}

.bf-capability-card__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent-soft);
  color: var(--bf-accent-dark);
}

.bf-capability-card__label,
.bf-service-card__label {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent-soft);
  color: var(--bf-accent-dark);
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.bf-capability-card__title,
.bf-service-card__title {
  margin: 0;
}

.bf-capability-card__body,
.bf-service-card__description {
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-capability-card__content {
  color: var(--bf-muted);
}

.bf-capability-card__outcome,
.bf-service-card__outcome {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--bf-text);
  font-weight: 750;
  line-height: 1.75;
}

.bf-service-card__items {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bf-muted);
}

.bf-service-card__items li {
  position: relative;
  padding-inline-start: 1.05rem;
  line-height: 1.8;
}

.bf-service-card__items li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.82em;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--bf-accent);
}

.bf-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  color: var(--bf-ink);
  font-weight: 850;
  text-decoration: none;
}

.bf-card-link:hover {
  color: var(--bf-accent-dark);
  text-decoration: none;
}

.bf-card-link .mud-icon-root {
  font-size: 1.05rem;
}

.bf-cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid rgba(245, 158, 11, 0.26);
  border-radius: var(--bf-radius-xl);
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.18), transparent 18rem),
    linear-gradient(135deg, rgba(255, 247, 237, 0.94), rgba(255, 255, 255, 0.98));
  box-shadow: var(--bf-shadow-soft);
  text-align: right;
}

.bf-cta-band--dark {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.24), transparent 18rem),
    var(--bf-ink);
  color: #fff;
}

.bf-cta-band__content {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.bf-cta-band__eyebrow,
.bf-cta-band__title,
.bf-cta-band__lead {
  margin: 0;
}

.bf-cta-band--dark .bf-cta-band__title,
.bf-cta-band--dark .bf-cta-band__lead {
  color: #fff;
}

.bf-cta-band--dark .bf-cta-band__lead,
.bf-cta-band--dark .bf-cta-band__body {
  opacity: 0.84;
}

.bf-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 900px) {
  .bf-hero-split,
  .bf-hero-split--reverse {
    grid-template-columns: 1fr;
  }

  .bf-hero-split--reverse .bf-hero-split__content,
  .bf-hero-split--reverse .bf-hero-split__visual {
    order: initial;
  }

  .bf-hero-split__visual {
    min-height: 260px;
  }

  .bf-cta-band {
    grid-template-columns: 1fr;
  }

  .bf-cta-band__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .bf-button {
    width: 100%;
  }

  .bf-hero-split__actions,
  .bf-cta-band__actions {
    width: 100%;
  }

  .bf-capability-card,
  .bf-service-card,
  .bf-cta-band {
    border-radius: var(--bf-radius-md);
  }
}

/* ----- BIMFlow Design System v1.1 structural and video components ----- */
.bf-process-rail {
  --bf-rail-line: rgba(15, 23, 42, 0.12);
  position: relative;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--bf-shadow-card);
}

.bf-process-rail__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bf-process-rail__item {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.bf-process-rail__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(2.4rem + 10px);
  top: 1.18rem;
  width: calc(100% - 2.4rem);
  height: 1px;
  background: var(--bf-rail-line);
}

.bf-process-rail__index {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: #fff;
  font-weight: 900;
  font-size: 0.82rem;
}

.bf-process-rail__label {
  color: var(--bf-text);
  font-weight: 800;
  line-height: 1.7;
}

.bf-process-rail__content {
  margin-top: 22px;
  color: var(--bf-muted);
  line-height: 1.9;
}

.bf-process-rail--compact {
  padding: clamp(14px, 2vw, 22px);
}

.bf-process-rail--vertical .bf-process-rail__list {
  grid-template-columns: 1fr;
}

.bf-process-rail--vertical .bf-process-rail__item {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.bf-process-rail--vertical .bf-process-rail__item:not(:last-child)::after {
  inset-inline-start: 1.18rem;
  top: 2.4rem;
  width: 1px;
  height: calc(100% + 18px);
}

.bf-comparison-panel {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-xl);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--bf-shadow-card);
}

.bf-comparison-panel--compact {
  padding: clamp(18px, 3vw, 30px);
}

.bf-comparison-panel__header {
  margin-bottom: 0;
}

.bf-comparison-panel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
}

.bf-comparison-panel__side {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--bf-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: var(--bf-surface-soft);
}

.bf-comparison-panel__side--before {
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.78), rgba(255, 255, 255, 0.96));
}

.bf-comparison-panel__side--after {
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.72), rgba(255, 255, 255, 0.96));
}

.bf-comparison-panel__side-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-comparison-panel__side-title {
  margin: 0;
}

.bf-comparison-panel__marker {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
}

.bf-comparison-panel__marker--before {
  background: var(--bf-danger);
}

.bf-comparison-panel__marker--after {
  background: var(--bf-success);
}

.bf-comparison-panel__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bf-muted);
}

.bf-comparison-panel__list li {
  position: relative;
  padding-inline-start: 1.1rem;
  line-height: 1.9;
}

.bf-comparison-panel__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.85em;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

.bf-comparison-panel__body {
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-authority-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  padding: clamp(28px, 5vw, 58px);
  border-radius: var(--bf-radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.20), transparent 20rem),
    var(--bf-ink);
  color: #fff;
  box-shadow: var(--bf-shadow-soft);
}

.bf-authority-band__marker {
  width: 0.48rem;
  min-height: 100%;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent);
}

.bf-authority-band__content {
  display: grid;
  gap: 12px;
  max-width: 880px;
}

.bf-authority-band__eyebrow,
.bf-authority-band__title,
.bf-authority-band__lead {
  margin: 0;
}

.bf-authority-band__eyebrow {
  color: var(--bf-accent);
}

.bf-authority-band__title,
.bf-authority-band__lead,
.bf-authority-band__body {
  color: #fff;
}

.bf-authority-band__lead,
.bf-authority-band__body {
  opacity: 0.86;
}

.bf-service-detail__authority .bf-authority-band__body {
  margin-top: clamp(0.6rem, 1.5vw, 1rem);
  padding-top: clamp(1rem, 2vw, 1.35rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.bf-service-detail__authority .bf-authority-band__note {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  font-weight: 650;
  line-height: 2;
}

.bf-service-detail__authority .bf-authority-band__note a {
  color: var(--bf-accent);
  font-weight: 850;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.bf-diagram-card {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(260px, 1fr);
  gap: clamp(20px, 3vw, 38px);
  align-items: stretch;
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-xl);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--bf-shadow-card);
}

.bf-diagram-card--dark {
  border-color: rgba(255, 255, 255, 0.12);
  background: var(--bf-ink);
  color: #fff;
}

.bf-diagram-card__content {
  display: grid;
  align-content: start;
  gap: 12px;
}

.bf-diagram-card__eyebrow,
.bf-diagram-card__title,
.bf-diagram-card__lead {
  margin: 0;
}

.bf-diagram-card__lead {
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-diagram-card--dark .bf-diagram-card__title,
.bf-diagram-card--dark .bf-diagram-card__lead {
  color: #fff;
}

.bf-diagram-card--dark .bf-diagram-card__lead {
  opacity: 0.82;
}

.bf-diagram-card__items {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--bf-muted);
}

.bf-diagram-card__items li {
  position: relative;
  padding-inline-start: 1.1rem;
  line-height: 1.8;
}

.bf-diagram-card__items li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.82em;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--bf-accent);
}

.bf-diagram-card__visual {
  display: grid;
  place-items: stretch;
  min-height: 240px;
  padding: clamp(16px, 2.8vw, 28px);
  border-radius: var(--bf-radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.10);
  background:
    linear-gradient(135deg, rgba(255, 247, 237, 0.82), rgba(255, 255, 255, 0.96));
}

.bf-diagram-card--dark .bf-diagram-card__visual {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

.bf-diagram-card__nodes {
  display: grid;
  align-content: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bf-diagram-card__nodes li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--bf-radius-md);
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.9);
  color: var(--bf-text);
  font-weight: 850;
  text-align: center;
}

.bf-diagram-card__nodes li:not(:last-child)::after {
  content: "↓";
  position: absolute;
  inset-block-end: -1.2rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  color: var(--bf-accent-dark);
  font-weight: 900;
}

.bf-diagram-card--dark .bf-diagram-card__nodes li {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.bf-video-explainer {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(300px, 1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
  padding: clamp(24px, 5vw, 52px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-xl);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--bf-shadow-soft);
}

.bf-video-explainer--reverse .bf-video-explainer__content {
  order: 2;
}

.bf-video-explainer--reverse .bf-video-explainer__media {
  order: 1;
}

.bf-video-explainer--compact {
  padding: clamp(20px, 3vw, 34px);
}

.bf-video-explainer__content,
.bf-video-explainer__media {
  display: grid;
  gap: 14px;
}

.bf-video-explainer__eyebrow,
.bf-video-explainer__title,
.bf-video-explainer__description,
.bf-video-explainer__duration {
  margin: 0;
}

.bf-video-explainer__duration {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 0.35rem 0.72rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent-soft);
  color: var(--bf-accent-dark);
  font-weight: 800;
}

.bf-video-explainer__duration .mud-icon-root {
  font-size: 1rem;
}

.bf-video-explainer__body {
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-video-explainer__shell iframe,
.bf-video-shell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.bf-video-explainer__thumbnail {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--bf-video-radius);
  background: var(--bf-video-bg);
  box-shadow: var(--bf-shadow-video);
  aspect-ratio: var(--bf-video-aspect);
}

.bf-video-explainer__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.86;
  transition: transform var(--bf-t-medium), opacity var(--bf-t-fast);
}

.bf-video-explainer__thumbnail:hover img {
  transform: scale(1.02);
  opacity: 0.74;
}

.bf-video-explainer__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent);
  color: var(--bf-ink);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.24);
}

.bf-video-explainer__play .mud-icon-root {
  font-size: 2.2rem;
}

.bf-video-explainer__placeholder {
  position: relative;
  display: grid;
  place-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
}

.bf-video-explainer__placeholder .mud-icon-root {
  font-size: 3.2rem;
  color: var(--bf-accent);
}

.bf-video-summary {
  display: grid;
  gap: 12px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-surface-soft);
}

.bf-video-summary__title {
  margin: 0;
}

.bf-video-summary__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bf-video-summary__list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--bf-muted);
  line-height: 1.85;
}

.bf-video-summary__index {
  color: var(--bf-accent-dark);
  font-weight: 900;
  font-size: 0.86rem;
}

.bf-video-summary__content {
  color: var(--bf-muted);
  line-height: 1.9;
}

.bf-transcript-toggle {
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: var(--bf-radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.bf-transcript-toggle__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  color: var(--bf-text);
  font-weight: 850;
  list-style: none;
}

.bf-transcript-toggle__summary::-webkit-details-marker {
  display: none;
}

.bf-transcript-toggle__summary .mud-icon-root {
  transition: transform var(--bf-t-fast);
}

.bf-transcript-toggle[open] .bf-transcript-toggle__summary .mud-icon-root {
  transform: rotate(180deg);
}

.bf-transcript-toggle__content {
  padding: 0 1rem 1rem;
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-transcript-toggle__content > :first-child {
  margin-top: 0;
}

.bf-transcript-toggle__content > :last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .bf-comparison-panel__grid,
  .bf-diagram-card,
  .bf-video-explainer,
  .bf-video-explainer--reverse {
    grid-template-columns: 1fr;
  }

  .bf-video-explainer--reverse .bf-video-explainer__content,
  .bf-video-explainer--reverse .bf-video-explainer__media {
    order: initial;
  }

  .bf-process-rail__list {
    grid-template-columns: 1fr;
  }

  .bf-process-rail__item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .bf-process-rail__item:not(:last-child)::after {
    inset-inline-start: 1.18rem;
    top: 2.4rem;
    width: 1px;
    height: calc(100% + 18px);
  }
}

@media (max-width: 560px) {
  .bf-process-rail,
  .bf-comparison-panel,
  .bf-authority-band,
  .bf-diagram-card,
  .bf-video-explainer {
    border-radius: var(--bf-radius-md);
  }

  .bf-authority-band {
    grid-template-columns: 1fr;
  }

  .bf-authority-band__marker {
    width: 4rem;
    min-height: 0.35rem;
  }

  .bf-video-explainer__play {
    width: 3.7rem;
    height: 3.7rem;
  }
}

/* ----- Commit 6: Services reference page ----- */
/* /services uses the shared neutral page canvas. Section differentiation is
   handled by the Visual Grammar implementation later in this stylesheet. */
.bf-services-reference {
  background: transparent;
}

.bf-services-reference__hero {
  padding-block-end: clamp(48px, 6vw, 88px);
}

.bf-services-hero-map {
  width: min(100%, 440px);
  display: grid;
  gap: 14px;
  align-content: center;
}

.bf-services-hero-map__node {
  display: grid;
  gap: 6px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--bf-shadow-card);
  text-align: right;
}

.bf-services-hero-map__node span {
  color: var(--bf-subtle);
  font-size: 0.82rem;
  font-weight: 800;
}

.bf-services-hero-map__node strong {
  color: var(--bf-text);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.55;
}

.bf-services-hero-map__node--risk {
  border-color: rgba(185, 28, 28, 0.22);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.84), rgba(255, 255, 255, 0.92));
}

.bf-services-hero-map__node--controlled {
  border-color: rgba(4, 120, 87, 0.24);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.84), rgba(255, 255, 255, 0.92));
}

.bf-services-capability-grid,
.bf-services-grid,
.bf-services-insights-grid {
  display: grid;
  gap: var(--bf-card-gap);
}

.bf-services-capability-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(26px, 4vw, 42px);
}

.bf-services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(26px, 4vw, 44px);
}

.bf-services-grid > .bf-service-card {
  min-height: 100%;
}

.bf-services-insights-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(24px, 3.5vw, 38px);
}

.bf-service-detail__emphasis a {
  color: var(--bf-accent-dark);
  font-weight: 850;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.bf-services-reference__process .bf-process-rail {
  margin-top: clamp(24px, 3.5vw, 38px);
}

.bf-services-evidence-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: 1120px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--bf-radius-xl);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: var(--bf-shadow-soft);
}

.bf-services-evidence-item {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 180px;
  padding: clamp(22px, 3vw, 30px);
  overflow: hidden;
  background: var(--bf-ink);
  color: #fff;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.bf-services-evidence-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: -34px;
  inset-block-start: -42px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 50%;
}

.bf-services-evidence-item::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.18;
  background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(135deg, black, transparent 72%);
}

.bf-services-evidence-item:hover,
.bf-services-evidence-item:focus-visible {
  background: var(--bf-ink-soft);
  outline: none;
}

.bf-services-evidence-item span {
  color: var(--bf-accent);
  font-size: 0.78rem;
  font-weight: 900;
}

.bf-services-evidence-item strong {
  font-size: clamp(1rem, 1.65vw, 1.2rem);
  line-height: 1.8;
}

.bf-services-evidence-item small {
  margin-top: auto;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 750;
}

.bf-services-evidence-item--optimization small,
.bf-services-evidence-item--training small {
  color: #6ee7b7;
}

.bf-services-boundary-matrix {
  max-width: 1120px;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: #fff;
  box-shadow: var(--bf-shadow-card);
}

.bf-services-boundary-matrix__header,
.bf-services-boundary-matrix__row {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr 1.25fr 1.05fr;
}

.bf-services-boundary-matrix__header {
  background: var(--bf-ink);
  color: #fff;
}

.bf-services-boundary-matrix__header span,
.bf-services-boundary-matrix__row > * {
  min-width: 0;
  padding: 16px 18px;
  line-height: 1.75;
}

.bf-services-boundary-matrix__header span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  font-weight: 850;
}

.bf-services-boundary-matrix__row:not(:last-child) {
  border-block-end: 1px solid var(--bf-border);
}

.bf-services-boundary-matrix__row > *:not(:last-child),
.bf-services-boundary-matrix__header span:not(:last-child) {
  border-inline-end: 1px solid rgba(216, 224, 236, 0.72);
}

.bf-services-boundary-matrix__row strong {
  color: var(--bf-text);
  font-size: 0.9rem;
}

.bf-services-boundary-matrix__row span {
  color: var(--bf-muted);
  font-size: 0.84rem;
}

.bf-services-insight-card {
  position: relative;
  overflow: hidden;
  padding-block-start: 94px;
}

.bf-services-insight-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 70px;
  border-block-end: 1px solid var(--bf-border);
  background-color: var(--bf-surface-soft);
  background-repeat: no-repeat;
}

.bf-services-insight-card--scope::before {
  background-image:
    radial-gradient(circle at 22% 50%, var(--bf-accent) 0 5px, transparent 6px),
    radial-gradient(circle at 50% 50%, var(--bf-ink) 0 8px, transparent 9px),
    radial-gradient(circle at 78% 50%, var(--bf-success) 0 5px, transparent 6px),
    linear-gradient(90deg, transparent 22%, rgba(15, 23, 42, 0.22) 22% 78%, transparent 78%);
}

.bf-services-insight-card--roles::before {
  background-image:
    linear-gradient(90deg, transparent 14%, rgba(245, 158, 11, 0.16) 14% 34%, transparent 34% 40%, rgba(15, 23, 42, 0.1) 40% 60%, transparent 60% 66%, rgba(4, 120, 87, 0.14) 66% 86%, transparent 86%);
}

.bf-services-insight-card--outsourcing::before {
  background-image:
    linear-gradient(135deg, transparent 0 42%, rgba(185, 28, 28, 0.42) 42% 44%, transparent 44%),
    linear-gradient(45deg, transparent 0 54%, rgba(245, 158, 11, 0.7) 54% 57%, transparent 57%);
}

.bf-services-reference__authority .bf-authority-band,
.bf-services-reference__cta .bf-cta-band {
  margin-inline: auto;
}

@media (max-width: 1100px) {
  .bf-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .bf-services-capability-grid,
  .bf-services-insights-grid {
    grid-template-columns: 1fr;
  }

  .bf-services-evidence-strip {
    grid-template-columns: 1fr;
    gap: 1px;
  }

  .bf-services-evidence-item {
    min-height: 145px;
  }

  .bf-services-boundary-matrix__header {
    display: none;
  }

  .bf-services-boundary-matrix {
    display: grid;
    gap: 14px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .bf-services-boundary-matrix__row {
    grid-template-columns: 1fr;
    overflow: hidden;
    border: 1px solid var(--bf-border) !important;
    border-radius: var(--bf-radius-md);
    background: #fff;
    box-shadow: var(--bf-shadow-card);
  }

  .bf-services-boundary-matrix__row > * {
    display: grid;
    grid-template-columns: minmax(118px, 0.42fr) minmax(0, 1fr);
    gap: 12px;
    padding: 12px 16px;
    border: 0 !important;
  }

  .bf-services-boundary-matrix__row > *::before {
    content: attr(data-label);
    color: var(--bf-subtle);
    font-size: 0.72rem;
    font-weight: 850;
  }
}

@media (max-width: 700px) {
  .bf-services-grid {
    grid-template-columns: 1fr;
  }

  .bf-services-boundary-matrix__row > * {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ----- Commit 7: BIM Governance service detail reference page ----- */
.bf-service-detail {
  background:
    radial-gradient(circle at 82% 10%, rgba(245, 158, 11, 0.10), transparent 26rem),
    radial-gradient(circle at 12% 30%, rgba(3, 105, 161, 0.055), transparent 28rem);
}

.bf-service-detail__hero {
  padding-block-end: clamp(46px, 6vw, 86px);
}

.bf-governance-hero-stack {
  width: min(100%, 460px);
  display: grid;
  gap: 14px;
  align-content: center;
}

.bf-governance-hero-stack__node {
  display: grid;
  gap: 6px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--bf-shadow-card);
  text-align: right;
}

.bf-governance-hero-stack__node span {
  color: var(--bf-subtle);
  font-size: 0.82rem;
  font-weight: 850;
}

.bf-governance-hero-stack__node strong {
  color: var(--bf-text);
  font-size: clamp(1.02rem, 1.55vw, 1.28rem);
  line-height: 1.6;
}

.bf-governance-hero-stack__node--risk {
  border-color: rgba(185, 28, 28, 0.22);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.84), rgba(255, 255, 255, 0.92));
}

.bf-governance-hero-stack__node--controlled {
  border-color: rgba(4, 120, 87, 0.24);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.84), rgba(255, 255, 255, 0.92));
}

.bf-governance-hero-stack__gate {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  margin-inline: auto;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-weight: 900;
  box-shadow: var(--bf-shadow-card);
}

.bf-service-detail-grid,
.bf-service-detail-fit-grid {
  display: grid;
  gap: var(--bf-card-gap);
  margin-top: clamp(24px, 3.5vw, 40px);
}

.bf-service-detail-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bf-service-detail-grid--three,
.bf-service-detail-fit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bf-service-detail__process .bf-process-rail {
  margin-top: clamp(24px, 3.5vw, 38px);
}

.bf-service-detail__video .bf-video-explainer,
.bf-service-detail__authority .bf-authority-band,
.bf-service-detail__cta .bf-cta-band {
  margin-inline: auto;
}

.bf-service-detail__system .bf-diagram-card {
  margin-top: 0;
}

.bf-service-detail--governance .bf-diagram-card__nodes li:first-child,
.bf-service-detail--governance .bf-diagram-card__nodes li:nth-child(2) {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 247, 237, 0.82);
}

.bf-service-detail--governance .bf-diagram-card__nodes li:last-child {
  border-color: rgba(4, 120, 87, 0.22);
  background: rgba(240, 253, 244, 0.82);
}

@media (max-width: 1120px) {
  .bf-service-detail-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .bf-service-detail-grid--four,
  .bf-service-detail-grid--three,
  .bf-service-detail-fit-grid {
    grid-template-columns: 1fr;
  }
}

/* ----- Commit 8: Homepage reference redesign ----- */
.bf-home-reference {
  background:
    radial-gradient(circle at 84% 8%, rgba(245, 158, 11, 0.11), transparent 28rem),
    radial-gradient(circle at 12% 32%, rgba(3, 105, 161, 0.055), transparent 28rem);
}

.bf-home-reference__hero {
  padding-block-end: clamp(48px, 6vw, 90px);
}

.bf-home-control-map {
  width: min(100%, 470px);
  display: grid;
  gap: 14px;
  align-content: center;
}

.bf-home-control-map__node {
  display: grid;
  gap: 7px;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--bf-shadow-card);
  text-align: right;
}

.bf-home-control-map__node span {
  color: var(--bf-subtle);
  font-size: 0.82rem;
  font-weight: 850;
}

.bf-home-control-map__node strong {
  color: var(--bf-text);
  font-size: clamp(1.02rem, 1.55vw, 1.3rem);
  line-height: 1.6;
}

.bf-home-control-map__node--risk {
  border-color: rgba(185, 28, 28, 0.22);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.86), rgba(255, 255, 255, 0.92));
}

.bf-home-control-map__node--controlled {
  border-color: rgba(4, 120, 87, 0.24);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.86), rgba(255, 255, 255, 0.92));
}

.bf-home-control-map__gate {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  margin-inline: auto;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-weight: 900;
  box-shadow: var(--bf-shadow-card);
}

.bf-home-services-grid,
.bf-home-insights-grid {
  display: grid;
  gap: var(--bf-card-gap);
  margin-top: clamp(26px, 4vw, 44px);
}

.bf-home-services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bf-home-services-grid > .bf-service-card:nth-child(2) {
  min-height: 100%;
}

.bf-home-services-grid > .bf-service-card:last-child {
  grid-column: 1 / -1;
}

.bf-home-insights-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bf-home-reference__video .bf-video-explainer,
.bf-home-reference__authority .bf-authority-band,
.bf-home-reference__cta .bf-cta-band {
  margin-inline: auto;
}

.bf-home-reference__method .bf-process-rail {
  margin-top: clamp(24px, 3.5vw, 38px);
}

.bf-home-reference__system .bf-diagram-card {
  margin-top: 0;
}

.bf-home-reference__system .bf-diagram-card__nodes li:nth-child(2),
.bf-home-reference__system .bf-diagram-card__nodes li:nth-child(4) {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 247, 237, 0.82);
}

.bf-home-reference__system .bf-diagram-card__nodes li:last-child {
  border-color: rgba(4, 120, 87, 0.22);
  background: rgba(240, 253, 244, 0.82);
}

@media (max-width: 960px) {
  .bf-home-services-grid,
  .bf-home-insights-grid {
    grid-template-columns: 1fr;
  }

  .bf-home-services-grid > .bf-service-card:last-child {
    grid-column: auto;
  }
}

/* ----- Commit 9: Contact reference redesign ----- */
.bf-contact-reference {
  background: var(--bf-bg);
}

.bf-contact-reference__hero {
  padding-block-end: clamp(46px, 6vw, 86px);
}

.bf-contact-handoff-map {
  width: min(100%, 470px);
  display: grid;
  gap: 14px;
  align-content: center;
}

.bf-contact-handoff-map__node {
  display: grid;
  gap: 7px;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--bf-shadow-card);
  text-align: right;
}

.bf-contact-handoff-map__node span {
  color: var(--bf-subtle);
  font-size: 0.82rem;
  font-weight: 850;
}

.bf-contact-handoff-map__node strong {
  color: var(--bf-text);
  font-size: clamp(1.02rem, 1.55vw, 1.3rem);
  line-height: 1.6;
}

.bf-contact-handoff-map__node--input {
  border-color: rgba(245, 158, 11, 0.24);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.86), rgba(255, 255, 255, 0.92));
}

.bf-contact-handoff-map__node--output {
  border-color: rgba(4, 120, 87, 0.24);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.86), rgba(255, 255, 255, 0.92));
}

.bf-contact-handoff-map__gate {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  margin-inline: auto;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-weight: 900;
  box-shadow: var(--bf-shadow-card);
}

.bf-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}

.bf-contact-panel {
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-xl);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--bf-shadow-soft);
  padding: clamp(24px, 4vw, 42px);
  text-align: right;
}

.bf-contact-panel__header {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.bf-contact-panel__title,
.bf-contact-panel__intro,
.bf-contact-panel__eyebrow,
.bf-contact-panel__response,
.bf-contact-panel__note {
  margin: 0;
}

.bf-contact-panel__response {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0.45rem 0.75rem;
  border-radius: var(--bf-radius-pill);
  color: var(--bf-ink);
  background: var(--bf-accent-soft);
  border: 1px solid rgba(245, 158, 11, 0.22);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.7;
}

.bf-contact-panel__body {
  min-width: 0;
}

.bf-contact-panel__note {
  margin-top: 16px;
  color: var(--bf-subtle);
  font-size: 0.9rem;
  line-height: 1.8;
}

.bf-contact-sidebar {
  display: grid;
  gap: clamp(18px, 2.6vw, 28px);
}

.bf-contact-sidebar .bf-section-header {
  margin-bottom: 0;
}

.bf-contact-guidance-grid,
.bf-contact-intent-grid {
  display: grid;
  gap: var(--bf-card-gap);
}

.bf-contact-intent-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(26px, 4vw, 44px);
}

.bf-contact-reference__next .bf-process-rail {
  margin-top: clamp(24px, 3.5vw, 38px);
}

.bf-contact-reference__trust .bf-authority-band {
  margin-inline: auto;
}

.bf-contact-reference__form .bf-contact-panel {
  width: min(100%, 900px);
  margin-inline: auto;
}

.bf-contact-reference__form .bf-contact-panel__intro {
  text-align: justify;
  text-align-last: right;
}

.bf-contact-panel .bf-plain-form {
  display: grid;
  gap: 16px;
}

.bf-contact-panel .bf-plain-form .form {
  max-width: none;
  margin: 0;
  display: grid;
  gap: 8px;
}

.bf-contact-panel .bf-plain-form label {
  color: var(--bf-text);
  font-weight: 800;
  line-height: 1.7;
}

.bf-contact-panel .bf-plain-form input:not([type="checkbox"]),
.bf-contact-panel .bf-plain-form textarea {
  width: 100%;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface-soft);
  color: var(--bf-text);
  font: inherit;
  line-height: 1.8;
  padding: 0.85rem 1rem;
  transition: border-color var(--bf-t-fast), box-shadow var(--bf-t-fast), background var(--bf-t-fast);
}

.bf-contact-panel .bf-plain-form textarea {
  min-height: 150px;
  resize: vertical;
}

.bf-contact-panel .bf-plain-form input:not([type="checkbox"]):focus,
.bf-contact-panel .bf-plain-form textarea:focus {
  border-color: rgba(245, 158, 11, 0.72);
  background: var(--bf-surface);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
  outline: none;
}

.bf-contact-panel .bf-plain-form input[type="checkbox"] {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin-inline-end: 0.4rem;
  accent-color: var(--bf-accent);
}

.bf-contact-panel .bf-plain-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 10rem;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: #fff;
  font: inherit;
  font-weight: 900;
  line-height: 1.6;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
  box-shadow: var(--bf-shadow-card);
  transition: transform var(--bf-t-fast), background var(--bf-t-fast), box-shadow var(--bf-t-fast);
}

.bf-contact-panel .bf-plain-form button[type="submit"]:hover {
  transform: translateY(-1px);
  background: var(--bf-ink-soft);
  box-shadow: var(--bf-shadow-soft);
}

.bf-contact-panel .bf-plain-form .ok,
.bf-contact-panel .bf-plain-form .err {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: var(--bf-radius-md);
  font-weight: 750;
  line-height: 1.8;
}

.bf-contact-panel .bf-plain-form .ok {
  color: var(--bf-success);
  background: rgba(240, 253, 244, 0.9);
  border: 1px solid rgba(4, 120, 87, 0.20);
}

.bf-contact-panel .bf-plain-form .err {
  color: var(--bf-danger);
  background: rgba(254, 242, 242, 0.9);
  border: 1px solid rgba(185, 28, 28, 0.20);
}

@media (max-width: 1120px) {
  .bf-contact-layout,
  .bf-contact-intent-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .bf-contact-panel {
    padding: 20px;
    border-radius: var(--bf-radius-lg);
  }

  .bf-contact-panel .bf-plain-form button[type="submit"] {
    width: 100%;
  }
}

/* BIMFlow CDE concept page reference implementation */
.bf-cde-concept-page {
  background:
    radial-gradient(circle at 82% 4%, rgba(245, 158, 11, 0.10), transparent 30rem),
    radial-gradient(circle at 10% 36%, rgba(3, 105, 161, 0.06), transparent 28rem);
}

.bf-cde-concept-page__hero {
  padding-block-end: clamp(44px, 6vw, 86px);
}

.bf-cde-state-stack {
  width: min(100%, 500px);
  display: grid;
  gap: 10px;
  align-content: center;
}

.bf-cde-state-stack__node {
  display: grid;
  gap: 6px;
  padding: clamp(15px, 2.3vw, 22px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: var(--bf-shadow-card);
  text-align: right;
}

.bf-cde-state-stack__node span {
  color: var(--bf-subtle);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bf-cde-state-stack__node strong {
  color: var(--bf-text);
  font-size: clamp(0.98rem, 1.4vw, 1.18rem);
  line-height: 1.65;
}

.bf-cde-state-stack__node--work {
  border-color: rgba(3, 105, 161, 0.22);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.88), rgba(255, 255, 255, 0.94));
}

.bf-cde-state-stack__node--published {
  border-color: rgba(4, 120, 87, 0.24);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.88), rgba(255, 255, 255, 0.94));
}

.bf-cde-state-stack__node--archive {
  border-color: rgba(100, 116, 139, 0.24);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.94));
}

.bf-cde-state-stack__gate {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline: auto;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-weight: 950;
  box-shadow: var(--bf-shadow-card);
}

.bf-cde-concept-page__flow .bf-section-header,
.bf-cde-concept-page__capabilities .bf-section-header {
  max-width: 860px;
}

.bf-cde-flow-diagram {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  width: 100%;
}

.bf-cde-flow-diagram__step {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(15px, 2vw, 20px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  text-align: right;
}

.bf-cde-flow-diagram__step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent-soft);
  color: var(--bf-accent-dark);
  font-weight: 950;
}

.bf-cde-flow-diagram__step strong {
  color: var(--bf-text);
  font-size: 1.02rem;
  line-height: 1.7;
}

.bf-cde-flow-diagram__step small {
  color: var(--bf-muted);
  font-size: 0.88rem;
  line-height: 1.8;
}

.bf-cde-flow-diagram__step--gate {
  border-color: rgba(245, 158, 11, 0.28);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.90), rgba(255, 255, 255, 0.94));
}

.bf-cde-flow-diagram__step--official {
  border-color: rgba(4, 120, 87, 0.24);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.90), rgba(255, 255, 255, 0.94));
}

.bf-cde-flow-diagram__arrow {
  display: none;
}

.bf-cde-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bf-card-gap);
  margin-top: clamp(28px, 4vw, 46px);
}

.bf-cde-layer-model {
  width: min(100%, 560px);
  display: grid;
  gap: 12px;
}

.bf-cde-layer-model__layer {
  display: grid;
  gap: 7px;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  color: var(--bf-text);
  box-shadow: var(--bf-shadow-card);
  text-align: right;
}

.bf-cde-layer-model__layer span {
  color: var(--bf-subtle);
  font-size: 0.8rem;
  font-weight: 950;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bf-cde-layer-model__layer strong {
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  line-height: 1.7;
}

.bf-cde-layer-model__layer--engine {
  border-color: rgba(245, 158, 11, 0.30);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.92), rgba(255, 255, 255, 0.94));
}

.bf-cde-layer-model__layer--cde {
  border-color: rgba(3, 105, 161, 0.24);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.94));
}

.bf-cde-layer-model__layer--execution {
  border-color: rgba(4, 120, 87, 0.24);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.92), rgba(255, 255, 255, 0.94));
}

.bf-cde-layer-model__connector {
  width: fit-content;
  margin-inline: auto;
  padding: 0.35rem 0.75rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.bf-cde-concept-page__authority .bf-authority-band,
.bf-cde-concept-page__cta .bf-cta-band {
  margin-inline: auto;
}

@media (max-width: 1180px) {
  .bf-cde-capability-grid,
  .bf-cde-flow-diagram {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .bf-cde-capability-grid,
  .bf-cde-flow-diagram {
    grid-template-columns: 1fr;
  }

  .bf-cde-state-stack,
  .bf-cde-layer-model {
    width: 100%;
  }
}

/* ----- Commit 11: Remaining service detail pages ----- */
.bf-service-hero-stack {
  width: min(100%, 470px);
  display: grid;
  gap: 14px;
  align-content: center;
}

.bf-service-hero-stack__node {
  display: grid;
  gap: 6px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: var(--bf-shadow-card);
  text-align: right;
}

.bf-service-hero-stack__node span {
  color: var(--bf-subtle);
  font-size: 0.82rem;
  font-weight: 850;
}

.bf-service-hero-stack__node strong {
  color: var(--bf-text);
  font-size: clamp(1rem, 1.5vw, 1.24rem);
  line-height: 1.65;
}

.bf-service-hero-stack__node--risk {
  border-color: rgba(185, 28, 28, 0.22);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.84), rgba(255, 255, 255, 0.94));
}

.bf-service-hero-stack__node--controlled {
  border-color: rgba(4, 120, 87, 0.24);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.84), rgba(255, 255, 255, 0.94));
}

.bf-service-hero-stack__gate {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  margin-inline: auto;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-weight: 900;
  box-shadow: var(--bf-shadow-card);
}

.bf-service-detail--consultancy .bf-diagram-card__nodes li:first-child,
.bf-service-detail--implementation .bf-diagram-card__nodes li:first-child,
.bf-service-detail--training .bf-diagram-card__nodes li:first-child {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 247, 237, 0.82);
}

.bf-service-detail--consultancy .bf-diagram-card__nodes li:last-child,
.bf-service-detail--implementation .bf-diagram-card__nodes li:last-child,
.bf-service-detail--training .bf-diagram-card__nodes li:last-child {
  border-color: rgba(4, 120, 87, 0.22);
  background: rgba(240, 253, 244, 0.82);
}

.bf-service-detail--cde-strategy .bf-cde-state-stack {
  width: min(100%, 470px);
}

.bf-service-detail--cde-strategy .bf-cde-layer-model {
  width: min(100%, 540px);
}

@media (max-width: 720px) {
  .bf-service-hero-stack {
    width: 100%;
  }
}

/* =========================
   Commit 12 — Insight template redesign
   ========================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bf-insight-template__hero-section {
  padding-bottom: var(--bf-section-y-compact);
}

.bf-insight-template__header {
  display: grid;
  gap: 1rem;
  max-width: var(--bf-container-narrow);
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

.bf-insight-template__breadcrumbs {
  width: 100%;
  margin-bottom: .25rem;
  text-align: right;
}

.bf-insight-template__meta-row,
.bf-insight-template__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}

.bf-insight-template__type,
.bf-insight-template__meta,
.bf-insight-template__tag,
.bf-insight-card__label,
.bf-insight-card__meta,
.bf-insight-card__tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: var(--bf-radius-pill);
  border: 1px solid var(--bf-border);
  background: rgba(255, 255, 255, .74);
  color: var(--bf-muted);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.4;
  padding: .34rem .65rem;
}

.bf-insight-template__meta {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-inline: 0;
}

.bf-insight-template__meta + .bf-insight-template__meta::before {
  content: "·";
  margin-left: .6rem;
  color: var(--bf-border-strong, #94a3b8);
}

.bf-insight-template__type,
.bf-insight-card__label {
  border-color: rgba(245, 158, 11, .38);
  background: var(--bf-accent-soft);
  color: var(--bf-accent-dark);
}

.bf-insight-template__title {
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
  text-align-last: center;
}

.bf-insight-template__lead {
  max-width: 68ch;
  margin: 0 auto;
  text-align: center;
  text-align-last: center;
}

.bf-insight-template__body-section {
  padding-top: 0;
}

.bf-insight-template__layout {
  width: min(100%, 1100px);
  margin-inline: auto;
}

.bf-insight-template__main {
  min-width: 0;
  display: grid;
  gap: 1.5rem;
}

.bf-insight-template__article,
.bf-insight-template__aside-card {
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--bf-shadow-card);
}

.bf-insight-template__article {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.bf-insight-template__prose {
  width: 100%;
  max-width: 94ch;
  margin-inline: auto;
}

.bf-reading-column {
  width: min(100%, 1100px);
  margin-inline: auto;
}

.bf-reading-column > .bf-content-surface > .bf-prose {
  width: 100%;
  max-width: 94ch;
  margin-inline: auto;
}

.bf-insight-template__prose :where(p, li),
.bf-reading-column > .bf-content-surface > .bf-prose :where(p, li) {
  direction: rtl;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}

.bf-article-questions {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 1px solid var(--bf-border);
  border-right: 4px solid var(--bf-accent);
  border-radius: var(--bf-radius-md);
  background: rgba(255, 247, 237, .62);
}

.bf-article-questions__title {
  margin: 0 0 .85rem;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.65;
}

.bf-article-questions__list {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding-right: 1.2rem;
}

.bf-article-questions__list li::marker {
  color: var(--bf-accent-dark);
}

.bf-article-questions__list a {
  color: var(--bf-text);
  text-decoration-color: rgba(245, 158, 11, .65);
  text-underline-offset: .22em;
}

.bf-article-questions__list a:hover {
  color: var(--bf-accent-dark);
}

.bf-insight-template__service-cta .bf-cta-band {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  margin-top: 0;
  text-align: center;
}

.bf-insight-template__service-cta .bf-cta-band__content {
  width: min(100%, 760px);
  max-width: none;
  justify-items: center;
}

.bf-insight-template__service-cta :where(
  .bf-cta-band__eyebrow,
  .bf-cta-band__title,
  .bf-cta-band__lead,
  .bf-cta-band__body
) {
  width: 100%;
  text-align: center;
}

.bf-insight-template__service-cta .bf-cta-band__body p {
  margin-inline: auto;
  text-align: center;
  text-align-last: center;
}

.bf-insight-template__service-cta .bf-cta-band__actions {
  width: 100%;
  justify-content: center;
}

.bf-insight-template__aside {
  position: sticky;
  top: 5.5rem;
  display: grid;
  gap: 1rem;
}

.bf-insight-template__aside-card {
  padding: 1rem;
}

.bf-insight-template__decision-card {
  display: grid;
  gap: .75rem;
  background:
    linear-gradient(135deg, rgba(255, 247, 237, .96), rgba(255, 255, 255, .92));
}

.bf-insight-template__decision-card p {
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.9;
}

.bf-insight-template__aside-insight + .bf-insight-template__aside-insight {
  margin-top: .75rem;
}


.bf-insight-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: rgba(255, 255, 255, .86);
  padding: 1rem;
  transition: transform var(--bf-t-fast), border-color var(--bf-t-fast), box-shadow var(--bf-t-fast);
}

.bf-insight-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, .58);
  box-shadow: var(--bf-shadow-card);
}

.bf-insight-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .75rem;
}

.bf-insight-card__title {
  margin: 0;
  line-height: 1.55;
}

.bf-insight-card__excerpt {
  margin: .55rem 0 0;
  color: var(--bf-muted);
  line-height: 1.9;
}

.bf-insight-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .85rem;
}

.bf-insight-card__tag {
  padding: .26rem .55rem;
  font-size: .76rem;
  font-weight: 650;
}

.bf-insight-card__link {
  margin-top: .9rem;
}

.bf-insight-card--featured {
  background:
    linear-gradient(180deg, rgba(255, 247, 237, .86), rgba(255, 255, 255, .92));
}

@media (max-width: 980px) {
  .bf-insight-template__layout {
    grid-template-columns: 1fr;
  }

  .bf-insight-template__aside {
    position: static;
  }
}

@media (max-width: 640px) {
  .bf-insight-template__title {
    max-width: none;
  }

  .bf-insight-template__article,
  .bf-insight-template__aside-card {
    border-radius: var(--bf-radius-md);
  }
}

/* =========================
   Commit 14 — Responsive RTL polish pass
   System-wide refinements only: no route, content, or IA changes.
   ========================= */

:root {
  --bf-page-gutter: clamp(1rem, 3vw, 2rem);
  --bf-touch-target: 44px;
}

html {
  scroll-padding-top: calc(var(--bf-appbar-h) + 24px);
  overflow-x: clip;
}

body {
  overflow-x: hidden;
}

.bf-main {
  min-width: 0;
}

.bf-page {
  width: 100%;
  min-width: 0;
}

.bf-container,
.bf-container-wide,
.bf-container-narrow {
  width: min(100% - (var(--bf-page-gutter) * 2), var(--bf-container));
}

.bf-container-wide {
  width: min(100% - (var(--bf-page-gutter) * 2), var(--bf-container-wide));
}

.bf-container-narrow {
  width: min(100% - (var(--bf-page-gutter) * 2), var(--bf-container-narrow));
}

:where(
  .bf-hero-split,
  .bf-hero-split__content,
  .bf-hero-split__visual,
  .bf-service-card,
  .bf-capability-card,
  .bf-process-rail,
  .bf-comparison-panel__side,
  .bf-diagram-card__visual,
  .bf-video-explainer,
  .bf-video-explainer__content,
  .bf-video-explainer__media,
  .bf-cta-band,
  .bf-insight-template__main,
  .bf-insight-template__article,
  .bf-contact-layout,
  .bf-contact-sidebar,
  .bf-contact-panel__body
) {
  min-width: 0;
}

:where(.bf-lead, .bf-body, .bf-card-title, .bf-section-title, .bf-page-title, .bf-display) {
  overflow-wrap: anywhere;
}

:where(.bf-prose, .content-html, .bf-insight-template__prose, .bf-longform) {
  overflow-wrap: anywhere;
}

:where(.bf-prose, .content-html, .bf-insight-template__prose, .bf-longform) :where(p, li) {
  line-height: 2;
}

:where(.bf-prose, .content-html, .bf-insight-template__prose, .bf-longform) :where(img, video, iframe, table) {
  max-width: 100%;
}

:where(.bf-prose, .content-html, .bf-insight-template__prose, .bf-longform) :where(pre, code) {
  direction: ltr;
  text-align: left;
}

:where(.bf-prose, .content-html, .bf-insight-template__prose, .bf-longform) pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bf-video-explainer__shell,
.bf-video-shell {
  aspect-ratio: var(--bf-video-aspect);
}

.bf-video-explainer__placeholder,
.bf-video-explainer__thumbnail {
  min-height: 100%;
}

:where(.bf-button, .bf-card-link, .bf-topnav, .bf-dd-caret, .bf-mobilemenu__summary, .bf-mobilemenu__item, .bf-mobilemenu__cta) {
  min-height: var(--bf-touch-target);
}

.bf-button,
.bf-card-link {
  text-align: center;
}

.bf-mobilemenu__panel {
  overscroll-behavior: contain;
}

@media (max-width: 1120px) {
  .bf-home-services-grid,
  .bf-services-grid,
  .bf-services-capability-grid,
  .bf-service-detail-grid,
  .bf-service-detail-grid--four,
  .bf-service-detail-grid--three,
  .bf-service-detail-fit-grid,
  .bf-contact-guidance-grid,
  .bf-contact-intent-grid,
  .bf-home-insights-grid,
  .bf-services-insights-grid,
  .bf-cde-capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-contact-layout,
  .bf-insight-template__layout {
    grid-template-columns: 1fr;
  }

  .bf-contact-sidebar,
  .bf-insight-template__aside {
    position: static;
  }
}

@media (max-width: 900px) {
  :root {
    --bf-section-y: clamp(48px, 9vw, 76px);
    --bf-section-y-compact: clamp(34px, 7vw, 54px);
  }

  .bf-page {
    padding-top: 12px;
    padding-bottom: 48px;
  }

  .bf-toolbar {
    min-height: var(--bf-appbar-h);
    padding-inline: var(--bf-page-gutter);
  }

  .bf-brand {
    font-size: 17px;
    white-space: nowrap;
  }

  .bf-toolbar-cta {
    display: none !important;
  }

  .bf-mobilemenu {
    margin-inline-start: auto;
  }

  .bf-mobilemenu__panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
    width: min(calc(100vw - (var(--bf-page-gutter) * 2)), 380px);
  }

  .bf-section-header,
  .bf-section-header--center {
    text-align: right;
    justify-items: start;
    margin-inline: 0;
  }

  .bf-hero-split-section {
    padding-block-start: clamp(38px, 8vw, 64px);
  }

  .bf-hero-split,
  .bf-hero-split--reverse {
    gap: clamp(24px, 6vw, 42px);
  }

  .bf-hero-split__content {
    justify-items: stretch;
  }

  .bf-hero-split__visual {
    min-height: auto;
    padding: clamp(16px, 4vw, 24px);
    border-radius: var(--bf-radius-lg);
  }

  .bf-display,
  .bf-page-title,
  .bf-hero-split__title {
    max-width: 17ch;
    line-height: 1.18;
  }

  .bf-hero-split__lead,
  .bf-lead,
  .bf-section-header__intro,
  .bf-cta-band__lead {
    max-width: none;
    text-align: right;
    text-align-last: auto;
  }

  .bf-video-explainer__body,
  .bf-cta-band,
  .bf-authority-band,
  .bf-process-rail,
  .bf-diagram-card,
  .bf-comparison-panel__side {
    border-radius: var(--bf-radius-lg);
  }

  .bf-video-explainer__content,
  .bf-video-summary__content,
  .bf-transcript-toggle__content {
    padding-inline: clamp(16px, 4vw, 24px);
  }
}

@media (max-width: 720px) {
  :root {
    --bf-page-gutter: 1rem;
  }

  .bf-home-services-grid,
  .bf-services-grid,
  .bf-services-capability-grid,
  .bf-service-detail-grid,
  .bf-service-detail-grid--four,
  .bf-service-detail-grid--three,
  .bf-service-detail-fit-grid,
  .bf-contact-guidance-grid,
  .bf-contact-intent-grid,
  .bf-home-insights-grid,
  .bf-services-insights-grid,
  .bf-cde-capability-grid,
  .bf-cde-flow-diagram {
    grid-template-columns: 1fr;
  }

  .bf-capability-card,
  .bf-service-card,
  .bf-problem-card,
  .bf-insight-card,
  .bf-contact-panel__body,
  .bf-insight-template__article,
  .bf-insight-template__aside-card {
    padding: clamp(18px, 5vw, 24px);
    border-radius: var(--bf-radius-md);
  }

  .bf-service-card__head,
  .bf-capability-card__head,
  .bf-insight-card__head,
  .bf-comparison-panel__side-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .bf-service-card__label,
  .bf-capability-card__label,
  .bf-insight-template__tag,
  .bf-insight-card__tag {
    white-space: normal;
  }

  .bf-cta-band {
    padding: clamp(22px, 7vw, 32px);
  }

  .bf-cta-band__actions,
  .bf-hero-split__actions,
  .bf-section__cta,
  .bf-cta-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .bf-cta-band__actions .bf-button,
  .bf-hero-split__actions .bf-button,
  .bf-section__cta .bf-button,
  .bf-cta-row .bf-button,
  .bf-cta-band__actions .mud-button-root,
  .bf-hero-split__actions .mud-button-root,
  .bf-section__cta .mud-button-root,
  .bf-cta-row .mud-button-root {
    width: 100%;
  }

  .bf-process-rail__list {
    grid-template-columns: 1fr;
  }

  .bf-process-rail__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
  }

  .bf-process-rail__index {
    grid-row: span 2;
  }

  .bf-cde-flow-diagram__arrow,
  .bf-services-hero-map__arrow {
    transform: rotate(90deg);
  }

  .bf-insight-template__meta-row,
  .bf-insight-template__tags {
    gap: .45rem;
  }
}

@media (max-width: 560px) {
  :root {
    --bf-page-gutter: .875rem;
    --bf-appbar-h: 52px;
  }

  body {
    line-height: 1.78;
  }

  .bf-display {
    font-size: clamp(2.05rem, 13vw, 2.85rem);
    letter-spacing: -0.025em;
  }

  .bf-page-title,
  .bf-hero-split__title {
    font-size: clamp(1.85rem, 10vw, 2.55rem);
    letter-spacing: -0.02em;
    max-width: none;
  }

  .bf-section-title {
    font-size: clamp(1.35rem, 7vw, 1.85rem);
  }

  .bf-lead,
  .bf-hero-split__lead {
    font-size: 1rem;
    line-height: 1.95;
  }

  .bf-body,
  .bf-prose,
  .content-html,
  .bf-insight-template__prose {
    font-size: .98rem;
  }

  .bf-mobilemenu__panel {
    top: calc(100% + 8px);
    max-height: min(78vh, 560px);
    border-radius: var(--bf-radius-md);
  }

  .bf-hero-split__visual,
  .bf-video-explainer__body,
  .bf-video-explainer__shell,
  .bf-video-shell,
  .bf-authority-band,
  .bf-cta-band,
  .bf-process-rail,
  .bf-diagram-card,
  .bf-comparison-panel__side {
    border-radius: var(--bf-radius-md);
  }

  .bf-capability-card__index,
  .bf-service-card__index,
  .bf-process-rail__index {
    min-width: 2.25rem;
    height: 2.25rem;
  }

  .bf-video-explainer__shell,
  .bf-video-shell {
    border-radius: calc(var(--bf-radius-md) - 2px);
  }

  .bf-video-explainer__play {
    width: 3.2rem;
    height: 3.2rem;
  }

  .bf-footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .bf-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 380px) {
  .bf-button {
    padding-inline: .9rem;
  }

  .bf-mobilemenu__panel {
    width: calc(100vw - 1rem);
    inset-inline-end: -.125rem;
  }

  .bf-service-card__items li,
  .bf-capability-card__body,
  .bf-service-card__description,
  .bf-insight-card__excerpt {
    line-height: 1.8;
  }
}

@media (max-width: 560px) {
  .bf-home-intervention-modes {
    grid-template-columns: 1fr;
  }

  .bf-home-intervention-mode + .bf-home-intervention-mode {
    border-inline-start: 0;
    border-block-start: 1px solid var(--bf-border);
  }

  .bf-home-intervention-mode {
    padding: 20px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .bf-button:hover,
  .bf-capability-card:hover,
  .bf-service-card:hover,
  .bf-insight-card:hover,
  .bf-card:hover,
  .bf-frameworkcard:hover,
  .bf-solvecard:hover,
  .mud-button-root:not(.mud-icon-button):hover {
    transform: none;
  }
}

/* ----- Commit 16: consultancy-first shell navigation and footer ----- */
.bf-brand {
  display: inline-flex;
  align-items: center;
  min-width: max-content;
}

.bf-brand__logo {
  display: block;
  width: 136px;
  height: auto;
}

.bf-toplinks {
  margin-inline-start: clamp(1rem, 3vw, 2.5rem);
}

.bf-toplinks .bf-topnav {
  color: var(--bf-text);
  font-size: 0.93rem;
}

.bf-toplinks .bf-topnav[href="/services"],
.bf-toplinks .bf-topnav[href="/contact"] {
  font-weight: 850;
}

.bf-shell-cta {
  white-space: nowrap;
}

.bf-mobilemenu__group--secondary .bf-mobilemenu__item {
  color: var(--bf-muted);
}

.bf-footer {
  margin-top: var(--bf-section-y-compact);
  padding-block: clamp(2rem, 5vw, 4rem) 1.4rem;
  border-top: 1px solid var(--bf-border);
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.08), transparent 26rem),
    rgba(255, 255, 255, 0.72);
}

.bf-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.bf-footer-brand,
.bf-footer-column {
  min-width: 0;
}

.bf-footer-logo {
  display: inline-flex;
  width: fit-content;
  color: var(--bf-ink);
  text-decoration: none;
}

.bf-footer-logo img {
  display: block;
  width: 184px;
  height: auto;
}

.bf-footer-heading {
  margin: 0 0 0.8rem;
  color: var(--bf-ink);
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.4;
}

.bf-footer-heading--primary {
  font-size: 1.15rem;
  line-height: 1.2;
}

.bf-footer-experience {
  display: grid;
  gap: 0.3rem;
  margin: 0.85rem 0 0;
  color: var(--bf-ink);
  font-size: 0.94rem;
  line-height: 1.75;
}

.bf-footer-experience strong {
  font-weight: 850;
}

.bf-footer-text {
  margin: 0.7rem 0 0;
  color: var(--bf-muted);
  font-size: 0.94rem;
  line-height: 1.9;
}

.bf-footer-column {
  display: grid;
  gap: 0.5rem;
}

.bf-footer-column a:not(.bf-button) {
  color: var(--bf-muted);
  font-weight: 650;
  line-height: 1.7;
  text-decoration: none;
}

.bf-footer-column a:not(.bf-button):hover,
.bf-footer-logo:hover {
  color: var(--bf-ink);
  text-decoration: underline;
  text-decoration-color: var(--bf-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.bf-footer-column--cta {
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-surface);
  box-shadow: var(--bf-shadow-card);
}

.bf-footer-column--cta .bf-button {
  justify-self: start;
  margin-top: 0.35rem;
  color: var(--bf-button-fg);
}

.bf-footer-column--cta .bf-button:hover {
  color: var(--bf-button-fg);
}

.bf-footer-bottom {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: 1rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  color: var(--bf-subtle);
  font-size: 0.82rem;
  gap: 1rem;
}

@media (max-width: 1100px) {
  .bf-toplinks {
    margin-inline-start: 0.75rem;
  }
}

@media (max-width: 900px) {
  .bf-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bf-footer-brand,
  .bf-footer-column--cta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .bf-footer-grid {
    grid-template-columns: 1fr;
  }

  .bf-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ----- Commit 17: browser QA fixes after design-system rollout ----- */
/* Keep the final shell rules after all base nav definitions. Earlier media
   rules were being overridden by later .bf-toplinks declarations, which made
   mobile screens show both the desktop links and the hamburger. */
@media (max-width: 960px) {
  .bf-toplinks {
    display: none !important;
  }

  .bf-mobilemenu {
    display: inline-flex !important;
    margin-inline-start: auto;
  }

  .bf-toolbar {
    min-height: var(--bf-appbar-h);
    padding-inline: var(--bf-page-gutter);
  }
}

/* Tablet and mobile hero typography should stay authoritative without taking
   the entire first viewport. The visual system is allowed to appear earlier. */
@media (max-width: 900px) {
  .bf-display {
    font-size: clamp(2.15rem, 8vw, 3.35rem);
    line-height: 1.16;
    letter-spacing: -0.025em;
  }

  .bf-page-title,
  .bf-hero-split__title {
    font-size: clamp(2rem, 7.5vw, 3.05rem);
    line-height: 1.18;
    letter-spacing: -0.022em;
  }

  .bf-hero-split-section {
    padding-block-start: clamp(30px, 7vw, 52px);
  }

  .bf-hero-split__actions,
  .bf-cta-band__actions {
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .bf-display {
    font-size: clamp(1.95rem, 10.8vw, 2.55rem);
    line-height: 1.18;
  }

  .bf-page-title,
  .bf-hero-split__title {
    font-size: clamp(1.78rem, 9.3vw, 2.35rem);
    line-height: 1.2;
  }

  .bf-hero-split-section {
    padding-block-start: clamp(24px, 7vw, 38px);
  }

  .bf-brand__logo {
    width: 120px;
  }

  .bf-mobilemenu__summary {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}

/* Avoid wide desktop hero panels feeling detached from the viewport after the
   shell IA update, while preserving the spacious brand feeling. */
@media (min-width: 1200px) {
  .bf-hero-split-section {
    padding-block-start: clamp(64px, 7vw, 92px);
  }
}

/* ----- Commit 18: About section redesign ----- */
.bf-about-page {
  background:
    radial-gradient(circle at 84% 8%, rgba(245, 158, 11, 0.10), transparent 28rem),
    radial-gradient(circle at 12% 32%, rgba(3, 105, 161, 0.055), transparent 28rem);
}

.bf-about-page__hero {
  padding-block-end: clamp(46px, 6vw, 86px);
}

.bf-about-identity-map,
.bf-about-process-visual,
.bf-about-governance-stack {
  width: min(100%, 470px);
  display: grid;
  align-content: center;
  gap: 14px;
}

.bf-about-identity-map__node,
.bf-about-process-visual__step,
.bf-about-governance-stack__layer {
  display: grid;
  gap: 6px;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--bf-shadow-card);
  text-align: right;
}

.bf-about-identity-map__node span,
.bf-about-process-visual__step span,
.bf-about-governance-stack__layer span {
  color: var(--bf-subtle);
  font-size: 0.82rem;
  font-weight: 850;
}

.bf-about-identity-map__node strong,
.bf-about-process-visual__step strong,
.bf-about-governance-stack__layer strong {
  color: var(--bf-text);
  font-size: clamp(1.02rem, 1.55vw, 1.28rem);
  line-height: 1.6;
}

.bf-about-process-visual__step small,
.bf-about-governance-stack__layer small {
  color: var(--bf-muted);
  line-height: 1.7;
}

.bf-about-identity-map__node--risk {
  border-color: rgba(185, 28, 28, 0.22);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.84), rgba(255, 255, 255, 0.92));
}

.bf-about-identity-map__node--controlled {
  border-color: rgba(4, 120, 87, 0.24);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.84), rgba(255, 255, 255, 0.92));
}

.bf-about-identity-map__gate,
.bf-about-governance-stack__connector {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  margin-inline: auto;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-weight: 900;
  box-shadow: var(--bf-shadow-card);
}

.bf-about-governance-stack__connector {
  width: auto;
  min-width: 5.5rem;
  padding-inline: 1rem;
  font-size: 0.78rem;
}

.bf-about-governance-stack__layer--engine,
.bf-about-process-visual__step:nth-child(2),
.bf-about-process-visual__step:nth-child(4) {
  border-color: rgba(245, 158, 11, 0.26);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.86), rgba(255, 255, 255, 0.94));
}

.bf-about-governance-stack__layer--execution,
.bf-about-process-visual__step:last-child {
  border-color: rgba(4, 120, 87, 0.22);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.84), rgba(255, 255, 255, 0.94));
}

.bf-about-founder-card {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 100%;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 247, 237, 0.84), rgba(255, 255, 255, 0.96));
  text-align: right;
}

.bf-about-founder-card span {
  display: inline-flex;
  width: fit-content;
  padding: 0.3rem 0.7rem;
  border-radius: var(--bf-radius-pill);
  border: 1px solid rgba(245, 158, 11, 0.30);
  background: var(--bf-accent-soft);
  color: var(--bf-accent-dark);
  font-size: 0.78rem;
  font-weight: 850;
}

.bf-about-founder-card strong {
  color: var(--bf-text);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.65;
}

.bf-about-founder-card p {
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-about-card-grid {
  display: grid;
  gap: var(--bf-card-gap);
  margin-top: clamp(24px, 3.5vw, 40px);
}

.bf-about-card-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bf-about-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bf-about-page__method .bf-process-rail,
.bf-about-page__process .bf-process-rail {
  margin-top: clamp(24px, 3.5vw, 38px);
}

.bf-about-page__video .bf-video-explainer,
.bf-about-page__authority .bf-authority-band,
.bf-about-page__cta .bf-cta-band {
  margin-inline: auto;
}

.bf-about-governance-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.bf-about-governance-flow__node {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  min-height: 9rem;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-md);
  background: rgba(255, 255, 255, 0.92);
  text-align: center;
}

.bf-about-governance-flow__node span {
  display: inline-grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.bf-about-governance-flow__node strong {
  color: var(--bf-text);
  font-weight: 900;
}

.bf-about-governance-flow__node small {
  color: var(--bf-muted);
  line-height: 1.6;
}

.bf-about-governance-flow__node--gate {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(255, 247, 237, 0.84);
}

.bf-about-governance-flow__node--evidence {
  border-color: rgba(4, 120, 87, 0.22);
  background: rgba(240, 253, 244, 0.84);
}

.bf-about-governance-flow__arrow {
  display: none;
}

.bf-about-page--governance .bf-diagram-card__visual {
  min-height: 260px;
}

.bf-about-page--governance .bf-diagram-card__nodes li:first-child,
.bf-about-page--governance .bf-diagram-card__nodes li:nth-child(2) {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 247, 237, 0.82);
}

.bf-about-page--governance .bf-diagram-card__nodes li:last-child,
.bf-about-page .bf-diagram-card__nodes li:last-child {
  border-color: rgba(4, 120, 87, 0.22);
  background: rgba(240, 253, 244, 0.82);
}

@media (max-width: 1120px) {
  .bf-about-card-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-about-governance-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .bf-about-card-grid--four,
  .bf-about-card-grid--three {
    grid-template-columns: 1fr;
  }

  .bf-about-process-visual,
  .bf-about-identity-map,
  .bf-about-governance-stack {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .bf-about-governance-flow {
    grid-template-columns: 1fr;
  }

  .bf-about-governance-flow__node {
    min-height: 0;
  }
}

/* ----- Commit 19: Structural Assessment lead-magnet adjustment ----- */
.bf-assessment-page {
  background:
    radial-gradient(circle at 82% 7%, rgba(245, 158, 11, 0.09), transparent 27rem),
    radial-gradient(circle at 12% 30%, rgba(3, 105, 161, 0.05), transparent 28rem);
}

.bf-assessment-page__hero {
  padding-block-end: clamp(44px, 6vw, 82px);
}

.bf-assessment-visual {
  width: min(100%, 470px);
  display: grid;
  align-content: center;
  gap: 14px;
}

.bf-assessment-visual__node {
  display: grid;
  gap: 7px;
  padding: clamp(16px, 2.5vw, 24px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: var(--bf-shadow-card);
  text-align: right;
}

.bf-assessment-visual__node span,
.bf-assessment-boundary-card span,
.bf-assessment-guide-list span,
.bf-assessment-layer-card span {
  color: var(--bf-subtle);
  font-size: 0.8rem;
  font-weight: 850;
}

.bf-assessment-visual__node strong {
  color: var(--bf-text);
  font-size: clamp(1.02rem, 1.55vw, 1.28rem);
  line-height: 1.6;
}

.bf-assessment-visual__node small {
  color: var(--bf-muted);
  line-height: 1.7;
}

.bf-assessment-visual__node--risk {
  border-color: rgba(185, 28, 28, 0.22);
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.84), rgba(255, 255, 255, 0.94));
}

.bf-assessment-visual__node--controlled {
  border-color: rgba(4, 120, 87, 0.22);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.84), rgba(255, 255, 255, 0.94));
}

.bf-assessment-visual__gate {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  margin-inline: auto;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-weight: 900;
  box-shadow: var(--bf-shadow-card);
}

.bf-assessment-boundary-card {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 100%;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: var(--bf-radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 247, 237, 0.88), rgba(255, 255, 255, 0.96));
  text-align: right;
}

.bf-assessment-boundary-card span {
  display: inline-flex;
  width: fit-content;
  padding: 0.3rem 0.7rem;
  border-radius: var(--bf-radius-pill);
  border: 1px solid rgba(245, 158, 11, 0.30);
  background: var(--bf-accent-soft);
  color: var(--bf-accent-dark);
}

.bf-assessment-boundary-card strong {
  color: var(--bf-text);
  font-size: clamp(1.12rem, 1.75vw, 1.42rem);
  line-height: 1.65;
}

.bf-assessment-boundary-card p {
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-assessment-card-grid {
  display: grid;
  gap: var(--bf-card-gap);
  margin-top: clamp(24px, 3.5vw, 40px);
}

.bf-assessment-card-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bf-assessment-layer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bf-card-gap);
  margin-top: clamp(24px, 3.5vw, 40px);
}

.bf-assessment-layer-card {
  display: grid;
  gap: 10px;
  min-height: 100%;
  padding: clamp(18px, 2.6vw, 26px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--bf-shadow-card);
}

.bf-assessment-layer-card span {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: #fff;
  font-weight: 900;
}

.bf-assessment-layer-card h3 {
  margin: 0;
  color: var(--bf-text);
  font-size: 1.12rem;
  font-weight: 850;
  line-height: 1.6;
}

.bf-assessment-layer-card p {
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.9;
}

.bf-assessment-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.8fr);
  gap: var(--bf-card-gap);
  align-items: start;
}

.bf-assessment-form-guide {
  position: sticky;
  top: calc(var(--bf-appbar-h) + 24px);
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2.6vw, 28px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--bf-shadow-card);
}

.bf-assessment-form-guide .bf-section-header {
  margin-bottom: 0;
}

.bf-assessment-guide-list {
  display: grid;
  gap: 12px;
}

.bf-assessment-guide-list div {
  display: grid;
  gap: 5px;
  padding: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface-soft);
}

.bf-assessment-guide-list span {
  color: var(--bf-accent-dark);
}

.bf-assessment-guide-list strong {
  color: var(--bf-text);
  font-weight: 850;
  line-height: 1.5;
}

.bf-assessment-guide-list p {
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.75;
}

.bf-assessment-page__process .bf-process-rail,
.bf-assessment-page__authority .bf-authority-band,
.bf-assessment-page__cta .bf-cta-band {
  margin-inline: auto;
}

@media (max-width: 1120px) {
  .bf-assessment-card-grid--four,
  .bf-assessment-layer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-assessment-form-layout {
    grid-template-columns: 1fr;
  }

  .bf-assessment-form-guide {
    position: static;
  }
}

@media (max-width: 900px) {
  .bf-assessment-visual {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .bf-assessment-card-grid--four,
  .bf-assessment-layer-grid {
    grid-template-columns: 1fr;
  }

  .bf-assessment-form-guide {
    padding: 1rem;
  }
}

/* Commit 21: secondary/future-facing route demotion notice */
.bf-secondary-route-notice__container {
  margin-block: clamp(18px, 3vw, 34px) clamp(22px, 3.5vw, 42px);
}

.bf-secondary-route-notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
  padding: clamp(18px, 2.8vw, 30px);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--bf-radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 247, 237, 0.96), rgba(255, 255, 255, 0.94));
  box-shadow: var(--bf-shadow-card);
}

.bf-secondary-route-notice__content {
  display: grid;
  gap: 8px;
}

.bf-secondary-route-notice__eyebrow {
  color: var(--bf-accent-dark);
  font-size: .82rem;
  font-weight: 900;
}

.bf-secondary-route-notice strong {
  color: var(--bf-text);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 900;
  line-height: 1.65;
}

.bf-secondary-route-notice p {
  max-width: 74ch;
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-secondary-route-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

@media (max-width: 820px) {
  .bf-secondary-route-notice {
    grid-template-columns: 1fr;
  }

  .bf-secondary-route-notice__actions {
    justify-content: flex-start;
  }
}

/* Commit 21A: mobile menu viewport anchoring hotfix.
   Logical inset-inline-end on an absolutely positioned RTL panel anchored the
   drawer to the hamburger instead of the viewport, leaving most menu content
   off-screen. Keep the SSR <details> menu, but render the open panel as a
   fixed viewport sheet below the app bar. */
@media (max-width: 960px) {
  .bf-mobilemenu {
    position: static;
  }

  .bf-mobilemenu[open]::before {
    content: "";
    position: fixed;
    inset: var(--bf-appbar-h) 0 0;
    z-index: 58;
    background: rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(2px);
  }

  .bf-mobilemenu__panel {
    position: fixed !important;
    top: calc(var(--bf-appbar-h) + 0.75rem) !important;
    inset-inline: var(--bf-page-gutter) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--bf-appbar-h) - 1.5rem) !important;
    box-sizing: border-box;
    z-index: 60 !important;
  }
}

@media (max-width: 380px) {
  .bf-mobilemenu__panel {
    inset-inline: 0.5rem !important;
    width: auto !important;
  }
}

/* Commit 21B: mobile menu scrollability hotfix.
   The viewport-anchored menu can still exceed small phone height when all
   primary, service, concept, and CTA links are visible. Pin the sheet between
   the app bar and the safe-area bottom, then make the panel itself the scroll
   container. */
@media (max-width: 960px) {
  .bf-mobilemenu__panel {
    top: calc(var(--bf-appbar-h) + 0.75rem) !important;
    bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}

@media (max-width: 420px) {
  .bf-mobilemenu__panel {
    padding: 10px !important;
    border-radius: 18px !important;
  }

  .bf-mobilemenu__group {
    padding: 8px 6px;
  }

  .bf-mobilemenu__item {
    padding-block: 8px;
  }
}

/* Commit 21C: mobile nav real overflow fix.
   The panel now opens inside the viewport, but showing every secondary link at
   once can still make the initial sheet taller than a phone. Keep the primary
   path visible, collapse secondary groups by default, and make the sheet itself
   a hard scroll container with small-screen-safe sizing. */
@media (max-width: 960px) {
  .bf-mobilemenu[open] {
    position: static !important;
  }

  .bf-mobilemenu__panel {
    position: fixed !important;
    inset-block-start: calc(var(--bf-appbar-h) + 0.75rem) !important;
    inset-block-end: calc(0.75rem + env(safe-area-inset-bottom)) !important;
    inset-inline: var(--bf-page-gutter) !important;
    block-size: auto !important;
    max-block-size: calc(100svh - var(--bf-appbar-h) - 1.5rem - env(safe-area-inset-bottom)) !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  .bf-mobilemenu__group--accordion {
    display: block;
  }

  .bf-mobilemenu__title--summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--bf-touch-target);
    margin-bottom: 0;
  }

  .bf-mobilemenu__title--summary::-webkit-details-marker {
    display: none;
  }

  .bf-mobilemenu__title--summary::after {
    content: "⌄";
    flex: 0 0 auto;
    font-weight: 900;
    color: var(--bf-subtle);
    transition: transform 160ms ease;
  }

  .bf-mobilemenu__group--accordion[open] > .bf-mobilemenu__title--summary::after {
    transform: rotate(180deg);
  }

  .bf-mobilemenu__subitems {
    padding-block-start: 6px;
  }
}

@media (max-width: 420px) {
  .bf-mobilemenu__panel {
    inset-inline: 0.75rem !important;
    inset-block-start: calc(var(--bf-appbar-h) + 0.55rem) !important;
    inset-block-end: calc(0.55rem + env(safe-area-inset-bottom)) !important;
  }

  .bf-mobilemenu__item {
    min-height: 40px;
    padding-block: 6px !important;
  }

  .bf-mobilemenu__cta {
    min-height: 42px;
    padding-block: 9px;
  }
}

/* ----- Commit 23: Video asset integration polish ----- */
.bf-video-explainer__thumbnail--pending {
  cursor: default;
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.bf-video-explainer__thumbnail--pending::after,
.bf-video-explainer__thumbnail:not(.bf-video-explainer__thumbnail--pending)::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.10), rgba(11, 18, 32, 0.54)),
    radial-gradient(circle at 22% 24%, rgba(245, 158, 11, 0.18), transparent 18rem);
  pointer-events: none;
}

.bf-video-explainer__thumbnail--pending:hover img {
  transform: none;
  opacity: 0.86;
}

.bf-video-explainer__play--pending {
  background: rgba(245, 158, 11, 0.92);
}

.bf-video-explainer__status {
  position: absolute;
  inset-inline: clamp(18px, 4vw, 34px);
  inset-block-end: clamp(16px, 3vw, 28px);
  z-index: 2;
  display: inline-flex;
  justify-content: center;
  padding: 0.7rem 1rem;
  border-radius: var(--bf-radius-pill);
  background: rgba(11, 18, 32, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.8;
  text-align: center;
  backdrop-filter: blur(10px);
}

@media (max-width: 560px) {
  .bf-video-explainer__status {
    position: static;
    margin: -0.65rem 0.75rem 0.75rem;
    border-radius: var(--bf-radius-md);
    font-size: 0.82rem;
  }
}

.bf-video-explainer__play {
  z-index: 2;
}

/* Commit 24: QA defect fixes — insights page, hero scale, and mobile menu simplification. */
.bf-hero-split__title.bf-display {
  font-size: clamp(2.05rem, 4vw, 4rem);
  line-height: 1.14;
  letter-spacing: -0.026em;
}

.bf-home-hero .bf-hero-split__title.bf-display,
.bf-hero-split-section:first-of-type .bf-hero-split__title.bf-display {
  font-size: clamp(2.15rem, 4.4vw, 4.25rem);
}

.bf-mobilemenu__note {
  margin: 0.35rem 0.5rem 0.15rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--bf-radius-md);
  color: var(--bf-muted);
  background: rgba(248, 250, 252, 0.88);
  font-size: 0.9rem;
  line-height: 1.9;
}

/* Compact article index: the listing is the primary content. */
.bf-insights-index-hero {
  padding-block-start: clamp(52px, 7vw, 88px);
  padding-block-end: clamp(34px, 5vw, 58px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  text-align: center;
}

.bf-insights-index-hero .bf-eyebrow {
  width: 100%;
  margin: 0 auto 0.75rem;
  text-align: center;
}

.bf-insights-index-hero .bf-page-title {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.18;
  text-align: center;
}

/* Keep the concise index heading on one line on tablet/desktop widths.
   Mobile keeps natural wrapping below the centered-layout breakpoint. */
@media (min-width: 761px) {
  .bf-insights-index-hero .bf-page-title {
    white-space: nowrap;
  }
}

.bf-insights-index-hero .bf-lead {
  max-width: 52rem;
  margin: 1rem auto 0;
  text-align: center;
  text-align-last: center;
}

.bf-insights-list-section {
  padding-block-start: clamp(48px, 6vw, 82px);
}

.bf-insights-list-section .bf-section-header {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.bf-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
}

.bf-insights-grid .bf-insight-card {
  min-block-size: 100%;
  padding: clamp(1.1rem, 2vw, 1.45rem);
}

.bf-insights-grid .bf-insight-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: justify;
  text-align-last: right;
}

.bf-insights-cta-section {
  padding-block-start: clamp(24px, 4vw, 48px);
}

@media (max-width: 1120px) {
  .bf-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .bf-hero-split__title.bf-display,
  .bf-home-hero .bf-hero-split__title.bf-display,
  .bf-hero-split-section:first-of-type .bf-hero-split__title.bf-display {
    max-width: none;
    font-size: clamp(1.82rem, 8.4vw, 2.65rem);
    line-height: 1.22;
    letter-spacing: -0.018em;
  }

  .bf-hero-split__lead,
  .bf-lead {
    font-size: clamp(0.98rem, 3.6vw, 1.08rem);
    line-height: 1.95;
  }

  .bf-insights-grid {
    grid-template-columns: 1fr;
  }

  .bf-mobilemenu__panel {
    bottom: auto !important;
    max-height: calc(100dvh - var(--bf-appbar-h) - 1.25rem) !important;
    overflow-y: auto !important;
  }
}

/* Commit 24A: restore expandable mobile groups, make the drawer genuinely
   scrollable, and reduce desktop hero scale after QA feedback. */
@media (min-width: 961px) {
  .bf-hero-split__title.bf-display {
    max-width: 18ch;
    line-height: 1.18;
    letter-spacing: -0.022em;
  }

  .bf-home-hero .bf-hero-split__title.bf-display,
  .bf-hero-split-section:first-of-type .bf-hero-split__title.bf-display {
    max-width: 18ch;
    line-height: 1.18;
  }

  .bf-hero-split__lead {
    font-size: clamp(1.02rem, 1.05vw, 1.16rem);
    line-height: 1.95;
  }
}

@media (max-width: 960px) {
  .bf-mobilemenu[open]::before {
    inset: var(--bf-appbar-h) 0 0 !important;
  }

  .bf-mobilemenu__panel {
    position: fixed !important;
    inset-block-start: calc(var(--bf-appbar-h) + 0.65rem) !important;
    inset-block-end: calc(0.65rem + env(safe-area-inset-bottom)) !important;
    inset-inline: var(--bf-page-gutter) !important;
    width: auto !important;
    max-width: none !important;
    block-size: auto !important;
    max-block-size: calc(100dvh - var(--bf-appbar-h) - 1.3rem - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  .bf-mobilemenu__group--accordion {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.72);
  }

  .bf-mobilemenu__group--accordion + .bf-mobilemenu__group--accordion {
    margin-top: 0.65rem;
  }

  .bf-mobilemenu__title--summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--bf-touch-target);
    margin: 0;
  }

  .bf-mobilemenu__title--summary::-webkit-details-marker {
    display: none;
  }

  .bf-mobilemenu__title--summary::after {
    content: "⌄";
    flex: 0 0 auto;
    color: var(--bf-subtle);
    font-size: 1rem;
    font-weight: 900;
    transition: transform 160ms ease;
  }

  .bf-mobilemenu__group--accordion[open] > .bf-mobilemenu__title--summary::after {
    transform: rotate(180deg);
  }

  .bf-mobilemenu__subitems {
    display: grid;
    gap: 0.15rem;
    padding-block-start: 0.35rem;
  }
}

@media (max-width: 420px) {
  .bf-mobilemenu__panel {
    inset-inline: 0.75rem !important;
    inset-block-start: calc(var(--bf-appbar-h) + 0.5rem) !important;
    inset-block-end: calc(0.5rem + env(safe-area-inset-bottom)) !important;
    padding: 0.85rem !important;
  }

  .bf-mobilemenu__group {
    padding: 0.55rem 0.6rem;
  }

  .bf-mobilemenu__item {
    min-height: 38px;
    padding-block: 0.35rem !important;
  }
}

/* Commit 24B: force the expanded mobile drawer to be the scroll container.
   Earlier rules mixed max-height, logical block-size, and a later bottom:auto
   override. On real mobile viewports that can leave the expanded <details>
   panel visually clipped while the browser keeps scrolling the page behind it.
   This final override gives the drawer an explicit viewport-derived height and
   locks the background while the menu is open. */
@media (max-width: 960px) {
  html:has(.bf-mobilemenu[open]),
  body:has(.bf-mobilemenu[open]) {
    overflow: hidden !important;
  }

  .bf-mobilemenu[open] {
    position: static !important;
  }

  .bf-mobilemenu[open] .bf-mobilemenu__panel {
    position: fixed !important;
    inset-inline: var(--bf-page-gutter) !important;
    inset-block-start: calc(var(--bf-appbar-h) + 0.55rem) !important;
    inset-block-end: auto !important;
    top: calc(var(--bf-appbar-h) + 0.55rem) !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100dvh - var(--bf-appbar-h) - 1.1rem - env(safe-area-inset-bottom)) !important;
    max-height: none !important;
    max-block-size: none !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    contain: layout paint;
    scrollbar-gutter: stable;
  }
}

@media (max-width: 420px) {
  .bf-mobilemenu[open] .bf-mobilemenu__panel {
    inset-inline: 0.65rem !important;
    inset-block-start: calc(var(--bf-appbar-h) + 0.45rem) !important;
    top: calc(var(--bf-appbar-h) + 0.45rem) !important;
    height: calc(100dvh - var(--bf-appbar-h) - 0.9rem - env(safe-area-inset-bottom)) !important;
    padding: 0.75rem !important;
  }
}

/* Commit 24C: restore desktop dropdown menus without touching the mobile drawer.
   The mobile scroll fixes are intentionally scoped under max-width: 960px. Desktop
   dropdowns must remain ordinary hover/focus/caret-controlled menus. */
@media (min-width: 961px) {
  .bf-toplinks {
    overflow: visible !important;
    position: relative;
    z-index: 1300;
  }

  .bf-dd {
    display: inline-flex !important;
    position: relative !important;
    align-items: center;
    overflow: visible !important;
    isolation: isolate;
  }

  .bf-dd .bf-topnav {
    padding-inline-end: 0.55rem;
  }

  .bf-dd-caret {
    flex: 0 0 auto;
    margin-inline-start: -0.25rem;
    font-size: 0.9rem;
    color: var(--bf-muted);
  }

  .bf-dd-panel {
    inset-inline-start: 0;
    inset-inline-end: auto;
    top: calc(100% + 0.55rem);
    min-inline-size: 15.5rem;
    max-inline-size: min(21rem, calc(100vw - 2rem));
    display: none;
    background: var(--bf-surface);
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
    z-index: 5000;
  }

  .bf-dd:hover > .bf-dd-panel,
  .bf-dd:focus-within > .bf-dd-panel,
  .bf-dd-toggle:checked ~ .bf-dd-panel {
    display: block !important;
  }

  .bf-dd-item {
    text-align: right;
    line-height: 1.75;
  }
}

@media (max-width: 960px) {
  .bf-toplinks .bf-dd-panel,
  .bf-toplinks .bf-dd-caret,
  .bf-toplinks .bf-dd-toggle {
    display: none !important;
  }
}

/* ----- Client-side BIM landing page ----- */
.bf-client-landing {
  background: transparent;
}

.bf-client-landing__hero {
  padding-block-end: clamp(48px, 6vw, 88px);
}

.bf-client-control-chain {
  width: min(100%, 460px);
  display: grid;
  gap: 12px;
  align-content: center;
}

.bf-client-control-chain__node {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: clamp(15px, 2.2vw, 22px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: var(--bf-shadow-card);
  text-align: center;
}

.bf-client-control-chain__node span {
  color: var(--bf-subtle);
  font-size: 0.8rem;
  font-weight: 850;
}

.bf-client-control-chain__node strong {
  color: var(--bf-text);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}

.bf-client-control-chain__node--controlled {
  border-color: rgba(4, 120, 87, 0.24);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.84), rgba(255, 255, 255, 0.94));
}

.bf-client-control-chain__arrow {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline: auto;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-weight: 900;
  box-shadow: var(--bf-shadow-card);
}

.bf-client-responsibility-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--bf-card-gap);
  margin-top: clamp(26px, 4vw, 42px);
}

.bf-client-responsibility-grid > .bf-capability-card {
  grid-column: span 2;
}

.bf-client-landing__problem .bf-comparison-panel,
.bf-client-landing__cta .bf-cta-band,
.bf-services-reference__client-entry .bf-cta-band {
  margin-inline: auto;
}

/* Client landing-page copy: preserve RTL reading flow while aligning both text edges. */
.bf-client-landing__problem .bf-comparison-panel__side-head {
  justify-content: flex-start;
  text-align: right;
}

.bf-client-landing__problem .bf-comparison-panel__side-title {
  text-align: right;
  text-wrap: pretty;
}

.bf-client-landing__problem .bf-comparison-panel__list {
  width: 100%;
}

.bf-client-landing__problem .bf-comparison-panel__list li,
.bf-client-landing__responsibilities .bf-capability-card__body,
.bf-client-landing__responsibilities .bf-capability-card__outcome,
.bf-client-landing__lifecycle .bf-lifecycle-matrix__guide-card p,
.bf-client-landing__lifecycle .bf-lifecycle-matrix__row > p {
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
  text-wrap: pretty;
}

.bf-client-landing__responsibilities {
  scroll-margin-top: clamp(88px, 10vw, 132px);
}

.bf-lifecycle-matrix {
  display: grid;
  gap: clamp(24px, 3.5vw, 40px);
  margin-top: clamp(26px, 4vw, 44px);
}

.bf-lifecycle-matrix__guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bf-card-gap);
}

.bf-lifecycle-matrix__guide-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: clamp(18px, 2.7vw, 26px);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--bf-shadow-card);
}

.bf-lifecycle-matrix__guide-card--output {
  border-color: rgba(245, 158, 11, 0.26);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.78), rgba(255, 255, 255, 0.94));
}

.bf-lifecycle-matrix__guide-index,
.bf-lifecycle-matrix__stage-index {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.bf-lifecycle-matrix__guide-index {
  width: 2.65rem;
  height: 2.65rem;
}

.bf-lifecycle-matrix__guide-card h3,
.bf-lifecycle-matrix__guide-card p {
  margin: 0;
}

.bf-lifecycle-matrix__guide-card p {
  margin-top: 0.45rem;
  color: var(--bf-muted);
  line-height: 1.9;
}

.bf-lifecycle-matrix__table {
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--bf-shadow-card);
}

.bf-lifecycle-matrix__header,
.bf-lifecycle-matrix__row {
  display: grid;
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: stretch;
}

.bf-lifecycle-matrix__header {
  background: var(--bf-ink);
  color: #fff;
}

.bf-lifecycle-matrix__header span {
  padding: 15px clamp(16px, 2vw, 24px);
  font-size: 0.84rem;
  font-weight: 850;
}

.bf-lifecycle-matrix__header span + span {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}

.bf-lifecycle-matrix__row + .bf-lifecycle-matrix__row {
  border-top: 1px solid var(--bf-border);
}

.bf-lifecycle-matrix__row > * {
  min-width: 0;
  margin: 0;
  padding: clamp(18px, 2.5vw, 26px);
}

.bf-lifecycle-matrix__row > * + * {
  border-inline-start: 1px solid var(--bf-border);
}

.bf-lifecycle-matrix__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  background: rgba(249, 250, 251, 0.82);
}

.bf-lifecycle-matrix__stage-index {
  width: 2.35rem;
  height: 2.35rem;
  font-size: 0.78rem;
}

.bf-lifecycle-matrix__stage h3 {
  margin: 0;
  color: var(--bf-text);
  font-size: 1rem;
  line-height: 1.65;
}

.bf-lifecycle-matrix__row > p {
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-lifecycle-matrix__deliverable {
  color: var(--bf-text) !important;
  font-weight: 750;
  background: rgba(255, 247, 237, 0.46);
}

.bf-client-authority-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
  max-width: 900px;
  margin-inline: auto;
}

.bf-client-authority-callout > span {
  width: 0.42rem;
  min-height: 4.5rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent);
}

.bf-client-authority-callout p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.65;
  text-wrap: balance;
}

@media (max-width: 1120px) {
  .bf-client-responsibility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-client-responsibility-grid > .bf-capability-card {
    grid-column: auto;
  }
}

@media (max-width: 820px) {
  .bf-lifecycle-matrix__guide {
    grid-template-columns: 1fr;
  }

  .bf-lifecycle-matrix__header {
    display: none;
  }

  .bf-lifecycle-matrix__table {
    display: grid;
    gap: 16px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .bf-lifecycle-matrix__row {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border: 1px solid var(--bf-border);
    border-radius: var(--bf-radius-md);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--bf-shadow-card);
  }

  .bf-lifecycle-matrix__row + .bf-lifecycle-matrix__row {
    border-top: 1px solid var(--bf-border);
  }

  .bf-lifecycle-matrix__row > * + * {
    border-inline-start: 0;
    border-top: 1px solid var(--bf-border);
  }

  .bf-lifecycle-matrix__row > p::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.45rem;
    color: var(--bf-subtle);
    font-size: 0.78rem;
    font-weight: 850;
  }
}

@media (max-width: 720px) {
  .bf-client-responsibility-grid {
    grid-template-columns: 1fr;
  }


  .bf-client-authority-callout {
    align-items: start;
  }

  .bf-client-authority-callout > span {
    min-height: 3.5rem;
  }

  .bf-client-authority-callout p {
    font-size: clamp(1.25rem, 6.5vw, 1.75rem);
  }
}

/* ----- Consultant and contractor BIM landing page ----- */
.bf-services-audience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bf-card-gap);
  margin-top: clamp(26px, 4vw, 42px);
}

.bf-services-audience-grid > .bf-service-card {
  min-height: 100%;
}

.bf-delivery-landing {
  background: transparent;
}

.bf-delivery-landing__hero {
  padding-block-end: clamp(48px, 6vw, 88px);
}

.bf-delivery-chain {
  width: min(100%, 460px);
  display: grid;
  gap: 12px;
  align-content: center;
}

.bf-delivery-chain__node {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: clamp(15px, 2.2vw, 22px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: var(--bf-shadow-card);
  text-align: center;
}

.bf-delivery-chain__node span {
  color: var(--bf-subtle);
  font-size: 0.8rem;
  font-weight: 850;
}

.bf-delivery-chain__node strong {
  color: var(--bf-text);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}

.bf-delivery-chain__node--controlled {
  border-color: rgba(4, 120, 87, 0.24);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.84), rgba(255, 255, 255, 0.94));
}

.bf-delivery-chain__arrow {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline: auto;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-weight: 900;
  box-shadow: var(--bf-shadow-card);
}

.bf-delivery-landing__problem .bf-comparison-panel,
.bf-delivery-landing__cta .bf-cta-band {
  margin-inline: auto;
}

.bf-delivery-landing__problem .bf-comparison-panel__side-head {
  justify-content: flex-start;
  text-align: right;
}

.bf-delivery-landing__problem .bf-comparison-panel__side-title {
  text-align: right;
  text-wrap: pretty;
}

.bf-delivery-landing__problem .bf-comparison-panel__list {
  width: 100%;
}

.bf-delivery-landing__problem .bf-comparison-panel__list li,
.bf-delivery-landing__services .bf-capability-card__body,
.bf-delivery-landing__services .bf-capability-card__outcome,
.bf-engagement-path-card__description,
.bf-engagement-path-card__fit li,
.bf-engagement-path-card__outcome {
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
  text-wrap: pretty;
}

.bf-delivery-service-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--bf-card-gap);
  margin-top: clamp(26px, 4vw, 42px);
}

.bf-delivery-service-grid > .bf-capability-card {
  grid-column: span 2;
}

.bf-delivery-service-grid > .bf-capability-card:last-child {
  grid-column: 3 / span 2;
}

.bf-delivery-landing__paths {
  scroll-margin-top: clamp(88px, 10vw, 132px);
}

.bf-engagement-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bf-card-gap);
  align-items: stretch;
}

.bf-engagement-path-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 3.5vw, 36px);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--bf-shadow-card);
}

.bf-engagement-path-card--featured {
  border-color: rgba(245, 158, 11, 0.42);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.80), rgba(255, 255, 255, 0.98) 36%);
}

.bf-engagement-path-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.bf-engagement-path-card__index {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.bf-engagement-path-card__label {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding-inline: 0.85rem;
  border: 1px solid rgba(245, 158, 11, 0.38);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent-soft);
  color: var(--bf-accent-dark);
  font-size: 0.8rem;
  font-weight: 850;
}

.bf-engagement-path-card__title,
.bf-engagement-path-card__description,
.bf-engagement-path-card__outcome {
  margin: 0;
}

.bf-engagement-path-card__title {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.6;
}

.bf-engagement-path-card__description {
  margin-top: 0.8rem;
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-engagement-path-card__fit {
  margin-top: clamp(22px, 3vw, 30px);
  padding-top: clamp(20px, 2.5vw, 26px);
  border-top: 1px solid var(--bf-border);
}

.bf-engagement-path-card__fit h4 {
  margin: 0 0 0.8rem;
  color: var(--bf-text);
  font-size: 1rem;
  line-height: 1.7;
}

.bf-engagement-path-card__fit ul {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bf-engagement-path-card__fit li {
  position: relative;
  margin: 0;
  padding-inline-start: 1.25rem;
  color: var(--bf-muted);
  line-height: 1.9;
}

.bf-engagement-path-card__fit li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.82em;
  width: 0.43rem;
  height: 0.43rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent);
}

.bf-engagement-path-card__outcome {
  margin-top: clamp(20px, 2.6vw, 28px);
  padding: 16px 18px;
  border-inline-start: 4px solid var(--bf-accent);
  background: var(--bf-surface-soft);
  color: var(--bf-text);
  line-height: 1.9;
}

.bf-engagement-path-card__deliverables {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.bf-engagement-path-card__deliverables span {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-pill);
  background: #fff;
  color: var(--bf-muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.5;
}

.bf-engagement-path-card__action {
  margin-top: auto;
  padding-top: clamp(24px, 3vw, 32px);
}

.bf-engagement-path-card__button {
  width: 100%;
  justify-content: center;
}

.bf-delivery-authority-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
  max-width: 980px;
  margin-inline: auto;
}

.bf-delivery-authority-callout > span {
  width: 0.42rem;
  min-height: 4.5rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent);
}

.bf-delivery-authority-callout p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.65;
  text-wrap: balance;
}

@media (max-width: 1120px) {
  .bf-delivery-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-delivery-service-grid > .bf-capability-card,
  .bf-delivery-service-grid > .bf-capability-card:last-child {
    grid-column: auto;
  }

  .bf-delivery-service-grid > .bf-capability-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .bf-services-audience-grid,
  .bf-engagement-path-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .bf-delivery-service-grid {
    grid-template-columns: 1fr;
  }

  .bf-delivery-service-grid > .bf-capability-card:last-child {
    grid-column: auto;
  }

  .bf-engagement-path-card {
    padding: 22px 18px;
  }

  .bf-delivery-authority-callout {
    align-items: start;
  }

  .bf-delivery-authority-callout > span {
    min-height: 3.5rem;
  }

  .bf-delivery-authority-callout p {
    font-size: clamp(1.25rem, 6.5vw, 1.75rem);
  }
}

/* =========================
   Homepage audience gateway
   Routes visitors to client-side or delivery-side BIM services.
   ========================= */
.bf-home-gateway {
  min-height: 100%;
  background:
    radial-gradient(circle at 82% 5%, rgba(245, 158, 11, 0.12), transparent 30rem),
    radial-gradient(circle at 12% 34%, rgba(3, 105, 161, 0.055), transparent 28rem),
    linear-gradient(180deg, #f8fafc 0%, var(--bf-bg) 100%);
}

.bf-home-gateway__hero {
  /* Fill the first viewport below the persistent app bar. Use min-height rather
     than a fixed height so short/mobile viewports can grow without clipping. */
  min-height: calc(100vh - var(--bf-appbar-h) - 18px);
  min-height: calc(100svh - var(--bf-appbar-h) - 18px);
  display: flex;
  align-items: center;
  padding-block-start: clamp(68px, 9vw, 124px);
  padding-block-end: clamp(52px, 7vw, 92px);
}

.bf-home-gateway__hero > .bf-container-wide,
.bf-home-gateway__hero > .bf-container {
  width: min(100% - (var(--bf-page-gutter) * 2), var(--bf-container-wide));
}

.bf-home-gateway-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.88fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: var(--bf-container-wide);
  margin-inline: auto;
}

.bf-home-gateway-hero__content {
  min-width: 0;
  text-align: right;
}

.bf-home-gateway-hero__eyebrow,
.bf-home-gateway-hero__title,
.bf-home-gateway-hero__lead {
  margin: 0;
}

.bf-home-gateway-hero__title {
  max-width: 690px;
  margin-top: clamp(12px, 2vw, 20px);
  line-height: 1.5;
  text-wrap: balance;
}

.bf-home-gateway-hero__lead {
  max-width: 680px;
  margin-top: clamp(18px, 2.8vw, 30px);
  color: var(--bf-muted);
  line-height: 2.05;
  text-align: justify;
  text-align-last: justify;
  text-wrap: pretty;
}

.bf-home-gateway-hero__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: clamp(26px, 3.5vw, 38px);
}

.bf-home-gateway-hero__action {
  width: 100%;
  min-height: 56px;
  justify-content: center;
  padding-inline: clamp(1rem, 2vw, 1.6rem);
  box-shadow: 0 14px 30px rgba(217, 119, 6, 0.14);
}

.bf-home-gateway-hero__action:hover {
  box-shadow: 0 16px 34px rgba(217, 119, 6, 0.2);
}

.bf-home-gateway-hero__services-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 18px;
  color: var(--bf-primary);
  font-weight: 800;
  text-decoration: none;
}

.bf-home-gateway-hero__services-link:hover {
  color: var(--bf-accent-dark);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.bf-home-system-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(174, 187, 205, 0.72);
  border-radius: var(--bf-radius-xl);
  background:
    radial-gradient(circle at 12% 8%, rgba(245, 158, 11, 0.14), transparent 15rem),
    rgba(255, 255, 255, 0.9);
  box-shadow: var(--bf-shadow-soft);
}

.bf-home-system-visual__grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.bf-home-system-visual__stage {
  display: grid;
  gap: 10px;
  padding: 15px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.9);
}

.bf-home-system-visual__stage--current {
  border-color: rgba(185, 28, 28, 0.2);
  background: linear-gradient(135deg, rgba(254, 242, 242, 0.88), rgba(255, 255, 255, 0.94));
}

.bf-home-system-visual__stage--result {
  border-color: rgba(4, 120, 87, 0.22);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.88), rgba(255, 255, 255, 0.94));
}

.bf-home-system-visual__label {
  color: var(--bf-subtle);
  font-size: 0.76rem;
  font-weight: 850;
}

.bf-home-system-visual__nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.bf-home-system-visual__nodes span {
  display: grid;
  place-items: center;
  min-height: 3.5rem;
  padding: 0.45rem;
  border: 1px solid rgba(216, 224, 236, 0.88);
  border-radius: var(--bf-radius-md);
  background: rgba(255, 255, 255, 0.9);
  color: var(--bf-text);
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-weight: 780;
  line-height: 1.55;
  text-align: center;
}

.bf-home-system-visual__connector {
  position: relative;
  display: grid;
  place-items: center;
  height: 18px;
}

.bf-home-system-visual__connector::before {
  content: "";
  width: 2px;
  height: 18px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent);
}

.bf-home-system-visual__connector::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid var(--bf-accent-dark);
  border-block-end: 2px solid var(--bf-accent-dark);
  transform: rotate(45deg);
}

.bf-home-system-visual__core {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 17px 20px;
  overflow: hidden;
  border-radius: var(--bf-radius-lg);
  background: var(--bf-ink);
  box-shadow: 0 16px 36px rgba(11, 18, 32, 0.18);
  color: #fff;
  text-align: center;
}

.bf-home-system-visual__core::before {
  content: "";
  position: absolute;
  inset-inline-start: -30px;
  inset-block-start: -45px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.18);
  filter: blur(8px);
}

.bf-home-system-visual__core-name {
  position: relative;
  color: var(--bf-accent);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.bf-home-system-visual__core strong {
  position: relative;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.65;
}

.bf-home-system-visual__core-points {
  position: absolute;
  inset-inline-end: 16px;
  inset-block-start: 14px;
  display: flex;
  gap: 5px;
}

.bf-home-system-visual__core-points i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bf-accent);
  opacity: 0.72;
}

.bf-home-system-visual__caption {
  margin: 2px 0 0;
  color: var(--bf-subtle);
  font-size: 0.76rem;
  font-weight: 750;
  text-align: center;
}

.bf-home-gateway__audiences {
  border-block: 1px solid rgba(216, 224, 236, 0.75);
}

section.bf-home-gateway__audiences {
  padding-block-start: clamp(52px, 6vw, 78px);
  padding-block-end: clamp(24px, 3vw, 38px);
}

.bf-home-gateway__audiences .bf-section-header {
  max-width: 860px;
}

.bf-home-gateway .bf-home-audience-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(22px, 3vw, 34px);
  align-items: stretch;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
}

.bf-audience-path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: clamp(22px, 2.8vw, 32px);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-xl);
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.10), transparent 15rem),
    rgba(255, 255, 255, 0.97);
  box-shadow: var(--bf-shadow-soft);
  text-align: right;
  transition: transform var(--bf-t-fast), border-color var(--bf-t-fast), box-shadow var(--bf-t-fast);
}

.bf-audience-path-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: clamp(26px, 3.5vw, 40px);
  height: 4px;
  border-radius: 0 0 var(--bf-radius-pill) var(--bf-radius-pill);
  background: linear-gradient(90deg, transparent, var(--bf-accent), transparent);
}

.bf-audience-path-card:hover {
  transform: translateY(-2px);
  border-color: var(--bf-border-strong);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.10);
}

.bf-audience-path-card__header {
  display: grid;
  gap: 10px;
}

.bf-audience-path-card__eyebrow,
.bf-audience-path-card__title,
.bf-audience-path-card__description {
  margin: 0;
}

.bf-audience-path-card__title {
  font-size: clamp(1.4rem, 2.35vw, 1.85rem);
  line-height: 1.55;
  text-wrap: balance;
}

.bf-audience-path-card__description {
  color: var(--bf-muted);
  line-height: 1.9;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
  text-wrap: pretty;
}

.bf-audience-path-card__flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: clamp(18px, 2.5vw, 24px);
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-surface-soft);
}

.bf-audience-path-card__flow-step {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 2.35rem;
  flex: 1 1 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(216, 224, 236, 0.85);
  border-radius: var(--bf-radius-md);
  background: #fff;
  color: var(--bf-text);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.55;
  text-align: center;
}

.bf-audience-path-card__flow-arrow {
  flex: 0 0 auto;
  color: var(--bf-accent-dark);
  font-size: 1.05rem;
  font-weight: 900;
}

.bf-audience-path-card__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  padding: 0;
  list-style: none;
}

.bf-audience-path-card__highlights li {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.32rem 0.68rem;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-pill);
  background: #fff;
  color: var(--bf-muted);
  font-size: 0.8rem;
  font-weight: 750;
  line-height: 1.45;
}

.bf-audience-path-card__highlights li::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  margin-inline-end: 0.48rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent);
}

.bf-audience-path-card__action {
  margin-top: auto;
  padding-top: clamp(20px, 2.8vw, 28px);
}

.bf-audience-path-card__button {
  width: 100%;
}

.bf-home-gateway__unsure .bf-cta-band {
  max-width: 1040px;
  margin-inline: auto;
}

section.bf-home-gateway__unsure {
  padding-block: clamp(20px, 3vw, 34px);
}

.bf-home-gateway__unsure .bf-cta-band__lead {
  text-align: right;
}

.bf-home-gateway__experiences {
  border-block-start: 1px solid rgba(216, 224, 236, 0.72);
}

.bf-home-selected-experiences {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.bf-home-experience-card {
  display: grid;
  grid-template-rows: 190px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-surface);
  box-shadow: var(--bf-shadow-card);
  transition: transform var(--bf-t-fast), border-color var(--bf-t-fast), box-shadow var(--bf-t-fast);
}

.bf-home-experience-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, 0.48);
  box-shadow: var(--bf-shadow-soft);
}

.bf-home-experience-card__visual {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 22px;
  border-block-end: 1px solid rgba(216, 224, 236, 0.78);
  background: var(--bf-surface-soft);
}

.bf-home-experience-card__grid {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.36;
  background-image: linear-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.bf-home-experience-card__implementation,
.bf-home-experience-card__recovery,
.bf-home-experience-card__problem {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bf-home-experience-card__implementation { gap: 13px; }

.bf-home-experience-card__implementation span,
.bf-home-experience-card__implementation strong {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 24px;
  font-size: 1.1rem;
  font-weight: 900;
}

.bf-home-experience-card__implementation span {
  border: 1px dashed var(--bf-border-strong);
  background: rgba(255, 255, 255, 0.88);
  color: var(--bf-subtle);
}

.bf-home-experience-card__implementation strong {
  background: var(--bf-ink);
  color: var(--bf-accent);
  box-shadow: 0 12px 28px rgba(11, 18, 32, 0.17);
}

.bf-home-experience-card__implementation i {
  width: 44px;
  height: 2px;
  background: var(--bf-accent);
}

.bf-home-experience-card__disciplines {
  position: absolute;
  inset-inline-end: 16px;
  inset-block-end: 14px;
  display: flex;
  gap: 5px;
}

.bf-home-experience-card__disciplines span,
.bf-home-experience-card__tool {
  padding: 0.24rem 0.52rem;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--bf-subtle);
  font-size: 0.64rem;
  font-weight: 850;
}

.bf-home-experience-card__recovery {
  position: relative;
  width: min(100%, 330px);
  min-height: 128px;
  display: grid;
  grid-template-columns: minmax(86px, 1fr) minmax(72px, .75fr) minmax(86px, 1fr);
  gap: 10px;
  align-items: center;
  padding-bottom: 30px;
}

.bf-home-experience-card__recovery-node {
  min-height: 88px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.bf-home-experience-card__recovery-node svg {
  width: 62px;
  height: 46px;
  overflow: visible;
}

.bf-home-experience-card__recovery-node svg :where(circle, path) {
  fill: none;
  stroke: rgba(15,23,42,.62);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bf-home-experience-card__recovery-node--delivery {
  border-color: rgba(4,120,87,.25);
  background: rgba(240,253,244,.88);
}

.bf-home-experience-card__recovery-node--delivery svg :where(circle, path) {
  stroke: var(--bf-success);
}

.bf-home-experience-card__recovery-node span {
  color: var(--bf-text);
  font-size: .7rem;
  font-weight: 900;
}

.bf-home-experience-card__recovery-path {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.bf-home-experience-card__recovery-path small {
  color: var(--bf-accent-dark);
  font-size: .62rem;
  font-weight: 900;
  white-space: nowrap;
}

.bf-home-experience-card__recovery-path i {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--bf-accent-dark);
  font-size: 1.2rem;
  font-style: normal;
}

.bf-home-experience-card__recovery-path i::before {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bf-success), var(--bf-accent));
}

.bf-home-experience-card__recovery-result {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  width: fit-content;
  margin-inline: auto;
  padding: 5px 11px;
  border: 1px solid rgba(4,120,87,.20);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: var(--bf-success);
  font-size: .68rem;
  font-weight: 950;
}

.bf-home-experience-card__problem { position: relative; gap: 16px; }

.bf-home-experience-card__problem span,
.bf-home-experience-card__problem strong {
  display: grid;
  place-items: center;
  width: 90px;
  height: 70px;
  border: 2px solid var(--bf-ink);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--bf-text);
  font-size: 0.9rem;
  font-weight: 900;
}

.bf-home-experience-card__problem i { width: 42px; height: 3px; background: var(--bf-accent); }

.bf-home-experience-card__problem b {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bf-ink);
  color: var(--bf-accent);
  transform: translate(50%, -50%);
}

.bf-home-experience-card__tool { position: absolute; inset-inline-end: 16px; inset-block-end: 14px; }

.bf-home-experience-card__content {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 22px;
}

.bf-home-experience-card__topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bf-home-experience-card__eyebrow { color: var(--bf-accent-dark); font-size: 0.75rem; font-weight: 900; }

.bf-home-experience-card__metric {
  padding: 0.25rem 0.55rem;
  border-radius: var(--bf-radius-pill);
  background: rgba(4, 120, 87, 0.1);
  color: var(--bf-success);
  font-size: 0.68rem;
  font-weight: 900;
}

.bf-home-experience-card h3 { margin: 0; font-size: clamp(1.12rem, 1.8vw, 1.32rem); line-height: 1.75; }
.bf-home-experience-card__context, .bf-home-experience-card__outcome { margin: 0; line-height: 1.8; }
.bf-home-experience-card__context { color: var(--bf-subtle); font-size: 0.78rem; font-weight: 700; }
.bf-home-experience-card__outcome { color: var(--bf-muted); font-size: 0.9rem; }

.bf-home-experience-card__content > a {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 10px;
  color: var(--bf-text);
  font-size: 0.85rem;
  font-weight: 900;
  text-decoration: none;
}

.bf-home-experience-card__content > a span { color: var(--bf-accent-dark); }
.bf-home-selected-experiences__all { display: flex; justify-content: center; margin-top: clamp(24px, 3.5vw, 38px); }
.bf-home-gateway__method { border-block: 1px solid rgba(216, 224, 236, 0.72); }
.bf-home-method-rail { max-width: 1040px; margin-inline: auto; }
.bf-home-method-rail .bf-process-rail__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bf-home-method-rail .bf-process-rail__item {
  justify-items: center;
  text-align: center;
}

.bf-home-method-rail .bf-process-rail__item:not(:last-child)::after {
  inset-inline-start: calc(50% + 1.2rem);
  width: calc(100% - 2.4rem);
}

.bf-home-method-rail .bf-process-rail__label {
  width: 100%;
  text-align: center;
}

.bf-home-method-rail .bf-process-rail__content {
  margin-top: 18px;
  padding-top: 17px;
  border-block-start: 1px solid rgba(216, 224, 236, 0.8);
  text-align: center;
}

.bf-home-method-rail .bf-process-rail__content p { margin: 0; }

@media (max-width: 760px) {
  .bf-home-gateway-hero {
    grid-template-columns: minmax(0, 1fr);
    max-width: 680px;
  }

  .bf-home-gateway .bf-home-audience-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 680px;
  }

  .bf-home-selected-experiences { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; }

  .bf-home-experience-card {
    grid-template-columns: minmax(180px, 0.76fr) minmax(0, 1.24fr);
    grid-template-rows: auto;
  }

  .bf-home-experience-card__visual {
    min-height: 220px;
    border-block-end: 0;
    border-inline-end: 1px solid rgba(216, 224, 236, 0.78);
  }

  .bf-home-method-rail .bf-process-rail__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-home-method-rail .bf-process-rail__item::after { display: none; }

  .bf-home-gateway__hero {
    min-height: calc(100vh - var(--bf-appbar-h) - 12px);
    min-height: calc(100svh - var(--bf-appbar-h) - 12px);
    padding-block-start: clamp(52px, 10vw, 76px);
  }
}

/* ----- Audience hero paragraph alignment -----
   Justify multi-line RTL introductions while keeping the final line anchored
   to the right. This prevents short final phrases from being stretched. */
@media (min-width: 761px) {
  .bf-home-gateway-hero__lead,
  .bf-client-landing__hero .bf-hero-split__lead,
  .bf-delivery-landing__hero .bf-hero-split__lead {
    width: 100%;
    direction: rtl;
    text-align: justify;
    text-align-last: right;
    text-justify: inter-word;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Keep split-page heroes close to the application header on desktop.
   The page shell already provides its own top clearance, so the former
   92-104px hero padding created an unnecessary empty band. */
@media (min-width: 901px) {
  section.bf-section.bf-hero-split-section {
    padding-block-start: clamp(28px, 2.5vw, 44px);
  }
}

@media (max-width: 900px) {
  section.bf-section.bf-hero-split-section {
    padding-block-start: clamp(26px, 6vw, 42px);
  }
}

@media (max-width: 560px) {
  section.bf-section.bf-hero-split-section {
    padding-block-start: clamp(20px, 5vw, 28px);
  }
}

/* Compact the Articles index. These selectors intentionally include the
   generated section classes so they outrank the shared section rhythm. */
section.bf-section-compact.bf-insights-index-hero {
  padding-block-start: clamp(28px, 3vw, 42px);
  padding-block-end: clamp(28px, 3vw, 42px);
}

section.bf-section.bf-insights-list-section {
  padding-block-start: clamp(32px, 3.5vw, 48px);
}

@media (max-width: 700px) {
  section.bf-section-compact.bf-insights-index-hero {
    padding-block: 28px;
  }

  section.bf-section.bf-insights-list-section {
    padding-block-start: 32px;
  }
}

/* Individual insight pages use the same generated section classes. Override
   the shared rhythm explicitly so the header and article do not drift apart. */
section.bf-section-compact.bf-insight-template__hero-section {
  padding-block-start: clamp(28px, 3vw, 42px);
  padding-block-end: clamp(28px, 3vw, 40px);
}

section.bf-section.bf-insight-template__body-section {
  padding-block-start: clamp(32px, 3.25vw, 44px);
}

@media (max-width: 700px) {
  section.bf-section-compact.bf-insight-template__hero-section {
    padding-block: 26px 28px;
  }

  section.bf-section.bf-insight-template__body-section {
    padding-block-start: 28px;
  }
}

/* BIM implementation page: dense operational rails, verified experience, and
   page-specific rhythm keep a long service narrative scannable. */
.bf-service-detail--implementation .bf-capability-card__title,
.bf-service-detail--implementation .bf-capability-card__body,
.bf-service-detail--implementation .bf-capability-card__outcome {
  text-align: right;
}

.bf-service-detail--implementation .bf-service-detail__process .bf-process-rail__item {
  justify-items: center;
  text-align: center;
}

.bf-service-detail--implementation .bf-service-detail__process .bf-process-rail__label {
  width: 100%;
  text-align: center;
}

.bf-implementation-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(20px, 3vw, 32px);
}

.bf-implementation-stage {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: #fff;
  text-align: right;
}

.bf-implementation-stage > span,
.bf-implementation-deliverable-rail__item > span,
.bf-implementation-discipline-rail article > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bf-ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.bf-implementation-stage strong,
.bf-implementation-deliverable-rail__item strong,
.bf-implementation-discipline-rail strong {
  color: var(--bf-text);
  font-size: 0.95rem;
}

.bf-implementation-stage p,
.bf-implementation-deliverable-rail__item p,
.bf-implementation-discipline-rail p {
  margin: 5px 0 0;
  color: var(--bf-muted);
  font-size: 0.8rem;
  line-height: 1.75;
  text-align: right;
}

.bf-implementation-deliverable-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-border);
}

.bf-implementation-deliverable-rail__item {
  min-height: 180px;
  padding: 24px;
  background: #fff;
  text-align: right;
}

.bf-implementation-deliverable-rail__item > span {
  margin-bottom: 22px;
  background: var(--bf-accent);
  color: var(--bf-ink);
}

.bf-implementation-discipline-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(22px, 3vw, 34px);
}

.bf-implementation-discipline-rail article {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface);
  text-align: right;
}

.bf-implementation-discipline-rail article > span {
  margin-bottom: 18px;
}

.bf-implementation-training-note {
  display: grid;
  grid-template-columns: minmax(230px, 0.75fr) minmax(0, 1.2fr) auto;
  gap: 22px;
  align-items: center;
  margin-top: 20px;
  padding: clamp(20px, 2.8vw, 28px);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--bf-radius-lg);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), #fff 58%);
  text-align: right;
}

.bf-implementation-training-note span,
.bf-implementation-evidence-card__content > span {
  display: block;
  margin-bottom: 5px;
  color: var(--bf-accent-dark);
  font-size: 0.76rem;
  font-weight: 900;
}

.bf-implementation-training-note strong { color: var(--bf-text); line-height: 1.75; }
.bf-implementation-training-note p { margin: 0; color: var(--bf-muted); line-height: 1.85; }
.bf-implementation-training-note a,
.bf-implementation-evidence-card__content > a { color: var(--bf-text); font-weight: 850; white-space: nowrap; }

.bf-implementation-evidence-card {
  display: grid;
  grid-template-columns: minmax(210px, 0.62fr) minmax(0, 1.65fr);
  max-width: 1040px;
  margin: clamp(24px, 3vw, 38px) auto 0;
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-xl);
  background: #fff;
  box-shadow: var(--bf-shadow-soft);
}

.bf-implementation-evidence-card__brand {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 28px;
  border-inline-end: 1px solid var(--bf-border);
  background: var(--bf-surface-soft);
  text-align: center;
}

.bf-implementation-evidence-card__brand img {
  width: 118px;
  height: 88px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}

.bf-implementation-evidence-card__brand span { display: block; color: var(--bf-text); font-weight: 900; }
.bf-implementation-evidence-card__brand strong { color: var(--bf-muted); font-size: 0.78rem; }
.bf-implementation-evidence-card__content { padding: clamp(24px, 3vw, 36px); text-align: right; }
.bf-implementation-evidence-card__content h3 { margin: 0; color: var(--bf-text); font-size: clamp(1.3rem, 2vw, 1.75rem); }
.bf-implementation-evidence-card__content p { margin: 12px 0 18px; color: var(--bf-muted); line-height: 1.95; text-align: right; }
.bf-implementation-evidence-card__content > div { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.bf-implementation-evidence-card__content > div span { padding: 7px 12px; border: 1px solid var(--bf-border); border-radius: 999px; color: var(--bf-muted); font-size: 0.76rem; font-weight: 800; }

.bf-service-detail--implementation .bf-service-detail__engagement .bf-engagement-path-card { padding: clamp(22px, 2.6vw, 28px); }
.bf-service-detail--implementation .bf-engagement-path-card__head { margin-bottom: 10px; }
.bf-service-detail--implementation .bf-engagement-path-card__fit { margin-top: 16px; padding-top: 14px; }
.bf-service-detail--implementation .bf-engagement-path-card__outcome { margin-top: 16px; padding: 12px 14px; }
.bf-service-detail--implementation .bf-engagement-path-card__deliverables { margin-top: 12px; }

.bf-implementation-related-card { position: relative; overflow: hidden; padding-block-start: 94px; }
.bf-implementation-related-card::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 70px; border-block-end: 1px solid var(--bf-border); background-color: var(--bf-surface-soft); background-repeat: no-repeat; }
.bf-implementation-related-card--difference::before { background-image: radial-gradient(circle at 25% 50%, var(--bf-accent) 0 8px, transparent 9px), linear-gradient(90deg, transparent 25%, rgba(15,23,42,.22) 25% 75%, transparent 75%), radial-gradient(circle at 75% 50%, var(--bf-ink) 0 10px, transparent 11px); }
.bf-implementation-related-card--transition::before { background-image: linear-gradient(90deg, transparent 12%, rgba(15,23,42,.12) 12% 38%, transparent 38% 43%, rgba(245,158,11,.22) 43% 68%, transparent 68% 73%, rgba(4,120,87,.18) 73% 90%, transparent 90%); }
.bf-implementation-related-card--readiness::before { background-image: linear-gradient(90deg, transparent 14%, rgba(15,23,42,.15) 14% 18%, transparent 18% 34%, rgba(245,158,11,.35) 34% 38%, transparent 38% 54%, rgba(15,23,42,.15) 54% 58%, transparent 58% 74%, rgba(4,120,87,.28) 74% 78%, transparent 78%); }

.bf-service-detail--implementation > :where(.bf-section, .bf-section-compact):not(.bf-service-detail__hero) { padding-block: clamp(34px, 4vw, 52px); }
.bf-service-detail--implementation > .bf-service-detail__authority { padding-block: clamp(24px, 3vw, 38px); }
.bf-service-detail--implementation > .bf-service-detail__cta { padding-block: clamp(16px, 2.4vw, 28px); }

@media (min-width: 761px) {
  .bf-service-detail--implementation .bf-service-detail__process .bf-process-rail__item:not(:last-child)::after { inset-inline-start: calc(50% + 1.2rem); width: calc(100% - 2.4rem); }
}

@media (max-width: 980px) {
  .bf-implementation-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-implementation-deliverable-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-implementation-discipline-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-implementation-training-note { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .bf-service-detail--implementation > :where(.bf-section, .bf-section-compact):not(.bf-service-detail__hero) { padding-block: 28px; }
  .bf-service-detail--implementation > .bf-service-detail__authority,
  .bf-service-detail--implementation > .bf-service-detail__cta { padding-block: 18px; }
  .bf-service-detail--implementation .bf-service-detail__process .bf-process-rail__item { justify-items: start; text-align: start; }
  .bf-service-detail--implementation .bf-service-detail__process .bf-process-rail__label { text-align: start; }
  .bf-implementation-stage-grid,
  .bf-implementation-deliverable-rail,
  .bf-implementation-discipline-rail { grid-template-columns: 1fr; }
  .bf-implementation-deliverable-rail__item { min-height: 0; }
  .bf-implementation-evidence-card { grid-template-columns: 1fr; }
  .bf-implementation-evidence-card__brand { grid-template-columns: 82px minmax(0, 1fr); min-height: 0; justify-items: start; place-content: initial; align-items: center; border-inline-end: 0; border-block-end: 1px solid var(--bf-border); text-align: right; }
  .bf-implementation-evidence-card__brand img { width: 76px; height: 60px; }
}

@media (max-width: 620px) {
  .bf-home-gateway__hero {
    padding-block-end: 44px;
  }

  .bf-home-gateway-hero__title {
    line-height: 1.5;
  }

  .bf-home-gateway-hero__content {
    text-align: center;
  }

  .bf-home-gateway-hero__eyebrow,
  .bf-home-gateway-hero__title,
  .bf-home-gateway-hero__lead {
    margin-inline: auto;
  }

  .bf-home-gateway-hero__lead {
    text-align: center;
    text-align-last: center;
  }

  .bf-home-gateway-hero__lead {
    line-height: 1.95;
  }

  .bf-home-gateway-hero__actions {
    grid-template-columns: 1fr;
    width: min(100%, 390px);
    margin-top: 24px;
  }

  .bf-home-gateway-hero__action {
    min-height: 52px;
  }

  .bf-home-gateway-hero__services-link {
    margin-inline: auto;
  }

  .bf-home-system-visual {
    padding: 16px;
    border-radius: var(--bf-radius-lg);
  }

  .bf-home-system-visual__nodes {
    grid-template-columns: 1fr;
  }

  .bf-home-system-visual__nodes span {
    min-height: 2.7rem;
  }

  .bf-home-experience-card { grid-template-columns: 1fr; grid-template-rows: 170px auto; }
  .bf-home-experience-card__visual { min-height: 0; border-inline-end: 0; border-block-end: 1px solid rgba(216, 224, 236, 0.78); }
  .bf-home-method-rail .bf-process-rail__list { grid-template-columns: 1fr; }

  .bf-audience-path-card {
    padding: 24px 18px;
    border-radius: var(--bf-radius-lg);
  }

  .bf-audience-path-card::before {
    inset-inline: 18px;
  }

  .bf-audience-path-card__flow {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bf-audience-path-card__flow-arrow {
    transform: rotate(-90deg);
    text-align: center;
  }

  .bf-audience-path-card__highlights {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bf-audience-path-card__highlights li {
    width: 100%;
  }
}

/* ----- Employer BIM advisor page: aligned RTL prose blocks -----
   Keep headings naturally ragged; justify only multi-line explanatory copy. */

.bf-advisor-role-summary .bf-authority-band {
  padding: clamp(26px, 3.6vw, 44px);
}

.bf-advisor-role-summary .bf-authority-band__content {
  max-width: none;
}

.bf-advisor-role-summary__flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 8px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.bf-advisor-role-summary__flow li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-inline: clamp(12px, 2vw, 22px);
  color: #fff;
}

.bf-advisor-role-summary__flow li:first-child {
  padding-inline-start: 0;
}

.bf-advisor-role-summary__flow li:not(:first-child) {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}

.bf-advisor-role-summary__flow span {
  color: var(--bf-accent);
  font-size: 0.76rem;
  font-weight: 900;
}

.bf-advisor-role-summary__flow strong {
  color: #fff;
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  line-height: 1.7;
}

@media (max-width: 760px) {
  .bf-advisor-role-summary__flow {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 10px;
  }

  .bf-advisor-role-summary__flow li,
  .bf-advisor-role-summary__flow li:first-child {
    padding: 10px 0;
  }

  .bf-advisor-role-summary__flow li:not(:first-child) {
    border-inline-start: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

.bf-service-detail--advisor :where(
  .bf-hero-split__lead,
  .bf-section-header__intro,
  .bf-comparison-panel__list li,
  .bf-capability-card__body,
  .bf-capability-card__outcome,
  .bf-engagement-path-card__description,
  .bf-engagement-path-card__fit li,
  .bf-engagement-path-card__outcome,
  .bf-process-rail__content p,
  .bf-authority-band__lead,
  .bf-authority-band__body p,
  .bf-cta-band__lead,
  .bf-cta-band__body p
) {
  width: 100%;
  direction: rtl;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
}

.bf-service-detail--advisor .bf-comparison-panel__list,
.bf-service-detail--advisor .bf-engagement-path-card__fit ul {
  width: 100%;
}


/* ----- BIM implementation page: aligned RTL prose blocks -----
   Keep headings naturally ragged; justify only multi-line explanatory copy. */
.bf-service-detail--implementation :where(
  .bf-hero-split__lead,
  .bf-video-explainer__description,
  .bf-video-explainer__body p,
  .bf-video-summary__list li > span:last-child,
  .bf-transcript-toggle__content p,
  .bf-section-header__intro,
  .bf-comparison-panel__list li,
  .bf-capability-card__body,
  .bf-capability-card__outcome,
  .bf-process-rail__content p,
  .bf-diagram-card__lead,
  .bf-diagram-card__items li,
  .bf-engagement-path-card__description,
  .bf-engagement-path-card__fit li,
  .bf-engagement-path-card__outcome,
  .bf-authority-band__lead,
  .bf-authority-band__body p,
  .bf-cta-band__lead,
  .bf-cta-band__body p
) {
  width: 100%;
  direction: rtl;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
}

.bf-service-detail--implementation .bf-comparison-panel__list,
.bf-service-detail--implementation .bf-diagram-card__items,
.bf-service-detail--implementation .bf-engagement-path-card__fit ul {
  width: 100%;
}

/* ----- BIM implementation hierarchy and retained-capability blocks ----- */
.bf-bim-hierarchy {
  width: min(100%, 860px);
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  display: grid;
  gap: 0.65rem;
}

.bf-bim-hierarchy__level {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.96));
  box-shadow: var(--bf-shadow-card);
}

.bf-bim-hierarchy__level--leadership {
  border-color: rgba(245, 158, 11, 0.30);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.96), rgba(255, 255, 255, 0.98));
}

.bf-bim-hierarchy__level--production {
  border-color: rgba(4, 120, 87, 0.26);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.94), rgba(255, 255, 255, 0.98));
}

.bf-bim-hierarchy__index {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-size: 0.82rem;
  font-weight: 950;
  box-shadow: var(--bf-shadow-card);
}

.bf-bim-hierarchy__level > div {
  min-width: 0;
  display: grid;
  gap: 0.4rem;
}

.bf-bim-hierarchy__level strong {
  color: var(--bf-text);
  font-size: clamp(1.03rem, 1.5vw, 1.24rem);
  line-height: 1.6;
}

.bf-bim-hierarchy__level p {
  margin: 0;
  color: var(--bf-muted);
  line-height: 2;
}

.bf-bim-hierarchy__connector {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-inline: auto;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-weight: 950;
}

.bf-service-detail__hierarchy-cards {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.bf-service-detail__emphasis {
  width: min(100%, 920px);
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.1rem, 3vw, 1.7rem);
  border-inline-start: 4px solid var(--bf-accent);
  border-radius: var(--bf-radius-md);
  background: var(--bf-accent-soft);
  color: var(--bf-text);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  font-weight: 750;
  line-height: 2;
}

.bf-service-detail--implementation :where(
  .bf-bim-hierarchy__level p,
  .bf-service-detail__emphasis
) {
  direction: rtl;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
  text-wrap: pretty;
}

@media (max-width: 720px) {
  .bf-bim-hierarchy__level {
    grid-template-columns: 2.65rem minmax(0, 1fr);
    gap: 0.8rem;
  }

  .bf-bim-hierarchy__index {
    width: 2.65rem;
    height: 2.65rem;
  }
}

/* ----- BIM optimization page: aligned RTL prose blocks ----- */
.bf-service-detail--optimization :where(
  .bf-hero-split__lead,
  .bf-section-header__intro,
  .bf-comparison-panel__list li,
  .bf-capability-card__body,
  .bf-capability-card__outcome,
  .bf-process-rail__content p,
  .bf-diagram-card__lead,
  .bf-diagram-card__items li,
  .bf-engagement-path-card__description,
  .bf-engagement-path-card__fit li,
  .bf-engagement-path-card__outcome,
  .bf-authority-band__lead,
  .bf-authority-band__body p,
  .bf-cta-band__lead,
  .bf-cta-band__body p,
  .bf-bim-hierarchy__level p,
  .bf-service-detail__emphasis
) {
  width: 100%;
  direction: rtl;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
}

.bf-service-detail--optimization .bf-comparison-panel__list,
.bf-service-detail--optimization .bf-diagram-card__items,
.bf-service-detail--optimization .bf-engagement-path-card__fit ul {
  width: 100%;
}

/* ----- About identity page: founders and credibility only ----- */
.bf-about-page--identity .bf-hero-split__lead,
.bf-about-page--identity .bf-section-header__intro,
.bf-about-page--identity .bf-authority-band__lead,
.bf-about-page--identity .bf-capability-card__body,
.bf-about-page--identity .bf-capability-card__outcome,
.bf-about-page--identity .bf-about-person-card__body,
.bf-about-page--identity .bf-about-person-card__facts li,
.bf-about-page--identity .bf-about-audience-list span,
.bf-about-page--identity .bf-cta-band__lead {
  text-align: justify;
  text-align-last: right;
}

.bf-about-founders-visual {
  width: min(100%, 470px);
  display: grid;
  gap: 12px;
  align-content: center;
}

.bf-about-founders-visual__person {
  display: grid;
  grid-template-columns: clamp(108px, 8vw, 124px) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 2.8vw, 26px);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-lg);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--bf-shadow-card);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.bf-about-founders-visual__person:hover,
.bf-about-founders-visual__person:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.46);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
}

.bf-about-founders-visual__person:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.22);
  outline-offset: 3px;
}

.bf-about-person-card[id] {
  scroll-margin-top: 96px;
}

.bf-about-page__founder-lead strong {
  color: var(--bf-text);
  font-weight: 900;
}

.bf-about-founders-visual__photo,
.bf-about-person-card__photo {
  display: block;
  width: clamp(104px, 8vw, 120px);
  height: clamp(104px, 8vw, 120px);
  border-radius: 30px;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: var(--bf-surface-soft);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
}

.bf-about-person-card__photo {
  width: 150px;
  height: 150px;
  border-radius: 36px;
}

.bf-about-founders-visual__person strong {
  display: block;
  color: var(--bf-text);
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  line-height: 1.55;
}

.bf-about-founders-visual__person small {
  display: block;
  margin-top: 4px;
  color: var(--bf-muted);
  line-height: 1.7;
}

.bf-about-founders-visual__divider {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-inline: auto;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent-soft);
  border: 1px solid rgba(245, 158, 11, 0.28);
  color: var(--bf-accent-dark);
  font-size: 1.2rem;
  font-weight: 950;
}

.bf-about-page--identity .bf-authority-band {
  margin-top: clamp(24px, 3vw, 36px);
}

.bf-about-founders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bf-card-gap);
  margin-top: clamp(24px, 3.5vw, 40px);
  align-items: stretch;
}

.bf-about-person-card {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: clamp(24px, 3.8vw, 38px);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-surface);
  box-shadow: var(--bf-shadow-card);
}

.bf-about-person-card--primary {
  border-color: rgba(245, 158, 11, 0.30);
  background: linear-gradient(145deg, rgba(255, 247, 237, 0.72), rgba(255, 255, 255, 0.98));
}

.bf-about-person-card__head {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.bf-about-person-card__head p {
  margin: 0 0 4px;
  color: var(--bf-accent-dark);
  font-size: 0.82rem;
  font-weight: 850;
}

.bf-about-person-card__head h2 {
  margin: 0;
  color: var(--bf-text);
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  line-height: 1.55;
}

.bf-about-person-card__body {
  margin: 0;
  color: var(--bf-muted);
  line-height: 2;
}

.bf-about-person-card__facts {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bf-about-person-card__facts li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--bf-text);
  line-height: 1.85;
}

.bf-about-person-card__facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.78em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bf-accent);
}

.bf-about-audience-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(24px, 3.5vw, 38px);
}

.bf-about-audience-list > div {
  display: grid;
  gap: 8px;
  padding: 20px 22px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface);
}

.bf-about-audience-list strong {
  color: var(--bf-text);
  font-size: 1.02rem;
}

.bf-about-audience-list span {
  color: var(--bf-muted);
  line-height: 1.85;
}

@media (max-width: 900px) {
  .bf-about-founders-grid,
  .bf-about-audience-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .bf-about-founders-visual__person,
  .bf-about-person-card__head {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
    text-align: center;
  }

  .bf-about-founders-visual__photo {
    width: 116px;
    height: 116px;
    border-radius: 29px;
  }

  .bf-about-person-card__photo {
    width: 144px;
    height: 144px;
    border-radius: 34px;
  }

  .bf-about-person-card__head :where(p, h2) {
    text-align: center;
  }

  .bf-about-person-card {
    padding: 22px 18px;
  }
}

/* ----- Contact page: contact details in the hero visual ----- */
.bf-contact-hero-card {
  display: grid;
  overflow: hidden;
  width: 100%;
  border: 1px solid rgba(245, 158, 11, .34);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-ink);
  color: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .2);
}

.bf-contact-hero-card__person,
.bf-contact-hero-card__row {
  padding: clamp(20px, 3vw, 30px);
}

.bf-contact-hero-card__person {
  display: grid;
  gap: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(245, 158, 11, .2), transparent 48%),
    rgba(255, 255, 255, .025);
}

.bf-contact-hero-card__identity-line,
.bf-contact-hero-card__contact-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.bf-contact-hero-card__identity-line {
  gap: 8px;
  direction: rtl;
  white-space: nowrap;
}

.bf-contact-hero-card__contact-line {
  gap: 14px;
  direction: ltr;
}

.bf-contact-hero-card__label,
.bf-contact-hero-card__row small {
  color: var(--bf-accent);
  font-size: .84rem;
  font-weight: 850;
}

.bf-contact-hero-card__identity-line > strong {
  color: #fff;
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  line-height: 1.5;
}

.bf-contact-hero-card__name-separator {
  color: rgba(255, 255, 255, .55);
  font-weight: 800;
}

.bf-contact-hero-card__english-name {
  color: rgba(255, 255, 255, .72);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

.bf-contact-hero-card__mobile {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: clamp(1.08rem, 1.65vw, 1.35rem);
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.bf-contact-hero-card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: rgba(245, 158, 11, .16);
  color: var(--bf-accent);
  flex: 0 0 auto;
}

.bf-contact-hero-card__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bf-contact-hero-card__mobile:hover,
.bf-contact-hero-card__row:hover strong {
  color: var(--bf-accent);
}

.bf-contact-hero-card__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  color: #fff;
  font-style: normal;
  text-decoration: none;
  /* Keep the icon physically on the left, regardless of the page RTL direction. */
  direction: ltr;
}

.bf-contact-hero-card__row > span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
  width: 100%;
  direction: rtl;
}

/* Office phone: label on the right; phone number starts beside the left icon. */
.bf-contact-hero-card__row[aria-label*="دفتر"] > span:last-child small {
  width: 100%;
  text-align: right;
}

.bf-contact-hero-card__row[aria-label*="دفتر"] > span:last-child strong {
  width: 100%;
  text-align: left;
}

/* Address: keep the label on the right, while the address itself stays left-aligned. */
.bf-contact-hero-card address.bf-contact-hero-card__row > span:last-child {
  width: 100%;
  direction: rtl;
}

.bf-contact-hero-card address.bf-contact-hero-card__row small {
  width: 100%;
  text-align: right;
}

.bf-contact-hero-card address.bf-contact-hero-card__row strong {
  width: 100%;
  text-align: left;
}
.bf-contact-hero-card__row strong {
  overflow-wrap: anywhere;
  color: #fff;
  font-size: clamp(1rem, 1.55vw, 1.2rem);
  line-height: 1.7;
  transition: color 160ms ease;
}

@media (max-width: 760px) {
  .bf-contact-hero-card__identity-line {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .bf-contact-hero-card__contact-line {
    gap: 14px;
  }
}

@media (max-width: 520px) {
  .bf-contact-hero-card__identity-line,
  .bf-contact-hero-card__contact-line {
    justify-content: center;
  }

  .bf-contact-hero-card__contact-line {
    flex-wrap: wrap;
  }

  .bf-contact-hero-card__icon {
    width: 44px;
    height: 44px;
  }
}


/* ----- Clickable service/capability cards -----
   The visible text link remains for clarity, while its stretched hit area makes
   the complete card clickable and keyboard focus remains visible. */
.bf-capability-card--linked,
.bf-service-card--linked {
  cursor: pointer;
}

.bf-capability-card--linked .bf-card-link::after,
.bf-service-card--linked .bf-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--bf-radius-lg);
}

.bf-capability-card--linked:focus-within,
.bf-service-card--linked:focus-within {
  outline: 3px solid rgba(245, 158, 11, 0.38);
  outline-offset: 3px;
  border-color: rgba(245, 158, 11, 0.58);
  box-shadow: var(--bf-shadow-soft);
}

/* ----- Services index: aligned RTL prose blocks -----
   Keep titles naturally right-aligned; justify only explanatory copy. */
.bf-services-reference :where(
  .bf-hero-split__lead,
  .bf-section-header__intro,
  .bf-capability-card__body,
  .bf-capability-card__outcome,
  .bf-service-card__description,
  .bf-service-card__items li,
  .bf-service-card__outcome,
  .bf-process-rail__content p,
  .bf-diagram-card__lead,
  .bf-diagram-card__items li,
  .bf-comparison-panel__list li,
  .bf-authority-band__lead,
  .bf-cta-band__lead
) {
  width: 100%;
  direction: rtl;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
  text-wrap: pretty;
  overflow-wrap: normal;
  word-break: normal;
}

/* ----- Contact intent cards: aligned RTL prose -----
   Keep headings and short list items right-aligned; justify explanatory copy only. */
.bf-contact-reference__intent :where(
  .bf-section-header__intro,
  .bf-service-card__description,
  .bf-service-card__outcome
) {
  width: 100%;
  direction: rtl;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}


/* ----- Homepage trust carousels ----- */
.bf-home-trust {
  position: relative;
  margin-block-start: clamp(28px, 3.5vw, 48px);
  padding-block: clamp(30px, 4vw, 48px);
  border: 1px solid rgba(174, 187, 205, 0.55);
  border-radius: clamp(24px, 2.5vw, 34px);
  background:
    radial-gradient(circle at 88% 10%, rgba(245, 158, 11, 0.09), transparent 24rem),
    var(--bf-surface);
  overflow: hidden;
}

.bf-home-trust__section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.bf-home-trust__section-heading h2,
.bf-testimonial-carousel__heading h2 {
  margin: 0;
  color: var(--bf-text);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.6;
}

.bf-company-carousel {
  margin-top: 0;
}

.bf-company-carousel__viewport {
  position: relative;
  direction: ltr;
  overflow: hidden;
  mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
}

.bf-company-carousel__track {
  --bf-company-carousel-gap: 12px;
  --bf-company-carousel-half-gap: 6px;
  display: flex;
  align-items: stretch;
  gap: var(--bf-company-carousel-gap);
  width: max-content;
  padding-block: 8px;
  will-change: transform;
  animation: bf-company-marquee 34s linear infinite;
}

.bf-company-carousel__group {
  display: flex;
  align-items: stretch;
  flex: none;
  gap: var(--bf-company-carousel-gap);
}

.bf-company-carousel__viewport:hover .bf-company-carousel__track,
.bf-company-carousel__viewport:focus-within .bf-company-carousel__track {
  animation-play-state: paused;
}

.bf-company-carousel__item {
  display: flex;
  flex: 0 0 clamp(142px, 15vw, 188px);
  min-height: 104px;
  padding: 11px 14px 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  direction: rtl;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: rgba(249, 250, 251, 0.82);
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.bf-company-carousel__item:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.42);
  background: #fff;
}

.bf-company-carousel__item:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.34);
  outline-offset: 2px;
}

.bf-company-carousel__logo {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 54px;
}

.bf-company-carousel__logo img {
  display: block;
  width: auto;
  max-width: 142px;
  height: auto;
  max-height: 54px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.bf-company-carousel__logo-placeholder {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px dashed var(--bf-border-strong);
  border-radius: 18px;
  color: var(--bf-subtle);
  background: var(--bf-surface);
  font-size: 0.72rem;
  font-weight: 800;
}

.bf-company-carousel__name {
  width: 100%;
  color: var(--bf-text);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

@keyframes bf-company-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-50% - var(--bf-company-carousel-half-gap)), 0, 0);
  }
}

.bf-testimonial-carousel {
  margin-top: clamp(52px, 7vw, 84px);
}

.bf-testimonial-carousel--service {
  margin-top: clamp(42px, 5vw, 64px);
  padding-top: clamp(34px, 4vw, 48px);
  border-top: 1px solid var(--bf-border);
}

.bf-testimonial-carousel--service .bf-testimonial-carousel__heading {
  justify-content: center;
  text-align: center;
}

.bf-testimonial-carousel--service .bf-testimonial-carousel__heading > div:first-child,
.bf-testimonial-carousel--service .bf-testimonial-carousel__heading h2 {
  width: 100%;
  text-align: center;
  text-wrap: balance;
}

.bf-testimonial-carousel--service .bf-testimonial-carousel__heading h2 {
  font-size: clamp(1.45rem, 2.7vw, 2rem);
}

.bf-testimonial-carousel--service .bf-testimonial-carousel__controls,
.bf-testimonial-carousel--service .bf-testimonial-carousel__dots {
  display: none;
}

.bf-testimonial-carousel--service .bf-testimonial-carousel__viewport {
  grid-auto-flow: initial;
  grid-auto-columns: initial;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
}

.bf-testimonial-carousel__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.bf-testimonial-carousel__heading .bf-eyebrow {
  margin: 0 0 6px;
}

.bf-testimonial-carousel__controls {
  display: flex;
  gap: 10px;
}

.bf-carousel-control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--bf-border-strong);
  border-radius: 50%;
  background: var(--bf-surface);
  color: var(--bf-text);
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.bf-carousel-control:hover {
  transform: translateY(-1px);
  border-color: var(--bf-accent-dark);
  background: var(--bf-accent-soft);
  color: var(--bf-accent-dark);
}

.bf-testimonial-carousel__viewport {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(300px, 25.5vw, 330px);
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 6px 4px 12px;
}

.bf-testimonial-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.bf-testimonial-carousel__slide {
  display: flex;
  height: 100%;
  scroll-snap-align: start;
  min-width: 0;
}

.bf-testimonial-card {
  position: relative;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  grid-template-areas:
    "portrait identity"
    "excerpt excerpt"
    "action action";
  align-content: start;
  gap: 16px 18px;
  width: 100%;
  height: 100%;
  min-height: 304px;
  padding: 26px 26px 22px;
  overflow: hidden;
  border: 1px solid rgba(174, 187, 205, 0.82);
  border-radius: var(--bf-radius-lg);
  background: linear-gradient(180deg, rgba(249, 250, 251, 0.92) 0, rgba(255, 255, 255, 0.96) 92px), var(--bf-surface);
  color: var(--bf-text);
  font: inherit;
  text-align: right;
  cursor: pointer;
  box-shadow: var(--bf-shadow-card);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.bf-testimonial-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 92px;
  height: 1px;
  background: rgba(174, 187, 205, 0.55);
}

.bf-testimonial-card::after {
  content: "";
  position: absolute;
  inset-inline-end: 24px;
  inset-block-start: 0;
  width: 78px;
  height: 3px;
  border-radius: 999px;
  background: var(--bf-accent-dark);
}

.bf-testimonial-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, 0.52);
  box-shadow: var(--bf-shadow-soft);
}

.bf-testimonial-card:focus-visible,
.bf-carousel-control:focus-visible,
.bf-testimonial-carousel__dot:focus-visible,
.bf-testimonial-dialog__close:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.38);
  outline-offset: 3px;
}

.bf-testimonial-card__portrait,
.bf-testimonial-dialog__portrait {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 22px;
  background: var(--bf-ink);
  color: var(--bf-accent);
  font-weight: 900;
}

.bf-testimonial-card__portrait {
  grid-area: portrait;
  align-self: start;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(174, 187, 205, 0.45);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.bf-testimonial-card__portrait img,
.bf-testimonial-dialog__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.bf-testimonial-card__identity {
  grid-area: identity;
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding-block-start: 4px;
}

.bf-testimonial-card__identity strong {
  font-size: 1.08rem;
  line-height: 1.55;
}

.bf-testimonial-card__identity small {
  color: var(--bf-subtle);
  font-size: 0.84rem;
  line-height: 1.5;
}

.bf-testimonial-card__role {
  margin-top: 2px;
}

.bf-testimonial-card__company {
  color: var(--bf-muted) !important;
  font-weight: 750;
}

.bf-testimonial-card__excerpt {
  grid-area: excerpt;
  display: -webkit-box;
  margin-top: 6px;
  overflow: hidden;
  color: var(--bf-muted);
  line-height: 2;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.bf-testimonial-card__excerpt::before {
  content: "“";
  margin-left: 5px;
  color: var(--bf-accent-dark);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 0;
}

.bf-testimonial-card__action {
  grid-area: action;
  align-self: end;
  justify-self: start;
  margin-top: auto;
  padding-top: 12px;
  color: var(--bf-accent-dark);
  font-size: 0.85rem;
  font-weight: 850;
}

.bf-testimonial-card__action::before {
  content: "←";
  margin-left: 6px;
}

.bf-testimonial-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.bf-testimonial-carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bf-border-strong);
  cursor: pointer;
  transition: width 160ms ease, background 160ms ease;
}

.bf-testimonial-carousel__dot.is-active {
  width: 28px;
  background: var(--bf-accent-dark);
}

.bf-testimonial-dialog {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 24px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--bf-text);
}

.bf-testimonial-dialog[open] {
  display: grid;
  place-items: center;
}

.bf-testimonial-dialog::backdrop {
  background: rgba(11, 18, 32, 0.72);
  backdrop-filter: blur(4px);
}

.bf-testimonial-dialog__panel {
  position: relative;
  display: grid;
  gap: 24px;
  width: min(760px, 100%);
  overflow-y: auto;
  max-height: calc(100dvh - 48px);
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid rgba(174, 187, 205, 0.72);
  border-radius: 32px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.98) 72%, rgba(251, 247, 240, 0.98) 100%);
  box-shadow: var(--bf-shadow-video);
}

.bf-testimonial-dialog__panel::after {
  content: "";
  position: absolute;
  inset-inline-end: 30px;
  inset-block-start: 0;
  width: 90px;
  height: 4px;
  border-radius: 999px;
  background: var(--bf-accent-dark);
}

.bf-testimonial-dialog__close {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--bf-border);
  border-radius: 50%;
  background: rgba(249, 250, 251, 0.96);
  color: var(--bf-text);
  font: inherit;
  font-size: 1.4rem;
  cursor: pointer;
}

.bf-testimonial-dialog__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px;
  align-items: center;
  gap: 20px;
  padding-left: 56px;
}

.bf-testimonial-dialog__portrait {
  width: 88px;
  height: 88px;
  border-radius: 26px;
  border: 1px solid rgba(174, 187, 205, 0.45);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.bf-testimonial-dialog__identity {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.bf-testimonial-dialog__header h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  line-height: 1.45;
  text-wrap: balance;
}

.bf-testimonial-dialog__header p {
  display: grid;
  gap: 3px;
  margin: 0;
  color: var(--bf-subtle);
  line-height: 1.75;
}

.bf-testimonial-dialog__quote {
  margin: 0;
  padding: clamp(22px, 3vw, 28px) clamp(22px, 3.4vw, 30px);
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-right: 4px solid var(--bf-accent-dark);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(251, 247, 240, 0.94), rgba(255, 255, 255, 0.98));
  color: var(--bf-text);
  line-height: 2.15;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}

.bf-testimonial-dialog__context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
  padding-top: 18px;
  border-top: 1px solid var(--bf-border);
  color: var(--bf-subtle);
  font-size: 0.9rem;
  line-height: 1.9;
}

.bf-testimonial-dialog__meta {
  min-width: 0;
}

.bf-testimonial-dialog__context a {
  justify-self: start;
  color: var(--bf-accent-dark);
  font-weight: 850;
  text-decoration: none;
}

.bf-testimonial-dialog__context a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 760px) {
  .bf-testimonial-carousel__viewport {
    grid-auto-columns: min(88vw, 420px);
  }

  .bf-testimonial-carousel--service .bf-testimonial-carousel__viewport {
    grid-template-columns: 1fr;
  }

  .bf-testimonial-card {
    min-height: 320px;
  }
}

@media (max-width: 560px) {
  .bf-testimonial-dialog {
    padding: 12px;
  }

  .bf-testimonial-carousel__heading {
    align-items: center;
  }

  .bf-testimonial-carousel__heading .bf-eyebrow {
    display: none;
  }

  .bf-testimonial-carousel__viewport {
    grid-auto-columns: 92%;
    gap: 14px;
  }

  .bf-testimonial-card {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 308px;
    padding: 22px 18px 20px;
    border-radius: var(--bf-radius-md);
  }

  .bf-testimonial-card::before {
    inset-block-start: 82px;
  }

  .bf-testimonial-card::after {
    inset-inline-end: 18px;
    width: 64px;
  }

  .bf-testimonial-card__portrait {
    width: 58px;
    height: 58px;
    border-radius: 18px;
  }

  .bf-testimonial-dialog__panel {
    gap: 18px;
    padding: 68px 20px 24px;
    border-radius: 24px;
  }

  .bf-testimonial-dialog__header {
    grid-template-columns: minmax(0, 1fr) 66px;
    padding-left: 0;
  }

  .bf-testimonial-dialog__portrait {
    width: 66px;
    height: 66px;
    border-radius: 20px;
  }

  .bf-testimonial-dialog__context {
    grid-template-columns: 1fr;
  }

  .bf-testimonial-dialog__context a {
    justify-self: start;
  }

  .bf-testimonial-dialog__quote {
    padding: 18px;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bf-company-carousel__track {
    animation: none;
  }

  .bf-company-carousel__viewport {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
    scrollbar-width: thin;
  }

  .bf-testimonial-carousel__viewport {
    scroll-behavior: auto;
  }
}

/* ----- Homepage mobile alignment polish -----
   The desktop layout keeps its current hierarchy. On narrow screens, make the
   hero copy, process labels, and trust-section headings explicitly centered so
   inherited RTL/justified rules cannot pull individual lines back to the right. */
@media (max-width: 760px) {
  .bf-home-gateway-hero__eyebrow,
  .bf-home-gateway-hero__title,
  .bf-home-gateway-hero__lead {
    width: 100%;
    text-align: center;
    text-align-last: center;
  }

  .bf-home-trust__section-heading {
    justify-content: center;
    text-align: center;
  }

  .bf-home-trust__section-heading h2 {
    width: 100%;
    text-align: center;
    text-wrap: balance;
  }

  .bf-testimonial-carousel__heading {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    text-align: center;
  }

  .bf-testimonial-carousel__heading > div:first-child,
  .bf-testimonial-carousel__heading h2 {
    width: 100%;
    text-align: center;
    text-wrap: balance;
  }
}

/* ----- Services hero mobile alignment polish -----
   Center the compact hero presentation on narrow screens while preserving the
   right-aligned, scan-friendly layout used by the rest of the services page. */
@media (max-width: 760px) {
  .bf-services-reference__hero .bf-hero-split__content {
    justify-items: center;
    text-align: center;
  }

  .bf-services-reference__hero :where(
    .bf-hero-split__eyebrow,
    .bf-hero-split__title,
    .bf-hero-split__lead
  ) {
    width: 100%;
    margin-inline: auto;
    text-align: center;
    text-align-last: center;
  }

  .bf-services-reference__hero .bf-hero-split__title {
    max-width: 18ch;
    text-wrap: balance;
  }

  .bf-services-reference__hero .bf-services-hero-map__node {
    justify-items: center;
    text-align: center;
  }

  .bf-services-reference__hero .bf-services-hero-map__node :where(span, strong) {
    width: 100%;
    text-align: center;
  }

  /* The map is already vertical, so its down arrows must not be rotated. */
  .bf-services-reference__hero .bf-services-hero-map__arrow {
    transform: none;
  }
}

/* ----- Site-wide mobile heading alignment -----
   On compact screens, all page introductions and section headings use one
   centered presentation. Reading-heavy body copy, lists, cards, and article
   content keep their RTL/right or justified alignment. */
@media (max-width: 760px) {
  /* Shared split heroes: Services, service detail pages, audience landing
     pages, About, Contact, CDE, and structural assessment. */
  .bf-hero-split-section .bf-hero-split__content {
    justify-items: center;
    text-align: center;
  }

  .bf-hero-split-section .bf-hero-split__content :where(
    .bf-hero-split__eyebrow,
    .bf-hero-split__title,
    .bf-hero-split__lead,
    .bf-hero-split__body
  ) {
    width: 100%;
    margin-inline: auto;
    text-align: center;
    text-align-last: center;
  }

  .bf-hero-split-section .bf-hero-split__title {
    max-width: 19ch;
    text-wrap: balance;
  }

  .bf-hero-split-section .bf-hero-split__lead {
    max-width: 42rem;
    text-wrap: pretty;
  }

  .bf-hero-split-section .bf-hero-split__actions {
    justify-content: center;
  }

  /* Center labels inside every diagram used in a split hero. */
  .bf-hero-split__visual :where(
    .bf-services-hero-map__node,
    .bf-governance-hero-stack__node,
    .bf-service-hero-stack__node,
    .bf-cde-state-stack__node,
    .bf-contact-handoff-map__node,
    .bf-assessment-visual__node,
    .bf-client-control-chain__node,
    .bf-delivery-chain__node
  ) {
    justify-items: center;
    text-align: center;
  }

  .bf-hero-split__visual :where(
    .bf-services-hero-map__node,
    .bf-governance-hero-stack__node,
    .bf-service-hero-stack__node,
    .bf-cde-state-stack__node,
    .bf-contact-handoff-map__node,
    .bf-assessment-visual__node,
    .bf-client-control-chain__node,
    .bf-delivery-chain__node
  ) :where(span, strong, small, p) {
    width: 100%;
    text-align: center;
    text-align-last: center;
  }

  /* The founder cards are part of the About-page hero visual. */
  .bf-about-page__hero .bf-about-founders-visual__person {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .bf-about-page__hero .bf-about-founders-visual__person :where(strong, small) {
    width: 100%;
    text-align: center;
  }

  /* Insights index introduction. */
  .bf-insights-index-hero {
    text-align: center;
  }

  .bf-insights-index-hero .bf-eyebrow,
  .bf-insights-index-hero .bf-page-title,
  .bf-insights-index-hero .bf-lead {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    text-align: center;
    text-align-last: center;
  }

  /* Individual insight/article header. */
  .bf-insight-template__header {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
  }

  .bf-insight-template__header :where(
    .bf-insight-template__title,
    .bf-insight-template__lead
  ) {
    width: 100%;
    max-width: none;
    text-align: center;
    text-align-last: center;
  }

  .bf-insight-template__header :where(
    .bf-insight-template__meta-row,
    .bf-insight-template__tags
  ) {
    justify-content: center;
  }

  /* Legacy content templates and secondary routes that still use PageHeader. */
  .bf-page-header {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .bf-page-header :where(.bf-page-title, .bf-page-lead) {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    text-align: center;
    text-align-last: center;
  }

  .bf-page-header :where(.bf-meta-row, .bf-tags) {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Standard section introductions across every page. Body content below these
     headers intentionally remains RTL/right-aligned for readability. */
  .bf-section-header,
  .bf-section-header--center {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
  }

  .bf-section-header .bf-section-header__eyebrow,
  .bf-section-header .bf-section-header__title,
  .bf-section-header .bf-section-header__intro,
  .bf-section-header .bf-section-header__content {
    width: 100%;
    margin-inline: auto;
    text-align: center;
    text-align-last: center;
  }
}

/* ----- BIM Talk / BIM Automation pre-launch hubs ----- */
.bf-video-hub {
  background:
    radial-gradient(circle at 88% 10%, rgba(245, 158, 11, 0.08), transparent 28rem),
    radial-gradient(circle at 8% 38%, rgba(3, 105, 161, 0.045), transparent 26rem);
}

.bf-video-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.bf-video-hub-visual {
  width: min(100%, 31rem);
  min-height: 21rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.8rem;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: var(--bf-radius-xl);
  background:
    linear-gradient(150deg, rgba(245, 158, 11, 0.14), rgba(255, 255, 255, 0.9) 48%),
    var(--bf-surface);
  box-shadow: var(--bf-shadow-soft);
  text-align: center;
}

.bf-video-hub-visual--automation {
  background:
    linear-gradient(150deg, rgba(3, 105, 161, 0.12), rgba(255, 255, 255, 0.92) 48%),
    var(--bf-surface);
}

.bf-video-hub-visual__badge {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding-inline: 0.85rem;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.bf-video-hub-visual strong {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--bf-text);
}

.bf-video-hub-visual__arrow {
  color: var(--bf-accent-dark);
  font-size: clamp(1.08rem, 1.65vw, 1.28rem);
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 900px) {
  .bf-video-hub-grid {
    grid-template-columns: 1fr;
  }

  .bf-video-hub-visual {
    min-height: 17rem;
  }
}



/* ----- Pre-launch video hub entries and watch-page scaffolding ----- */
.bf-video-hub-entry-grid {
  width: min(100%, 52rem);
  margin-inline: auto;
}

.bf-video-watch {
  background:
    radial-gradient(circle at 86% 8%, rgba(245, 158, 11, 0.065), transparent 28rem),
    var(--bf-bg);
}

.bf-video-watch--automation {
  background:
    radial-gradient(circle at 86% 8%, rgba(3, 105, 161, 0.055), transparent 28rem),
    var(--bf-bg);
}

.bf-video-watch__backlink {
  width: min(100% - 2rem, var(--bf-container));
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
}

.bf-video-watch__backlink a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 1rem;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-surface);
  color: var(--bf-text);
  font-weight: 750;
  text-decoration: none;
}

.bf-video-watch__backlink a:hover {
  border-color: var(--bf-border-strong);
}

.bf-video-watch__video .bf-video-explainer {
  width: min(100%, var(--bf-container));
  margin-inline: auto;
}

/* ----- Dedicated video watch pages: video-first layout ----- */
.bf-video-watch__hero {
  padding-top: clamp(28px, 4vw, 52px);
  padding-bottom: clamp(44px, 6vw, 80px);
}

.bf-video-watch__hero .bf-video-watch__backlink {
  width: 100%;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.bf-video-watch__heading {
  width: min(100%, 62rem);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: 0.85rem;
  text-align: center;
}

.bf-video-watch__heading .bf-eyebrow,
.bf-video-watch__heading .bf-page-title,
.bf-video-watch__heading .bf-lead {
  margin: 0;
  text-align: center;
  text-align-last: center;
}

.bf-video-watch__heading .bf-lead {
  max-width: 48rem;
}

.bf-video-watch__player {
  position: relative;
  width: min(100%, 69rem);
  aspect-ratio: 16 / 9;
  margin: clamp(2rem, 4vw, 3.25rem) auto 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.75rem;
  overflow: hidden;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--bf-video-radius);
  background:
    radial-gradient(circle at 68% 18%, rgba(245, 158, 11, 0.18), transparent 30rem),
    var(--bf-video-bg);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: var(--bf-shadow-video);
  text-align: center;
}

.bf-video-watch__player--automation {
  background:
    radial-gradient(circle at 68% 18%, rgba(3, 105, 161, 0.28), transparent 30rem),
    var(--bf-video-bg);
}

.bf-video-watch__player .mud-icon-root {
  font-size: clamp(3.8rem, 7vw, 5.8rem);
  color: var(--bf-accent);
}

.bf-video-watch__player strong {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  color: #fff;
}

.bf-video-watch__player span {
  color: rgba(255, 255, 255, 0.68);
}

.bf-video-watch__meta {
  width: min(100%, 69rem);
  margin: 1rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

.bf-video-watch__meta span,
.bf-video-watch__tech span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding-inline: 0.8rem;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-surface);
  color: var(--bf-muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.bf-video-watch__narrow {
  width: min(100%, var(--bf-container-narrow));
  margin-inline: auto;
}

.bf-video-watch__narrow > .bf-eyebrow,
.bf-video-watch__narrow > .bf-section-title {
  margin-top: 0;
}

.bf-video-watch__takeaways .bf-section-title {
  margin-bottom: 1.25rem;
}

.bf-video-watch__takeaway-list,
.bf-video-watch__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.8rem;
}

.bf-video-watch__takeaway-list li,
.bf-video-watch__steps li {
  position: relative;
  padding: 0.9rem 1rem;
  border-inline-start: 3px solid var(--bf-accent);
  border-radius: var(--bf-radius-sm);
  background: var(--bf-surface);
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-video-watch__article p {
  color: var(--bf-muted);
  line-height: 2.05;
}

.bf-video-watch__detail-grid {
  width: min(100%, 62rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.5rem);
}

.bf-video-watch__detail-block {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface);
}

.bf-video-watch__detail-block .bf-eyebrow,
.bf-video-watch__detail-block .bf-card-title,
.bf-video-watch__detail-block p {
  margin-top: 0;
}

.bf-video-watch__detail-block p:last-child {
  margin-bottom: 0;
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-video-watch__tech {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

@media (max-width: 720px) {
  .bf-video-watch__heading {
    justify-items: center;
  }

  .bf-video-watch__player {
    border-radius: var(--bf-radius-lg);
    padding: 1.25rem;
  }

  .bf-video-watch__detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ----- Dedicated video watch pages: tighter editorial rhythm -----
   Watch pages should read as one continuous experience around the video,
   not as service-page bands separated by large vertical gaps. */
.bf-video-watch > .bf-section:not(.bf-video-watch__hero),
.bf-video-watch > .bf-section-compact {
  padding-block: clamp(24px, 3vw, 40px);
}

.bf-video-watch__hero {
  padding-top: clamp(14px, 2vw, 24px);
  padding-bottom: clamp(24px, 3vw, 40px);
}

.bf-video-watch__hero .bf-video-watch__backlink {
  margin-bottom: clamp(0.8rem, 1.5vw, 1.2rem);
}

.bf-video-watch__heading {
  gap: 0.65rem;
}

.bf-video-watch__player {
  margin-top: clamp(1.2rem, 2.2vw, 1.8rem);
}

.bf-video-watch__meta {
  margin-top: 0.75rem;
}

.bf-video-watch__takeaways,
.bf-video-watch__details {
  padding-top: clamp(20px, 2.6vw, 34px) !important;
  padding-bottom: clamp(20px, 2.6vw, 34px) !important;
}

.bf-video-watch__article {
  padding-top: clamp(24px, 3vw, 38px) !important;
  padding-bottom: clamp(24px, 3vw, 38px) !important;
}

.bf-video-watch__conclusion,
.bf-video-watch__cta {
  padding-top: clamp(18px, 2.4vw, 30px) !important;
  padding-bottom: clamp(18px, 2.4vw, 30px) !important;
}

.bf-video-watch__takeaways .bf-section-title {
  margin-bottom: 0.9rem;
}

.bf-video-watch__article .bf-section-title {
  margin-bottom: 0.8rem;
}

.bf-video-watch__article p {
  margin-block: 0.65rem;
}

.bf-video-watch__conclusion .bf-authority-band,
.bf-video-watch__cta .bf-cta-band {
  padding: clamp(22px, 3.5vw, 38px);
}

@media (max-width: 700px) {
  .bf-video-watch > .bf-section:not(.bf-video-watch__hero),
  .bf-video-watch > .bf-section-compact {
    padding-block: 22px;
  }

  .bf-video-watch__hero {
    padding-top: 12px;
    padding-bottom: 24px;
  }

  .bf-video-watch__player {
    margin-top: 1rem;
  }

  .bf-video-watch__takeaways,
  .bf-video-watch__details,
  .bf-video-watch__article,
  .bf-video-watch__conclusion,
  .bf-video-watch__cta {
    padding-block: 22px !important;
  }
}

/* ----- Dedicated video watch pages: hard override global section rhythm -----
   BfSection renders <section class="bf-section ...">. The global
   `section.bf-section` selector is more specific than a single watch-page
   class, so explicitly scope the watch hero and content sections here. */
.bf-video-watch > section.bf-section.bf-video-watch__hero {
  padding-top: clamp(16px, 1.7vw, 24px);
  padding-bottom: clamp(14px, 1.5vw, 22px);
}

.bf-video-watch > section.bf-section-compact.bf-video-watch__takeaways,
.bf-video-watch > section.bf-section-compact.bf-video-watch__details {
  padding-top: clamp(18px, 2vw, 28px) !important;
  padding-bottom: clamp(18px, 2vw, 28px) !important;
}

.bf-video-watch > section.bf-section.bf-video-watch__article {
  padding-top: clamp(22px, 2.4vw, 34px) !important;
  padding-bottom: clamp(22px, 2.4vw, 34px) !important;
}

.bf-video-watch > section.bf-section-compact.bf-video-watch__conclusion,
.bf-video-watch > section.bf-section-compact.bf-video-watch__cta {
  padding-top: clamp(14px, 1.8vw, 24px) !important;
  padding-bottom: clamp(14px, 1.8vw, 24px) !important;
}

.bf-video-watch__hero .bf-video-watch__backlink {
  margin-bottom: 0.8rem;
}

.bf-video-watch__player {
  margin-top: clamp(0.9rem, 1.6vw, 1.35rem);
}

.bf-video-watch__meta {
  margin-top: 0.65rem;
}

@media (max-width: 700px) {
  .bf-video-watch > section.bf-section.bf-video-watch__hero {
    padding-top: 10px;
    padding-bottom: 14px;
  }

  .bf-video-watch > section.bf-section-compact.bf-video-watch__takeaways,
  .bf-video-watch > section.bf-section-compact.bf-video-watch__details,
  .bf-video-watch > section.bf-section.bf-video-watch__article,
  .bf-video-watch > section.bf-section-compact.bf-video-watch__conclusion,
  .bf-video-watch > section.bf-section-compact.bf-video-watch__cta {
    padding-block: 18px !important;
  }
}

/* Services index hero: preserve a deliberate semantic line break and keep
   Persian heading/lead text naturally RTL-aligned. Never justify hero copy. */
.bf-services-reference__hero .bf-hero-split__content {
  text-align: right;
}

.bf-services-reference__hero .bf-hero-split__title {
  width: 100%;
  max-width: 22ch;
  white-space: pre-line;
  text-align: right !important;
  text-align-last: auto !important;
  text-justify: auto;
  word-spacing: normal;
  letter-spacing: 0;
  text-wrap: pretty;
}

.bf-services-reference__hero .bf-hero-split__lead {
  max-width: 48rem;
  text-align: right !important;
  text-align-last: auto !important;
  text-wrap: pretty;
}

/* ----- Selected primary-page hero H1 edge alignment -----
   On desktop, justify only the requested multi-line hero titles so both visual
   edges read cleanly. Keep the final line naturally RTL-aligned. Mobile/tablet
   retain their existing centered/right-aligned behavior. */
@media (min-width: 961px) {
  .bf-about-page__hero .bf-hero-split__title,
  .bf-contact-reference__hero .bf-hero-split__title,
  .bf-service-detail--advisor .bf-service-detail__hero .bf-hero-split__title,
  .bf-service-detail--implementation .bf-service-detail__hero .bf-hero-split__title,
  .bf-service-detail--optimization .bf-service-detail__hero .bf-hero-split__title {
    width: 100%;
    text-align: justify;
    text-align-last: right;
    text-justify: inter-word;
  }
}


/* Contact-form CTA anchor: keep the form clear of the sticky header. */
#contact-form {
  scroll-margin-top: 96px;
}

/* ========================================================================== */
/* Experiences: proof layer + expandable implementation cards                */
/* ========================================================================== */

.bf-experiences-hero-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.bf-experiences-hero-map span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  padding: 16px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface);
  color: var(--bf-text);
  font-weight: 800;
  text-align: center;
}

.bf-experiences-category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.bf-experience-category-card {
  display: flex;
  min-height: 240px;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface);
  color: var(--bf-text);
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.bf-experience-category-card:hover,
.bf-experience-category-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--bf-border-strong);
  box-shadow: var(--bf-shadow-card);
  outline: none;
}

.bf-experience-category-card > span {
  color: var(--bf-accent-dark);
  font-size: .84rem;
  font-weight: 850;
}

.bf-experience-category-card h2 {
  margin: 0;
  font-size: 1.25rem;
}

.bf-experience-category-card p {
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.9;
}

.bf-experience-category-card strong {
  margin-top: auto;
  color: var(--bf-ink);
  font-size: .9rem;
}

.bf-experience-category-card--pending {
  background: var(--bf-surface-soft);
}


.bf-experience-page__hero-copy {
  margin-top: 0.35rem;
  max-width: 46rem;
}

.bf-experience-page__hero-copy h2 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.7;
  font-weight: 800;
  color: var(--bf-text);
}

.bf-experience-page__hero-copy p {
  margin: 0;
  color: var(--bf-muted);
  line-height: 2;
}

.bf-experience-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.bf-experience-flow > div {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface);
  text-align: center;
}

.bf-experience-flow > div span {
  color: var(--bf-subtle);
  font-size: .8rem;
  font-weight: 750;
}

.bf-experience-flow > div strong {
  color: var(--bf-text);
}

.bf-experience-flow > i {
  color: var(--bf-accent-dark);
  font-style: normal;
  font-weight: 900;
}

.bf-experience-flow__result {
  border-color: rgba(4, 120, 87, .28) !important;
  background: rgba(4, 120, 87, .05) !important;
}

.bf-experience-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  margin-top: 34px;
}

.bf-experience-card {
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-surface);
  box-shadow: var(--bf-shadow-card);
}

.bf-experience-card[open] {
  border-color: rgba(245, 158, 11, .38);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .11);
}

.bf-experience-card__summary {
  display: block;
  padding: 0;
  cursor: pointer;
  list-style: none;
}

.bf-experience-card__summary::-webkit-details-marker {
  display: none;
}

.bf-experience-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--bf-border);
}

.bf-experience-card__identity {
  display: flex;
  gap: 16px;
  align-items: center;
  min-width: 0;
}

.bf-experience-card__logo {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: var(--bf-surface-soft);
}

.bf-experience-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.bf-experience-card__logo--placeholder {
  background: var(--bf-ink);
  color: #fff;
  font-weight: 900;
  letter-spacing: .04em;
}

.bf-experience-card__identity-copy {
  min-width: 0;
}

.bf-experience-card__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--bf-accent-dark);
  font-size: .78rem;
  font-weight: 850;
}

.bf-experience-card__identity-copy h2 {
  margin: 0;
  color: var(--bf-text);
  font-size: 1.3rem;
  line-height: 1.6;
}

.bf-experience-card__identity-copy p {
  margin: 4px 0 0;
  color: var(--bf-muted);
  font-size: .9rem;
}

.bf-experience-card__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
}

.bf-experience-card__visual {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 18%, rgba(245,158,11,.2), transparent 10rem),
    linear-gradient(145deg, var(--bf-ink-soft), var(--bf-ink));
}

.bf-experience-card__visual-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 30px 30px;
  transform: perspective(500px) rotateX(62deg) scale(1.25) translateY(32%);
  transform-origin: center bottom;
}

.bf-experience-card__visual-heading {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-start: 24px;
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: rgba(255,255,255,.72);
  font-size: .76rem;
  font-weight: 750;
}

.bf-experience-card__visual-heading strong {
  color: var(--bf-accent);
  font-size: 1.15rem;
  letter-spacing: .08em;
}

.bf-experience-card__model {
  position: absolute;
  width: min(78%, 330px);
  left: 50%;
  inset-block-start: 40%;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.bf-experience-card__model-lines {
  fill: rgba(255,255,255,.025);
  stroke: rgba(255,255,255,.38);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.bf-experience-card__model-accent {
  fill: var(--bf-accent);
  stroke: var(--bf-accent);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.bf-experience-card__discipline {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--bf-radius-pill);
  background: rgba(11,18,32,.78);
  color: rgba(255,255,255,.82);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.bf-experience-card__discipline--a { inset-inline-end: 10%; inset-block-start: 37%; }
.bf-experience-card__discipline--s { inset-inline-start: 11%; inset-block-start: 43%; }
.bf-experience-card__discipline--m { inset-inline-start: 45%; inset-block-start: 21%; }

.bf-experience-card__mini-flow {
  position: absolute;
  inset-inline: 22px;
  inset-block-end: 18px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  gap: 8px;
  align-items: center;
  color: rgba(255,255,255,.76);
  font-size: .68rem;
  font-weight: 700;
}

.bf-experience-card__mini-flow span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.bf-experience-card__mini-flow i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: rgba(255,255,255,.62);
  font-size: .58rem;
  font-style: normal;
}

.bf-experience-card__mini-flow b {
  height: 1px;
  background: linear-gradient(90deg, rgba(245,158,11,.2), var(--bf-accent), rgba(245,158,11,.2));
}

.bf-experience-card__mini-flow-result,
.bf-experience-card__mini-flow-result i {
  color: #fff !important;
}

.bf-experience-card__mini-flow-result i {
  border-color: var(--bf-accent);
  background: rgba(245,158,11,.16);
}

.bf-experience-card__snapshot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 8px 22px;
  background: var(--bf-surface);
}

.bf-experience-card__snapshot-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--bf-border);
}

.bf-experience-card__snapshot-item:last-child {
  border-bottom: 0;
}

.bf-experience-card__snapshot-icon {
  width: 42px;
  height: 42px;
  display: grid !important;
  place-items: center;
  margin: 0 !important;
  border: 1px solid var(--bf-border);
  border-radius: 13px;
  background: var(--bf-surface-soft);
}

.bf-experience-card__snapshot-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--bf-ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bf-experience-card__snapshot-item > div > span {
  display: block;
  margin-bottom: 4px;
  color: var(--bf-subtle);
  font-size: .74rem;
  font-weight: 700;
}

.bf-experience-card__snapshot-item strong {
  display: block;
  color: var(--bf-text);
  font-size: .92rem;
  line-height: 1.75;
}

.bf-experience-card__snapshot-item--outcome .bf-experience-card__snapshot-icon {
  border-color: rgba(4,120,87,.24);
  background: rgba(4,120,87,.06);
}

.bf-experience-card__snapshot-item--outcome .bf-experience-card__snapshot-icon svg {
  stroke: var(--bf-success);
  stroke-width: 2.1;
}

.bf-experience-card__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
  color: var(--bf-ink);
  font-size: .84rem;
  font-weight: 800;
}

.bf-experience-card__toggle-close {
  display: none;
}

.bf-experience-card__toggle-icon {
  color: var(--bf-accent-dark);
  font-size: 1.2rem;
  transition: transform 140ms ease;
}

.bf-experience-card[open] .bf-experience-card__toggle-open {
  display: none;
}

.bf-experience-card[open] .bf-experience-card__toggle-close {
  display: inline;
}

.bf-experience-card[open] .bf-experience-card__toggle-icon {
  transform: rotate(180deg);
}

.bf-experience-card__details {
  padding: 0 28px 28px;
  border-top: 1px solid var(--bf-border);
  scroll-margin-top: 110px;
  transform-origin: top center;
}

.bf-experience-card[open] .bf-experience-card__details {
  animation: bf-experience-details-reveal 260ms ease-out both;
}

@keyframes bf-experience-details-reveal {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bf-experience-card[open] .bf-experience-card__details {
    animation: none;
  }
}

.bf-experience-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-top: 24px;
}

.bf-experience-detail-grid section {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface-soft);
}

.bf-experience-detail-grid section::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 44px;
  height: 3px;
  background: var(--bf-accent);
}

.bf-experience-detail-grid section > span {
  display: block;
  margin-bottom: 8px;
  color: var(--bf-accent-dark);
  font-size: .82rem;
  font-weight: 850;
}

.bf-experience-detail-grid p,
.bf-experience-detail-grid ul {
  margin: 0;
  color: var(--bf-muted);
  line-height: 2;
}

.bf-experience-detail-grid ul {
  padding-inline-start: 1.2rem;
}

.bf-experience-detail-grid__wide {
  grid-column: auto;
}

.bf-experience-detail-grid__result {
  border-color: rgba(4, 120, 87, .24) !important;
  background: rgba(4, 120, 87, .045) !important;
}

.bf-experience-detail-grid__result::before {
  background: var(--bf-success) !important;
}

.bf-experience-detail-grid__links > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bf-experience-detail-grid__links a {
  display: inline-flex;
  padding: 8px 12px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-pill);
  color: var(--bf-ink);
  background: var(--bf-surface);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 750;
}

.bf-experience-detail-grid__links a:hover,
.bf-experience-detail-grid__links a:focus-visible {
  border-color: var(--bf-accent);
  outline: none;
}

.bf-experience-page__placeholder-note {
  max-width: 820px;
  margin: 18px auto 0;
  color: var(--bf-subtle);
  font-size: .82rem;
  line-height: 1.8;
  text-align: center;
}

@media (max-width: 1050px) {
  .bf-experiences-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-experience-card__visual {
    min-height: 220px;
  }
}

@media (max-width: 900px) {
  .bf-experience-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .bf-experiences-hero-map,
  .bf-experiences-category-grid,
  .bf-experience-detail-grid {
    grid-template-columns: 1fr;
  }

  .bf-experience-flow {
    grid-template-columns: 1fr;
  }

  .bf-experience-flow > i {
    transform: rotate(-90deg);
    text-align: center;
  }

  .bf-experience-card__topline {
    align-items: flex-start;
    padding: 20px;
  }

  .bf-experience-card__toggle {
    font-size: 0;
  }

  .bf-experience-card__toggle-icon {
    font-size: 1.25rem;
  }

  .bf-experience-card__identity {
    gap: 12px;
  }

  .bf-experience-card__logo {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  .bf-experience-card__visual {
    min-height: 210px;
  }

  .bf-experience-card__snapshot {
    padding: 10px 20px;
  }

  .bf-experience-card__mini-flow {
    inset-inline: 15px;
    gap: 5px;
    font-size: .58rem;
  }

  .bf-experience-card__mini-flow i {
    width: 20px;
    height: 20px;
  }

  .bf-experience-card__details {
    padding: 0 20px 20px;
  }

  .bf-experience-detail-grid__wide {
    grid-column: auto;
  }
}

/* Experience-card category graphics */
.bf-experience-card__visual--optimization {
  background:
    radial-gradient(circle at 77% 28%, rgba(4,120,87,.20), transparent 10rem),
    radial-gradient(circle at 18% 18%, rgba(245,158,11,.12), transparent 9rem),
    linear-gradient(145deg, var(--bf-ink-soft), var(--bf-ink));
}

.bf-experience-card__optimization-graphic,
.bf-experience-card__training-graphic {
  position: absolute;
  width: min(88%, 360px);
  left: 50%;
  inset-block-start: 42%;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.bf-experience-card__opt-faint {
  fill: rgba(255,255,255,.025);
  stroke: rgba(255,255,255,.28);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.bf-experience-card__opt-gear {
  fill: rgba(245,158,11,.08);
  stroke: rgba(255,255,255,.52);
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}

.bf-experience-card__opt-result {
  fill: rgba(4,120,87,.16);
  stroke: rgba(255,255,255,.52);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.bf-experience-card__opt-result > path:first-child,
.bf-experience-card__opt-result > path:nth-child(2) {
  fill: none;
  stroke: var(--bf-accent);
  stroke-width: 2.4;
}

.bf-experience-card__opt-accent {
  fill: var(--bf-accent);
  stroke: var(--bf-accent);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}

.bf-experience-card__visual-badge {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 27px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--bf-radius-pill);
  background: rgba(11,18,32,.80);
  color: rgba(255,255,255,.78);
  box-shadow: 0 8px 20px rgba(0,0,0,.16);
  font-size: .62rem;
  font-weight: 800;
  white-space: nowrap;
}

.bf-experience-card__visual-badge--before {
  inset-inline-end: 12%;
  inset-block-start: 38%;
}

.bf-experience-card__visual-badge--method {
  inset-inline-start: 40%;
  inset-block-start: 26%;
  border-color: rgba(245,158,11,.5);
  color: #fff;
}

.bf-experience-card__visual-badge--after {
  inset-inline-start: 9%;
  inset-block-start: 39%;
  border-color: rgba(4,120,87,.45);
  color: #fff;
}

.bf-experience-card__visual--training {
  background:
    radial-gradient(circle at 50% 22%, rgba(3,105,161,.20), transparent 11rem),
    radial-gradient(circle at 16% 20%, rgba(245,158,11,.11), transparent 8rem),
    linear-gradient(145deg, var(--bf-ink-soft), var(--bf-ink));
}

.bf-experience-card__training-graphic {
  width: min(82%, 340px);
  inset-block-start: 43%;
}

.bf-experience-card__training-screen {
  fill: rgba(255,255,255,.025);
  stroke: rgba(255,255,255,.43);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.bf-experience-card__training-screen path:nth-of-type(n+2) {
  stroke: rgba(255,255,255,.32);
}

.bf-experience-card__training-people {
  fill: rgba(3,105,161,.10);
  stroke: rgba(255,255,255,.55);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.bf-experience-card__training-accent {
  fill: var(--bf-accent);
  stroke: var(--bf-accent);
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}

.bf-experience-card__visual-badge--training-topic {
  inset-inline-end: 11%;
  inset-block-start: 31%;
  border-color: rgba(245,158,11,.46);
  color: #fff;
}

.bf-experience-card__visual-badge--training-team {
  inset-inline-start: 12%;
  inset-block-start: 58%;
  border-color: rgba(3,105,161,.52);
  color: #fff;
}

@media (max-width: 700px) {
  .bf-experience-card__optimization-graphic,
  .bf-experience-card__training-graphic {
    width: min(92%, 350px);
  }

  .bf-experience-card__visual-badge {
    font-size: .56rem;
    min-height: 24px;
    padding: 3px 7px;
  }
}

/* ========================================================================== */
/* Experiences: real-problem / vlog placeholder grid                         */
/* ========================================================================== */

.bf-problem-experience-page__format {
  padding-block: clamp(18px, 2.6vw, 32px);
}

.bf-problem-format-note {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(30px, 5vw, 56px);
  border-radius: var(--bf-radius-xl);
  background:
    radial-gradient(circle at 8% 18%, rgba(245,158,11,.16), transparent 17rem),
    linear-gradient(145deg, var(--bf-ink), var(--bf-ink-soft));
  box-shadow: 0 24px 54px rgba(15,23,42,.18);
}

.bf-problem-format-note::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--bf-accent), transparent);
}

.bf-problem-format-note__copy {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.bf-problem-format-note__copy > span {
  color: var(--bf-accent);
  font-size: .78rem;
  font-weight: 900;
}

.bf-problem-format-note__copy h2 {
  max-width: 820px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.55rem);
  line-height: 1.55;
}

.bf-problem-format-note__copy p {
  max-width: 880px;
  margin: 0;
  color: rgba(255,255,255,.76);
  line-height: 2;
  text-align: justify;
  text-align-last: right;
}

.bf-problem-format-note__path {
  display: grid;
  gap: 9px;
}

.bf-problem-format-note__path > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 12px 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  background: rgba(255,255,255,.06);
}

.bf-problem-format-note__path span {
  color: var(--bf-accent);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.bf-problem-format-note__path strong {
  color: #fff;
  font-size: .88rem;
}

.bf-problem-format-note__path > i {
  color: var(--bf-accent);
  font-style: normal;
  font-weight: 900;
  text-align: center;
  transform: rotate(-90deg);
}

.bf-problem-format-note__path > .bf-problem-format-note__path-result {
  border-color: rgba(4,120,87,.44);
  background: rgba(4,120,87,.18);
}

.bf-problem-hero-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.bf-problem-hero-flow > div {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 16px 12px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface);
  text-align: center;
}

.bf-problem-hero-flow > div > span {
  color: var(--bf-accent-dark);
  font-size: .72rem;
  font-weight: 900;
}

.bf-problem-hero-flow > div strong {
  color: var(--bf-text);
  font-size: 1rem;
}

.bf-problem-hero-flow > div small {
  color: var(--bf-subtle);
  font-size: .72rem;
}

.bf-problem-hero-flow > i {
  color: var(--bf-accent-dark);
  font-style: normal;
  font-weight: 900;
}

.bf-problem-hero-flow__result {
  border-color: rgba(4,120,87,.28) !important;
  background: rgba(4,120,87,.05) !important;
}

.bf-problem-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
  margin-top: 34px;
}

.bf-problem-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface);
  box-shadow: var(--bf-shadow-card);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.bf-problem-card:hover {
  transform: translateY(-2px);
  border-color: var(--bf-border-strong);
  box-shadow: var(--bf-shadow-soft);
}

.bf-problem-card__visual {
  position: relative;
  min-height: 154px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(245,158,11,.18), transparent 7rem),
    linear-gradient(145deg, var(--bf-ink-soft), var(--bf-ink));
}

.bf-problem-card:nth-child(2n) .bf-problem-card__visual {
  background:
    radial-gradient(circle at 78% 18%, rgba(3,105,161,.18), transparent 7rem),
    linear-gradient(145deg, var(--bf-ink-soft), var(--bf-ink));
}

.bf-problem-card:nth-child(3n) .bf-problem-card__visual {
  background:
    radial-gradient(circle at 28% 18%, rgba(4,120,87,.16), transparent 7rem),
    linear-gradient(145deg, var(--bf-ink-soft), var(--bf-ink));
}

.bf-problem-card__number {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-start: 16px;
  z-index: 2;
  color: rgba(255,255,255,.48);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.bf-problem-card__visual svg {
  position: absolute;
  width: 88%;
  max-width: 240px;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
}

.bf-problem-card__lines {
  fill: rgba(255,255,255,.025);
  stroke: rgba(255,255,255,.36);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.bf-problem-card__accent {
  fill: none;
  stroke: var(--bf-accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bf-problem-card__visual-labels {
  position: absolute;
  inset-inline: 18px;
  inset-block-end: 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  color: rgba(255,255,255,.68);
  font-size: .64rem;
  font-weight: 800;
}

.bf-problem-card__visual-labels b {
  height: 1px;
  background: linear-gradient(90deg, rgba(245,158,11,.18), var(--bf-accent), rgba(245,158,11,.18));
}

.bf-problem-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 17px;
}

.bf-problem-card__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--bf-accent-dark);
  font-size: .72rem;
  font-weight: 850;
}

.bf-problem-card__content h2 {
  margin: 0;
  color: var(--bf-text);
  font-size: 1.03rem;
  line-height: 1.7;
}

.bf-problem-card__content p {
  margin: 8px 0 15px;
  color: var(--bf-muted);
  font-size: .86rem;
  line-height: 1.85;
}

.bf-problem-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.bf-problem-card__meta span {
  padding: 5px 9px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-surface-soft);
  color: var(--bf-subtle);
  font-size: .68rem;
  font-weight: 750;
}

.bf-problem-card__status {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bf-border);
  color: var(--bf-subtle);
  font-size: .76rem;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .bf-problem-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .bf-problem-format-note {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 26px 22px;
  }

  .bf-problem-format-note__copy h2 {
    font-size: clamp(1.45rem, 7.8vw, 2rem);
  }

  .bf-problem-hero-flow {
    grid-template-columns: 1fr;
  }

  .bf-problem-hero-flow > i {
    transform: rotate(-90deg);
  }

  .bf-problem-card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .bf-problem-card__visual {
    min-height: 170px;
  }
}

/* ========================================================================== */
/* Experiences: problem cards -> dedicated detail pages                       */
/* ========================================================================== */

.bf-problem-card__content {
  gap: 0;
}

.bf-problem-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bf-border);
  color: var(--bf-text);
  font-size: .78rem;
  font-weight: 850;
  text-decoration: none;
}

.bf-problem-card__link span {
  color: var(--bf-accent-dark);
  transition: transform 140ms ease;
}

.bf-problem-card__link:hover {
  color: var(--bf-accent-dark);
}

.bf-problem-card__link:hover span {
  transform: translateX(-3px);
}

.bf-problem-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  width: min(100%, 1080px);
  margin-inline: auto;
}

.bf-problem-detail__story,
.bf-problem-detail__video {
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-surface);
  box-shadow: var(--bf-shadow-card);
}

.bf-problem-detail__story {
  padding: clamp(24px, 4vw, 42px);
}

.bf-problem-detail__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--bf-accent-dark);
  font-size: .82rem;
  font-weight: 900;
}

.bf-problem-detail__story h1 {
  margin: 0;
  color: var(--bf-text);
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.7;
}

.bf-problem-detail__story > p {
  margin: 18px 0 0;
  color: var(--bf-muted);
  font-size: 1rem;
  line-height: 2.05;
  text-align: justify;
}

.bf-problem-detail__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--bf-border);
}

.bf-problem-detail__meta > div {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface-soft);
}

.bf-problem-detail__meta small {
  color: var(--bf-subtle);
  font-size: .72rem;
  font-weight: 750;
}

.bf-problem-detail__meta strong {
  color: var(--bf-text);
  font-size: .88rem;
}

.bf-problem-detail__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vw, 56px);
  background:
    radial-gradient(circle at 50% 12%, rgba(245,158,11,.14), transparent 9rem),
    linear-gradient(145deg, var(--bf-ink-soft), var(--bf-ink));
  color: #fff;
  text-align: center;
}


.bf-problem-detail__video > span {
  color: var(--bf-accent);
  font-size: .76rem;
  font-weight: 850;
}

.bf-problem-detail__video h2 {
  margin: 7px 0 8px;
  color: #fff;
  font-size: 1.35rem;
}

.bf-problem-detail__video p {
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: .86rem;
  line-height: 1.9;
}

.bf-problem-detail__back {
  display: flex;
  justify-content: center;
}

.bf-problem-detail__back a {
  color: var(--bf-text);
  font-weight: 850;
  text-decoration: none;
}

.bf-problem-detail__back a:hover {
  color: var(--bf-accent-dark);
}

.bf-problem-detail__not-found {
  max-width: 700px;
  margin-inline: auto;
  padding: 48px 28px;
  text-align: center;
}

.bf-problem-detail__not-found > span {
  color: var(--bf-accent-dark);
  font-weight: 850;
}

.bf-problem-detail__not-found h1 {
  margin: 8px 0;
}

.bf-problem-detail__not-found p {
  margin: 0 0 24px;
  color: var(--bf-muted);
}

@media (max-width: 900px) {
  .bf-problem-detail__video {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 700px) {
  .bf-problem-detail__meta {
    grid-template-columns: 1fr;
  }

  .bf-problem-detail__story,
  .bf-problem-detail__video {
    border-radius: var(--bf-radius-md);
  }
}

/* ========================================================================== */
/* Experiences hub: proof-system hero                                         */
/* ========================================================================== */

.bf-experiences-index__hero .bf-hero-split__lead {
  width: 100%;
  max-width: 66ch;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}

.bf-experiences-index__section-header {
  max-width: 880px;
}

.bf-experiences-index__section-header .bf-section-header__intro {
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}

.bf-experiences-hero-system {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1.22 / 1;
  min-height: 360px;
  isolation: isolate;
}

.bf-experiences-hero-system::before {
  content: "";
  position: absolute;
  inset: 3%;
  z-index: -3;
  border-radius: 30px;
  background:
    linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, #000 38%, transparent 82%);
}

.bf-experiences-hero-system::after {
  content: "";
  position: absolute;
  width: 48%;
  aspect-ratio: 1;
  left: 50%;
  top: 50%;
  z-index: -2;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.035) 48%, transparent 70%);
  filter: blur(2px);
}

.bf-experiences-hero-system__connections {
  position: absolute;
  inset: 6%;
  width: 88%;
  height: 88%;
  z-index: -1;
  overflow: visible;
}

.bf-experiences-hero-system__connections path {
  fill: none;
  stroke: rgba(15, 23, 42, 0.24);
  stroke-width: 0.7;
  stroke-dasharray: 2.2 2.2;
  vector-effect: non-scaling-stroke;
}

.bf-experiences-hero-system__connections circle {
  fill: var(--bf-accent);
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}

.bf-experiences-hero-system__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 152px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--bf-ink), var(--bf-ink-soft));
  color: #fff;
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.20), 0 0 0 9px rgba(245, 158, 11, 0.09);
  text-align: center;
}

.bf-experiences-hero-system__core span {
  color: #fbbf24;
  font-size: .72rem;
  font-weight: 850;
}

.bf-experiences-hero-system__core strong {
  font-size: 1.35rem;
  letter-spacing: -.02em;
}

.bf-experiences-hero-system__core small {
  color: rgba(255, 255, 255, .72);
  font-size: .72rem;
}

.bf-experiences-hero-system__node {
  position: absolute;
  width: min(36%, 160px);
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
  text-align: right;
}

.bf-experiences-hero-system__node::before {
  content: "";
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 99px;
  background: var(--bf-accent);
}

.bf-experiences-hero-system__node > span {
  color: var(--bf-accent-dark);
  font-size: .68rem;
  font-weight: 900;
}

.bf-experiences-hero-system__node strong {
  color: var(--bf-text);
  font-size: 1rem;
}

.bf-experiences-hero-system__node small {
  color: var(--bf-subtle);
  font-size: .72rem;
  font-weight: 650;
}

.bf-experiences-hero-system__node--problem {
  top: 6%;
  right: 1%;
}

.bf-experiences-hero-system__node--implementation {
  right: 0;
  bottom: 7%;
}

.bf-experiences-hero-system__node--optimization {
  left: 0;
  bottom: 7%;
}

.bf-experiences-hero-system__node--training {
  top: 6%;
  left: 1%;
}

.bf-experiences-hero-system__node--optimization::before {
  background: var(--bf-success);
}

.bf-experiences-hero-system__node--training::before {
  background: var(--bf-info);
}

.bf-experiences-hero-system__node--problem::before {
  background: var(--bf-danger);
}

.bf-experiences-hero-system--five .bf-experiences-hero-system__node {
  width: min(31%, 148px);
  min-height: 84px;
}

.bf-experiences-hero-system--five .bf-experiences-hero-system__node--client-side {
  top: -2%;
  left: 50%;
  width: min(42%, 190px);
  min-height: 76px;
  padding: 10px 12px;
  transform: translateX(-50%);
}

.bf-experiences-hero-system--five .bf-experiences-hero-system__node--client-side strong {
  font-size: clamp(.82rem, 2.4vw, .95rem);
  white-space: nowrap;
}

.bf-experiences-hero-system--five .bf-experiences-hero-system__node--client-side::before {
  background: var(--bf-accent);
}

.bf-experiences-hero-system--five .bf-experiences-hero-system__node--implementation {
  top: 22%;
  right: 0;
  bottom: auto;
}

.bf-experiences-hero-system--five .bf-experiences-hero-system__node--optimization {
  right: 10%;
  bottom: 0;
  left: auto;
}

.bf-experiences-hero-system--five .bf-experiences-hero-system__node--training {
  top: auto;
  bottom: 0;
  left: 10%;
}

.bf-experiences-hero-system--five .bf-experiences-hero-system__node--problem {
  top: 22%;
  right: auto;
  left: 0;
}

.bf-section-actions--center {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.bf-experience-card__client-graphic {
  position: absolute;
  inset: 42px 28px 58px;
  width: calc(100% - 56px);
  height: calc(100% - 100px);
}

.bf-experience-card__client-graphic * {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bf-experience-card__client-model path {
  stroke: rgba(15, 23, 42, .48);
  stroke-width: 1.8;
}

.bf-experience-card__client-review circle,
.bf-experience-card__client-review path {
  stroke: var(--bf-accent);
  stroke-width: 2.6;
}

.bf-experience-card__client-report rect,
.bf-experience-card__client-report path {
  stroke: rgba(4, 120, 87, .72);
  stroke-width: 1.8;
}

@media (max-width: 700px) {
  .bf-experiences-index__hero .bf-hero-split__lead,
  .bf-experiences-index__section-header .bf-section-header__intro {
    text-align: right;
  }

  .bf-experiences-hero-system {
    width: min(100%, 520px);
    min-height: 390px;
  }

  .bf-experiences-hero-system--five {
    min-height: 440px;
  }

  .bf-experiences-hero-system__core {
    width: 132px;
  }

  .bf-experiences-hero-system__node {
    width: 38%;
    min-height: 84px;
    padding: 12px 13px;
  }

  .bf-experiences-hero-system--five .bf-experiences-hero-system__node {
    width: 36%;
    min-height: 80px;
  }

  .bf-experiences-hero-system--five .bf-experiences-hero-system__node--client-side {
    top: 0;
    width: min(52%, 190px);
    min-height: 76px;
  }
}

/* ========================================================================== */
/* Experiences: hero graphic refinements / anti-crop alignment                */
/* ========================================================================== */

.bf-experience-hero-graphic {
  box-sizing: border-box;
  width: min(100%, 580px);
  min-height: 350px;
  padding-inline-start: clamp(24px, 4vw, 42px);
  padding-inline-end: clamp(8px, 1.2vw, 16px);
  overflow: visible;
}

.bf-experience-hero-graphic::before {
  inset: 3% 2% 3% 5%;
}

.bf-experience-hero-graphic::after {
  left: 56%;
}

.bf-experience-hero-graphic svg {
  inset: 1% 0 5%;
  width: calc(100% - clamp(16px, 2vw, 24px));
  transform: translateX(clamp(12px, 2.2vw, 24px));
}

.bf-xhero-core {
  left: 56%;
}

.bf-xhero-result {
  right: 4%;
}

.bf-experience-hero-graphic--implementation .bf-xhero-badge--one { left: 6%; top: 14%; }
.bf-experience-hero-graphic--implementation .bf-xhero-badge--two { left: 6%; top: 40%; }
.bf-experience-hero-graphic--implementation .bf-xhero-badge--three { left: 6%; top: 66%; }

.bf-experience-hero-graphic--optimization .bf-xhero-badge--one { left: 8%; top: 20%; }
.bf-experience-hero-graphic--optimization .bf-xhero-badge--two { left: 8%; top: 42%; }
.bf-experience-hero-graphic--optimization .bf-xhero-badge--three { left: 8%; top: 64%; }

.bf-experience-hero-graphic--training .bf-xhero-badge--one { left: 10%; top: 14%; }
.bf-experience-hero-graphic--training .bf-xhero-badge--two { left: 45%; top: 2%; }
.bf-experience-hero-graphic--training .bf-xhero-badge--three { right: 6%; top: 16%; }

.bf-experience-hero-graphic--problem .bf-xhero-badge--one { left: 8%; top: 22%; }
.bf-experience-hero-graphic--problem .bf-xhero-badge--two { left: 44%; top: 6%; }
.bf-experience-hero-graphic--problem .bf-xhero-badge--three { right: 6%; top: 30%; }
.bf-experience-hero-graphic--problem .bf-xhero-core {
  background: linear-gradient(145deg, var(--bf-ink), var(--bf-ink-soft));
  box-shadow: 0 14px 30px rgba(15, 23, 42, .18), 0 0 0 6px rgba(3, 105, 161, .08);
}
.bf-experience-hero-graphic--problem .bf-xhero-accent path {
  stroke: var(--bf-accent);
}
.bf-experience-hero-graphic--problem .bf-xhero-gear circle,
.bf-experience-hero-graphic--problem .bf-xhero-gear path {
  stroke: rgba(3, 105, 161, .62);
}
.bf-experience-hero-graphic--problem .bf-xhero-result {
  right: 3%;
  bottom: 7%;
}

@media (max-width: 700px) {
  .bf-experience-hero-graphic {
    min-height: 310px;
    padding-inline-start: 18px;
    padding-inline-end: 8px;
  }

  .bf-experience-hero-graphic svg {
    width: calc(100% - 10px);
    transform: translateX(10px);
  }

  .bf-experience-hero-graphic::after,
  .bf-xhero-core {
    left: 54%;
  }

  .bf-experience-hero-graphic--training .bf-xhero-badge--three,
  .bf-experience-hero-graphic--problem .bf-xhero-badge--three {
    right: 3%;
  }
}

/* ========================================================================== */
/* Experiences: centered proof copy + distinct category hero graphics         */
/* ========================================================================== */

/* Hub proof statement is intentionally centered; it is a category summary,
   not long-form body copy. */
.bf-experiences-index__section-header {
  max-width: 980px;
  margin-inline: auto;
  text-align: center;
}

.bf-experiences-index__section-header .bf-section-header__eyebrow,
.bf-experiences-index__section-header .bf-section-header__title,
.bf-experiences-index__section-header .bf-section-header__intro {
  margin-inline: auto;
  text-align: center;
  text-align-last: auto;
}

.bf-experiences-index__section-header .bf-section-header__intro {
  max-width: 930px;
}

/* The explanatory subheading inside each Experience hero is centered to
   separate it visually from the right-aligned H1/CTA layer above it. */
.bf-experience-page__hero-copy {
  width: 100%;
  max-width: 48rem;
  margin: .4rem auto 0;
  text-align: center;
}

.bf-experience-page__hero-copy h2,
.bf-experience-page__hero-copy p {
  margin-inline: auto;
  text-align: center;
  text-align-last: auto;
}

.bf-experience-page__hero-copy p {
  max-width: 46rem;
}

/* Shared visual shell. Each category keeps the same geometry and hierarchy,
   but gets a different diagram so Implementation, Optimization and Training
   are identifiable before the text is read. */
.bf-experience-hero-graphic {
  position: relative;
  width: min(100%, 560px);
  min-height: 340px;
  aspect-ratio: 1.48 / 1;
  isolation: isolate;
}

.bf-experience-hero-graphic::before {
  content: "";
  position: absolute;
  inset: 3%;
  z-index: -2;
  border-radius: 28px;
  background:
    linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 52% 48%, #000 34%, transparent 86%);
}

.bf-experience-hero-graphic::after {
  content: "";
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  left: 52%;
  top: 48%;
  z-index: -1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, .15), rgba(245, 158, 11, .035) 50%, transparent 72%);
}

.bf-experience-hero-graphic svg {
  position: absolute;
  inset: 1% 0 5%;
  width: 100%;
  height: 94%;
  overflow: visible;
}

.bf-experience-hero-graphic svg * {
  vector-effect: non-scaling-stroke;
}

.bf-xhero-muted rect,
.bf-xhero-muted path,
.bf-xhero-model path,
.bf-xhero-gear circle,
.bf-xhero-gear path,
.bf-xhero-screen rect,
.bf-xhero-screen path,
.bf-xhero-people circle,
.bf-xhero-people path {
  fill: none;
  stroke: rgba(15, 23, 42, .42);
  stroke-width: 1.8;
}

.bf-xhero-muted rect,
.bf-xhero-screen rect {
  fill: rgba(255, 255, 255, .76);
}

.bf-xhero-model path,
.bf-xhero-screen path {
  stroke: rgba(15, 23, 42, .52);
}

.bf-xhero-accent path,
.bf-xhero-accent rect,
.bf-xhero-accent circle {
  fill: none;
  stroke: var(--bf-accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bf-experience-hero-graphic--optimization .bf-xhero-accent rect {
  fill: rgba(245, 158, 11, .14);
  stroke-width: 1.6;
}

.bf-experience-hero-graphic--optimization .bf-xhero-gear circle,
.bf-experience-hero-graphic--optimization .bf-xhero-gear path {
  stroke: rgba(3, 105, 161, .62);
}

.bf-experience-hero-graphic--training .bf-xhero-accent path,
.bf-experience-hero-graphic--training .bf-xhero-accent circle {
  stroke: var(--bf-info);
}

.bf-xhero-badge,
.bf-xhero-core,
.bf-xhero-result {
  position: absolute;
  z-index: 2;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  backdrop-filter: blur(8px);
}

.bf-xhero-badge {
  min-width: 78px;
  padding: 7px 12px;
  border-radius: var(--bf-radius-pill);
  color: var(--bf-muted);
  font-size: .75rem;
  font-weight: 800;
  text-align: center;
}

.bf-xhero-core {
  left: 52%;
  top: 49%;
  min-width: 72px;
  transform: translate(-50%, -50%);
  padding: 11px 16px;
  border-color: rgba(255, 255, 255, .13);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .18), 0 0 0 6px rgba(245, 158, 11, .08);
}

.bf-xhero-result {
  right: 3%;
  bottom: 5%;
  display: grid;
  gap: 2px;
  min-width: 148px;
  padding: 11px 14px;
  border-radius: 14px;
  text-align: right;
}

.bf-xhero-result strong {
  color: var(--bf-text);
  font-size: .82rem;
}

.bf-xhero-result small {
  color: var(--bf-subtle);
  font-size: .67rem;
}

.bf-experience-hero-graphic--implementation .bf-xhero-badge--one { left: 1%; top: 14%; }
.bf-experience-hero-graphic--implementation .bf-xhero-badge--two { left: 1%; top: 40%; }
.bf-experience-hero-graphic--implementation .bf-xhero-badge--three { left: 1%; top: 66%; }

.bf-experience-hero-graphic--optimization .bf-xhero-badge--one { left: 1%; top: 20%; }
.bf-experience-hero-graphic--optimization .bf-xhero-result { right: 1%; bottom: 7%; }

.bf-experience-hero-graphic--training .bf-xhero-badge--one { left: 6%; top: 14%; }
.bf-experience-hero-graphic--training .bf-xhero-badge--two { left: 43%; top: 2%; }
.bf-experience-hero-graphic--training .bf-xhero-badge--three { right: 4%; top: 16%; }
.bf-experience-hero-graphic--training .bf-xhero-result { right: 3%; bottom: 5%; }

/* Client-side experience: two distinct oversight paths converge on an
   independent employer-side review and decision. */
.bf-xhero-client-muted rect,
.bf-xhero-client-muted path,
.bf-xhero-client-muted circle,
.bf-xhero-client-model path {
  fill: none;
  stroke: rgba(15, 23, 42, .42);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bf-xhero-client-muted rect {
  fill: rgba(255, 255, 255, .78);
}

.bf-xhero-client-model path {
  stroke: rgba(15, 23, 42, .56);
}

.bf-xhero-client-audit path,
.bf-xhero-client-audit circle {
  fill: none;
  stroke: var(--bf-accent);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bf-xhero-client-monitor path {
  fill: none;
  stroke: var(--bf-info);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bf-xhero-client-independent path,
.bf-xhero-client-independent circle {
  fill: rgba(255, 255, 255, .86);
  stroke: var(--bf-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bf-xhero-client-independent circle {
  fill: var(--bf-accent);
  stroke: var(--bf-accent-dark);
}

.bf-xhero-client-outcome circle,
.bf-xhero-client-outcome path {
  fill: rgba(255, 255, 255, .90);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bf-xhero-client-outcome--accept circle,
.bf-xhero-client-outcome--accept path {
  stroke: var(--bf-success);
}

.bf-xhero-client-outcome--revise circle,
.bf-xhero-client-outcome--revise path {
  stroke: var(--bf-accent-dark);
}

.bf-xhero-client-outcome--follow circle,
.bf-xhero-client-outcome--follow path {
  stroke: var(--bf-info);
}

@media (max-width: 700px) {
  .bf-experiences-index__section-header .bf-section-header__eyebrow,
  .bf-experiences-index__section-header .bf-section-header__title,
  .bf-experiences-index__section-header .bf-section-header__intro,
  .bf-experience-page__hero-copy,
  .bf-experience-page__hero-copy h2,
  .bf-experience-page__hero-copy p {
    text-align: center;
    text-align-last: auto;
  }

  .bf-experience-hero-graphic {
    min-height: 300px;
  }

  .bf-xhero-badge {
    min-width: 68px;
    padding: 6px 9px;
    font-size: .68rem;
  }

  .bf-xhero-result {
    min-width: 132px;
  }
}

/* ========================================================================== */
/* Experience hero copy: RTL right anchor with clean left edge                */
/* ========================================================================== */
/* The four Experience category heroes use justified RTL copy instead of the
   centered treatment. This keeps the text anchored to the right while giving
   multi-line subheadings and descriptions a clean, non-ragged left edge. */
.bf-experience-page__hero .bf-hero-split__content {
  justify-items: start;
  text-align: right;
}

.bf-experience-page__hero .bf-experience-page__hero-copy {
  width: 100%;
  max-width: 48rem;
  margin: .4rem 0 0;
  direction: rtl;
  text-align: right;
}

.bf-experience-page__hero .bf-experience-page__hero-copy h2,
.bf-experience-page__hero .bf-experience-page__hero-copy p {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  direction: rtl;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}

@media (max-width: 760px) {
  .bf-experience-page__hero .bf-hero-split__content {
    justify-items: stretch;
    text-align: right;
  }

  .bf-experience-page__hero .bf-experience-page__hero-copy,
  .bf-experience-page__hero .bf-experience-page__hero-copy h2,
  .bf-experience-page__hero .bf-experience-page__hero-copy p {
    margin-inline: 0;
    text-align: justify;
    text-align-last: right;
  }
}

/* ========================================================================== */
/* Services page: compact closing action, centred method, explicit path CTAs  */
/* ========================================================================== */
.bf-services-reference__cta {
  padding-block: clamp(20px, 3vw, 36px);
}

.bf-services-reference__process .bf-process-rail__item {
  justify-items: center;
  text-align: center;
}

.bf-services-reference__process .bf-process-rail__label {
  width: 100%;
  text-align: center;
}

.bf-services-reference__audiences .bf-service-card__link {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 48px;
  justify-content: center;
  align-self: stretch;
  padding: 10px 18px;
  border: 1px solid var(--bf-ink);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-ink);
  color: #fff;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.bf-services-reference__audiences .bf-service-card__link:hover,
.bf-services-reference__audiences .bf-service-card__link:focus-visible {
  border-color: var(--bf-accent-dark);
  background: var(--bf-accent);
  color: var(--bf-ink);
  transform: translateY(-1px);
  outline: none;
}

.bf-services-reference__audiences .bf-service-card__link::after {
  display: none;
}

@media (min-width: 761px) {
  .bf-services-reference__process .bf-process-rail__item:not(:last-child)::after {
    inset-inline-start: calc(50% + 1.2rem);
    width: calc(100% - 2.4rem);
  }
}

@media (max-width: 760px) {
  .bf-services-reference__cta {
    padding-block: 16px;
  }

  .bf-services-reference__process .bf-process-rail__item {
    justify-items: start;
    text-align: start;
  }

  .bf-services-reference__process .bf-process-rail__label {
    text-align: start;
  }
}

/* ========================================================================== */
/* Employer BIM consultancy: compressed hierarchy and distinct content types */
/* ========================================================================== */
.bf-service-detail--advisor .bf-service-detail__scope .bf-capability-card {
  border-block-start: 3px solid rgba(245, 158, 11, 0.68);
}

.bf-advisor-scope-grid {
  margin-top: clamp(18px, 2.5vw, 28px);
}

.bf-service-detail--advisor :where(
  .bf-capability-card__body,
  .bf-capability-card__outcome,
  .bf-engagement-path-card__description,
  .bf-engagement-path-card__fit li,
  .bf-engagement-path-card__outcome
) {
  text-align: right;
  text-align-last: right;
}

.bf-advisor-deliverable-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 1160px;
  margin: clamp(24px, 3.5vw, 40px) auto 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--bf-radius-xl);
  background: rgba(15, 23, 42, 0.12);
  box-shadow: var(--bf-shadow-card);
}

.bf-advisor-deliverable-rail__item {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 220px;
  padding: clamp(22px, 3vw, 30px);
  overflow: hidden;
  background: #fff;
}

.bf-advisor-deliverable-rail__item::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: -34px;
  inset-block-start: -38px;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 50%;
}

.bf-advisor-deliverable-rail__item::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 24px;
  inset-block-end: 22px;
  height: 42px;
  opacity: 0.13;
  background-repeat: no-repeat;
}

.bf-advisor-deliverable-rail__item--requirements::after {
  background-image: repeating-linear-gradient(180deg, var(--bf-ink) 0 2px, transparent 2px 10px);
}

.bf-advisor-deliverable-rail__item--roles::after {
  background-image: linear-gradient(90deg, var(--bf-accent) 0 22%, transparent 22% 28%, var(--bf-ink) 28% 58%, transparent 58% 64%, var(--bf-success) 64% 100%);
}

.bf-advisor-deliverable-rail__item--review::after {
  background-image: linear-gradient(135deg, transparent 0 43%, var(--bf-accent) 43% 47%, transparent 47%), linear-gradient(45deg, transparent 0 58%, var(--bf-ink) 58% 62%, transparent 62%);
}

.bf-advisor-deliverable-rail__item--decision::after {
  background-image: radial-gradient(circle at 18% 50%, var(--bf-ink) 0 6px, transparent 7px), radial-gradient(circle at 50% 50%, var(--bf-accent) 0 8px, transparent 9px), radial-gradient(circle at 82% 50%, var(--bf-success) 0 6px, transparent 7px), linear-gradient(90deg, transparent 18%, var(--bf-border) 18% 82%, transparent 82%);
}

.bf-advisor-deliverable-rail__item span {
  color: var(--bf-accent-dark);
  font-size: 0.76rem;
  font-weight: 900;
}

.bf-advisor-deliverable-rail__item strong {
  color: var(--bf-text);
  font-size: clamp(1rem, 1.45vw, 1.16rem);
  line-height: 1.75;
}

.bf-advisor-deliverable-rail__item small {
  color: var(--bf-muted);
  font-size: 0.84rem;
  line-height: 1.85;
  text-align: right;
}

.bf-advisor-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bf-card-gap);
  max-width: 1160px;
  margin: clamp(24px, 3.5vw, 40px) auto 0;
}

.bf-advisor-evidence-card {
  display: grid;
  grid-template-columns: minmax(132px, 0.38fr) minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-xl);
  background: #fff;
  box-shadow: var(--bf-shadow-card);
}

.bf-advisor-evidence-card--audit {
  border-color: rgba(245, 158, 11, 0.4);
}

.bf-advisor-evidence-card--monitoring {
  border-color: var(--bf-ink);
  background: var(--bf-ink);
  color: #fff;
}

.bf-advisor-evidence-card__brand {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  min-height: 100%;
  padding: 24px 18px;
  border-inline-end: 1px solid var(--bf-border);
  background: linear-gradient(180deg, rgba(255, 247, 237, 0.92), rgba(248, 250, 252, 0.96));
  text-align: center;
}

.bf-advisor-evidence-card--monitoring .bf-advisor-evidence-card__brand {
  border-inline-end-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.96);
}

.bf-advisor-evidence-card__brand img {
  display: block;
  width: min(100%, 112px);
  height: 82px;
  object-fit: contain;
}

.bf-advisor-evidence-card__brand img.bf-advisor-evidence-card__logo--wide {
  width: min(100%, 150px);
}

.bf-advisor-evidence-card__brand span {
  color: var(--bf-text);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.7;
}

.bf-advisor-evidence-card__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 3vw, 34px);
}

.bf-advisor-evidence-card__type {
  margin: 0 0 10px;
  color: var(--bf-accent-dark);
  font-size: 0.78rem;
  font-weight: 900;
}

.bf-advisor-evidence-card--monitoring .bf-advisor-evidence-card__type {
  color: var(--bf-accent);
}

.bf-advisor-evidence-card h3 {
  margin: 0;
  color: var(--bf-text);
  font-size: clamp(1.05rem, 1.55vw, 1.3rem);
  line-height: 1.65;
}

.bf-advisor-evidence-card--monitoring h3 {
  color: #fff;
}

.bf-advisor-evidence-card__content > p:not(.bf-advisor-evidence-card__type) {
  margin: 14px 0 0;
  color: var(--bf-muted);
  line-height: 1.95;
  text-align: right;
}

.bf-advisor-evidence-card--monitoring .bf-advisor-evidence-card__content > p:not(.bf-advisor-evidence-card__type) {
  color: rgba(255, 255, 255, 0.76);
}

.bf-advisor-evidence-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
}

.bf-advisor-evidence-card__facts span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface-soft);
  color: var(--bf-muted);
  font-size: 0.76rem;
  line-height: 1.65;
}

.bf-advisor-evidence-card__facts strong {
  color: var(--bf-text);
  font-size: 0.72rem;
}

.bf-advisor-evidence-card--monitoring .bf-advisor-evidence-card__facts span {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
}

.bf-advisor-evidence-card--monitoring .bf-advisor-evidence-card__facts strong {
  color: #fff;
}

.bf-implementation-evidence-mark {
  display: grid;
  place-items: center;
  width: min(100%, 112px);
  height: 82px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(135deg, transparent 0 39%, rgba(245, 158, 11, 0.2) 39% 43%, transparent 43%),
    linear-gradient(45deg, transparent 0 56%, rgba(15, 23, 42, 0.13) 56% 60%, transparent 60%),
    #fff;
  color: var(--bf-ink);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.bf-implementation-evidence-mark span {
  color: inherit;
  font-family: Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.bf-service-detail--advisor .bf-service-detail__engagement .bf-engagement-path-card {
  padding: clamp(22px, 2.8vw, 30px);
}

.bf-service-detail--advisor .bf-engagement-path-card__head {
  margin-bottom: 12px;
}

.bf-service-detail--advisor .bf-engagement-path-card__fit {
  margin-top: 18px;
  padding-top: 16px;
}

.bf-service-detail--advisor .bf-engagement-path-card__fit ul {
  gap: 0.5rem;
}

.bf-service-detail--advisor .bf-engagement-path-card__outcome {
  margin-top: 18px;
  padding: 13px 15px;
}

.bf-service-detail--advisor .bf-engagement-path-card__deliverables {
  margin-top: 14px;
}

.bf-service-detail--advisor .bf-service-detail__process .bf-process-rail__item {
  justify-items: center;
  text-align: center;
}

.bf-service-detail--advisor .bf-service-detail__process .bf-process-rail__label {
  width: 100%;
  text-align: center;
}

.bf-service-detail--advisor .bf-service-detail__cta {
  padding-block: clamp(20px, 3vw, 36px);
}

.bf-advisor-related-card {
  position: relative;
  overflow: hidden;
  padding-block-start: 94px;
}

.bf-advisor-related-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 70px;
  border-block-end: 1px solid var(--bf-border);
  background-color: var(--bf-surface-soft);
  background-repeat: no-repeat;
}

.bf-advisor-related-card--consultant::before {
  background-image: radial-gradient(circle at 24% 50%, var(--bf-accent) 0 7px, transparent 8px), linear-gradient(90deg, transparent 24%, rgba(15, 23, 42, 0.24) 24% 74%, transparent 74%), radial-gradient(circle at 74% 50%, var(--bf-ink) 0 9px, transparent 10px);
}

.bf-advisor-related-card--client::before {
  background-image: linear-gradient(90deg, transparent 12%, rgba(245, 158, 11, 0.2) 12% 34%, transparent 34% 39%, rgba(15, 23, 42, 0.1) 39% 62%, transparent 62% 67%, rgba(4, 120, 87, 0.16) 67% 89%, transparent 89%);
}

.bf-advisor-related-card--roles::before {
  background-image: radial-gradient(circle at 18% 50%, var(--bf-ink) 0 6px, transparent 7px), radial-gradient(circle at 50% 50%, var(--bf-accent) 0 8px, transparent 9px), radial-gradient(circle at 82% 50%, var(--bf-success) 0 6px, transparent 7px), linear-gradient(90deg, transparent 18%, rgba(15, 23, 42, 0.2) 18% 82%, transparent 82%);
}

@media (min-width: 761px) {
  .bf-service-detail--advisor .bf-service-detail__process .bf-process-rail__item:not(:last-child)::after {
    inset-inline-start: calc(50% + 1.2rem);
    width: calc(100% - 2.4rem);
  }
}

@media (max-width: 980px) {
  .bf-advisor-deliverable-rail,
  .bf-advisor-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-advisor-evidence-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .bf-advisor-deliverable-rail {
    grid-template-columns: 1fr;
  }

  .bf-advisor-deliverable-rail__item {
    min-height: 190px;
  }

  .bf-advisor-evidence-card {
    grid-template-columns: 1fr;
  }

  .bf-advisor-evidence-card__brand {
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 0;
    justify-items: start;
    padding: 18px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--bf-border);
    text-align: right;
  }

  .bf-advisor-evidence-card__brand img {
    width: 78px;
    height: 58px;
  }

  .bf-advisor-evidence-card__brand img.bf-advisor-evidence-card__logo--wide {
    width: 128px;
  }

  .bf-advisor-evidence-card__facts {
    grid-template-columns: 1fr;
  }

  .bf-service-detail--advisor .bf-service-detail__process .bf-process-rail__item {
    justify-items: start;
    text-align: start;
  }

  .bf-service-detail--advisor .bf-service-detail__process .bf-process-rail__label {
    text-align: start;
  }

  .bf-service-detail--advisor .bf-service-detail__cta {
    padding-block: 16px;
  }
}

/* Consultancy page rhythm: avoid stacking the global top and bottom section
   padding at every transition while preserving the hero's opening space. */
.bf-service-detail--advisor > :where(.bf-section, .bf-section-compact):not(.bf-service-detail__hero) {
  padding-block: clamp(34px, 4vw, 52px);
}

.bf-service-detail--advisor > .bf-service-detail__authority {
  padding-block: clamp(24px, 3vw, 38px);
}

.bf-service-detail--advisor > .bf-service-detail__cta {
  padding-block: clamp(16px, 2.4vw, 28px);
}

@media (max-width: 760px) {
  .bf-service-detail--advisor > :where(.bf-section, .bf-section-compact):not(.bf-service-detail__hero) {
    padding-block: 28px;
  }

  .bf-service-detail--advisor > .bf-service-detail__authority,
  .bf-service-detail--advisor > .bf-service-detail__cta {
    padding-block: 18px;
  }
}

/* Organizational BIM training: capability transfer from classroom to project. */
.bf-service-detail--training .bf-capability-card__title,
.bf-service-detail--training .bf-capability-card__body,
.bf-service-detail--training .bf-engagement-path-card__description,
.bf-service-detail--training .bf-engagement-path-card__outcome {
  text-align: right;
}

.bf-service-detail--training .bf-service-detail__process .bf-process-rail__item {
  justify-items: center;
  text-align: center;
}

.bf-service-detail--training .bf-service-detail__process .bf-process-rail__label {
  width: 100%;
  text-align: center;
}

.bf-training-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(20px, 3vw, 32px);
}

.bf-training-stage {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: #fff;
  text-align: right;
}

.bf-training-stage > span,
.bf-training-deliverable-rail__item > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bf-ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
}

.bf-training-stage strong,
.bf-training-deliverable-rail__item strong {
  color: var(--bf-text);
  font-size: 0.96rem;
  line-height: 1.7;
}

.bf-training-stage p,
.bf-training-deliverable-rail__item p {
  margin: 5px 0 0;
  color: var(--bf-muted);
  font-size: 0.8rem;
  line-height: 1.75;
  text-align: right;
}

.bf-training-role-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.bf-training-role-strip span {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 10px 14px;
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent-soft);
  color: var(--bf-text);
  font-size: 0.82rem;
  font-weight: 850;
  text-align: center;
}

.bf-training-deliverable-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(22px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-border);
}

.bf-training-deliverable-rail__item {
  min-height: 180px;
  padding: 24px;
  background: #fff;
  text-align: right;
}

.bf-training-deliverable-rail__item > span {
  margin-bottom: 22px;
  background: var(--bf-accent);
  color: var(--bf-ink);
}

.bf-engagement-path-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bf-service-detail--training .bf-service-detail__engagement .bf-engagement-path-card {
  padding: clamp(21px, 2.4vw, 28px);
}

.bf-service-detail--training .bf-engagement-path-card__head { margin-bottom: 10px; }
.bf-service-detail--training .bf-engagement-path-card__fit { margin-top: 16px; padding-top: 14px; }
.bf-service-detail--training .bf-engagement-path-card__fit ul { gap: 0.5rem; }
.bf-service-detail--training .bf-engagement-path-card__outcome { margin-top: 16px; padding: 12px 14px; }
.bf-service-detail--training .bf-engagement-path-card__deliverables { margin-top: 12px; }

.bf-training-related-card {
  position: relative;
  overflow: hidden;
  padding-block-start: 94px;
}

.bf-training-related-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: 70px;
  border-block-end: 1px solid var(--bf-border);
  background-color: var(--bf-surface-soft);
  background-repeat: no-repeat;
}

.bf-training-related-card--difference::before {
  background-image: radial-gradient(circle at 24% 50%, var(--bf-ink) 0 8px, transparent 9px), linear-gradient(90deg, transparent 24%, rgba(15, 23, 42, 0.2) 24% 74%, transparent 74%), radial-gradient(circle at 74% 50%, var(--bf-accent) 0 9px, transparent 10px);
}

.bf-training-related-card--stages::before {
  background-image: linear-gradient(90deg, transparent 10%, rgba(245, 158, 11, 0.22) 10% 24%, transparent 24% 29%, rgba(15, 23, 42, 0.12) 29% 43%, transparent 43% 48%, rgba(245, 158, 11, 0.22) 48% 62%, transparent 62% 67%, rgba(4, 120, 87, 0.18) 67% 81%, transparent 81%);
}

.bf-training-related-card--success::before {
  background-image: linear-gradient(135deg, transparent 0 44%, rgba(4, 120, 87, 0.28) 44% 48%, transparent 48%), radial-gradient(circle at 72% 34%, var(--bf-success) 0 8px, transparent 9px), radial-gradient(circle at 28% 68%, var(--bf-accent) 0 6px, transparent 7px);
}

.bf-service-detail--training > :where(.bf-section, .bf-section-compact):not(.bf-service-detail__hero) {
  padding-block: clamp(34px, 4vw, 52px);
}

.bf-service-detail--training > .bf-service-detail__cta {
  padding-block: clamp(16px, 2.4vw, 28px);
}

/* Training page: keep visual separation between the service cards
   and the related-experience section. */
.bf-service-detail--training > .bf-service-detail__evidence {
  margin-block-start: clamp(24px, 2.5vw, 36px);
}

@media (min-width: 761px) {
  .bf-service-detail--training .bf-service-detail__process .bf-process-rail__item:not(:last-child)::after {
    inset-inline-start: calc(50% + 1.2rem);
    width: calc(100% - 2.4rem);
  }
}

@media (max-width: 1080px) {
  .bf-engagement-path-grid--three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .bf-training-stage-grid,
  .bf-training-deliverable-rail,
  .bf-training-role-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .bf-service-detail--training > :where(.bf-section, .bf-section-compact):not(.bf-service-detail__hero) {
    padding-block: 28px;
  }

  .bf-service-detail--training > .bf-service-detail__cta {
    padding-block: 18px;
  }

  .bf-service-detail--training .bf-service-detail__process .bf-process-rail__item {
    justify-items: start;
    text-align: start;
  }

  .bf-service-detail--training .bf-service-detail__process .bf-process-rail__label {
    text-align: start;
  }

  .bf-training-stage-grid,
  .bf-training-deliverable-rail,
  .bf-training-role-strip {
    grid-template-columns: 1fr;
  }

  .bf-training-deliverable-rail__item {
    min-height: 0;
  }
}

/* BIM optimization: compact, evidence-led presentation. */
.bf-service-detail--optimization .bf-capability-card__title,
.bf-service-detail--optimization .bf-capability-card__body,
.bf-service-detail--optimization .bf-capability-card__outcome,
.bf-service-detail--optimization .bf-engagement-path-card__description,
.bf-service-detail--optimization .bf-engagement-path-card__outcome {
  text-align: right;
}

.bf-service-detail--optimization .bf-section-header--center :where(.bf-section-header__eyebrow, .bf-section-header__title, .bf-section-header__intro) {
  width: 100%;
  text-align: center;
  text-align-last: center;
}

.bf-optimization-route-note {
  width: min(900px, 100%);
  margin: 18px auto 0;
  padding: 13px 18px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-pill);
  background: #fff;
  color: var(--bf-muted);
  font-size: 0.86rem;
  line-height: 1.8;
  text-align: center;
}

.bf-optimization-route-note a { color: var(--bf-text); font-weight: 850; }

.bf-optimization-signal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(22px, 3vw, 32px);
}

.bf-optimization-signal-grid article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 112px;
  padding: 17px;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: #fff;
}

.bf-optimization-signal-grid article > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bf-ink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.bf-optimization-signal-grid strong { color: var(--bf-text); font-size: 0.92rem; }
.bf-optimization-signal-grid p { margin: 5px 0 0; color: var(--bf-muted); font-size: 0.78rem; line-height: 1.7; text-align: right; }

.bf-optimization-diagnostic-band {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.45fr);
  gap: 24px;
  align-items: center;
  margin-top: 14px;
  padding: 22px 24px;
  border-radius: var(--bf-radius-lg);
  background: var(--bf-ink);
  color: #fff;
}

.bf-optimization-diagnostic-band > div:first-child { text-align: right; }
.bf-optimization-diagnostic-band > div:first-child span { display: block; color: var(--bf-accent); font-size: 0.76rem; font-weight: 850; }
.bf-optimization-diagnostic-band > div:first-child strong { display: block; margin-top: 5px; font-size: 0.9rem; line-height: 1.75; }
.bf-optimization-diagnostic-band__flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.bf-optimization-diagnostic-band__flow span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--bf-radius-pill); background: rgba(255,255,255,.07); font-size: 0.76rem; font-weight: 800; }
.bf-optimization-diagnostic-band__flow i { color: var(--bf-accent); font-style: normal; }

.bf-optimization-automation-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--bf-radius-xl);
  background: var(--bf-ink);
  color: #fff;
  box-shadow: var(--bf-shadow-lg);
}

.bf-optimization-automation-panel__copy { text-align: right; }
.bf-optimization-automation-panel__copy > p { margin: 0 0 8px; color: var(--bf-accent); font-size: 0.82rem; font-weight: 900; }
.bf-optimization-automation-panel__copy h2 { margin: 0; color: #fff; font-size: clamp(1.55rem, 3vw, 2.45rem); line-height: 1.45; }
.bf-optimization-automation-panel__copy span { display: block; margin-top: 12px; color: rgba(255,255,255,.76); font-size: 0.94rem; line-height: 2; }
.bf-optimization-automation-panel__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bf-optimization-automation-panel__items span { display: grid; place-items: center; min-height: 64px; padding: 12px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--bf-radius-md); background: rgba(255,255,255,.06); font-size: 0.8rem; font-weight: 800; text-align: center; }
.bf-optimization-automation-panel__items span:last-child { grid-column: 1 / -1; }

.bf-service-detail--optimization .bf-service-detail__process .bf-process-rail__item { justify-items: center; text-align: center; }
.bf-service-detail--optimization .bf-service-detail__process .bf-process-rail__label { width: 100%; text-align: center; }

.bf-optimization-metric-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(22px, 3vw, 32px);
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-border);
}

.bf-optimization-metric-rail article { min-height: 155px; padding: 20px 15px; background: #fff; text-align: center; }
.bf-optimization-metric-rail span { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%; background: var(--bf-accent); color: var(--bf-ink); font-size: .72rem; font-weight: 900; }
.bf-optimization-metric-rail strong { color: var(--bf-text); font-size: .9rem; }
.bf-optimization-metric-rail p { margin: 7px 0 0; color: var(--bf-muted); font-size: .75rem; line-height: 1.65; text-align: center; }

.bf-optimization-deliverable-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.bf-optimization-deliverable-rail article { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px; border: 1px solid var(--bf-border); border-radius: var(--bf-radius-md); background: var(--bf-surface-soft); text-align: right; }
.bf-optimization-deliverable-rail article > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bf-ink); color: #fff; font-size: .72rem; font-weight: 900; }
.bf-optimization-deliverable-rail strong { color: var(--bf-text); font-size: .84rem; }
.bf-optimization-deliverable-rail p { margin: 4px 0 0; color: var(--bf-muted); font-size: .72rem; line-height: 1.6; text-align: right; }

.bf-service-detail--optimization .bf-service-detail__engagement .bf-engagement-path-card { padding: clamp(20px, 2.2vw, 26px); }
.bf-service-detail--optimization .bf-engagement-path-card__head { margin-bottom: 9px; }
.bf-service-detail--optimization .bf-engagement-path-card__fit { margin-top: 14px; padding-top: 13px; }
.bf-service-detail--optimization .bf-engagement-path-card__fit ul { gap: .45rem; }
.bf-service-detail--optimization .bf-engagement-path-card__outcome { margin-top: 14px; padding: 11px 13px; }
.bf-service-detail--optimization .bf-engagement-path-card__deliverables { margin-top: 10px; }

.bf-optimization-related-card { position: relative; overflow: hidden; padding-block-start: 94px; }
.bf-optimization-related-card::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 70px; border-block-end: 1px solid var(--bf-border); background-color: var(--bf-surface-soft); background-repeat: no-repeat; }
.bf-optimization-related-card--signals::before { background-image: radial-gradient(circle at 22% 50%, var(--bf-accent) 0 7px, transparent 8px), radial-gradient(circle at 50% 50%, var(--bf-ink) 0 9px, transparent 10px), radial-gradient(circle at 78% 50%, var(--bf-accent) 0 7px, transparent 8px), linear-gradient(90deg, transparent 22%, rgba(15,23,42,.18) 22% 78%, transparent 78%); }
.bf-optimization-related-card--growth::before { background-image: linear-gradient(90deg, transparent 10%, rgba(15,23,42,.12) 10% 26%, transparent 26% 32%, rgba(15,23,42,.18) 32% 55%, transparent 55% 61%, rgba(245,158,11,.28) 61% 88%, transparent 88%); }
.bf-optimization-related-card--measurement::before { background-image: linear-gradient(0deg, transparent 18%, rgba(15,23,42,.13) 18% 21%, transparent 21%), linear-gradient(90deg, transparent 14%, rgba(245,158,11,.4) 14% 20%, transparent 20% 34%, rgba(15,23,42,.2) 34% 44%, transparent 44% 58%, rgba(4,120,87,.25) 58% 72%, transparent 72%); }

.bf-service-detail--optimization > :where(.bf-section, .bf-section-compact):not(.bf-service-detail__hero) { padding-block: clamp(32px, 3.8vw, 48px); }
.bf-service-detail--optimization > .bf-service-detail__automation { padding-block: clamp(22px, 3vw, 34px); }
.bf-service-detail--optimization > .bf-service-detail__cta { padding-block: clamp(16px, 2.4vw, 28px); }

/* Optimization page: visually separate the diagnosis, automation,
   and results sections instead of letting their outer surfaces touch. */
.bf-service-detail--optimization > .bf-service-detail__automation,
.bf-service-detail--optimization > .bf-service-detail__results,
.bf-service-detail--optimization > .bf-service-detail__related {
  margin-block-start: clamp(24px, 2.5vw, 36px);
}

@media (min-width: 761px) {
  .bf-service-detail--optimization .bf-service-detail__process .bf-process-rail__item:not(:last-child)::after { inset-inline-start: calc(50% + 1.2rem); width: calc(100% - 2.4rem); }
}

@media (max-width: 1080px) {
  .bf-optimization-signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-optimization-metric-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bf-optimization-deliverable-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .bf-service-detail--optimization > :where(.bf-section, .bf-section-compact):not(.bf-service-detail__hero) { padding-block: 28px; }
  .bf-service-detail--optimization > .bf-service-detail__automation,
  .bf-service-detail--optimization > .bf-service-detail__cta { padding-block: 18px; }
  .bf-optimization-signal-grid,
  .bf-optimization-metric-rail,
  .bf-optimization-deliverable-rail,
  .bf-optimization-automation-panel,
  .bf-optimization-diagnostic-band { grid-template-columns: 1fr; }
  .bf-optimization-signal-grid article,
  .bf-optimization-metric-rail article { min-height: 0; }
  .bf-optimization-automation-panel__items { grid-template-columns: 1fr; }
  .bf-optimization-automation-panel__items span:last-child { grid-column: auto; }
  .bf-optimization-diagnostic-band__flow { justify-content: flex-start; }
  .bf-service-detail--optimization .bf-service-detail__process .bf-process-rail__item { justify-items: start; text-align: start; }
  .bf-service-detail--optimization .bf-service-detail__process .bf-process-rail__label { text-align: start; }
}

/* ========================================================================== */
/* Full client experience pages                                                */
/* ========================================================================== */

.bf-case-study > :where(.bf-section, .bf-section-compact):not(.bf-case-study__hero) {
  padding-block: clamp(22px, 2.8vw, 38px);
}

.bf-case-study > .bf-case-study__snapshot { padding-block: clamp(16px, 2vw, 24px); }
.bf-case-study > .bf-case-study__lesson,
.bf-case-study > .bf-case-study__cta { padding-block: clamp(16px, 2vw, 24px); }

.bf-case-study--modaam > :where(.bf-section, .bf-section-compact):not(.bf-case-study__hero) {
  padding-block: clamp(14px, 1.7vw, 24px);
}

.bf-case-study--modaam > .bf-case-study__snapshot,
.bf-case-study--modaam > .bf-case-study__lesson,
.bf-case-study--modaam > .bf-case-study__cta {
  padding-block: clamp(10px, 1.25vw, 18px);
}

.bf-case-study > section.bf-section--authority {
  padding-inline: clamp(24px, 4vw, 48px);
  border-radius: var(--bf-radius-xl);
  background: var(--bf-ink);
  color: #fff;
}

.bf-case-study__hero .bf-hero-split__content {
  justify-items: start;
  text-align: right;
}

.bf-case-study__hero .bf-hero-split__title {
  width: 100%;
  font-size: clamp(2.05rem, 3.55vw, 3.65rem) !important;
  line-height: 1.24 !important;
  text-align: right;
  text-align-last: auto;
  text-wrap: pretty;
}

.bf-case-study__hero .bf-hero-split__lead {
  max-width: 54rem;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}

.bf-case-study__hero :where(.bf-hero-split__eyebrow, .bf-hero-split__body) {
  text-align: right;
  text-align-last: auto;
}

.bf-case-study__hero .bf-hero-split__actions {
  justify-content: flex-start;
}

.bf-case-study :where(
  .bf-case-study-situation__main p,
  .bf-case-study-situation__signals p,
  .bf-case-study-diagnosis-grid p,
  .bf-case-study-timeline p,
  .bf-case-study-stage-path p,
  .bf-case-study-project__copy > p,
  .bf-case-study-project__clarification p,
  .bf-case-study-technical-grid p,
  .bf-case-study-metric p,
  .bf-case-study-turnaround__copy p,
  .bf-case-study-lesson p,
  .bf-case-study-cta p,
  .bf-case-study-narrative p
) {
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}

.bf-case-study-hero {
  position: relative;
  width: min(100%, 560px);
  min-height: 390px;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(24px, 4vw, 42px);
  isolation: isolate;
}

.bf-case-study-hero::before {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: -2;
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,250,252,.88));
  border: 1px solid rgba(15,23,42,.09);
  box-shadow: 0 26px 64px rgba(15,23,42,.10);
}

.bf-case-study-hero::after {
  content: "";
  position: absolute;
  width: 58%;
  aspect-ratio: 1;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.16), rgba(245,158,11,.035) 52%, transparent 72%);
}

.bf-case-study-hero__grid {
  position: absolute;
  inset: 7%;
  z-index: -1;
  border-radius: 24px;
  background-image:
    linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(circle at center, #000 36%, transparent 86%);
}

.bf-case-study-hero__node {
  width: min(100%, 390px);
  margin-inline: auto;
  display: grid;
  gap: 4px;
  padding: 15px 18px;
  border: 1px solid rgba(15,23,42,.11);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

.bf-case-study-hero__node span,
.bf-case-study-capability-map span {
  color: var(--bf-accent-dark);
  font-size: .72rem;
  font-weight: 900;
}

.bf-case-study-hero__node strong { color: var(--bf-text); font-size: 1rem; }
.bf-case-study-hero__node small { color: var(--bf-muted); line-height: 1.6; }
.bf-case-study-hero__node--risk { border-inline-start: 4px solid var(--bf-danger); }
.bf-case-study-hero__node--action { border-inline-start: 4px solid var(--bf-accent); }
.bf-case-study-hero__node--result { border-inline-start: 4px solid var(--bf-success); }
.bf-case-study-hero__connector { color: var(--bf-accent-dark); font-size: 1.25rem; font-weight: 900; text-align: center; line-height: 1; }

.bf-case-study-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--bf-border);
  border-radius: 22px;
  overflow: hidden;
  background: var(--bf-surface);
  box-shadow: var(--bf-shadow-card);
}

.bf-case-study-proof > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 116px;
  padding: 20px;
  border-inline-end: 1px solid var(--bf-border);
}

.bf-case-study-proof > div:last-child { border-inline-end: 0; }
.bf-case-study-proof span { color: var(--bf-subtle); font-size: .76rem; font-weight: 850; }
.bf-case-study-proof strong { color: var(--bf-text); line-height: 1.75; }
.bf-case-study-proof__result { background: linear-gradient(145deg, var(--bf-ink), var(--bf-ink-soft)); }
.bf-case-study-proof__result span { color: var(--bf-accent); }
.bf-case-study-proof__result strong { color: #fff; }

.bf-case-study__story .bf-section-header,
.bf-case-study__diagnosis .bf-section-header,
.bf-case-study__intervention .bf-section-header,
.bf-case-study__technical .bf-section-header,
.bf-case-study__results .bf-section-header {
  max-width: 980px;
  margin-inline: auto;
}

.bf-case-study-situation {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 22px;
  margin-top: 24px;
  align-items: stretch;
}

.bf-case-study--modaam .bf-case-study-situation,
.bf-case-study--modaam .bf-case-study-diagnosis-grid,
.bf-case-study--modaam .bf-case-study-metrics {
  margin-top: 16px;
}

.bf-case-study--modaam .bf-case-study-timeline {
  margin-top: 18px;
}

.bf-case-study-situation__main {
  min-height: 330px;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--bf-ink), var(--bf-ink-soft));
  color: #fff;
  box-shadow: 0 24px 52px rgba(15,23,42,.16);
}

.bf-case-study-situation__main > span,
.bf-case-study-turnaround__copy > span,
.bf-case-study-project__copy > span,
.bf-case-study-lesson > span,
.bf-case-study-cta > div > span {
  color: var(--bf-accent);
  font-size: .78rem;
  font-weight: 900;
}

.bf-case-study-situation__main h3 { margin: 0; color: #fff; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.55; }
.bf-case-study-situation__main p { margin: 0; color: rgba(255,255,255,.78); line-height: 2; text-align: justify; }

.bf-case-study-situation__signals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.bf-case-study-situation__signals > div {
  min-height: 150px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: var(--bf-surface);
}

.bf-case-study-situation__signals span,
.bf-case-study-diagnosis-grid > article > span,
.bf-case-study-timeline > article > span,
.bf-case-study-stage-path > article > span,
.bf-case-study-project__visual span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: var(--bf-accent-soft);
  color: var(--bf-accent-dark);
  font-size: .74rem;
  font-weight: 950;
}

.bf-case-study-situation__signals p { margin: 0; color: var(--bf-muted); line-height: 1.85; }

.bf-case-study-diagnosis-grid,
.bf-case-study-technical-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.bf-case-study-diagnosis-grid > article,
.bf-case-study-technical-grid > article {
  min-height: 230px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--bf-border);
  border-radius: 19px;
  background: var(--bf-surface);
  box-shadow: 0 12px 28px rgba(15,23,42,.05);
}

.bf-case-study-diagnosis-grid h3,
.bf-case-study-technical-grid h3,
.bf-case-study-timeline h3,
.bf-case-study-stage-path h3 { margin: 0; color: var(--bf-text); font-size: 1.05rem; line-height: 1.7; }

.bf-case-study-diagnosis-grid p,
.bf-case-study-technical-grid p,
.bf-case-study-timeline p,
.bf-case-study-stage-path p { margin: 0; color: var(--bf-muted); line-height: 1.9; }

.bf-case-study-timeline {
  position: relative;
  max-width: 920px;
  margin: 26px auto 0;
  display: grid;
  gap: 14px;
}

.bf-case-study-timeline::before {
  content: "";
  position: absolute;
  inset-block: 28px;
  inset-inline-start: 25px;
  width: 2px;
  background: linear-gradient(var(--bf-accent), rgba(245,158,11,.12));
}

.bf-case-study-timeline > article {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: var(--bf-surface);
}

.bf-case-study-timeline > article > span { position: relative; z-index: 1; background: var(--bf-accent); color: var(--bf-ink); }

.bf-case-study-turnaround {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr);
  gap: 36px;
  align-items: center;
}

.bf-case-study-turnaround__copy { display: grid; gap: 14px; }
.bf-case-study-turnaround__copy h2 { margin: 0; color: #fff; font-size: clamp(1.45rem, 2.4vw, 2.1rem); line-height: 1.6; }
.bf-case-study-turnaround__copy p { margin: 0; color: rgba(255,255,255,.74); line-height: 2; text-align: justify; }

.bf-case-study-turnaround__flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.bf-case-study-turnaround__flow > div { min-height: 145px; display: grid; align-content: center; gap: 10px; padding: 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.07); }
.bf-case-study-turnaround__flow span { color: var(--bf-accent); font-size: .74rem; font-weight: 850; }
.bf-case-study-turnaround__flow strong { color: #fff; line-height: 1.75; }
.bf-case-study-turnaround__flow i { color: var(--bf-accent); font-style: normal; font-size: 1.35rem; }

.bf-case-study-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.bf-case-study-metric {
  min-height: 240px;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--bf-border);
  border-radius: 22px;
  background: var(--bf-surface);
  box-shadow: 0 14px 34px rgba(15,23,42,.06);
}

.bf-case-study-metric span { color: var(--bf-accent-dark); font-size: .78rem; font-weight: 900; }
.bf-case-study-metric strong { color: var(--bf-text); font-size: clamp(1.55rem, 3vw, 2.4rem); line-height: 1.4; }
.bf-case-study-metric p { margin: 0; color: var(--bf-muted); line-height: 1.85; }
.bf-case-study-metric--primary { border-color: transparent; background: linear-gradient(145deg, var(--bf-ink), var(--bf-ink-soft)); }
.bf-case-study-metric--primary span { color: var(--bf-accent); }
.bf-case-study-metric--primary strong { color: #fff; }
.bf-case-study-metric--primary p { color: rgba(255,255,255,.74); }

.bf-case-study-lesson {
  max-width: 960px;
  margin-inline: auto;
  display: grid;
  gap: 14px;
  text-align: center;
}

.bf-case-study-lesson h2 { max-width: 900px; margin: 0 auto; color: var(--bf-text); font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.65; }
.bf-case-study-lesson p { max-width: 880px; margin: 0 auto; color: var(--bf-muted); line-height: 2; text-align: center; }

.bf-case-study-narrative {
  display: grid;
  gap: 14px;
  max-width: 1040px;
  margin-inline: auto;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  box-shadow: 0 16px 38px rgba(15,23,42,.06);
}

.bf-case-study-narrative > span {
  color: var(--bf-accent-dark);
  font-size: .78rem;
  font-weight: 900;
}

.bf-case-study-narrative h2 {
  max-width: 850px;
  margin: 0;
  color: var(--bf-text);
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  line-height: 1.65;
}

.bf-case-study-narrative__body {
  display: grid;
  gap: 12px;
  max-width: 940px;
}

.bf-case-study-narrative p {
  margin: 0;
  color: var(--bf-muted);
  line-height: 2.05;
}

.bf-case-study-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(26px, 4vw, 44px);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--bf-ink), var(--bf-ink-soft));
  box-shadow: 0 22px 50px rgba(15,23,42,.16);
}

.bf-case-study-cta > div { max-width: 760px; display: grid; gap: 9px; }
.bf-case-study-cta h2 { margin: 0; color: #fff; font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.6; }
.bf-case-study-cta p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.85; }
.bf-case-study-cta .bf-button { flex: 0 0 auto; }

/* Emarat Khorshid: capability path and project proof */
.bf-case-study-capability-map { min-height: 310px; display: grid; grid-template-columns: 1fr auto 1.2fr; grid-template-rows: auto auto; gap: 18px; align-items: center; }
.bf-case-study-capability-map__start,
.bf-case-study-capability-map__result { display: grid; gap: 7px; padding: 18px; border: 1px solid var(--bf-border); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 12px 26px rgba(15,23,42,.07); }
.bf-case-study-capability-map__start strong,
.bf-case-study-capability-map__result strong { color: var(--bf-text); line-height: 1.65; }
.bf-case-study-capability-map__path { display: flex; gap: 5px; }
.bf-case-study-capability-map__path i { width: 9px; height: 9px; border-radius: 50%; background: var(--bf-accent); opacity: .42; }
.bf-case-study-capability-map__core { grid-column: 3; grid-row: 1 / span 2; width: 180px; aspect-ratio: 1; justify-self: center; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 22px; border-radius: 50%; background: linear-gradient(145deg, var(--bf-ink), var(--bf-ink-soft)); box-shadow: 0 20px 42px rgba(15,23,42,.18), 0 0 0 10px rgba(245,158,11,.10); text-align: center; }
.bf-case-study-capability-map__core strong { color: #fff; font-size: 2.2rem; }
.bf-case-study-capability-map__core small { color: rgba(255,255,255,.68); line-height: 1.55; }
.bf-case-study-capability-map__disciplines { grid-column: 1 / span 2; display: flex; gap: 8px; flex-wrap: wrap; }
.bf-case-study-capability-map__disciplines span { padding: 8px 12px; border: 1px solid var(--bf-border); border-radius: 999px; background: #fff; }
.bf-case-study-capability-map__result { display: none; }

.bf-case-study-stage-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.bf-case-study-stage-path > article {
  min-height: 215px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--bf-border);
  border-radius: 19px;
  background: var(--bf-surface);
}

.bf-case-study-project {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
  gap: 28px;
  align-items: stretch;
}

.bf-case-study-project__copy {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(28px, 4vw, 46px);
  border-radius: 24px;
  background: linear-gradient(145deg, var(--bf-ink), var(--bf-ink-soft));
  color: #fff;
}

.bf-case-study-project__copy h2 { margin: 0; color: #fff; font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.6; }
.bf-case-study-project__copy > p { margin: 0; color: rgba(255,255,255,.76); line-height: 2; text-align: justify; }
.bf-case-study-project__clarification { display: grid; gap: 6px; margin-top: 6px; padding: 16px 18px; border: 1px solid rgba(245,158,11,.28); border-radius: 16px; background: rgba(245,158,11,.08); }
.bf-case-study-project__clarification strong { color: var(--bf-accent); }
.bf-case-study-project__clarification p { margin: 0; color: rgba(255,255,255,.78); line-height: 1.85; }

.bf-case-study-project__visual { display: grid; align-content: center; gap: 12px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--bf-border); border-radius: 24px; background: var(--bf-surface-soft); }
.bf-case-study-project__visual > div { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; min-height: 84px; padding: 16px; border: 1px solid var(--bf-border); border-radius: 16px; background: #fff; }
.bf-case-study-project__visual strong { color: var(--bf-text); line-height: 1.7; }
.bf-case-study-project__visual i { color: var(--bf-accent-dark); font-style: normal; font-size: 1.3rem; text-align: center; transform: rotate(-90deg); }

.bf-case-study-technical-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bf-case-study-technical-grid > article > span { color: var(--bf-accent-dark); font-size: .76rem; font-weight: 900; }

.bf-advisor-evidence-card__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 16px;
  padding: 9px 13px;
  border: 1px solid var(--bf-border);
  border-radius: 999px;
  color: var(--bf-text);
  background: var(--bf-surface);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 850;
}

.bf-advisor-evidence-card__link:hover,
.bf-advisor-evidence-card__link:focus-visible {
  border-color: var(--bf-accent);
  color: var(--bf-ink);
  outline: none;
}

.bf-experience-card__full-page-link {
  padding: 16px 20px 2px;
}

.bf-experience-card-shell { min-width: 0; }

.bf-experience-card__full-page-link a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 12px 16px 12px 20px;
  border: 1px solid var(--bf-accent-dark);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--bf-accent), var(--bf-accent-2));
  color: var(--bf-ink);
  box-shadow: 0 12px 26px rgba(217,119,6,.22);
  text-decoration: none;
  font-size: .94rem;
  font-weight: 950;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.bf-experience-card__full-page-link a span {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bf-ink);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  transition: transform .18s ease;
}

.bf-experience-card__full-page-link a:hover,
.bf-experience-card__full-page-link a:focus-visible {
  border-color: var(--bf-ink);
  background: linear-gradient(135deg, #FBBF24, var(--bf-accent));
  box-shadow: 0 16px 34px rgba(217,119,6,.30);
  transform: translateY(-2px);
}

.bf-experience-card__full-page-link a:hover span,
.bf-experience-card__full-page-link a:focus-visible span {
  transform: translateX(-3px);
}

.bf-experience-card__full-page-link a:focus-visible {
  outline: 3px solid rgba(11,18,32,.24);
  outline-offset: 3px;
}

.bf-experience-card__full-page-link a:active {
  box-shadow: 0 8px 18px rgba(217,119,6,.20);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bf-experience-card__full-page-link a,
  .bf-experience-card__full-page-link a span {
    transition: none;
  }

  .bf-experience-card__full-page-link a:hover,
  .bf-experience-card__full-page-link a:focus-visible,
  .bf-experience-card__full-page-link a:hover span,
  .bf-experience-card__full-page-link a:focus-visible span {
    transform: none;
  }
}

@media (max-width: 1080px) {
  .bf-case-study-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-case-study-proof > div:nth-child(2) { border-inline-end: 0; }
  .bf-case-study-proof > div:nth-child(-n+2) { border-block-end: 1px solid var(--bf-border); }
  .bf-case-study-diagnosis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-case-study-turnaround,
  .bf-case-study-project { grid-template-columns: 1fr; }
  .bf-case-study-stage-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .bf-case-study > :where(.bf-section, .bf-section-compact):not(.bf-case-study__hero) { padding-block: 20px; }
  .bf-case-study--modaam > :where(.bf-section, .bf-section-compact):not(.bf-case-study__hero) { padding-block: 14px; }
  .bf-case-study__hero .bf-hero-split__title { font-size: clamp(1.9rem, 9vw, 2.65rem) !important; text-align: right; text-align-last: auto; }
  .bf-case-study__hero .bf-hero-split__lead { text-align: justify; text-align-last: right; }
  .bf-case-study-hero { min-height: 360px; padding: 22px; }
  .bf-case-study-proof,
  .bf-case-study-situation,
  .bf-case-study-situation__signals,
  .bf-case-study-diagnosis-grid,
  .bf-case-study-metrics,
  .bf-case-study-stage-path,
  .bf-case-study-technical-grid { grid-template-columns: 1fr; }
  .bf-case-study-proof > div { min-height: 96px; border-inline-end: 0; border-block-end: 1px solid var(--bf-border); }
  .bf-case-study-proof > div:last-child { border-block-end: 0; }
  .bf-case-study-situation__main { min-height: 0; }
  .bf-case-study-situation__signals > div,
  .bf-case-study-diagnosis-grid > article,
  .bf-case-study-stage-path > article,
  .bf-case-study-technical-grid > article,
  .bf-case-study-metric { min-height: 0; }
  .bf-case-study-turnaround__flow { grid-template-columns: 1fr; }
  .bf-case-study-turnaround__flow i { transform: rotate(-90deg); text-align: center; }
  .bf-case-study-cta { align-items: stretch; flex-direction: column; }
  .bf-case-study-cta .bf-button { width: 100%; }
  .bf-case-study-capability-map { grid-template-columns: 1fr; grid-template-rows: auto; }
  .bf-case-study-capability-map__start,
  .bf-case-study-capability-map__path,
  .bf-case-study-capability-map__disciplines,
  .bf-case-study-capability-map__core { grid-column: 1; grid-row: auto; }
  .bf-case-study-capability-map__path { justify-content: center; transform: rotate(90deg); }
  .bf-case-study-capability-map__core { width: 150px; }
  .bf-case-study-project__visual { padding: 18px; }
  .bf-case-study-narrative { padding: 22px; }
}

/* ----- Shared page-hero typography -----
   Keep the reduced homepage scale consistent across every live hero system
   without shrinking section headings, cards, CTAs, or body copy. */
:is(
  .bf-home-gateway__hero,
  .bf-hero-split-section,
  .bf-insights-index-hero,
  .bf-insight-template__hero-section,
  .bf-video-watch__hero,
  .bf-page-header,
  .bf-hero
) :is(
  .bf-display,
  .bf-page-title,
  .bf-hero__title
) {
  font-size: clamp(1.72rem, 2.6vw, 2.76rem) !important;
}

:is(
  .bf-home-gateway__hero,
  .bf-hero-split-section,
  .bf-insights-index-hero,
  .bf-insight-template__hero-section,
  .bf-video-watch__hero,
  .bf-page-header,
  .bf-hero
) :is(
  .bf-lead,
  .bf-page-lead,
  .bf-hero__lead
) {
  font-size: clamp(0.84rem, 1.12vw, 1rem);
}

:is(
  .bf-home-gateway__hero,
  .bf-hero-split-section,
  .bf-insights-index-hero,
  .bf-insight-template__hero-section,
  .bf-video-watch__hero,
  .bf-page-header,
  .bf-hero
) .bf-eyebrow {
  font-size: clamp(0.64rem, 0.76vw, 0.72rem);
}

@media (max-width: 760px) {
  :is(
    .bf-home-gateway__hero,
    .bf-hero-split-section,
    .bf-insights-index-hero,
    .bf-insight-template__hero-section,
    .bf-video-watch__hero,
    .bf-page-header,
    .bf-hero
  ) :is(
    .bf-display,
    .bf-page-title,
    .bf-hero__title
  ) {
    font-size: clamp(1.6rem, 8.4vw, 2.4rem) !important;
  }

  :is(
    .bf-home-gateway__hero,
    .bf-hero-split-section,
    .bf-insights-index-hero,
    .bf-insight-template__hero-section,
    .bf-video-watch__hero,
    .bf-page-header,
    .bf-hero
  ) :is(
    .bf-lead,
    .bf-page-lead,
    .bf-hero__lead
  ) {
    font-size: 0.8rem;
  }
}

/* Insights search */
.bf-insights-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 clamp(1.4rem, 3vw, 2.1rem);
}

.bf-insights-search__field {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 46rem);
  min-height: 3.5rem;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-md);
  background: var(--bf-surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.bf-insights-search__field:focus-within {
  border-color: var(--bf-accent-dark);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.bf-insights-search__field > .mud-icon-root {
  flex: 0 0 auto;
  margin-inline-start: 1rem;
  color: var(--bf-subtle);
}

.bf-insights-search__field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0.9rem 0.75rem;
  background: transparent;
  color: var(--bf-text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.7;
  text-align: right;
}

.bf-insights-search__field input::placeholder {
  color: var(--bf-subtle);
  opacity: 1;
}

.bf-insights-search__field input::-webkit-search-cancel-button {
  display: none;
}

.bf-insights-search__clear {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  margin-inline-end: 0.55rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bf-subtle);
  cursor: pointer;
}

.bf-insights-search__clear:hover,
.bf-insights-search__clear:focus-visible {
  background: var(--bf-surface-soft);
  color: var(--bf-text);
}

.bf-insights-search__status {
  flex: 0 0 auto;
  margin: 0;
  color: var(--bf-subtle);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.bf-insight-search-item {
  min-width: 0;
  height: 100%;
}

.bf-insight-search-item > .bf-insight-card {
  height: 100%;
}

.bf-insights-search-empty {
  padding: clamp(2.5rem, 7vw, 5rem) 1rem;
  border: 1px dashed var(--bf-border-strong);
  border-radius: var(--bf-radius-lg);
  background: var(--bf-surface-soft);
  text-align: center;
}

.bf-insights-search-empty > .mud-icon-root {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.75rem;
  color: var(--bf-subtle);
}

.bf-insights-search-empty h3 {
  margin: 0;
  color: var(--bf-text);
  font-size: 1.15rem;
}

.bf-insights-search-empty p {
  margin: 0.6rem 0 1rem;
  color: var(--bf-muted);
}

.bf-insights-search-empty__reset {
  border: 1px solid var(--bf-border-strong);
  border-radius: var(--bf-radius-pill);
  padding: 0.65rem 1rem;
  background: var(--bf-surface);
  color: var(--bf-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.bf-insights-search-empty__reset:hover,
.bf-insights-search-empty__reset:focus-visible {
  border-color: var(--bf-accent-dark);
}

.bf-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 720px) {
  .bf-insights-search {
    align-items: stretch;
    flex-direction: column;
    gap: 0.65rem;
  }

  .bf-insights-search__field {
    width: 100%;
  }

  .bf-insights-search__status {
    padding-inline: 0.2rem;
  }
}

.bf-insight-search-item[hidden],
.bf-insights-grid[hidden],
.bf-insights-search-empty[hidden],
.bf-insights-search__clear[hidden] {
  display: none !important;
}

/* Services index hero: exact two-line H1 requested by QA.
   Keep the first line as «خدمات BIM برای کارفرمایان،» and the second line as
   «مشاوران و پیمانکاران». The generic first-of-type hero width cap was forcing
   an unwanted third line. */
.bf-services-reference .bf-services-reference__hero .bf-hero-split__title.bf-display {
  display: grid;
  row-gap: 0.32em;
  max-width: none !important;
  width: 100%;
  text-align: right !important;
  text-align-last: auto !important;
  line-height: 1;
  letter-spacing: -0.022em;
}

.bf-services-reference__hero .bf-services-reference__title-line {
  display: block;
  margin: 0;
  line-height: 1;
}

@media (min-width: 961px) {
  .bf-services-reference__hero .bf-hero-split__title.bf-display {
    font-size: clamp(1.95rem, 3.4vw, 3.7rem);
  }

  .bf-services-reference__hero .bf-services-reference__title-line {
    white-space: nowrap;
  }
}

@media (max-width: 960px) {
  .bf-services-reference__hero .bf-hero-split__title.bf-display {
    max-width: 20ch !important;
  }
}

/* ========================================================================== */
/* Site-wide hero typography normalization — 2026-08-31                     */
/* ========================================================================== */
/* Hero copy is display copy, not body copy: never justify it. This final
   layer also neutralizes older per-page title justification and the generic
   first-hero width cap that produced awkward Persian word spacing/wrapping. */

@media (min-width: 761px) {
  .bf-hero-split-section .bf-hero-split__content {
    text-align: right;
    justify-items: start;
  }

  .bf-hero-split-section .bf-hero-split__eyebrow,
  .bf-hero-split-section .bf-hero-split__title.bf-display,
  .bf-hero-split-section .bf-hero-split__lead,
  .bf-hero-split-section .bf-hero-split__body {
    width: 100%;
    text-align: right !important;
    text-align-last: auto !important;
    text-justify: auto !important;
    word-spacing: normal;
  }

  .bf-hero-split-section .bf-hero-split__title.bf-display,
  .bf-hero-split-section:first-of-type .bf-hero-split__title.bf-display {
    max-width: none !important;
    margin: 0;
    font-size: clamp(2rem, 3.35vw, 3.55rem);
    line-height: 1.28;
    letter-spacing: -0.018em;
    text-wrap: balance;
    white-space: normal;
  }

  .bf-hero-split-section .bf-hero-split__lead {
    max-width: 64ch;
    margin: 0;
    font-size: clamp(1.02rem, 1.12vw, 1.16rem);
    line-height: 1.95;
    text-wrap: pretty;
  }

  .bf-hero-split-section .bf-hero-split__body {
    max-width: 64ch;
  }
}

/* Keep the compact/mobile hero treatment centered, but do not justify any
   headline or lead. */
@media (max-width: 760px) {
  .bf-hero-split-section .bf-hero-split__title.bf-display {
    max-width: none !important;
    font-size: clamp(1.78rem, 8.2vw, 2.5rem);
    line-height: 1.25;
    letter-spacing: -0.012em;
    text-align: center !important;
    text-align-last: center !important;
    text-justify: auto !important;
    text-wrap: balance;
  }

  .bf-hero-split-section .bf-hero-split__lead,
  .bf-hero-split-section .bf-hero-split__body {
    text-align: center !important;
    text-align-last: center !important;
    text-justify: auto !important;
    line-height: 1.9;
  }
}

/* Services index: exact two-line title requested for this page. */
.bf-services-reference .bf-services-reference__hero .bf-hero-split__title.bf-display {
  display: grid;
  row-gap: 0.32em;
  width: 100%;
  max-width: none !important;
  line-height: 1;
  text-align: right !important;
  text-align-last: auto !important;
  letter-spacing: -0.018em;
}

.bf-services-reference__hero .bf-services-reference__title-line {
  display: block;
  margin: 0;
  line-height: 1;
}

@media (min-width: 901px) {
  .bf-services-reference__hero .bf-hero-split__title.bf-display {
    font-size: clamp(1.9rem, 2.85vw, 3.25rem);
  }

  .bf-services-reference__hero .bf-services-reference__title-line {
    white-space: nowrap;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  .bf-services-reference__hero .bf-hero-split__title.bf-display {
    font-size: clamp(2rem, 5.6vw, 3.05rem);
  }

  .bf-services-reference__hero .bf-services-reference__title-line {
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .bf-services-reference .bf-services-reference__hero .bf-hero-split__title.bf-display {
    row-gap: 0.22em;
    text-align: center !important;
    text-align-last: center !important;
  }

  .bf-services-reference__hero .bf-services-reference__title-line {
    white-space: normal;
  }
}

/* Homepage hero: same typographic rhythm as the shared hero system. */
.bf-home-gateway-hero__title {
  max-width: 720px;
  line-height: 1.28;
  letter-spacing: -0.016em;
  text-align: right;
  text-align-last: auto;
  text-wrap: balance;
}

.bf-home-gateway-hero__lead {
  max-width: 680px;
  line-height: 1.95;
  text-align: right !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  word-spacing: normal;
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .bf-home-gateway-hero__title,
  .bf-home-gateway-hero__lead {
    text-align: center !important;
    text-align-last: center !important;
  }
}

/* Experience landing pages now use H1 + lead instead of a competing H2.
   Keep their intro measure slightly wider because these are proof pages. */
.bf-experience-page__hero .bf-hero-split__lead {
  max-width: 68ch;
}

/* Experiences hub had a later justify rule; neutralize it. */
.bf-experiences-index__hero .bf-hero-split__lead {
  text-align: right !important;
  text-align-last: auto !important;
  text-justify: auto !important;
}

/* Editorial/video heroes stay centered by design, but use the same compact
   heading rhythm and never inherit paragraph justification. */
.bf-insights-index-hero .bf-page-title,
.bf-insight-template__title,
.bf-video-watch__heading .bf-page-title {
  line-height: 1.24;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.bf-insights-index-hero .bf-lead,
.bf-insight-template__lead,
.bf-video-watch__heading .bf-lead {
  line-height: 1.9;
  text-align: center !important;
  text-align-last: center !important;
  text-justify: auto !important;
  word-spacing: normal;
}

/* Legacy hero component retained in the repo: normalize it too so a future
   reuse cannot reintroduce justified hero text. */
.bf-hero__title {
  line-height: 1.28;
  text-align: right !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  text-wrap: balance;
}

.bf-hero__lead {
  line-height: 1.95;
  text-align: right !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  word-spacing: normal;
}



/* ========================================================================== */
/* Image-only hero visual language                                            */
/* ========================================================================== */
/* Hero visuals are diagrams only: no labels, cards, captions, names or
   explanatory copy inside the visual panel. The surrounding hero copy carries
   meaning; the illustration provides a quiet conceptual signal. */
.bf-hero-illustration {
  width: min(100%, 580px);
  min-height: 340px;
  margin-inline: auto;
}

.bf-hero-split__visual .bf-hero-illustration {
  width: 100%;
}

.bf-home-system-visual {
  min-height: clamp(360px, 36vw, 470px);
  place-items: center;
  padding: clamp(18px, 3vw, 30px);
}

.bf-home-system-visual > .bf-hero-illustration {
  width: 100%;
  max-width: 600px;
}

/* The illustration itself already carries the soft grid and glow. Keep the
   outer home panel restrained so the result matches service/experience heroes. */
.bf-home-system-visual::before,
.bf-home-system-visual::after {
  content: none !important;
}

@media (max-width: 760px) {
  .bf-hero-illustration {
    min-height: 290px;
  }

  .bf-home-system-visual {
    min-height: 320px;
  }
}


/* Homepage hero visual uses the exact shared .bf-hero-split__visual shell used
   on the other hero pages. Only the artwork fill is homepage-specific. */
.bf-home-gateway-hero__visual {
  position: relative;
}

.bf-home-gateway-hero__visual > .bf-home-system-visual__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}


/* Homepage hero text: exact controlled title wrap and balanced lead lines. */
.bf-home-gateway-hero__title-line,
.bf-home-gateway-hero__lead-line {
  display: block;
}

.bf-home-gateway-hero__title-line + .bf-home-gateway-hero__title-line {
  margin-top: 0.22em;
}

.bf-home-gateway-hero__lead-line + .bf-home-gateway-hero__lead-line {
  margin-top: 0.18em;
}

@media (min-width: 761px) {
  .bf-home-gateway-hero__title-line {
    white-space: nowrap;
  }

  .bf-home-gateway-hero__lead {
    max-width: 48rem;
  }
}


/* Homepage hero lead: let the browser balance the paragraph instead of forcing
   fixed line breaks. This prevents the centered mobile/tablet lead from having
   a visibly jagged left edge. */
.bf-home-gateway-hero__lead {
  max-width: 46rem;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .bf-home-gateway-hero__lead {
    max-width: 42rem;
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  .bf-home-gateway-hero__lead {
    max-width: 36rem;
    text-wrap: balance;
  }
}


/* Homepage hero lead: align both visual edges on desktop/tablet.
   Previous text-wrap: balance kept producing a ragged left edge. */
@media (min-width: 761px) {
  .bf-home-gateway-hero__lead {
    width: 100%;
    max-width: 46rem;
    margin-inline: 0;
    text-align: justify !important;
    text-align-last: right !important;
    text-justify: inter-word !important;
    text-wrap: wrap !important;
    word-spacing: normal;
  }
}

@media (max-width: 760px) {
  .bf-home-gateway-hero__lead {
    max-width: 36rem;
    margin-inline: auto;
    text-align: center !important;
    text-align-last: center !important;
    text-wrap: balance !important;
  }
}


/* Selected commercial/proof-page hero leads: match the homepage desktop/tablet
   paragraph treatment so wrapped Persian lines form a clean left edge. Keep the
   last line natural and preserve the existing centered mobile presentation. */
@media (min-width: 761px) {
  .bf-service-detail--advisor .bf-service-detail__hero .bf-hero-split__lead,
  .bf-service-detail--optimization .bf-service-detail__hero .bf-hero-split__lead,
  .bf-experiences-index .bf-experiences-index__hero .bf-hero-split__lead,
  .bf-experience-page--client-side .bf-experience-page__hero .bf-hero-split__lead,
  .bf-experience-page--optimization .bf-experience-page__hero .bf-hero-split__lead,
  .bf-experience-page--training .bf-experience-page__hero .bf-hero-split__lead,
  .bf-problem-experience-page .bf-experience-page__hero .bf-hero-split__lead,
  .bf-about-page .bf-about-page__hero .bf-about-page__founder-lead {
    width: 100%;
    max-width: 68ch;
    text-align: justify !important;
    text-align-last: right !important;
    text-justify: inter-word !important;
    text-wrap: pretty;
    word-spacing: normal;
  }
}


/* BIM training hero: exact three-line title requested for the service page. */
.bf-service-detail--training .bf-training-hero-title__line {
  display: block;
}

.bf-service-detail--training .bf-training-hero-title__line + .bf-training-hero-title__line {
  margin-top: 0.22em;
}

@media (min-width: 761px) {
  .bf-service-detail--training .bf-training-hero-title__line {
    white-space: nowrap;
  }

  .bf-service-detail--training .bf-service-detail__hero .bf-hero-split__title {
    max-width: none;
  }
}


/* Training hero v2: these are three explicit H1 lines, not browser wrapping. */
.bf-service-detail--training .bf-service-detail__hero .bf-hero-split__title {
  max-width: none !important;
  text-wrap: nowrap;
}

.bf-service-detail--training .bf-training-hero-title__line {
  display: block !important;
  width: 100%;
  white-space: nowrap !important;
}


/* Training hero v3: literal page markup with exact requested line breaks. */
.bf-service-detail--training .bf-training-hero-title {
  max-width: none !important;
  font-size: clamp(2rem, 3.45vw, 3.65rem);
  line-height: 1.12;
  text-align: right !important;
}

.bf-service-detail--training .bf-training-hero-title > span {
  display: block !important;
}

.bf-service-detail--training .bf-training-hero-title > span + span {
  margin-top: 0.20em;
}

@media (min-width: 761px) {
  .bf-service-detail--training .bf-training-hero-title > span {
    white-space: nowrap !important;
  }
}

@media (max-width: 760px) {
  .bf-service-detail--training .bf-training-hero-title {
    font-size: clamp(1.75rem, 8.2vw, 2.5rem);
    text-align: center !important;
  }

  .bf-service-detail--training .bf-training-hero-title > span {
    white-space: normal !important;
  }
}

/* Insights category filters: keep the existing article cards and expose the
   service-aligned taxonomy as an in-place filter, not a separate archive. */
.bf-insights-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.bf-insights-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  border: 1px solid var(--bf-border);
  border-radius: var(--bf-radius-pill);
  padding: 0.55rem 0.9rem;
  background: var(--bf-surface);
  color: var(--bf-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.bf-insights-filter:hover,
.bf-insights-filter:focus-visible {
  border-color: var(--bf-border-strong);
  transform: translateY(-1px);
}

.bf-insights-filter[aria-pressed="true"],
.bf-insights-filter.is-active {
  border-color: var(--bf-ink);
  background: var(--bf-ink);
  color: #fff;
}

.bf-insights-filter__count {
  display: inline-grid;
  place-items: center;
  min-width: 1.65rem;
  height: 1.65rem;
  border-radius: var(--bf-radius-pill);
  padding-inline: 0.35rem;
  background: var(--bf-surface-soft);
  color: var(--bf-subtle);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
}

.bf-insights-filter[aria-pressed="true"] .bf-insights-filter__count,
.bf-insights-filter.is-active .bf-insights-filter__count {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

@media (max-width: 720px) {
  .bf-insights-filters {
    flex-wrap: nowrap;
    margin-inline: -1rem;
    padding-inline: 1rem;
    padding-bottom: 0.35rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .bf-insights-filter {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (min-width: 901px) {
  section.bf-section.bf-hero-split-section {
    min-height: calc(100vh - var(--bf-appbar-h) - 18px);
    min-height: calc(100svh - var(--bf-appbar-h) - 18px);
    display: flex;
    align-items: center;
    padding-block-start: clamp(68px, 9vw, 124px);
    padding-block-end: clamp(52px, 7vw, 92px);
  }

  section.bf-section.bf-hero-split-section > .bf-container-wide,
  section.bf-section.bf-hero-split-section > .bf-container {
    width: min(100% - (var(--bf-page-gutter) * 2), var(--bf-container-wide));
  }
}

/* Keep the existing compact mobile/tablet flow. */
@media (max-width: 900px) {
  section.bf-section.bf-hero-split-section {
    min-height: auto;
  }
}
/* Homepage hero photographic artwork — 2026-09-01
   The source artwork is 1916×821 and is composed as a full-width hero: BIM
   detail on the left, quiet light field on the right for the RTL copy.
   Keep the image as the back layer; copy and controls are always above it. */
.bf-home-gateway__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(620px, 42.85vw, 821px);
  padding-block-start: clamp(54px, 6vw, 88px);
  padding-block-end: clamp(48px, 5.5vw, 80px);
  background: #f8fafc;
}

.bf-home-gateway__hero > .bf-container-wide,
.bf-home-gateway__hero > .bf-container {
  position: relative;
  z-index: 2;
  width: min(100% - (var(--bf-page-gutter) * 2), var(--bf-container-wide));
}

/* The old hero used two grid columns because the visual lived in a card.
   The photographic hero is one full-bleed layer, so the copy gets its own
   controlled right-side measure instead of sharing a grid with the image. */
.bf-home-gateway-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  width: 100%;
  max-width: var(--bf-container-wide);
  margin-inline: auto;
}

.bf-home-gateway-hero__content {
  position: relative;
  z-index: 3;
  width: min(48%, 720px);
  min-width: 0;
  margin-inline-start: 0;
  margin-inline-end: auto;
  text-align: right;
}

.bf-home-gateway-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.bf-home-gateway-hero__media-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

/* The source already fades to white on the right. This light veil only
   protects text contrast; it does not obscure the BIM artwork on the left. */
.bf-home-gateway__hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(248, 250, 252, 0.84) 0%,
    rgba(248, 250, 252, 0.68) 30%,
    rgba(248, 250, 252, 0.28) 54%,
    rgba(248, 250, 252, 0.00) 72%
  );
}

@media (max-width: 1100px) and (min-width: 761px) {
  .bf-home-gateway__hero {
    min-height: clamp(600px, 55vw, 740px);
  }

  .bf-home-gateway-hero__content {
    width: min(56%, 650px);
  }

  .bf-home-gateway__hero::after {
    background: linear-gradient(
      to left,
      rgba(248, 250, 252, 0.94) 0%,
      rgba(248, 250, 252, 0.80) 38%,
      rgba(248, 250, 252, 0.42) 62%,
      rgba(248, 250, 252, 0.08) 82%
    );
  }
}

/* On phones the photograph becomes a real visual band above the copy instead
   of sitting behind several lines of text and buttons. This preserves both the
   image and the reading hierarchy. */
@media (max-width: 760px) {
  .bf-home-gateway__hero {
    min-height: auto;
    padding-block-start: clamp(270px, 60vw, 390px);
    padding-block-end: 44px;
    overflow: hidden;
  }

  .bf-home-gateway-hero {
    display: block;
    max-width: 680px;
  }

  .bf-home-gateway-hero__content {
    width: 100%;
    margin-inline: auto;
    padding-top: 26px;
    text-align: center;
  }

  .bf-home-gateway-hero__media {
    inset: 0 0 auto;
    height: clamp(250px, 56vw, 360px);
  }

  .bf-home-gateway-hero__media-image {
    object-fit: cover;
    object-position: 36% center;
  }

  .bf-home-gateway__hero::after {
    inset: 0 0 auto;
    height: clamp(250px, 56vw, 360px);
    background: linear-gradient(
      180deg,
      rgba(248, 250, 252, 0.00) 54%,
      rgba(248, 250, 252, 0.60) 82%,
      rgba(248, 250, 252, 1.00) 100%
    );
  }
}


/* 2026-09-01 hero fix: make homepage hero screen-height and use a radial fade to white.
   This override intentionally supersedes the previous photographic-hero rules. */
:root {
  --bf-home-hero-header-offset: 86px;
}

.bf-home-gateway__hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--bf-home-hero-header-offset));
  padding-block-start: clamp(22px, 3.5vh, 42px);
  padding-block-end: clamp(22px, 3.5vh, 42px);
  background: #f8fafc;
  overflow: hidden;
}

.bf-home-gateway__hero > .bf-container-wide,
.bf-home-gateway__hero > .bf-container {
  display: flex;
  align-items: stretch;
}

.bf-home-gateway-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  min-height: calc(100svh - var(--bf-home-hero-header-offset) - clamp(44px, 7vh, 84px));
  max-width: var(--bf-container-wide);
  margin-inline: auto;
}

.bf-home-gateway-hero__content {
  position: relative;
  z-index: 3;
  width: min(46%, 720px);
  min-width: 0;
  margin-inline-start: 0;
  margin-inline-end: auto;
  align-self: center;
  text-align: right;
  padding-block: clamp(28px, 5vh, 56px);
}

.bf-home-gateway-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  pointer-events: none;
}

.bf-home-gateway-hero__media-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

/* Radial fade that preserves the artwork while dissolving into white around the right-side copy. */
.bf-home-gateway__hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 48%,
      rgba(248, 250, 252, 0.00) 0%,
      rgba(248, 250, 252, 0.04) 16%,
      rgba(248, 250, 252, 0.14) 30%,
      rgba(248, 250, 252, 0.30) 44%,
      rgba(248, 250, 252, 0.54) 58%,
      rgba(248, 250, 252, 0.78) 72%,
      rgba(248, 250, 252, 0.93) 86%,
      rgba(248, 250, 252, 1.00) 100%);
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway__hero {
    min-height: calc(100svh - 80px);
  }

  .bf-home-gateway-hero {
    min-height: calc(100svh - 80px - clamp(40px, 6vh, 72px));
  }

  .bf-home-gateway-hero__content {
    width: min(52%, 680px);
  }

  .bf-home-gateway__hero::after {
    background:
      radial-gradient(circle at 82% 50%,
        rgba(248, 250, 252, 0.00) 0%,
        rgba(248, 250, 252, 0.06) 18%,
        rgba(248, 250, 252, 0.18) 32%,
        rgba(248, 250, 252, 0.40) 48%,
        rgba(248, 250, 252, 0.66) 64%,
        rgba(248, 250, 252, 0.88) 80%,
        rgba(248, 250, 252, 1.00) 100%);
  }
}

@media (max-width: 760px) {
  .bf-home-gateway__hero {
    min-height: calc(100svh - 72px);
    padding-block-start: clamp(220px, 46vw, 300px);
    padding-block-end: 40px;
  }

  .bf-home-gateway-hero {
    display: block;
    min-height: auto;
    max-width: 680px;
  }

  .bf-home-gateway-hero__content {
    width: 100%;
    margin-inline: auto;
    text-align: center;
    padding-top: 22px;
    padding-bottom: 0;
  }

  .bf-home-gateway-hero__media {
    inset: 0 0 auto;
    height: clamp(220px, 46vw, 300px);
  }

  .bf-home-gateway-hero__media-image {
    object-fit: cover;
    object-position: 34% center;
  }

  .bf-home-gateway__hero::after {
    inset: 0 0 auto;
    height: clamp(220px, 46vw, 300px);
    background:
      radial-gradient(circle at 50% 36%,
        rgba(248, 250, 252, 0.00) 0%,
        rgba(248, 250, 252, 0.10) 36%,
        rgba(248, 250, 252, 0.38) 62%,
        rgba(248, 250, 252, 0.78) 84%,
        rgba(248, 250, 252, 1.00) 100%);
  }
}


/* ==========================================================================
   Homepage hero — final full-bleed treatment (2026-09-01)
   The image is a viewport layer, not a card. It fills the first screen below
   the app bar and dissolves into white with an elliptical/radial fade.
   ========================================================================== */

.bf-home-gateway__hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: calc(100svh - var(--bf-appbar-h));
  padding-block: 0 !important;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.bf-home-gateway__hero-shell {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: stretch;
  min-height: calc(100svh - var(--bf-appbar-h));
}

.bf-home-gateway-hero {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: calc(100svh - var(--bf-appbar-h));
  max-width: none;
  margin: 0;
}

.bf-home-gateway-hero__content {
  position: relative;
  z-index: 4;
  width: min(48%, 720px);
  min-width: 0;
  margin-inline-start: 0;
  margin-inline-end: auto;
  padding-block: clamp(36px, 6vh, 72px);
  text-align: right;
}

/* The picture is now a direct child of the hero section, so it is no longer
   limited by the 1280px content container. */
.bf-home-gateway__hero > .bf-home-gateway-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.bf-home-gateway__hero > .bf-home-gateway-hero__media .bf-home-gateway-hero__media-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

/* Circular/elliptical fade: crisp in the central BIM composition, then
   progressively dissolves to white toward the viewport perimeter. */
.bf-home-gateway__hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 68% at 46% 50%,
    rgba(255, 255, 255, 0.00) 0%,
    rgba(255, 255, 255, 0.00) 52%,
    rgba(255, 255, 255, 0.10) 62%,
    rgba(255, 255, 255, 0.30) 72%,
    rgba(255, 255, 255, 0.62) 84%,
    rgba(255, 255, 255, 0.88) 94%,
    rgba(255, 255, 255, 1.00) 100%
  );
}

/* Give the copy a very soft local veil without turning the whole right side
   into a hard rectangular gradient. */
.bf-home-gateway-hero__content::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -11% -9% -11% -14%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.50) 48%,
    rgba(255, 255, 255, 0.16) 74%,
    rgba(255, 255, 255, 0.00) 100%
  );
  filter: blur(10px);
  pointer-events: none;
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway-hero__content {
    width: min(54%, 680px);
  }

  .bf-home-gateway__hero::after {
    background: radial-gradient(
      ellipse 58% 70% at 44% 50%,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.00) 48%,
      rgba(255, 255, 255, 0.14) 60%,
      rgba(255, 255, 255, 0.38) 72%,
      rgba(255, 255, 255, 0.70) 85%,
      rgba(255, 255, 255, 0.94) 96%,
      rgba(255, 255, 255, 1.00) 100%
    );
  }
}

@media (max-width: 760px) {
  .bf-home-gateway__hero {
    min-height: calc(100svh - var(--bf-appbar-h));
    padding-block: 0 !important;
  }

  .bf-home-gateway__hero-shell,
  .bf-home-gateway-hero {
    min-height: calc(100svh - var(--bf-appbar-h));
  }

  .bf-home-gateway-hero {
    display: flex;
    align-items: flex-end;
  }

  .bf-home-gateway-hero__content {
    width: 100%;
    margin-inline: auto;
    padding: clamp(220px, 42vh, 330px) 0 40px;
    text-align: center;
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    inset: 0;
    height: 100%;
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media .bf-home-gateway-hero__media-image {
    object-position: 38% center;
  }

  .bf-home-gateway__hero::after {
    inset: 0;
    height: 100%;
    background:
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.18) 42%,
        rgba(255, 255, 255, 0.82) 70%,
        rgba(255, 255, 255, 1.00) 100%
      ),
      radial-gradient(
        ellipse 72% 54% at 42% 30%,
        rgba(255, 255, 255, 0.00) 0%,
        rgba(255, 255, 255, 0.06) 52%,
        rgba(255, 255, 255, 0.38) 76%,
        rgba(255, 255, 255, 0.82) 94%,
        rgba(255, 255, 255, 1.00) 100%
      );
  }

  .bf-home-gateway-hero__content::before {
    inset: 18% -10% -8%;
    background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.72) 58%,
      rgba(255, 255, 255, 0.22) 82%,
      rgba(255, 255, 255, 0.00) 100%
    );
  }
}


/* ==========================================================================
   Homepage hero — viewport breakout + true elliptical image fade (2026-09-01)
   Root cause fixed: MainLayout wraps @Body in MudContainer MaxWidth.Large.
   The hero therefore has to deliberately break out to 100vw.
   ========================================================================== */

@media (min-width: 761px) {
  .bf-home-gateway__hero {
    /* Escape the layout's outer MudContainer and genuinely reach viewport edges. */
    width: 100vw !important;
    max-width: none !important;
    height: calc(100svh - var(--bf-appbar-h));
    min-height: calc(100svh - var(--bf-appbar-h));
    margin-inline: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden;
    background: #fff;
  }

  .bf-home-gateway__hero-shell,
  .bf-home-gateway-hero {
    height: 100%;
    min-height: 100%;
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* This is a real alpha fade, not a rectangular white overlay. */
    -webkit-mask-image: radial-gradient(
      ellipse 62% 72% at 43% 50%,
      #000 0%,
      #000 42%,
      rgba(0, 0, 0, .92) 52%,
      rgba(0, 0, 0, .72) 62%,
      rgba(0, 0, 0, .48) 72%,
      rgba(0, 0, 0, .22) 82%,
      rgba(0, 0, 0, .07) 91%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 62% 72% at 43% 50%,
      #000 0%,
      #000 42%,
      rgba(0, 0, 0, .92) 52%,
      rgba(0, 0, 0, .72) 62%,
      rgba(0, 0, 0, .48) 72%,
      rgba(0, 0, 0, .22) 82%,
      rgba(0, 0, 0, .07) 91%,
      transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media .bf-home-gateway-hero__media-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  /* Remove the old full-section white overlay; the image itself now fades. */
  .bf-home-gateway__hero::after {
    background: none !important;
  }

  /* Keep only a small organic readability halo behind the copy. */
  .bf-home-gateway-hero__content::before {
    inset: -12% -10% -12% -16%;
    border-radius: 50%;
    background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, .80) 0%,
      rgba(255, 255, 255, .58) 45%,
      rgba(255, 255, 255, .25) 70%,
      rgba(255, 255, 255, .06) 87%,
      transparent 100%
    );
    filter: blur(12px);
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway-hero__content {
    width: min(54%, 680px);
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: radial-gradient(
      ellipse 66% 73% at 40% 48%,
      #000 0%,
      #000 38%,
      rgba(0,0,0,.90) 50%,
      rgba(0,0,0,.66) 64%,
      rgba(0,0,0,.36) 76%,
      rgba(0,0,0,.12) 89%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 66% 73% at 40% 48%,
      #000 0%,
      #000 38%,
      rgba(0,0,0,.90) 50%,
      rgba(0,0,0,.66) 64%,
      rgba(0,0,0,.36) 76%,
      rgba(0,0,0,.12) 89%,
      transparent 100%
    );
  }
}

@media (max-width: 760px) {
  .bf-home-gateway__hero {
    width: 100vw !important;
    max-width: none !important;
    min-height: calc(100svh - var(--bf-appbar-h));
    margin-inline: calc(50% - 50vw) !important;
    padding: 0 !important;
    background: #fff;
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    inset: 0;
    height: 100%;
    -webkit-mask-image: radial-gradient(
      ellipse 88% 57% at 43% 27%,
      #000 0%,
      #000 40%,
      rgba(0,0,0,.80) 56%,
      rgba(0,0,0,.46) 70%,
      rgba(0,0,0,.16) 84%,
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse 88% 57% at 43% 27%,
      #000 0%,
      #000 40%,
      rgba(0,0,0,.80) 56%,
      rgba(0,0,0,.46) 70%,
      rgba(0,0,0,.16) 84%,
      transparent 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  .bf-home-gateway__hero::after {
    background: none !important;
  }
}


/* ==========================================================================
   Homepage first-viewport alignment fix (2026-09-01)
   MainLayout's .bf-page contributes 18px top padding on desktop (12px at
   <=900px). That offset created the visible strip above the hero and pushed
   the same amount of the hero below the first viewport. Cancel it only on the
   homepage so the hero starts immediately below the app bar and ends exactly
   at the viewport edge.
   ========================================================================== */
.bf-home-gateway {
  margin-block-start: -18px;
}

@media (max-width: 900px) {
  .bf-home-gateway {
    margin-block-start: -12px;
  }
}


/* ==========================================================================
   Homepage hero refinement (2026-09-01)
   - remove left-side fade
   - make fade linear and shift it right
   - shorten lead line length
   - reduce CTA size on desktop
   ========================================================================== */
@media (min-width: 761px) {
  /* Shorter paragraph measure so the lead wraps into shorter lines. */
  .bf-home-gateway-hero__lead {
    max-width: 36rem;
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  /* Make the CTA buttons visually smaller and avoid the oversized full-width look. */
  .bf-home-gateway-hero__actions {
    grid-template-columns: repeat(2, max-content);
    justify-content: end;
    width: auto;
    gap: 14px;
  }

  .bf-home-gateway-hero__action {
    width: auto;
    min-height: 48px;
    padding-inline: 1.15rem;
    font-size: 0.98rem;
  }

  /* No left fade. Keep the image fully visible on the left and use a linear
     alpha fade only toward the far right so more of the background remains visible. */
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 66%,
      rgba(0, 0, 0, 0.88) 76%,
      rgba(0, 0, 0, 0.58) 86%,
      rgba(0, 0, 0, 0.20) 94%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 66%,
      rgba(0, 0, 0, 0.88) 76%,
      rgba(0, 0, 0, 0.58) 86%,
      rgba(0, 0, 0, 0.20) 94%,
      transparent 100%
    );
  }

  /* Make the copy halo subtler so it doesn't look like a second fade on the left. */
  .bf-home-gateway-hero__content::before {
    inset: -10% -8% -10% -6%;
    background: radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.70) 0%,
      rgba(255, 255, 255, 0.50) 44%,
      rgba(255, 255, 255, 0.18) 72%,
      rgba(255, 255, 255, 0.00) 100%
    );
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway-hero__lead {
    max-width: 33rem;
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 62%,
      rgba(0, 0, 0, 0.86) 73%,
      rgba(0, 0, 0, 0.52) 84%,
      rgba(0, 0, 0, 0.18) 93%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 62%,
      rgba(0, 0, 0, 0.86) 73%,
      rgba(0, 0, 0, 0.52) 84%,
      rgba(0, 0, 0, 0.18) 93%,
      transparent 100%
    );
  }
}

@media (max-width: 760px) {
  .bf-home-gateway-hero__lead {
    max-width: 30rem;
    margin-inline: auto;
  }

  /* Keep a simple top-to-bottom readability fade on mobile; no left-edge white wash. */
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 46%,
      rgba(0, 0, 0, 0.78) 62%,
      rgba(0, 0, 0, 0.34) 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 46%,
      rgba(0, 0, 0, 0.78) 62%,
      rgba(0, 0, 0, 0.34) 82%,
      transparent 100%
    );
  }
}


/* ==========================================================================
   Homepage hero final tuning (2026-09-01)
   - remove residual bottom sliver
   - enforce linear right-side fade (no radial feel)
   - shift lead + CTA group left to align with title back edge
   ========================================================================== */
@media (min-width: 761px) {
  /* Prevent the 1-3px bottom sliver caused by viewport rounding. */
  .bf-home-gateway__hero,
  .bf-home-gateway__hero-shell,
  .bf-home-gateway-hero {
    height: calc(100dvh - var(--bf-appbar-h) + 2px) !important;
    min-height: calc(100dvh - var(--bf-appbar-h) + 2px) !important;
  }

  /* Keep more of the background visible and fade only on the far right. */
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 71%,
      rgba(0, 0, 0, 0.92) 80%,
      rgba(0, 0, 0, 0.64) 89%,
      rgba(0, 0, 0, 0.24) 96%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 71%,
      rgba(0, 0, 0, 0.92) 80%,
      rgba(0, 0, 0, 0.64) 89%,
      rgba(0, 0, 0, 0.24) 96%,
      transparent 100%
    ) !important;
  }

  /* Replace the radial copy halo with a soft linear veil. */
  .bf-home-gateway-hero__content::before {
    inset: -8% -7% -8% -14% !important;
    border-radius: 0 !important;
    background: linear-gradient(
      to left,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(255, 255, 255, 0.62) 30%,
      rgba(255, 255, 255, 0.30) 60%,
      rgba(255, 255, 255, 0.08) 82%,
      rgba(255, 255, 255, 0.00) 100%
    ) !important;
    filter: blur(12px);
  }

  /* Shorter lines, but visually shifted left so they align with the title's
     far-left/back edge rather than sitting too close to the right. */
  .bf-home-gateway-hero__lead {
    max-width: 34rem !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    transform: translateX(-2.25rem);
  }

  .bf-home-gateway-hero__actions {
    grid-template-columns: repeat(2, max-content) !important;
    justify-content: end !important;
    width: auto !important;
    gap: 12px !important;
    transform: translateX(-2.25rem);
  }

  .bf-home-gateway-hero__action {
    min-height: 46px !important;
    padding-inline: 1rem !important;
    font-size: 0.95rem !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 67%,
      rgba(0, 0, 0, 0.90) 77%,
      rgba(0, 0, 0, 0.58) 88%,
      rgba(0, 0, 0, 0.22) 96%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 67%,
      rgba(0, 0, 0, 0.90) 77%,
      rgba(0, 0, 0, 0.58) 88%,
      rgba(0, 0, 0, 0.22) 96%,
      transparent 100%
    ) !important;
  }

  .bf-home-gateway-hero__lead,
  .bf-home-gateway-hero__actions {
    transform: translateX(-1.5rem);
  }
}

@media (max-width: 760px) {
  .bf-home-gateway__hero,
  .bf-home-gateway__hero-shell,
  .bf-home-gateway-hero {
    min-height: calc(100dvh - var(--bf-appbar-h) + 2px) !important;
  }

  /* Maintain linear mobile fade, not radial. */
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 50%,
      rgba(0, 0, 0, 0.82) 66%,
      rgba(0, 0, 0, 0.38) 84%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 50%,
      rgba(0, 0, 0, 0.82) 66%,
      rgba(0, 0, 0, 0.38) 84%,
      transparent 100%
    ) !important;
  }
}


/* ==========================================================================
   Homepage hero follow-up adjustment (2026-09-01)
   - eliminate persistent bottom sliver by slightly overfilling the media layer
   - nudge lead and CTA group back to the right
   ========================================================================== */
@media (min-width: 761px) {
  /* The white hairline at the bottom is caused by viewport rounding / image layer
     ending a couple of pixels early. Overfill the media very slightly. */
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    inset: 0 0 -4px 0 !important;
    height: calc(100% + 4px) !important;
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media .bf-home-gateway-hero__media-image {
    height: calc(100% + 4px) !important;
  }

  /* Move the paragraph and buttons to the right so they sit closer to the title's
     starting edge in the RTL composition. */
  .bf-home-gateway-hero__lead {
    transform: translateX(1.6rem) !important;
  }

  .bf-home-gateway-hero__actions {
    transform: translateX(1.6rem) !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway-hero__lead,
  .bf-home-gateway-hero__actions {
    transform: translateX(1rem) !important;
  }
}

@media (max-width: 760px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    inset: 0 0 -4px 0 !important;
    height: calc(100% + 4px) !important;
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media .bf-home-gateway-hero__media-image {
    height: calc(100% + 4px) !important;
  }
}


/* ==========================================================================
   Homepage hero root correction — 2026-09-01
   1. Bottom gap: increase the HERO SECTION itself. Previous media-only
      overfill was clipped by .bf-home-gateway__hero { overflow:hidden }.
   2. RTL alignment: anchor the narrower lead and CTA group to the physical
      right edge of the H1 instead of using logical auto margins/transforms.
   ========================================================================== */
@media (min-width: 761px) {
  .bf-home-gateway__hero,
  .bf-home-gateway__hero-shell,
  .bf-home-gateway-hero {
    height: calc(100dvh - var(--bf-appbar-h) + 10px) !important;
    min-height: calc(100dvh - var(--bf-appbar-h) + 10px) !important;
  }

  /* Media fills the now-correct parent; no clipped overfill hack required. */
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media .bf-home-gateway-hero__media-image {
    width: 100% !important;
    height: 100% !important;
  }

  /* Align paragraph right edge exactly with the H1 content edge. */
  .bf-home-gateway-hero__lead {
    max-width: 34rem !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    margin-inline: 0 auto !important;
    transform: none !important;
  }

  /* Anchor the compact CTA group to the same physical right edge. */
  .bf-home-gateway-hero__actions {
    width: fit-content !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    margin-inline: 0 auto !important;
    justify-content: start !important;
    transform: none !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway-hero__lead,
  .bf-home-gateway-hero__actions {
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .bf-home-gateway__hero,
  .bf-home-gateway__hero-shell,
  .bf-home-gateway-hero {
    min-height: calc(100dvh - var(--bf-appbar-h) + 8px) !important;
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    inset: 0 !important;
    height: 100% !important;
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media .bf-home-gateway-hero__media-image {
    height: 100% !important;
  }
}


/* Homepage hero cleanup — remove copy halo + tighten lead (2026-09-01) */
.bf-home-gateway-hero__content::before {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
}

@media (min-width: 761px) {
  .bf-home-gateway-hero__lead {
    max-width: 31rem !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway-hero__lead {
    max-width: 29rem !important;
  }
}

@media (max-width: 760px) {
  .bf-home-gateway-hero__lead {
    max-width: 27rem !important;
  }
}


/* Homepage hero gradient sharpened by ~50% (2026-09-01) */
@media (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 84%,
      rgba(0, 0, 0, 0.92) 89%,
      rgba(0, 0, 0, 0.60) 94%,
      rgba(0, 0, 0, 0.20) 98%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 84%,
      rgba(0, 0, 0, 0.92) 89%,
      rgba(0, 0, 0, 0.60) 94%,
      rgba(0, 0, 0, 0.20) 98%,
      transparent 100%
    ) !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 82%,
      rgba(0, 0, 0, 0.90) 88%,
      rgba(0, 0, 0, 0.56) 94%,
      rgba(0, 0, 0, 0.20) 98%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 82%,
      rgba(0, 0, 0, 0.90) 88%,
      rgba(0, 0, 0, 0.56) 94%,
      rgba(0, 0, 0, 0.20) 98%,
      transparent 100%
    ) !important;
  }
}

@media (max-width: 760px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 58%,
      rgba(0, 0, 0, 0.82) 72%,
      rgba(0, 0, 0, 0.36) 88%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 58%,
      rgba(0, 0, 0, 0.82) 72%,
      rgba(0, 0, 0, 0.36) 88%,
      transparent 100%
    ) !important;
  }
}


/* Homepage hero readability fix — shorten image-to-white transition zone by 50% (2026-09-01) */
@media (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 84%,
      rgba(0, 0, 0, 0.92) 86%,
      rgba(0, 0, 0, 0.60) 88%,
      rgba(0, 0, 0, 0.20) 90%,
      transparent 92%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 84%,
      rgba(0, 0, 0, 0.92) 86%,
      rgba(0, 0, 0, 0.60) 88%,
      rgba(0, 0, 0, 0.20) 90%,
      transparent 92%
    ) !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 82%,
      rgba(0, 0, 0, 0.90) 84.5%,
      rgba(0, 0, 0, 0.56) 87.5%,
      rgba(0, 0, 0, 0.20) 90%,
      transparent 91%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 82%,
      rgba(0, 0, 0, 0.90) 84.5%,
      rgba(0, 0, 0, 0.56) 87.5%,
      rgba(0, 0, 0, 0.20) 90%,
      transparent 91%
    ) !important;
  }
}


/* Homepage hero transition widened again and shifted closer to the building (2026-09-01) */
@media (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, 0.94) 77%,
      rgba(0, 0, 0, 0.74) 82%,
      rgba(0, 0, 0, 0.46) 87%,
      rgba(0, 0, 0, 0.20) 91%,
      transparent 95%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, 0.94) 77%,
      rgba(0, 0, 0, 0.74) 82%,
      rgba(0, 0, 0, 0.46) 87%,
      rgba(0, 0, 0, 0.20) 91%,
      transparent 95%
    ) !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 69%,
      rgba(0, 0, 0, 0.94) 74%,
      rgba(0, 0, 0, 0.72) 79%,
      rgba(0, 0, 0, 0.44) 85%,
      rgba(0, 0, 0, 0.18) 90%,
      transparent 94%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 69%,
      rgba(0, 0, 0, 0.94) 74%,
      rgba(0, 0, 0, 0.72) 79%,
      rgba(0, 0, 0, 0.44) 85%,
      rgba(0, 0, 0, 0.18) 90%,
      transparent 94%
    ) !important;
  }
}


/* Homepage hero transition shifted further left, closer to the building (2026-09-01) */
@media (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 66%,
      rgba(0, 0, 0, 0.94) 71%,
      rgba(0, 0, 0, 0.74) 76%,
      rgba(0, 0, 0, 0.46) 81%,
      rgba(0, 0, 0, 0.20) 85%,
      transparent 89%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 66%,
      rgba(0, 0, 0, 0.94) 71%,
      rgba(0, 0, 0, 0.74) 76%,
      rgba(0, 0, 0, 0.46) 81%,
      rgba(0, 0, 0, 0.20) 85%,
      transparent 89%
    ) !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 63%,
      rgba(0, 0, 0, 0.94) 68%,
      rgba(0, 0, 0, 0.72) 73%,
      rgba(0, 0, 0, 0.44) 79%,
      rgba(0, 0, 0, 0.18) 84%,
      transparent 88%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 63%,
      rgba(0, 0, 0, 0.94) 68%,
      rgba(0, 0, 0, 0.72) 73%,
      rgba(0, 0, 0, 0.44) 79%,
      rgba(0, 0, 0, 0.18) 84%,
      transparent 88%
    ) !important;
  }
}


/* Homepage hero transition moved substantially closer to the building — double previous shift (2026-09-01) */
@media (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 54%,
      rgba(0, 0, 0, 0.94) 59%,
      rgba(0, 0, 0, 0.74) 64%,
      rgba(0, 0, 0, 0.46) 69%,
      rgba(0, 0, 0, 0.20) 73%,
      transparent 77%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 54%,
      rgba(0, 0, 0, 0.94) 59%,
      rgba(0, 0, 0, 0.74) 64%,
      rgba(0, 0, 0, 0.46) 69%,
      rgba(0, 0, 0, 0.20) 73%,
      transparent 77%
    ) !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 51%,
      rgba(0, 0, 0, 0.94) 56%,
      rgba(0, 0, 0, 0.72) 61%,
      rgba(0, 0, 0, 0.44) 67%,
      rgba(0, 0, 0, 0.18) 72%,
      transparent 76%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 51%,
      rgba(0, 0, 0, 0.94) 56%,
      rgba(0, 0, 0, 0.72) 61%,
      rgba(0, 0, 0, 0.44) 67%,
      rgba(0, 0, 0, 0.18) 72%,
      transparent 76%
    ) !important;
  }
}


/* Homepage hero transition moved the same amount again toward the building (2026-09-01) */
@media (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 42%,
      rgba(0, 0, 0, 0.94) 47%,
      rgba(0, 0, 0, 0.74) 52%,
      rgba(0, 0, 0, 0.46) 57%,
      rgba(0, 0, 0, 0.20) 61%,
      transparent 65%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 42%,
      rgba(0, 0, 0, 0.94) 47%,
      rgba(0, 0, 0, 0.74) 52%,
      rgba(0, 0, 0, 0.46) 57%,
      rgba(0, 0, 0, 0.20) 61%,
      transparent 65%
    ) !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 39%,
      rgba(0, 0, 0, 0.94) 44%,
      rgba(0, 0, 0, 0.72) 49%,
      rgba(0, 0, 0, 0.44) 55%,
      rgba(0, 0, 0, 0.18) 60%,
      transparent 64%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 39%,
      rgba(0, 0, 0, 0.94) 44%,
      rgba(0, 0, 0, 0.72) 49%,
      rgba(0, 0, 0, 0.44) 55%,
      rgba(0, 0, 0, 0.18) 60%,
      transparent 64%
    ) !important;
  }
}


/* Homepage hero edge visibility tweak — keep ~15% image visibility in the white zone (2026-09-01) */
@media (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 42%,
      rgba(0, 0, 0, 0.94) 47%,
      rgba(0, 0, 0, 0.74) 52%,
      rgba(0, 0, 0, 0.46) 57%,
      rgba(0, 0, 0, 0.20) 61%,
      rgba(0, 0, 0, 0.15) 65%,
      rgba(0, 0, 0, 0.15) 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 42%,
      rgba(0, 0, 0, 0.94) 47%,
      rgba(0, 0, 0, 0.74) 52%,
      rgba(0, 0, 0, 0.46) 57%,
      rgba(0, 0, 0, 0.20) 61%,
      rgba(0, 0, 0, 0.15) 65%,
      rgba(0, 0, 0, 0.15) 100%
    ) !important;
  }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-home-gateway__hero > .bf-home-gateway-hero__media {
    -webkit-mask-image: linear-gradient(
      to right,
      #000 39%,
      rgba(0, 0, 0, 0.94) 44%,
      rgba(0, 0, 0, 0.72) 49%,
      rgba(0, 0, 0, 0.44) 55%,
      rgba(0, 0, 0, 0.18) 60%,
      rgba(0, 0, 0, 0.15) 64%,
      rgba(0, 0, 0, 0.15) 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      #000 39%,
      rgba(0, 0, 0, 0.94) 44%,
      rgba(0, 0, 0, 0.72) 49%,
      rgba(0, 0, 0, 0.44) 55%,
      rgba(0, 0, 0, 0.18) 60%,
      rgba(0, 0, 0, 0.15) 64%,
      rgba(0, 0, 0, 0.15) 100%
    ) !important;
  }
}


/* Services page hero: replace the homepage-style gradient fade with a hard cut graphic shape (2026-09-01) */
.bf-services-reference__hero > .bf-services-cut-hero__media {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
}

.bf-services-reference__hero > .bf-services-cut-hero__media .bf-home-gateway-hero__media-image {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  object-position: left center;
  filter: none !important;
}

/* Remove any extra overlay treatment inherited from homepage tuning. */
.bf-services-reference__hero::before,
.bf-services-reference__hero::after,
.bf-services-reference__hero .bf-home-gateway__hero::before,
.bf-services-reference__hero .bf-home-gateway__hero::after,
.bf-services-reference__hero .bf-home-gateway-hero__media::before,
.bf-services-reference__hero .bf-home-gateway-hero__media::after {
  display: none !important;
  content: none !important;
}


/* BIM consultancy service hero: replace the generic line-art illustration with
   the provided consultancy meeting image and vary pentagon rotations so the
   decorative overlay feels less templated. */
.bf-service-detail--advisor .bf-service-detail__hero .bf-hero-split__visual {
  padding: 0;
  background: linear-gradient(145deg, rgba(11, 18, 32, 0.98), rgba(24, 39, 67, 0.92));
}

.bf-consultancy-hero-visual {
  position: relative;
  width: 100%;
  min-height: clamp(300px, 35vw, 460px);
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
  background: #0b1424;
}

.bf-consultancy-hero-visual__picture,
.bf-consultancy-hero-visual__image {
  display: block;
  width: 100%;
  height: 100%;
}

.bf-consultancy-hero-visual__picture {
  position: absolute;
  inset: 0;
}

.bf-consultancy-hero-visual__image {
  object-fit: cover;
  object-position: 34% center;
}

.bf-consultancy-hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.10), rgba(11, 18, 32, 0.18)),
    linear-gradient(90deg, rgba(11, 18, 32, 0.08), rgba(11, 18, 32, 0));
  pointer-events: none;
}

.bf-consultancy-hero-visual__pentagon {
  position: absolute;
  display: block;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.50);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 2;
}

.bf-consultancy-hero-visual__pentagon::after {
  content: "";
  position: absolute;
  inset: 18%;
  clip-path: inherit;
  border: 1px solid rgba(255, 255, 255, 0.28);
  opacity: 0.55;
}

.bf-consultancy-hero-visual__pentagon--1 {
  width: 58px;
  height: 58px;
  top: 10%;
  left: 6%;
  transform: rotate(17deg);
}

.bf-consultancy-hero-visual__pentagon--2 {
  width: 42px;
  height: 42px;
  top: 18%;
  left: 28%;
  transform: rotate(-11deg);
}

.bf-consultancy-hero-visual__pentagon--3 {
  width: 70px;
  height: 70px;
  right: 14%;
  bottom: 18%;
  transform: rotate(31deg);
}

.bf-consultancy-hero-visual__pentagon--4 {
  width: 48px;
  height: 48px;
  right: 8%;
  top: 14%;
  transform: rotate(-23deg);
}

.bf-consultancy-hero-visual__pentagon--5 {
  width: 34px;
  height: 34px;
  left: 18%;
  bottom: 10%;
  transform: rotate(7deg);
}

@media (max-width: 900px) {
  .bf-consultancy-hero-visual {
    min-height: 340px;
  }

  .bf-consultancy-hero-visual__image {
    object-position: 26% center;
  }
}

@media (max-width: 760px) {
  .bf-service-detail--advisor .bf-service-detail__hero .bf-hero-split__visual {
    min-height: 300px;
  }

  .bf-consultancy-hero-visual {
    min-height: 300px;
  }

  .bf-consultancy-hero-visual__image {
    object-position: 22% center;
  }

  .bf-consultancy-hero-visual__pentagon--1 { width: 46px; height: 46px; top: 9%; left: 7%; }
  .bf-consultancy-hero-visual__pentagon--2 { width: 34px; height: 34px; top: 20%; left: 30%; }
  .bf-consultancy-hero-visual__pentagon--3 { width: 56px; height: 56px; right: 10%; bottom: 18%; }
  .bf-consultancy-hero-visual__pentagon--4 { width: 38px; height: 38px; right: 6%; top: 12%; }
  .bf-consultancy-hero-visual__pentagon--5 { width: 28px; height: 28px; left: 16%; bottom: 8%; }
}

/* ==========================================================================
   /services/bim-consultancy hero — make it follow the homepage hero exactly,
   but with the client-side consultancy meeting image and varied pentagon angles.
   ========================================================================== */
.bf-service-detail--advisor-home {
  margin-block-start: -18px;
}

@media (max-width: 900px) {
  .bf-service-detail--advisor-home {
    margin-block-start: -12px;
  }
}

.bf-bim-consultancy-home-hero {
  position: relative;
}

.bf-bim-consultancy-home-hero__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.bf-bim-consultancy-home-hero__media .bf-home-gateway-hero__media-image {
  object-position: 34% center;
}

.bf-bim-consultancy-home-hero__content {
  position: relative;
  z-index: 2;
}

.bf-bim-consultancy-home-hero__pentagon {
  position: absolute;
  display: block;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.42);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 1;
}

.bf-bim-consultancy-home-hero__pentagon::after {
  content: "";
  position: absolute;
  inset: 18%;
  clip-path: inherit;
  border: 1px solid rgba(255, 255, 255, 0.20);
  opacity: 0.6;
}

.bf-bim-consultancy-home-hero__pentagon--1 {
  width: 66px;
  height: 66px;
  top: 17%;
  left: 8%;
  transform: rotate(19deg);
}

.bf-bim-consultancy-home-hero__pentagon--2 {
  width: 42px;
  height: 42px;
  top: 32%;
  left: 23%;
  transform: rotate(-14deg);
}

.bf-bim-consultancy-home-hero__pentagon--3 {
  width: 58px;
  height: 58px;
  top: 27%;
  right: 29%;
  transform: rotate(33deg);
}

.bf-bim-consultancy-home-hero__pentagon--4 {
  width: 40px;
  height: 40px;
  bottom: 24%;
  left: 35%;
  transform: rotate(-27deg);
}

.bf-bim-consultancy-home-hero__pentagon--5 {
  width: 52px;
  height: 52px;
  bottom: 15%;
  right: 36%;
  transform: rotate(11deg);
}

@media (max-width: 1180px) {
  .bf-bim-consultancy-home-hero__media .bf-home-gateway-hero__media-image {
    object-position: 30% center;
  }

  .bf-bim-consultancy-home-hero__pentagon--1 { left: 6%; }
  .bf-bim-consultancy-home-hero__pentagon--2 { left: 20%; }
  .bf-bim-consultancy-home-hero__pentagon--3 { right: 24%; }
  .bf-bim-consultancy-home-hero__pentagon--4 { left: 30%; }
  .bf-bim-consultancy-home-hero__pentagon--5 { right: 30%; }
}

@media (max-width: 760px) {
  .bf-bim-consultancy-home-hero__media .bf-home-gateway-hero__media-image {
    object-position: 24% center;
  }

  .bf-bim-consultancy-home-hero__pentagon--1 {
    width: 44px;
    height: 44px;
    top: 10%;
    left: 8%;
  }

  .bf-bim-consultancy-home-hero__pentagon--2 {
    width: 30px;
    height: 30px;
    top: 24%;
    left: 24%;
  }

  .bf-bim-consultancy-home-hero__pentagon--3 {
    width: 42px;
    height: 42px;
    top: 20%;
    right: 12%;
  }

  .bf-bim-consultancy-home-hero__pentagon--4 {
    width: 28px;
    height: 28px;
    bottom: 20%;
    left: 32%;
  }

  .bf-bim-consultancy-home-hero__pentagon--5 {
    width: 34px;
    height: 34px;
    bottom: 14%;
    right: 18%;
  }
}


/* ==========================================================================
   Core service heroes — homepage hero treatment
   /services/bim-implementation
   /services/bim-optimization
   /services/bim-training
   ========================================================================== */

.bf-service-detail--home-hero {
  margin-block-start: -18px;
}

@media (max-width: 900px) {
  .bf-service-detail--home-hero {
    margin-block-start: -12px;
  }
}

.bf-service-home-hero {
  position: relative;
}

.bf-service-home-hero__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.bf-service-home-hero__content {
  position: relative;
  z-index: 2;
}

.bf-service-home-hero__media--implementation .bf-home-gateway-hero__media-image {
  object-position: 40% center;
}

.bf-service-home-hero__media--optimization .bf-home-gateway-hero__media-image {
  object-position: 37% center;
}

.bf-service-home-hero__media--training .bf-home-gateway-hero__media-image {
  object-position: 38% center;
}

/* Same subtle pentagon language as the approved consultancy hero, with
   deliberately different rotations and placement on every service. */
.bf-service-home-hero__pentagon {
  position: absolute;
  display: block;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.42);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 1;
}

.bf-service-home-hero__pentagon::after {
  content: "";
  position: absolute;
  inset: 18%;
  clip-path: inherit;
  border: 1px solid rgba(255, 255, 255, 0.20);
  opacity: 0.6;
}

/* Implementation */
.bf-service-home-hero__pentagon--implementation-1 {
  width: 64px; height: 64px; top: 14%; left: 7%;
  transform: rotate(-18deg);
}
.bf-service-home-hero__pentagon--implementation-2 {
  width: 40px; height: 40px; top: 29%; left: 25%;
  transform: rotate(27deg);
}
.bf-service-home-hero__pentagon--implementation-3 {
  width: 56px; height: 56px; top: 23%; right: 31%;
  transform: rotate(-9deg);
}
.bf-service-home-hero__pentagon--implementation-4 {
  width: 38px; height: 38px; bottom: 20%; left: 33%;
  transform: rotate(36deg);
}
.bf-service-home-hero__pentagon--implementation-5 {
  width: 50px; height: 50px; bottom: 13%; right: 35%;
  transform: rotate(12deg);
}

/* Optimization */
.bf-service-home-hero__pentagon--optimization-1 {
  width: 58px; height: 58px; top: 18%; left: 9%;
  transform: rotate(24deg);
}
.bf-service-home-hero__pentagon--optimization-2 {
  width: 44px; height: 44px; top: 35%; left: 27%;
  transform: rotate(-31deg);
}
.bf-service-home-hero__pentagon--optimization-3 {
  width: 68px; height: 68px; top: 21%; right: 33%;
  transform: rotate(8deg);
}
.bf-service-home-hero__pentagon--optimization-4 {
  width: 36px; height: 36px; bottom: 27%; left: 36%;
  transform: rotate(-16deg);
}
.bf-service-home-hero__pentagon--optimization-5 {
  width: 46px; height: 46px; bottom: 14%; right: 39%;
  transform: rotate(34deg);
}

/* Training */
.bf-service-home-hero__pentagon--training-1 {
  width: 62px; height: 62px; top: 15%; left: 8%;
  transform: rotate(13deg);
}
.bf-service-home-hero__pentagon--training-2 {
  width: 42px; height: 42px; top: 31%; left: 23%;
  transform: rotate(-26deg);
}
.bf-service-home-hero__pentagon--training-3 {
  width: 60px; height: 60px; top: 24%; right: 30%;
  transform: rotate(39deg);
}
.bf-service-home-hero__pentagon--training-4 {
  width: 34px; height: 34px; bottom: 23%; left: 34%;
  transform: rotate(-7deg);
}
.bf-service-home-hero__pentagon--training-5 {
  width: 52px; height: 52px; bottom: 16%; right: 36%;
  transform: rotate(21deg);
}

@media (max-width: 1180px) {
  .bf-service-home-hero__media--implementation .bf-home-gateway-hero__media-image {
    object-position: 36% center;
  }

  .bf-service-home-hero__media--optimization .bf-home-gateway-hero__media-image {
    object-position: 33% center;
  }

  .bf-service-home-hero__media--training .bf-home-gateway-hero__media-image {
    object-position: 34% center;
  }
}

@media (max-width: 760px) {
  .bf-service-home-hero__media--implementation .bf-home-gateway-hero__media-image {
    object-position: 26% center;
  }

  .bf-service-home-hero__media--optimization .bf-home-gateway-hero__media-image {
    object-position: 25% center;
  }

  .bf-service-home-hero__media--training .bf-home-gateway-hero__media-image {
    object-position: 25% center;
  }

  .bf-service-home-hero__pentagon {
    transform-origin: center;
  }

  .bf-service-home-hero__pentagon--implementation-1,
  .bf-service-home-hero__pentagon--optimization-1,
  .bf-service-home-hero__pentagon--training-1 {
    width: 44px; height: 44px; top: 10%; left: 8%;
  }

  .bf-service-home-hero__pentagon--implementation-2,
  .bf-service-home-hero__pentagon--optimization-2,
  .bf-service-home-hero__pentagon--training-2 {
    width: 30px; height: 30px; top: 24%; left: 24%;
  }

  .bf-service-home-hero__pentagon--implementation-3,
  .bf-service-home-hero__pentagon--optimization-3,
  .bf-service-home-hero__pentagon--training-3 {
    width: 42px; height: 42px; top: 20%; right: 12%;
  }

  .bf-service-home-hero__pentagon--implementation-4,
  .bf-service-home-hero__pentagon--optimization-4,
  .bf-service-home-hero__pentagon--training-4 {
    width: 28px; height: 28px; bottom: 20%; left: 32%;
  }

  .bf-service-home-hero__pentagon--implementation-5,
  .bf-service-home-hero__pentagon--optimization-5,
  .bf-service-home-hero__pentagon--training-5 {
    width: 34px; height: 34px; bottom: 14%; right: 18%;
  }
}
\n\n/* ==========================================================================\n   Experiences index hero — same full-bleed structure as /services, using the\n   exact supplied Experiences image with no generated replacement or extra mask.\n   ========================================================================== */\n.bf-experiences-index__hero > .bf-experiences-hero__media {\n  -webkit-mask-image: none !important;\n  mask-image: none !important;\n  opacity: 1 !important;\n}\n\n.bf-experiences-index__hero > .bf-experiences-hero__media .bf-home-gateway-hero__media-image {\n  -webkit-mask-image: none !important;\n  mask-image: none !important;\n  object-position: center center;\n  filter: none !important;\n}\n\n/* Remove inherited homepage overlays: the supplied image already contains the\n   intended composition and open right-side area. */\n.bf-experiences-index__hero::before,\n.bf-experiences-index__hero::after,\n.bf-experiences-index__hero .bf-home-gateway-hero__media::before,\n.bf-experiences-index__hero .bf-home-gateway-hero__media::after,\n.bf-experiences-index__hero .bf-home-gateway-hero__content::before {\n  display: none !important;\n  content: none !important;\n}\n\n/* Dark right-side negative space: use light copy while preserving the same\n   typography, spacing, CTA sizing, and positioning as /services. */\n.bf-experiences-index__hero .bf-home-gateway-hero__title,\n.bf-experiences-index__hero .bf-home-gateway-hero__lead,\n.bf-experiences-index__hero .bf-home-gateway-hero__services-link {\n  color: #fff !important;\n}\n\n.bf-experiences-index__hero .bf-home-gateway-hero__lead {\n  color: rgba(255, 255, 255, 0.84) !important;\n}\n\n.bf-experiences-index__hero .bf-home-gateway-hero__services-link:hover {\n  color: #f59e0b !important;\n}\n\n@media (max-width: 1180px) {\n  .bf-experiences-index__hero > .bf-experiences-hero__media .bf-home-gateway-hero__media-image {\n    object-position: 46% center;\n  }\n}\n\n@media (max-width: 760px) {\n  .bf-experiences-index__hero > .bf-experiences-hero__media .bf-home-gateway-hero__media-image {\n    object-position: 30% center;\n  }\n\n  /* Mobile copy sits over the image, so add only a dark readability veil; no\n     desktop gradient or generated asset treatment. */\n  .bf-experiences-index__hero::after {\n    content: "" !important;\n    display: block !important;\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(180deg, rgba(7, 15, 27, 0.08) 0%, rgba(7, 15, 27, 0.28) 46%, rgba(7, 15, 27, 0.86) 100%);\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  .bf-experiences-index__hero .bf-home-gateway__hero-shell {\n    position: relative;\n    z-index: 2;\n  }\n}\n

/* ==========================================================================
   Experiences index hero — exact /services hard-cut treatment (2026-09-01)
   Uses the exact supplied Experiences image, with the existing /services
   white-cut silhouette applied to it. No fade, no dark-copy mode.
   ========================================================================== */
.bf-experiences-index__hero > .bf-experiences-cut-hero__media {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
}

.bf-experiences-index__hero > .bf-experiences-cut-hero__media .bf-home-gateway-hero__media-image {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  object-position: left center !important;
  filter: none !important;
}

/* Match /services: the right-hand copy sits on the white cutout, so no halo,
   no desktop/mobile veil, and no inherited dark-text override. */
.bf-experiences-index__hero::before,
.bf-experiences-index__hero::after,
.bf-experiences-index__hero .bf-home-gateway-hero__media::before,
.bf-experiences-index__hero .bf-home-gateway-hero__media::after,
.bf-experiences-index__hero .bf-home-gateway-hero__content::before {
  display: none !important;
  content: none !important;
}

.bf-experiences-index__hero .bf-home-gateway-hero__title,
.bf-experiences-index__hero .bf-home-gateway-hero__services-link {
  color: var(--bf-text) !important;
}

.bf-experiences-index__hero .bf-home-gateway-hero__lead {
  color: var(--bf-muted) !important;
}

.bf-experiences-index__hero .bf-home-gateway-hero__services-link:hover {
  color: var(--bf-accent) !important;
}

@media (max-width: 1180px) {
  .bf-experiences-index__hero > .bf-experiences-cut-hero__media .bf-home-gateway-hero__media-image {
    object-position: left center !important;
  }
}

@media (max-width: 760px) {
  .bf-experiences-index__hero > .bf-experiences-cut-hero__media .bf-home-gateway-hero__media-image {
    object-position: left center !important;
  }

  .bf-experiences-index__hero::after {
    display: none !important;
    content: none !important;
  }
}


/* ==========================================================================
   /experiences first-viewport alignment fix (2026-09-01)
   MainLayout adds 18px top padding to .bf-page on desktop and 12px at <=900px.
   Cancel that offset exactly for the Experiences index so the hard-cut hero
   starts immediately below the app bar and ends in the first viewport instead
   of pushing the same spacing into the following section.
   ========================================================================== */
.bf-experiences-index {
  margin-block-start: -18px;
}

@media (max-width: 900px) {
  .bf-experiences-index {
    margin-block-start: -12px;
  }
}

/* ==========================================================================
   Experience category heroes — use the supplied full-bleed hero images with
   the same shell/CTA system as /services and /experiences.
   ========================================================================== */
.bf-experience-page--home-hero,
.bf-problem-experience-page--home-hero {
  margin-block-start: -18px;
}

@media (max-width: 900px) {
  .bf-experience-page--home-hero,
  .bf-problem-experience-page--home-hero {
    margin-block-start: -12px;
  }
}

.bf-experience-home-hero {
  position: relative;
}

.bf-experience-home-hero__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.bf-experience-home-hero__content {
  position: relative;
  z-index: 2;
}

.bf-experience-home-hero__media--client-side .bf-home-gateway-hero__media-image {
  object-position: 42% center;
}

.bf-experience-home-hero__media--implementation .bf-home-gateway-hero__media-image {
  object-position: 36% center;
}

.bf-experience-home-hero__media--optimization .bf-home-gateway-hero__media-image {
  object-position: 38% center;
}

.bf-experience-home-hero__media--problem .bf-home-gateway-hero__media-image {
  object-position: 36% center;
}

.bf-experience-home-hero__media--training .bf-home-gateway-hero__media-image {
  object-position: 39% center;
}

.bf-experience-home-hero__pentagon {
  position: absolute;
  display: block;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0 38%);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.42);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 1;
}

.bf-experience-home-hero__pentagon::after {
  content: "";
  position: absolute;
  inset: 18%;
  clip-path: inherit;
  border: 1px solid rgba(255, 255, 255, 0.20);
  opacity: 0.6;
}

/* Client-side */
.bf-experience-home-hero__pentagon--client-side-1 {
  width: 62px; height: 62px; top: 14%; left: 7%; transform: rotate(14deg);
}
.bf-experience-home-hero__pentagon--client-side-2 {
  width: 40px; height: 40px; top: 29%; left: 24%; transform: rotate(-19deg);
}
.bf-experience-home-hero__pentagon--client-side-3 {
  width: 54px; height: 54px; top: 18%; right: 33%; transform: rotate(23deg);
}
.bf-experience-home-hero__pentagon--client-side-4 {
  width: 36px; height: 36px; bottom: 22%; left: 34%; transform: rotate(-8deg);
}
.bf-experience-home-hero__pentagon--client-side-5 {
  width: 48px; height: 48px; bottom: 14%; right: 36%; transform: rotate(31deg);
}

/* Implementation */
.bf-experience-home-hero__pentagon--implementation-1 {
  width: 66px; height: 66px; top: 13%; left: 8%; transform: rotate(-12deg);
}
.bf-experience-home-hero__pentagon--implementation-2 {
  width: 42px; height: 42px; top: 30%; left: 26%; transform: rotate(22deg);
}
.bf-experience-home-hero__pentagon--implementation-3 {
  width: 58px; height: 58px; top: 21%; right: 31%; transform: rotate(-26deg);
}
.bf-experience-home-hero__pentagon--implementation-4 {
  width: 34px; height: 34px; bottom: 21%; left: 35%; transform: rotate(9deg);
}
.bf-experience-home-hero__pentagon--implementation-5 {
  width: 50px; height: 50px; bottom: 12%; right: 34%; transform: rotate(17deg);
}

/* Optimization */
.bf-experience-home-hero__pentagon--optimization-1 {
  width: 60px; height: 60px; top: 17%; left: 8%; transform: rotate(27deg);
}
.bf-experience-home-hero__pentagon--optimization-2 {
  width: 44px; height: 44px; top: 35%; left: 27%; transform: rotate(-13deg);
}
.bf-experience-home-hero__pentagon--optimization-3 {
  width: 64px; height: 64px; top: 20%; right: 32%; transform: rotate(11deg);
}
.bf-experience-home-hero__pentagon--optimization-4 {
  width: 36px; height: 36px; bottom: 24%; left: 36%; transform: rotate(-29deg);
}
.bf-experience-home-hero__pentagon--optimization-5 {
  width: 48px; height: 48px; bottom: 13%; right: 37%; transform: rotate(18deg);
}

/* Problem solving */
.bf-experience-home-hero__pentagon--problem-1 {
  width: 58px; height: 58px; top: 16%; left: 7%; transform: rotate(-21deg);
}
.bf-experience-home-hero__pentagon--problem-2 {
  width: 40px; height: 40px; top: 31%; left: 23%; transform: rotate(15deg);
}
.bf-experience-home-hero__pentagon--problem-3 {
  width: 56px; height: 56px; top: 24%; right: 34%; transform: rotate(-9deg);
}
.bf-experience-home-hero__pentagon--problem-4 {
  width: 34px; height: 34px; bottom: 23%; left: 32%; transform: rotate(28deg);
}
.bf-experience-home-hero__pentagon--problem-5 {
  width: 46px; height: 46px; bottom: 15%; right: 37%; transform: rotate(-16deg);
}

/* Training */
.bf-experience-home-hero__pentagon--training-1 {
  width: 64px; height: 64px; top: 14%; left: 8%; transform: rotate(19deg);
}
.bf-experience-home-hero__pentagon--training-2 {
  width: 42px; height: 42px; top: 29%; left: 24%; transform: rotate(-24deg);
}
.bf-experience-home-hero__pentagon--training-3 {
  width: 60px; height: 60px; top: 22%; right: 31%; transform: rotate(12deg);
}
.bf-experience-home-hero__pentagon--training-4 {
  width: 36px; height: 36px; bottom: 22%; left: 34%; transform: rotate(-5deg);
}
.bf-experience-home-hero__pentagon--training-5 {
  width: 52px; height: 52px; bottom: 14%; right: 35%; transform: rotate(26deg);
}

@media (max-width: 1180px) {
  .bf-experience-home-hero__media--client-side .bf-home-gateway-hero__media-image {
    object-position: 38% center;
  }

  .bf-experience-home-hero__media--implementation .bf-home-gateway-hero__media-image {
    object-position: 32% center;
  }

  .bf-experience-home-hero__media--optimization .bf-home-gateway-hero__media-image {
    object-position: 34% center;
  }

  .bf-experience-home-hero__media--problem .bf-home-gateway-hero__media-image {
    object-position: 33% center;
  }

  .bf-experience-home-hero__media--training .bf-home-gateway-hero__media-image {
    object-position: 35% center;
  }
}

@media (max-width: 760px) {
  .bf-experience-home-hero__media--client-side .bf-home-gateway-hero__media-image {
    object-position: 28% center;
  }

  .bf-experience-home-hero__media--implementation .bf-home-gateway-hero__media-image {
    object-position: 24% center;
  }

  .bf-experience-home-hero__media--optimization .bf-home-gateway-hero__media-image,
  .bf-experience-home-hero__media--problem .bf-home-gateway-hero__media-image,
  .bf-experience-home-hero__media--training .bf-home-gateway-hero__media-image {
    object-position: 26% center;
  }

  .bf-experience-home-hero__pentagon {
    transform-origin: center;
  }

  .bf-experience-home-hero__pentagon--client-side-1,
  .bf-experience-home-hero__pentagon--implementation-1,
  .bf-experience-home-hero__pentagon--optimization-1,
  .bf-experience-home-hero__pentagon--problem-1,
  .bf-experience-home-hero__pentagon--training-1 {
    width: 44px; height: 44px; top: 10%; left: 8%;
  }

  .bf-experience-home-hero__pentagon--client-side-2,
  .bf-experience-home-hero__pentagon--implementation-2,
  .bf-experience-home-hero__pentagon--optimization-2,
  .bf-experience-home-hero__pentagon--problem-2,
  .bf-experience-home-hero__pentagon--training-2 {
    width: 30px; height: 30px; top: 24%; left: 24%;
  }

  .bf-experience-home-hero__pentagon--client-side-3,
  .bf-experience-home-hero__pentagon--implementation-3,
  .bf-experience-home-hero__pentagon--optimization-3,
  .bf-experience-home-hero__pentagon--problem-3,
  .bf-experience-home-hero__pentagon--training-3 {
    width: 42px; height: 42px; top: 20%; right: 12%;
  }

  .bf-experience-home-hero__pentagon--client-side-4,
  .bf-experience-home-hero__pentagon--implementation-4,
  .bf-experience-home-hero__pentagon--optimization-4,
  .bf-experience-home-hero__pentagon--problem-4,
  .bf-experience-home-hero__pentagon--training-4 {
    width: 28px; height: 28px; bottom: 20%; left: 32%;
  }

  .bf-experience-home-hero__pentagon--client-side-5,
  .bf-experience-home-hero__pentagon--implementation-5,
  .bf-experience-home-hero__pentagon--optimization-5,
  .bf-experience-home-hero__pentagon--problem-5,
  .bf-experience-home-hero__pentagon--training-5 {
    width: 34px; height: 34px; bottom: 14%; right: 18%;
  }
}


/* ==========================================================================
   Experience category hard-cut heroes (2026-09-01)
   /experiences/implementation
   /experiences/problems

   Keep the existing supplied images untouched. The clean white separation is
   created entirely in CSS, matching the approved /experiences cut treatment.
   ========================================================================== */

@media (min-width: 761px) {
  .bf-experience-home-hero--implementation,
  .bf-experience-home-hero--problem {
    overflow: hidden !important;
    background: #fff !important;
  }

  /* Remove all homepage-style fading/halo behavior from these two image layers. */
  .bf-experience-home-hero--implementation > .bf-experience-home-hero__media,
  .bf-experience-home-hero--problem > .bf-experience-home-hero__media {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    -webkit-mask-repeat: initial !important;
    mask-repeat: initial !important;
    opacity: 1 !important;
  }

  .bf-experience-home-hero--implementation > .bf-experience-home-hero__media .bf-home-gateway-hero__media-image,
  .bf-experience-home-hero--problem > .bf-experience-home-hero__media .bf-home-gateway-hero__media-image {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  /* Clean inward architectural cut. The extra control points make the edge read
     as one smooth shaped cut rather than a simple diagonal polygon. */
  .bf-experience-home-hero--implementation > .bf-experience-home-hero__media {
    -webkit-clip-path: polygon(
      0 0,
      60.5% 0,
      59.0% 7%,
      57.3% 14%,
      55.5% 21%,
      53.6% 28%,
      51.8% 35%,
      50.2% 42%,
      49.0% 49%,
      48.5% 55%,
      49.0% 61%,
      50.1% 68%,
      51.8% 75%,
      53.8% 82%,
      56.0% 89%,
      58.4% 95%,
      60.0% 100%,
      0 100%
    ) !important;
    clip-path: polygon(
      0 0,
      60.5% 0,
      59.0% 7%,
      57.3% 14%,
      55.5% 21%,
      53.6% 28%,
      51.8% 35%,
      50.2% 42%,
      49.0% 49%,
      48.5% 55%,
      49.0% 61%,
      50.1% 68%,
      51.8% 75%,
      53.8% 82%,
      56.0% 89%,
      58.4% 95%,
      60.0% 100%,
      0 100%
    ) !important;
  }

  /* Same visual language, with a very small variation so the category heroes
     do not look mechanically duplicated. */
  .bf-experience-home-hero--problem > .bf-experience-home-hero__media {
    -webkit-clip-path: polygon(
      0 0,
      61.0% 0,
      59.4% 7%,
      57.6% 14%,
      55.8% 21%,
      54.0% 28%,
      52.2% 35%,
      50.6% 42%,
      49.4% 49%,
      48.9% 55%,
      49.4% 61%,
      50.6% 68%,
      52.3% 75%,
      54.2% 82%,
      56.4% 89%,
      58.8% 95%,
      60.4% 100%,
      0 100%
    ) !important;
    clip-path: polygon(
      0 0,
      61.0% 0,
      59.4% 7%,
      57.6% 14%,
      55.8% 21%,
      54.0% 28%,
      52.2% 35%,
      50.6% 42%,
      49.4% 49%,
      48.9% 55%,
      49.4% 61%,
      50.6% 68%,
      52.3% 75%,
      54.2% 82%,
      56.4% 89%,
      58.8% 95%,
      60.4% 100%,
      0 100%
    ) !important;
  }

  /* No halo or overlay around the copy; the cut itself provides separation. */
  .bf-experience-home-hero--implementation::before,
  .bf-experience-home-hero--implementation::after,
  .bf-experience-home-hero--problem::before,
  .bf-experience-home-hero--problem::after,
  .bf-experience-home-hero--implementation .bf-experience-home-hero__content::before,
  .bf-experience-home-hero--problem .bf-experience-home-hero__content::before {
    content: none !important;
    display: none !important;
    background: none !important;
    filter: none !important;
  }

  .bf-experience-home-hero--implementation .bf-home-gateway-hero__title,
  .bf-experience-home-hero--problem .bf-home-gateway-hero__title,
  .bf-experience-home-hero--implementation .bf-home-gateway-hero__services-link,
  .bf-experience-home-hero--problem .bf-home-gateway-hero__services-link {
    color: var(--bf-text) !important;
  }

  .bf-experience-home-hero--implementation .bf-home-gateway-hero__lead,
  .bf-experience-home-hero--problem .bf-home-gateway-hero__lead {
    color: var(--bf-muted) !important;
  }
}

/* Keep the existing mobile treatment rather than forcing the desktop cut into
   the much narrower viewport. */


/* ==========================================================================
   Experience category cut correction (2026-09-01)
   Remove the faceted polygon cut. Implementation and Problems now use the
   exact same smooth elliptical white cut with no shape variation.
   ========================================================================== */

@media (min-width: 761px) {
  .bf-experience-home-hero--implementation,
  .bf-experience-home-hero--problem {
    position: relative !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /* Restore the supplied images as simple full-bleed layers. */
  .bf-experience-home-hero--implementation > .bf-experience-home-hero__media,
  .bf-experience-home-hero--problem > .bf-experience-home-hero__media {
    -webkit-clip-path: none !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 1 !important;
  }

  /* One identical, genuinely smooth cut for both pages.
     A large white ellipse overlays the right side. Its left edge reaches
     furthest into the image at mid-height and recedes toward the top/bottom,
     matching the clean /experiences cut without polygon facets. */
  .bf-experience-home-hero--implementation::before,
  .bf-experience-home-hero--problem::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    top: -22% !important;
    left: 48.2% !important;
    width: 74% !important;
    height: 144% !important;
    border-radius: 50% !important;
    background: #fff !important;
    filter: none !important;
    pointer-events: none !important;
  }

  .bf-experience-home-hero--implementation::after,
  .bf-experience-home-hero--problem::after,
  .bf-experience-home-hero--implementation .bf-experience-home-hero__content::before,
  .bf-experience-home-hero--problem .bf-experience-home-hero__content::before {
    content: none !important;
    display: none !important;
  }

  .bf-experience-home-hero--implementation .bf-home-gateway__hero-shell,
  .bf-experience-home-hero--problem .bf-home-gateway__hero-shell {
    position: relative !important;
    z-index: 2 !important;
  }

  .bf-experience-home-hero--implementation .bf-experience-home-hero__content,
  .bf-experience-home-hero--problem .bf-experience-home-hero__content {
    position: relative !important;
    z-index: 3 !important;
  }
}


/* ==========================================================================
   /insights and /about visual heroes (2026-09-01)
   Use the exact supplied artwork as a full-bleed background. The artwork
   already contains the intended dark negative space on the right, so these
   pages deliberately disable every inherited homepage mask, fade and halo.
   ========================================================================== */

.bf-insights-visual-hero,
.bf-about-visual-hero {
  position: relative !important;
  background: #101923 !important;
}

/* Cancel MainLayout's top page padding so the first hero begins directly
   beneath the app bar, matching the approved services/experiences pages. */
.bf-insights-visual-hero {
  margin-block-start: -18px !important;
}

.bf-about-page--visual-hero {
  margin-block-start: -18px;
}

.bf-insights-visual-hero > .bf-insights-visual-hero__media,
.bf-about-visual-hero > .bf-about-visual-hero__media {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  filter: none !important;
}

.bf-insights-visual-hero > .bf-insights-visual-hero__media .bf-home-gateway-hero__media-image,
.bf-about-visual-hero > .bf-about-visual-hero__media .bf-home-gateway-hero__media-image {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  object-position: center center !important;
  filter: none !important;
  opacity: 1 !important;
}

/* No radial perimeter fade, no white veil and no copy halo. */
.bf-insights-visual-hero::before,
.bf-insights-visual-hero::after,
.bf-about-visual-hero::before,
.bf-about-visual-hero::after,
.bf-insights-visual-hero .bf-home-gateway-hero__content::before,
.bf-about-visual-hero .bf-home-gateway-hero__content::before {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
}

/* The supplied images have a dark right-side text field. */
.bf-insights-visual-hero .bf-home-gateway-hero__title,
.bf-about-visual-hero .bf-home-gateway-hero__title {
  color: #fff !important;
}

.bf-insights-visual-hero .bf-home-gateway-hero__lead,
.bf-about-visual-hero .bf-home-gateway-hero__lead {
  color: rgba(255, 255, 255, 0.84) !important;
}

.bf-about-visual-hero .bf-home-gateway-hero__lead strong {
  color: #fff !important;
}

.bf-insights-visual-hero .bf-home-gateway-hero__services-link,
.bf-about-visual-hero .bf-home-gateway-hero__services-link {
  color: rgba(255, 255, 255, 0.94) !important;
}

.bf-insights-visual-hero .bf-home-gateway-hero__services-link:hover,
.bf-about-visual-hero .bf-home-gateway-hero__services-link:hover {
  color: var(--bf-accent) !important;
}

.bf-insights-visual-hero .bf-home-gateway__hero-shell,
.bf-about-visual-hero .bf-home-gateway__hero-shell {
  position: relative !important;
  z-index: 2 !important;
}

.bf-insights-visual-hero__content,
.bf-about-visual-hero__content {
  position: relative !important;
  z-index: 3 !important;
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-insights-visual-hero > .bf-insights-visual-hero__media .bf-home-gateway-hero__media-image,
  .bf-about-visual-hero > .bf-about-visual-hero__media .bf-home-gateway-hero__media-image {
    object-position: 46% center !important;
  }
}

@media (max-width: 900px) {
  .bf-insights-visual-hero {
    margin-block-start: -12px !important;
  }

  .bf-about-page--visual-hero {
    margin-block-start: -12px;
  }
}

@media (max-width: 760px) {
  .bf-insights-visual-hero > .bf-insights-visual-hero__media .bf-home-gateway-hero__media-image,
  .bf-about-visual-hero > .bf-about-visual-hero__media .bf-home-gateway-hero__media-image {
    object-position: 36% center !important;
  }

  /* Keep text readable without changing the artwork itself. */
  .bf-insights-visual-hero .bf-home-gateway-hero__content,
  .bf-about-visual-hero .bf-home-gateway-hero__content {
    background: rgba(10, 18, 29, 0.58);
    border-radius: 24px;
    padding-inline: 18px;
  }
}


/* ==========================================================================
   /services first-viewport alignment fix (2026-09-01)
   MainLayout adds 18px top padding to .bf-page on desktop and 12px at <=900px.
   Cancel that offset for the Services index so the hero begins directly below
   the app bar and does not push the same spacing into the following section.
   ========================================================================== */
.bf-services-reference {
  margin-block-start: -18px;
}

@media (max-width: 900px) {
  .bf-services-reference {
    margin-block-start: -12px;
  }
}

/* ==========================================================================
   Experience category cut: exact /services-style smooth shaped edge
   (2026-09-01)
   Replaces the ellipse/circle overlay on /experiences/implementation and
   /experiences/problems with one identical smooth SVG Bezier cut.
   ========================================================================== */
@media (min-width: 761px) {
  .bf-experience-home-hero--implementation::before,
  .bf-experience-home-hero--problem::before {
    content: none !important;
    display: none !important;
  }

  .bf-experience-home-hero--implementation > .bf-experience-home-hero__media,
  .bf-experience-home-hero--problem > .bf-experience-home-hero__media {
    -webkit-clip-path: none !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 1 !important;
  }

  .bf-experience-home-hero__service-cut {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .bf-experience-home-hero__service-cut path {
    fill: #fff;
    stroke: none;
  }

  .bf-experience-home-hero--implementation .bf-home-gateway__hero-shell,
  .bf-experience-home-hero--problem .bf-home-gateway__hero-shell {
    position: relative !important;
    z-index: 5 !important;
  }

  .bf-experience-home-hero--implementation .bf-experience-home-hero__content,
  .bf-experience-home-hero--problem .bf-experience-home-hero__content {
    position: relative !important;
    z-index: 6 !important;
  }
}

@media (max-width: 760px) {
  .bf-experience-home-hero__service-cut {
    display: none !important;
  }
}


/* Exact /experiences cut transfer (2026-09-01).
   The inline SVG uses the native 1672x941 experiences hero coordinate system
   and xMidYMid slice so it scales/crops exactly like object-fit: cover. */
@media (min-width: 761px) {
  .bf-experience-home-hero--implementation .bf-experience-home-hero__service-cut,
  .bf-experience-home-hero--problem .bf-experience-home-hero__service-cut {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
    z-index: 4 !important;
    pointer-events: none !important;
    transform: none !important;
  }

  .bf-experience-home-hero--implementation .bf-experience-home-hero__service-cut path,
  .bf-experience-home-hero--problem .bf-experience-home-hero__service-cut path {
    fill: #fff !important;
    stroke: none !important;
  }
}

/* ==========================================================================
   Mobile hero simplification (2026-09-02)
   On phone layouts, remove hero artwork/backgrounds across the public site.
   Desktop and tablet hero visuals remain unchanged.
   ========================================================================== */
@media (max-width: 760px) {
  /* All current page hero visuals share this media hook. */
  .bf-home-gateway__hero > .bf-home-gateway-hero__media,
  .bf-home-gateway__hero .bf-home-gateway-hero__media {
    display: none !important;
  }

  /* Mobile heroes become clean content sections instead of full-screen artwork. */
  .bf-home-gateway__hero,
  .bf-home-gateway__hero-shell,
  .bf-home-gateway-hero {
    height: auto !important;
    min-height: 0 !important;
    background: #fff !important;
  }

  /* Remove artwork-related veils/halos that are only needed over imagery. */
  .bf-home-gateway__hero::before,
  .bf-home-gateway__hero::after,
  .bf-home-gateway__hero .bf-home-gateway-hero__content::before,
  .bf-home-gateway__hero .bf-home-gateway-hero__content::after {
    content: none !important;
    display: none !important;
    background: none !important;
    filter: none !important;
  }

  /* The old mobile artwork layout reserved 220-330px above the copy.
     With artwork removed, collapse that reservation to normal hero spacing. */
  .bf-home-gateway-hero__content {
    padding: clamp(44px, 10vw, 64px) 0 40px !important;
  }

  /* About and Insights previously used white text over dark hero artwork. */
  .bf-insights-visual-hero,
  .bf-about-visual-hero {
    background: #fff !important;
  }

  .bf-insights-visual-hero .bf-home-gateway-hero__content,
  .bf-about-visual-hero .bf-home-gateway-hero__content {
    background: transparent !important;
    border-radius: 0 !important;
  }

  .bf-insights-visual-hero .bf-home-gateway-hero__title,
  .bf-about-visual-hero .bf-home-gateway-hero__title {
    color: var(--bf-text) !important;
  }

  .bf-insights-visual-hero .bf-home-gateway-hero__lead,
  .bf-about-visual-hero .bf-home-gateway-hero__lead,
  .bf-about-visual-hero .bf-home-gateway-hero__lead strong {
    color: var(--bf-muted) !important;
  }

  .bf-insights-visual-hero .bf-home-gateway-hero__services-link,
  .bf-about-visual-hero .bf-home-gateway-hero__services-link {
    color: var(--bf-text) !important;
  }
}

/* Homepage trust block separation + rounded outer shell (2026-09-02). */
@media (max-width: 760px) {
  .bf-home-trust {
    margin-block-start: 20px;
    border-radius: 24px;
  }
}


/* ==========================================================================
   Homepage final CTA -> footer spacing correction (2026-09-02)
   The homepage previously stacked three separate gaps after the dark CTA:
   the CTA section bottom padding + .bf-page bottom padding + footer top margin.
   Keep the section's own breathing room and remove the redundant shell spacing
   on the homepage only. Other pages retain the standard footer rhythm.
   ========================================================================== */
.bf-page--home {
  padding-bottom: 0;
}

.bf-footer--home {
  margin-top: 24px;
}

@media (max-width: 900px) {
  .bf-footer--home {
    margin-top: 16px;
  }
}

/* ==========================================================================
   Service final CTA -> footer spacing correction (2026-09-02)
   Applied only to the service hub and the four primary service pages that end
   with the compact dark CTA band. Keep the CTA section's own breathing room
   while removing the additional page-bottom + footer-top stack.
   ========================================================================== */
.bf-page--compact-final-cta {
  padding-bottom: 0;
}

.bf-footer--compact-final-cta {
  margin-top: 24px;
}

@media (max-width: 900px) {
  .bf-footer--compact-final-cta {
    margin-top: 16px;
  }
}

/* ========================================================================== 
   /services — BIMFlow Visual Grammar v1.0
   Surface × Structure × Transition + Emphasis

   Page map:
   Hero             = Canvas + Narrative + Space + Primary
   Primary services = Surface + Grid + Space + Primary
   Evidence         = Canvas + Grid + Space + Standard
   Service boundary = Canvas + Matrix + Rule + Standard
   Audiences        = Canvas + Split/Grid + Space + Standard
   Service process  = Canvas + Rail + Rule + Standard
   Insights         = Canvas + Grid + Space + Quiet
   Final CTA        = Contrast + Narrative + Space + Primary
   ========================================================================== */

/* Keep one continuous neutral page canvas. Section identity comes from
   geometry, rules and containment — not alternating background colors. */
.bf-services-reference {
  background: transparent;
}

.bf-services-reference > section + section {
  margin-block-start: 0;
}

.bf-services-reference > :where(.bf-section, .bf-section-compact):not(.bf-services-reference__hero) {
  padding-block: clamp(52px, 6vw, 80px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.bf-services-reference .bf-section-header {
  width: min(100%, 780px);
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: clamp(28px, 3.5vw, 42px);
  text-align: center;
  justify-items: center;
}

/* /services section introductions are intentionally centered. Keep all body
   content below the header RTL/right-aligned. These explicit child rules
   prevent generic RTL typography utilities from pulling the copy back right. */
.bf-services-reference .bf-section-header :where(
  .bf-section-header__eyebrow,
  .bf-section-header__title,
  .bf-section-header__intro,
  .bf-section-header__content
) {
  width: 100%;
  margin-inline: auto;
  text-align: center;
  text-align-last: center;
}

.bf-services-reference .bf-section-header__intro {
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Primary services — contained surface + open grid
   One surface contains the service family. Individual services are not cards.
   -------------------------------------------------------------------------- */
.bf-services-primary-surface {
  padding: clamp(24px, 3.2vw, 42px);
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: none;
}

.bf-services-primary-surface .bf-section-header {
  margin-bottom: clamp(24px, 3vw, 34px);
}

.bf-services-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid var(--bf-border);
}

.bf-services-index-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: clamp(24px, 2.8vw, 34px);
  border-block-end: 1px solid var(--bf-border);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--bf-t-fast);
}

.bf-services-index-item:nth-child(odd) {
  border-inline-end: 1px solid var(--bf-border);
}

.bf-services-index-item:hover,
.bf-services-index-item:focus-visible {
  background: var(--bf-surface-soft);
  text-decoration: none;
}

.bf-services-index-item__head,
.bf-services-audience-item__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bf-services-index-item__index,
.bf-services-audience-item__index,
.bf-services-evidence-item__index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bf-ink);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.bf-services-index-item__index::after,
.bf-services-audience-item__index::after,
.bf-services-evidence-item__index::after {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent);
}

.bf-services-index-item__label,
.bf-services-audience-item__label {
  color: var(--bf-subtle);
  font-size: 0.78rem;
  font-weight: 800;
}

.bf-services-index-item h3,
.bf-services-audience-item h3,
.bf-services-insight-item h3 {
  margin: 2px 0 0;
  color: var(--bf-text);
  font-size: clamp(1.16rem, 1.55vw, 1.38rem);
  line-height: 1.55;
}

.bf-services-index-item__description,
.bf-services-index-item__fit {
  margin: 0;
  color: var(--bf-muted);
  font-size: 0.94rem;
  line-height: 1.82;
}

.bf-services-index-item__scope {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  color: var(--bf-subtle);
  font-size: 0.82rem;
  font-weight: 700;
}

.bf-services-index-item__scope li {
  display: inline-flex;
  align-items: center;
}

.bf-services-index-item__scope li:not(:last-child)::after {
  content: "•";
  margin-inline: 9px;
  color: var(--bf-border-strong);
}

.bf-services-index-item__fit {
  margin-top: 4px;
  padding-block-start: 10px;
  border-block-start: 1px solid rgba(216, 224, 236, 0.72);
}

.bf-services-index-item__fit strong {
  color: var(--bf-text);
}

.bf-services-index-item__link,
.bf-services-audience-item__link {
  margin-top: auto;
  padding-block-start: 4px;
  color: var(--bf-ink);
  font-size: 0.86rem;
  font-weight: 850;
}

/* --------------------------------------------------------------------------
   Evidence — open canvas + structural grid
   No second dark block: the final CTA owns the page's contrast budget.
   -------------------------------------------------------------------------- */
.bf-services-reference__evidence {
  position: relative;
}

.bf-services-reference__evidence::before {
  display: none;
}

.bf-services-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--bf-border);
}

.bf-services-evidence-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 168px;
  padding: clamp(24px, 2.8vw, 34px);
  border-block-end: 1px solid var(--bf-border);
  background: transparent;
  color: var(--bf-text);
  text-decoration: none;
  transition: background-color var(--bf-t-fast);
}

.bf-services-evidence-item:nth-child(odd) {
  border-inline-end: 1px solid var(--bf-border);
}

.bf-services-evidence-item:nth-last-child(-n + 2) {
  border-block-end: 0;
}

.bf-services-evidence-item:hover,
.bf-services-evidence-item:focus-visible {
  background: rgba(255, 255, 255, 0.58);
  text-decoration: none;
}

.bf-services-evidence-item__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--bf-accent-dark);
  font-size: 0.78rem;
  font-weight: 850;
}

.bf-services-evidence-item strong {
  max-width: 43ch;
  color: var(--bf-text);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.85;
}

.bf-services-evidence-item small {
  margin-top: auto;
  color: var(--bf-subtle);
  font-size: 0.78rem;
  font-weight: 800;
}

/* --------------------------------------------------------------------------
   Rule transition — explicit chapter boundary without a background change.
   -------------------------------------------------------------------------- */
.bf-services-reference__comparison,
.bf-services-reference__process {
  padding-block-start: 0 !important;
}

.bf-services-reference__comparison > .bf-container,
.bf-services-reference__process > .bf-container {
  position: relative;
  padding-block-start: clamp(50px, 6vw, 72px);
  border-block-start: 1px solid var(--bf-border);
}

.bf-services-reference__comparison > .bf-container::before,
.bf-services-reference__process > .bf-container::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 72px;
  height: 3px;
  border-radius: var(--bf-radius-pill);
  background: var(--bf-accent);
}

/* Matrix is the structural object, not a card inside a colored section. */
.bf-services-reference__comparison .bf-services-boundary-matrix {
  border-radius: 20px;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Audience split — open canvas + two-path structure, no card shells.
   -------------------------------------------------------------------------- */
.bf-services-audience-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block: 1px solid var(--bf-border);
}

.bf-services-audience-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(26px, 3vw, 38px);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--bf-t-fast);
}

.bf-services-audience-item:first-child {
  border-inline-end: 1px solid var(--bf-border);
}

.bf-services-audience-item:hover,
.bf-services-audience-item:focus-visible {
  background: rgba(255, 255, 255, 0.58);
  text-decoration: none;
}

.bf-services-audience-item > p {
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.85;
}

.bf-services-audience-item > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bf-subtle);
  font-size: 0.84rem;
  font-weight: 750;
}

.bf-services-audience-item > ul li:not(:last-child)::after {
  content: "•";
  margin-inline: 9px;
  color: var(--bf-border-strong);
}

/* --------------------------------------------------------------------------
   Process — open rail. The sequence itself defines the section.
   -------------------------------------------------------------------------- */
.bf-services-reference__process .bf-process-rail {
  margin-top: clamp(24px, 3vw, 34px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.bf-services-reference__process .bf-process-rail__content {
  max-width: 72ch;
  margin-top: clamp(24px, 3vw, 34px);
  padding-block-start: 20px;
  border-block-start: 1px solid var(--bf-border);
}

.bf-services-reference__process .bf-process-rail__content p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Insights — quiet editorial grid, not eight cards.
   -------------------------------------------------------------------------- */
.bf-services-insight-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid var(--bf-border);
}

.bf-services-insight-item {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: clamp(22px, 2.6vw, 30px);
  border-block-end: 1px solid var(--bf-border);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--bf-t-fast);
}

.bf-services-insight-item:nth-child(odd) {
  border-inline-end: 1px solid var(--bf-border);
}

.bf-services-insight-item:hover,
.bf-services-insight-item:focus-visible {
  background: rgba(255, 255, 255, 0.58);
  text-decoration: none;
}

.bf-services-insight-item__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-services-insight-item__meta span {
  color: var(--bf-accent-dark);
  font-size: 0.76rem;
  font-weight: 900;
}

.bf-services-insight-item__meta small {
  color: var(--bf-subtle);
  font-size: 0.75rem;
  font-weight: 800;
}

.bf-services-insight-item h3 {
  font-size: clamp(1rem, 1.28vw, 1.16rem);
}

.bf-services-insight-item p {
  margin: 0;
  color: var(--bf-muted);
  font-size: 0.9rem;
  line-height: 1.8;
}

.bf-services-insight-item > strong {
  margin-top: auto;
  color: var(--bf-ink);
  font-size: 0.8rem;
  font-weight: 850;
}

/* The CTA is the only major dark contrast moment on /services. */
.bf-services-reference__cta {
  padding-block-start: clamp(40px, 5vw, 64px) !important;
}

@media (max-width: 960px) {
  .bf-services-reference__comparison .bf-services-boundary-matrix__row {
    border-radius: 16px;
    box-shadow: none;
  }
}

@media (max-width: 760px) {
  .bf-services-reference > :where(.bf-section, .bf-section-compact):not(.bf-services-reference__hero) {
    padding-block: 52px;
  }

  .bf-services-reference .bf-section-header {
    margin-bottom: 26px;
  }

  .bf-services-primary-surface {
    padding: 20px;
    border-radius: 20px;
  }

  .bf-services-index-grid,
  .bf-services-evidence-grid,
  .bf-services-audience-split,
  .bf-services-insight-list {
    grid-template-columns: 1fr;
  }

  .bf-services-index-item,
  .bf-services-evidence-item,
  .bf-services-audience-item,
  .bf-services-insight-item {
    padding: 22px 4px;
    border-inline-end: 0 !important;
  }

  .bf-services-index-item:first-child,
  .bf-services-index-item:nth-child(2),
  .bf-services-index-item:nth-child(3) {
    border-block-end: 1px solid var(--bf-border);
  }

  .bf-services-index-item:last-child {
    border-block-end: 0;
  }

  .bf-services-evidence-item {
    min-height: 0;
  }

  .bf-services-evidence-item:nth-last-child(-n + 2) {
    border-block-end: 1px solid var(--bf-border);
  }

  .bf-services-evidence-item:last-child {
    border-block-end: 0;
  }

  .bf-services-audience-item:first-child {
    border-block-end: 1px solid var(--bf-border);
  }

  .bf-services-reference__comparison > .bf-container,
  .bf-services-reference__process > .bf-container {
    padding-block-start: 48px;
  }

  .bf-services-reference__comparison > .bf-container::before,
  .bf-services-reference__process > .bf-container::before {
    width: 52px;
  }

  .bf-services-reference__process .bf-process-rail__list {
    grid-template-columns: 1fr;
  }

  .bf-services-reference__process .bf-process-rail__item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .bf-services-reference__process .bf-process-rail__item:not(:last-child)::after {
    inset-inline-start: 1.18rem;
    top: 2.4rem;
    width: 1px;
    height: calc(100% + 18px);
  }
}


/* Visual-grammar specificity cleanup: neutralize legacy section/list rules on
   the new open structures without changing those rules site-wide. */
.bf-services-reference .bf-services-index-item__scope,
.bf-services-reference .bf-services-audience-item > ul,
.bf-services-reference__process .bf-process-rail__list {
  margin: 0;
  padding: 0;
}

.bf-services-reference .bf-services-index-item__scope li,
.bf-services-reference .bf-services-audience-item > ul li,
.bf-services-reference__process .bf-process-rail__item {
  margin-block: 0;
}

.bf-services-reference .bf-services-evidence-item::before,
.bf-services-reference .bf-services-evidence-item::after {
  content: none;
  display: none;
}

/* ========================================================================== 
   /services — Visual Device refinement (2026-09-02)
   Adds composition language on top of Visual Grammar v1.0:
   technical markers, ghost numerals, micro-flows, asymmetric feature layouts,
   controlled depth and editorial hierarchy.
   ========================================================================== */

/* Primary capability control board ------------------------------------------------ */
.bf-services-primary-surface {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4vw, 52px);
  border-color: rgba(174, 187, 205, 0.68);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.07);
}

.bf-services-primary-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(174, 187, 205, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174, 187, 205, 0.15) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 42%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 42%);
}

.bf-services-primary-surface > * {
  position: relative;
  z-index: 1;
}

.bf-services-control-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--bf-border);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.78);
}

.bf-services-control-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 330px;
  flex-direction: column;
  gap: 12px;
  padding: clamp(26px, 3vw, 38px);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: background-color var(--bf-t-fast), transform var(--bf-t-fast);
}

.bf-services-control-card:nth-child(odd) {
  border-inline-end: 1px solid var(--bf-border);
}

.bf-services-control-card:nth-child(-n + 2) {
  border-block-end: 1px solid var(--bf-border);
}

.bf-services-control-card:hover,
.bf-services-control-card:focus-visible {
  background: #fff;
  text-decoration: none;
}

.bf-services-control-card:hover .bf-services-control-card__ghost,
.bf-services-control-card:focus-visible .bf-services-control-card__ghost {
  opacity: .095;
  transform: translateY(-3px);
}

.bf-services-control-card__ghost {
  position: absolute;
  inset-block-start: -22px;
  inset-inline-end: 22px;
  z-index: -1;
  color: var(--bf-ink);
  font-size: clamp(5.5rem, 10vw, 8.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.06em;
  opacity: .052;
  transition: opacity var(--bf-t-fast), transform var(--bf-t-fast);
  pointer-events: none;
}

.bf-services-control-card__head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.bf-services-control-card__index {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--bf-ink);
  font-size: .76rem;
  font-weight: 900;
}

.bf-services-control-card__index::after {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--bf-accent);
  border-radius: 999px;
}

.bf-services-control-card__label {
  color: var(--bf-accent-dark);
  font-size: .78rem;
  font-weight: 850;
}

.bf-services-control-card h3 {
  margin: 0;
  color: var(--bf-text);
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  line-height: 1.55;
}

.bf-services-control-card > p {
  max-width: 52ch;
  margin: 0;
  color: var(--bf-muted);
  font-size: .93rem;
  line-height: 1.85;
}

.bf-services-micro-flow {
  display: grid;
  grid-template-columns: auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: min(100%, 390px);
  min-height: 40px;
  margin-block: 3px 2px;
  direction: rtl;
}

.bf-services-micro-flow span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid rgba(174, 187, 205, .82);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--bf-ink);
  font-size: .72rem;
  font-weight: 850;
  white-space: nowrap;
}

.bf-services-micro-flow i {
  position: relative;
  display: block;
  height: 1px;
  background: var(--bf-border-strong);
}

.bf-services-micro-flow i::after {
  content: "";
  position: absolute;
  inset-inline-start: -1px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bf-accent);
  transform: translateY(-50%);
}

.bf-services-control-card > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--bf-subtle);
  font-size: .8rem;
  font-weight: 750;
}

.bf-services-control-card > ul li:not(:last-child)::after {
  content: "•";
  margin-inline: 8px;
  color: var(--bf-border-strong);
}

.bf-services-control-card__footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-block-start: 14px;
  border-block-start: 1px solid rgba(216, 224, 236, .78);
}

.bf-services-control-card__footer small {
  color: var(--bf-muted);
  font-size: .77rem;
  line-height: 1.7;
}

.bf-services-control-card__footer small strong {
  color: var(--bf-text);
}

.bf-services-control-card__footer > span {
  flex: 0 0 auto;
  color: var(--bf-ink);
  font-size: .8rem;
  font-weight: 900;
}

/* Evidence — feature + support ---------------------------------------------------- */
.bf-services-evidence-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
  gap: clamp(20px, 2.5vw, 30px);
  align-items: stretch;
}

.bf-services-evidence-feature__main {
  position: relative;
  display: flex;
  min-height: 410px;
  flex-direction: column;
  gap: 16px;
  padding: clamp(32px, 4vw, 52px);
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .065);
  color: inherit;
  text-decoration: none;
}

.bf-services-evidence-feature__main::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 88px;
  height: 4px;
  background: var(--bf-accent);
}

.bf-services-evidence-feature__main:hover,
.bf-services-evidence-feature__main:focus-visible,
.bf-services-evidence-support-item:hover,
.bf-services-evidence-support-item:focus-visible {
  text-decoration: none;
}

.bf-services-evidence-feature__ghost {
  position: absolute;
  inset-inline-end: 28px;
  inset-block-start: 8px;
  color: var(--bf-ink);
  font-size: clamp(6rem, 12vw, 10rem);
  font-weight: 900;
  line-height: 1;
  opacity: .045;
  pointer-events: none;
}

.bf-services-evidence-feature__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--bf-subtle);
  font-size: .78rem;
}

.bf-services-evidence-feature__meta span {
  color: var(--bf-accent-dark);
  font-weight: 900;
}

.bf-services-evidence-feature__meta strong {
  font-weight: 800;
}

.bf-services-evidence-feature__main h3 {
  position: relative;
  max-width: 22ch;
  margin: 12px 0 0;
  color: var(--bf-text);
  font-size: clamp(1.6rem, 2.45vw, 2.25rem);
  line-height: 1.5;
}

.bf-services-evidence-feature__main > p {
  position: relative;
  max-width: 56ch;
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-services-evidence-transform {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 510px);
  margin-top: auto;
  direction: rtl;
}

.bf-services-evidence-transform span {
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid var(--bf-border);
  border-radius: 999px;
  color: var(--bf-ink);
  font-size: .72rem;
  font-weight: 850;
}

.bf-services-evidence-transform i {
  position: relative;
  flex: 1 1 28px;
  height: 1px;
  background: var(--bf-border-strong);
}

.bf-services-evidence-transform i::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bf-accent);
}

.bf-services-evidence-feature__link {
  margin-top: 2px;
  color: var(--bf-ink);
  font-size: .85rem;
}

.bf-services-evidence-feature__support {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--bf-border);
}

.bf-services-evidence-support-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 30px) 4px;
  border-block-end: 1px solid var(--bf-border);
  color: inherit;
  text-decoration: none;
  transition: padding-inline var(--bf-t-fast), background-color var(--bf-t-fast);
}

.bf-services-evidence-support-item:last-child {
  border-block-end: 0;
}

.bf-services-evidence-support-item:hover,
.bf-services-evidence-support-item:focus-visible {
  padding-inline: 12px;
  background: rgba(255,255,255,.54);
}

.bf-services-evidence-support-item > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-services-evidence-support-item > div span {
  color: var(--bf-accent-dark);
  font-size: .75rem;
  font-weight: 900;
}

.bf-services-evidence-support-item > div small {
  color: var(--bf-subtle);
  font-size: .75rem;
  font-weight: 800;
}

.bf-services-evidence-support-item > strong {
  max-width: 42ch;
  color: var(--bf-text);
  font-size: clamp(.96rem, 1.25vw, 1.08rem);
  line-height: 1.8;
}

.bf-services-evidence-support-item em {
  color: var(--bf-subtle);
  font-size: .75rem;
  font-style: normal;
  font-weight: 800;
}

/* Process — controlled-stage rail ------------------------------------------------ */
.bf-services-control-panel {
  position: relative;
  padding: clamp(28px, 3.5vw, 44px);
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 58px rgba(15,23,42,.055);
}

.bf-services-control-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  direction: rtl;
}

.bf-services-control-rail::before {
  content: "";
  position: absolute;
  inset-inline: calc(100% / 12);
  inset-block-start: 20px;
  height: 1px;
  background: var(--bf-border-strong);
  z-index: 0;
}

.bf-services-control-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding-inline: 8px;
  text-align: center;
}

.bf-services-control-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  inset-block-start: 17px;
  width: 10px;
  height: 7px;
  border-radius: 999px;
  background: var(--bf-accent);
  box-shadow: 0 0 0 5px rgba(245,158,11,.09);
}

.bf-services-control-step__number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #0b1220;
  border-radius: 50%;
  background: var(--bf-ink);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 0 0 6px #fff;
}

.bf-services-control-step small {
  margin-top: 8px;
  color: var(--bf-accent-dark);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .09em;
}

.bf-services-control-step strong {
  max-width: 15ch;
  color: var(--bf-text);
  font-size: .87rem;
  line-height: 1.7;
}

.bf-services-control-panel__note {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: clamp(32px, 4vw, 46px);
  padding-block-start: 24px;
  border-block-start: 1px solid var(--bf-border);
}

.bf-services-control-panel__note > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bf-accent-dark);
  font-size: .8rem;
  font-weight: 900;
}

.bf-services-control-panel__note > span::after {
  content: "";
  width: 42px;
  height: 2px;
  background: var(--bf-accent);
}

.bf-services-control-panel__note p {
  max-width: 76ch;
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.95;
}

/* Editorial hierarchy ------------------------------------------------------------- */
.bf-services-editorial {
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(0, 1.35fr);
  gap: clamp(22px, 3vw, 36px);
  align-items: start;
}

.bf-services-editorial__feature {
  position: sticky;
  top: 92px;
  display: flex;
  min-height: 430px;
  flex-direction: column;
  gap: 14px;
  padding: clamp(30px, 3.6vw, 44px);
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15,23,42,.06);
  color: inherit;
  text-decoration: none;
}

.bf-services-editorial__feature:hover,
.bf-services-editorial__feature:focus-visible,
.bf-services-editorial-item:hover,
.bf-services-editorial-item:focus-visible {
  text-decoration: none;
}

.bf-services-editorial__feature::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 76px;
  height: 4px;
  background: var(--bf-accent);
}

.bf-services-editorial__ghost {
  position: absolute;
  inset-inline-end: 18px;
  inset-block-end: -22px;
  color: var(--bf-ink);
  font-size: clamp(7rem, 13vw, 11rem);
  font-weight: 900;
  line-height: 1;
  opacity: .04;
  pointer-events: none;
}

.bf-services-editorial__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-services-editorial__meta span {
  color: var(--bf-accent-dark);
  font-size: .78rem;
  font-weight: 900;
}

.bf-services-editorial__meta small {
  color: var(--bf-subtle);
  font-size: .74rem;
  font-weight: 800;
}

.bf-services-editorial__feature h3 {
  position: relative;
  max-width: 18ch;
  margin: 14px 0 0;
  color: var(--bf-text);
  font-size: clamp(1.55rem, 2.35vw, 2.1rem);
  line-height: 1.55;
}

.bf-services-editorial__feature p {
  position: relative;
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.95;
}

.bf-services-editorial__feature > strong {
  position: relative;
  margin-top: auto;
  color: var(--bf-ink);
  font-size: .86rem;
}

.bf-services-editorial__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-start: 1px solid var(--bf-border);
}

.bf-services-editorial-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "number category"
    "title title"
    "link link";
  align-content: start;
  gap: 8px 10px;
  min-height: 170px;
  padding: clamp(22px, 2.4vw, 30px);
  border-block-end: 1px solid var(--bf-border);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--bf-t-fast), transform var(--bf-t-fast);
}

.bf-services-editorial-item:nth-child(odd) {
  border-inline-end: 1px solid var(--bf-border);
}

.bf-services-editorial-item:hover,
.bf-services-editorial-item:focus-visible {
  background: rgba(255,255,255,.62);
}

.bf-services-editorial-item > span {
  grid-area: number;
  color: var(--bf-accent-dark);
  font-size: .74rem;
  font-weight: 900;
}

.bf-services-editorial-item > small {
  grid-area: category;
  color: var(--bf-subtle);
  font-size: .74rem;
  font-weight: 800;
}

.bf-services-editorial-item h3 {
  grid-area: title;
  margin: 4px 0 0;
  color: var(--bf-text);
  font-size: clamp(.98rem, 1.2vw, 1.1rem);
  line-height: 1.75;
}

.bf-services-editorial-item > strong {
  grid-area: link;
  align-self: end;
  margin-top: auto;
  color: var(--bf-ink);
  font-size: .76rem;
}

@media (max-width: 1050px) {
  .bf-services-evidence-feature,
  .bf-services-editorial {
    grid-template-columns: 1fr;
  }

  .bf-services-evidence-feature__main {
    min-height: 340px;
  }

  .bf-services-evidence-feature__support {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    border: 1px solid var(--bf-border);
    border-radius: 18px;
    overflow: hidden;
  }

  .bf-services-evidence-support-item {
    padding: 22px;
    border-block-end: 0;
    border-inline-end: 1px solid var(--bf-border);
  }

  .bf-services-evidence-support-item:last-child {
    border-inline-end: 0;
  }

  .bf-services-editorial__feature {
    position: relative;
    top: auto;
    min-height: 330px;
  }
}

@media (max-width: 820px) {
  .bf-services-control-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 34px;
  }

  .bf-services-control-rail::before {
    display: none;
  }

  .bf-services-control-step::before {
    content: "";
    position: absolute;
    inset-inline: calc(50% + 20px) auto;
    inset-block-start: 20px;
    width: calc(50% - 20px);
    height: 1px;
    background: var(--bf-border-strong);
  }

  .bf-services-control-step:nth-child(3n)::before {
    display: none;
  }

  .bf-services-control-step:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .bf-services-primary-surface {
    padding: 20px;
    border-radius: 20px;
  }

  .bf-services-primary-surface::before {
    opacity: .2;
    background-size: 44px 44px;
  }

  .bf-services-control-board {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .bf-services-control-card {
    min-height: 0;
    padding: 24px 20px;
    border-inline-end: 0 !important;
    border-block-end: 1px solid var(--bf-border) !important;
  }

  .bf-services-control-card:last-child {
    border-block-end: 0 !important;
  }

  .bf-services-control-card__ghost {
    inset-block-start: -12px;
    font-size: 6.4rem;
  }

  .bf-services-control-card__footer {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }

  .bf-services-micro-flow {
    width: 100%;
  }

  .bf-services-evidence-feature__main {
    min-height: 0;
    padding: 28px 24px;
    border-radius: 20px;
  }

  .bf-services-evidence-feature__main h3 {
    font-size: 1.55rem;
  }

  .bf-services-evidence-transform {
    margin-top: 22px;
  }

  .bf-services-evidence-feature__support {
    grid-template-columns: 1fr;
    border-inline: 0;
    border-radius: 0;
  }

  .bf-services-evidence-support-item {
    padding: 22px 4px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--bf-border);
  }

  .bf-services-evidence-support-item:last-child {
    border-block-end: 0;
  }

  .bf-services-control-panel {
    padding: 26px 20px;
    border-radius: 20px;
  }

  .bf-services-control-rail {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .bf-services-control-step {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "number code"
      "number title";
    justify-items: start;
    gap: 2px 12px;
    min-height: 82px;
    padding: 0;
    text-align: right;
  }

  .bf-services-control-step:not(:last-child)::before {
    display: block;
    inset-inline-start: 20px;
    inset-inline-end: auto;
    inset-block-start: 40px;
    width: 1px;
    height: calc(100% - 4px);
    background: var(--bf-border-strong);
  }

  .bf-services-control-step:nth-child(3n)::before {
    display: block;
  }

  .bf-services-control-step:last-child::before {
    display: none;
  }

  .bf-services-control-step__number {
    grid-area: number;
  }

  .bf-services-control-step small {
    grid-area: code;
    margin-top: 2px;
  }

  .bf-services-control-step strong {
    grid-area: title;
    max-width: none;
    text-align: right;
  }

  .bf-services-control-panel__note {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .bf-services-editorial__feature {
    min-height: 0;
    padding: 28px 24px;
    border-radius: 20px;
  }

  .bf-services-editorial__list {
    grid-template-columns: 1fr;
  }

  .bf-services-editorial-item {
    min-height: 0;
    padding: 22px 4px;
    border-inline-end: 0 !important;
  }
}

/* ========================================================================== 
   /services — Editorial Engineering restraint pass (2026-09-02)
   Refines the visual-device layer: less amber, softer geometry, tighter feature
   proportions, clearer stage hierarchy and looser editorial support content.
   ========================================================================== */

/* Softer local geometry: keep the site engineered without making every boundary
   equally prominent. */
.bf-services-reference {
  --bf-services-line: rgba(174, 187, 205, .54);
  --bf-services-line-strong: rgba(174, 187, 205, .76);
}

.bf-services-reference .bf-services-primary-surface,
.bf-services-reference .bf-services-control-board,
.bf-services-reference .bf-services-evidence-feature__main,
.bf-services-reference .bf-services-control-panel,
.bf-services-reference .bf-services-editorial__feature {
  border-color: var(--bf-services-line);
}

.bf-services-reference .bf-services-control-card:nth-child(odd),
.bf-services-reference .bf-services-control-card:nth-child(-n + 2),
.bf-services-reference .bf-services-control-card__footer,
.bf-services-reference .bf-services-evidence-feature__support,
.bf-services-reference .bf-services-evidence-support-item,
.bf-services-reference .bf-services-control-panel__note,
.bf-services-reference .bf-services-audience-split,
.bf-services-reference .bf-services-audience-item:first-child {
  border-color: var(--bf-services-line);
}

/* 1. Evidence: keep hierarchy but remove excess vertical mass. */
.bf-services-reference .bf-services-evidence-feature__main {
  min-height: 342px;
  gap: 12px;
  padding-block: clamp(28px, 3.2vw, 40px);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .05);
}

.bf-services-reference .bf-services-evidence-feature__ghost {
  opacity: .032;
}

.bf-services-reference .bf-services-evidence-feature__main h3 {
  margin-top: 8px;
}

.bf-services-reference .bf-services-evidence-transform {
  margin-top: clamp(18px, 2vw, 26px);
}

/* 2. Process: Persian stage title dominates; English code and gate are cues. */
.bf-services-reference .bf-services-control-panel {
  box-shadow: 0 16px 44px rgba(15, 23, 42, .045);
}

.bf-services-reference .bf-services-control-rail::before {
  background: var(--bf-services-line-strong);
}

.bf-services-reference .bf-services-control-step:not(:last-child)::after {
  inset-inline-start: -3px;
  inset-block-start: 18px;
  width: 6px;
  height: 4px;
  background: var(--bf-accent);
  box-shadow: none;
  opacity: .8;
}

.bf-services-reference .bf-services-control-step small {
  margin-top: 7px;
  color: var(--bf-subtle);
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .075em;
  opacity: .72;
}

.bf-services-reference .bf-services-control-step strong {
  font-size: .92rem;
  font-weight: 850;
  line-height: 1.68;
}

.bf-services-reference .bf-services-control-panel__note > span {
  color: var(--bf-subtle);
}

.bf-services-reference .bf-services-control-panel__note > span::after {
  width: 34px;
  height: 1px;
}

/* 3. Audience paths: use compact diagrams instead of another list/grid motif. */
.bf-services-reference .bf-services-audience-item {
  gap: 14px;
}

.bf-services-reference .bf-services-audience-item__label {
  color: var(--bf-subtle);
}

.bf-services-audience-flow {
  display: grid;
  grid-template-columns: auto minmax(22px, 1fr) auto minmax(22px, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: min(100%, 520px);
  margin-top: 4px;
  direction: rtl;
}

.bf-services-audience-flow span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--bf-services-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  color: var(--bf-ink);
  font-size: .73rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.bf-services-audience-flow i {
  position: relative;
  height: 1px;
  background: var(--bf-services-line-strong);
}

.bf-services-audience-flow i::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bf-accent);
  transform: translateY(-50%);
}

/* 4. Supporting articles: editorial columns rather than a ruled table. */
.bf-services-reference .bf-services-editorial__list {
  column-gap: clamp(28px, 3.2vw, 44px);
  border-block-start: 0;
}

.bf-services-reference .bf-services-editorial__list--compact {
  grid-template-columns: 1fr;
}

.bf-services-reference .bf-services-editorial-item {
  min-height: 154px;
  padding: clamp(22px, 2.3vw, 28px) 0;
  border-block-end-color: var(--bf-services-line);
}

.bf-services-reference .bf-services-editorial-item:nth-child(odd) {
  border-inline-end: 0;
}

.bf-services-reference .bf-services-editorial-item:hover,
.bf-services-reference .bf-services-editorial-item:focus-visible {
  background: transparent;
  transform: translateY(-1px);
}

.bf-services-reference .bf-services-editorial-item > span {
  color: var(--bf-subtle);
}

.bf-services-reference .bf-services-editorial-item > strong {
  color: var(--bf-muted);
}

/* 5. Amber budget: keep it for section eyebrows, true control points and major
   feature markers; neutralize routine metadata. */
.bf-services-reference .bf-services-control-card__label,
.bf-services-reference .bf-services-evidence-support-item > div span,
.bf-services-reference .bf-services-audience-item__index,
.bf-services-reference .bf-services-editorial__meta small {
  color: var(--bf-subtle);
}

.bf-services-reference .bf-services-control-card__index::after,
.bf-services-reference .bf-services-audience-item__index::after {
  width: 26px;
  height: 1px;
}

.bf-services-reference .bf-services-evidence-feature__main::after,
.bf-services-reference .bf-services-editorial__feature::before {
  height: 3px;
  opacity: .9;
}

/* Keep controlled depth only where it establishes hierarchy. */
.bf-services-reference .bf-services-primary-surface {
  box-shadow: 0 18px 54px rgba(15, 23, 42, .052);
}

.bf-services-reference .bf-services-editorial__feature {
  box-shadow: 0 16px 46px rgba(15, 23, 42, .05);
}

@media (max-width: 1050px) {
  .bf-services-reference .bf-services-evidence-feature__main {
    min-height: 300px;
  }
}

@media (max-width: 760px) {
  .bf-services-reference .bf-services-evidence-feature__main {
    min-height: 0;
    padding-block: 26px;
  }

  .bf-services-audience-flow {
    grid-template-columns: 1fr;
    gap: 5px;
    width: 100%;
  }

  .bf-services-audience-flow i {
    justify-self: center;
    width: 1px;
    height: 14px;
  }

  .bf-services-audience-flow i::after {
    inset-inline-start: 50%;
    top: auto;
    bottom: -1px;
    transform: translateX(50%);
  }

  .bf-services-reference .bf-services-editorial__list {
    column-gap: 0;
  }

  .bf-services-reference .bf-services-editorial-item {
    padding-block: 22px;
  }
}

/* Complete the softer-line pass on the remaining structural elements. */
.bf-services-reference__comparison > .bf-container,
.bf-services-reference__process > .bf-container,
.bf-services-reference .bf-services-boundary-matrix,
.bf-services-reference .bf-services-boundary-matrix__row:not(:last-child),
.bf-services-reference .bf-services-boundary-matrix__row > *:not(:last-child),
.bf-services-reference .bf-services-boundary-matrix__header span:not(:last-child) {
  border-color: var(--bf-services-line);
}

@media (max-width: 820px) {
  .bf-services-reference .bf-services-control-step::before,
  .bf-services-reference .bf-services-control-step:not(:last-child)::before {
    background: var(--bf-services-line-strong);
  }
}

/* ========================================================================== 
   /services — Amber identity rebalance (2026-09-02)
   Restores BIMFlow's amber as a meaningful control/accent signal without
   undoing the restraint pass. Secondary explanatory metadata stays muted.
   ========================================================================== */

/* Service board: restore amber to the service/category signal and technical
   marker, while keeping body metadata restrained. */
.bf-services-reference .bf-services-control-card__label {
  color: var(--bf-accent-dark);
}

.bf-services-reference .bf-services-control-card__index::after,
.bf-services-reference .bf-services-audience-item__index::after {
  width: 30px;
  height: 2px;
  background: var(--bf-accent);
}

/* Evidence: featured and supporting case labels are purposeful hierarchy cues. */
.bf-services-reference .bf-services-evidence-feature__main::after,
.bf-services-reference .bf-services-editorial__feature::before {
  height: 4px;
  opacity: 1;
}

.bf-services-reference .bf-services-evidence-support-item > div span {
  color: var(--bf-accent-dark);
}

/* Audience paths: role labels and route numbers act as navigation/control cues. */
.bf-services-reference .bf-services-audience-item__index,
.bf-services-reference .bf-services-audience-item__label {
  color: var(--bf-accent-dark);
}

/* Process: keep English codes quiet, but make actual gates and the decision
   logic marker clearly amber again. */
.bf-services-reference .bf-services-control-step:not(:last-child)::after {
  background: var(--bf-accent);
  opacity: 1;
}

.bf-services-reference .bf-services-control-panel__note > span {
  color: var(--bf-accent-dark);
}

.bf-services-reference .bf-services-control-panel__note > span::after {
  height: 2px;
  background: var(--bf-accent);
}

/* Editorial hierarchy: article numbers are navigational markers; category text
   remains muted so the accent does not flood the list. */
.bf-services-reference .bf-services-editorial-item > span {
  color: var(--bf-accent-dark);
}

/* Primary inline action cues get the accent; descriptive metadata remains navy. */
.bf-services-reference .bf-services-control-card__footer > span,
.bf-services-reference .bf-services-evidence-feature__link,
.bf-services-reference .bf-services-audience-item__link,
.bf-services-reference .bf-services-editorial__feature > strong {
  color: var(--bf-accent-dark);
}

.bf-services-reference .bf-services-control-card:hover .bf-services-control-card__footer > span,
.bf-services-reference .bf-services-control-card:focus-visible .bf-services-control-card__footer > span,
.bf-services-reference .bf-services-evidence-feature__main:hover .bf-services-evidence-feature__link,
.bf-services-reference .bf-services-evidence-feature__main:focus-visible .bf-services-evidence-feature__link,
.bf-services-reference .bf-services-audience-item:hover .bf-services-audience-item__link,
.bf-services-reference .bf-services-audience-item:focus-visible .bf-services-audience-item__link,
.bf-services-reference .bf-services-editorial__feature:hover > strong,
.bf-services-reference .bf-services-editorial__feature:focus-visible > strong {
  color: var(--bf-accent-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* ========================================================================== 
   /services — Reference-page final hierarchy pass (2026-09-02)
   Converts the service-boundary table into transformation paths and completes
   the final scale/density refinements without changing the established grammar.
   ========================================================================== */

/* Standard section emphasis: keep primary service/evidence chapters larger,
   but let supporting chapters give more visual authority to their content. */
.bf-services-reference .bf-services-section-header--standard .bf-section-header__title {
  font-size: clamp(1.42rem, 2.22vw, 2.08rem);
  line-height: 1.28;
}

.bf-services-reference .bf-services-section-header--standard .bf-section-header__intro {
  max-width: 700px;
}

/* Service boundary — four transformation paths, not a spreadsheet. */
.bf-services-boundary-paths {
  overflow: hidden;
  border: 1px solid var(--bf-services-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 14px 42px rgba(15, 23, 42, .032);
}

.bf-services-boundary-path {
  display: grid;
  grid-template-columns:
    minmax(142px, .72fr)
    minmax(0, 1fr)
    34px
    minmax(0, 1fr)
    34px
    minmax(0, 1fr);
  align-items: center;
  min-height: 118px;
  padding: 18px clamp(20px, 2.6vw, 32px);
  direction: rtl;
}

.bf-services-boundary-path:not(:last-child) {
  border-block-end: 1px solid var(--bf-services-line);
}

.bf-services-boundary-path__identity {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding-inline-end: 4px;
}

.bf-services-boundary-path__identity span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--bf-accent-dark);
  font-size: .72rem;
  font-weight: 900;
}

.bf-services-boundary-path__identity span::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--bf-accent);
}

.bf-services-boundary-path__identity strong {
  color: var(--bf-text);
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
  line-height: 1.6;
}

.bf-services-boundary-path__stage {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.bf-services-boundary-path__stage small {
  color: var(--bf-subtle);
  font-size: .7rem;
  font-weight: 800;
}

.bf-services-boundary-path__stage strong {
  max-width: 28ch;
  color: var(--bf-muted);
  font-size: clamp(.88rem, 1vw, .96rem);
  font-weight: 650;
  line-height: 1.75;
}

.bf-services-boundary-path__stage--intervention strong {
  color: var(--bf-text);
  font-weight: 800;
}

.bf-services-boundary-path__stage--outcome small {
  color: var(--bf-accent-dark);
}

.bf-services-boundary-path__stage--outcome strong {
  color: var(--bf-ink);
  font-weight: 850;
}

.bf-services-boundary-path__connector {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  background: var(--bf-services-line-strong);
}

.bf-services-boundary-path__connector::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bf-accent);
  transform: translate(50%, -50%);
}

/* Process: same component, less vertical mass. */
.bf-services-reference .bf-services-control-panel {
  padding: clamp(24px, 3vw, 36px);
}

.bf-services-reference .bf-services-control-step {
  gap: 5px;
}

.bf-services-reference .bf-services-control-step small {
  margin-top: 5px;
}

.bf-services-reference .bf-services-control-panel__note {
  gap: 20px;
  margin-top: clamp(24px, 3vw, 32px);
  padding-block-start: 18px;
}

.bf-services-reference .bf-services-control-panel__note p {
  line-height: 1.86;
}

/* Editorial feature: preserve hierarchy, remove excess lower-half air. */
.bf-services-reference .bf-services-editorial__feature {
  min-height: 378px;
  gap: 12px;
  padding-block: clamp(26px, 3vw, 36px);
}

.bf-services-reference .bf-services-editorial__feature h3 {
  margin-top: 9px;
}

.bf-services-reference .bf-services-editorial__feature p {
  line-height: 1.88;
}

@media (max-width: 1050px) {
  .bf-services-reference .bf-services-editorial__feature {
    min-height: 292px;
  }
}

@media (max-width: 900px) {
  .bf-services-boundary-path {
    grid-template-columns: minmax(125px, .7fr) minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
    padding-inline: 20px;
  }
}

@media (max-width: 760px) {
  .bf-services-reference .bf-services-section-header--standard .bf-section-header__title {
    font-size: clamp(1.28rem, 6.4vw, 1.72rem);
  }

  .bf-services-boundary-paths {
    border-radius: 20px;
  }

  .bf-services-boundary-path {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding: 24px 20px;
  }

  .bf-services-boundary-path__identity {
    margin-bottom: 4px;
  }

  .bf-services-boundary-path__stage {
    gap: 3px;
  }

  .bf-services-boundary-path__stage strong {
    max-width: none;
  }

  .bf-services-boundary-path__connector {
    justify-self: center;
    width: 1px;
    height: 16px;
  }

  .bf-services-boundary-path__connector::after {
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(50%, -50%);
  }

  .bf-services-reference .bf-services-control-panel {
    padding: 22px 18px;
  }

  .bf-services-reference .bf-services-control-step {
    min-height: 74px;
  }

  .bf-services-reference .bf-services-control-panel__note {
    margin-top: 20px;
    padding-block-start: 16px;
  }

  .bf-services-reference .bf-services-editorial__feature {
    min-height: 0;
    padding-block: 24px;
  }
}

/* ========================================================================== 
   Supplied core-service hero artwork (2026-09-02)
   The new artwork already contains its intended negative space and visual
   language. Show it directly on desktop/tablet: no inherited image mask,
   white fade, copy halo, or legacy pentagon overlays.
   ========================================================================== */
@media (min-width: 761px) {
  .bf-bim-consultancy-home-hero,
  .bf-service-home-hero--implementation,
  .bf-service-home-hero--optimization {
    background: #0d1726 !important;
  }

  .bf-service-home-hero--training {
    background: #f7f8fa !important;
  }

  .bf-bim-consultancy-home-hero > .bf-bim-consultancy-home-hero__media,
  .bf-service-home-hero--implementation > .bf-service-home-hero__media--implementation,
  .bf-service-home-hero--optimization > .bf-service-home-hero__media--optimization,
  .bf-service-home-hero--training > .bf-service-home-hero__media--training {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 1 !important;
  }

  .bf-bim-consultancy-home-hero > .bf-bim-consultancy-home-hero__media .bf-home-gateway-hero__media-image,
  .bf-service-home-hero--implementation > .bf-service-home-hero__media--implementation .bf-home-gateway-hero__media-image,
  .bf-service-home-hero--optimization > .bf-service-home-hero__media--optimization .bf-home-gateway-hero__media-image,
  .bf-service-home-hero--training > .bf-service-home-hero__media--training .bf-home-gateway-hero__media-image {
    object-position: center center !important;
    filter: none !important;
  }

  .bf-bim-consultancy-home-hero::before,
  .bf-bim-consultancy-home-hero::after,
  .bf-service-home-hero--implementation::before,
  .bf-service-home-hero--implementation::after,
  .bf-service-home-hero--optimization::before,
  .bf-service-home-hero--optimization::after,
  .bf-service-home-hero--training::before,
  .bf-service-home-hero--training::after,
  .bf-bim-consultancy-home-hero .bf-home-gateway-hero__content::before,
  .bf-service-home-hero--implementation .bf-home-gateway-hero__content::before,
  .bf-service-home-hero--optimization .bf-home-gateway-hero__content::before,
  .bf-service-home-hero--training .bf-home-gateway-hero__content::before {
    content: none !important;
    display: none !important;
    background: none !important;
    filter: none !important;
  }

  .bf-bim-consultancy-home-hero .bf-home-gateway-hero__lead,
  .bf-bim-consultancy-home-hero .bf-home-gateway-hero__actions,
  .bf-service-home-hero--implementation .bf-home-gateway-hero__lead,
  .bf-service-home-hero--implementation .bf-home-gateway-hero__actions,
  .bf-service-home-hero--optimization .bf-home-gateway-hero__lead,
  .bf-service-home-hero--optimization .bf-home-gateway-hero__actions,
  .bf-service-home-hero--training .bf-home-gateway-hero__lead,
  .bf-service-home-hero--training .bf-home-gateway-hero__actions {
    transform: none !important;
  }

  .bf-bim-consultancy-home-hero .bf-home-gateway-hero__title,
  .bf-service-home-hero--implementation .bf-home-gateway-hero__title,
  .bf-service-home-hero--optimization .bf-home-gateway-hero__title {
    color: #fff !important;
  }

  .bf-bim-consultancy-home-hero .bf-home-gateway-hero__lead,
  .bf-service-home-hero--implementation .bf-home-gateway-hero__lead,
  .bf-service-home-hero--optimization .bf-home-gateway-hero__lead {
    color: rgba(255, 255, 255, 0.84) !important;
  }

  .bf-bim-consultancy-home-hero .bf-home-gateway-hero__services-link,
  .bf-service-home-hero--implementation .bf-home-gateway-hero__services-link,
  .bf-service-home-hero--optimization .bf-home-gateway-hero__services-link {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  .bf-bim-consultancy-home-hero .bf-home-gateway-hero__services-link:hover,
  .bf-service-home-hero--implementation .bf-home-gateway-hero__services-link:hover,
  .bf-service-home-hero--optimization .bf-home-gateway-hero__services-link:hover {
    color: var(--bf-accent) !important;
  }

  .bf-bim-consultancy-home-hero .bf-home-gateway-hero__eyebrow,
  .bf-service-home-hero--implementation .bf-home-gateway-hero__eyebrow,
  .bf-service-home-hero--optimization .bf-home-gateway-hero__eyebrow {
    color: var(--bf-accent) !important;
  }

  .bf-service-home-hero--training .bf-home-gateway-hero__title,
  .bf-service-home-hero--training .bf-home-gateway-hero__services-link {
    color: var(--bf-text) !important;
  }

  .bf-service-home-hero--training .bf-home-gateway-hero__lead {
    color: var(--bf-muted) !important;
  }
}

/* ========================================================================== 
   Audience service hero artwork (2026-09-02)
   /services/for-clients
   /services/for-consultants-contractors
   The supplied 1672x941 compositions already reserve the right side for RTL
   copy, so use them as the full-bleed hero layer rather than inside a card.
   ========================================================================== */
.bf-audience-landing--home-hero {
  margin-block-start: -18px;
}

.bf-audience-home-hero {
  position: relative;
}

.bf-audience-home-hero__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.bf-audience-home-hero__content {
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .bf-audience-landing--home-hero {
    margin-block-start: -12px;
  }
}

@media (min-width: 761px) {
  .bf-audience-home-hero--clients,
  .bf-audience-home-hero--consultants-contractors {
    background: #0d1726 !important;
  }

  .bf-audience-home-hero--clients > .bf-audience-home-hero__media--clients,
  .bf-audience-home-hero--consultants-contractors > .bf-audience-home-hero__media--consultants-contractors {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    opacity: 1 !important;
  }

  .bf-audience-home-hero--clients > .bf-audience-home-hero__media--clients .bf-home-gateway-hero__media-image,
  .bf-audience-home-hero--consultants-contractors > .bf-audience-home-hero__media--consultants-contractors .bf-home-gateway-hero__media-image {
    object-position: center center !important;
    filter: none !important;
  }

  .bf-audience-home-hero--clients::before,
  .bf-audience-home-hero--clients::after,
  .bf-audience-home-hero--consultants-contractors::before,
  .bf-audience-home-hero--consultants-contractors::after,
  .bf-audience-home-hero--clients .bf-home-gateway-hero__content::before,
  .bf-audience-home-hero--consultants-contractors .bf-home-gateway-hero__content::before {
    content: none !important;
    display: none !important;
    background: none !important;
    filter: none !important;
  }

  .bf-audience-home-hero--clients .bf-home-gateway-hero__title,
  .bf-audience-home-hero--consultants-contractors .bf-home-gateway-hero__title {
    color: #fff !important;
  }

  .bf-audience-home-hero--clients .bf-home-gateway-hero__lead,
  .bf-audience-home-hero--consultants-contractors .bf-home-gateway-hero__lead {
    color: rgba(255, 255, 255, 0.84) !important;
  }

  .bf-audience-home-hero--clients .bf-home-gateway-hero__eyebrow,
  .bf-audience-home-hero--consultants-contractors .bf-home-gateway-hero__eyebrow {
    color: var(--bf-accent) !important;
  }
}


/* Contact hero starts flush against the AppBar.
   The shared .bf-page adds 18px desktop / 12px mobile top padding, which
   appeared as a white strip above the full-viewport contact artwork. */
.bf-page--contact {
  padding-top: 0 !important;
}

/* ========================================================================== */
/* Contact + featured insight hero artwork (2026-09-02)                       */
/* Uses the supplied BIMFlow artwork directly, with responsive WebP sources.  */
/* ========================================================================== */
section.bf-section-compact.bf-contact-image-hero {
  position: relative;
  isolation: isolate;
  width: 100vw !important;
  max-width: none !important;
  min-height: calc(100vh - var(--bf-appbar-h));
  min-height: calc(100svh - var(--bf-appbar-h));
  margin-inline: calc(50% - 50vw) !important;
  padding: 0 !important;
  overflow: hidden;
  background: #f4f5f7;
}

.bf-contact-image-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.bf-contact-image-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.bf-contact-image-hero__shell {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--bf-appbar-h));
  min-height: calc(100svh - var(--bf-appbar-h));
}

.bf-contact-image-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .82fr);
  align-items: center;
  gap: clamp(30px, 5vw, 72px);
  width: 100%;
  padding-block: clamp(52px, 7vw, 88px);
}

.bf-contact-image-hero__content {
  display: grid;
  gap: 1rem;
  max-width: 660px;
  justify-self: start;
  text-align: right;
}

.bf-contact-image-hero__content .bf-page-title {
  margin: 0;
  width: max-content;
  max-width: 100%;
  color: var(--bf-text);
  font-size: clamp(1.72rem, 2.6vw, 2.76rem) !important;
  line-height: 1.55;
  text-wrap: pretty;
}

.bf-contact-image-hero__title-line {
  display: block;
  white-space: nowrap;
}

.bf-contact-image-hero__content .bf-lead {
  margin: 0;
  max-width: 46rem;
  color: var(--bf-muted);
  font-size: clamp(.88rem, 1.12vw, 1rem);
  line-height: 2;
}

.bf-contact-image-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .75rem;
  margin-top: .6rem;
}

.bf-contact-image-hero__details {
  width: min(100%, 470px);
  justify-self: end;
}

.bf-contact-image-hero__details .bf-contact-hero-card {
  background: rgba(11, 18, 32, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* All insight/article detail pages use the shared full-viewport article hero,
   so remove MainLayout's shared top padding on /insights/* routes. */
.bf-page--insight-hero {
  padding-top: 0 !important;
}

/* Shared article artwork: dark panoramic frame with intentionally empty
   central space for each insight headline. */
section.bf-section-compact.bf-insight-template__hero-section--article-background {
  position: relative;
  isolation: isolate;
  width: 100vw !important;
  max-width: none !important;
  min-height: calc(100vh - var(--bf-appbar-h));
  min-height: calc(100svh - var(--bf-appbar-h));
  margin-inline: calc(50% - 50vw) !important;
  padding: 0 !important;
  overflow: hidden;
  background: #0b1220;
}

.bf-insight-feature-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.bf-insight-feature-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.bf-insight-template__hero-section--article-background::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 10, 18, .08), rgba(4, 10, 18, .14));
}

.bf-insight-template__hero-section--article-background .bf-insight-template__header {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  min-height: calc(100vh - var(--bf-appbar-h));
  min-height: calc(100svh - var(--bf-appbar-h));
  padding: clamp(46px, 6vw, 82px) 1rem;
}

.bf-insight-template__hero-section--article-background .bf-insight-template__title {
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .24);
}

.bf-insight-template__hero-section--article-background .bf-insight-template__lead {
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}

.bf-insight-template__hero-section--article-background .breadcrumbs a,
.bf-insight-template__hero-section--article-background .bc-sep {
  color: rgba(255, 255, 255, .78);
}

.bf-insight-template__hero-section--article-background .bf-insight-template__type,
.bf-insight-template__hero-section--article-background .bf-insight-template__meta {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(11, 18, 32, .56);
  color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 960px) {
  .bf-contact-image-hero__shell {
    min-height: auto;
  }

  .bf-contact-image-hero__layout {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 48px;
  }

  .bf-contact-image-hero__content,
  .bf-contact-image-hero__details {
    width: min(100%, 680px);
    max-width: 680px;
    justify-self: center;
  }

  .bf-contact-image-hero__content {
    text-align: right;
  }

  .bf-contact-image-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .62);
  }
}

@media (max-width: 700px) {
  .bf-contact-image-hero__layout {
    padding-block: 34px;
  }

  .bf-contact-image-hero__content {
    gap: .8rem;
  }

  .bf-contact-image-hero__content .bf-page-title {
    width: auto;
    max-width: 100%;
    font-size: clamp(1.55rem, 8vw, 2.2rem) !important;
  }

  .bf-contact-image-hero__title-line {
    white-space: normal;
  }

  .bf-contact-image-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .bf-contact-image-hero__actions .bf-button {
    width: 100%;
  }

  .bf-insight-template__hero-section--article-background .bf-insight-template__header {
    padding: 34px 1rem;
  }

  .bf-insight-feature-hero__image {
    object-position: 50% center;
  }
}


/* ==========================================================================
   Homepage hero — supplied 2026-09-02 artwork, no CSS fade/gradient overlay
   The artwork already contains the intended dark-to-light composition.
   ========================================================================== */
.bf-homepage-hero::before,
.bf-homepage-hero::after,
.bf-homepage-hero .bf-home-gateway-hero__media::before,
.bf-homepage-hero .bf-home-gateway-hero__media::after,
.bf-homepage-hero .bf-home-gateway-hero__content::before,
.bf-homepage-hero .bf-home-gateway-hero__content::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.bf-homepage-hero > .bf-home-gateway-hero__media,
.bf-homepage-hero > .bf-home-gateway-hero__media .bf-home-gateway-hero__media-image {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
  filter: none !important;
}

.bf-homepage-hero > .bf-home-gateway-hero__media .bf-home-gateway-hero__media-image {
  object-fit: cover;
  object-position: center center;
}

/* ========================================================================== 
   Services / Experiences / Problem-solving heroes — supplied artwork only
   2026-09-02

   These three supplied images already contain their own dark negative-space
   composition. Show them as full-bleed artwork exactly as provided: no
   gradient fade, no white cutout, no mask, no clip-path and no decorative
   pentagon/halo layer.
   ========================================================================== */
.bf-services-reference__hero,
.bf-experiences-index__hero,
.bf-experience-home-hero--problem {
  position: relative !important;
  overflow: hidden !important;
  background: #0b1220 !important;
}

.bf-services-reference__hero > .bf-services-hero__media,
.bf-experiences-index__hero > .bf-experiences-hero__media,
.bf-experience-home-hero--problem > .bf-experience-problem-hero__media {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  filter: none !important;
}

.bf-services-reference__hero > .bf-services-hero__media .bf-home-gateway-hero__media-image,
.bf-experiences-index__hero > .bf-experiences-hero__media .bf-home-gateway-hero__media-image,
.bf-experience-home-hero--problem > .bf-experience-problem-hero__media .bf-home-gateway-hero__media-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  filter: none !important;
}

/* Remove every inherited hero fade/cut/readability shape on these pages. */
.bf-services-reference__hero::before,
.bf-services-reference__hero::after,
.bf-experiences-index__hero::before,
.bf-experiences-index__hero::after,
.bf-experience-home-hero--problem::before,
.bf-experience-home-hero--problem::after,
.bf-services-reference__hero .bf-home-gateway-hero__content::before,
.bf-experiences-index__hero .bf-home-gateway-hero__content::before,
.bf-experience-home-hero--problem .bf-home-gateway-hero__content::before,
.bf-services-reference__hero .bf-home-gateway-hero__media::before,
.bf-services-reference__hero .bf-home-gateway-hero__media::after,
.bf-experiences-index__hero .bf-home-gateway-hero__media::before,
.bf-experiences-index__hero .bf-home-gateway-hero__media::after,
.bf-experience-home-hero--problem .bf-experience-home-hero__media::before,
.bf-experience-home-hero--problem .bf-experience-home-hero__media::after {
  content: none !important;
  display: none !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  filter: none !important;
}

/* The new artwork uses dark right-side negative space for the page copy. */
.bf-services-reference__hero .bf-home-gateway-hero__title,
.bf-experiences-index__hero .bf-home-gateway-hero__title,
.bf-experience-home-hero--problem .bf-home-gateway-hero__title,
.bf-services-reference__hero .bf-home-gateway-hero__services-link,
.bf-experiences-index__hero .bf-home-gateway-hero__services-link,
.bf-experience-home-hero--problem .bf-home-gateway-hero__services-link {
  color: #fff !important;
}

.bf-services-reference__hero .bf-home-gateway-hero__lead,
.bf-experiences-index__hero .bf-home-gateway-hero__lead,
.bf-experience-home-hero--problem .bf-home-gateway-hero__lead {
  color: rgba(255, 255, 255, 0.84) !important;
}

.bf-services-reference__hero .bf-home-gateway-hero__services-link:hover,
.bf-experiences-index__hero .bf-home-gateway-hero__services-link:hover,
.bf-experience-home-hero--problem .bf-home-gateway-hero__services-link:hover {
  color: var(--bf-accent) !important;
}

@media (max-width: 760px) {
  .bf-services-reference__hero > .bf-services-hero__media .bf-home-gateway-hero__media-image,
  .bf-experiences-index__hero > .bf-experiences-hero__media .bf-home-gateway-hero__media-image,
  .bf-experience-home-hero--problem > .bf-experience-problem-hero__media .bf-home-gateway-hero__media-image {
    object-position: 32% center !important;
  }
}

/* ==========================================================================\n   Final direct-artwork hero treatment — 2026-09-02\n   New supplied artwork for client-side experience, optimization experience,\n   training experience and the Insights index already contains the intended\n   empty copy field. Do not add inherited homepage fades, masks, cuts or halos.\n   ========================================================================== */
.bf-experience-home-hero--client-side,
.bf-experience-home-hero--optimization {
  background: #fff !important;
}

.bf-experience-home-hero--training,
.bf-insights-visual-hero {
  background: #0b1520 !important;
}

.bf-experience-home-hero--client-side > .bf-experience-home-hero__media,
.bf-experience-home-hero--optimization > .bf-experience-home-hero__media,
.bf-experience-home-hero--training > .bf-experience-home-hero__media,
.bf-insights-visual-hero > .bf-insights-visual-hero__media,
.bf-experience-home-hero--client-side > .bf-experience-home-hero__media .bf-home-gateway-hero__media-image,
.bf-experience-home-hero--optimization > .bf-experience-home-hero__media .bf-home-gateway-hero__media-image,
.bf-experience-home-hero--training > .bf-experience-home-hero__media .bf-home-gateway-hero__media-image,
.bf-insights-visual-hero > .bf-insights-visual-hero__media .bf-home-gateway-hero__media-image {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.bf-experience-home-hero--client-side > .bf-experience-home-hero__media .bf-home-gateway-hero__media-image,
.bf-experience-home-hero--optimization > .bf-experience-home-hero__media .bf-home-gateway-hero__media-image,
.bf-experience-home-hero--training > .bf-experience-home-hero__media .bf-home-gateway-hero__media-image,
.bf-insights-visual-hero > .bf-insights-visual-hero__media .bf-home-gateway-hero__media-image {
  object-position: center center !important;
}

.bf-experience-home-hero--client-side::before,
.bf-experience-home-hero--client-side::after,
.bf-experience-home-hero--optimization::before,
.bf-experience-home-hero--optimization::after,
.bf-experience-home-hero--training::before,
.bf-experience-home-hero--training::after,
.bf-insights-visual-hero::before,
.bf-insights-visual-hero::after,
.bf-experience-home-hero--client-side .bf-experience-home-hero__content::before,
.bf-experience-home-hero--client-side .bf-experience-home-hero__content::after,
.bf-experience-home-hero--optimization .bf-experience-home-hero__content::before,
.bf-experience-home-hero--optimization .bf-experience-home-hero__content::after,
.bf-experience-home-hero--training .bf-experience-home-hero__content::before,
.bf-experience-home-hero--training .bf-experience-home-hero__content::after,
.bf-insights-visual-hero .bf-home-gateway-hero__content::before,
.bf-insights-visual-hero .bf-home-gateway-hero__content::after {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
}

/* Light supplied artwork: keep copy dark in the clean white right-side field. */
.bf-experience-home-hero--client-side .bf-home-gateway-hero__title,
.bf-experience-home-hero--optimization .bf-home-gateway-hero__title {
  color: var(--bf-text) !important;
}

.bf-experience-home-hero--client-side .bf-home-gateway-hero__lead,
.bf-experience-home-hero--optimization .bf-home-gateway-hero__lead {
  color: #1f2937 !important;
  font-weight: 500 !important;
}

.bf-experience-home-hero--client-side .bf-home-gateway-hero__services-link,
.bf-experience-home-hero--optimization .bf-home-gateway-hero__services-link {
  color: var(--bf-text) !important;
}

/* Dark supplied artwork: use light copy directly on the intentional empty field. */
.bf-experience-home-hero--training .bf-home-gateway-hero__title,
.bf-insights-visual-hero .bf-home-gateway-hero__title {
  color: #fff !important;
}

.bf-experience-home-hero--training .bf-home-gateway-hero__lead,
.bf-insights-visual-hero .bf-home-gateway-hero__lead {
  color: rgba(255, 255, 255, 0.84) !important;
}

.bf-experience-home-hero--training .bf-home-gateway-hero__services-link,
.bf-insights-visual-hero .bf-home-gateway-hero__services-link {
  color: rgba(255, 255, 255, 0.94) !important;
}

.bf-experience-home-hero--training .bf-home-gateway-hero__services-link:hover,
.bf-insights-visual-hero .bf-home-gateway-hero__services-link:hover {
  color: var(--bf-accent) !important;
}

/* ==========================================================================
   Experience implementation hero refresh (2026-09-02)
   Use the newly supplied artwork directly as a full-bleed background, with no
   gradient fill, veil, clip-path, mask, cut shape, or decorative pentagons.
   ========================================================================== */
.bf-experience-home-hero--implementation {
  position: relative !important;
  overflow: hidden !important;
  background: #101923 !important;
}

.bf-experience-home-hero--implementation > .bf-experience-home-hero__media,
.bf-experience-home-hero--implementation > .bf-home-gateway-hero__media,
.bf-experience-home-hero--implementation > .bf-experience-home-hero__media .bf-home-gateway-hero__media-image,
.bf-experience-home-hero--implementation > .bf-home-gateway-hero__media .bf-home-gateway-hero__media-image {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.bf-experience-home-hero--implementation > .bf-experience-home-hero__media .bf-home-gateway-hero__media-image,
.bf-experience-home-hero--implementation > .bf-home-gateway-hero__media .bf-home-gateway-hero__media-image {
  object-position: center center !important;
}

.bf-experience-home-hero--implementation::before,
.bf-experience-home-hero--implementation::after,
.bf-experience-home-hero--implementation .bf-home-gateway-hero__media::before,
.bf-experience-home-hero--implementation .bf-home-gateway-hero__media::after,
.bf-experience-home-hero--implementation .bf-experience-home-hero__content::before {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
}

.bf-experience-home-hero--implementation .bf-home-gateway__hero-shell,
.bf-experience-home-hero--implementation .bf-experience-home-hero__content {
  position: relative !important;
  z-index: 2 !important;
}

.bf-experience-home-hero--implementation .bf-home-gateway-hero__title,
.bf-experience-home-hero--implementation .bf-home-gateway-hero__lead,
.bf-experience-home-hero--implementation .bf-home-gateway-hero__services-link,
.bf-experience-home-hero--implementation .bf-home-gateway-hero__eyebrow {
  color: #ffffff !important;
}

.bf-experience-home-hero--implementation .bf-home-gateway-hero__lead {
  color: rgba(255, 255, 255, 0.84) !important;
}

.bf-experience-home-hero--implementation .bf-home-gateway-hero__services-link:hover {
  color: #f59e0b !important;
}


/* BIM implementation: merge the former authority + deliverables blocks into
   one compact outcome section with a single message. */
.bf-service-detail--implementation .bf-implementation-outcome .bf-section-header {
  margin-bottom: 0;
}

.bf-service-detail--implementation .bf-implementation-deliverable-rail--compact {
  margin-top: clamp(18px, 2.2vw, 26px);
}

.bf-service-detail--implementation .bf-implementation-deliverable-rail--compact .bf-implementation-deliverable-rail__item {
  min-height: 132px;
  padding: 18px 20px;
}

.bf-service-detail--implementation .bf-implementation-deliverable-rail--compact .bf-implementation-deliverable-rail__item > span {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
}

.bf-service-detail--implementation .bf-implementation-outcome__training-note {
  width: min(100%, 980px);
  margin: clamp(18px, 2.4vw, 28px) auto 0;
  color: var(--bf-muted);
  font-size: clamp(.94rem, 1.15vw, 1.02rem);
  line-height: 2;
  text-align: center;
  text-wrap: pretty;
}

.bf-service-detail--implementation .bf-implementation-outcome__training-note a {
  color: var(--bf-accent-dark);
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 720px) {
  .bf-service-detail--implementation .bf-implementation-outcome__training-note {
    text-align: right;
  }
}

/* ========================================================================== 
   /services/bim-consultancy — Visual Grammar v1.1 propagation (2026-09-02)
   Reference language: /services
   Surface × Structure × Transition + Emphasis + Visual Device
   ========================================================================== */

.bf-consultancy-reference {
  background: transparent;
}

.bf-consultancy-reference .bf-section-header--center {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.bf-consultancy-reference .bf-section-header--center :where(
  .bf-section-header__eyebrow,
  .bf-section-header__title,
  .bf-section-header__intro
) {
  margin-inline: auto;
  text-align: center;
  text-align-last: center;
}

.bf-consultancy-reference .bf-section-header__intro {
  max-width: 72ch;
}

.bf-consultancy-section-header--standard .bf-section-header__title {
  font-size: clamp(1.42rem, 2.15vw, 2.08rem);
}

/* Primary scope — one contained capability control board -------------------- */
.bf-consultancy-scope-surface {
  position: relative;
  overflow: hidden;
  margin-top: clamp(26px, 3.4vw, 42px);
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(174, 187, 205, .72);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 64px rgba(15,23,42,.06);
}

.bf-consultancy-scope-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    linear-gradient(rgba(174,187,205,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174,187,205,.14) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.52), transparent 38%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.52), transparent 38%);
}

.bf-consultancy-scope-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: rgba(255,255,255,.82);
}

.bf-consultancy-scope-item {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: 320px;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
  padding: clamp(24px, 2.5vw, 32px);
}

.bf-consultancy-scope-item:not(:nth-child(3n)) {
  border-inline-end: 1px solid var(--bf-border);
}

.bf-consultancy-scope-item:nth-child(-n + 3) {
  border-block-end: 1px solid var(--bf-border);
}

.bf-consultancy-scope-item__ghost {
  position: absolute;
  z-index: -1;
  inset-inline-end: 14px;
  inset-block-start: -18px;
  color: var(--bf-ink);
  font-size: clamp(5rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.06em;
  opacity: .045;
  pointer-events: none;
}

.bf-consultancy-scope-item__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-consultancy-scope-item__index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bf-ink);
  font-size: .73rem;
  font-weight: 900;
}

.bf-consultancy-scope-item__index::after {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 999px;
  background: var(--bf-accent);
}

.bf-consultancy-scope-item__label {
  color: var(--bf-accent-dark);
  font-size: .75rem;
  font-weight: 900;
}

.bf-consultancy-scope-item h3 {
  margin: 2px 0 0;
  color: var(--bf-text);
  font-size: clamp(1.06rem, 1.35vw, 1.26rem);
  line-height: 1.7;
}

.bf-consultancy-scope-item > p {
  margin: 0;
  color: var(--bf-muted);
  font-size: .88rem;
  line-height: 1.9;
  text-align: right;
}

.bf-consultancy-scope-item .bf-services-micro-flow {
  width: 100%;
  margin-block: 2px 3px;
}

.bf-consultancy-scope-item__outcome {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding-block-start: 13px;
  border-block-start: 1px solid rgba(216,224,236,.84);
}

.bf-consultancy-scope-item__outcome strong {
  color: var(--bf-accent-dark);
  font-size: .72rem;
  font-weight: 900;
}

.bf-consultancy-scope-item__outcome span {
  color: var(--bf-subtle);
  font-size: .78rem;
  line-height: 1.75;
}

/* Quiet authority — decision/control rail instead of another dark band ------ */
.bf-consultancy-reference__role > .bf-container,
.bf-consultancy-reference__related > .bf-container {
  position: relative;
  padding-block-start: clamp(46px, 5.5vw, 66px);
  border-block-start: 1px solid var(--bf-border);
}

.bf-consultancy-reference__role > .bf-container::before,
.bf-consultancy-reference__related > .bf-container::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -1px;
  width: 72px;
  height: 3px;
  background: var(--bf-accent);
}

.bf-consultancy-role-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 960px;
  margin: clamp(28px, 3.8vw, 42px) auto 0;
  direction: rtl;
}

.bf-consultancy-role-rail::before {
  content: "";
  position: absolute;
  inset-inline: 12.5%;
  inset-block-start: 20px;
  height: 1px;
  background: var(--bf-border-strong);
}

.bf-consultancy-role-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding-inline: 14px;
  text-align: center;
}

.bf-consultancy-role-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: -4px;
  inset-block-start: 17px;
  width: 8px;
  height: 6px;
  border-radius: 999px;
  background: var(--bf-accent);
  box-shadow: 0 0 0 4px rgba(245,158,11,.08);
}

.bf-consultancy-role-step__number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bf-ink);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 0 0 6px var(--bf-bg);
}

.bf-consultancy-role-step small {
  margin-top: 7px;
  color: #8997aa;
  font-family: Arial, sans-serif;
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.bf-consultancy-role-step strong {
  color: var(--bf-text);
  font-size: .9rem;
  line-height: 1.7;
}

/* Evidence — shared consultancy evidence card anatomy ------------------------- */
.bf-consultancy-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 34px);
  align-items: stretch;
  margin-top: clamp(26px, 3.4vw, 42px);
}

.bf-consultancy-evidence-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 390px;
  flex-direction: column;
  gap: 13px;
  overflow: hidden;
  padding: clamp(30px, 3.6vw, 44px);
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 58px rgba(15,23,42,.055);
}

.bf-consultancy-evidence-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 86px;
  height: 4px;
  background: var(--bf-accent);
}

.bf-consultancy-evidence-card__ghost {
  position: absolute;
  inset-inline-end: 24px;
  inset-block-start: 4px;
  color: var(--bf-ink);
  font-size: clamp(6rem, 9vw, 8.2rem);
  font-weight: 900;
  line-height: 1;
  opacity: .04;
  pointer-events: none;
}

.bf-consultancy-evidence-card__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
}

.bf-consultancy-evidence-card__brand img {
  width: 96px;
  height: 68px;
  object-fit: contain;
}

.bf-consultancy-evidence-card__brand > div {
  display: grid;
  gap: 4px;
}

.bf-consultancy-evidence-card__brand span {
  color: var(--bf-accent-dark);
  font-size: .75rem;
  font-weight: 900;
}

.bf-consultancy-evidence-card__brand strong {
  color: var(--bf-subtle);
  font-size: .78rem;
  font-weight: 850;
}

.bf-consultancy-evidence-card__type {
  margin: 4px 0 0;
  color: var(--bf-accent-dark);
  font-size: .76rem;
  font-weight: 900;
}

.bf-consultancy-evidence-card h3 {
  margin: 0;
  color: var(--bf-text);
  font-size: clamp(1.28rem, 1.85vw, 1.65rem);
  line-height: 1.6;
}

.bf-consultancy-evidence-card > p:not(.bf-consultancy-evidence-card__type) {
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.95;
  text-align: right;
}

.bf-consultancy-evidence-card__path {
  display: grid;
  grid-template-columns: auto minmax(18px,1fr) auto minmax(18px,1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  direction: rtl;
}

.bf-consultancy-evidence-card__path span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--bf-border);
  border-radius: 999px;
  background: #fff;
  color: var(--bf-ink);
  font-size: .7rem;
  font-weight: 850;
  white-space: nowrap;
}

.bf-consultancy-evidence-card__path i {
  position: relative;
  height: 1px;
  background: var(--bf-border-strong);
}

.bf-consultancy-evidence-card__path i::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bf-accent);
}

.bf-consultancy-evidence-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--bf-border);
}

.bf-consultancy-evidence-card__facts span {
  display: grid;
  gap: 4px;
}

.bf-consultancy-evidence-card__facts small {
  color: var(--bf-subtle);
  font-size: .7rem;
  font-weight: 800;
}

.bf-consultancy-evidence-card__facts strong {
  color: var(--bf-text);
  font-size: .78rem;
  line-height: 1.7;
}

.bf-consultancy-reference__evidence .bf-section-actions {
  margin-top: clamp(24px, 3vw, 34px);
}

/* Related reading — feature article + two supporting editorial items ---------- */
.bf-consultancy-editorial {
  display: grid;
  grid-template-columns: minmax(320px, .84fr) minmax(0, 1.16fr);
  gap: clamp(24px, 3vw, 36px);
  align-items: stretch;
  margin-top: clamp(26px, 3.4vw, 42px);
}

.bf-consultancy-editorial__feature {
  position: relative;
  display: flex;
  min-height: 310px;
  flex-direction: column;
  gap: 13px;
  overflow: hidden;
  padding: clamp(28px, 3.4vw, 40px);
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 54px rgba(15,23,42,.055);
  color: inherit;
  text-decoration: none;
}

.bf-consultancy-editorial__feature::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 74px;
  height: 4px;
  background: var(--bf-accent);
}

.bf-consultancy-editorial__ghost {
  position: absolute;
  inset-inline-end: 18px;
  inset-block-end: -18px;
  color: var(--bf-ink);
  font-size: clamp(6rem, 11vw, 9rem);
  font-weight: 900;
  line-height: 1;
  opacity: .038;
  pointer-events: none;
}

.bf-consultancy-editorial__meta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-consultancy-editorial__meta span {
  color: var(--bf-accent-dark);
  font-size: .76rem;
  font-weight: 900;
}

.bf-consultancy-editorial__meta small {
  color: var(--bf-subtle);
  font-size: .73rem;
  font-weight: 800;
}

.bf-consultancy-editorial__feature h3 {
  position: relative;
  max-width: 18ch;
  margin: 8px 0 0;
  color: var(--bf-text);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  line-height: 1.6;
}

.bf-consultancy-editorial__feature p {
  position: relative;
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.9;
  text-align: right;
}

.bf-consultancy-editorial__feature > strong {
  position: relative;
  margin-top: auto;
  color: var(--bf-accent-dark);
  font-size: .82rem;
}

.bf-consultancy-editorial__list {
  display: grid;
  grid-template-rows: repeat(2, minmax(0,1fr));
  border-block: 1px solid var(--bf-border);
}

.bf-consultancy-editorial-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "number category"
    "title title"
    "body body"
    "link link";
  align-content: center;
  gap: 8px 10px;
  min-width: 0;
  padding: clamp(22px, 2.8vw, 32px) 8px;
  border-block-end: 1px solid var(--bf-border);
  color: inherit;
  text-decoration: none;
  transition: padding-inline var(--bf-t-fast), background-color var(--bf-t-fast);
}

.bf-consultancy-editorial-item:last-child {
  border-block-end: 0;
}

.bf-consultancy-editorial-item:hover,
.bf-consultancy-editorial-item:focus-visible {
  padding-inline: 16px;
  background: rgba(255,255,255,.54);
  text-decoration: none;
}

.bf-consultancy-editorial-item > span {
  grid-area: number;
  color: var(--bf-accent-dark);
  font-size: .74rem;
  font-weight: 900;
}

.bf-consultancy-editorial-item > small {
  grid-area: category;
  color: var(--bf-subtle);
  font-size: .74rem;
  font-weight: 800;
}

.bf-consultancy-editorial-item h3 {
  grid-area: title;
  max-width: 34ch;
  margin: 3px 0 0;
  color: var(--bf-text);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.75;
}

.bf-consultancy-editorial-item p {
  grid-area: body;
  max-width: 58ch;
  margin: 0;
  color: var(--bf-muted);
  font-size: .86rem;
  line-height: 1.85;
  text-align: right;
}

.bf-consultancy-editorial-item > strong {
  grid-area: link;
  color: var(--bf-accent-dark);
  font-size: .76rem;
}

.bf-consultancy-editorial__feature:hover,
.bf-consultancy-editorial__feature:focus-visible,
.bf-consultancy-editorial-item:hover,
.bf-consultancy-editorial-item:focus-visible {
  outline: none;
}

/* Keep the final CTA as the page's only major dark contrast moment. */
.bf-consultancy-reference__cta {
  padding-block: clamp(16px, 2.4vw, 28px) !important;
}

@media (max-width: 1100px) {
  .bf-consultancy-scope-board {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .bf-consultancy-scope-item:not(:nth-child(3n)) {
    border-inline-end: 0;
  }

  .bf-consultancy-scope-item:nth-child(-n + 3) {
    border-block-end: 0;
  }

  .bf-consultancy-scope-item:nth-child(odd) {
    border-inline-end: 1px solid var(--bf-border);
  }

  .bf-consultancy-scope-item:not(:nth-last-child(-n + 2)) {
    border-block-end: 1px solid var(--bf-border);
  }

  .bf-consultancy-evidence-grid,
  .bf-consultancy-editorial {
    grid-template-columns: 1fr;
  }

  .bf-consultancy-evidence-card {
    min-height: 340px;
  }

  .bf-consultancy-editorial__feature {
    min-height: 280px;
  }

  .bf-consultancy-editorial__list {
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: none;
    border: 1px solid var(--bf-border);
    border-radius: 18px;
    overflow: hidden;
  }

  .bf-consultancy-editorial-item {
    border-block-end: 0;
  }

  .bf-consultancy-editorial-item:first-child {
    border-inline-end: 1px solid var(--bf-border);
  }
}

@media (max-width: 760px) {
  .bf-consultancy-section-header--standard .bf-section-header__title {
    font-size: clamp(1.3rem, 7vw, 1.7rem);
  }

  .bf-consultancy-scope-surface {
    margin-top: 22px;
    padding: 16px;
    border-radius: 20px;
  }

  .bf-consultancy-scope-surface::before {
    opacity: .18;
    background-size: 44px 44px;
  }

  .bf-consultancy-scope-board {
    grid-template-columns: 1fr;
    border-radius: 15px;
  }

  .bf-consultancy-scope-item {
    min-height: 0;
    padding: 24px 20px;
    border-inline-end: 0 !important;
    border-block-end: 1px solid var(--bf-border) !important;
  }

  .bf-consultancy-scope-item:last-child {
    border-block-end: 0 !important;
  }

  .bf-consultancy-scope-item__ghost {
    inset-block-start: -10px;
    font-size: 5.8rem;
  }

  .bf-consultancy-role-rail {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 520px;
    margin-top: 24px;
  }

  .bf-consultancy-role-rail::before {
    inset-inline-start: auto;
    inset-inline-end: 20px;
    inset-block: 20px;
    width: 1px;
    height: auto;
  }

  .bf-consultancy-role-step {
    grid-template-columns: 40px minmax(0,1fr);
    grid-template-areas:
      "number helper"
      "number title";
    justify-items: start;
    gap: 2px 14px;
    min-height: 88px;
    padding: 0;
    text-align: right;
  }

  .bf-consultancy-role-step__number {
    grid-area: number;
    box-shadow: 0 0 0 5px var(--bf-bg);
  }

  .bf-consultancy-role-step small {
    grid-area: helper;
    margin-top: 4px;
  }

  .bf-consultancy-role-step strong {
    grid-area: title;
  }

  .bf-consultancy-role-step:not(:last-child)::after {
    inset-inline-start: auto;
    inset-inline-end: 17px;
    inset-block-start: auto;
    inset-block-end: 5px;
    width: 7px;
    height: 7px;
  }

  .bf-consultancy-evidence-grid {
    gap: 20px;
    margin-top: 22px;
  }

  .bf-consultancy-evidence-card {
    min-height: 0;
    padding: 26px 20px;
    border-radius: 20px;
  }

  .bf-consultancy-evidence-card__brand {
    align-items: flex-start;
  }

  .bf-consultancy-evidence-card__brand img {
    width: 92px;
    height: 62px;
  }

  .bf-consultancy-evidence-card__path {
    grid-template-columns: 1fr;
    gap: 7px;
    width: 100%;
  }

  .bf-consultancy-evidence-card__path i {
    justify-self: center;
    width: 1px;
    height: 16px;
  }

  .bf-consultancy-evidence-card__path i::after {
    inset-inline-start: -2px;
    top: auto;
    bottom: 0;
  }

  .bf-consultancy-evidence-card__facts {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .bf-consultancy-editorial {
    gap: 20px;
    margin-top: 22px;
  }

  .bf-consultancy-editorial__feature {
    min-height: 0;
    padding: 26px 20px;
    border-radius: 20px;
  }

  .bf-consultancy-editorial__list {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }

  .bf-consultancy-editorial-item:first-child {
    border-inline-end: 0;
    border-block-end: 1px solid var(--bf-border);
  }

  .bf-consultancy-editorial-item {
    padding: 22px 18px;
  }

  .bf-consultancy-reference__role > .bf-container,
  .bf-consultancy-reference__related > .bf-container {
    padding-block-start: 42px;
  }
}

/* BIM Consultancy reference page — explicit Rule transition between the
   decision/control rail and the evidence chapter. Keep the canvas open;
   define the boundary with structure rather than another background slab. */
.bf-consultancy-reference__evidence {
  position: relative;
}

.bf-consultancy-reference__evidence::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block-start: 0;
  left: 50%;
  width: min(calc(100% - 2rem), var(--bf-container));
  height: 1px;
  transform: translateX(-50%);
  background: var(--bf-border);
}

.bf-consultancy-reference__evidence::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block-start: -1px;
  right: max(1rem, calc((100% - var(--bf-container)) / 2));
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: var(--bf-accent);
}

@media (max-width: 760px) {
  .bf-consultancy-reference__evidence::after {
    width: 52px;
  }
}

/* BIM Consultancy — strong section boundary through Surface contrast.
   The decision/control chapter is one contained Surface; the following
   evidence chapter returns to open Canvas. This replaces the too-subtle
   line-only boundary treatment. */
.bf-consultancy-reference__role {
  padding-block: clamp(54px, 6.5vw, 82px) clamp(46px, 5.5vw, 68px) !important;
}

.bf-consultancy-reference__role > .bf-container {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 5vw, 64px) clamp(28px, 4.5vw, 58px) clamp(38px, 4.5vw, 54px);
  border: 1px solid var(--bf-border);
  border-radius: 26px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 20px 58px rgba(15,23,42,.055);
}

.bf-consultancy-reference__role > .bf-container::before {
  content: "";
  position: absolute;
  inset-inline-start: clamp(28px, 4vw, 48px);
  inset-block-start: -1px;
  width: 82px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--bf-accent);
}

/* The evidence chapter is deliberately open Canvas; remove the previous
   line-only separator now that the preceding section has a real surface. */
.bf-consultancy-reference__evidence::before,
.bf-consultancy-reference__evidence::after {
  content: none !important;
}

.bf-consultancy-reference__evidence {
  padding-block-start: clamp(70px, 8vw, 104px) !important;
}

@media (max-width: 760px) {
  .bf-consultancy-reference__role {
    padding-block: 38px 34px !important;
  }

  .bf-consultancy-reference__role > .bf-container {
    padding: 34px 20px 28px;
    border-radius: 20px;
  }

  .bf-consultancy-reference__role > .bf-container::before {
    inset-inline-start: 20px;
    width: 58px;
  }

  .bf-consultancy-reference__evidence {
    padding-block-start: 58px !important;
  }
}

/* ========================================================================== 
   /services/bim-implementation — Visual Grammar v1.1 propagation (2026-09-02)
   Reference language: /services + /services/bim-consultancy
   Surface × Structure × Transition + Emphasis + Visual Device
   ========================================================================== */

.bf-implementation-reference {
  background: transparent;
}

.bf-implementation-reference .bf-section-header--center {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.bf-implementation-reference .bf-section-header--center :where(
  .bf-section-header__eyebrow,
  .bf-section-header__title,
  .bf-section-header__intro
) {
  margin-inline: auto;
  text-align: center;
  text-align-last: center;
}

.bf-implementation-reference .bf-section-header__intro {
  max-width: 72ch;
}

.bf-implementation-section-header--standard .bf-section-header__title {
  font-size: clamp(1.42rem, 2.15vw, 2.08rem);
}

/* Scope — six-cell capability control board -------------------------------- */
.bf-implementation-scope-surface {
  position: relative;
  overflow: hidden;
  margin-top: clamp(26px, 3.4vw, 42px);
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(174,187,205,.72);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 64px rgba(15,23,42,.06);
}

.bf-implementation-scope-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(174,187,205,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174,187,205,.14) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.48), transparent 38%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.48), transparent 38%);
}

.bf-implementation-scope-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: rgba(255,255,255,.84);
}

.bf-implementation-scope-item {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: 330px;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
  padding: clamp(24px, 2.5vw, 32px);
}

.bf-implementation-scope-item:not(:nth-child(3n)) { border-inline-end: 1px solid var(--bf-border); }
.bf-implementation-scope-item:nth-child(-n + 3) { border-block-end: 1px solid var(--bf-border); }

.bf-implementation-scope-item__ghost {
  position: absolute;
  z-index: -1;
  inset-inline-end: 14px;
  inset-block-start: -18px;
  color: var(--bf-ink);
  font-size: clamp(5rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.06em;
  opacity: .045;
  pointer-events: none;
}

.bf-implementation-scope-item__head { display: flex; align-items: center; gap: 10px; }
.bf-implementation-scope-item__index { display: inline-flex; align-items: center; gap: 8px; color: var(--bf-ink); font-size: .73rem; font-weight: 900; }
.bf-implementation-scope-item__index::after { content: ""; width: 30px; height: 2px; border-radius: 999px; background: var(--bf-accent); }
.bf-implementation-scope-item__label { color: var(--bf-accent-dark); font-size: .75rem; font-weight: 900; }
.bf-implementation-scope-item h3 { margin: 2px 0 0; color: var(--bf-text); font-size: clamp(1.06rem, 1.35vw, 1.26rem); line-height: 1.7; }
.bf-implementation-scope-item > p { margin: 0; color: var(--bf-muted); font-size: .88rem; line-height: 1.9; text-align: right; }
.bf-implementation-scope-item .bf-services-micro-flow { width: 100%; margin-block: 2px 3px; }
.bf-implementation-scope-item__outcome { display: grid; gap: 4px; margin-top: auto; padding-block-start: 13px; border-block-start: 1px solid rgba(216,224,236,.84); }
.bf-implementation-scope-item__outcome strong { color: var(--bf-accent-dark); font-size: .72rem; font-weight: 900; }
.bf-implementation-scope-item__outcome span { color: var(--bf-subtle); font-size: .78rem; line-height: 1.75; }

/* Fit — open diagnostic state map ------------------------------------------- */
.bf-implementation-reference__fit {
  padding-block: clamp(66px, 7.4vw, 96px) !important;
}

.bf-implementation-fit-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: clamp(28px, 3.6vw, 44px);
  border-block: 1px solid var(--bf-border);
}

.bf-implementation-fit-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "index label"
    "title title"
    "body body"
    "link link";
  align-content: start;
  gap: 8px 10px;
  min-width: 0;
  min-height: 230px;
  padding: clamp(25px, 3vw, 34px) clamp(18px, 2.4vw, 28px);
  color: inherit;
  text-decoration: none;
}

.bf-implementation-fit-item:not(:nth-child(3n)) { border-inline-end: 1px solid var(--bf-border); }
.bf-implementation-fit-item:nth-child(-n + 3) { border-block-end: 1px solid var(--bf-border); }
.bf-implementation-fit-item > span { grid-area: index; color: var(--bf-accent-dark); font-size: .74rem; font-weight: 900; }
.bf-implementation-fit-item > small { grid-area: label; color: var(--bf-subtle); font-size: .75rem; font-weight: 850; }
.bf-implementation-fit-item h3 { grid-area: title; margin: 5px 0 0; color: var(--bf-text); font-size: clamp(1rem,1.35vw,1.18rem); line-height: 1.72; }
.bf-implementation-fit-item p { grid-area: body; margin: 0; color: var(--bf-muted); font-size: .86rem; line-height: 1.9; text-align: right; }
.bf-implementation-fit-item > strong { grid-area: link; margin-top: 4px; color: var(--bf-accent-dark); font-size: .78rem; }
.bf-implementation-fit-item--boundary { background: rgba(251,247,240,.42); transition: background-color var(--bf-t-fast), padding-inline var(--bf-t-fast); }
.bf-implementation-fit-item--boundary:hover,
.bf-implementation-fit-item--boundary:focus-visible { background: var(--bf-accent-soft); padding-inline: 32px; text-decoration: none; outline: none; }

/* Outcome — one contained capability rail ---------------------------------- */
.bf-implementation-reference__outcome {
  padding-block: clamp(44px, 5vw, 66px) !important;
}

.bf-implementation-outcome-surface {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 4.8vw, 62px) clamp(28px, 4.2vw, 54px) clamp(32px, 4vw, 48px);
  border: 1px solid var(--bf-border);
  border-radius: 26px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 20px 58px rgba(15,23,42,.055);
}

.bf-implementation-outcome-surface::before {
  content: "";
  position: absolute;
  inset-inline-start: clamp(28px,4vw,48px);
  inset-block-start: -1px;
  width: 82px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--bf-accent);
}

.bf-implementation-outcome-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  max-width: 980px;
  margin: clamp(30px, 3.8vw, 44px) auto 0;
  direction: rtl;
}

.bf-implementation-outcome-rail::before {
  content: "";
  position: absolute;
  inset-inline: 12.5%;
  inset-block-start: 20px;
  height: 1px;
  background: var(--bf-border-strong);
}

.bf-implementation-outcome-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding-inline: 14px;
  text-align: center;
}

.bf-implementation-outcome-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: -4px;
  inset-block-start: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bf-accent);
  box-shadow: 0 0 0 4px rgba(245,158,11,.07);
}

.bf-implementation-outcome-step__number { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bf-ink); color: #fff; font-size: .72rem; font-weight: 900; box-shadow: 0 0 0 6px #fff; }
.bf-implementation-outcome-step small { margin-top: 7px; color: #8997aa; font-family: Arial,sans-serif; font-size: .61rem; font-weight: 900; letter-spacing: .08em; }
.bf-implementation-outcome-step strong { color: var(--bf-text); font-size: .92rem; line-height: 1.65; }
.bf-implementation-outcome-step p { margin: 0; color: var(--bf-muted); font-size: .78rem; line-height: 1.7; text-align: center; }

.bf-implementation-outcome-note {
  max-width: 900px;
  margin: clamp(28px,3vw,38px) auto 0;
  padding-top: 20px;
  border-block-start: 1px solid var(--bf-border);
  color: var(--bf-muted);
  line-height: 1.95;
  text-align: center;
}
.bf-implementation-outcome-note a { color: var(--bf-accent-dark); font-weight: 850; }

/* Evidence — equal shared evidence card anatomy ----------------------------- */
.bf-implementation-reference__evidence {
  padding-block: clamp(70px, 8vw, 104px) !important;
}

.bf-implementation-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(24px,3vw,34px);
  align-items: stretch;
  margin-top: clamp(26px,3.4vw,42px);
}

.bf-implementation-evidence-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 410px;
  flex-direction: column;
  gap: 13px;
  overflow: hidden;
  padding: clamp(30px,3.6vw,44px);
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 58px rgba(15,23,42,.055);
}

.bf-implementation-evidence-card::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 86px; height: 4px; background: var(--bf-accent); }
.bf-implementation-evidence-card__ghost { position: absolute; inset-inline-end: 24px; inset-block-start: 4px; color: var(--bf-ink); font-size: clamp(6rem,9vw,8.2rem); font-weight: 900; line-height: 1; opacity: .04; pointer-events: none; }
.bf-implementation-evidence-card__brand { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; }
.bf-implementation-evidence-card__brand img { width: 96px; height: 68px; object-fit: contain; }
.bf-implementation-evidence-card__brand > div { display: grid; gap: 4px; }
.bf-implementation-evidence-card__brand span { color: var(--bf-accent-dark); font-size: .75rem; font-weight: 900; }
.bf-implementation-evidence-card__brand strong { color: var(--bf-subtle); font-size: .78rem; font-weight: 850; }
.bf-implementation-evidence-card__type { margin: 4px 0 0; color: var(--bf-accent-dark); font-size: .76rem; font-weight: 900; }
.bf-implementation-evidence-card h3 { margin: 0; color: var(--bf-text); font-size: clamp(1.28rem,1.85vw,1.65rem); line-height: 1.6; }
.bf-implementation-evidence-card > p:not(.bf-implementation-evidence-card__type) { margin: 0; color: var(--bf-muted); line-height: 1.95; text-align: right; }
.bf-implementation-evidence-card__path { display: grid; grid-template-columns: auto minmax(18px,1fr) auto minmax(18px,1fr) auto; align-items: center; gap: 8px; width: 100%; margin-top: auto; direction: rtl; }
.bf-implementation-evidence-card__path span { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 4px 10px; border: 1px solid var(--bf-border); border-radius: 999px; background: #fff; color: var(--bf-ink); font-size: .7rem; font-weight: 850; white-space: nowrap; }
.bf-implementation-evidence-card__path i { position: relative; height: 1px; background: var(--bf-border-strong); }
.bf-implementation-evidence-card__path i::after { content: ""; position: absolute; inset-inline-start: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--bf-accent); }
.bf-implementation-evidence-card__facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding-block-start: 16px; border-block-start: 1px solid var(--bf-border); }
.bf-implementation-evidence-card__facts span { display: grid; gap: 4px; }
.bf-implementation-evidence-card__facts small { color: var(--bf-subtle); font-size: .7rem; font-weight: 800; }
.bf-implementation-evidence-card__facts strong { color: var(--bf-text); font-size: .78rem; line-height: 1.7; }
.bf-implementation-evidence-card__link { color: var(--bf-accent-dark); font-size: .78rem; font-weight: 900; text-decoration: none; }

/* Related reading — editorial feature + two supporting items ---------------- */
.bf-implementation-reference__related {
  padding-block: clamp(58px,6.5vw,84px) !important;
}

.bf-implementation-editorial {
  display: grid;
  grid-template-columns: minmax(320px,.86fr) minmax(0,1.25fr);
  gap: clamp(32px,4vw,52px);
  align-items: stretch;
  margin-top: clamp(28px,3.6vw,42px);
}

.bf-implementation-editorial__feature {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 300px;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding: clamp(30px,3.5vw,42px);
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 58px rgba(15,23,42,.055);
  color: inherit;
  text-decoration: none;
}

.bf-implementation-editorial__feature::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 86px; height: 4px; background: var(--bf-accent); }
.bf-implementation-editorial__ghost { position: absolute; inset-inline-end: 18px; inset-block-end: -18px; color: var(--bf-ink); font-size: clamp(6rem,11vw,9rem); font-weight: 900; line-height: 1; opacity: .038; pointer-events: none; }
.bf-implementation-editorial__meta { position: relative; display: flex; align-items: center; gap: 10px; }
.bf-implementation-editorial__meta span { color: var(--bf-accent-dark); font-size: .76rem; font-weight: 900; }
.bf-implementation-editorial__meta small { color: var(--bf-subtle); font-size: .73rem; font-weight: 800; }
.bf-implementation-editorial__feature h3 { position: relative; max-width: 18ch; margin: 8px 0 0; color: var(--bf-text); font-size: clamp(1.4rem,2vw,1.85rem); line-height: 1.6; }
.bf-implementation-editorial__feature p { position: relative; margin: 0; color: var(--bf-muted); line-height: 1.9; text-align: right; }
.bf-implementation-editorial__feature > strong { position: relative; margin-top: auto; color: var(--bf-accent-dark); font-size: .82rem; }

.bf-implementation-editorial__list { display: grid; grid-template-rows: repeat(2,minmax(0,1fr)); border-block: 1px solid var(--bf-border); }
.bf-implementation-editorial-item { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "number category" "title title" "body body" "link link"; align-content: center; gap: 8px 10px; min-width: 0; padding: clamp(22px,2.8vw,32px) 8px; border-block-end: 1px solid var(--bf-border); color: inherit; text-decoration: none; transition: padding-inline var(--bf-t-fast), background-color var(--bf-t-fast); }
.bf-implementation-editorial-item:last-child { border-block-end: 0; }
.bf-implementation-editorial-item:hover,
.bf-implementation-editorial-item:focus-visible { padding-inline: 16px; background: rgba(255,255,255,.54); text-decoration: none; outline: none; }
.bf-implementation-editorial-item > span { grid-area: number; color: var(--bf-accent-dark); font-size: .74rem; font-weight: 900; }
.bf-implementation-editorial-item > small { grid-area: category; color: var(--bf-subtle); font-size: .74rem; font-weight: 800; }
.bf-implementation-editorial-item h3 { grid-area: title; max-width: 34ch; margin: 3px 0 0; color: var(--bf-text); font-size: clamp(1rem,1.35vw,1.16rem); line-height: 1.75; }
.bf-implementation-editorial-item p { grid-area: body; max-width: 58ch; margin: 0; color: var(--bf-muted); font-size: .86rem; line-height: 1.85; text-align: right; }
.bf-implementation-editorial-item > strong { grid-area: link; color: var(--bf-accent-dark); font-size: .76rem; }

.bf-implementation-reference__cta { padding-block: clamp(16px,2.4vw,28px) !important; }

@media (max-width: 1100px) {
  .bf-implementation-scope-board { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bf-implementation-scope-item:not(:nth-child(3n)) { border-inline-end: 0; }
  .bf-implementation-scope-item:nth-child(-n + 3) { border-block-end: 0; }
  .bf-implementation-scope-item:nth-child(odd) { border-inline-end: 1px solid var(--bf-border); }
  .bf-implementation-scope-item:not(:nth-last-child(-n + 2)) { border-block-end: 1px solid var(--bf-border); }
  .bf-implementation-fit-map { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bf-implementation-fit-item:not(:nth-child(3n)) { border-inline-end: 0; }
  .bf-implementation-fit-item:nth-child(-n + 3) { border-block-end: 0; }
  .bf-implementation-fit-item:nth-child(odd) { border-inline-end: 1px solid var(--bf-border); }
  .bf-implementation-fit-item:not(:nth-last-child(-n + 2)) { border-block-end: 1px solid var(--bf-border); }
  .bf-implementation-evidence-grid,
  .bf-implementation-editorial { grid-template-columns: 1fr; }
  .bf-implementation-evidence-card { min-height: 350px; }
  .bf-implementation-editorial__feature { min-height: 270px; }
  .bf-implementation-editorial__list { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; border: 1px solid var(--bf-border); border-radius: 18px; overflow: hidden; }
  .bf-implementation-editorial-item { border-block-end: 0; }
  .bf-implementation-editorial-item:first-child { border-inline-end: 1px solid var(--bf-border); }
}

@media (max-width: 760px) {
  .bf-implementation-section-header--standard .bf-section-header__title { font-size: clamp(1.3rem,7vw,1.7rem); }
  .bf-implementation-scope-surface { margin-top: 22px; padding: 16px; border-radius: 20px; }
  .bf-implementation-scope-surface::before { opacity: .18; background-size: 44px 44px; }
  .bf-implementation-scope-board { grid-template-columns: 1fr; border-radius: 15px; }
  .bf-implementation-scope-item { min-height: 0; padding: 24px 20px; border-inline-end: 0 !important; border-block-end: 1px solid var(--bf-border) !important; }
  .bf-implementation-scope-item:last-child { border-block-end: 0 !important; }
  .bf-implementation-scope-item__ghost { inset-block-start: -10px; font-size: 5.8rem; }

  .bf-implementation-reference__fit { padding-block: 52px !important; }
  .bf-implementation-fit-map { grid-template-columns: 1fr; }
  .bf-implementation-fit-item { min-height: 0; padding: 24px 18px; border-inline-end: 0 !important; border-block-end: 1px solid var(--bf-border) !important; }
  .bf-implementation-fit-item:last-child { border-block-end: 0 !important; }

  .bf-implementation-reference__outcome { padding-block: 34px !important; }
  .bf-implementation-outcome-surface { padding: 34px 20px 28px; border-radius: 20px; }
  .bf-implementation-outcome-surface::before { inset-inline-start: 20px; width: 58px; }
  .bf-implementation-outcome-rail { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin-top: 24px; }
  .bf-implementation-outcome-rail::before { inset-inline-start: auto; inset-inline-end: 20px; inset-block: 20px; width: 1px; height: auto; }
  .bf-implementation-outcome-step { grid-template-columns: 40px minmax(0,1fr); grid-template-areas: "number helper" "number title" "number body"; justify-items: start; gap: 2px 14px; min-height: 98px; padding: 0; text-align: right; }
  .bf-implementation-outcome-step__number { grid-area: number; box-shadow: 0 0 0 5px #fff; }
  .bf-implementation-outcome-step small { grid-area: helper; margin-top: 4px; }
  .bf-implementation-outcome-step strong { grid-area: title; }
  .bf-implementation-outcome-step p { grid-area: body; text-align: right; }
  .bf-implementation-outcome-step:not(:last-child)::after { inset-inline-start: auto; inset-inline-end: 17px; inset-block-start: auto; inset-block-end: 5px; width: 7px; height: 7px; }
  .bf-implementation-outcome-note { text-align: right; }

  .bf-implementation-reference__evidence { padding-block: 58px !important; }
  .bf-implementation-evidence-grid { gap: 20px; margin-top: 22px; }
  .bf-implementation-evidence-card { min-height: 0; padding: 26px 20px; border-radius: 20px; }
  .bf-implementation-evidence-card__brand { align-items: flex-start; }
  .bf-implementation-evidence-card__brand img { width: 92px; height: 62px; }
  .bf-implementation-evidence-card__path { grid-template-columns: 1fr; gap: 7px; }
  .bf-implementation-evidence-card__path i { justify-self: center; width: 1px; height: 16px; }
  .bf-implementation-evidence-card__path i::after { inset-inline-start: -2px; top: auto; bottom: 0; }
  .bf-implementation-evidence-card__facts { grid-template-columns: 1fr; gap: 10px; }

  .bf-implementation-reference__related { padding-block: 52px !important; }
  .bf-implementation-editorial { gap: 20px; margin-top: 22px; }
  .bf-implementation-editorial__feature { min-height: 0; padding: 26px 20px; border-radius: 20px; }
  .bf-implementation-editorial__list { grid-template-columns: 1fr; border-radius: 16px; }
  .bf-implementation-editorial-item:first-child { border-inline-end: 0; border-block-end: 1px solid var(--bf-border); }
  .bf-implementation-editorial-item { padding: 22px 18px; }
}

/* ========================================================================== */
/* BIM Optimization — Visual Grammar v1.1 reference propagation              */
/* ========================================================================== */

.bf-optimization-reference .bf-section-header__intro { max-width: 72ch; }
.bf-optimization-section-header--standard .bf-section-header__title { font-size: clamp(1.42rem, 2.15vw, 2.08rem); }

/* Scope — six-cell optimization control board ------------------------------ */
.bf-optimization-reference__scope { padding-block: clamp(68px, 7.6vw, 102px) !important; }
.bf-optimization-scope-surface {
  position: relative;
  overflow: hidden;
  margin-top: clamp(26px, 3.4vw, 42px);
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(174,187,205,.72);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 64px rgba(15,23,42,.06);
}
.bf-optimization-scope-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(174,187,205,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(174,187,205,.14) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.46), transparent 38%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.46), transparent 38%);
}
.bf-optimization-scope-board {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
}
.bf-optimization-scope-item {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  min-height: 330px;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
  padding: clamp(24px, 2.5vw, 32px);
}
.bf-optimization-scope-item:not(:nth-child(3n)) { border-inline-end: 1px solid var(--bf-border); }
.bf-optimization-scope-item:nth-child(-n + 3) { border-block-end: 1px solid var(--bf-border); }
.bf-optimization-scope-item__ghost {
  position: absolute;
  z-index: -1;
  inset-inline-end: 14px;
  inset-block-start: -18px;
  color: var(--bf-ink);
  font-size: clamp(5rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.06em;
  opacity: .045;
  pointer-events: none;
}
.bf-optimization-scope-item__head { display: flex; align-items: center; gap: 10px; }
.bf-optimization-scope-item__index { display: inline-flex; align-items: center; gap: 8px; color: var(--bf-ink); font-size: .73rem; font-weight: 900; }
.bf-optimization-scope-item__index::after { content: ""; width: 30px; height: 2px; border-radius: 999px; background: var(--bf-accent); }
.bf-optimization-scope-item__label { color: var(--bf-accent-dark); font-size: .75rem; font-weight: 900; }
.bf-optimization-scope-item h3 { margin: 2px 0 0; color: var(--bf-text); font-size: clamp(1.06rem, 1.35vw, 1.26rem); line-height: 1.7; }
.bf-optimization-scope-item > p { margin: 0; color: var(--bf-muted); font-size: .88rem; line-height: 1.9; text-align: right; }
.bf-optimization-scope-item .bf-services-micro-flow { width: 100%; margin-block: 2px 3px; }
.bf-optimization-scope-item__outcome { display: grid; gap: 4px; margin-top: auto; padding-block-start: 13px; border-block-start: 1px solid rgba(216,224,236,.84); }
.bf-optimization-scope-item__outcome strong { color: var(--bf-accent-dark); font-size: .72rem; font-weight: 900; }
.bf-optimization-scope-item__outcome span { color: var(--bf-subtle); font-size: .78rem; line-height: 1.75; }

/* Evidence — equal shared card anatomy ------------------------------------- */
.bf-optimization-reference__evidence { padding-block: clamp(70px, 8vw, 104px) !important; }
.bf-optimization-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(24px,3vw,34px);
  align-items: stretch;
  margin-top: clamp(26px,3.4vw,42px);
}
.bf-optimization-evidence-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 410px;
  flex-direction: column;
  gap: 13px;
  overflow: hidden;
  padding: clamp(30px,3.6vw,44px);
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 58px rgba(15,23,42,.055);
}
.bf-optimization-evidence-card::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 86px; height: 4px; background: var(--bf-accent); }
.bf-optimization-evidence-card__ghost { position: absolute; inset-inline-end: 24px; inset-block-start: 4px; color: var(--bf-ink); font-size: clamp(6rem,9vw,8.2rem); font-weight: 900; line-height: 1; opacity: .04; pointer-events: none; }
.bf-optimization-evidence-card__brand { position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; }
.bf-optimization-evidence-card__brand img { width: 96px; height: 68px; object-fit: contain; }
.bf-optimization-evidence-card__brand > div { display: grid; gap: 4px; }
.bf-optimization-evidence-card__brand span { color: var(--bf-accent-dark); font-size: .75rem; font-weight: 900; }
.bf-optimization-evidence-card__brand strong { color: var(--bf-subtle); font-size: .78rem; font-weight: 850; }
.bf-optimization-evidence-card__type { margin: 4px 0 0; color: var(--bf-accent-dark); font-size: .76rem; font-weight: 900; }
.bf-optimization-evidence-card h3 { margin: 0; color: var(--bf-text); font-size: clamp(1.28rem,1.85vw,1.65rem); line-height: 1.6; }
.bf-optimization-evidence-card > p:not(.bf-optimization-evidence-card__type) { margin: 0; color: var(--bf-muted); line-height: 1.95; text-align: right; }
.bf-optimization-evidence-card__path { display: grid; grid-template-columns: auto minmax(18px,1fr) auto minmax(18px,1fr) auto; align-items: center; gap: 8px; width: 100%; margin-top: auto; direction: rtl; }
.bf-optimization-evidence-card__path span { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 4px 10px; border: 1px solid var(--bf-border); border-radius: 999px; background: #fff; color: var(--bf-ink); font-size: .7rem; font-weight: 850; white-space: nowrap; }
.bf-optimization-evidence-card__path i { position: relative; height: 1px; background: var(--bf-border-strong); }
.bf-optimization-evidence-card__path i::after { content: ""; position: absolute; inset-inline-start: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--bf-accent); }
.bf-optimization-evidence-card__facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding-block-start: 16px; border-block-start: 1px solid var(--bf-border); }
.bf-optimization-evidence-card__facts span { display: grid; gap: 4px; }
.bf-optimization-evidence-card__facts small { color: var(--bf-subtle); font-size: .7rem; font-weight: 800; }
.bf-optimization-evidence-card__facts strong { color: var(--bf-text); font-size: .78rem; line-height: 1.7; }
.bf-optimization-evidence-card__link { color: var(--bf-accent-dark); font-size: .78rem; font-weight: 900; text-decoration: none; }
.bf-optimization-reference__evidence .bf-testimonial-carousel--service { margin-top: clamp(48px,5.5vw,72px); }

/* Logic — contained diagnostic rail ---------------------------------------- */
.bf-optimization-reference__logic { padding-block: clamp(44px,5vw,66px) !important; }
.bf-optimization-logic-surface {
  position: relative;
  overflow: hidden;
  padding: clamp(40px,4.8vw,62px) clamp(28px,4.2vw,54px) clamp(32px,4vw,48px);
  border: 1px solid var(--bf-border);
  border-radius: 26px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 20px 58px rgba(15,23,42,.055);
}
.bf-optimization-logic-surface::before { content: ""; position: absolute; inset-inline-start: clamp(28px,4vw,48px); inset-block-start: -1px; width: 82px; height: 4px; border-radius: 0 0 999px 999px; background: var(--bf-accent); }
.bf-optimization-logic-rail { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); max-width: 980px; margin: clamp(30px,3.8vw,44px) auto 0; direction: rtl; }
.bf-optimization-logic-rail::before { content: ""; position: absolute; inset-inline: 12.5%; inset-block-start: 20px; height: 1px; background: var(--bf-border-strong); }
.bf-optimization-logic-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; min-width: 0; padding-inline: 14px; text-align: center; }
.bf-optimization-logic-step:not(:last-child)::after { content: ""; position: absolute; inset-inline-end: -4px; inset-block-start: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--bf-accent); box-shadow: 0 0 0 4px rgba(245,158,11,.07); }
.bf-optimization-logic-step__number { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bf-ink); color: #fff; font-size: .72rem; font-weight: 900; box-shadow: 0 0 0 6px #fff; }
.bf-optimization-logic-step small { margin-top: 7px; color: #8997aa; font-family: Arial,sans-serif; font-size: .61rem; font-weight: 900; letter-spacing: .08em; }
.bf-optimization-logic-step strong { color: var(--bf-text); font-size: .92rem; line-height: 1.65; }
.bf-optimization-logic-step p { margin: 0; color: var(--bf-muted); font-size: .78rem; line-height: 1.7; text-align: center; }
.bf-optimization-logic-note { display: grid; gap: 12px; max-width: 920px; margin: clamp(28px,3vw,38px) auto 0; padding-top: 20px; border-block-start: 1px solid var(--bf-border); text-align: center; }
.bf-optimization-logic-note > span { color: var(--bf-accent-dark); font-size: .75rem; font-weight: 900; }
.bf-optimization-logic-note > p { margin: 0; color: var(--bf-muted); line-height: 1.9; }
.bf-optimization-logic-note__flow { display: grid; grid-template-columns: auto minmax(18px,1fr) auto minmax(18px,1fr) auto minmax(18px,1fr) auto; align-items: center; gap: 8px; margin-top: 4px; direction: rtl; }
.bf-optimization-logic-note__flow span { display: inline-flex; justify-content: center; padding: 7px 11px; border: 1px solid var(--bf-border); border-radius: 999px; color: var(--bf-text); font-size: .72rem; font-weight: 850; background: #fff; white-space: nowrap; }
.bf-optimization-logic-note__flow i { position: relative; height: 1px; background: var(--bf-border-strong); }
.bf-optimization-logic-note__flow i::after { content: ""; position: absolute; inset-inline-start: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--bf-accent); }

/* Related reading — canonical service editorial hierarchy ----------------- */
.bf-optimization-reference__related {
  padding-block: clamp(58px,6.5vw,84px) !important;
}

.bf-optimization-editorial {
  display: grid;
  grid-template-columns: minmax(320px,.86fr) minmax(0,1.25fr);
  gap: clamp(32px,4vw,52px);
  align-items: stretch;
  margin-top: clamp(28px,3.6vw,42px);
}

.bf-optimization-editorial__feature {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 300px;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  padding: clamp(30px,3.5vw,42px);
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 58px rgba(15,23,42,.055);
  color: inherit;
  text-decoration: none;
}

.bf-optimization-editorial__feature::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 86px;
  height: 4px;
  background: var(--bf-accent);
}

.bf-optimization-editorial__ghost {
  position: absolute;
  inset-inline-end: 18px;
  inset-block-end: -18px;
  color: var(--bf-ink);
  font-size: clamp(6rem,11vw,9rem);
  font-weight: 900;
  line-height: 1;
  opacity: .038;
  pointer-events: none;
}

.bf-optimization-editorial__meta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-optimization-editorial__meta span { color: var(--bf-accent-dark); font-size: .76rem; font-weight: 900; }
.bf-optimization-editorial__meta small { color: var(--bf-subtle); font-size: .73rem; font-weight: 800; }
.bf-optimization-editorial__feature h3 { position: relative; max-width: 18ch; margin: 8px 0 0; color: var(--bf-text); font-size: clamp(1.4rem,2vw,1.85rem); line-height: 1.6; }
.bf-optimization-editorial__feature p { position: relative; margin: 0; color: var(--bf-muted); line-height: 1.9; text-align: right; }
.bf-optimization-editorial__feature > strong { position: relative; margin-top: auto; color: var(--bf-accent-dark); font-size: .82rem; }

.bf-optimization-editorial__list {
  display: grid;
  grid-template-rows: repeat(2,minmax(0,1fr));
  border-block: 1px solid var(--bf-border);
}

.bf-optimization-editorial-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "number category"
    "title title"
    "body body"
    "link link";
  align-content: center;
  gap: 8px 10px;
  min-width: 0;
  padding: clamp(22px,2.8vw,32px) 8px;
  border-block-end: 1px solid var(--bf-border);
  color: inherit;
  text-decoration: none;
  transition: padding-inline var(--bf-t-fast), background-color var(--bf-t-fast);
}

.bf-optimization-editorial-item:last-child { border-block-end: 0; }
.bf-optimization-editorial-item:hover,
.bf-optimization-editorial-item:focus-visible { padding-inline: 16px; background: rgba(255,255,255,.54); text-decoration: none; outline: none; }
.bf-optimization-editorial-item > span { grid-area: number; color: var(--bf-accent-dark); font-size: .74rem; font-weight: 900; }
.bf-optimization-editorial-item > small { grid-area: category; color: var(--bf-subtle); font-size: .74rem; font-weight: 800; }
.bf-optimization-editorial-item h3 { grid-area: title; max-width: 34ch; margin: 3px 0 0; color: var(--bf-text); font-size: clamp(1rem,1.35vw,1.16rem); line-height: 1.75; }
.bf-optimization-editorial-item p { grid-area: body; max-width: 58ch; margin: 0; color: var(--bf-muted); font-size: .86rem; line-height: 1.85; text-align: right; }
.bf-optimization-editorial-item > strong { grid-area: link; color: var(--bf-accent-dark); font-size: .76rem; }

/* Match the other service pages at tablet widths. */
@media (max-width: 1100px) {
  .bf-optimization-editorial__feature { min-height: 270px; }
  .bf-optimization-editorial__list {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: none;
    border: 1px solid var(--bf-border);
    border-radius: 18px;
    overflow: hidden;
  }
  .bf-optimization-editorial-item { border-block-end: 0; }
  .bf-optimization-editorial-item:first-child { border-inline-end: 1px solid var(--bf-border); }
}

@media (max-width: 980px) {
  .bf-optimization-scope-board { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bf-optimization-scope-item:not(:nth-child(3n)) { border-inline-end: 0; }
  .bf-optimization-scope-item:nth-child(-n + 3) { border-block-end: 0; }
  .bf-optimization-scope-item:nth-child(odd) { border-inline-end: 1px solid var(--bf-border); }
  .bf-optimization-scope-item:not(:nth-last-child(-n + 2)) { border-block-end: 1px solid var(--bf-border); }
  .bf-optimization-editorial { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .bf-optimization-reference__scope,
  .bf-optimization-reference__evidence,
  .bf-optimization-reference__related { padding-block: 52px !important; }
  .bf-optimization-scope-surface { margin-top: 22px; padding: 16px; border-radius: 20px; }
  .bf-optimization-scope-surface::before { opacity: .18; background-size: 44px 44px; }
  .bf-optimization-scope-board { grid-template-columns: 1fr; border-radius: 15px; }
  .bf-optimization-scope-item { min-height: 0; padding: 24px 20px; border-inline-end: 0 !important; border-block-end: 1px solid var(--bf-border) !important; }
  .bf-optimization-scope-item:last-child { border-block-end: 0 !important; }
  .bf-optimization-scope-item__ghost { inset-block-start: -10px; font-size: 5.8rem; }

  .bf-optimization-evidence-grid { grid-template-columns: 1fr; gap: 20px; }
  .bf-optimization-evidence-card { min-height: 0; padding: 28px 22px; border-radius: 20px; }
  .bf-optimization-evidence-card__brand img { width: 82px; height: 58px; }
  .bf-optimization-evidence-card__facts { grid-template-columns: 1fr; gap: 12px; }
  .bf-optimization-evidence-card__path { grid-template-columns: 1fr; justify-items: stretch; gap: 6px; }
  .bf-optimization-evidence-card__path i { width: 1px; height: 16px; justify-self: center; }
  .bf-optimization-evidence-card__path i::after { inset-inline-start: -2px; top: 0; }

  .bf-optimization-reference__logic { padding-block: 36px !important; }
  .bf-optimization-logic-surface { padding: 34px 20px 28px; border-radius: 20px; }
  .bf-optimization-logic-surface::before { inset-inline-start: 20px; width: 58px; }
  .bf-optimization-logic-rail { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin-top: 24px; }
  .bf-optimization-logic-rail::before { inset-inline-start: auto; inset-inline-end: 20px; inset-block: 20px; width: 1px; height: auto; }
  .bf-optimization-logic-step { grid-template-columns: 40px minmax(0,1fr); grid-template-areas: "number helper" "number title" "number body"; justify-items: start; gap: 2px 14px; min-height: 104px; padding: 0; text-align: right; }
  .bf-optimization-logic-step__number { grid-area: number; box-shadow: 0 0 0 5px #fff; }
  .bf-optimization-logic-step small { grid-area: helper; margin-top: 4px; }
  .bf-optimization-logic-step strong { grid-area: title; }
  .bf-optimization-logic-step p { grid-area: body; text-align: right; }
  .bf-optimization-logic-step:not(:last-child)::after { inset-inline-start: auto; inset-inline-end: 17px; inset-block-start: auto; inset-block-end: 5px; width: 7px; height: 7px; }
  .bf-optimization-logic-note { text-align: right; }
  .bf-optimization-logic-note__flow { grid-template-columns: 1fr; justify-items: stretch; }
  .bf-optimization-logic-note__flow i { width: 1px; height: 14px; justify-self: center; }
  .bf-optimization-logic-note__flow i::after { inset-inline-start: -2px; top: 0; }

  .bf-optimization-reference__related { padding-block: 52px !important; }
  .bf-optimization-editorial { gap: 20px; margin-top: 22px; }
  .bf-optimization-editorial__feature { min-height: 0; padding: 26px 20px; border-radius: 20px; }
  .bf-optimization-editorial__feature h3 { margin-top: 8px; }
  .bf-optimization-editorial__list { grid-template-columns: 1fr; border-radius: 16px; }
  .bf-optimization-editorial-item:first-child { border-inline-end: 0; border-block-end: 1px solid var(--bf-border); }
  .bf-optimization-editorial-item { min-height: 0; padding: 22px 18px; }
}

/* ================================================================
   BIM TRAINING — Visual Grammar v1.1 reference propagation
   ================================================================ */

.bf-service-detail--training .bf-training-section-header--standard .bf-section-title {
  font-size: clamp(1.75rem, 2.9vw, 2.55rem);
}

.bf-training-reference__scope,
.bf-training-reference__evidence,
.bf-training-reference__related {
  padding-block: clamp(38px, 4.2vw, 52px) !important;
}

/* Training control board: one system, three service domains. */
.bf-training-control-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1120px;
  margin: clamp(34px, 4vw, 50px) auto 0;
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 52px rgba(15,23,42,.05);
}

.bf-training-control-board::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 88px;
  height: 4px;
  background: var(--bf-accent);
  z-index: 2;
}

.bf-training-control-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 390px;
  padding: clamp(30px, 3.4vw, 42px);
  border-inline-end: 1px solid var(--bf-border);
  text-align: right;
  overflow: hidden;
}

.bf-training-control-card:last-child { border-inline-end: 0; }

.bf-training-control-card__ghost {
  position: absolute;
  inset-inline-end: 20px;
  inset-block-start: -8px;
  color: var(--bf-ink);
  font-size: clamp(5.8rem, 8vw, 7.5rem);
  font-weight: 900;
  line-height: 1;
  opacity: .038;
  pointer-events: none;
}

.bf-training-control-card__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 24px;
}

.bf-training-control-card__meta > span {
  color: var(--bf-text);
  font-size: .72rem;
  font-weight: 900;
}

.bf-training-control-card__meta > i {
  width: 30px;
  height: 2px;
  background: var(--bf-accent);
}

.bf-training-control-card__meta > small {
  color: var(--bf-accent-dark);
  font-size: .76rem;
  font-weight: 900;
}

.bf-training-control-card h3 {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  color: var(--bf-text);
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  line-height: 1.65;
}

.bf-training-control-card > p {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  color: var(--bf-muted);
  font-size: .91rem;
  line-height: 1.95;
  text-align: right;
}

.bf-training-control-card__flow,
.bf-training-evidence-card__path {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(18px,1fr) auto minmax(18px,1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  direction: rtl;
}

.bf-training-control-card__flow { margin-top: 22px; }

.bf-training-control-card__flow span,
.bf-training-evidence-card__path span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--bf-border);
  border-radius: 999px;
  background: #fff;
  color: var(--bf-ink);
  font-size: .69rem;
  font-weight: 850;
  white-space: nowrap;
}

.bf-training-control-card__flow i,
.bf-training-evidence-card__path i {
  position: relative;
  height: 1px;
  background: var(--bf-border-strong);
}

.bf-training-control-card__flow i::after,
.bf-training-evidence-card__path i::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bf-accent);
}

.bf-training-control-card__outcome {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--bf-border);
}

.bf-training-control-card__outcome small {
  color: var(--bf-subtle);
  font-size: .7rem;
  font-weight: 800;
}

.bf-training-control-card__outcome strong {
  color: var(--bf-text);
  font-size: .82rem;
  line-height: 1.7;
}

/* Evidence: two equal cards, identical anatomy. */
.bf-training-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(22px, 3vw, 34px);
  max-width: 1120px;
  margin: clamp(34px,4vw,50px) auto 0;
}

.bf-training-evidence-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
  min-height: 430px;
  padding: clamp(28px,3.2vw,40px);
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 52px rgba(15,23,42,.05);
  text-align: right;
}

.bf-training-evidence-card::before,
.bf-training-editorial__feature::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 86px;
  height: 4px;
  background: var(--bf-accent);
}

.bf-training-evidence-card__ghost {
  position: absolute;
  inset-inline-end: 24px;
  inset-block-start: 4px;
  color: var(--bf-ink);
  font-size: clamp(6rem,9vw,8.2rem);
  font-weight: 900;
  line-height: 1;
  opacity: .04;
  pointer-events: none;
}

.bf-training-evidence-card__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  z-index: 1;
}

.bf-training-evidence-card__brand img {
  width: 96px;
  height: 68px;
  object-fit: contain;
}

.bf-training-evidence-card__brand > div {
  display: grid;
  gap: 4px;
}

.bf-training-evidence-card__brand span {
  color: var(--bf-accent-dark);
  font-size: .75rem;
  font-weight: 900;
}

.bf-training-evidence-card__brand strong {
  color: var(--bf-subtle);
  font-size: .78rem;
  font-weight: 850;
}

.bf-training-evidence-card__type {
  position: relative;
  z-index: 1;
  margin: 4px 0 0;
  color: var(--bf-accent-dark);
  font-size: .76rem;
  font-weight: 900;
}

.bf-training-evidence-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--bf-text);
  font-size: clamp(1.28rem,1.85vw,1.65rem);
  line-height: 1.6;
}

.bf-training-evidence-card > p:not(.bf-training-evidence-card__type) {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.95;
  text-align: right;
}

.bf-training-evidence-card__path { margin-top: auto; }

.bf-training-evidence-card__facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--bf-border);
}

.bf-training-evidence-card__facts span { display: grid; gap: 4px; }
.bf-training-evidence-card__facts small { color: var(--bf-subtle); font-size: .7rem; font-weight: 800; }
.bf-training-evidence-card__facts strong { color: var(--bf-text); font-size: .78rem; line-height: 1.7; }

.bf-training-evidence-note {
  max-width: 900px;
  margin: clamp(28px,3.5vw,42px) auto 0;
  color: var(--bf-muted);
  line-height: 1.95;
  text-align: center;
}

.bf-training-evidence-note a { color: var(--bf-accent-dark); font-weight: 850; }

/* Process: contained six-stage rail, amber gates only between stages. */
.bf-training-reference__process { padding-block: clamp(26px,3vw,38px) !important; }

.bf-training-process-surface {
  position: relative;
  overflow: hidden;
  padding: clamp(40px,4.8vw,62px) clamp(28px,4.2vw,54px) clamp(32px,4vw,48px);
  border: 1px solid var(--bf-border);
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 20px 58px rgba(15,23,42,.055);
}

.bf-training-process-surface::before {
  content: "";
  position: absolute;
  inset-inline-start: clamp(28px,4vw,48px);
  inset-block-start: -1px;
  width: 82px;
  height: 4px;
  background: var(--bf-accent);
}

.bf-training-process-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  max-width: 1080px;
  margin: clamp(30px,3.8vw,44px) auto 0;
  direction: rtl;
}

.bf-training-process-rail::before {
  content: "";
  position: absolute;
  inset-inline: 8.33%;
  inset-block-start: 20px;
  height: 1px;
  background: var(--bf-border-strong);
}

.bf-training-process-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding-inline: 10px;
  text-align: center;
}

.bf-training-process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: -4px;
  inset-block-start: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bf-accent);
  box-shadow: 0 0 0 4px rgba(245,158,11,.07);
}

.bf-training-process-step__number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bf-ink);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 0 0 6px #fff;
}

.bf-training-process-step small {
  margin-top: 7px;
  color: #8997aa;
  font-family: Arial,sans-serif;
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .07em;
}

.bf-training-process-step strong {
  color: var(--bf-text);
  font-size: .86rem;
  line-height: 1.65;
}

.bf-training-process-step p {
  margin: 0;
  color: var(--bf-muted);
  font-size: .72rem;
  line-height: 1.65;
  text-align: center;
}

.bf-training-process-note {
  max-width: 930px;
  margin: clamp(28px,3vw,38px) auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--bf-border);
  color: var(--bf-muted);
  line-height: 1.95;
  text-align: right;
}

.bf-training-process-note a { color: var(--bf-accent-dark); font-weight: 850; }

/* Canonical service editorial composition: feature + stacked support list. */
.bf-training-editorial {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(300px,.92fr);
  gap: clamp(28px,3.5vw,44px);
  max-width: 1120px;
  margin: clamp(34px,4vw,50px) auto 0;
  align-items: stretch;
}

.bf-training-editorial__feature {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: clamp(30px,3.5vw,42px);
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 52px rgba(15,23,42,.05);
  color: inherit;
  text-decoration: none;
  text-align: right;
}

.bf-training-editorial__feature:hover,
.bf-training-editorial__feature:focus-visible {
  border-color: var(--bf-border-strong);
  text-decoration: none;
  outline: none;
}

.bf-training-editorial__ghost {
  position: absolute;
  inset-inline-end: 18px;
  inset-block-end: -18px;
  color: var(--bf-ink);
  font-size: clamp(6rem,11vw,9rem);
  font-weight: 900;
  line-height: 1;
  opacity: .038;
  pointer-events: none;
}

.bf-training-editorial__meta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-training-editorial__meta span { color: var(--bf-accent-dark); font-size: .76rem; font-weight: 900; }
.bf-training-editorial__meta small { color: var(--bf-subtle); font-size: .73rem; font-weight: 800; }

.bf-training-editorial__feature h3 {
  position: relative;
  max-width: 18ch;
  margin: 8px 0 0;
  color: var(--bf-text);
  font-size: clamp(1.4rem,2vw,1.85rem);
  line-height: 1.6;
}

.bf-training-editorial__feature p {
  position: relative;
  margin: 18px 0 0;
  color: var(--bf-muted);
  line-height: 1.9;
  text-align: right;
}

.bf-training-editorial__feature > strong {
  position: relative;
  margin-top: auto;
  color: var(--bf-accent-dark);
  font-size: .82rem;
}

.bf-training-editorial__list {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-rows: repeat(2,minmax(0,1fr));
  border-block: 1px solid var(--bf-border);
}

.bf-training-editorial-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "number category" "title title" "body body" "link link";
  align-content: center;
  gap: 8px 10px;
  min-width: 0;
  padding: clamp(22px,2.8vw,32px) 8px;
  border-block-end: 1px solid var(--bf-border);
  color: inherit;
  text-decoration: none;
  transition: padding-inline var(--bf-t-fast), background-color var(--bf-t-fast);
}

.bf-training-editorial-item:last-child { border-block-end: 0; }
.bf-training-editorial-item:hover,
.bf-training-editorial-item:focus-visible { padding-inline: 16px; background: rgba(255,255,255,.54); text-decoration: none; outline: none; }
.bf-training-editorial-item > span { grid-area: number; color: var(--bf-accent-dark); font-size: .74rem; font-weight: 900; }
.bf-training-editorial-item > small { grid-area: category; color: var(--bf-subtle); font-size: .74rem; font-weight: 800; }
.bf-training-editorial-item h3 { grid-area: title; max-width: 34ch; margin: 3px 0 0; color: var(--bf-text); font-size: clamp(1rem,1.35vw,1.16rem); line-height: 1.75; }
.bf-training-editorial-item p { grid-area: body; max-width: 58ch; margin: 0; color: var(--bf-muted); font-size: .86rem; line-height: 1.85; text-align: right; }
.bf-training-editorial-item > strong { grid-area: link; color: var(--bf-accent-dark); font-size: .76rem; }

@media (max-width: 980px) {
  .bf-training-control-board { grid-template-columns: 1fr; max-width: 760px; }
  .bf-training-control-card { min-height: 0; border-inline-end: 0; border-block-end: 1px solid var(--bf-border); }
  .bf-training-control-card:last-child { border-block-end: 0; }

  .bf-training-process-rail { grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 34px; }
  .bf-training-process-rail::before { display: none; }
  .bf-training-process-step:not(:last-child)::after { display: none; }

  .bf-training-editorial { grid-template-columns: 1fr; }
  .bf-training-editorial__feature { grid-column: 1; grid-row: auto; min-height: 270px; }
  .bf-training-editorial__list { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; border: 1px solid var(--bf-border); border-radius: 18px; overflow: hidden; }
  .bf-training-editorial-item { border-block-end: 0; }
  .bf-training-editorial-item:first-child { border-inline-end: 1px solid var(--bf-border); }
}

@media (max-width: 760px) {
  .bf-training-reference__scope,
  .bf-training-reference__evidence,
  .bf-training-reference__related { padding-block: 34px !important; }

  .bf-training-control-board { margin-top: 26px; border-radius: 20px; }
  .bf-training-control-card { padding: 26px 20px; }
  .bf-training-control-card__ghost { font-size: 5.5rem; }
  .bf-training-control-card__flow,
  .bf-training-evidence-card__path { grid-template-columns: 1fr; justify-items: stretch; gap: 6px; }
  .bf-training-control-card__flow i,
  .bf-training-evidence-card__path i { width: 1px; height: 16px; justify-self: center; }
  .bf-training-control-card__flow i::after,
  .bf-training-evidence-card__path i::after { inset-inline-start: -2px; top: 0; }

  .bf-training-evidence-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 26px; }
  .bf-training-evidence-card { min-height: 0; padding: 28px 22px; border-radius: 20px; }
  .bf-training-evidence-card__brand img { width: 82px; height: 58px; }
  .bf-training-evidence-card__facts { grid-template-columns: 1fr; gap: 12px; }
  .bf-training-evidence-note { text-align: right; }

  .bf-training-reference__process { padding-block: 24px !important; }
  .bf-training-process-surface { padding: 34px 20px 28px; border-radius: 20px; }
  .bf-training-process-surface::before { inset-inline-start: 20px; width: 58px; }
  .bf-training-process-rail { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin-top: 24px; }
  .bf-training-process-rail::before { display: block; inset-inline-start: auto; inset-inline-end: 20px; inset-block: 20px; width: 1px; height: auto; }
  .bf-training-process-step { grid-template-columns: 40px minmax(0,1fr); grid-template-areas: "number helper" "number title" "number body"; justify-items: start; gap: 2px 14px; min-height: 102px; padding: 0; text-align: right; }
  .bf-training-process-step__number { grid-area: number; box-shadow: 0 0 0 5px #fff; }
  .bf-training-process-step small { grid-area: helper; margin-top: 4px; }
  .bf-training-process-step strong { grid-area: title; }
  .bf-training-process-step p { grid-area: body; text-align: right; }
  .bf-training-process-step:not(:last-child)::after { display: block; inset-inline-start: auto; inset-inline-end: 17px; inset-block-start: auto; inset-block-end: 5px; width: 7px; height: 7px; }
  .bf-training-process-note { text-align: right; }

  .bf-training-editorial { gap: 20px; margin-top: 26px; }
  .bf-training-editorial__feature { min-height: 0; padding: 26px 20px; border-radius: 20px; }
  .bf-training-editorial__list { grid-template-columns: 1fr; border-radius: 16px; }
  .bf-training-editorial-item:first-child { border-inline-end: 0; border-block-end: 1px solid var(--bf-border); }
  .bf-training-editorial-item { min-height: 0; padding: 22px 18px; }
}

/* ==========================================================================
   Homepage — Visual Grammar v1.1 reference propagation (2026-09-02)
   Rhythm: contained Trust -> open Evidence -> contained Method -> open Role Paths
   -> dark CTA. Section identity comes from composition and containment, not
   alternating background colors.
   ========================================================================== */

/* Trust = contained Surface. Keep depth restrained and remove decorative wash. */
.bf-home-trust {
  position: relative;
  background: var(--bf-surface) !important;
  box-shadow: 0 18px 52px rgba(15, 23, 42, .045);
}

.bf-home-trust::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: clamp(26px, 4vw, 54px);
  width: clamp(64px, 7vw, 92px);
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--bf-accent);
  z-index: 2;
}

/* Tighter, deliberate homepage chapter rhythm. */
section.bf-home-gateway__experiences,
section.bf-home-gateway__method,
section.bf-home-gateway__audiences {
  padding-block: clamp(44px, 5.4vw, 70px);
}

.bf-home-gateway__experiences,
.bf-home-gateway__method,
.bf-home-gateway__audiences {
  border-block: 0 !important;
}

/* --------------------------------------------------------------------------
   Evidence: one featured case + two supporting cases.
   -------------------------------------------------------------------------- */
.bf-home-evidence-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  gap: clamp(20px, 2.6vw, 30px);
  align-items: stretch;
  max-width: 1120px;
  margin-inline: auto;
}

.bf-home-evidence-layout__feature,
.bf-home-evidence-layout__support {
  min-width: 0;
}

.bf-home-evidence-layout__feature > .bf-home-experience-card {
  height: 100%;
  grid-template-rows: minmax(230px, .9fr) minmax(0, 1.1fr);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .06);
}

.bf-home-evidence-layout__feature .bf-home-experience-card__visual {
  min-height: 240px;
}

.bf-home-evidence-layout__feature .bf-home-experience-card__content {
  padding: clamp(24px, 3vw, 34px);
}

.bf-home-evidence-layout__feature .bf-home-experience-card h3 {
  font-size: clamp(1.35rem, 2.25vw, 1.72rem);
}

.bf-home-evidence-layout__support {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
}

.bf-home-evidence-layout__support .bf-home-experience-card {
  grid-template-rows: 120px minmax(0, 1fr);
  min-height: 0;
  border-radius: 20px;
  box-shadow: none;
}

.bf-home-evidence-layout__support .bf-home-experience-card__visual {
  min-height: 120px;
  padding: 10px 16px;
}

.bf-home-evidence-layout__support .bf-home-experience-card__content {
  gap: 6px;
  padding: 16px 18px 18px;
}

.bf-home-evidence-layout__support .bf-home-experience-card h3 {
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.65;
}

.bf-home-evidence-layout__support .bf-home-experience-card__context,
.bf-home-evidence-layout__support .bf-home-experience-card__outcome {
  font-size: .8rem;
  line-height: 1.7;
}

.bf-home-evidence-layout__support .bf-home-experience-card__recovery,
.bf-home-evidence-layout__support .bf-home-experience-card__problem {
  transform: scale(.72);
  transform-origin: center;
}

.bf-home-evidence-layout__support .bf-home-experience-card__grid {
  display: none;
}

.bf-home-evidence-layout__support .bf-home-experience-card__visual {
  background: var(--bf-surface-soft);
}

.bf-home-evidence-layout__support .bf-home-experience-card__tool,
.bf-home-evidence-layout__support .bf-home-experience-card__disciplines {
  inset-block-end: 8px;
}

/* --------------------------------------------------------------------------
   Method: one strong homepage thesis + four intervention modes.
   The modes are service choices, not process steps.
   -------------------------------------------------------------------------- */
.bf-home-method-surface {
  position: relative;
  overflow: hidden;
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(32px, 4vw, 46px) clamp(24px, 4vw, 48px) clamp(26px, 3.5vw, 38px);
  border: 1px solid var(--bf-border);
  border-radius: 26px;
  background: var(--bf-surface);
  box-shadow: 0 18px 52px rgba(15, 23, 42, .05);
}

.bf-home-method-surface::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: clamp(24px, 4vw, 48px);
  width: 80px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--bf-accent);
}

.bf-home-method-surface--modes .bf-section-header {
  max-width: 920px;
  margin-inline: auto;
}

.bf-home-intervention-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(24px, 3vw, 34px);
  border-block: 1px solid var(--bf-border);
}

.bf-home-intervention-mode {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: clamp(22px, 2.8vw, 30px) clamp(16px, 2vw, 24px);
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.bf-home-intervention-mode + .bf-home-intervention-mode {
  border-inline-start: 1px solid var(--bf-border);
}

.bf-home-intervention-mode:hover,
.bf-home-intervention-mode:focus-visible {
  background: var(--bf-surface-soft);
}

.bf-home-intervention-mode:focus-visible {
  outline: 3px solid rgba(245, 158, 11, .30);
  outline-offset: -3px;
}

.bf-home-intervention-mode__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bf-home-intervention-mode__topline span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bf-ink);
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
}

.bf-home-intervention-mode__topline small {
  color: var(--bf-accent-dark);
  font-size: .75rem;
  font-weight: 850;
  line-height: 1.5;
}

.bf-home-intervention-mode h3 {
  margin: 6px 0 0;
  color: var(--bf-text);
  font-size: clamp(1.05rem, 1.55vw, 1.25rem);
  line-height: 1.65;
}

.bf-home-intervention-mode p {
  margin: 0;
  color: var(--bf-muted);
  font-size: .88rem;
  line-height: 1.85;
}

.bf-home-intervention-mode strong {
  margin-top: 4px;
  color: var(--bf-accent-dark);
  font-size: .78rem;
  font-weight: 850;
}

/* --------------------------------------------------------------------------
   Audience: open paired role paths. No independent card shells.
   -------------------------------------------------------------------------- */
.bf-home-role-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1120px;
  margin-inline: auto;
  border-block: 1px solid var(--bf-border);
}

.bf-home-role-path {
  min-width: 0;
  padding: clamp(28px, 3.5vw, 42px) clamp(22px, 3vw, 36px);
}

.bf-home-role-path + .bf-home-role-path {
  border-inline-start: 1px solid var(--bf-border);
}

.bf-home-role-path__topline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.bf-home-role-path__topline span {
  color: var(--bf-accent-dark);
  font-size: .75rem;
  font-weight: 950;
}

.bf-home-role-path__topline span::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 2px;
  margin-inline-start: 10px;
  vertical-align: middle;
  background: var(--bf-accent);
}

.bf-home-role-path__topline small {
  color: var(--bf-subtle);
  font-size: .76rem;
  font-weight: 850;
}

.bf-home-role-path h3 {
  margin: 0;
  color: var(--bf-text);
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.6;
}

.bf-home-role-path > p {
  margin: 14px 0 0;
  color: var(--bf-muted);
  line-height: 1.9;
}

.bf-home-role-path__flow {
  display: flex;
  align-items: center;
  margin-top: 24px;
  direction: rtl;
}

.bf-home-role-path__flow span {
  flex: 0 1 auto;
  min-width: 88px;
  padding: .45rem .72rem;
  border: 1px solid var(--bf-border);
  border-radius: 999px;
  background: #fff;
  color: var(--bf-text);
  font-size: .75rem;
  font-weight: 850;
  text-align: center;
}

.bf-home-role-path__flow i {
  position: relative;
  flex: 1 1 36px;
  height: 1px;
  margin-inline: 8px;
  background: var(--bf-border-strong);
}

.bf-home-role-path__flow i::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bf-accent);
  transform: translate(50%, -50%);
}

.bf-home-role-path__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin-top: 18px;
  color: var(--bf-subtle);
  font-size: .78rem;
  font-weight: 750;
}

.bf-home-role-path__signals span + span::before {
  content: "·";
  margin-inline: 9px;
  color: var(--bf-accent-dark);
  font-weight: 950;
}

.bf-home-role-path > a {
  display: inline-flex;
  margin-top: 22px;
  color: var(--bf-accent-dark);
  font-size: .84rem;
  font-weight: 950;
  text-decoration: none;
}

.bf-home-role-path > a:hover {
  color: var(--bf-text);
}

/* Final dark CTA remains the homepage's primary contrast moment. */
.bf-home-gateway__unsure {
  padding-block-start: clamp(34px, 4vw, 50px) !important;
}

@media (max-width: 900px) {
  .bf-home-evidence-layout {
    grid-template-columns: 1fr;
    max-width: 720px;
  }

  .bf-home-evidence-layout__support {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .bf-home-evidence-layout__feature > .bf-home-experience-card {
    grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
    grid-template-rows: auto;
  }

  .bf-home-evidence-layout__feature .bf-home-experience-card__visual {
    min-height: 250px;
    border-block-end: 0;
    border-inline-end: 1px solid var(--bf-border);
  }
}

@media (max-width: 760px) {
  section.bf-home-gateway__experiences,
  section.bf-home-gateway__method,
  section.bf-home-gateway__audiences {
    padding-block: 34px;
  }

  .bf-home-trust {
    padding-block: 28px;
  }

  .bf-home-evidence-layout,
  .bf-home-evidence-layout__support,
  .bf-home-role-paths {
    grid-template-columns: 1fr;
  }

  .bf-home-evidence-layout__feature > .bf-home-experience-card,
  .bf-home-evidence-layout__support .bf-home-experience-card {
    grid-template-columns: 1fr;
    grid-template-rows: 132px auto;
  }

  .bf-home-evidence-layout__feature .bf-home-experience-card__visual,
  .bf-home-evidence-layout__support .bf-home-experience-card__visual {
    min-height: 132px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--bf-border);
  }

  .bf-home-evidence-layout__feature .bf-home-experience-card__implementation,
  .bf-home-evidence-layout__support .bf-home-experience-card__recovery,
  .bf-home-evidence-layout__support .bf-home-experience-card__problem {
    transform: scale(.72);
  }

  .bf-home-method-surface {
    padding: 28px 18px 22px;
    border-radius: 22px;
  }

  .bf-home-method-surface::before {
    inset-inline-start: 20px;
    width: 58px;
  }

  .bf-home-intervention-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 22px;
  }

  .bf-home-intervention-mode {
    padding: 22px 16px;
  }

  .bf-home-intervention-mode:nth-child(3) {
    border-inline-start: 0;
  }

  .bf-home-intervention-mode:nth-child(n+3) {
    border-block-start: 1px solid var(--bf-border);
  }

  .bf-home-role-paths {
    border-block: 1px solid var(--bf-border);
  }

  .bf-home-role-path {
    padding: 28px 12px;
  }

  .bf-home-role-path + .bf-home-role-path {
    border-inline-start: 0;
    border-block-start: 1px solid var(--bf-border);
  }

  .bf-home-role-path__flow span {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: .42rem;
    font-size: .69rem;
  }

  .bf-home-role-path__flow i {
    flex-basis: 22px;
    margin-inline: 5px;
  }
}

/* --------------------------------------------------------------------------
   Homepage evidence: three equal-weight cases.
   Use Grid rather than Feature because the three examples have comparable
   narrative weight. Keep visual language neutral and technical, not gradient-led.
   -------------------------------------------------------------------------- */
.bf-home-evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
  max-width: 1180px;
  margin-inline: auto;
  align-items: stretch;
}

.bf-home-evidence-grid > .bf-home-experience-card {
  height: 100%;
  min-height: 470px;
  grid-template-rows: 158px minmax(0, 1fr);
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .045);
}

.bf-home-evidence-grid .bf-home-experience-card__visual {
  min-height: 158px;
  padding: 14px 16px;
  background: var(--bf-surface-soft);
}

.bf-home-evidence-grid .bf-home-experience-card__grid {
  display: none;
}

.bf-home-evidence-grid .bf-home-experience-card__content {
  gap: 7px;
  padding: 20px 20px 18px;
}

.bf-home-evidence-grid .bf-home-experience-card h3 {
  font-size: clamp(1.04rem, 1.35vw, 1.18rem);
  line-height: 1.7;
}

.bf-home-evidence-grid .bf-home-experience-card__context {
  font-size: .77rem;
  line-height: 1.65;
}

.bf-home-evidence-grid .bf-home-experience-card__outcome {
  font-size: .82rem;
  line-height: 1.72;
}

.bf-home-evidence-grid .bf-home-experience-card__implementation {
  transform: scale(.76);
}

.bf-home-evidence-grid .bf-home-experience-card__recovery,
.bf-home-evidence-grid .bf-home-experience-card__problem {
  transform: scale(.72);
  transform-origin: center;
}

.bf-home-evidence-grid .bf-home-experience-card__disciplines,
.bf-home-evidence-grid .bf-home-experience-card__tool {
  inset-block-end: 9px;
}

@media (max-width: 980px) {
  .bf-home-evidence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 820px;
  }

  .bf-home-evidence-grid > .bf-home-experience-card:last-child {
    grid-column: 1 / -1;
    width: min(100%, 400px);
    justify-self: center;
  }
}

@media (max-width: 680px) {
  .bf-home-evidence-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .bf-home-evidence-grid > .bf-home-experience-card,
  .bf-home-evidence-grid > .bf-home-experience-card:last-child {
    width: 100%;
    min-height: 0;
    grid-column: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 138px auto;
  }

  .bf-home-evidence-grid .bf-home-experience-card__visual {
    min-height: 138px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--bf-border);
  }
}


/* ----- About page — Visual Grammar v1.1 reference ----- */
/* About uses a deliberately tighter chapter rhythm than long-form pages.
   Contained surfaces already provide internal breathing room, so avoid stacking
   large wrapper padding above and below every chapter. */
.bf-about-reference .bf-about-page__identity {
  padding-block: clamp(24px, 3vw, 36px);
}

.bf-about-reference .bf-about-page__founders {
  padding-block: clamp(30px, 3.6vw, 44px);
}

.bf-about-reference .bf-about-page__cta {
  padding-top: clamp(22px, 2.8vw, 32px);
  padding-bottom: clamp(18px, 2.4vw, 28px);
}

.bf-about-reference__identity {
  background: transparent !important;
}

.bf-about-identity-surface {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 5vw, 58px) clamp(24px, 5vw, 62px);
  border: 1px solid rgba(174, 187, 205, 0.76);
  border-radius: 26px;
  background: var(--bf-surface);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.055);
}

.bf-about-identity-surface::before {
  content: "";
  position: absolute;
  inset-inline-end: clamp(26px, 4vw, 48px);
  inset-block-start: 0;
  width: 82px;
  height: 4px;
  border-radius: 999px;
  background: var(--bf-accent-dark);
}

.bf-about-identity-surface .bf-section-header {
  max-width: 900px;
  margin-inline: auto;
}

.bf-about-identity-principle {
  display: grid;
  justify-items: center;
  max-width: 980px;
  margin: clamp(30px, 4vw, 46px) auto 0;
  padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--bf-border);
  text-align: center;
}

.bf-about-identity-principle__marker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--bf-accent-dark);
  font-size: .82rem;
  font-weight: 900;
}

.bf-about-identity-principle__marker i {
  display: block;
  width: 46px;
  height: 2px;
  background: var(--bf-accent-dark);
}

.bf-about-identity-principle h2 {
  max-width: 820px;
  margin: 0;
  color: var(--bf-text);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.55;
  text-wrap: balance;
}

.bf-about-identity-principle > p {
  max-width: 820px;
  margin: 16px auto 0;
  color: var(--bf-muted);
  line-height: 2;
  text-align: center !important;
  text-align-last: center !important;
}

.bf-about-identity-flow {
  display: grid;
  grid-template-columns: auto minmax(36px, 1fr) auto minmax(36px, 1fr) auto minmax(36px, 1fr) auto;
  align-items: center;
  width: min(720px, 100%);
  margin-top: 26px;
  direction: rtl;
}

.bf-about-identity-flow span {
  display: grid;
  place-items: center;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--bf-border-strong);
  border-radius: 999px;
  background: var(--bf-surface-soft);
  color: var(--bf-text);
  font-size: .82rem;
  font-weight: 850;
  white-space: nowrap;
}

.bf-about-identity-flow i {
  position: relative;
  display: block;
  height: 1px;
  background: var(--bf-border-strong);
}

.bf-about-identity-flow i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bf-accent-dark);
  transform: translate(50%, -50%);
}

.bf-about-reference .bf-about-page__founders {
  background: transparent;
}

.bf-about-reference .bf-about-founders-grid {
  gap: clamp(20px, 2.8vw, 30px);
  margin-top: clamp(28px, 4vw, 44px);
}

.bf-about-reference .bf-about-person-card {
  position: relative;
  overflow: hidden;
  gap: 20px;
  min-height: 100%;
  padding: clamp(28px, 3.8vw, 40px);
  border: 1px solid rgba(174, 187, 205, 0.76);
  border-radius: 24px;
  background: var(--bf-surface);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.05);
}

.bf-about-reference .bf-about-person-card::before {
  content: "";
  position: absolute;
  inset-inline-end: 28px;
  inset-block-start: 0;
  width: 70px;
  height: 3px;
  border-radius: 999px;
  background: var(--bf-accent-dark);
}

.bf-about-person-card__ghost {
  position: absolute;
  inset-inline-start: clamp(20px, 3vw, 34px);
  inset-block-start: 18px;
  color: rgba(15, 23, 42, 0.045);
  font-family: Arial, sans-serif;
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.bf-about-reference .bf-about-person-card__head {
  position: relative;
  z-index: 1;
  grid-template-columns: 132px minmax(0, 1fr);
  padding-bottom: 20px;
  border-bottom: 1px solid var(--bf-border);
}

.bf-about-reference .bf-about-person-card__photo {
  width: 128px;
  height: 128px;
  border-radius: 28px;
  border: 1px solid rgba(174, 187, 205, 0.64);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.bf-about-reference .bf-about-person-card__head p {
  color: var(--bf-accent-dark);
  font-weight: 900;
}

.bf-about-reference .bf-about-person-card__head h2 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  text-wrap: balance;
}

.bf-about-reference .bf-about-person-card__body {
  position: relative;
  z-index: 1;
  line-height: 2.05;
}

.bf-about-reference .bf-about-person-card__facts {
  position: relative;
  z-index: 1;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--bf-border);
}

.bf-about-reference .bf-about-person-card__facts li::before {
  width: 6px;
  height: 6px;
  background: var(--bf-accent-dark);
}

.bf-about-reference .bf-about-page__cta .bf-cta-band {
  border-radius: 28px;
}

@media (max-width: 900px) {
  .bf-about-reference .bf-about-founders-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .bf-about-reference .bf-about-page__identity {
    padding-block: 22px;
  }

  .bf-about-reference .bf-about-page__founders {
    padding-block: 26px;
  }

  .bf-about-reference .bf-about-page__cta {
    padding-top: 20px;
    padding-bottom: 16px;
  }

  .bf-about-identity-surface {
    padding: 30px 18px;
    border-radius: 22px;
  }

  .bf-about-identity-surface::before {
    inset-inline-end: 20px;
    width: 58px;
  }

  .bf-about-identity-principle {
    margin-top: 28px;
    padding-top: 24px;
  }

  .bf-about-identity-principle h2 {
    font-size: clamp(1.35rem, 7vw, 1.8rem);
  }

  .bf-about-identity-principle > p {
    text-align: right !important;
    text-align-last: right !important;
  }

  .bf-about-identity-flow {
    grid-template-columns: 1fr;
    gap: 0;
    width: min(320px, 100%);
  }

  .bf-about-identity-flow i {
    width: 1px;
    height: 24px;
    margin-inline: auto;
  }

  .bf-about-identity-flow i::after {
    top: 50%;
    right: 50%;
  }

  .bf-about-reference .bf-about-person-card {
    padding: 24px 18px;
    border-radius: 20px;
  }

  .bf-about-reference .bf-about-person-card::before {
    inset-inline-end: 18px;
    width: 58px;
  }

  .bf-about-person-card__ghost {
    inset-inline-start: 16px;
    inset-block-start: 16px;
    font-size: 4.4rem;
  }

  .bf-about-reference .bf-about-person-card__head {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .bf-about-reference .bf-about-person-card__photo {
    width: 132px;
    height: 132px;
  }

  .bf-about-reference .bf-about-person-card__head :where(p, h2) {
    text-align: center;
  }
}


/* ========================================================================== */
/* /contact — Visual Grammar v1.1                                              */
/* Hero -> contained form -> routing board -> compact authority conclusion.    */
/* The obsolete post-conversation process chapter was removed.                 */
/* ========================================================================== */

.bf-contact-reference__form {
  padding-block: clamp(30px, 3.6vw, 46px) !important;
}

.bf-contact-reference__intent {
  padding-block: clamp(24px, 3vw, 38px) !important;
}

.bf-contact-reference__trust {
  padding-block-start: clamp(20px, 2.6vw, 30px) !important;
  padding-block-end: clamp(16px, 2.1vw, 24px) !important;
}

.bf-contact-reference__form .bf-contact-panel {
  position: relative;
  overflow: hidden;
  width: min(100%, 900px);
  margin-inline: auto;
  padding: clamp(26px, 3.5vw, 40px);
  border: 1px solid rgba(174, 187, 205, 0.68);
  border-radius: 26px;
  background: var(--bf-surface);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.055);
}

.bf-contact-reference__form .bf-contact-panel::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: clamp(24px, 3vw, 36px);
  width: 82px;
  height: 4px;
  border-radius: 999px;
  background: var(--bf-accent-dark);
}

.bf-contact-reference__form .bf-contact-panel__header {
  margin-bottom: clamp(18px, 2.4vw, 26px);
}

.bf-contact-intent-surface {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 3.8vw, 46px) clamp(22px, 3.4vw, 40px) clamp(24px, 3.2vw, 38px);
  border: 1px solid rgba(174, 187, 205, 0.68);
  border-radius: 26px;
  background: var(--bf-surface);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.05);
}

.bf-contact-intent-surface::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: clamp(24px, 3vw, 36px);
  width: 82px;
  height: 4px;
  border-radius: 999px;
  background: var(--bf-accent-dark);
}

.bf-contact-intent-surface .bf-section-header {
  margin-bottom: clamp(20px, 2.8vw, 30px);
}

.bf-contact-intent-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(174, 187, 205, 0.62);
  border-radius: 22px;
  background: var(--bf-surface);
}

.bf-contact-intent-item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: clamp(22px, 3vw, 32px);
  color: var(--bf-text);
  text-decoration: none;
  transition: background-color 160ms ease;
}

.bf-contact-intent-item:nth-child(odd) {
  border-inline-end: 1px solid rgba(174, 187, 205, 0.55);
}

.bf-contact-intent-item:nth-child(-n+2) {
  border-block-end: 1px solid rgba(174, 187, 205, 0.55);
}

.bf-contact-intent-item:hover {
  background: rgba(249, 250, 251, 0.82);
}

.bf-contact-intent-item__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-contact-intent-item__number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bf-ink);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
}

.bf-contact-intent-item__meta small {
  color: var(--bf-accent-dark);
  font-size: .82rem;
  font-weight: 900;
}

.bf-contact-intent-item h3,
.bf-contact-intent-item p {
  margin: 0;
}

.bf-contact-intent-item h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.38rem);
  line-height: 1.6;
}

.bf-contact-intent-item p {
  color: var(--bf-muted);
  line-height: 1.95;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
}

.bf-contact-intent-item__flow {
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.bf-contact-intent-item__flow span {
  padding: .36rem .62rem;
  border: 1px solid rgba(174, 187, 205, 0.72);
  border-radius: 999px;
  background: #fff;
  color: var(--bf-text);
  font-size: .72rem;
  font-weight: 850;
  white-space: nowrap;
}

.bf-contact-intent-item__flow i {
  position: relative;
  height: 1px;
  background: var(--bf-border-strong);
}

.bf-contact-intent-item__flow i::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bf-accent-dark);
  transform: translate(-50%, -50%);
}

.bf-contact-intent-item > strong {
  justify-self: start;
  margin-top: 2px;
  color: var(--bf-accent-dark);
  font-size: .86rem;
}

.bf-contact-reference__trust .bf-authority-band {
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(28px, 3.8vw, 44px);
  background: var(--bf-ink);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.bf-contact-reference__trust .bf-authority-band__content {
  max-width: 920px;
}

/* Contact ends with a compact authority block; don't stack page + footer gaps. */
.bf-page--contact {
  padding-bottom: 0 !important;
}

@media (max-width: 900px) {
  .bf-contact-reference__form {
    padding-block: 28px !important;
  }

  .bf-contact-reference__intent {
    padding-block: 24px !important;
  }

  .bf-contact-reference__trust {
    padding-block: 20px 16px !important;
  }

  .bf-contact-intent-surface {
    padding: 28px 20px 22px;
    border-radius: 22px;
  }

  .bf-contact-intent-board {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .bf-contact-intent-item:nth-child(odd) {
    border-inline-end: 0;
  }

  .bf-contact-intent-item:nth-child(-n+2),
  .bf-contact-intent-item:not(:last-child) {
    border-block-end: 1px solid rgba(174, 187, 205, 0.55);
  }
}

@media (max-width: 560px) {
  .bf-contact-reference__form,
  .bf-contact-reference__intent {
    padding-block: 20px !important;
  }

  .bf-contact-reference__trust {
    padding-block: 18px 12px !important;
  }

  .bf-contact-reference__form .bf-contact-panel,
  .bf-contact-intent-surface {
    padding: 24px 16px 20px;
    border-radius: 20px;
  }

  .bf-contact-intent-item {
    padding: 22px 18px;
  }

  .bf-contact-intent-item__flow {
    grid-template-columns: auto minmax(14px, 1fr) auto minmax(14px, 1fr) auto;
    gap: 6px;
  }

  .bf-contact-intent-item__flow span {
    padding-inline: .5rem;
    font-size: .68rem;
  }

  .bf-contact-reference__trust .bf-authority-band {
    padding: 26px 22px;
  }
}

/* ================================================================
   Visual Grammar v1.1 — consultants / contractors audience landing
   Reference composition: Hero → execution board → editorial guide → CTA
   ================================================================ */
.bf-delivery-reference__services {
  padding-block: clamp(22px, 2.8vw, 32px) !important;
}

.bf-delivery-reference__related {
  padding-block: clamp(16px, 2.2vw, 26px) !important;
}

.bf-delivery-reference__cta {
  padding-block: clamp(10px, 1.6vw, 18px) clamp(8px, 1.2vw, 14px) !important;
}

.bf-delivery-section-header--standard .bf-section-header__title,
.bf-delivery-section-header--standard h2 {
  font-size: clamp(1.72rem, 3.15vw, 2.45rem);
}

.bf-delivery-control-surface {
  position: relative;
  overflow: hidden;
  margin-top: clamp(20px, 2.6vw, 30px);
  padding: 1px;
  border: 1px solid var(--bf-border);
  border-radius: 26px;
  background: var(--bf-surface);
  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.05);
}

.bf-delivery-control-surface::after {
  content: "";
  position: absolute;
  inset-inline-end: clamp(26px, 3vw, 42px);
  inset-block-start: 0;
  width: 82px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--bf-accent);
}

.bf-delivery-control-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 24px;
}

.bf-delivery-control-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 0;
  min-height: 360px;
  padding: clamp(26px, 3vw, 34px);
  overflow: hidden;
  background: var(--bf-surface);
}

.bf-delivery-control-item:not(:nth-child(3n)) {
  border-inline-end: 1px solid var(--bf-border);
}

.bf-delivery-control-item:nth-child(-n + 6) {
  border-block-end: 1px solid var(--bf-border);
}

.bf-delivery-control-item--wide {
  grid-column: 1 / -1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.25fr) minmax(250px, .95fr);
  grid-template-areas:
    "head title flow"
    "body body outcome";
  align-items: center;
  gap: 14px 28px;
}

.bf-delivery-control-item__ghost {
  position: absolute;
  inset-inline-start: 18px;
  inset-block-start: -22px;
  color: rgba(15, 23, 42, 0.045);
  font-family: Arial, sans-serif;
  font-size: clamp(5.2rem, 8vw, 7.4rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.bf-delivery-control-item__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-delivery-control-item__head > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bf-ink);
  font-size: .73rem;
  font-weight: 900;
}

.bf-delivery-control-item__head > span::after {
  content: "";
  width: 30px;
  height: 2px;
  border-radius: 999px;
  background: var(--bf-accent);
}

.bf-delivery-control-item__head small {
  color: var(--bf-accent-dark);
  font-size: .76rem;
  font-weight: 900;
}

.bf-delivery-control-item h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--bf-text);
  font-size: clamp(1.08rem, 1.45vw, 1.28rem);
  line-height: 1.7;
}

.bf-delivery-control-item > p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--bf-muted);
  font-size: .88rem;
  line-height: 1.95;
  text-align: right;
}

.bf-delivery-control-item .bf-services-micro-flow {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-block: 1px 2px;
}

.bf-delivery-control-item__outcome {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid rgba(216, 224, 236, .86);
}

.bf-delivery-control-item__outcome strong {
  color: var(--bf-accent-dark);
  font-size: .72rem;
  font-weight: 900;
}

.bf-delivery-control-item__outcome span {
  color: var(--bf-subtle);
  font-size: .79rem;
  line-height: 1.75;
}

.bf-delivery-control-item__link {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  color: var(--bf-accent-dark);
  font-size: .8rem;
  font-weight: 900;
  text-decoration: none;
}

.bf-delivery-control-item__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.bf-delivery-control-item--wide .bf-delivery-control-item__head { grid-area: head; }
.bf-delivery-control-item--wide h3 { grid-area: title; }
.bf-delivery-control-item--wide .bf-services-micro-flow { grid-area: flow; margin: 0; }
.bf-delivery-control-item--wide > p { grid-area: body; }
.bf-delivery-control-item--wide .bf-delivery-control-item__outcome { grid-area: outcome; margin-top: 0; }

.bf-delivery-editorial {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, .68fr);
  align-items: stretch;
  gap: clamp(28px, 4vw, 46px);
  max-width: 1120px;
  margin: clamp(20px, 2.7vw, 30px) auto 0;
}

.bf-delivery-editorial__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: clamp(28px, 3.6vw, 40px);
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 26px;
  background: var(--bf-surface);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.05);
}

.bf-delivery-editorial__feature::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 0;
  width: 84px;
  height: 4px;
  border-radius: 999px 0 0 999px;
  background: var(--bf-accent);
}

.bf-delivery-editorial__ghost {
  position: absolute;
  inset-inline-start: 20px;
  inset-block-end: -18px;
  color: rgba(15, 23, 42, .045);
  font-family: Arial, sans-serif;
  font-size: 8rem;
  font-weight: 900;
  line-height: 1;
}

.bf-delivery-editorial__meta {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
}

.bf-delivery-editorial__meta span {
  color: var(--bf-accent-dark);
  font-size: .78rem;
  font-weight: 900;
}

.bf-delivery-editorial__meta small {
  color: var(--bf-subtle);
  font-size: .75rem;
  font-weight: 800;
}

.bf-delivery-editorial__feature h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--bf-text);
  font-size: clamp(1.65rem, 2.8vw, 2.35rem);
  line-height: 1.6;
  text-wrap: balance;
}

.bf-delivery-editorial__feature p {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  color: var(--bf-muted);
  line-height: 2;
}

.bf-delivery-editorial__feature strong {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 24px;
  color: var(--bf-accent-dark);
  font-size: .86rem;
}

.bf-delivery-editorial__list {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.bf-delivery-editorial-item {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: clamp(22px, 3vw, 30px) 4px;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid var(--bf-border);
}

.bf-delivery-editorial-item:last-child {
  border-bottom: 1px solid var(--bf-border);
}

.bf-delivery-editorial-item > span {
  color: var(--bf-accent-dark);
  font-size: .76rem;
  font-weight: 900;
}

.bf-delivery-editorial-item small {
  color: var(--bf-subtle);
  font-size: .74rem;
  font-weight: 800;
}

.bf-delivery-editorial-item h3 {
  margin: 3px 0 0;
  color: var(--bf-text);
  font-size: clamp(1.05rem, 1.45vw, 1.22rem);
  line-height: 1.75;
}

.bf-delivery-editorial-item p {
  margin: 2px 0 0;
  color: var(--bf-muted);
  font-size: .86rem;
  line-height: 1.85;
}

.bf-delivery-editorial-item strong {
  margin-top: 8px;
  color: var(--bf-accent-dark);
  font-size: .8rem;
}


.bf-delivery-reference__cta .bf-cta-band {
  margin-inline: auto;
}

@media (max-width: 1040px) {
  .bf-delivery-control-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-delivery-control-item:not(:nth-child(3n)) { border-inline-end: 0; }
  .bf-delivery-control-item:nth-child(-n + 6) { border-block-end: 0; }
  .bf-delivery-control-item:nth-child(odd):not(.bf-delivery-control-item--wide) { border-inline-end: 1px solid var(--bf-border); }
  .bf-delivery-control-item:not(:nth-last-child(-n + 2)) { border-block-end: 1px solid var(--bf-border); }

  .bf-delivery-control-item--wide {
    grid-column: 1 / -1;
  }

  .bf-delivery-editorial {
    grid-template-columns: 1fr;
  }

  .bf-delivery-editorial__feature {
    min-height: 320px;
  }

  .bf-delivery-editorial__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 28px;
  }

  .bf-delivery-editorial-item:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 720px) {
  .bf-delivery-reference__services {
    padding-block: 18px !important;
  }

  .bf-delivery-reference__related {
    padding-block: 16px !important;
  }

  .bf-delivery-reference__cta {
    padding-block: 12px 10px !important;
  }

  .bf-delivery-control-surface {
    margin-top: 18px;
    border-radius: 20px;
  }

  .bf-delivery-control-surface::after {
    inset-inline-end: 20px;
    width: 58px;
  }

  .bf-delivery-control-board {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .bf-delivery-control-item,
  .bf-delivery-control-item--wide {
    display: flex;
    min-height: 0;
    padding: 24px 20px;
    border-inline-end: 0 !important;
    border-block-end: 1px solid var(--bf-border) !important;
  }

  .bf-delivery-control-item:last-child {
    border-block-end: 0 !important;
  }

  .bf-delivery-control-item__ghost {
    inset-block-start: -9px;
    font-size: 5.5rem;
  }

  .bf-delivery-editorial {
    margin-top: 18px;
    gap: 20px;
  }

  .bf-delivery-editorial__feature {
    min-height: 0;
    padding: 26px 22px;
    border-radius: 20px;
  }

  .bf-delivery-editorial__list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .bf-delivery-editorial-item:last-child {
    border-bottom: 1px solid var(--bf-border);
  }
}

/* Consultants / contractors correction — keep the three maturity paths;
   remove only the optional Outcome callout from markup. */
.bf-delivery-reference__paths {
  padding-block: clamp(16px, 2.1vw, 26px) !important;
}

.bf-delivery-reference__paths .bf-section-header {
  margin-bottom: 0;
}

.bf-delivery-path-grid {
  margin-top: clamp(20px, 2.6vw, 28px);
  gap: clamp(18px, 2.2vw, 24px);
}

.bf-delivery-path-grid .bf-engagement-path-card {
  min-height: 100%;
  padding: clamp(24px, 2.7vw, 30px);
  border-color: var(--bf-border);
  background: var(--bf-surface);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.045);
}

.bf-delivery-path-grid .bf-engagement-path-card__head {
  margin-bottom: 12px;
}

.bf-delivery-path-grid .bf-engagement-path-card__fit {
  margin-top: 18px;
  padding-top: 16px;
}

.bf-delivery-path-grid .bf-engagement-path-card__fit ul {
  gap: .55rem;
}

.bf-delivery-path-grid .bf-engagement-path-card__action {
  padding-top: 12px;
}

@media (max-width: 1080px) {
  .bf-delivery-path-grid {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  .bf-delivery-reference__paths {
    padding-block: 16px !important;
  }

  .bf-delivery-path-grid {
    margin-top: 18px;
  }
}


/* ========================================================================== 
   /services/for-clients — Visual Grammar v1.1 propagation (2026-09-02)
   Hero → client responsibility control board → lifecycle control rail → CTA
   ========================================================================== */

.bf-client-reference {
  background: transparent;
}

.bf-client-reference .bf-section-header--center {
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}

.bf-client-reference .bf-section-header--center :where(
  .bf-section-header__eyebrow,
  .bf-section-header__title,
  .bf-section-header__intro
) {
  margin-inline: auto;
  text-align: center;
  text-align-last: center;
}

.bf-client-reference .bf-section-header__intro {
  max-width: 72ch;
}

.bf-client-section-header--standard .bf-section-header__title {
  font-size: clamp(1.42rem, 2.15vw, 2.08rem);
}

.bf-client-reference__scope {
  scroll-margin-top: clamp(88px, 10vw, 132px);
  padding-block: clamp(26px, 3.5vw, 42px) !important;
}

.bf-client-scope-surface {
  margin-top: clamp(22px, 2.8vw, 34px);
}

/* The client lifecycle is sequential, so it uses one contained Rail rather
   than the old guide + table matrix. */
.bf-client-reference__lifecycle {
  padding-block: clamp(22px, 3vw, 34px) !important;
}

.bf-client-lifecycle-surface {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 4.2vw, 52px) clamp(24px, 3.5vw, 42px) clamp(28px, 3.4vw, 40px);
  border: 1px solid rgba(174, 187, 205, .72);
  border-radius: 24px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 20px 58px rgba(15,23,42,.055);
}

.bf-client-lifecycle-surface::before {
  content: "";
  position: absolute;
  inset-inline-end: clamp(24px, 3.5vw, 42px);
  inset-block-start: 0;
  width: 82px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--bf-accent);
}

.bf-client-lifecycle-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  max-width: 1080px;
  margin: clamp(26px, 3.2vw, 38px) auto 0;
  direction: rtl;
}

.bf-client-lifecycle-rail::before {
  content: "";
  position: absolute;
  inset-inline: 10%;
  inset-block-start: 20px;
  height: 1px;
  background: var(--bf-border-strong);
}

.bf-client-lifecycle-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding-inline: 10px;
  text-align: center;
}

.bf-client-lifecycle-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: -4px;
  inset-block-start: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bf-accent);
  box-shadow: 0 0 0 4px rgba(245,158,11,.07);
}

.bf-client-lifecycle-step__number {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bf-ink);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 0 0 6px #fff;
}

.bf-client-lifecycle-step small {
  margin-top: 7px;
  color: #8997aa;
  font-family: Arial, sans-serif;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .07em;
}

.bf-client-lifecycle-step strong {
  color: var(--bf-text);
  font-size: .94rem;
  line-height: 1.6;
}

.bf-client-lifecycle-step p {
  margin: 0;
  color: var(--bf-muted);
  font-size: .77rem;
  line-height: 1.75;
  text-align: center;
}

.bf-client-lifecycle-step__output {
  width: 100%;
  margin-top: 7px;
  padding-top: 10px;
  border-top: 1px solid rgba(216,224,236,.84);
  color: var(--bf-accent-dark);
  font-size: .7rem;
  font-weight: 850;
  line-height: 1.65;
}

.bf-client-reference__cta {
  padding-block-start: clamp(14px, 1.8vw, 22px) !important;
  padding-block-end: clamp(12px, 1.5vw, 18px) !important;
}

@media (max-width: 980px) {
  .bf-client-lifecycle-rail {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 620px;
  }

  .bf-client-lifecycle-rail::before {
    inset-inline-start: auto;
    inset-inline-end: 20px;
    inset-block: 20px;
    width: 1px;
    height: auto;
  }

  .bf-client-lifecycle-step {
    grid-template-columns: 40px minmax(0,1fr);
    grid-template-areas:
      "number helper"
      "number title"
      "number body"
      "number output";
    justify-items: start;
    gap: 2px 14px;
    min-height: 112px;
    padding: 0;
    text-align: right;
  }

  .bf-client-lifecycle-step__number { grid-area: number; box-shadow: 0 0 0 5px #fff; }
  .bf-client-lifecycle-step small { grid-area: helper; margin-top: 3px; }
  .bf-client-lifecycle-step strong { grid-area: title; }
  .bf-client-lifecycle-step p { grid-area: body; text-align: right; }
  .bf-client-lifecycle-step__output { grid-area: output; width: auto; margin-top: 3px; text-align: right; }

  .bf-client-lifecycle-step:not(:last-child)::after {
    inset-inline-start: auto;
    inset-inline-end: 17px;
    inset-block-start: auto;
    inset-block-end: 4px;
  }
}

@media (max-width: 760px) {
  .bf-client-reference__scope {
    padding-block: 22px !important;
  }

  .bf-client-reference__lifecycle {
    padding-block: 18px !important;
  }

  .bf-client-lifecycle-surface {
    padding: 30px 18px 24px;
    border-radius: 20px;
  }

  .bf-client-lifecycle-surface::before {
    inset-inline-end: 18px;
    width: 58px;
  }

  .bf-client-reference__cta {
    padding-block: 12px !important;
  }
}

/* ================================================================
   Visual Grammar v1.1 — Insights editorial archive
   /insights is a publication surface, not a card catalogue.
   Default state: editorial lead + flat two-column archive.
   Search/filter state: uniform discovery list.
   ================================================================ */
.bf-insights-list-section {
  padding-block: clamp(34px, 4vw, 50px) !important;
}

.bf-insights-section-header {
  max-width: 880px;
  margin-inline: auto;
  margin-bottom: clamp(22px, 3vw, 30px) !important;
}

.bf-insights-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.65fr);
  align-items: center;
  gap: 18px 24px;
  margin-bottom: clamp(26px, 3vw, 34px);
  padding: 14px 18px;
  border: 1px solid rgba(174, 187, 205, 0.78);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.045);
}

.bf-insights-controls .bf-insights-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin: 0;
}

.bf-insights-controls .bf-insights-filter {
  position: relative;
  min-height: 40px;
  padding: 7px 8px 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bf-muted);
  font-size: 0.88rem;
  font-weight: 760;
  transform: none;
}

.bf-insights-controls .bf-insights-filter::after {
  content: "";
  position: absolute;
  inset-inline: 8px;
  inset-block-end: 2px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transition: background-color 160ms ease, inset-inline 160ms ease;
}

.bf-insights-controls .bf-insights-filter:hover,
.bf-insights-controls .bf-insights-filter:focus-visible {
  color: var(--bf-text);
  border-color: transparent;
  background: transparent;
  transform: none;
}

.bf-insights-controls .bf-insights-filter:hover::after,
.bf-insights-controls .bf-insights-filter:focus-visible::after {
  background: var(--bf-border-strong);
}

.bf-insights-controls .bf-insights-filter[aria-pressed="true"],
.bf-insights-controls .bf-insights-filter.is-active {
  border-color: transparent;
  background: transparent;
  color: var(--bf-text);
}

.bf-insights-controls .bf-insights-filter[aria-pressed="true"]::after,
.bf-insights-controls .bf-insights-filter.is-active::after {
  inset-inline: 5px;
  background: var(--bf-accent-dark);
}

.bf-insights-controls .bf-insights-filter__count,
.bf-insights-controls .bf-insights-filter[aria-pressed="true"] .bf-insights-filter__count,
.bf-insights-controls .bf-insights-filter.is-active .bf-insights-filter__count {
  min-width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bf-subtle);
  font-size: 0.72rem;
  font-weight: 800;
}

.bf-insights-controls .bf-insights-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.bf-insights-controls .bf-insights-search__field {
  width: 100%;
  min-height: 48px;
  border-color: rgba(174, 187, 205, 0.72);
  border-radius: 14px;
  background: var(--bf-surface-soft);
  box-shadow: none;
}

.bf-insights-controls .bf-insights-search__field:focus-within {
  background: var(--bf-surface);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.10);
}

.bf-insights-controls .bf-insights-search__status {
  min-width: 66px;
  text-align: center;
}

.bf-insights-editorial-label {
  display: flex;
  align-items: baseline;
  gap: 10px 18px;
  margin: 0 0 16px;
}

.bf-insights-editorial-label > span {
  color: var(--bf-accent-dark);
  font-size: 0.84rem;
  font-weight: 900;
}

.bf-insights-editorial-label > p {
  margin: 0;
  color: var(--bf-subtle);
  font-size: 0.88rem;
}

.bf-insights-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px 24px;
  align-items: stretch;
}

.bf-insights-article {
  position: relative;
  min-width: 0;
  color: var(--bf-text);
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.bf-insights-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  color: var(--bf-subtle);
  font-size: 0.77rem;
  line-height: 1.6;
}

.bf-insights-article__category {
  color: var(--bf-accent-dark);
  font-weight: 850;
}

.bf-insights-article h3 {
  margin: 12px 0 0;
  color: var(--bf-text);
  line-height: 1.75;
  text-wrap: balance;
}

.bf-insights-article p {
  display: -webkit-box;
  margin: 10px 0 0;
  overflow: hidden;
  color: var(--bf-muted);
  line-height: 1.95;
  text-align: justify;
  text-align-last: right;
  text-justify: inter-word;
  -webkit-box-orient: vertical;
}

.bf-insights-article--feature {
  grid-column: span 6;
  grid-row: span 2;
  display: grid;
  align-content: start;
  min-height: 372px;
  padding: clamp(26px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(174, 187, 205, 0.82);
  border-radius: 24px;
  background: var(--bf-surface);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.055);
}

.bf-insights-article--feature::before {
  content: "";
  position: absolute;
  inset-inline-end: 28px;
  inset-block-start: 0;
  width: 88px;
  height: 4px;
  border-radius: 999px;
  background: var(--bf-accent-dark);
}

.bf-insights-article--feature .bf-insights-article__ghost {
  position: absolute;
  inset-inline-start: 26px;
  inset-block-end: 10px;
  color: rgba(148, 163, 184, 0.12);
  font-family: Arial, sans-serif;
  font-size: clamp(5.4rem, 9vw, 8.5rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.bf-insights-article--feature h3 {
  max-width: 90%;
  margin-top: clamp(18px, 2.4vw, 26px);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.65;
}

.bf-insights-article--feature p {
  max-width: 92%;
  font-size: 0.94rem;
  -webkit-line-clamp: 5;
}

.bf-insights-article--support {
  grid-column: span 6;
  display: grid;
  align-content: start;
  min-height: 176px;
  padding: 20px 4px 18px;
  border-top: 1px solid var(--bf-border-strong);
}

.bf-insights-article--support .bf-insights-article__ghost {
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 13px;
  color: rgba(148, 163, 184, 0.18);
  font-family: Arial, sans-serif;
  font-size: 2.55rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.bf-insights-article--support h3 {
  max-width: 92%;
  font-size: clamp(1.03rem, 1.7vw, 1.22rem);
}

.bf-insights-article--support p {
  font-size: 0.86rem;
  -webkit-line-clamp: 3;
}

.bf-insights-article--archive {
  grid-column: span 6;
  display: grid;
  align-content: start;
  min-height: 210px;
  padding: 24px 4px 20px;
  border-top: 1px solid var(--bf-border);
}

.bf-insights-article--archive h3 {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.bf-insights-article--archive p {
  font-size: 0.85rem;
  -webkit-line-clamp: 3;
}

.bf-insights-article:hover,
.bf-insights-article:focus-visible {
  color: var(--bf-text);
}

.bf-insights-article--feature:hover,
.bf-insights-article--feature:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, 0.48);
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.075);
}

.bf-insights-article--support:hover,
.bf-insights-article--support:focus-visible,
.bf-insights-article--archive:hover,
.bf-insights-article--archive:focus-visible {
  border-top-color: rgba(245, 158, 11, 0.68);
}

.bf-insights-article:focus-visible {
  outline: 3px solid rgba(245, 158, 11, 0.25);
  outline-offset: 4px;
}

/* Search/filter is a discovery mode: remove default editorial hierarchy. */
.bf-insights-list-section.is-filtering .bf-insights-editorial-label {
  display: none;
}

.bf-insights-list-section.is-filtering .bf-insights-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}

.bf-insights-list-section.is-filtering .bf-insights-article {
  grid-column: auto;
  grid-row: auto;
  display: grid;
  align-content: start;
  min-height: 205px;
  padding: 24px 4px 20px;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--bf-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.bf-insights-list-section.is-filtering .bf-insights-article::before,
.bf-insights-list-section.is-filtering .bf-insights-article__ghost {
  display: none;
}

.bf-insights-list-section.is-filtering .bf-insights-article h3 {
  max-width: none;
  margin-top: 12px;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.bf-insights-list-section.is-filtering .bf-insights-article p {
  max-width: none;
  font-size: 0.85rem;
  -webkit-line-clamp: 3;
}

.bf-insights-list-section.is-filtering .bf-insights-article:hover,
.bf-insights-list-section.is-filtering .bf-insights-article:focus-visible {
  border-top-color: rgba(245, 158, 11, 0.68);
  box-shadow: none;
}

.bf-insights-cta-section {
  padding-block: clamp(18px, 2.5vw, 28px) clamp(14px, 2vw, 22px) !important;
}

@media (max-width: 1020px) {
  .bf-insights-controls {
    grid-template-columns: 1fr;
  }

  .bf-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-insights-article--feature {
    grid-column: auto;
    grid-row: span 2;
    min-height: 300px;
  }

  .bf-insights-article--support,
  .bf-insights-article--archive {
    grid-column: auto;
  }
}

@media (max-width: 720px) {
  .bf-insights-list-section {
    padding-block: 28px !important;
  }

  .bf-insights-section-header {
    margin-bottom: 20px !important;
  }

  .bf-insights-controls {
    gap: 12px;
    margin-bottom: 24px;
    padding: 12px 14px;
    border-radius: 16px;
  }

  .bf-insights-controls .bf-insights-filters {
    flex-wrap: nowrap;
    margin-inline: -14px;
    padding-inline: 14px;
    padding-bottom: 4px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .bf-insights-controls .bf-insights-filter {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .bf-insights-controls .bf-insights-search {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .bf-insights-controls .bf-insights-search__status {
    padding-inline: 2px;
    text-align: right;
  }

  .bf-insights-editorial-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 12px;
  }

  .bf-insights-grid,
  .bf-insights-list-section.is-filtering .bf-insights-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .bf-insights-article--feature,
  .bf-insights-article--support,
  .bf-insights-article--archive,
  .bf-insights-list-section.is-filtering .bf-insights-article {
    grid-column: auto;
    grid-row: auto;
  }

  .bf-insights-article--feature {
    min-height: 0;
    margin-bottom: 18px;
    padding: 24px 20px;
    border-radius: 20px;
  }

  .bf-insights-article--feature h3 {
    max-width: none;
    font-size: clamp(1.25rem, 6vw, 1.55rem);
  }

  .bf-insights-article--feature p {
    max-width: none;
    -webkit-line-clamp: 4;
  }

  .bf-insights-article--support,
  .bf-insights-article--archive,
  .bf-insights-list-section.is-filtering .bf-insights-article {
    min-height: 0;
    padding: 21px 2px 18px;
  }

  .bf-insights-article--support .bf-insights-article__ghost {
    inset-inline-start: 0;
  }

  .bf-insights-cta-section {
    padding-block: 14px 12px !important;
  }
}

/* ==========================================================================
   /experiences — Visual Grammar v1.1 evidence hub (2026-09-02)
   Canvas hero -> contained evidence map -> compact dark CTA.
   The category map is one shared surface, not five independent cards.
   ========================================================================== */
.bf-experiences-index__map {
  padding-block: clamp(34px, 4vw, 50px);
}

.bf-experiences-index__section-header {
  max-width: 900px;
}

.bf-experiences-index__section-header .bf-section-header__intro {
  max-width: 820px;
}

.bf-experiences-evidence-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(24px, 3vw, 32px);
  overflow: hidden;
  border: 1px solid var(--bf-border);
  border-radius: 24px;
  background: var(--bf-border);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.055);
}

.bf-experiences-evidence-cell {
  position: relative;
  display: flex;
  grid-column: span 2;
  min-height: 282px;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: clamp(24px, 2.7vw, 32px);
  overflow: hidden;
  background: #fff;
  color: var(--bf-ink);
  text-decoration: none;
  isolation: isolate;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.bf-experiences-evidence-cell:nth-child(4),
.bf-experiences-evidence-cell:nth-child(5) {
  grid-column: span 3;
  min-height: 250px;
}

.bf-experiences-evidence-cell::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: clamp(24px, 2.7vw, 32px);
  width: 70px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--bf-accent);
  transform: scaleX(.45);
  transform-origin: right center;
  transition: transform 150ms ease;
}

.bf-experiences-evidence-cell:hover,
.bf-experiences-evidence-cell:focus-visible {
  z-index: 2;
  background: #fbfcfe;
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .32);
  outline: none;
}

.bf-experiences-evidence-cell:hover::before,
.bf-experiences-evidence-cell:focus-visible::before {
  transform: scaleX(1);
}

.bf-experiences-evidence-cell__ghost {
  position: absolute;
  left: 18px;
  bottom: -20px;
  z-index: -1;
  color: rgba(11, 18, 32, .045);
  font-size: clamp(5.6rem, 8vw, 8.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.08em;
  pointer-events: none;
  user-select: none;
}

.bf-experiences-evidence-cell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 30px;
}

.bf-experiences-evidence-cell__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bf-ink);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
}

.bf-experiences-evidence-cell__head small {
  color: var(--bf-accent-dark);
  font-size: .78rem;
  font-weight: 850;
}

.bf-experiences-evidence-cell h2 {
  margin: 2px 0 0;
  color: var(--bf-ink);
  font-size: clamp(1.25rem, 1.55vw, 1.48rem);
  line-height: 1.55;
}

.bf-experiences-evidence-cell p {
  max-width: 38rem;
  margin: 0;
  color: var(--bf-muted);
  font-size: .94rem;
  line-height: 1.95;
}

.bf-experiences-evidence-cell > strong {
  margin-top: auto;
  color: var(--bf-ink);
  font-size: .88rem;
  font-weight: 850;
  transition: color 140ms ease;
}

.bf-experiences-evidence-cell:hover > strong,
.bf-experiences-evidence-cell:focus-visible > strong {
  color: var(--bf-accent-dark);
}

.bf-experiences-evidence-flow {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 25px;
  color: #4f6075;
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}

.bf-experiences-evidence-flow i {
  position: relative;
  display: block;
  width: 24px;
  height: 1px;
  flex: 0 0 24px;
  background: #cfd8e5;
}

.bf-experiences-evidence-flow i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bf-accent);
  transform: translate(-50%, -50%);
}

.bf-experiences-index__cta {
  padding-block: clamp(18px, 2.4vw, 28px);
}

.bf-experiences-index__cta .bf-cta-band {
  margin-block: 0;
}

@media (max-width: 980px) {
  .bf-experiences-evidence-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-experiences-evidence-cell,
  .bf-experiences-evidence-cell:nth-child(4),
  .bf-experiences-evidence-cell:nth-child(5) {
    grid-column: span 1;
    min-height: 250px;
  }

  .bf-experiences-evidence-cell:last-child {
    grid-column: 1 / -1;
    min-height: 224px;
  }
}

@media (max-width: 700px) {
  .bf-experiences-index__map {
    padding-block: 28px;
  }

  .bf-experiences-evidence-board {
    grid-template-columns: 1fr;
    margin-top: 20px;
    border-radius: 20px;
  }

  .bf-experiences-evidence-cell,
  .bf-experiences-evidence-cell:nth-child(4),
  .bf-experiences-evidence-cell:nth-child(5),
  .bf-experiences-evidence-cell:last-child {
    grid-column: 1;
    min-height: auto;
    padding: 22px 20px;
  }

  .bf-experiences-evidence-cell__ghost {
    left: 12px;
    bottom: -12px;
    font-size: 5.2rem;
  }

  .bf-experiences-evidence-flow {
    gap: 7px;
    font-size: .73rem;
  }

  .bf-experiences-evidence-flow i {
    width: 18px;
    flex-basis: 18px;
  }

  .bf-experiences-index__cta {
    padding-block: 16px;
  }
}

/* Optimization service — diagnostic article trio ------------------------- */
.bf-optimization-diagnostic-reading {
  margin-top: clamp(34px,4vw,52px);
  padding-top: clamp(28px,3.5vw,40px);
  border-top: 1px solid var(--bf-border);
}

.bf-optimization-diagnostic-reading__intro {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.bf-optimization-diagnostic-reading__intro > span {
  color: var(--bf-accent-dark);
  font-size: .76rem;
  font-weight: 900;
}

.bf-optimization-diagnostic-reading__intro h3 {
  margin: 8px 0 0;
  color: var(--bf-text);
  font-size: clamp(1.25rem,2vw,1.65rem);
  line-height: 1.7;
}

.bf-optimization-diagnostic-reading__intro p {
  margin: 10px auto 0;
  color: var(--bf-muted);
  line-height: 1.9;
}

.bf-optimization-diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
  margin-top: 24px;
}

.bf-optimization-diagnostic-card {
  display: flex;
  min-width: 0;
  min-height: 260px;
  flex-direction: column;
  gap: 9px;
  padding: 24px;
  border: 1px solid var(--bf-border);
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform var(--bf-t-fast), border-color var(--bf-t-fast), box-shadow var(--bf-t-fast);
}

.bf-optimization-diagnostic-card:hover,
.bf-optimization-diagnostic-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--bf-border-strong);
  box-shadow: var(--bf-shadow-card);
  text-decoration: none;
  outline: none;
}

.bf-optimization-diagnostic-card > span {
  color: var(--bf-accent-dark);
  font-size: .76rem;
  font-weight: 900;
}

.bf-optimization-diagnostic-card > small {
  color: var(--bf-subtle);
  font-size: .74rem;
  font-weight: 800;
}

.bf-optimization-diagnostic-card h4 {
  margin: 4px 0 0;
  color: var(--bf-text);
  font-size: 1.05rem;
  line-height: 1.75;
}

.bf-optimization-diagnostic-card p {
  margin: 0;
  color: var(--bf-muted);
  font-size: .86rem;
  line-height: 1.85;
  text-align: right;
}

.bf-optimization-diagnostic-card > strong {
  margin-top: auto;
  color: var(--bf-accent-dark);
  font-size: .76rem;
}

@media (max-width: 980px) {
  .bf-optimization-diagnostic-grid { grid-template-columns: 1fr; }
  .bf-optimization-diagnostic-card { min-height: 0; }
}

/* ========================================================================== 
   BIM + Project Management Integration service — 2026-09-02
   ========================================================================== */

/* Five-service layouts */
.bf-home-intervention-modes {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bf-services-control-card--project-management {
  grid-column: 1 / -1;
  min-height: 280px;
  border-inline-end: 0 !important;
  border-block-start: 1px solid var(--bf-border);
}

.bf-services-control-card--project-management > p {
  max-width: 76ch;
}

.bf-services-audience-item a {
  color: var(--bf-accent-dark);
  font-weight: 850;
  text-decoration: none;
}

.bf-services-audience-item a:hover,
.bf-services-audience-item a:focus-visible {
  text-decoration: underline;
}

.bf-contact-intent-item--wide {
  grid-column: 1 / -1;
  border-inline-end: 0 !important;
  border-block-start: 1px solid rgba(174, 187, 205, 0.55);
}

/* Service page */
.bf-pm-integration-reference__diagnosis,
.bf-pm-integration-reference__process,
.bf-pm-integration-reference__cta {
  padding-block: clamp(44px, 5.5vw, 72px) !important;
}

.bf-pm-integration-thesis,
.bf-pm-integration-process-surface {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--bf-border);
  border-radius: 26px;
  background: var(--bf-surface);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.05);
}

.bf-pm-integration-thesis::before,
.bf-pm-integration-process-surface::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: clamp(24px, 3vw, 38px);
  width: 78px;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: var(--bf-accent);
}

.bf-pm-integration-chain {
  display: grid;
  grid-template-columns: auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto;
  align-items: center;
  gap: 8px;
  max-width: 1040px;
  margin: clamp(24px, 3.5vw, 40px) auto 0;
  direction: rtl;
}

.bf-pm-integration-chain span {
  padding: .48rem .72rem;
  border: 1px solid var(--bf-border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--bf-text);
  font-size: .78rem;
  font-weight: 850;
  white-space: nowrap;
}

.bf-pm-integration-chain i {
  position: relative;
  height: 1px;
  background: var(--bf-border-strong);
}

.bf-pm-integration-chain i::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bf-accent-dark);
  transform: translate(-50%, -50%);
}

.bf-pm-integration-thesis__note {
  max-width: 76ch;
  margin: 28px auto 0;
  color: var(--bf-muted);
  line-height: 2;
  text-align: center;
}

.bf-pm-integration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(24px, 3vw, 36px);
  border: 1px solid var(--bf-border);
  border-radius: 22px;
  overflow: hidden;
  background: var(--bf-surface);
}

.bf-pm-integration-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: clamp(22px, 2.7vw, 32px);
}

.bf-pm-integration-card:not(:nth-child(3n)) {
  border-inline-end: 1px solid var(--bf-border);
}

.bf-pm-integration-card:nth-child(-n+3) {
  border-block-end: 1px solid var(--bf-border);
}

.bf-pm-integration-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-pm-integration-card__meta span {
  color: var(--bf-ink);
  font-size: .78rem;
  font-weight: 950;
}

.bf-pm-integration-card__meta small {
  color: var(--bf-accent-dark);
  font-weight: 850;
}

.bf-pm-integration-card h3,
.bf-pm-integration-card p {
  margin: 0;
}

.bf-pm-integration-card h3 {
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  line-height: 1.7;
}

.bf-pm-integration-card p {
  color: var(--bf-muted);
  font-size: .9rem;
  line-height: 1.95;
  text-align: justify;
  text-align-last: right;
}

.bf-pm-integration-card__outcome {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding-block-start: 13px;
  border-block-start: 1px solid var(--bf-border);
}

.bf-pm-integration-card__outcome small {
  color: var(--bf-accent-dark);
  font-size: .72rem;
  font-weight: 900;
}

.bf-pm-integration-card__outcome strong {
  color: var(--bf-subtle);
  font-size: .8rem;
  line-height: 1.7;
}

.bf-pm-integration-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(24px, 3vw, 36px);
  border-block: 1px solid var(--bf-border);
}

.bf-pm-integration-process article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 24px 18px;
}

.bf-pm-integration-process article + article {
  border-inline-start: 1px solid var(--bf-border);
}

.bf-pm-integration-process article > span {
  color: var(--bf-accent-dark);
  font-size: .76rem;
  font-weight: 950;
}

.bf-pm-integration-process article small {
  color: var(--bf-subtle);
  font-family: Arial, sans-serif;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.bf-pm-integration-process article strong {
  color: var(--bf-text);
  line-height: 1.7;
}

.bf-pm-integration-process article p {
  margin: 0;
  color: var(--bf-muted);
  font-size: .84rem;
  line-height: 1.85;
}

.bf-pm-integration-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1080px;
  margin: clamp(26px, 3vw, 38px) auto 30px;
  border-block: 1px solid var(--bf-border);
}

.bf-pm-integration-fit-grid article {
  padding: clamp(22px, 3vw, 32px);
}

.bf-pm-integration-fit-grid article:nth-child(odd) {
  border-inline-end: 1px solid var(--bf-border);
}

.bf-pm-integration-fit-grid article:nth-child(-n+2) {
  border-block-end: 1px solid var(--bf-border);
}

.bf-pm-integration-fit-grid span {
  color: var(--bf-accent-dark);
  font-size: .75rem;
  font-weight: 950;
}

.bf-pm-integration-fit-grid h3 {
  margin: 8px 0 0;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.7;
}

.bf-pm-integration-fit-grid p {
  margin: 10px 0 0;
  color: var(--bf-muted);
  line-height: 1.9;
}

@media (max-width: 900px) {
  .bf-home-intervention-modes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-home-intervention-mode:nth-child(5) {
    grid-column: 1 / -1;
    border-inline-start: 0;
    border-block-start: 1px solid var(--bf-border);
  }

  .bf-pm-integration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-pm-integration-card,
  .bf-pm-integration-card:not(:nth-child(3n)),
  .bf-pm-integration-card:nth-child(-n+3) {
    border: 0;
  }

  .bf-pm-integration-card:nth-child(odd) {
    border-inline-end: 1px solid var(--bf-border);
  }

  .bf-pm-integration-card:nth-child(-n+4) {
    border-block-end: 1px solid var(--bf-border);
  }

  .bf-pm-integration-process {
    grid-template-columns: 1fr;
  }

  .bf-pm-integration-process article + article {
    border-inline-start: 0;
    border-block-start: 1px solid var(--bf-border);
  }
}

@media (max-width: 640px) {
  .bf-pm-integration-chain {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .bf-pm-integration-chain i {
    width: 1px;
    height: 18px;
    margin-inline: auto;
  }

  .bf-pm-integration-grid,
  .bf-pm-integration-fit-grid {
    grid-template-columns: 1fr;
  }

  .bf-pm-integration-card,
  .bf-pm-integration-card:nth-child(odd),
  .bf-pm-integration-card:nth-child(-n+4),
  .bf-pm-integration-fit-grid article,
  .bf-pm-integration-fit-grid article:nth-child(odd),
  .bf-pm-integration-fit-grid article:nth-child(-n+2) {
    border-inline-end: 0;
    border-block-end: 1px solid var(--bf-border);
  }

  .bf-pm-integration-card:last-child,
  .bf-pm-integration-fit-grid article:last-child {
    border-block-end: 0;
  }
}


/* BIM + Project Management service hero — supplied image background, no gradients */
.bf-pm-integration-reference__hero {
  background: #07111f !important;
}

.bf-pm-integration-reference__hero > .bf-pm-integration-hero__media {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 1 !important;
}

.bf-pm-integration-reference__hero > .bf-pm-integration-hero__media .bf-home-gateway-hero__media-image {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  object-position: center center;
  filter: none !important;
}

.bf-pm-integration-reference__hero::before,
.bf-pm-integration-reference__hero::after,
.bf-pm-integration-reference__hero .bf-home-gateway__hero::before,
.bf-pm-integration-reference__hero .bf-home-gateway__hero::after,
.bf-pm-integration-reference__hero .bf-home-gateway-hero__media::before,
.bf-pm-integration-reference__hero .bf-home-gateway-hero__media::after,
.bf-pm-integration-reference__hero .bf-home-gateway-hero__content::before {
  display: none !important;
  content: none !important;
}

.bf-pm-integration-reference__hero .bf-home-gateway-hero__content {
  width: min(43%, 640px);
}

.bf-pm-integration-reference__hero .bf-home-gateway-hero__eyebrow,
.bf-pm-integration-reference__hero .bf-home-gateway-hero__title,
.bf-pm-integration-reference__hero .bf-home-gateway-hero__services-link {
  color: #fff !important;
}

.bf-pm-integration-reference__hero .bf-home-gateway-hero__lead {
  color: rgba(255,255,255,0.88) !important;
  max-width: 34ch;
}

.bf-pm-integration-reference__hero .bf-home-gateway-hero__services-link:hover {
  color: #f59e0b !important;
}

@media (max-width: 1180px) {
  .bf-pm-integration-reference__hero > .bf-pm-integration-hero__media .bf-home-gateway-hero__media-image {
    object-position: 40% center;
  }

  .bf-pm-integration-reference__hero .bf-home-gateway-hero__content {
    width: min(50%, 620px);
  }
}

@media (max-width: 760px) {
  .bf-pm-integration-reference__hero > .bf-pm-integration-hero__media .bf-home-gateway-hero__media-image {
    object-position: 28% center;
  }

  .bf-pm-integration-reference__hero .bf-home-gateway-hero {
    align-items: flex-end;
  }

  .bf-pm-integration-reference__hero .bf-home-gateway-hero__content {
    width: min(100%, 640px);
    margin-inline: 0;
    padding: 20px 18px calc(24px + env(safe-area-inset-bottom));
    border-radius: 22px;
    background: rgba(7, 15, 27, 0.76);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .bf-pm-integration-reference__hero .bf-home-gateway-hero__lead {
    max-width: none;
  }
}

/* BIM + Project Management layout corrections — 1920×860 viewport-fit hero */
/* Remove the generic page-shell gap so the hero begins immediately below the app bar. */
.bf-page--pm-service {
  padding-top: 0 !important;
}

/* The supplied master is 1920×860 (2.233:1), designed to fill the first
   viewport below the navigation without the previous image-driven overflow. */
.bf-pm-integration-reference__hero {
  width: 100%;
  height: calc(100svh - var(--bf-appbar-h)) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding-block: 0 !important;
  background: #07111f !important;
}

.bf-pm-integration-reference__hero .bf-home-gateway__hero-shell,
.bf-pm-integration-reference__hero .bf-home-gateway-hero {
  height: 100% !important;
  min-height: 0 !important;
}

.bf-pm-integration-reference__hero > .bf-pm-integration-hero__media .bf-home-gateway-hero__media-image {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Compact vertical rhythm for this dense service page. */
.bf-pm-integration-reference > :where(.bf-section, .bf-section-compact):not(.bf-service-detail__hero) {
  padding-block: clamp(24px, 2.8vw, 36px) !important;
}

.bf-pm-integration-reference > .bf-pm-integration-reference__diagnosis,
.bf-pm-integration-reference > .bf-pm-integration-reference__process {
  padding-block: clamp(20px, 2.4vw, 30px) !important;
}

.bf-pm-integration-reference > .bf-pm-integration-reference__cta {
  padding-block: clamp(14px, 1.8vw, 22px) !important;
}

@media (max-width: 1180px) and (min-width: 761px) {
  .bf-pm-integration-reference__hero > .bf-pm-integration-hero__media .bf-home-gateway-hero__media-image {
    object-position: center center !important;
  }
}

@media (max-width: 760px) {
  .bf-page--pm-service {
    padding-top: 0 !important;
  }

  .bf-pm-integration-reference__hero {
    height: calc(100svh - var(--bf-appbar-h)) !important;
    min-height: 0 !important;
  }

  .bf-pm-integration-reference__hero .bf-home-gateway__hero-shell,
  .bf-pm-integration-reference__hero .bf-home-gateway-hero {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Mobile is a different aspect ratio, so preserve the text-side composition
     while allowing controlled horizontal crop rather than vertical overflow. */
  .bf-pm-integration-reference__hero > .bf-pm-integration-hero__media .bf-home-gateway-hero__media-image {
    object-fit: cover !important;
    object-position: 34% center !important;
  }

  .bf-pm-integration-reference > :where(.bf-section, .bf-section-compact):not(.bf-service-detail__hero),
  .bf-pm-integration-reference > .bf-pm-integration-reference__diagnosis,
  .bf-pm-integration-reference > .bf-pm-integration-reference__process {
    padding-block: 20px !important;
  }

  .bf-pm-integration-reference > .bf-pm-integration-reference__cta {
    padding-block: 14px !important;
  }
}

/* BIM + Project Management hero — desktop app-bar height correction.
   MudBlazor Dense AppBar renders at 48px on desktop, while --bf-appbar-h is
   intentionally 56px for other shell calculations. Subtracting 56px left an
   8px strip of the next section visible at the bottom of this viewport hero. */
@media (min-width: 901px) {
  .bf-pm-integration-reference__hero {
    height: calc(100svh - 48px) !important;
  }
}


/* BIM + Project Management SEO content additions — applications and proof */
.bf-pm-applications-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1180px;
  margin: clamp(22px, 2.6vw, 32px) auto 0;
  border: 1px solid var(--bf-border);
  border-radius: 22px;
  overflow: hidden;
  background: var(--bf-surface);
}

.bf-pm-applications-grid article {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: clamp(20px, 2.3vw, 28px);
}

.bf-pm-applications-grid article + article {
  border-inline-start: 1px solid var(--bf-border);
}

.bf-pm-applications-grid span {
  color: var(--bf-ink);
  font-size: .75rem;
  font-weight: 950;
}

.bf-pm-applications-grid small {
  color: var(--bf-accent-dark);
  font-weight: 850;
}

.bf-pm-applications-grid h3 {
  margin: 4px 0 0;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.75;
}

.bf-pm-applications-grid p {
  margin: 0;
  color: var(--bf-muted);
  font-size: .88rem;
  line-height: 1.95;
  text-align: justify;
  text-align-last: right;
}

.bf-pm-applications-note {
  max-width: 86ch;
  margin: 20px auto 0;
  color: var(--bf-muted);
  line-height: 2;
  text-align: center;
}

.bf-pm-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: clamp(22px, 2.6vw, 32px) auto 0;
}

.bf-pm-proof-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(22px, 2.8vw, 32px);
  border: 1px solid var(--bf-border);
  border-radius: 22px;
  background: var(--bf-surface);
  box-shadow: 0 14px 38px rgba(15, 23, 42, .05);
}

.bf-pm-proof-card__company {
  display: flex;
  align-items: center;
  gap: 14px;
}

.bf-pm-proof-card__company img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  border: 1px solid var(--bf-border);
  border-radius: 14px;
  background: #fff;
  padding: 6px;
}

.bf-pm-proof-card__company div {
  display: grid;
  gap: 3px;
}

.bf-pm-proof-card__company small {
  color: var(--bf-accent-dark);
  font-weight: 850;
}

.bf-pm-proof-card__company strong {
  color: var(--bf-text);
  line-height: 1.7;
}

.bf-pm-proof-card h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  line-height: 1.75;
}

.bf-pm-proof-card p {
  margin: 0;
  color: var(--bf-muted);
  line-height: 1.95;
  text-align: justify;
  text-align-last: right;
}

.bf-pm-proof-card > a,
.bf-case-study-context-link {
  width: fit-content;
  margin-top: auto;
  color: var(--bf-accent-dark);
  font-weight: 850;
  text-decoration: none;
}

.bf-pm-proof-card > a:hover,
.bf-pm-proof-card > a:focus-visible,
.bf-case-study-context-link:hover,
.bf-case-study-context-link:focus-visible {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .bf-pm-applications-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-pm-applications-grid article + article {
    border-inline-start: 0;
  }

  .bf-pm-applications-grid article:nth-child(even) {
    border-inline-start: 1px solid var(--bf-border);
  }

  .bf-pm-applications-grid article:nth-child(-n+2) {
    border-block-end: 1px solid var(--bf-border);
  }
}

@media (max-width: 640px) {
  .bf-pm-applications-grid,
  .bf-pm-proof-grid {
    grid-template-columns: 1fr;
  }

  .bf-pm-applications-grid article,
  .bf-pm-applications-grid article:nth-child(even),
  .bf-pm-applications-grid article:nth-child(-n+2) {
    border-inline-start: 0;
    border-block-end: 1px solid var(--bf-border);
  }

  .bf-pm-applications-grid article:last-child {
    border-block-end: 0;
  }

  .bf-pm-applications-note {
    text-align: right;
  }
}


/* BIM project-management cluster cards — 2026-09-03 */
.bf-pm-integration-reference__insights {
  padding-block: clamp(28px, 3.6vw, 48px) !important;
}

.bf-pm-related-insights-grid {
  margin-top: clamp(22px, 2.8vw, 34px);
}

@media (min-width: 901px) {
  .bf-pm-related-insights-grid .bf-insight-card--featured {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .bf-pm-integration-reference__insights {
    padding-block: 22px !important;
  }
}

/* Keep the service-page reading cluster independent from the 12-column /insights archive grid. */
.bf-pm-related-insights-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.bf-pm-related-insights-grid .bf-insight-card {
  grid-column: auto;
  min-width: 0;
}

.bf-pm-related-insights-grid .bf-insight-card--featured {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .bf-pm-related-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bf-pm-related-insights-grid .bf-insight-card--featured {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .bf-pm-related-insights-grid {
    grid-template-columns: 1fr;
  }

  .bf-pm-related-insights-grid .bf-insight-card--featured {
    grid-column: auto;
  }
}

/* ========================================================================== 
   FINAL mobile hero cascade guard — 2026-09-03
   Mobile intentionally removes hero artwork. Later page-specific desktop
   artwork rules must therefore not restore dark hero surfaces or white copy
   after the shared mobile simplification block.
   ========================================================================== */
@media (max-width: 760px) {
  /* No artwork on phone heroes: use one clean white surface all the way to
     the viewport edge. This also removes the dark side strips caused when a
     later page-specific hero background overrode the mobile white surface. */
  .bf-home-gateway__hero,
  .bf-home-gateway__hero-shell,
  .bf-home-gateway-hero {
    height: auto !important;
    min-height: 0 !important;
    background: #fff !important;
  }

  .bf-home-gateway__hero > .bf-home-gateway-hero__media,
  .bf-home-gateway__hero .bf-home-gateway-hero__media {
    display: none !important;
  }

  /* Artwork-specific overlays have no purpose once the artwork is removed. */
  .bf-home-gateway__hero::before,
  .bf-home-gateway__hero::after,
  .bf-home-gateway__hero .bf-home-gateway-hero__content::before,
  .bf-home-gateway__hero .bf-home-gateway-hero__content::after {
    content: none !important;
    display: none !important;
    background: none !important;
    filter: none !important;
  }

  /* Several later desktop hero treatments set copy to white for dark artwork.
     Reassert the phone palette after every page-specific rule. */
  .bf-home-gateway__hero .bf-home-gateway-hero__title {
    color: var(--bf-text) !important;
  }

  .bf-home-gateway__hero .bf-home-gateway-hero__lead {
    color: var(--bf-muted) !important;
  }

  .bf-home-gateway__hero .bf-home-gateway-hero__services-link {
    color: var(--bf-text) !important;
  }

  .bf-home-gateway__hero .bf-home-gateway-hero__services-link:hover,
  .bf-home-gateway__hero .bf-home-gateway-hero__services-link:focus-visible {
    color: var(--bf-accent-dark) !important;
  }

  /* Keep the compact no-artwork rhythm rather than the old image-overlay
     reservation used by the original mobile hero. */
  .bf-home-gateway__hero .bf-home-gateway-hero__content {
    width: 100% !important;
    margin-inline: auto !important;
    padding: clamp(44px, 10vw, 64px) 0 40px !important;
    background: transparent !important;
    border-radius: 0 !important;
    text-align: center !important;
  }
}