/* Styles for this page only: /projects/ */
.bgx-sv{
  --sv-ink:#0A1A33; --sv-deep:#071631; --sv-body:#3A4763; --sv-muted:#6B7690; --sv-line:#DCE2EA; --sv-grey:#F3F5F8;
  --sv-accent:#1F5FB4; --sv-accent-lt:#7FB0F0; --sv-red:#B42318; --sv-green:#1E7B4A;
  --sv-font:"Plus Jakarta Sans","Inter","Helvetica Neue",Arial,sans-serif;
  position:relative; font-family:var(--sv-font); color:var(--sv-ink); background:#fff; padding:88px clamp(16px,4vw,48px);
}
.bgx-sv *,.bgx-sv *::before,.bgx-sv *::after{box-sizing:border-box}
.bgx-sv__wrap{max-width:1268px; margin:0 auto} /* matches the site content width (1268px) */
.bgx-sv__eyebrow{display:inline-flex; align-items:center; gap:12px; margin:0 0 14px; font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--sv-accent)}
.bgx-sv__eyebrow::before{content:""; width:28px; height:1px; background:currentColor; opacity:.6}
.bgx-sv__lead{margin:0; font-size:17px; line-height:1.65; color:var(--sv-body)}
.bgx-sv__h{margin:0; font-size:clamp(26px,2.8vw,36px); line-height:1.15; font-weight:700; letter-spacing:-.02em; text-wrap:balance}
.bgx-sv__head2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px); gap:16px 64px; align-items:end; margin-bottom:36px}
.bgx-sv--grey{background:var(--sv-grey)}
.bgx-sv a:focus-visible{outline:3px solid var(--sv-accent-lt); outline-offset:2px}
/* intro */
.bgx-sv--intro{padding-bottom:0}
.bgx-sv__intro{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:24px 80px; align-items:end}
.bgx-sv__h1{margin:0; font-size:clamp(32px,3.8vw,48px); line-height:1.08; font-weight:700; letter-spacing:-.024em; text-wrap:balance}
.bgx-sv__btn{display:inline-flex; align-items:center; gap:12px; margin-top:24px; padding:16px 26px; background:var(--sv-ink); color:#fff !important; font:600 15px/1 var(--sv-font); text-decoration:none !important; white-space:nowrap; transition:background .2s ease}
.bgx-sv__btn svg{transition:transform .2s ease}
.bgx-sv__btn:hover{background:var(--sv-accent)}
.bgx-sv__btn:hover svg{transform:translateX(4px)}
.bgx-sv__proof{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:48px 0 0 !important; box-shadow:0 30px 60px -30px rgba(10,26,51,.5); margin:0; padding:0; list-style:none; color:#fff;
  background:radial-gradient(520px 260px at 90% 0%, rgba(31,95,180,.4), transparent 70%), var(--sv-ink)}
.bgx-sv__proof li{padding:20px 26px}
.bgx-sv__proof li + li{border-left:1px solid rgba(255,255,255,.12)}
.bgx-sv__proof strong{display:block; font-size:16px}
.bgx-sv__proof span{display:block; margin-top:4px; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.7)}
/* leaks */
.bgx-sv__leaks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:20px; row-gap:0; margin:0; padding:0; list-style:none}
.bgx-sv__lcard{display:grid; grid-template-rows:subgrid; grid-row:span 3; padding:26px 24px 24px; background:#fff; border-top:3px solid var(--sv-ink);
  box-shadow:0 0 0 1px rgba(10,26,51,.07), 0 0 26px rgba(10,26,51,.06), 0 16px 34px -24px rgba(10,26,51,.28)}
