.bg {
  --deep:#0b293d; --navy:#164e72; --blue:#28779a; --ink:#163346;
  --ice:#eaf5fa; --line:#cfe1e9; --pale:#cce9f8; --paper:#f7fbfd;
  --section-bg:#edf5f9; --heading:#163346; --accent:#28779a;
  --h:clamp(180px,18vw,278px);
  padding:27px 0 33px;
  color:var(--heading);
  background:var(--section-bg);
  font:400 15px/1.5 Roboto,Arial,sans-serif;
  scroll-margin-top:15px;
}
.bg,.bg *,.bg *::before,.bg *::after {box-sizing:border-box}
.bg-shell {width:min(1320px,calc(100% - 78px));margin:auto}
.bg a {color:inherit;text-decoration:none}
.bg a:focus-visible {outline:3px solid #6daccb;outline-offset:4px;z-index:5}
.bg-head {display:flex;align-items:end;justify-content:space-between;gap:15px;margin-bottom:17px;padding:8px 0 12px;border-bottom:1px solid var(--line)}
.bg-head>div:first-child {min-width:0}
.bg-kicker {color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.14em}
.bg-kicker::before {content:"";display:inline-block;width:25px;height:2px;margin-right:7px;vertical-align:middle;background:currentColor}
.bg h2 {margin:4px 0 5px;color:var(--heading);font:800 clamp(32px,4.6vw,67px)/.99 "Roboto Condensed",Roboto,Arial,sans-serif;letter-spacing:-.035em;text-transform:none}
.bg h2 em {font-style:normal;color:var(--accent)}
.bg-head p {margin:0;color:inherit;font-size:14px;opacity:.86}
.bg-count {display:flex;align-items:center;gap:9px;border-left:1px solid currentColor;padding-left:8px;color:var(--accent)}
.bg-count strong {font:900 clamp(44px,7.2vw,100px)/.78 "Roboto Condensed",Roboto,Arial,sans-serif;letter-spacing:-.08em}
.bg-count span {font-size:9px;line-height:1.18;font-weight:800;letter-spacing:.1em;white-space:nowrap}
.bg-spread {display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(var(--h),auto);gap:7px;margin-bottom:7px}
.bg-tile {position:relative;isolation:isolate;display:block;grid-column:span 4;min-width:0;overflow:hidden;background:var(--navy)}
.bg-tile img,.bg-tile::after {position:absolute;inset:0;width:100%;height:100%}
.bg-tile img {z-index:-2;object-fit:cover;object-position:var(--pos,center 53%);display:block;transition:transform .3s ease}
.bg-tile::after {z-index:-1;content:"";background:linear-gradient(0deg,#071b2bef 1%,#0b293d8f 30%,#0b293d1a 63%,transparent 79%)}
.bg-tile:hover img {transform:scale(1.035)}
.bg-caption {position:absolute;right:51px;bottom:16px;left:15px;color:#fff}
.bg-name {display:block;font:800 clamp(23px,3.35vw,52px)/.96 "Roboto Condensed",Roboto,Arial,sans-serif;letter-spacing:-.025em;overflow-wrap:anywhere}
.bg-service {display:block;margin-top:5px;color:var(--pale);font-size:11px;line-height:1.15;font-weight:700}
.bg-cta {position:absolute;bottom:15px;right:13px;display:grid;place-items:center;width:32px;height:32px;border:1px solid #cce9f8a3;color:#fff;background:#0b293d93;transition:background .2s ease,color .2s ease}
.bg-tile:hover .bg-cta {background:var(--ice);color:var(--deep)}
.bg-cta svg {width:15px;height:15px}
.bg-badge {position:absolute;top:10px;left:12px;padding:3px 6px;color:#fff;background:#0b293dbb;border:1px solid #cce9f84d;font-size:10px;letter-spacing:.1em;font-weight:800}
.bg-tail {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 13px;margin-top:13px;border:1px solid var(--line);color:var(--accent);background:var(--ice)}
.bg-tail a {display:flex;align-items:center;gap:5px;color:var(--navy);font-weight:800;white-space:nowrap}
.bg-tail a:hover {text-decoration:underline}
.bg-tail small {color:var(--ink)}
.bg-08 {--section-bg:#0b293d;--heading:#fff;--accent:#cce9f8;--line:#557f96}








.bg-08 .bg-head {border-color:#a1cadd;border-top:1px solid #a1cadd;padding-top:12px}
.bg-08 .bg-spread {grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;padding:5px 12px;border-block:4px double #8bb6cc;background:#153b55;margin-bottom:13px}
.bg-08 .bg-tile-1 {grid-column:span 7}
.bg-08 .bg-tile-2 {grid-column:span 3}
.bg-08 .bg-tile-3,.bg-08 .bg-tile-5 {grid-column:span 3}
.bg-08 .bg-tile-4 {grid-column:span 4}
.bg-08 .bg-tile {border:1px solid #91bace7c}
.bg-08 .bg-tile-1 .bg-name {font-size:clamp(37px,6vw,78px)}
.bg-08 .bg-badge {background:#fff;color:var(--deep);padding:3px 8px}




@media(max-width:1000px) {
  .bg-shell {width:calc(100% - 44px)}
  .bg-caption {right:10px;left:9px;bottom:12px}
  .bg-cta {width:25px;height:25px;bottom:auto;top:7px;right:6px}
}
@media(max-width:680px) {
  .bg {padding:13px 0 17px}
  .bg-shell {width:calc(100% - 20px)}
  .bg-head {gap:5px;margin-bottom:7px;padding-bottom:6px}
  .bg-count {padding-left:5px;gap:3px}
  .bg-count span {font-size:8px}
  .bg-count strong {font-size:38px}
  .bg h2 {font-size:clamp(30px,8.2vw,44px)}
  .bg-head p {font-size:12px}
  .bg-kicker {font-size:9px}
  .bg-kicker::before {width:14px}
  .bg .bg-spread {grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(165px,45vw,270px);gap:5px}
  .bg .bg-spread .bg-tile {grid-area:auto;grid-column:span 1;margin:0;clip-path:none}
  .bg .bg-spread .bg-tile-1 {grid-column:1/-1;min-height:0}
  .bg .bg-tile .bg-name {font-size:clamp(22px,6.7vw,38px)}
  .bg .bg-tile-1 .bg-name {font-size:clamp(32px,8vw,48px)}
  .bg .bg-tile .bg-caption {left:8px;right:7px;bottom:9px}
  .bg-tile .bg-service {font-size:9px}
  .bg-cta {width:24px;height:24px;right:7px}
  .bg-badge {left:7px;top:7px}
  .bg-08 .bg-spread {padding:5px}
  .bg-tail {padding:5px 7px}
  .bg-tail a {font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
  .bg-tile img,.bg-cta {transition:none}
}