.bgx-fw{
  --fw-bg:#F3F5F8; --fw-ink:#0A1A33; --fw-body:#3A4763; --fw-muted:#6B7690;
  --fw-accent:#1F5FB4; --fw-accent-lt:#7FB0F0; --fw-line:#E3E7EE; --fw-panel:#0D2347;
  --fw-font:"Plus Jakarta Sans","Inter","Helvetica Neue",Arial,sans-serif;
  position:relative; overflow:hidden; isolation:isolate;
  padding:80px clamp(16px,4vw,48px) 80px; font-family:var(--fw-font); color:var(--fw-ink);
  background:var(--fw-bg);
}
.bgx-fw *,.bgx-fw *::before,.bgx-fw *::after{box-sizing:border-box}
.bgx-fw::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(10,26,51,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,26,51,.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 60%); mask-image:linear-gradient(180deg,#000 0%,transparent 60%);
}
.bgx-fw__wrap{max-width:1268px; margin:0 auto} /* matches the site content width (1268px) */

/* ---------- header ---------- */
.bgx-fw__head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px 48px; flex-wrap:wrap; margin-bottom:36px}
.bgx-fw__eyebrow{display:inline-flex; align-items:center; gap:12px; margin:0 0 12px; font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fw-accent)}
.bgx-fw__eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.6}
.bgx-fw__title{margin:0; font-size:clamp(28px,3vw,40px); line-height:1.1; font-weight:700; letter-spacing:-.022em; color:var(--fw-ink)}
.bgx-fw__lead{margin:12px 0 0; max-width:560px; font-size:16.5px; line-height:1.6; color:var(--fw-body)}
.bgx-fw__all{
  display:inline-flex; align-items:center; gap:10px; padding:13px 0 6px; flex:none;
  font-size:15px; font-weight:600; color:var(--fw-ink) !important; text-decoration:none !important;
  border-bottom:2px solid var(--fw-ink); transition:color .2s ease, border-color .2s ease;
}
.bgx-fw__all svg{transition:transform .2s ease}
.bgx-fw__all:hover{color:var(--fw-accent) !important; border-color:var(--fw-accent)}
.bgx-fw__all:hover svg{transform:translateX(4px)}

/* ---------- grid: 1 lead project + 2 supporting ---------- */
.bgx-fw__grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-rows:1fr 1fr; gap:28px; margin:0; padding:0; list-style:none}
.bgx-fw__grid > li{display:flex; min-width:0}
.bgx-fw__grid > li:first-child{grid-row:1 / span 2}
.bgx-fw__card{
  position:relative; flex:1; display:flex; flex-direction:column; margin:0; background:#fff; border-radius:0;
  box-shadow:0 0 0 1px rgba(10,26,51,.07), 0 0 28px rgba(10,26,51,.07), 0 18px 40px -24px rgba(10,26,51,.28);
}
.bgx-fw__card[data-demo]::after{
  content:"Sample"; position:absolute; top:12px; right:12px; z-index:3; padding:3px 7px;
  background:#FFF4E5; color:#9A5B00; border:1px solid #F5D7A8;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
/* image slot */
.bgx-fw__media{position:relative; overflow:hidden; background:var(--fw-panel); aspect-ratio:16/9}
.bgx-fw__grid > li:first-child .bgx-fw__media{flex:1; aspect-ratio:auto; min-height:300px}
.bgx-fw__grid > li:not(:first-child) .bgx-fw__media{aspect-ratio:auto; height:148px}
.bgx-fw__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bgx-fw__ph{ /* placeholder shown until a real image is added */
  position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:10px;
  color:rgba(255,255,255,.55); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  background:
    radial-gradient(360px 220px at 70% 20%, rgba(31,95,180,.35), transparent 70%),
    linear-gradient(rgba(127,176,240,.10) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(127,176,240,.10) 1px,transparent 1px) 0 0/40px 40px,
    var(--fw-panel);
}
.bgx-fw__ph svg{color:var(--fw-accent-lt)}
.bgx-fw__tag{
  position:absolute; left:0; bottom:0; z-index:2; padding:8px 14px;
  background:var(--fw-ink); color:#fff; font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
/* details */
.bgx-fw__body{flex:1; display:flex; flex-direction:column; padding:22px 26px 24px}
.bgx-fw__h3{margin:0 0 6px; font-size:clamp(19px,1.6vw,22px); line-height:1.25; font-weight:700; letter-spacing:-.012em; color:var(--fw-ink)}
.bgx-fw__grid > li:first-child .bgx-fw__body{flex:none} /* lead card: the image takes the extra height, not the text */
.bgx-fw__grid > li:first-child .bgx-fw__h3{font-size:clamp(22px,2vw,27px)}
.bgx-fw__scope{margin:0 0 18px; font-size:14.5px; line-height:1.55; color:var(--fw-body)}
.bgx-fw__facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:auto 0 0; /* pinned to the bottom of the card */ padding:16px 0 0; border-top:1px solid var(--fw-line)}
.bgx-fw__grid > li:first-child .bgx-fw__facts{grid-template-columns:repeat(3,minmax(0,1fr))}
.bgx-fw__facts div{min-width:0; padding-right:14px}
.bgx-fw__facts div + div{padding-left:14px; border-left:1px solid var(--fw-line)}
.bgx-fw__facts dt{font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--fw-muted)}
.bgx-fw__facts dd{margin:5px 0 0; font-size:15px; line-height:1.35; font-weight:700; color:var(--fw-ink)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .bgx-fw__body{padding:20px 22px 22px}
}
@media (max-width:900px){
  .bgx-fw{padding-top:64px; padding-bottom:64px}
  .bgx-fw__grid{grid-template-columns:1fr 1fr; grid-template-rows:auto; gap:22px}
  .bgx-fw__grid > li:first-child{grid-column:1 / -1; grid-row:auto}
  .bgx-fw__grid > li:first-child .bgx-fw__media{flex:none; aspect-ratio:16/9; min-height:0}
  .bgx-fw__grid > li:not(:first-child) .bgx-fw__media{height:auto; aspect-ratio:16/9}
}
@media (max-width:640px){
  .bgx-fw__grid{grid-template-columns:1fr}
  .bgx-fw__grid > li:first-child .bgx-fw__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bgx-fw__grid > li:first-child .bgx-fw__facts div:nth-child(3){grid-column:1 / -1; padding-left:0; border-left:0; margin-top:12px; padding-top:12px; border-top:1px solid var(--fw-line)}
}
@media (max-width:560px){
  .bgx-fw{padding:52px 16px}
  .bgx-fw__head{margin-bottom:28px}
  .bgx-fw__lead{font-size:16px}
  .bgx-fw__body{padding:18px 18px 20px}
}
@media (max-width:400px){.bgx-fw{padding-left:12px; padding-right:12px}}
@media (prefers-reduced-motion:reduce){.bgx-fw__all,.bgx-fw__all svg{transition:none}}