.bgx-sv__lcard h3{margin:0 0 16px; font-size:18px; line-height:1.3}
.bgx-sv__lcard dl{display:contents}
.bgx-sv__lcard dt{margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase}
.bgx-sv__lcard dd{margin:0; font-size:14.5px; line-height:1.6; color:var(--sv-body)}
.bgx-sv__leak dt{color:var(--sv-red)}
.bgx-sv__fix{margin-top:16px; padding-top:16px; border-top:1px solid var(--sv-line)}
.bgx-sv__fix dt{color:var(--sv-accent)}
/* deliverables */
.bgx-sv__deliver{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px 72px; align-items:center}
.bgx-sv__photo{position:relative; margin:0}
.bgx-sv__photo::before{content:""; position:absolute; left:-16px; top:-16px; width:44%; height:44%; background:var(--sv-ink)}
.bgx-sv__photo img{position:relative; display:block; width:100%; height:auto; aspect-ratio:830/502; object-fit:cover; box-shadow:0 24px 50px -28px rgba(10,26,51,.55)}
.bgx-sv__list{display:grid; grid-template-columns:1fr 1fr; gap:0 32px; margin:24px 0 0; padding:0; list-style:none; border-top:1px solid var(--sv-line)}
.bgx-sv__list li{padding:16px 0; border-bottom:1px solid var(--sv-line)}
.bgx-sv__list h3{margin:0 0 4px; font-size:16px; line-height:1.35}
.bgx-sv__list p{margin:0; font-size:14.5px; line-height:1.55; color:var(--sv-body)}
.bgx-sv__tools{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:22px 0 0; padding:0; list-style:none}
.bgx-sv__tools li{padding:6px 11px; background:var(--sv-grey); border:1px solid #CBD6E8; font-size:13px; font-weight:600}
.bgx-sv__tools li:first-child{padding-left:0; background:none; border:0; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sv-muted)}
.bgx-sv__lph{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; aspect-ratio:416/246; background:var(--sv-grey); border:1px dashed #CBD6E8; color:var(--sv-muted); font-size:11.5px; font-weight:600; text-align:center; padding:8px}
.bgx-sv__lph svg{color:var(--sv-accent)}
.bgx-sv__with{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--sv-line); list-style:none}
.bgx-sv__with li:first-child{font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sv-muted)}
.bgx-sv__with a{display:inline-flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600; color:var(--sv-ink) !important; text-decoration:none; border-bottom:1px solid var(--sv-accent)}
.bgx-sv__with a:hover{color:var(--sv-accent) !important}
.bgx-sv__with a svg{transition:transform .2s ease}
.bgx-sv__with a:hover svg{transform:translateX(3px)}
/* LOD */
.bgx-sv__lods{display:grid; gap:16px; margin:0; padding:0; list-style:none}
.bgx-sv__lod{display:grid; grid-template-columns:220px minmax(0,1fr); background:#fff; box-shadow:0 0 0 1px rgba(10,26,51,.07), 0 16px 34px -26px rgba(10,26,51,.3)}
.bgx-sv__lod figure{position:relative; margin:0; display:flex; flex-direction:column; justify-content:center; padding:14px 14px 12px; border-right:1px solid var(--sv-line)}
.bgx-sv__lod img{display:block; width:100%; height:auto; aspect-ratio:832/492; object-fit:contain}
.bgx-sv__lod figcaption{margin-top:6px; text-align:center; font-size:15px; font-weight:700; letter-spacing:.04em}
.bgx-sv__lbody{padding:22px 26px}
.bgx-sv__ltop{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin-bottom:14px}
.bgx-sv__ltop h3{margin:0; font-size:18px; line-height:1.3}
.bgx-sv__ltop span{font-size:13px; font-weight:600; color:var(--sv-muted)}
.bgx-sv__lcols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 28px; margin:0}
.bgx-sv__lcols dt{margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sv-muted)}
.bgx-sv__lcols dd{margin:0; font-size:14px; line-height:1.55; color:var(--sv-body)}
.bgx-sv__insight{display:flex; gap:10px; align-items:flex-start; margin:16px 0 0; padding:10px 14px; background:var(--sv-grey); border-left:3px solid var(--sv-green); font-size:14px; line-height:1.5; color:var(--sv-ink)}
.bgx-sv__insight b{flex:none; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sv-green); padding-top:2px}
.bgx-sv__lod:nth-child(3){box-shadow:0 0 0 2px var(--sv-accent), 0 16px 34px -26px rgba(10,26,51,.3)}
.bgx-sv__tag{display:inline-block; font-style:normal; padding:3px 8px; background:var(--sv-accent); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.bgx-sv__note{margin:20px 0 0; font-size:15px; line-height:1.6; color:var(--sv-body)}
/* gallery (renderings) */
.bgx-sv__gallery{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:48px 0 0; padding:0; list-style:none}
.bgx-sv__gallery li{position:relative; margin:0; overflow:hidden; background:var(--sv-ink); box-shadow:0 24px 50px -30px rgba(10,26,51,.5)}
.bgx-sv__gallery li:first-child{grid-column:1 / -1}
.bgx-sv__gallery img{display:block; width:100%; height:100%; aspect-ratio:16/8; object-fit:cover}
.bgx-sv__gallery li:first-child img{aspect-ratio:1920/420; object-position:center 30%}
.bgx-sv__gallery span{position:absolute; left:0; bottom:0; padding:8px 12px; background:var(--sv-ink); color:#fff; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase}
/* steps (renderings) */
.bgx-sv__steps{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none}
.bgx-sv__steps::before{content:""; position:absolute; top:21px; left:12.5%; right:12.5%; height:2px; opacity:.55; background:repeating-linear-gradient(90deg,var(--sv-accent) 0 10px,transparent 10px 18px)}
.bgx-sv__step{position:relative; display:flex; flex-direction:column}
.bgx-sv__step b{align-self:center; display:grid; place-items:center; width:42px; height:42px; margin-bottom:18px; background:var(--sv-ink); color:#fff; font-size:13px; box-shadow:0 0 0 8px var(--sv-grey)}
.bgx-sv__step div{flex:1; padding:22px 22px 20px; background:#fff; border-top:3px solid var(--sv-ink); box-shadow:0 0 0 1px rgba(10,26,51,.07), 0 16px 34px -24px rgba(10,26,51,.28)}
.bgx-sv__step h3{margin:0 0 6px; font-size:17px; line-height:1.3}
.bgx-sv__step p{margin:0; font-size:14.5px; line-height:1.6; color:var(--sv-body)}
@media (max-width:960px){ .bgx-sv__steps{grid-template-columns:1fr 1fr} .bgx-sv__steps::before{display:none} .bgx-sv__step b{align-self:flex-start; box-shadow:none} }
@media (max-width:700px){ .bgx-sv__gallery{grid-template-columns:1fr} .bgx-sv__gallery li:first-child img{aspect-ratio:16/9} .bgx-sv__steps{grid-template-columns:1fr} }
/* gallery: concept options (three equal views) */
.bgx-sv__gallery--opts{grid-template-columns:repeat(3,minmax(0,1fr))}
.bgx-sv__gallery--opts li:first-child{grid-column:auto}
.bgx-sv__gallery--opts img,.bgx-sv__gallery--opts li:first-child img{aspect-ratio:954/576; object-position:center}
.bgx-sv__gallery--opts span b{font-weight:700; color:var(--sv-accent-lt); margin-right:8px}
.bgx-sv__gnote{margin:14px 0 0; font-size:14.5px; line-height:1.55; color:var(--sv-muted)}
@media (max-width:700px){ .bgx-sv__gallery--opts{grid-template-columns:1fr} }
/* gallery lead image */
.bgx-sv__gallery--lead li:first-child{grid-column:1 / -1}
.bgx-sv__gallery--lead li:first-child img{aspect-ratio:2.88/1; object-position:center}
@media (max-width:700px){.bgx-sv__gallery--lead li:first-child img{aspect-ratio:16/9}}
.bgx-sv__gallery--3x2 img,.bgx-sv__gallery--3x2 li:first-child img{aspect-ratio:3/2}
/* photo with soft shadow on all four edges */
.bgx-sv__photo--glow img{box-shadow:0 0 14px rgba(10,26,51,.14), 0 0 44px rgba(10,26,51,.22)}
/* proof single line */
.bgx-sv__proof strong,.bgx-sv__proof span{white-space:nowrap}
@media (max-width:1279px){.bgx-sv__proof li:nth-child(3){border-left:0}.bgx-sv__proof li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}}
@media (max-width:400px){.bgx-sv__proof strong,.bgx-sv__proof span{white-space:normal}}
/* margin heading single line */
@media (min-width:961px){.bgx-sv--leaks .bgx-sv__head2{grid-template-columns:max-content minmax(300px,480px);justify-content:space-between}.bgx-sv--leaks .bgx-sv__h{white-space:nowrap}}
/* card titles single line */
.bgx-sv__lcard h3{white-space:nowrap}
@media (max-width:400px){.bgx-sv__lcard h3{white-space:normal}}
/* deliver heading two lines */
@media (min-width:561px){.bgx-sv--deliver .bgx-sv__h{white-space:nowrap}}
@media (max-width:560px){.bgx-sv__br{display:none}}
/* lod heading single line */
@media (min-width:961px){.bgx-sv--lod .bgx-sv__head2{grid-template-columns:max-content minmax(300px,480px);justify-content:space-between}.bgx-sv--lod .bgx-sv__h{white-space:nowrap}}
.bgx-sv__gallery--3x2.bgx-sv__gallery--lead li:first-child img{aspect-ratio:2.88/1}
@media (max-width:700px){.bgx-sv__gallery--3x2.bgx-sv__gallery--lead li:first-child img{aspect-ratio:16/9}}
/* how it works on white (after a grey section) */
.bgx-sv--how-white .bgx-sv__step b{box-shadow:0 0 0 8px #fff}
.bgx-sv--how-white .bgx-sv__step div{box-shadow:0 0 0 1px rgba(10,26,51,.09), 0 16px 34px -24px rgba(10,26,51,.32)}
@media (max-width:960px){.bgx-sv--how-white .bgx-sv__step b{box-shadow:none}}
/* stats row (company credentials, same figures as the home page) */
.bgx-sv__stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:44px 0 0; padding:30px 0 80px; border-top:1px solid var(--sv-line); list-style:none}
.bgx-sv__stats li{margin:0; padding:0 28px; border-left:1px solid var(--sv-line)}
.bgx-sv__stats li:first-child{padding-left:0; border-left:0}
.bgx-sv__stats b{display:block; font-size:clamp(34px,3.3vw,46px); line-height:1; font-weight:700; letter-spacing:-.025em; color:var(--sv-ink)}
.bgx-sv__stats b i{font-style:normal; color:var(--sv-accent)}
.bgx-sv__stats span{display:block; margin-top:10px; font-size:13px; line-height:1.35; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--sv-muted)}
@media (max-width:768px){ .bgx-sv__stats{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:26px; margin-top:36px; padding-bottom:56px} .bgx-sv__stats li:nth-child(3){padding-left:0; border-left:0} }
@media (max-width:400px){ .bgx-sv__stats li{padding:0 16px} .bgx-sv__stats span{font-size:11.5px; letter-spacing:.06em} }
/* responsive */
@media (max-width:1279px){ .bgx-sv__leaks{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:20px} .bgx-sv__lcard{display:block; grid-row:auto} }
@media (max-width:960px){
  .bgx-sv{padding-top:64px; padding-bottom:64px}
  .bgx-sv--intro{padding-bottom:0}
  .bgx-sv__intro,.bgx-sv__head2{grid-template-columns:1fr; gap:16px}
  .bgx-sv__deliver{grid-template-columns:1fr}
  .bgx-sv__photo{max-width:640px}
  .bgx-sv__lcols{grid-template-columns:1fr}
}
@media (max-width:1279px){ .bgx-sv__proof{grid-template-columns:1fr 1fr} .bgx-sv__proof li:nth-child(3){border-left:0} .bgx-sv__proof li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)} }
@media (max-width:700px){
  .bgx-sv__proof{grid-template-columns:1fr}
  .bgx-sv__proof li + li{border-left:0; border-top:1px solid rgba(255,255,255,.12)}
  .bgx-sv__leaks{grid-template-columns:1fr}
  .bgx-sv__list{grid-template-columns:1fr}
  .bgx-sv__lod{grid-template-columns:1fr}
  .bgx-sv__lod figure{border-right:0; border-bottom:1px solid var(--sv-line); flex-direction:row; align-items:center; gap:16px}
  .bgx-sv__lod img{width:140px}
  .bgx-sv__lod figcaption{margin:0}
}
@media (max-width:560px){
  .bgx-sv{padding:52px 16px}
  .bgx-sv--intro{padding-bottom:0}
  .bgx-sv__lead{font-size:16px}
  .bgx-sv__btn{width:100%; justify-content:space-between; white-space:normal}
  .bgx-sv__photo::before{left:-8px; top:-8px}
  .bgx-sv__lbody{padding:18px 18px}
}
@media (max-width:400px){.bgx-sv{padding-left:12px; padding-right:12px}}
@media (prefers-reduced-motion:reduce){.bgx-sv *{transition:none !important}}

/* ===== All Services (Expertise) page blocks (.bgx-as) ===== */
.bgx-as__roles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:44px 0 0; padding:0; list-style:none}
.bgx-as__role{display:flex; flex-direction:column; margin:0; padding:28px 28px 26px; background:#fff; border-top:3px solid var(--sv-ink); box-shadow:0 24px 50px -34px rgba(10,26,51,.45)}
.bgx-as__role h3{margin:0 0 14px; font-size:19px; line-height:1.3; font-weight:700; color:var(--sv-ink); letter-spacing:-.01em}
.bgx-as__role p{margin:0; font-size:15px; line-height:1.55; color:var(--sv-body)}
.bgx-as__role p b{display:block; margin:0 0 4px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.bgx-as__risk b{color:var(--sv-red)}
.bgx-as__start{margin-top:18px !important; padding-top:16px; border-top:1px solid var(--sv-line)}
.bgx-as__start b{color:var(--sv-accent); margin:0 !important}
.bgx-as__role ul{margin:8px 0 20px; padding:0; list-style:none}
.bgx-as__role ul li{margin:0; padding:5px 0}
.bgx-as__role ul a{font-size:15px; font-weight:600; color:var(--sv-ink); text-decoration:none; border-bottom:1px solid rgba(31,95,180,.35)}
.bgx-as__role ul a:hover{color:var(--sv-accent); border-bottom-color:var(--sv-accent)}
.bgx-as__show{margin-top:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:10px; padding:0; background:none; border:0; font:inherit; font-size:14px; font-weight:700; color:var(--sv-accent); cursor:pointer}
.bgx-as__show svg{transition:transform .2s ease}
.bgx-as__show:hover svg{transform:translateX(4px)}
.bgx-as__filter{display:flex; flex-wrap:wrap; gap:10px; margin:40px 0 0}
.bgx-as__chip{padding:10px 16px; background:#fff; border:1px solid var(--sv-line); font:inherit; font-size:14px; font-weight:600; color:var(--sv-body); cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease}
.bgx-as__chip:hover{border-color:var(--sv-accent); color:var(--sv-accent)}
.bgx-as__chip[aria-pressed="true"]{background:var(--sv-ink); border-color:var(--sv-ink); color:#fff}
.bgx-as__count{margin:16px 0 0; font-size:14px; color:var(--sv-muted)}
.bgx-as__disc{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:56px; margin:0; padding:52px 0; border-top:1px solid var(--sv-line)}
.bgx-as__disc:first-of-type{margin-top:28px}
.bgx-as__disc[hidden]{display:none}
.bgx-as__dhead{position:sticky; top:24px; align-self:start}
.bgx-as__dhead img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin:0 0 22px; box-shadow:0 24px 50px -30px rgba(10,26,51,.5)}
.bgx-as__dnum{display:flex; align-items:center; gap:12px; margin:0 0 8px; font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--sv-muted)}
.bgx-as__dnum b{padding:4px 8px; background:var(--sv-ink); color:#fff; font-size:12px; letter-spacing:.06em}
.bgx-as__dhead h3{margin:0; font-size:clamp(24px,2.2vw,30px); line-height:1.15; font-weight:700; letter-spacing:-.02em; color:var(--sv-ink)}
.bgx-as__dline{margin:6px 0 0; font-size:16px; font-weight:600; color:var(--sv-accent)}
.bgx-as__dlead{margin:12px 0 0; font-size:15.5px; line-height:1.6; color:var(--sv-body)}
.bgx-as__dlink{display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-size:14.5px; font-weight:700; color:var(--sv-ink) !important; text-decoration:none !important; border-bottom:2px solid var(--sv-accent); padding-bottom:3px}
.bgx-as__dlink svg{transition:transform .2s ease}
.bgx-as__dlink:hover svg{transform:translateX(4px)}
.bgx-as__grp{margin:0 0 30px}
.bgx-as__grp:last-child{margin-bottom:0}
.bgx-as__grp[hidden]{display:none}
.bgx-as__grp h4{margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sv-muted)}
.bgx-as__svcs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; margin:0; padding:0; list-style:none}
.bgx-as__svcs li{margin:0; border-bottom:1px solid var(--sv-line)}
.bgx-as__svcs li[hidden]{display:none}
.bgx-as__svcs a{position:relative; display:block; padding:16px 34px 16px 0; text-decoration:none !important}
.bgx-as__svcs strong{display:block; font-size:16px; line-height:1.3; font-weight:700; color:var(--sv-ink); transition:color .2s ease}
.bgx-as__svcs span{display:block; margin-top:4px; font-size:14px; line-height:1.45; color:var(--sv-muted)}
.bgx-as__svcs svg{position:absolute; right:4px; top:20px; color:var(--sv-accent); transition:transform .2s ease}
.bgx-as__svcs a:hover strong{color:var(--sv-accent)}
.bgx-as__svcs a:hover svg{transform:translateX(4px)}
.bgx-as__why{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:44px 0 0; padding:0; list-style:none}
.bgx-as__why li{margin:0; padding:28px 26px; background:var(--sv-grey); border-top:3px solid var(--sv-accent)}
.bgx-as__why h3{margin:0 0 10px; font-size:18px; line-height:1.3; font-weight:700; color:var(--sv-ink)}
.bgx-as__why p{margin:0; font-size:15px; line-height:1.6; color:var(--sv-body)}
.bgx-as__tiles{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; margin:44px 0 0; padding:0; list-style:none}
.bgx-as__tiles li{margin:0}
.bgx-as__tiles a{position:relative; display:block; overflow:hidden; background:var(--sv-ink); text-decoration:none !important}
.bgx-as__tiles img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; opacity:.82; transition:opacity .25s ease, transform .4s ease}
.bgx-as__tiles a:hover img{opacity:.6; transform:scale(1.04)}
.bgx-as__tiles span{position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px; background:linear-gradient(to top, rgba(7,22,49,.92), rgba(7,22,49,0)); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.bgx-as__tiles span b{display:block; margin-bottom:2px; font-size:15px; letter-spacing:0; text-transform:none; color:#fff}
.bgx-as__tiles a:focus-visible{outline:3px solid var(--sv-accent); outline-offset:3px}
.bgx-as__life{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin:44px 0 0; padding:0; list-style:none; counter-reset:none}
.bgx-as__stage{display:flex; flex-direction:column; margin:0; padding:24px 22px 22px; background:var(--sv-grey); border-top:3px solid var(--sv-ink)}
.bgx-as__snum{display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:17px; font-weight:700; color:var(--sv-ink)}
.bgx-as__snum b{padding:3px 7px; background:var(--sv-ink); color:#fff; font-size:12px; letter-spacing:.06em}
.bgx-as__srisk{margin:0; font-size:14px; line-height:1.5; color:var(--sv-body)}
.bgx-as__srisk b{display:block; margin-bottom:4px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sv-red)}
.bgx-as__stage ul{margin:14px 0 16px; padding:14px 0 0; border-top:1px solid var(--sv-line); list-style:none}
.bgx-as__stage ul li{margin:0; padding:4px 0}
.bgx-as__stage ul a{font-size:14px; font-weight:600; color:var(--sv-ink); text-decoration:none; border-bottom:1px solid rgba(31,95,180,.35)}
.bgx-as__stage ul a:hover{color:var(--sv-accent); border-bottom-color:var(--sv-accent)}
.bgx-as__sout{margin:auto 0 0; padding-top:12px; border-top:1px solid var(--sv-line); font-size:14px; font-weight:700; color:var(--sv-green)}
.bgx-as__tools{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; margin:40px 0 0}
.bgx-as__tools .bgx-as__filter{margin:0}
.bgx-as__search{display:flex; align-items:center; gap:10px; flex:0 1 330px; min-width:0; padding:0 14px; background:#fff; border:1px solid var(--sv-line); color:var(--sv-muted)}
.bgx-as__search:focus-within{border-color:var(--sv-accent); color:var(--sv-accent)}
.bgx-as__search input{flex:1; min-width:0; padding:11px 0; border:0; outline:0; background:transparent; font:inherit; font-size:14.5px; color:var(--sv-ink)}
.bgx-as__sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.bgx-as__none{margin:24px 0 0; padding:22px 24px; background:#fff; border-left:3px solid var(--sv-accent); font-size:15px; color:var(--sv-body)}
.bgx-as__none a{font-weight:700; color:var(--sv-accent)}
.bgx-as--cat .bgx-as__disc{border-top-color:#D3DAE4}
.bgx-as__combos{margin:48px 0 0; padding:36px 0 0; border-top:1px solid var(--sv-line)}
.bgx-as__combos > h3{margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--sv-ink)}
.bgx-as__combos > p{margin:6px 0 0; font-size:15.5px; color:var(--sv-body)}
.bgx-as__combos ul{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:24px 0 0; padding:0; list-style:none}
.bgx-as__combos li{margin:0; padding:22px 22px 20px; background:var(--sv-grey)}
.bgx-as__combos h4{margin:0 0 10px; font-size:16.5px; font-weight:700; color:var(--sv-ink)}
.bgx-as__cmix{margin:0; font-size:14px; line-height:1.6; color:var(--sv-accent); font-weight:600}
.bgx-as__cout{margin:12px 0 0; padding-top:12px; border-top:1px solid var(--sv-line); font-size:14px; line-height:1.5; color:var(--sv-body)}
@media (max-width:1100px){ .bgx-as__tiles{grid-template-columns:repeat(3,minmax(0,1fr))} .bgx-as__life{grid-template-columns:repeat(3,minmax(0,1fr))} .bgx-as__combos ul{grid-template-columns:repeat(2,minmax(0,1fr))} .bgx-as__search{flex:1 1 100%} }
@media (max-width:768px){ .bgx-as__life{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .bgx-as__tiles{grid-template-columns:repeat(2,minmax(0,1fr))} .bgx-as__life,.bgx-as__combos ul{grid-template-columns:1fr} }
@media (max-width:1100px){ .bgx-as__dhead{position:static} .bgx-as__roles{grid-template-columns:repeat(2,minmax(0,1fr))} .bgx-as__why{grid-template-columns:repeat(2,minmax(0,1fr))} .bgx-as__disc{grid-template-columns:1fr; gap:28px} .bgx-as__dhead{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:32px; align-items:start} .bgx-as__dhead img{grid-row:1 / span 6; margin:0} }
@media (max-width:768px){ .bgx-as__roles,.bgx-as__why{grid-template-columns:1fr} }
@media (max-width:600px){ .bgx-as__svcs{grid-template-columns:1fr} }
@media (max-width:768px){ .bgx-as__dhead{display:block} .bgx-as__dhead img{margin:0 0 20px} .bgx-as__disc{padding:40px 0} }
@media (max-width:400px){ .bgx-as__chip{padding:9px 12px; font-size:13px} .bgx-as__role{padding:24px 20px} }

/* ===== Projects page blocks (.bgx-pj) - uses the service-page tokens (--sv-*) ===== */
.bgx-pj__feats{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-rows:auto auto; gap:20px; margin:44px 0 0; padding:0; list-style:none}
.bgx-pj__feat{position:relative; display:flex; flex-direction:column; margin:0; background:#fff; box-shadow:0 24px 50px -34px rgba(10,26,51,.45)}
.bgx-pj__feat--lead{grid-row:1 / span 2}
.bgx-pj__feat:not(.bgx-pj__feat--lead){display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.bgx-pj__fimg{position:relative; margin:0; overflow:hidden; background:var(--sv-ink)}
.bgx-pj__fimg img{display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover}
.bgx-pj__feat--lead .bgx-pj__fimg img{aspect-ratio:16/10}
.bgx-pj__fimg span{position:absolute; left:0; bottom:0; padding:6px 12px; background:var(--sv-ink); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.bgx-pj__fbody{display:flex; flex-direction:column; padding:24px 26px}
.bgx-pj__feat--lead .bgx-pj__fbody{padding:30px 32px 32px}
.bgx-pj__fbody h3{margin:0; font-size:19px; line-height:1.3; font-weight:700; letter-spacing:-.01em; color:var(--sv-ink)}
.bgx-pj__feat--lead .bgx-pj__fbody h3{font-size:clamp(22px,2vw,26px)}
.bgx-pj__fbody p{margin:10px 0 0; font-size:15px; line-height:1.6; color:var(--sv-body)}
.bgx-pj__fbody dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:12px; margin:auto 0 0; padding:16px 0 0; border-top:1px solid var(--sv-line)}
.bgx-pj__fbody p + dl{margin-top:18px}
.bgx-pj__fbody dt{margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sv-muted)}
.bgx-pj__fbody dd{margin:0; font-size:15px; font-weight:700; color:var(--sv-ink)}
.bgx-pj__feat[data-demo]::after{content:"Sample"; position:absolute; top:12px; right:12px; padding:3px 7px; background:#FFF4E5; color:#9A5B00; border:1px solid #F5D7A8; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}

.bgx-pj__bar{margin:40px 0 0; background:#fff; border:1px solid var(--sv-line); box-shadow:0 1px 2px rgba(10,26,51,.04), 0 12px 32px -18px rgba(10,26,51,.18)}
.bgx-pj__row{padding:22px 24px 22px}
.bgx-pj__row + .bgx-pj__row{padding-top:0}
.bgx-pj__lbl{margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sv-muted)}
.bgx-pj__tabs{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--sv-line)}
.bgx-pj__tab{display:flex; flex-direction:column; justify-content:center; gap:3px; min-height:64px; padding:12px 16px; background:#fff; border:0; border-left:1px solid var(--sv-line); font:inherit; text-align:left; color:var(--sv-ink); cursor:pointer; transition:background .2s ease, color .2s ease, box-shadow .2s ease}
.bgx-pj__tab:first-child{border-left:0}
.bgx-pj__tab b{font-size:14.5px; font-weight:700; line-height:1.25; white-space:nowrap}
.bgx-pj__tab span{font-size:12.5px; font-weight:500; color:var(--sv-muted); font-variant-numeric:tabular-nums}
@media (hover:hover){ .bgx-pj__tab:hover{background:var(--sv-grey); box-shadow:inset 0 -3px 0 var(--sv-line)} }
.bgx-pj__tab[aria-pressed="true"]{position:relative; z-index:1; background:linear-gradient(180deg,#14305A 0%,#0C1F3D 55%,#0A1A33 100%); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 #5B9BEA, 0 10px 22px -12px rgba(10,26,51,.6)}
.bgx-pj__tab[aria-pressed="true"] span{color:#A9B9D3}
.bgx-pj__chips{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); align-content:start; gap:8px}
.bgx-pj__chipset{display:contents}
.bgx-pj__chip{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:9px 14px; background:#fff; border:1px solid #E7ECF2; font:inherit; font-size:14px; font-weight:600; line-height:1.3; text-align:left; color:var(--sv-ink); cursor:pointer; transition:border-color .2s ease, color .2s ease, background .2s ease}
.bgx-pj__chip span{flex:0 0 auto; min-width:26px; padding:2px 7px; background:var(--sv-grey); font-size:12px; font-weight:600; color:var(--sv-muted); text-align:center; font-variant-numeric:tabular-nums}
@media (hover:hover){ .bgx-pj__chip[aria-pressed="false"]:hover{background:#F7F9FC; border-color:#C9D6E8; color:var(--sv-ink)} }
.bgx-pj__chip[aria-pressed="true"]{background:#F5F8FC; border-color:#CFDBEA; color:var(--sv-ink); box-shadow:inset 3px 0 0 var(--sv-accent)}
.bgx-pj__chip[aria-pressed="true"] span{background:#E8EEF6; color:var(--sv-ink); box-shadow:none}
@media (hover:hover){ .bgx-pj__chip[aria-pressed="true"]:hover{color:var(--sv-ink); border-color:#A9C3E6} }
.bgx-pj__tools{display:flex; flex-wrap:wrap; align-items:stretch; gap:12px 16px; padding:16px 24px; background:#F8FAFC; border-top:1px solid var(--sv-line)}
.bgx-pj__tools .bgx-pj__q{flex:1 1 320px}
.bgx-pj__q kbd{padding:1px 7px; border:1px solid var(--sv-line); font:inherit; font-size:12px; color:var(--sv-muted)}
.bgx-pj__q:focus-within kbd{display:none}
.bgx-pj__sel{display:flex; align-items:center; background:#fff; border:1px solid var(--sv-line)}
.bgx-pj__sel:focus-within{border-color:var(--sv-accent)}
.bgx-pj__sell{padding:0 0 0 16px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sv-muted)}
.bgx-pj__sel select{height:100%; padding:10px 40px 10px 10px; border:0; outline:0; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A1A33' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 16px center; -webkit-appearance:none; appearance:none; font:inherit; font-size:14.5px; font-weight:600; color:var(--sv-ink); cursor:pointer}
.bgx-pj__count{align-self:center; margin:0 0 0 auto; white-space:nowrap; font-size:14px; color:var(--sv-muted); font-variant-numeric:tabular-nums}
.bgx-pj__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:28px 0 0; padding:0; list-style:none}
.bgx-pj__grid li{margin:0}
.bgx-pj__card{position:relative; display:block; width:100%; padding:0; border:0; background:var(--sv-ink); cursor:pointer; overflow:hidden; text-align:left; font:inherit}
.bgx-pj__card img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; background:var(--sv-ink); transition:transform .45s ease}
.bgx-pj__card:hover img{transform:scale(1.04)}
.bgx-pj__card:focus-visible{outline:3px solid var(--sv-accent); outline-offset:3px}
.bgx-pj__cap{position:absolute; left:0; right:0; bottom:0; padding:44px 18px 16px; background:linear-gradient(to top, rgba(7,22,49,.94), rgba(7,22,49,0))}
.bgx-pj__cap b{display:block; font-size:16.5px; line-height:1.3; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bgx-pj__cap span{display:block; margin-top:4px; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bgx-pj__none{margin:28px 0 0; padding:22px 24px; background:#fff; border-left:3px solid var(--sv-accent); font-size:15px; color:var(--sv-body)}
.bgx-pj__none a,.bgx-pj__reset{font:inherit; font-weight:700; color:var(--sv-accent); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline}
.bgx-pj__more-wrap{display:flex; flex-direction:column; align-items:center; margin:36px 0 0}
.bgx-pj__more{padding:14px 28px; background:#fff; border:1.5px solid var(--sv-ink); font:inherit; font-size:15px; font-weight:700; color:var(--sv-ink); cursor:pointer}
.bgx-pj__more:hover{background:var(--sv-ink); color:#fff}
.bgx-pj__more[hidden]{display:none}

.bgx-pj__viewer{position:fixed; inset:0; z-index:1000; display:flex; overflow:auto; font-family:var(--sv-font); align-items:center; justify-content:center; padding:16px; background:rgba(7,22,49,.94)}
.bgx-pj__viewer[hidden]{display:none}
.bgx-pj__vbox{position:relative; display:flex; align-items:stretch; width:min(1976px, 100%, calc((100vh - 32px) * 1.5 + 440px)); max-height:none; background:#fff; box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.bgx-pj__vimg{position:relative; flex:1 1 auto; min-width:0; margin:0; aspect-ratio:3/2; background:#0B1426; display:flex; align-items:center; justify-content:center; overflow:hidden}
.bgx-pj__vimg img{display:block; width:100%; height:100%; object-fit:cover}
.bgx-pj__vnav{position:absolute; top:50%; width:48px; height:48px; margin-top:-24px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:#fff; color:var(--sv-ink); cursor:pointer; box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.bgx-pj__vprev{left:18px} .bgx-pj__vnext{right:18px}
.bgx-pj__vnav:hover{background:var(--sv-accent); color:#fff}
.bgx-pj__vclose{position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border:0; border-radius:50%; background:#fff; color:var(--sv-ink); font-size:26px; line-height:1; cursor:pointer; box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.bgx-pj__vclose:hover{background:var(--sv-accent); color:#fff}
.bgx-pj__vpanel{display:flex; flex-direction:column; flex:0 0 440px; width:440px; padding:28px 32px 0}
.bgx-pj__vpos{margin:0 0 10px; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--sv-muted); font-variant-numeric:tabular-nums}
.bgx-pj__vcrumb{margin:0 0 8px; font-size:13px; font-weight:700; color:var(--sv-accent)}
.bgx-pj__vpanel h2{margin:0; font-size:24px; line-height:1.2; font-weight:700; letter-spacing:-.02em; color:var(--sv-ink); text-wrap:balance}
.bgx-pj__vmeta{display:grid; grid-template-columns:1fr 1fr; column-gap:24px; margin:18px 0 6px; padding:0}
.bgx-pj__vmeta div{padding:11px 0; border-top:1px solid var(--sv-line)}
.bgx-pj__vmeta .bgx-pj__vwide{grid-column:1 / -1}
.bgx-pj__vmeta dt{margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sv-muted)}
.bgx-pj__vmeta dd{margin:0; font-size:15px; line-height:1.55; color:var(--sv-ink)}
.bgx-pj__vact{margin:auto -32px 0; padding:16px 32px 22px; background:#fff; border-top:1px solid var(--sv-line); display:flex; flex-direction:column}
.bgx-pj__vcta{justify-content:center}
.bgx-pj__vsvc{display:inline-flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; font-size:14.5px; font-weight:700; color:var(--sv-ink) !important; text-decoration:none !important}
.bgx-pj__vsvc:hover{color:var(--sv-accent) !important}
body.bgx-pj-lock{overflow:hidden}
.bgx-pj__cap i{display:block; margin-top:3px; font-style:normal; font-size:12.5px; color:rgba(255,255,255,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums}
.bgx-pj__vmeta div[hidden]{display:none}
.bgx-pj__rel{margin:4px 0 18px; padding-top:16px; border-top:1px solid var(--sv-line)}
.bgx-pj__relh{margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sv-muted)}
.bgx-pj__rel ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none}
.bgx-pj__rel li{margin:0}
.bgx-pj__rel button{display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; text-align:left; font:inherit}
.bgx-pj__rel img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; background:var(--sv-ink); transition:opacity .2s ease}
.bgx-pj__rel button:hover img{opacity:.8}
.bgx-pj__rel span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin-top:5px; font-size:12.5px; line-height:1.35; font-weight:600; color:var(--sv-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bgx-pj__rel button:hover span{color:var(--sv-accent)}
.bgx-pj__rel button:focus-visible{outline:3px solid var(--sv-accent); outline-offset:2px}

@media (max-width:1100px){ .bgx-pj__feats{grid-template-columns:1fr} .bgx-pj__feat--lead{grid-row:auto} .bgx-pj__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1100px){ .bgx-pj__viewer{align-items:flex-start} .bgx-pj__vbox{flex-direction:column; width:min(900px,100%); max-height:calc(100vh - 32px); margin:auto 0; overflow:auto} .bgx-pj__vimg{flex:0 0 auto; width:100%; aspect-ratio:auto; height:min(calc(min(900px, 100vw - 32px) / 1.5), calc(100vh - 32px - 120px))} .bgx-pj__vpanel{flex:0 0 auto; width:auto} .bgx-pj__vact{position:sticky; bottom:0; z-index:1} .bgx-pj__vclose{top:10px; right:10px} }
@media (min-width:1101px) and (max-width:1320px){ .bgx-pj__vbox{width:min(1976px, 100%, calc((100vh - 32px) * 1.5 + 360px))} .bgx-pj__vpanel{flex-basis:360px; width:360px; padding:18px 24px 0} .bgx-pj__vpos{margin-bottom:6px} .bgx-pj__vpanel h2{font-size:21px} .bgx-pj__vmeta{margin:12px 0 4px} .bgx-pj__vmeta div{padding:7px 0} .bgx-pj__vmeta dd{font-size:14px; line-height:1.4} .bgx-pj__rel{margin:2px 0 10px; padding-top:10px} .bgx-pj__relh{margin-bottom:8px} .bgx-pj__vact{margin:auto -24px 0; padding:10px 24px 14px} .bgx-pj__vsvc{margin-top:6px} }
@media (max-width:860px){ .bgx-pj__vclose{top:10px; right:10px} .bgx-pj__vpanel{overflow:visible} }
@media (max-width:640px){ .bgx-pj__grid{grid-template-columns:1fr} .bgx-pj__feat:not(.bgx-pj__feat--lead){display:flex} .bgx-pj__count{margin-left:0; flex-basis:100%} .bgx-pj__viewer{padding:0} .bgx-pj__vbox{height:100%; max-height:100vh; margin:0} .bgx-pj__vimg{height:min(calc(100vw / 1.5), calc(100vh - 120px))} .bgx-pj__vnav{width:40px; height:40px; margin-top:-20px} .bgx-pj__fbody dl{grid-template-columns:1fr 1fr} }
@media (min-width:1101px) and (max-height:800px){ .bgx-pj__vpanel{padding:20px 28px 0} .bgx-pj__vpos{margin-bottom:6px} .bgx-pj__vpanel h2{font-size:21px} .bgx-pj__vmeta{margin:12px 0 4px} .bgx-pj__vmeta div{padding:8px 0} .bgx-pj__vmeta dd{font-size:14.5px; line-height:1.45} .bgx-pj__rel{margin:2px 0 12px; padding-top:12px} .bgx-pj__vact{margin:auto -28px 0; padding:12px 28px 16px} .bgx-pj__vsvc{margin-top:8px} }
@media (max-width:1100px) and (min-aspect-ratio:4/3){ .bgx-pj__viewer{padding:0; align-items:stretch} .bgx-pj__viewer{align-items:center} .bgx-pj__vbox{flex-direction:row; width:min(100%, calc(100vh * 1.5 + 260px)); height:auto; max-height:100vh; margin:auto; overflow:hidden} .bgx-pj__vimg{flex:1 1 auto; align-self:flex-start; width:auto; height:auto; aspect-ratio:3/2} .bgx-pj__vpanel{flex:0 0 260px; width:260px; min-width:0; overflow:auto; padding:16px 20px 0} .bgx-pj__vpanel h2{font-size:19px} .bgx-pj__vmeta{grid-template-columns:1fr} .bgx-pj__rel{display:none} .bgx-pj__vact{position:sticky; bottom:0; margin:auto -20px 0; padding:10px 20px 12px} .bgx-pj__vbox{background:#0B1426} .bgx-pj__vpanel{background:#fff} }
@media (max-width:1100px) and (min-aspect-ratio:4/3) and (min-height:501px){ .bgx-pj__viewer{padding:16px} .bgx-pj__vbox{width:min(100%, calc((100vh - 32px) * 1.5 + 280px)); max-height:calc(100vh - 32px)} .bgx-pj__vpanel{flex-basis:280px; width:280px} }
@media (min-width:1101px) and (max-height:680px){ .bgx-pj__rel{display:none} }
@media (max-width:1100px){ .bgx-pj__tabs{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(max-content,1fr); overflow-x:auto; scrollbar-width:thin} }
@media (max-width:860px){ .bgx-pj__q kbd{display:none} }
@media (max-width:640px){ .bgx-pj__row{padding:18px 16px} .bgx-pj__tools{padding:14px 16px} .bgx-pj__tab{min-height:58px; padding:10px 12px} .bgx-pj__tab b{font-size:14px} .bgx-pj__chips{display:flex; overflow-x:auto; padding-bottom:6px; scrollbar-width:thin} .bgx-pj__chip{flex:0 0 auto; white-space:nowrap; font-size:13.5px} }
@media (max-width:640px){ .bgx-pj__tools .bgx-pj__q{flex-basis:100%} .bgx-pj__sel{flex:1 1 100%} .bgx-pj__sel select{flex:1} }
.bgx-pj__row--svc{position:relative}
.bgx-pj__chips--ghost{position:absolute; margin:0; pointer-events:none; animation:bgx-pj-out .26s ease both}
.bgx-pj__chips.is-x{animation:bgx-pj-x .3s ease both}
.bgx-pj__grid li{position:relative}
.bgx-pj__grid li > .bgx-pj__card + .bgx-pj__card{position:absolute; inset:0}
.bgx-pj__card--wait{opacity:0; pointer-events:none}
@keyframes bgx-pj-x{from{opacity:0}}
@keyframes bgx-pj-out{to{opacity:0}}
.bgx-pj__tab,.bgx-pj__chip{-webkit-tap-highlight-color:transparent}
.bgx-pj__prog{width:min(280px,100%); margin:0 auto 16px; text-align:center}
.bgx-pj__prog p{margin:0 0 8px; font-size:13.5px; color:var(--sv-muted); font-variant-numeric:tabular-nums}
.bgx-pj__prog span{display:block; height:3px; background:var(--sv-line); overflow:hidden}
.bgx-pj__prog i{display:block; height:100%; background:var(--sv-ink); transition:width .3s ease}
.bgx-pj__tab:focus-visible,.bgx-pj__chip:focus-visible{outline:2px solid #5B9BEA; outline-offset:2px; position:relative; z-index:2}
.bgx-pj__tab:focus:not(:focus-visible),.bgx-pj__chip:focus:not(:focus-visible){outline:none}
@media (min-width:1101px){ .bgx-pj__vpanel{contain:size; overflow-y:auto; scrollbar-width:thin} }
@media (min-width:1101px) and (max-height:720px){ .bgx-pj__vpanel{padding-top:16px} .bgx-pj__vpos{display:none} .bgx-pj__vcrumb{margin-bottom:4px} .bgx-pj__vpanel h2{font-size:19px; margin-bottom:8px} .bgx-pj__vout{margin:0 0 6px; padding:8px 12px} .bgx-pj__vout .v-out{font-size:14px} .bgx-pj__vmeta{margin-top:6px} .bgx-pj__vmeta div{padding:5px 0} .bgx-pj__vmeta dt{margin-bottom:2px; font-size:10.5px} .bgx-pj__vmeta dd{font-size:13.5px; line-height:1.35} .bgx-pj__vact{padding-top:10px; padding-bottom:12px} .bgx-pj__vact .bgx-sv__btn{padding-top:11px; padding-bottom:11px} }
.bgx-pj__sub{margin:20px 0 0; padding-left:16px; border-left:3px solid var(--sv-accent); font-size:20.5px; font-weight:600; line-height:1.5; color:var(--sv-ink)}
@media (min-width:1101px) and (max-width:1340px){ .bgx-pj__sub{font-size:19px} }
@media (max-width:640px){ .bgx-pj__sub{margin-top:16px; font-size:18px} }
.bgx-pj__vout{margin:4px 0 14px; padding:12px 14px; background:#F5F8FC; border-left:3px solid var(--sv-accent)}
.bgx-pj__vouth{margin:0 0 3px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sv-accent)}
.bgx-pj__vout .v-out{margin:0; font-size:15px; font-weight:600; line-height:1.45; color:var(--sv-ink)}
@media (min-width:1101px){ .bgx-pj__vout{margin:2px 0 10px; padding:10px 14px} .bgx-pj__vmeta{margin-top:12px} }
.bgx-pj__vcli{margin:8px 0 0; padding-top:8px; border-top:1px solid #DCE5F1; font-size:13px; line-height:1.45; color:var(--sv-body)}
.bgx-pj__vcli b{margin-right:8px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sv-muted)}
.bgx-pj__vcli[hidden]{display:none}
@media (min-width:1101px){ .bgx-pj__vmeta div{padding:8px 0} .bgx-pj__vmeta dt{margin-bottom:3px} .bgx-pj__vmeta dd{font-size:14.5px; line-height:1.45} }
@media (min-width:1101px){ .bgx-pj__vact{position:sticky; bottom:0; z-index:2} }
@media (min-width:1101px) and (max-height:920px){ .bgx-pj__vpanel{padding-top:20px} .bgx-pj__vpos{margin-bottom:4px} .bgx-pj__vpanel h2{font-size:21px; margin-bottom:8px} .bgx-pj__vout{margin:0 0 6px; padding:9px 12px} .bgx-pj__vout .v-out{font-size:14.5px; line-height:1.4} .bgx-pj__vcli{margin-top:6px; padding-top:6px; font-size:12.5px} .bgx-pj__vmeta{margin-top:6px} .bgx-pj__vmeta div{padding:6px 0} .bgx-pj__vmeta dt{margin-bottom:2px} .bgx-pj__vmeta dd{font-size:14px; line-height:1.4} .bgx-pj__vact{padding-top:12px; padding-bottom:14px} }
@media (min-width:1101px) and (max-width:1320px) and (max-height:920px){ .bgx-pj__vpos{display:none} .bgx-pj__vpanel{padding:18px 22px 0} .bgx-pj__vact{margin:auto -22px 0; padding:8px 22px 10px} .bgx-pj__vpanel h2{font-size:19.5px; margin-bottom:6px} .bgx-pj__vcrumb{font-size:12.5px} .bgx-pj__vout .v-out{font-size:14px} .bgx-pj__vmeta dd{font-size:13.5px; line-height:1.35} .bgx-pj__vmeta div{padding:5px 0} .bgx-pj__vact .bgx-sv__btn{padding-top:11px; padding-bottom:11px} .bgx-pj__vsvc{margin-top:4px} }
.bgx-pj__vpanel h2{margin-bottom:20px} .bgx-pj__vout{margin:0 0 20px}
@media (min-width:1101px) and (max-height:920px){ .bgx-pj__vpanel h2{margin-bottom:18px} .bgx-pj__vout{margin:0 0 16px} }
@media (min-width:1101px) and (max-width:1320px) and (max-height:920px){ .bgx-pj__vpanel h2{margin-bottom:10px} .bgx-pj__vout{margin:0 0 6px} }
@media (min-width:1101px) and (max-height:720px){ .bgx-pj__vpanel h2{margin-bottom:10px} .bgx-pj__vout{margin:0 0 8px} }
@media (min-width:1101px) and (max-height:920px){ .bgx-pj__vpanel h2{font-size:20px; line-height:1.25} }
@media (min-width:1101px) and (max-width:1320px) and (max-height:920px){ .bgx-pj__vpanel h2{font-size:18px} }
.bgx-pj__vpanel.is-tight .bgx-pj__vcrumb,.bgx-pj__vpanel.is-tight .bgx-pj__vpos{display:none} .bgx-pj__vpanel.is-tight h2{margin-bottom:8px} .bgx-pj__vpanel.is-tight .bgx-pj__vout{margin-bottom:6px} .bgx-pj__vpanel.is-tight .bgx-pj__vmeta div{padding:5px 0}
.bgx-pj__vout .v-out{min-height:2.9em}
@media (max-width:640px){ .bgx-pj__vout .v-out{min-height:4.35em} }
@media (max-width:1100px) and (min-aspect-ratio:4/3){ .bgx-pj__vout .v-out{min-height:5.8em} }
.bgx-pj__vpanel.is-tighter .bgx-pj__vmeta .bgx-pj__vwide:last-child{display:none}
/* fixed-height title: always reserves 2 lines (3 on small phones) so the details below never move */
.bgx-pj__vpanel h2{line-height:1.25; min-height:2.5em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
@media (max-width:400px){ .bgx-pj__vpanel h2{min-height:3.75em; -webkit-line-clamp:3} }
.bgx-pj__vcli{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* line space under the project name, then a small left-aligned "Project details" heading over all the facts */
.bgx-pj__vpanel h2{margin-bottom:22px !important}
.bgx-pj__vdh{display:flex; align-items:center; gap:12px; margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sv-ink)}
.bgx-pj__vdh::after{content:""; flex:1; height:1px; background:var(--sv-line)}
@media (min-width:1101px) and (max-height:920px){ .bgx-pj__vpanel h2{margin-bottom:18px !important} .bgx-pj__vdh{margin-bottom:10px; font-size:11.5px} }
@media (min-width:1101px) and (max-width:1320px) and (max-height:920px){ .bgx-pj__vpanel h2{margin-bottom:14px !important} .bgx-pj__vdh{margin-bottom:8px; font-size:11px} }
.bgx-pj__vpanel.is-tight h2{margin-bottom:10px !important} .bgx-pj__vpanel.is-tight .bgx-pj__vdh{margin-bottom:6px}
.bgx-pj__vmeta .v-scope{min-height:2.8em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
@media (max-width:400px), (max-width:1100px) and (min-aspect-ratio:4/3){ .bgx-pj__vmeta .v-scale,.bgx-pj__vmeta .v-s{min-height:3.1em} }
/* name sits at the bottom of its reserved 2-line area: spare space goes above it, never between name and details */
.bgx-pj__vpanel h2{display:flex !important; flex-direction:column; justify-content:flex-end; -webkit-line-clamp:unset}
.bgx-pj__vpanel h2 .v-t{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
@media (max-width:400px){ .bgx-pj__vpanel h2 .v-t{-webkit-line-clamp:3} }
/* calmer "Project details" heading */
.bgx-pj__vpanel h2{margin-bottom:14px !important}
.bgx-pj__vdh{margin:0 0 10px; font-size:11px; color:var(--sv-muted); letter-spacing:.16em}
@media (min-width:1101px) and (max-height:920px){ .bgx-pj__vpanel h2{margin-bottom:12px !important} .bgx-pj__vdh{margin-bottom:8px; font-size:10.5px} }
@media (min-width:1101px) and (max-width:1320px) and (max-height:920px){ .bgx-pj__vpanel h2{margin-bottom:10px !important} .bgx-pj__vdh{margin-bottom:6px} }
/* the result leads: larger outcome text */
.bgx-pj__vout .v-out{font-size:16px; line-height:1.42}
@media (min-width:1101px) and (max-width:1320px){ .bgx-pj__vout .v-out{font-size:14px} }
@media (min-width:1101px) and (max-height:720px){ .bgx-pj__vout .v-out{font-size:14px} }
@media (max-width:400px){ .bgx-pj__vout .v-out{font-size:15px} }
@media (max-width:1100px) and (min-aspect-ratio:4/3){ .bgx-pj__vout .v-out{font-size:14px} }
.bgx-pj__vsvc{max-width:100%; white-space:nowrap} .bgx-pj__vsvc .v-svc{overflow:hidden; text-overflow:ellipsis; min-width:0}
.bgx-pj__grid.is-svc .bgx-pj__cap > span{display:none}
@media (prefers-reduced-motion:reduce){ .bgx-pj__chips--ghost{display:none} .bgx-pj__chips.is-x, }
@media (prefers-reduced-motion:reduce){ .bgx-pj__card img,.bgx-as__tiles img{transition:none} }