/* =========================================================================
   SBL Healthcare RCM — Figma Theme front-end styles
   Design tokens live in theme.json. This file carries layout/visual rules
   that block markup + theme.json cannot express. Classes are applied to
   core blocks via the "Additional CSS class(es)" field so every pattern
   stays fully editable in the Site Editor.
   ========================================================================= */

:root {
	/* Figma frame is 1440 wide with a 72px gutter -> 1296px content.
	   --sbl-maxw is the OUTER frame; --sbl-gutter is padding inside it. */
	--sbl-maxw: 1440px;
	--sbl-gutter: clamp(20px, 5vw, 72px);
	--sbl-head-maxw: 1440px;
	--sbl-head-gutter: clamp(20px, 5vw, 44px);
	--sbl-card-radius: var(--wp--custom--radius--md, 12px);
	--sbl-tile-radius: var(--wp--custom--radius--tile, 14px);
}


/* ---- base ------------------------------------------------------------- */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.wp-site-blocks { overflow-x: clip; }
strong, b { font-weight: 600; }

/* Let the header/footer template-part wrappers pass alignment through so
   their alignfull inner group truly spans the viewport. */
.wp-site-blocks > .wp-block-template-part { display: contents; }

/* Kill block gaps between sections so they sit flush like the Figma frames
   (no white/black strips between the navbar, hero, and the sections). */
.wp-site-blocks > *,
.wp-site-blocks main,
.wp-site-blocks main > .wp-block-post-content,
.wp-block-post-content > * { margin-block: 0 !important; }
.wp-block-post-content > .wp-block-group,
.wp-block-post-content > .wp-block-cover { margin: 0 !important; }
.sbl-header + * { margin-top: 0 !important; }
/* The Elementor-rebuilt pages' root ".elementor" wrapper sits inside <main
   class="wp-block-group is-layout-flow">, so WordPress's flow-layout block-
   gap rule (`.is-layout-flow > * + *{margin-block-start:...}`) gives it a
   24px top margin — a gap between the header and hero that doesn't exist in
   the Figma spec, since every section already carries its own exact
   padding. */
main > .elementor { margin-top: 0 !important; }

/* --- Native-block sections: neutralise WP flow block-gap inside our grids
   and card groups so the layout matches the Figma spec exactly. --- */
.sbl-container,
.sbl-vision, .sbl-vision__left, .sbl-vision__right,
.sbl-core, .sbl-why, .sbl-ctaband__left, .sbl-ctaband__grid,
.sbl-footer__grid, .sbl-footer__brand { margin-block: 0; }
.sbl-goals > *, .sbl-core__grid > *, .sbl-why__panel > *,
.sbl-ctaband__right > *, .sbl-footer__grid > *,
.sbl-goal > *, .sbl-core-card > *, .sbl-why__cell > *,
.sbl-officebox > *, .sbl-footer__col > * { margin-block: 0; }
.sbl-goal p { margin: 0; }
.sbl-core-card h4 { margin: 0 0 8px; }
.sbl-core-card p { margin: 0; }
.sbl-why__cell .k { margin: 0; }
.sbl-why__cell h4 { margin: 12px 0 8px; }
.sbl-why__cell p { margin: 0; }
.sbl-officebox .k { margin: 0; }
.sbl-officebox .t { margin: 10px 0 5px; }
.sbl-officebox .a { margin: 0; }
.sbl-footer__brand .wp-block-image { margin: 0 0 24px; }
.sbl-footer__brand p { margin: 0; }
.sbl-footer__col h4 { margin: 0 0 24px; }
.sbl-footer__col ul { list-style: none; margin: 0; padding: 0; }
.sbl-footer__col li { margin: 0; }
.sbl-footer__bottom p { margin: 0; }
.sbl-vision__left .sbl-eyebrow,
.sbl-core .sbl-eyebrow, .sbl-why .sbl-eyebrow, .sbl-ctaband__left .sbl-eyebrow { margin: 0 0 15px; }

/* Green inline highlight inside headings (core supports <mark>) */
.has-inline-color.has-green-color,
mark.has-green-color { background: transparent; color: var(--wp--preset--color--green); }

/* ---- section rhythm ------------------------------------------------------ */
.sbl-section { padding-block: var(--wp--preset--spacing--90); }
.sbl-section.is-tight { padding-block: var(--wp--preset--spacing--80); }
.sbl-section--surface { background: var(--wp--preset--color--surface); }
.sbl-section--navy { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--on-navy); }
.sbl-section--navy-deep { background: var(--wp--preset--color--navy-deep); color: var(--wp--preset--color--on-navy); }
.sbl-section--navy :is(h1,h2,h3,h4,h5,h6) { color: #fff; }

/* ---- exact-spec section system (Figma 1440 / 72 gutter / 1296 content) --- */
.sbl-sec { padding-block: 80px; }
.sbl-sec--surface { background: #f4f6f9; }
.sbl-sec--navy { background: #0b1f3a; color: #aeb9cc; }
.sbl-sec--navy :is(h1,h2,h3,h4,h5,h6) { color: #fff; }
.sbl-container { max-width: var(--sbl-maxw); margin-inline: auto; padding-inline: var(--sbl-gutter); box-sizing: border-box; }
.sbl-h2 {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600; color: #0b1f3a;
	font-size: clamp(1.75rem, 3.2vw, 35px); line-height: 1.28; letter-spacing: -0.01em;
	margin: 0;
}
.sbl-sec--navy .sbl-h2 { color: #fff; }

/* ---- eyebrow / kicker (Figma: 13px Poppins 600, #93a2bb, 7px green dot) --- */
.sbl-eyebrow {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600;
	font-size: 13px; line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #93a2bb;
	margin: 0 0 15px;
	display: flex;
	align-items: center;
	gap: 7px;
}
.sbl-eyebrow::before {
	/* Elementor reserves ::before on every container for its own background-
	   overlay layer (`.e-con::before{position:absolute;top:0;left:0;width:
	   max(100%,...);...}` in frontend.css) — our rule wins the properties it
	   sets, but never declared `position`, so Elementor's `absolute` (plus
	   its 0,0 offset and 100% sizing) won by default and pinned our dot over
	   the container's top-left corner, on top of the first letter. Force it
	   back into the normal flex flow explicitly. */
	position: static; inset: auto; display: block;
	content: "";
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--wp--preset--color--green);
	flex: none;
}
.sbl-eyebrow.no-dot::before { display: none; }
.sbl-section--navy .sbl-eyebrow { color: #93a2bb; }
.sbl-eyebrow.is-line::before {
	width: 28px; height: 2px; border-radius: 0;
}

/* ---- lead paragraph -------------------------------------------------- */
.sbl-lead { font-size: 1.0625rem; line-height: 1.75; color: var(--wp--preset--color--muted); max-width: 46ch; }
.sbl-section--navy .sbl-lead { color: var(--wp--preset--color--on-navy); }
.sbl-measure { max-width: 52ch; }

/* ---- header (Figma: 1440 frame, 86px tall, logo x=40, CTA right x=1390) --- */
.sbl-header {
	position: sticky; top: 0; z-index: 100;
	background: #ffffff;
	border-bottom: 1px solid rgba(11,31,58,.07);
}
.sbl-header.is-layout-constrained { padding-inline: 0 !important; }
.sbl-header.is-layout-constrained > .sbl-header__inner,
.sbl-header .sbl-header__inner {
	width: 100% !important; max-width: var(--sbl-head-maxw) !important; margin-inline: auto !important;
	padding-left: clamp(1.25rem, 4vw, 40px); padding-right: clamp(1.25rem, 4vw, 50px);
	box-sizing: border-box;
	min-height: 86px;
	display: flex; align-items: center; flex-wrap: nowrap;
	gap: 0;
}
.sbl-header .sbl-header__inner > .sbl-brand { margin-right: auto !important; }
.sbl-brand { flex: none; margin-right: auto; display: flex; align-items: center; text-decoration: none; }
.sbl-brand img, .sbl-brand svg { height: 44px; width: auto; display: block; }

/* nav — force the whole subtree to shrink-wrap and sit right of centre */
.sbl-header .sbl-nav,
.sbl-header .sbl-nav .wp-block-navigation__responsive-container,
.sbl-header .sbl-nav .wp-block-navigation__responsive-container-content {
	flex: 0 0 auto !important; width: auto !important;
}
.sbl-header .sbl-nav .wp-block-navigation__container {
	gap: 0; align-items: center; flex-wrap: nowrap;
	flex: 0 0 auto; width: auto; justify-content: flex-end;
}
.sbl-header nav.sbl-nav.is-layout-flex { flex-grow: 0 !important; }
.sbl-header .sbl-nav .wp-block-navigation-item { margin: 0; }
.sbl-header .sbl-nav .wp-block-navigation-item > a,
.sbl-header .sbl-nav .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: inline-flex; align-items: center;
	height: 37px; padding: 0 26px; border-radius: 999px;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500; font-size: 14px; line-height: 1;
	color: #141f2b; text-decoration: none;
	transition: background-color .12s ease;
}
/* no green, no underline on hover / focus / tap */
.sbl-header .sbl-nav a,
.sbl-header .sbl-nav a:hover,
.sbl-header .sbl-nav a:focus,
.sbl-header .sbl-nav a:active { text-decoration: none !important; }
.sbl-header .sbl-nav .wp-block-navigation-item > a:hover {
	color: #0b1f3a; background: #f0f4f7;
}
/* selected tab — light-blue pill sized to the label (Figma #e8f5fc) */
.sbl-header .sbl-nav .current-menu-item > a,
.sbl-header .sbl-nav .current_page_item > a,
.sbl-header .sbl-nav .is-active > a,
.sbl-header .sbl-nav .is-active > .wp-block-navigation-item__content,
.sbl-header .sbl-nav .current-menu-item > .wp-block-navigation-item__content {
	background: #e8f5fc; color: #0b1f3a;
}
.sbl-header .sbl-nav .wp-block-navigation__submenu-icon { margin-left: -14px; padding: 0; }
.sbl-header .sbl-nav .wp-block-navigation__submenu-icon svg { width: 14px; height: 14px; }
.sbl-header .sbl-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--border); border-radius: 12px;
	background: #fff; box-shadow: 0 12px 30px rgba(11,31,58,.12); padding: 6px;
}
.sbl-header .sbl-nav .wp-block-navigation__submenu-container .wp-block-navigation-item > a { border-radius: 8px; }

/* CTA — navy pill (#091729, radius 23, ~16px h-padding) */
.sbl-header .sbl-header__inner > .sbl-header__cta { flex: 0 0 auto !important; margin: 0 0 0 44px !important; }
.sbl-header .wp-block-button.sbl-btn-navy .wp-block-button__link,
.wp-block-button.sbl-btn-navy .wp-block-button__link {
	background: #091729 !important; color: #fff !important;
	border-radius: 999px; padding: 14px 18px 13px;
	font-family: var(--wp--preset--font-family--inter); font-weight: 600; font-size: 14px; line-height: 1;
	border: 0;
}
.sbl-btn-navy .wp-block-button__link:hover { background: #12233c !important; }

@media (max-width: 1300px) {
	.sbl-header .sbl-nav .wp-block-navigation-item > a { padding: 0 16px; }
	.sbl-header .sbl-header__inner > .sbl-header__cta { margin-left: 24px !important; }
}
@media (max-width: 1024px) {
	.sbl-header .sbl-header__inner > .sbl-header__cta { display: none; }
}
@media (max-width: 600px) {
	.sbl-header__inner { min-height: 68px; }
	.sbl-brand img, .sbl-brand svg { height: 38px; }
}

/* ---- buttons: extra styles ---------------------------------------- */
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover { border-color:#fff; background: rgba(255,255,255,.06); }
.wp-block-button.is-style-pill .wp-block-button__link { border-radius: 999px; }
.wp-block-button .wp-block-button__link { transition: background-color .15s ease, border-color .15s ease; }

/* arrow affordance on link-style buttons / links */
.sbl-arrow-link a, a.sbl-arrow-link {
	font-weight: 500; text-decoration: none; color: var(--wp--preset--color--cyan);
	display: inline-flex; align-items: center; gap: .4rem;
}
.sbl-arrow-link a::after, a.sbl-arrow-link::after { content: "→"; transition: transform .15s ease; }
.sbl-arrow-link a:hover::after, a.sbl-arrow-link:hover::after { transform: translateX(3px); }

/* =========================================================================
   HERO  (Figma home: 1440 frame, content area 674px, 72px gutter,
   H1 55/65 Poppins 700, eyebrow 12 #76bc21, intro 16/25 #dce7f2)
   ========================================================================= */
.sbl-hero.wp-block-cover {
	color: #fff; position: relative; overflow: hidden;
	align-items: flex-start; padding: 0;
	background: #0b1f3a;
}
.sbl-hero--home.wp-block-cover { min-height: 760px; }
.sbl-hero.wp-block-cover .wp-block-cover__inner-container {
	position: relative; z-index: 2;
	width: 100%; max-width: var(--sbl-maxw); margin-inline: auto;
	padding: 74px var(--sbl-gutter) 40px;
	box-sizing: border-box;
}
.sbl-hero--home.wp-block-cover .wp-block-cover__inner-container { padding-bottom: 140px; }
/* left-to-right navy scrim so copy stays legible over the image — Figma's
   source photo is dimmed roughly ~58% by navy across its *entire* width
   (confirmed by sampling the reference export), not just faded out on the
   left; the old gradient bottomed out at 0% opacity by 72%, which left the
   icon graphic on the right rendering at full raw vividness — much more
   saturated/glowing than the design. Hold a flat navy tint the rest of the
   way instead of fading to nothing. */
.sbl-hero--home .wp-block-cover__background { display: none; }
.sbl-hero--home::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, rgba(11,31,58,.94) 0%, rgba(11,31,58,.85) 30%, rgba(11,31,58,.72) 50%, rgba(11,31,58,.72) 100%);
}
.sbl-hero--home .wp-block-cover__image-background { object-fit: cover; object-position: right center; z-index: 0; }

/* Elementor-rebuilt hero (native widgets, page-4 Home): the section is a plain
   Elementor container carrying class "sbl-hero sbl-hero--home" — it is never
   ".wp-block-cover" so none of the rules above apply. Without an explicit
   position on .sbl-hero, the ::before scrim and .sbl-statbar-wrap (both
   position:absolute) escape to the nearest positioned ancestor instead of
   this section, which is what caused the washed-out text / misplaced stat
   bar. Re-establish the same stacking here, scoped to skip real cover blocks
   so the other (not-yet-rebuilt) Gutenberg pages are unaffected. */
.sbl-hero:not(.wp-block-cover) {
	position: relative; overflow: hidden; color: #fff; background: #0b1f3a;
}
.sbl-hero--home:not(.wp-block-cover) { min-height: 760px; }
.sbl-hero__inner {
	position: relative; z-index: 2;
	width: 100%; max-width: var(--sbl-maxw); margin-inline: auto;
	padding: 74px var(--sbl-gutter) 140px;
	box-sizing: border-box;
}
.sbl-statbar-wrap { z-index: 3; }

/* Elementor-rebuilt inner-page heroes (About / Services / Who We Serve /
   Blog / Contact) — same ".wp-block-cover"-only-rule gap as the home hero
   above, plus these are built with one fewer nesting level (a single
   ".sbl-container" wrapping the copy column, no ".wp-block-cover__inner-
   container"), so re-declare the positioning + copy-column sizing here. */
.sbl-hero.is-inner:not(.wp-block-cover) {
	/* align-items:center did nothing useful here (see the fuller note on
	   .sbl-inhero below) — it was only ever visually "working" because the
	   explicit padding happened to look reasonable on its own. Correct it
	   to justify-content for the same reason. */
	position: relative; overflow: hidden; display: flex !important; flex-direction: column !important; justify-content: center;
	min-height: 440px; padding: 80px 0; box-sizing: border-box; background: #0b1f3a;
}
.sbl-inhero:not(.wp-block-cover) {
	/* Elementor containers default flex-direction to column (see the other
	   ELEMENTOR INTEGRATION notes in this file) — align-items:center on a
	   COLUMN flex container centers the CROSS axis (horizontal), not the
	   main axis, so the content column was sitting flush against the top
	   instead of vertically centered in the 478px hero. justify-content is
	   the one that centers the main (vertical, in column mode) axis. */
	position: relative; overflow: hidden; color: #fff;
	min-height: 478px; display: flex !important; flex-direction: column !important; justify-content: center; background: #0b1f3a;
}
.sbl-inhero--services:not(.wp-block-cover) {
	/* This one has enough content that it should anchor to the top (with its
	   own 71px padding) rather than vertically center like .sbl-inhero's
	   base rule — override the inherited justify-content back to flex-start. */
	background: #051f40; min-height: 580px; justify-content: flex-start; padding: 71px 0 80px;
}
.sbl-hero.is-inner:not(.wp-block-cover)::before,
.sbl-inhero--about:not(.wp-block-cover)::before,
.sbl-inhero--services:not(.wp-block-cover)::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.sbl-hero.is-inner:not(.wp-block-cover)::before { background: linear-gradient(90deg,#0b1f3a,rgba(11,31,58,.55) 70%,rgba(11,31,58,.2)); }
.sbl-inhero--about:not(.wp-block-cover)::before { background: linear-gradient(90deg, rgba(11,31,58,.85) 0%, rgba(11,31,58,.74) 40%, rgba(11,31,58,.74) 100%); }
/* Figma keeps this photo as a faint texture: measured against the frame it
   shows through at roughly 4% on the left and 15% on the right (contrast
   std 2-7 where the raw image runs 43-63), so the veil is the rest. The
   old .35 right-hand stop left the whiteboard and brick reading as a
   photograph rather than a background. */
.sbl-inhero--services:not(.wp-block-cover)::before { background: linear-gradient(90deg, rgba(5,31,64,.96) 0%, rgba(5,31,64,.90) 45%, rgba(5,31,64,.86) 100%); }
.sbl-hero.is-inner:not(.wp-block-cover) > .sbl-container,
.sbl-inhero:not(.wp-block-cover) > .sbl-container { position: relative; z-index: 2; }

.sbl-hero__col { max-width: 640px; }
.sbl-hero__eyebrow {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600; font-size: 13px; line-height: 1.2;
	letter-spacing: .1em; text-transform: uppercase;
	color: #76bc21; margin: 0 0 22px;
}
.sbl-hero__title {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700; color: #fff; margin: 0;
	font-size: clamp(2.5rem, 4.4vw, 56px);
	line-height: 1.16; letter-spacing: -0.005em;
}
.sbl-hero__intro {
	font-size: 16px; line-height: 1.62; font-weight: 400;
	color: #c7d3e2; max-width: 620px; margin: 28px 0 0;
}
.sbl-hero__intro strong { color: #83b8e8; font-weight: 600; }

.sbl-hero__props {
	list-style: none; margin: 44px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 18px 30px;
}
.sbl-hero__props li {
	position: relative; padding-left: 30px; box-sizing: border-box;
	font-size: 13px; font-weight: 500; line-height: 1.35; color: #fff;
	width: 192px; flex: 0 0 auto;
}
.sbl-hero__props li::before {
	/* top:1px only lined the ring up with the first line — with the two-line
	   labels ("Greater" / "financial stability") that pins it to the top
	   instead of the vertical center of the whole line. */
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid currentColor; background: transparent;
}
.sbl-hero__props .ring-blue::before  { color: #2f80d8; }
.sbl-hero__props .ring-green::before { color: #76bc21; }
.sbl-hero__props .ring-red::before   { color: #e5533d; }

.sbl-hero__cta { margin-top: 40px; }
.wp-block-button.sbl-btn-green .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center;
	background: #76bc21; color: #fff;
	border-radius: 999px; min-width: 210px; height: 54px; padding: 0 28px;
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600; font-size: 13.5px; line-height: 1;
}
.wp-block-button.sbl-btn-green .wp-block-button__link:hover { background: #5fa015; color: #fff; }

/* inner-page hero (breadcrumb variant) keeps a plain navy fill */
.sbl-hero.is-inner.wp-block-cover { min-height: 440px; align-items: center; }
.sbl-hero.is-inner::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg,#0b1f3a,rgba(11,31,58,.55) 70%,rgba(11,31,58,.2)); pointer-events: none; }
.sbl-hero :is(h1,h2) { color: #fff; }
.sbl-hero .sbl-lead { color: var(--wp--preset--color--on-navy-strong); }
.sbl-hero__title.is-lg { max-width: 20ch; }

/* =========================================================================
   INNER-PAGE HERO — .sbl-inhero  (Figma About: band 478px, gutter 72,
   eyebrow 15/500 #d4d4d4 + green dot, H 35/600, intro 16/400 #aeb9cc)
   ========================================================================= */
.sbl-inhero.wp-block-cover {
	color: #fff; position: relative; overflow: hidden;
	min-height: 478px; padding: 0; align-items: center;
	background: #0b1f3a;
}
.sbl-inhero .wp-block-cover__background { display: none; }
.sbl-inhero--about::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, rgba(11,31,58,.85) 0%, rgba(11,31,58,.74) 40%, rgba(11,31,58,.74) 100%);
}
.sbl-inhero .wp-block-cover__image-background { object-fit: cover; object-position: right center; z-index: 0; }

/* Services hero — deeper navy #051f40, bg image at ~12% opacity, 45px H1 */
.sbl-inhero--services { background: #051f40; min-height: 580px; align-items: flex-start; }
.sbl-inhero--services .wp-block-cover__inner-container { padding-top: 71px; padding-bottom: 80px; }
.sbl-inhero--services .wp-block-cover__image-background { opacity: .18; object-position: center; }
/* The hero is an Elementor container with a CSS background now, not a
   wp-block-cover, so the .18 opacity on the <img> above no longer reaches
   anything and the photo was rendering at full strength. Figma keeps it as
   a faint texture: matching its contrast (std ~7 on the right, ~3 bottom
   left, against ~26 and ~11 raw) puts the image at about 27%, so the veil
   is the other 73%. */
.sbl-inhero--services::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: rgba(5,31,64,.73);
}
/* .sbl-inhero__col (max-width 680) is declared later and the services hero
   column carries both, so this needs !important — at Figma's 45px the
   second headline line is 777px wide and would otherwise break in three. */
.sbl-inhero__col--wide { max-width: 820px !important; }
.sbl-crumb { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; font-size: 13px; font-weight: 400; color: #fff; margin: 0 0 47px; }
.sbl-crumb a { color: #fff; text-decoration: none; }
.sbl-crumb a:hover { text-decoration: underline; }
.sbl-crumb > span { color: rgba(255,255,255,.55); }
.sbl-crumb [aria-current] { color: rgba(255,255,255,.75); }
.sbl-inhero__kicker {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 12.5px; font-weight: 700; line-height: 20px;
	letter-spacing: .02em; text-transform: uppercase;
	color: #75bd21; margin: 0 0 18px;
}
/* Elementor's own .elementor-widget-text-editor rule sets colour and weight
   on the widget itself, so the green/700 above never reached the text — it
   rendered grey and light. Restate them on the real element. */
.sbl-inhero__kicker .elementor-widget-text-editor {
	font-size: 12.5px !important; font-weight: 700 !important; line-height: 20px !important;
	letter-spacing: .02em; text-transform: uppercase;
	color: #75bd21 !important;
}
/* Carries .sbl-inhero__title too, and that rule is declared later in this
   file — so this needs !important to keep Figma's 45px (the generic inner
   hero title is 35px). Restated on the widget for the same reason as the
   kicker: the class sits on the wrapper, the type has to reach the text. */
.sbl-inhero__title--xl,
.sbl-inhero__title--xl .elementor-widget-text-editor {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: clamp(2rem, 4vw, 45px) !important; line-height: 1.222 !important; font-weight: 700 !important;
	letter-spacing: -0.005em; color: #fff !important;
}
.sbl-inhero__title--xl { max-width: 820px; margin: 0; }
.sbl-inhero__title--xl .has-green-color,
.sbl-inhero__title--xl mark { color: #75bd21; background: transparent; }
.sbl-inhero__intro--stack {
	max-width: 600px; margin: 22px 0 0;
	/* container now: kill Elementor's 20px child gap and 10px padding so the
	   three paragraphs stay flush, the way one HTML block had them. */
	--gap: 0px; --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
	gap: 0 !important; padding: 0 !important;
}
.sbl-inhero__intro--stack p,
.sbl-inhero__intro--stack .elementor-widget-text-editor { font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #bfd1e5 !important; margin: 0; }
.sbl-inhero .wp-block-cover__inner-container {
	position: relative; z-index: 2;
	width: 100%; max-width: var(--sbl-maxw); margin-inline: auto;
	padding: 0 var(--sbl-gutter); box-sizing: border-box;
}
.sbl-inhero__col { max-width: 680px; }
.sbl-inhero__eyebrow {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 500; font-size: 15px; line-height: 1.2;
	letter-spacing: .13em; text-transform: uppercase;
	color: #d4d4d4; margin: 0 0 8px;
	display: flex; align-items: center; gap: 9px;
}
.sbl-inhero__eyebrow::before { position: static; inset: auto; display: block; content: ""; width: 7px; height: 7px; border-radius: 50%; background: #76bc21; flex: none; }
.sbl-inhero__title {
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 600; color: #fff; margin: 0;
	font-size: clamp(1.65rem, 3.4vw, 35px); line-height: 1.14; letter-spacing: -0.01em;
}
.sbl-inhero__intro {
	font-size: 16px; line-height: 1.45; font-weight: 400;
	color: #aeb9cc; max-width: 470px; margin: 8px 0 0;
}
.sbl-pilllist {
	list-style: none; margin: 24px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 12px;
}
/* In the About hero the pills wrap 2 / 2 / 1 in the design; without a cap
   they sit on the full 680px copy column and wrap 2 / 3 instead. */
.sbl-inhero__col .sbl-pilllist { max-width: 520px; }
.sbl-pilllist li {
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 13.9px; font-weight: 500; line-height: 1; color: #dce3ee;
	padding: 13px 21px; border-radius: 999px;
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.18);
	box-sizing: border-box;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.sbl-pilllist li:hover {
	background: rgba(255,255,255,.11);
	border-color: rgba(255,255,255,.4);
	color: #fff;
	transform: translateY(-2px);
}
.sbl-pilllist--sm li {
	font-size: 13.65px; padding: 11px 19px; border-radius: 9px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}

/* Chips as individual Elementor elements ------------------------------
   Each chip is now its own container (.sbl-pill) wrapping a Text Editor
   widget, so it can be edited/duplicated/removed in the editor. The rules
   below mirror the <li> styling above for that structure — with the usual
   !important where Elementor's later-loading container CSS would otherwise
   win (flex direction, wrap, gap, and the widget's own font/colour). */
.sbl-pilllist {
	display: flex !important; flex-direction: row !important;
	flex-wrap: wrap !important; gap: 12px !important;
	align-items: flex-start !important;
}
.sbl-pill {
	width: max-content !important; max-width: 100% !important;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 13.9px; line-height: 1;
	padding: 13px 21px !important; border-radius: 999px;
	background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.18);
	box-sizing: border-box;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.sbl-pill, .sbl-pill .elementor-widget-text-editor {
	color: #dce3ee !important; font-weight: 500 !important;
}
.sbl-pill:hover {
	background: rgba(255,255,255,.11);
	border-color: rgba(255,255,255,.4);
	transform: translateY(-2px);
}
.sbl-pill:hover, .sbl-pill:hover .elementor-widget-text-editor { color: #fff !important; }
.sbl-pilllist--sm .sbl-pill {
	font-size: 13.65px; padding: 11px 19px !important; border-radius: 9px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}

/* ---- Specialties covered panel (Figma navy panel 1285x264 r20) ---- */
.sbl-specpanel {
	background: #0b1f3a; border-radius: 20px;
	padding: 52px 48px;
	display: grid; grid-template-columns: 383px 1fr; gap: 61px; align-items: start;
}
.sbl-specpanel .sbl-eyebrow { font-size: 15px; color: #93a2bb; }
.sbl-specpanel .sbl-h2 { color: #fff; line-height: 1.05; margin: 12px 0 0; font-size: clamp(1.75rem, 3vw, 35px); }
.sbl-specpanel__p { font-size: 16px; line-height: 23px; color: #aeb9cc; max-width: 383px; margin: 13px 0 0; }
@media (max-width: 900px) {
	.sbl-specpanel { grid-template-columns: 1fr; gap: 28px; padding: 36px 28px; }
	.sbl-inhero.wp-block-cover { min-height: 400px; }
}

/* ---- Leadership team (Figma: navy sec, H 35/600, intro 18/400 #fff,
   6 photo cards ~5:6 r13, name 14/600, role 12/400 #b9c7d4) ---- */
/* the design breaks this heading after "Growth &" — unconstrained it runs
   the full container width on one line instead. */
.sbl-leaders__h2 { color: #fff; max-width: 720px; margin: 28px 0 0; line-height: 1.14; }
.sbl-leaders__p { font-size: 18px; line-height: 1.25; font-weight: 400; color: #fff; margin: 23px 0 0; max-width: 1250px; }
.sbl-leaders__label { font-family: var(--wp--preset--font-family--poppins); font-size: 15px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin: 46px 0 0; }
.sbl-leaders__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 34px; margin-top: 28px; }
.sbl-leader {
	display: block; width: 100%; margin: 0; padding: 0;
	border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.sbl-leader:focus-visible { outline: 2px solid #76bc21; outline-offset: 4px; border-radius: 4px; }
.sbl-leader__photo {
	display: block; position: relative; overflow: hidden;
	aspect-ratio: 5 / 6; border-radius: 13px;
	background: linear-gradient(155deg, #24374f 0%, #14243a 60%, #101f33 100%);
	border: 1px solid rgba(255,255,255,.06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.sbl-leader:hover .sbl-leader__photo { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.35); }
.sbl-leader__photo img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: top center; display: block;
}
.sbl-leader__cap { display: block; }
.sbl-leader .n { display: block; font-family: var(--wp--preset--font-family--poppins); font-size: 14px; font-weight: 600; color: #fff; margin-top: 14px; }
.sbl-leader .r { display: block; font-size: 12px; font-weight: 400; color: #b9c7d4; margin-top: 4px; }
@media (max-width: 1000px) {
	.sbl-leaders__grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
@media (max-width: 560px) {
	.sbl-leaders__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Leader profile modal (Figma node 285:57 — glass card) ---- */
.sbl-modal {
	position: fixed; inset: 0; z-index: 1000;
	display: grid; place-items: center; padding: 24px;
	opacity: 0; transition: opacity .2s ease;
}
.sbl-modal[hidden] { display: none; }
.sbl-modal.is-open { opacity: 1; }
.sbl-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(7,15,29,.55);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sbl-modal__card {
	position: relative; z-index: 1;
	width: min(732px, 100%); max-height: min(88vh, 900px); overflow-y: auto;
	border-radius: 26px; padding: 40px 80px 56px;
	background: rgba(11,31,58,.62);
	backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
	border: 1px solid rgba(255,255,255,.14);
	box-shadow: 0 40px 90px rgba(0,0,0,.45);
	text-align: center; color: #fff;
	transform: translateY(14px) scale(.98); opacity: 0;
	transition: transform .25s ease, opacity .25s ease;
}
.sbl-modal.is-open .sbl-modal__card { transform: none; opacity: 1; }
.sbl-modal__close {
	position: absolute; top: 16px; right: 18px;
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05);
	color: #cdd7e4; font-size: 20px; line-height: 1; cursor: pointer;
	display: grid; place-items: center;
}
.sbl-modal__close:hover { background: rgba(255,255,255,.12); color: #fff; }
.sbl-modal__photo {
	display: block; width: 160px; margin: 0 auto;
	aspect-ratio: 160 / 188; border-radius: 13px; overflow: hidden;
	border: 1px solid rgba(255,255,255,.12);
	box-shadow: 0 16px 34px rgba(0,0,0,.4);
	background: linear-gradient(155deg, #24374f, #101f33);
}
.sbl-modal__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.sbl-modal__name { font-family: var(--wp--preset--font-family--poppins); font-size: 20px; font-weight: 600; color: #fff; margin: 16px 0 0; }
.sbl-modal__title { font-size: 15px; font-weight: 400; color: #b9c7d4; margin: 3px 0 0; }
.sbl-modal__bio { font-size: 14px; line-height: 1.55; color: #fff; text-align: justify; margin: 28px 0 0; }
.sbl-modal__bio strong { font-weight: 700; }
.sbl-modal__fh { font-family: var(--wp--preset--font-family--poppins); font-size: 14px; font-weight: 700; color: #fff; text-align: left; margin: 22px 0 0; }
.sbl-modal__focus { font-size: 14px; line-height: 1.65; color: #fff; text-align: left; margin: 12px 0 0; }
@media (max-width: 620px) {
	.sbl-modal__card { padding: 36px 24px 40px; }
	.sbl-modal__bio { text-align: left; }
}

/* breadcrumb */
.sbl-breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: .75rem; color: rgba(255,255,255,.6); margin-bottom: 1.25rem; }
.sbl-breadcrumb a { color: rgba(255,255,255,.6); text-decoration: none; }
.sbl-breadcrumb a:hover { color: #fff; }
.sbl-breadcrumb .sep { opacity: .6; }
.sbl-breadcrumb [aria-current] { color: rgba(255,255,255,.92); }

/* ---- stats strip — translucent band pinned to the base of the hero ---- */
.sbl-statbar-wrap {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
	background: linear-gradient(180deg, rgba(8,18,34,.35) 0%, rgba(7,15,29,.82) 100%);
	border-top: 1px solid rgba(255,255,255,.08);
}
.sbl-statbar {
	max-width: var(--sbl-maxw); margin-inline: auto;
	padding-inline: var(--sbl-gutter);
	display: grid; grid-template-columns: repeat(5, 1fr);
	min-height: 110px; align-items: center;
}
.sbl-statbar > * { padding: 20px 0 20px 40px; border-left: 1px solid rgba(255,255,255,.12); }
.sbl-statbar > *:first-child { border-left: 0; }
.sbl-statbar .num { font-family: var(--wp--preset--font-family--poppins); font-weight: 700; font-size: 30px; color: #fff; line-height: 1.1; letter-spacing: -0.01em; }
.sbl-statbar .lbl { font-size: 13px; font-weight: 400; color: #aeb9cc; margin-top: 5px; }

/* ---- Vision & Goals ------------------------------------------------ */
.sbl-vision { display: grid; grid-template-columns: 490px 1fr; gap: 27px; align-items: start; }
/* 490px was tuned while the page was (wrongly) rendering in Roboto; in the
   real Poppins the design breaks this heading after "healthcare", which
   needs a ~380px measure. */
.sbl-vision__left .sbl-h2 { margin: 15px 0 35px; max-width: 380px; line-height: 1.29; }
.sbl-vision__k { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5b6470; margin: 0 0 12px; }
.sbl-vision__p { font-size: 16px; line-height: 23px; color: #5b6470; max-width: 400px; margin: 0; }
.sbl-vision__right { margin-top: 28px; }
.sbl-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 21px; }
.sbl-goal {
	background: #fff; border: 1px solid #e8edf3; border-radius: 9px;
	height: 76px; padding: 0 15px; box-sizing: border-box;
	/* Elementor containers default to flex-direction:column (see the other
	   ELEMENTOR INTEGRATION notes in this file) — this card needs icon-left,
	   text-right, so flex-direction must be forced back to row. */
	display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 10px;
	font-size: 11.5px; font-weight: 500; line-height: 15px; letter-spacing: -0.005em; color: #1a1a1a;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sbl-goal:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(11,31,58,.1);
	border-color: #d7dfea;
}
.sbl-goal--wide { grid-column: 1 / -1; max-width: 401px; margin-inline: auto; width: 100%; }
.sbl-goal__i { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex: none; transition: transform .2s ease; }
.sbl-goal:hover .sbl-goal__i { transform: scale(1.1); }
.sbl-goal__i svg { width: 16px; height: 16px; }
.sbl-goal__i.t-green { background: #eaf5dc; color: #5fa015; }
.sbl-goal__i.t-pink  { background: #fbe4e2; color: #d0463a; }
.sbl-goal__i.t-sky   { background: #e3f5fb; color: #00a7e1; }
.sbl-goal__i.t-grey  { background: #e4e9f2; color: #5b6470; }
@media (max-width: 900px) {
	.sbl-vision { grid-template-columns: 1fr; gap: 36px; }
	.sbl-vision__right { margin-top: 0; }
}
@media (max-width: 560px) {
	.sbl-goals { grid-template-columns: 1fr; }
	.sbl-goal--wide { max-width: none; }
}

/* ---- Core services (navy) --------------------------------------- */
.sbl-eyebrow--center { justify-content: center; }
.sbl-core__h2 { text-align: center; color: #fff; margin: 10px auto 0; max-width: 640px; line-height: 1.1; }
.sbl-core__sub { text-align: center; font-size: 16px; line-height: 23px; color: #aeb9cc; max-width: 570px; margin: 11px auto 0; }
.sbl-core__grid {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 25px;
	max-width: 1044px; margin: 44px auto 0;
}
.sbl-core-card {
	background: rgba(255,255,255,.045);
	border: 1px solid rgba(255,255,255,.07);
	border-radius: 9px; padding: 21px 17px;
	/* Elementor containers default their children to a 20px flex gap
	   (frontend.css: --gap: var(--widgets-spacing, 20px)) — on top of the
	   icon's own 16px margin-bottom and the heading's 8px, that stacked up
	   to ~30-40px between icon/title/description instead of Figma's tight
	   ~8-16px. Zero it and let our own margins do the spacing, same fix
	   pattern as the rest of this ELEMENTOR INTEGRATION section. */
	display: flex; flex-direction: column; gap: 0;
	transition: transform .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
/* Margin on the inner icon-span/<h4> is meant to collapse through its
   (empty, unstyled) widget wrapper div and read as that wrapper's own
   margin — but flex items in this Elementor build don't reliably show that
   collapsed-through space. Put the spacing directly on the wrapper divs
   themselves instead of trusting the collapse. */
.sbl-core-card > div.elementor-widget-html { margin-bottom: 16px !important; }
.sbl-core-card > div.elementor-widget-heading { margin-bottom: 8px !important; }
/* Sections whose h2 goes straight into a card grid with no lead paragraph
   between them (e.g. About "Industries served.") need the grid pushed down
   further than the Elementor-default 20px gap — the original (pre-rebuild)
   Gutenberg pattern had a dedicated `margin-bottom: 2.5rem` on this exact
   heading for that reason; restore it here. */
.sbl-h2--nosub { margin-bottom: 2.5rem !important; }
/* Same story, one level down: a lead paragraph that's the last thing before
   a card grid / stat row (RCM expertise, delivery steps, performance
   snapshot, who-we-serve segments) had this exact margin as an inline style
   in the original Gutenberg patterns — restore it so the grid doesn't sit
   right under the copy on nothing but Elementor's flat 20px default gap. */
.sbl-lead--gap { margin-bottom: 2.5rem !important; }
.sbl-core-card:hover {
	transform: translateY(-4px);
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.16);
	box-shadow: 0 16px 30px rgba(4,12,26,.35);
}
.sbl-core-card--green { background: #76bc21; border-color: transparent; }
.sbl-core-card--green:hover { background: #82c92c; box-shadow: 0 16px 30px rgba(4,12,26,.35); }
.sbl-core-card__i {
	width: 34px; height: 34px; border-radius: 8px; flex: none;
	background: rgba(255,255,255,.08); color: #fff;
	display: grid; place-items: center; margin-bottom: 16px;
	transition: transform .22s ease, background-color .22s ease;
}
.sbl-core-card--green .sbl-core-card__i { background: rgba(255,255,255,.22); }
.sbl-core-card:hover .sbl-core-card__i { transform: scale(1.08); background: rgba(255,255,255,.14); }
.sbl-core-card--green:hover .sbl-core-card__i { background: rgba(255,255,255,.3); }
.sbl-core-card__i svg { width: 16px; height: 16px; }
.sbl-core-card h4 { font-family: var(--wp--preset--font-family--poppins); font-size: 12.9px; font-weight: 600; color: #fff; line-height: 15px; margin: 0 0 8px; }
.sbl-core-card p, .sbl-core-card .elementor-widget-text-editor {
	/* Text-editor widgets render raw text with no wrapping <p> at all (see the
	   ELEMENTOR INTEGRATION notes below) — the plain "p" selector above never
	   matches, so the description silently fell back to the page's default
	   (much larger) font-size, wrapping to 2-3x as many lines and blowing out
	   every card's height (grid stretches every card in the row to match).
	   Target the real element explicitly. */
	font-size: 11px; font-weight: 400; line-height: 17px; color: #aeb9cc; margin: 0;
}
/* colour: see the .sbl-core-card--green !important override further down —
   this rule never wins the cascade (a later !important rule always beats a
   non-important one), kept only for the non-colour base styling elsewhere
   in this selector group. */
@media (max-width: 900px) {
	.sbl-core__grid { grid-template-columns: repeat(3, 1fr); max-width: 560px; }
}
@media (max-width: 520px) {
	.sbl-core__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Why choose SBL (Figma: white sec, navy panel 1296x365 r11,
   6 cells 431x181, kicker 13/700 #76bc21, title 17.6/600, desc 14.3/400) --- */
.sbl-why__h2 { max-width: 541px; margin: 15px 0 0; line-height: 1.17; }
.sbl-why__sub { font-size: 17px; line-height: 28px; color: #5b6470; max-width: 692px; margin: 31px 0 0; }
.sbl-why__panel {
	margin-top: 47px; border-radius: 11px; overflow: hidden;
	background: rgba(255,255,255,.10);
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
}
.sbl-why__cell {
	background: #0b1f3a;
	padding: 36px 31px; min-height: 181px;
	box-sizing: border-box;
	display: flex; flex-direction: column; gap: 0;
}
.sbl-why__cell .k { display: block; font-family: var(--wp--preset--font-family--poppins); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #76bc21; line-height: 20px; text-transform: none; }
.sbl-why__cell h4 { font-family: var(--wp--preset--font-family--poppins); font-size: 17.6px; font-weight: 600; color: #fff; line-height: 21px; letter-spacing: -0.01em; margin: 0; }
.sbl-why__cell p, .sbl-why__cell > .elementor-widget-text-editor {
	/* bare text-editor widget, no wrapping <p> — same "font-size never
	   applied, text wraps to 2x as many lines and blows out the cell
	   height" bug as .sbl-core-card p earlier. */
	font-size: 14.3px; font-weight: 400; color: #a9b4c7; line-height: 23px; margin: 0; max-width: 370px;
}
/* Same collapse-through fix as .sbl-core-card/.sbl-card: the h4/p here are
   bare widgets (no wrapping div of their own), so their margin needs to sit
   on the actual flex-item wrapper, not the inner tag. */
.sbl-why__cell > div.elementor-widget-heading { margin: 12px 0 8px !important; }
@media (max-width: 900px) {
	.sbl-why__panel { grid-template-columns: 1fr 1fr; }
	.sbl-why__cell { min-height: 0; }
}
@media (max-width: 560px) {
	.sbl-why__panel { grid-template-columns: 1fr; }
}

/* ---- generic card grid ---------------------------------------- */
.sbl-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.sbl-grid.cols-2 { --cols: 2; }
.sbl-grid.cols-3 { --cols: 3; }
.sbl-grid.cols-4 { --cols: 4; }
.sbl-grid.cols-6 { --cols: 6; }
.sbl-grid.gap-lg { gap: 1.75rem; }

.sbl-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--sbl-card-radius);
	padding: 1.5rem;
	min-width: 0;
	/* same Elementor-default-20px-gap fix as .sbl-core-card above — this
	   class covers industries/segments/RCM-expertise/delivery-step cards. */
	display: flex; flex-direction: column; gap: 0;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
.sbl-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--border-light);
	box-shadow: 0 14px 28px rgba(11,31,58,.09);
}
.sbl-card--navy:hover {
	background: #0f2c50;
	border-color: rgba(255,255,255,.16);
	box-shadow: 0 16px 30px rgba(4,12,26,.35);
}
.sbl-card:hover .sbl-tile { transform: scale(1.08); }
.sbl-card.is-pad-lg { padding: 2rem; }
.sbl-card :is(h3,h4) { margin-top: 0; }
/* Same collapse-through fix as .sbl-core-card: put the icon/heading spacing
   on their widget wrapper divs directly rather than trusting an inner
   element's margin to escape into the flex item's own box. */
.sbl-card > div.elementor-widget-html { margin-bottom: 1rem !important; }
.sbl-card > div.elementor-widget-heading { margin-bottom: .4rem !important; }
.sbl-card h4 { font-size: 1rem; line-height: 1.3; font-weight: 600; margin: 0 0 .4rem; }
.sbl-grid.cols-6 .sbl-card,
.sbl-grid.cols-6 .sbl-card--navy { padding: 1.15rem 1rem; }
.sbl-grid.cols-6 .sbl-card h4 { font-size: .875rem; line-height: 1.25; }
.sbl-grid.cols-6 .sbl-card p { font-size: .75rem; line-height: 1.45; }
.sbl-grid.cols-6 .sbl-tile { width: 38px; height: 38px; margin-bottom: .75rem; }
.sbl-card--navy { background: var(--wp--preset--color--navy-800); border-color: rgba(255,255,255,.08); color: var(--wp--preset--color--on-navy); }
.sbl-card--navy :is(h3,h4) { color: #fff; }
.sbl-card--green { background: var(--wp--preset--color--green); border-color: transparent; color: #0b2a00; }
.sbl-card--green :is(h3,h4,p) { color: #0d2c00; }
.sbl-card--outline { background: transparent; }

/* icon tile */
.sbl-tile {
	width: 46px; height: 46px; border-radius: var(--sbl-tile-radius);
	display: grid; place-items: center; margin-bottom: 1rem;
	background: var(--wp--preset--color--tint-blue); color: var(--wp--preset--color--blue);
	transition: transform .22s ease;
}
.sbl-tile.t-green { background: var(--wp--preset--color--tint-green); color: var(--wp--preset--color--green-dark); }
.sbl-tile.t-pink  { background: var(--wp--preset--color--tint-pink);  color: #d0463a; }
.sbl-tile.t-sky   { background: var(--wp--preset--color--tint-sky);   color: var(--wp--preset--color--cyan); }
.sbl-tile.t-grey  { background: #eef1f6; color: var(--wp--preset--color--muted); }
.sbl-tile svg, .sbl-tile img { width: 22px; height: 22px; }

/* numbered feature card (Why choose SBL) */
.sbl-numbered .sbl-card--navy { padding: 1.6rem 1.5rem; }
.sbl-numbered .kicker { color: var(--wp--preset--color--green); font-weight: 700; font-size: .8125rem; letter-spacing: .06em; margin: 0 0 .55rem; }
.sbl-numbered h4 { font-size: 1.125rem; font-weight: 600; margin: 0 0 .5rem; }
.sbl-numbered p { font-size: .875rem; color: #a9b4c7; margin: 0; }

/* ---- checklist ---------------------------------------------------- */
.sbl-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.sbl-checklist li { position: relative; padding-left: 1.9rem; font-size: .9375rem; line-height: 1.5; }
.sbl-checklist li::before {
	content: "✓"; position: absolute; left: 0; top: 0;
	width: 1.25rem; height: 1.25rem; border-radius: 50%;
	display: grid; place-items: center; font-size: .7rem; font-weight: 700;
	background: var(--wp--preset--color--tint-green); color: var(--wp--preset--color--green-dark);
}

/* ---- pill / tag lists ------------------------------------------ */
.sbl-taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.sbl-taglist li {
	font-size: .875rem; padding: .5rem .95rem; border-radius: 999px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--wp--preset--color--on-navy-strong);
}
.sbl-taglist.on-light li { background: var(--wp--preset--color--surface); border-color: var(--wp--preset--color--border); color: var(--wp--preset--color--contrast); }

/* ---- process row (Assess -> Optimize) ------------------------- */
.sbl-process-line,
.sbl-process-line .elementor-widget-text-editor {
	font-family: var(--wp--preset--font-family--poppins); font-weight: 700;
	font-size: clamp(1.1rem, 2.4vw, 1.9rem); letter-spacing: .04em;
	color: #fff; text-align: center;
}
.sbl-process-line { margin: 0 0 2rem; }
.sbl-process-line .arw { color: var(--wp--preset--color--green); margin-inline: .5rem; }

/* ---- stats row (Performance snapshot) ------------------------ */
.sbl-statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.sbl-statrow .n { font-family: var(--wp--preset--font-family--poppins); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.15rem); color: var(--wp--preset--color--navy-800); line-height: 1; }
.sbl-statrow .c { font-size: .875rem; color: #637587; margin-top: .5rem; max-width: 22ch; }

.sbl-improvebar {
	margin-top: 2.5rem; background: var(--wp--preset--color--navy); color: #e6eaef;
	border-radius: var(--sbl-card-radius); padding: 1.1rem 1.5rem;
	display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
}
.sbl-improvebar .h,
.sbl-improvebar__h,
.sbl-improvebar__h .elementor-widget-text-editor { font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: #b7c0cc; text-transform: uppercase; }
.sbl-improvebar span:not(.h),
.sbl-improvebar__item,
.sbl-improvebar__item .elementor-widget-text-editor { font-size: 13.8px; display: inline-flex; align-items: center; gap: 8.5px; }
/* Figma draws the tick 14px wide with 8.5px of air before the label. As a
   flex child of the item container the pseudo-element was being collapsed
   by the widget's own width:100%, so take it out of flow and reserve the
   22.5px with padding instead — the item then measures the same as Figma. */
.sbl-improvebar span:not(.h)::before,
.sbl-improvebar__item::before {
	content: "✓"; color: var(--wp--preset--color--green); font-weight: 700;
	font-size: 17px; line-height: 1; text-align: center;
}
.sbl-improvebar__item::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; }

/* ---- blog ---------------------------------------------------- */
.sbl-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; }
.sbl-featured__media { border-radius: var(--wp--custom--radius--lg, 20px); overflow: hidden; background: linear-gradient(150deg,#0e2036,#0a1728); aspect-ratio: 16/11; }
.sbl-tag { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; }
.sbl-tag.c-cyan { background: var(--wp--preset--color--tint-sky); color: var(--wp--preset--color--cyan); }
.sbl-tag.c-green { background: var(--wp--preset--color--tint-green); color: var(--wp--preset--color--green-dark); }
.sbl-meta { font-size: .875rem; color: var(--wp--preset--color--muted); }

.sbl-postcard { border: 1px solid var(--wp--preset--color--border); border-radius: var(--sbl-card-radius); overflow: hidden; display: flex; flex-direction: column; gap: 0; }
.sbl-postcard__media { position: relative; aspect-ratio: 16/9; background: linear-gradient(150deg,#12385c,#0b1f3a); display: grid; place-items: center; }
.sbl-postcard__icon { color: rgba(255,255,255,.35); }
.sbl-postcard__icon svg { width: 34px; height: 34px; }
.sbl-postcard__body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.sbl-postcard__eyebrow { position: absolute; top: .9rem; left: .9rem; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.12); padding: .25rem .55rem; border-radius: 6px; }
.sbl-postcard h4 { font-size: 1rem; font-weight: 700; margin: .25rem 0; }

.sbl-pagination { display: flex; gap: .4rem; justify-content: center; align-items: center; margin-top: 2.5rem; }
.sbl-pagination a, .sbl-pagination span {
	min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: 8px;
	display: inline-grid; place-items: center; font-size: .8125rem; text-decoration: none;
	color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--border);
}
.sbl-pagination .current { background: var(--wp--preset--color--navy); color: #fff; border-color: var(--wp--preset--color--navy); }

/* ---- contact form ------------------------------------------- */
/* Figma node 185-1119: left column 608px, 72px gutter, right column ~603px
   (measured off the design export, not eyeballed). */
.sbl-contact { display: grid; grid-template-columns: 608px 1fr; gap: 72px; }
.sbl-form { display: grid; gap: 1.1rem; }
.sbl-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 29px; }
.sbl-field { display: grid; gap: .4rem; }
.sbl-field label { font-size: .8125rem; color: var(--wp--preset--color--contrast); font-weight: 500; }
.sbl-field input, .sbl-field select, .sbl-field textarea {
	font: inherit; font-size: 13.75px; color: var(--wp--preset--color--ink);
	padding: .8rem .9rem; border: 1px solid var(--wp--preset--color--border); border-radius: 10px;
	background: #fff; width: 100%;
}
.sbl-field textarea { min-height: 130px; resize: vertical; }
.sbl-field input:focus, .sbl-field select:focus, .sbl-field textarea:focus { outline: 2px solid var(--wp--preset--color--green); outline-offset: 1px; border-color: transparent; }
.sbl-form__hp { position: absolute; left: -9999px; }
.sbl-form button[type=submit] {
	justify-self: start; font: inherit; font-family: var(--wp--preset--font-family--poppins); font-weight: 700; font-size: .9375rem;
	background: var(--wp--preset--color--green); color: #fff; border: 0; border-radius: 10px; padding: .85rem 1.4rem; cursor: pointer;
	display: inline-flex; align-items: center; gap: .5rem;
}
.sbl-form button[type=submit]:hover { background: var(--wp--preset--color--green-dark); }
.sbl-form__note { font-size: .75rem; color: var(--wp--preset--color--muted); max-width: 400px; }
.sbl-form__status { border-radius: 10px; padding: .8rem 1rem; font-size: .875rem; }
.sbl-form__status.is-ok { background: var(--wp--preset--color--tint-green); color: #2f5d10; }
.sbl-form__status.is-err { background: var(--wp--preset--color--tint-pink); color: #a3271c; }
.sbl-offices { display: grid; gap: 1.5rem; }
.sbl-office { border-bottom: 1px solid var(--wp--preset--color--border); padding-bottom: 1.2rem; }
.sbl-office h4 { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--contrast); margin: 0 0 .4rem; }
.sbl-office p { font-size: .8125rem; color: var(--wp--preset--color--muted); margin: .15rem 0; }

/* ---- CTA band (Figma y2650-3119: navy, 81px top / 80px btm pad,
   left col 527, right col 542, H2 35/43 #fff, sub 16/23 #c7d0de) ---- */
.sbl-ctaband { background: #0b1f3a; padding-block: 81px 80px; color: #aeb9cc; }
.sbl-ctaband__grid { display: grid; grid-template-columns: minmax(0, 527px) 542px; column-gap: clamp(48px, 9vw, 124px); justify-content: start; align-items: center; }
.sbl-ctaband__h2 { color: #fff; max-width: 620px; margin: 16px 0 0; font-size: clamp(1.85rem, 3vw, 35px); line-height: 1.23; letter-spacing: -0.01em; }
.sbl-ctaband__sub { font-size: 16px; line-height: 23px; color: #c7d0de; max-width: 400px; margin: 20px 0 0; }
.sbl-ctaband__btns { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 30px; }
.sbl-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 51px; padding: 0 27px; border-radius: 7px;
	font-family: var(--wp--preset--font-family--poppins); font-weight: 600; font-size: 14.8px; line-height: 1;
	text-decoration: none; color: #fff; box-sizing: border-box;
}
/* No background here either, same reason as the ghost-button note below:
   this class lands on the el_wrap() container, and its own square corners
   (border-radius:0) were showing through behind the real, rounded button's
   corners. Real styling lives on .sbl-btn--green .elementor-button. */
.sbl-btn--green:hover { background: #5fa015; color: #fff; }
/* NOTE: no border/background here on .sbl-btn--ghost itself — that class
   now lands on the el_wrap() container around the button widget (see the
   note below), and the real button styling (border included) is applied to
   .sbl-btn--ghost .elementor-button further down. A border on this element
   too was doubling up as a second, square-cornered outline offset outside
   the real (rounded) button border. */

/* Elementor Button widget renders its own default look via a scoped rule —
   force our exact shape/colour regardless. NOTE: our css_classes always land
   on the wrapping el_wrap() container (see functions.php notes), never on
   the .elementor-widget-button element itself — so these must be descendant
   selectors, not compound classes on one element. */
.sbl-btn--green .elementor-button,
.sbl-btn--ghost .elementor-button {
	height: 51px !important; padding: 0 27px !important; border-radius: 7px !important;
	font-family: var(--wp--preset--font-family--poppins) !important; font-weight: 600 !important; font-size: 14.8px !important;
	line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
	text-decoration: none !important; box-shadow: none !important;
}
.sbl-btn--green .elementor-button {
	background: #76bc21 !important; color: #fff !important; border: 0 !important;
}
.sbl-btn--green .elementor-button:hover { background: #5fa015 !important; }
.sbl-btn--ghost .elementor-button {
	background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35) !important;
}
.sbl-btn--ghost .elementor-button:hover { background: rgba(255,255,255,.06) !important; }
.sbl-btn-green .elementor-button {
	background: #76bc21 !important; color: #fff !important; border: 0 !important;
	border-radius: 999px !important; height: 46px !important; min-width: 190px; padding: 0 24px !important;
	font-family: var(--wp--preset--font-family--poppins) !important; font-weight: 600 !important; font-size: 12px !important;
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	text-decoration: none !important; box-shadow: none !important;
}
.sbl-btn-green .elementor-button:hover { background: #5fa015 !important; }
.sbl-btn--green, .sbl-btn--ghost, .sbl-btn-green { width: max-content !important; }
.sbl-ctaband__right { display: grid; gap: 18px; align-content: center; }
.sbl-officebox {
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.09); border-radius: 13px;
	padding: 25px 27px; min-height: 125px; box-sizing: border-box;
	display: flex; flex-direction: column;
}
.sbl-officebox .k { font-size: 11.8px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #76bc21; }
.sbl-officebox .t { font-family: var(--wp--preset--font-family--poppins); font-weight: 600; font-size: 18.3px; color: #fff; margin: 10px 0 5px; letter-spacing: -0.01em; }
.sbl-officebox .a { font-size: 11.4px; line-height: 16px; letter-spacing: .01em; text-transform: uppercase; color: #aeb9cc; }
@media (max-width: 1180px) {
	.sbl-ctaband__grid { grid-template-columns: 1fr; gap: 40px; }
	.sbl-ctaband__right { max-width: 542px; }
}

/* ---- footer (Figma: #081527, 96px top pad, 3 link columns) ---- */
.sbl-footer { background: #081527; color: #8c99b2; padding-top: 96px; padding-bottom: 0; }
.sbl-footer__grid { display: grid; grid-template-columns: minmax(0, 380px) 1fr 1fr 1fr; gap: 40px; padding-bottom: 60px; }
.sbl-footer__logo { height: 40px; width: auto; display: block; margin-bottom: 24px; }
.sbl-footer__brand p { font-size: 14px; line-height: 18px; color: #8c99b2; margin: 0; max-width: 320px; }
.sbl-footer__col { display: flex; flex-direction: column; }
.sbl-footer__col h4 { font-size: 10.6px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #fff; margin: 0 0 24px; }
.sbl-footer__col a { color: #8c99b2; text-decoration: none; font-size: 14px; line-height: 21px; padding: 3.5px 0; }
.sbl-footer__col a:hover { color: #fff; }
.sbl-footer__bottom { display: flex; justify-content: space-between; gap: 16px; padding-block: 28px; font-size: 10.6px; color: #8c99b2; border-top: 1px solid rgba(255,255,255,.08); }
@media (max-width: 900px) {
	.sbl-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.sbl-footer__grid { grid-template-columns: 1fr; }
	.sbl-footer__bottom { flex-direction: column; gap: 6px; }
}

/* ---- split heading blocks (heading left, copy right) -------- */
.sbl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.sbl-split--33 { grid-template-columns: 0.9fr 1.1fr; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
	.sbl-featured, .sbl-contact, .sbl-cta__grid, .sbl-split, .sbl-split--33 { grid-template-columns: 1fr; }
	.sbl-grid.cols-4 { --cols: 2; }
	.sbl-grid.cols-6 { --cols: 3; }
	.sbl-statbar { grid-template-columns: repeat(3, 1fr); }
	.sbl-statbar > *:nth-child(3) { border-right: 0; }
	.sbl-statrow { grid-template-columns: repeat(2, 1fr); }
	.sbl-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.sbl-grid, .sbl-grid.cols-2, .sbl-grid.cols-3, .sbl-grid.cols-4, .sbl-grid.cols-6 { --cols: 1; }
	.sbl-form .row { grid-template-columns: 1fr; }
	.sbl-statbar { grid-template-columns: repeat(2, 1fr); }
	.sbl-statbar > * { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
	.sbl-statrow { grid-template-columns: 1fr 1fr; }
	.sbl-footer__inner { grid-template-columns: 1fr; }
	.sbl-header__inner { gap: 1rem; }
	.sbl-process-line { font-size: 1.05rem; }
}

/* =========================================================================
   NATIVE-BLOCK SECTION RESETS & HELPERS
   (all inner-page + shared sections rebuilt from wp:html to real blocks —
   neutralise WP flow block-gap and default heading/paragraph margins so the
   layout stays pixel-identical to the Figma spec)
   ========================================================================= */
.sbl-grid.cols-5 { --cols: 5; }
.sbl-grid { margin-block: 0; }
.sbl-grid > *,
.sbl-statrow > *, .sbl-statrow > * > *,
.sbl-card > *, .sbl-card--navy > *,
.sbl-specpanel > *,
.sbl-contact > *, .sbl-offices > *, .sbl-office > *,
.sbl-featured > *, .sbl-featured__body > *,
.sbl-postcard > *, .sbl-postcard__body > *,
.sbl-inhero__intro--stack > * { margin-block: 0; }
/* .sbl-specpanel__intro is out of the reset above for the same reason as
   .sbl-leaders / .sbl-inhero__col: its heading (12px) and paragraph (13px)
   carry the design's real spacing, which the reset was flattening. */
/* .sbl-leaders is out of the reset for the same reason as .sbl-inhero__col:
   its children (__h2 15px, __p 23px, __label 46px) each carry the real
   spacing from the design, and this reset was flattening all of it so the
   eyebrow/heading/paragraph/label ran together with no gaps. */
/* .sbl-inhero__col deliberately left out of the reset above: its direct
   children (.sbl-inhero__eyebrow, .sbl-inhero__title, .sbl-inhero__intro)
   each carry their own real margin (15px/0/20px) meant to space them apart
   — this blanket "> *{margin-block:0}" had the exact same specificity and
   came later in the cascade, so it was silently winning and zeroing all of
   it out, leaving the eyebrow/heading/intro stacked with no gap at all. */
/* Who We Serve / Blog / Contact heroes use .sbl-eyebrow + .sbl-hero__title
   (not the .sbl-inhero__* set above) for the same eyebrow/heading/intro
   stack — .sbl-eyebrow already carries its own margin-bottom, but .sbl-lead
   (the intro here) has none anywhere else it's used, so it needs its own
   top margin scoped to this one context. */
.sbl-inhero__col > .sbl-lead { margin-top: 20px; }

/* cards */
.sbl-card h4 { margin: 0 0 .4rem; font-size: 1rem; line-height: 1.3; font-weight: 600; }
.sbl-card p  { margin: 0; }
.sbl-card__p { font-size: .9375rem; color: #5b6470; margin: .5rem 0 0; }
.sbl-card--navy .sbl-card__p { color: #b8cce0; font-size: .875rem; }
.sbl-card--navy h4 { color: #fff; margin: 0 0 .4rem; }
.sbl-card--navy .kicker { color: #75bd21; font-weight: 700; margin: 0 0 .5rem; font-size: .875rem; }
.sbl-card__label { font-size: .9375rem; letter-spacing: .04em; text-transform: uppercase; color: #5b6470; margin: 0 0 .5rem; font-weight: 600; }
.sbl-card__line { font-size: .875rem; color: #1a1a1a; margin: .35rem 0; line-height: 1.5; }
.sbl-grid--center .sbl-card { text-align: center; }
.sbl-grid--center .sbl-card .sbl-tile { margin-inline: auto; }

/* stat row */
.sbl-statrow .n { margin: 0; }
.sbl-statrow .c { margin: .5rem 0 0; }

/* specialties pill list inside the panel */
.sbl-specpanel .sbl-pilllist,
.sbl-specpanel .sbl-pilllist--sm { margin: 0; padding: 0; list-style: none; }
.sbl-pilllist { padding-left: 0; }
.sbl-pilllist.wp-block-list { list-style: none; }

/* contact */
.sbl-contact__h2 { font-size: 1.75rem; margin: 0 0 40px; }
.sbl-contact__sub { color: #5b6470; font-size: .875rem; margin: 0 0 1.5rem; }
.sbl-office h4 { font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--contrast); margin: 0 0 .4rem; }
.sbl-office p  { font-size: .8125rem; color: var(--wp--preset--color--muted); margin: .15rem 0; }
.sbl-office--last { border-bottom: 0; }

/* blog */
.sbl-featured__tags { margin: 0 0 1rem; }
.sbl-featured__title { font-size: 1.8rem; line-height: 1.25; margin: 0 0 .75rem; }
.sbl-featured__excerpt { color: #5b6470; margin: 0 0 1rem; }
.sbl-featured .sbl-meta { margin: 0 0 .75rem; }
.sbl-featured .sbl-arrow-link { margin: 0; }
.sbl-postcard__body .sbl-meta { font-size: .75rem; margin: 0; }
.sbl-postcard__body h4 { font-size: 1rem; font-weight: 700; margin: .25rem 0; }
.sbl-postcard__excerpt { font-size: .8125rem; color: #5b6470; margin: 0; }
.sbl-postcard__body .sbl-arrow-link { font-size: .8125rem; margin: 0; }

/* services delivery — navy step cards use the kicker paragraph */
.sbl-card--navy.sbl-card .kicker { color: #75bd21; }

/* =========================================================================
   ELEMENTOR INTEGRATION — native widgets (Heading / Text Editor / Button /
   Image) carry our .sbl-* classes on their outer wrapper; these rules make
   Elementor's own wrapper markup "invisible" to spacing/layout so the
   design stays pixel-identical to the Figma spec.
   ========================================================================= */

/* TYPEFACE — the single biggest fidelity bug on this site. Elementor's kit
   stylesheet sets `font-family: var(--e-global-typography-*-font-family),
   Sans-serif` directly on the element that actually holds the text (the
   .elementor-heading-title tag / the .elementor-widget-text-editor div),
   and those globals resolve to Elementor's default **Roboto**. The kit CSS
   also loads AFTER our app.css, so an equal-specificity rule here loses.
   Net effect: our Poppins was correctly loading and correctly set on every
   wrapper, but every actual line of text on every page still rendered in
   Roboto — narrower glyphs, different metrics, so every heading/paragraph
   wrapped and spaced differently from the Figma spec no matter how much the
   margins were tuned. `inherit` pulls the real font back down from the
   wrapper (so per-class font choices still work); !important is needed to
   beat the later-loading kit rule. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-button .elementor-button,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-list .elementor-icon-list-text {
	font-family: inherit !important;
}
/* Elementor gives EVERY container a default 10px padding on all four sides
   (frontend.css: `.e-con{ --padding-top: var(--container-default-padding-top,
   10px); ...}`) whenever a container doesn't explicitly set its own padding
   — which is every container our generator builds (el_container() /
   el_wrap() deliberately leave padding/margin unset so real, class-based
   spacing from this file can apply — see scripts/elementor-rebuild.php).
   Left as-is, that stacks an unwanted ~20px of vertical padding onto every
   single nested container — hero column, every wrapped widget, every card —
   compounding into hero/section blocks running well taller than the Figma
   spec. Zero the *default* here; any element that genuinely needs Elementor-
   native padding sets its own value and is unaffected. */
.elementor .e-con { --container-default-padding-top: 0px; --container-default-padding-right: 0px; --container-default-padding-bottom: 0px; --container-default-padding-left: 0px; }
/* NOTE: an earlier blanket ".elementor-element.e-con{margin-block:0!important}"
   reset used to live here. Elementor containers already default their own
   margin to 0 (frontend.css: `.e-con{--margin-top:0px;...}`), and headings
   get their own reset below — so that blanket rule was pure downside: it
   silently zeroed every intentional class-based vertical margin we set on a
   *container* itself (`.sbl-hero__cta{margin-top:40px}` etc, all of which
   land on el_wrap()/el_container() divs), collapsing our real Figma spacing
   down to Elementor's uniform 20px flex-gap. Removed. */
.elementor-widget-heading .elementor-widget-container,
.elementor-widget-text-editor .elementor-widget-container,
.elementor-widget-button .elementor-widget-container,
.elementor-widget-image .elementor-widget-container,
.elementor-widget-html .elementor-widget-container { margin: 0; padding: 0; }
.elementor-heading-title { margin: 0; }
.elementor-text-editor > p { margin: 0; }
.elementor-text-editor > p + p { margin-top: 0; }
/* The two rules above target `.elementor-text-editor`, a wrapper class this
   Elementor build does not emit — so they never matched anything. The text
   editor widget runs its content through wpautop, so most body copy is a
   real <p> sitting directly inside `.elementor-widget-text-editor`, keeping
   the browser's default 1em top+bottom margin (16px each). That phantom
   32px was padding out every description block and throwing off the gap
   between headings and their body copy site-wide. */
.elementor-widget-text-editor > p { margin: 0; }
.elementor-widget-text-editor > p + p { margin-top: .75em; }
.elementor-widget-image img { display: block; }
.elementor-widget:not(:last-child) { margin-bottom: 0 !important; }
/* Elementor containers default to flex; our grid classes must win */
.sbl-grid, .sbl-goals, .sbl-core__grid, .sbl-why__panel, .sbl-statrow,
.sbl-featured, .sbl-contact, .sbl-ctaband__grid, .sbl-footer__grid,
.sbl-vision, .sbl-specpanel { display: grid !important; }
.sbl-officebox, .sbl-vision__left, .sbl-vision__right,
.sbl-core, .sbl-why, .sbl-ctaband__left, .sbl-leaders,
.sbl-specpanel__intro, .sbl-office, .sbl-footer__brand, .sbl-footer__col,
.sbl-hero__col, .sbl-inhero__col, .sbl-inhero__intro--stack,
.sbl-contact__form, .sbl-featured__body, .sbl-postcard__body { display: block !important; }
/* .sbl-ctaband__right stays out of the block-reset above: it's meant to be
   a grid with an 18px gap between the two office cards (line ~930) — forcing
   it to block killed that gap entirely, leaving the two cards flush against
   each other with no spacing. */
.sbl-ctaband__right { display: grid !important; }
.sbl-ctaband__btns { display: flex !important; }

.sbl-ctaband__btns { display: flex !important; flex-direction: row !important; }
/* Elementor containers default to flex-direction:column and width:100% —
   force our small inline/row elements back to their intended layout. */
.sbl-eyebrow, .sbl-eyebrow--center {
	display: flex !important; flex-direction: row !important; align-items: center !important;
	width: max-content !important; max-width: 100% !important; gap: 7px !important;
	font-size: 13px !important; letter-spacing: .14em !important; text-transform: uppercase !important;
}
.sbl-eyebrow--center { margin-inline: auto !important; }
/* The inner-page hero eyebrow is 15px/.13em in the design, but it carries
   BOTH classes ("sbl-eyebrow sbl-inhero__eyebrow"), so the generic 13px
   !important above was winning over its own 15px rule. Restore it. */
.sbl-inhero__eyebrow { font-size: 15px !important; letter-spacing: .13em !important; gap: 9px !important; }
.sbl-hero__cta { width: max-content !important; }

/* Elementor's kit applies its OWN default colour/weight directly on the
   inner heading/text tag with !important, beating our normal rules. Re-win
   with matching !important on the specific classes we actually use. */
.sbl-h2, .sbl-h2 .elementor-heading-title { color: #0b1f3a !important; font-weight: 600 !important; }
.sbl-sec--navy .sbl-h2, .sbl-sec--navy .sbl-h2 .elementor-heading-title,
.sbl-core__h2, .sbl-core__h2 .elementor-heading-title { color: #fff !important; }
.sbl-ctaband__h2, .sbl-ctaband__h2 .elementor-heading-title,
.sbl-leaders__h2, .sbl-leaders__h2 .elementor-heading-title { color: #fff !important; }
.sbl-eyebrow, .sbl-eyebrow .elementor-widget-text-editor, .sbl-eyebrow .elementor-widget-text-editor { color: #93a2bb !important; font-weight: 600 !important; }
.sbl-eyebrow--center, .sbl-eyebrow--center .elementor-widget-text-editor, .sbl-eyebrow--center .elementor-widget-text-editor { color: #93a2bb !important; }
.sbl-inhero__eyebrow, .sbl-inhero__eyebrow .elementor-widget-text-editor, .sbl-inhero__eyebrow .elementor-widget-text-editor { color: #d4d4d4 !important; }
.sbl-hero__eyebrow, .sbl-hero__eyebrow .elementor-widget-text-editor, .sbl-hero__eyebrow .elementor-widget-text-editor { color: #76bc21 !important; }
.sbl-hero__title, .sbl-hero__title .elementor-widget-text-editor, .sbl-hero__title .elementor-widget-text-editor,
.sbl-inhero__title, .sbl-inhero__title .elementor-heading-title,
.sbl-inhero__title .elementor-widget-text-editor { color: #fff !important; font-weight: 700 !important; }
.sbl-hero__intro, .sbl-hero__intro .elementor-widget-text-editor, .sbl-hero__intro .elementor-widget-text-editor,
.sbl-inhero__intro, .sbl-inhero__intro .elementor-widget-text-editor, .sbl-inhero__intro .elementor-widget-text-editor { color: #dce7f2 !important; font-weight: 400 !important; }
.sbl-hero__intro strong, .sbl-hero__intro .elementor-widget-text-editor strong { color: #83b8e8 !important; font-weight: 600 !important; }
.sbl-core-card h4, .sbl-core-card .elementor-heading-title,
.sbl-why__cell h4, .sbl-why__cell .elementor-heading-title,
.sbl-card h4, .sbl-card .elementor-heading-title,
.sbl-featured__title, .sbl-featured__title .elementor-heading-title { color: #fff !important; font-weight: 600 !important; }
.sbl-card:not(.sbl-card--navy) h4, .sbl-card:not(.sbl-card--navy) .elementor-heading-title,
.sbl-featured__title, .sbl-featured__title .elementor-heading-title { color: #0b1f3a !important; }
.sbl-core-card p, .sbl-core-card .elementor-widget-text-editor,
.sbl-why__cell p, .sbl-why__cell .elementor-widget-text-editor,
.sbl-goal, .sbl-goal .elementor-widget-text-editor { color: #a9b4c7 !important; font-weight: 400 !important; }
/* ...but the highlighted green "Medical Coding" card needs its description
   white like its heading, not the navy-context grey-blue above — Figma's
   solid-fill text pixels sample as pure #fff (the near-white "#f2fbe6" an
   earlier pass read off this same crop was anti-aliased edge pixels
   blending white text into the green fill, not the real fill colour). Same
   specificity + !important as the rule above, so source order decides —
   keep this one after it. */
.sbl-core-card--green p, .sbl-core-card--green .elementor-widget-text-editor { color: #fff !important; }
.sbl-goal, .sbl-goal .elementor-widget-text-editor { color: #1a1a1a !important; }
.sbl-why__cell .k, .sbl-why__cell .k .elementor-widget-text-editor { color: #76bc21 !important; font-weight: 700 !important; }
.sbl-officebox .k, .sbl-officebox .k .elementor-widget-text-editor { color: #76bc21 !important; font-weight: 600 !important; }
.sbl-officebox .t, .sbl-officebox .t .elementor-widget-text-editor { color: #fff !important; font-weight: 600 !important; }
.sbl-officebox .a, .sbl-officebox .a .elementor-widget-text-editor { color: #aeb9cc !important; }
.sbl-vision__k, .sbl-vision__k .elementor-widget-text-editor { color: #5b6470 !important; font-weight: 600 !important; }
.sbl-vision__p, .sbl-vision__p .elementor-widget-text-editor { color: #5b6470 !important; }
.sbl-core__sub, .sbl-core__sub .elementor-widget-text-editor,
.sbl-why__sub, .sbl-why__sub .elementor-widget-text-editor,
.sbl-lead, .sbl-lead .elementor-widget-text-editor { color: #5b6470 !important; }
.sbl-sec--navy .sbl-core__sub, .sbl-sec--navy .sbl-core__sub .elementor-widget-text-editor,
.sbl-sec--navy .sbl-lead, .sbl-sec--navy .sbl-lead .elementor-widget-text-editor { color: #aeb9cc !important; }
.sbl-hero .sbl-lead, .sbl-hero .sbl-lead .elementor-widget-text-editor { color: #c3ccd8 !important; }
.sbl-ctaband__sub, .sbl-ctaband__sub .elementor-widget-text-editor { color: #c7d0de !important; }
.sbl-statrow .n, .sbl-statrow .n .elementor-widget-text-editor { color: #0d2645 !important; font-weight: 700 !important; }
.sbl-statrow .c, .sbl-statrow .c .elementor-widget-text-editor { color: #637587 !important; }
.sbl-card__p, .sbl-card__p .elementor-widget-text-editor { color: #5b6470 !important; }
.sbl-card--navy .sbl-card__p, .sbl-card--navy .sbl-card__p .elementor-widget-text-editor { color: #b8cce0 !important; }
.kicker, .kicker .elementor-widget-text-editor,
.sbl-card--navy .kicker, .sbl-card--navy .kicker .elementor-widget-text-editor { color: #75bd21 !important; font-weight: 700 !important; }
.sbl-card__label, .sbl-card__label .elementor-heading-title { color: #5b6470 !important; }
.sbl-card__line, .sbl-card__line .elementor-widget-text-editor { color: #1a1a1a !important; }
.sbl-postcard__body .elementor-widget-text-editor { color: #5b6470 !important; }
.sbl-featured__body .elementor-widget-text-editor { color: #5b6470 !important; }
.sbl-office h4, .sbl-office .elementor-heading-title { color: #0b1f3a !important; }
.sbl-office .elementor-widget-text-editor { color: #5b6470 !important; }
.sbl-leaders__p, .sbl-leaders__p .elementor-widget-text-editor,
.sbl-leaders__label, .sbl-leaders__label .elementor-widget-text-editor { color: #fff !important; }
.sbl-specpanel .sbl-h2, .sbl-specpanel .sbl-h2 .elementor-heading-title { color: #fff !important; }
.sbl-specpanel__p, .sbl-specpanel__p .elementor-widget-text-editor { color: #aeb9cc !important; }
.sbl-contact__h2, .sbl-contact__h2 .elementor-heading-title { color: #0b1f3a !important; }
.sbl-contact__sub, .sbl-contact__sub .elementor-widget-text-editor { color: #5b6470 !important; }
.sbl-footer__brand .elementor-widget-text-editor, .sbl-footer__bottom .elementor-widget-text-editor { color: #8c99b2 !important; }
.sbl-footer__col h4, .sbl-footer__col .elementor-heading-title { color: #fff !important; }

/* =========================================================================
   PHOTO INNER HERO — Contact (node 185-1119) and Who We Serve (185-1014)
   use the same hero component: a 406px band with a background photo under a
   navy scrim, a 38px/1.22 headline and 14.5px/1.38 intro. The shared
   .sbl-hero__title / .sbl-lead sizes are the HOME hero's (56px / 17px) and
   are correct there, so this is all scoped to the photo heroes. Selectors
   carry the full .sbl-hero.is-inner prefix because the generic inner-hero
   rules above are (0,3,0) and would otherwise win — including their own
   ::before scrim, which is far lighter than this one.
   ========================================================================= */
.sbl-hero.is-inner.sbl-inhero--photo:not(.wp-block-cover) {
	/* content is vertically centred; the extra bottom padding nudges the
	   whole block up the ~6.5px needed to land on the design's baseline. */
	min-height: 406px; padding: 0 0 13px;
}
.sbl-hero.is-inner.sbl-inhero--photo:not(.wp-block-cover)::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, rgba(11,31,58,.78) 0%, rgba(11,31,58,.75) 45%, rgba(11,31,58,.72) 100%);
}
.sbl-hero.is-inner.sbl-inhero--photo > .sbl-container { position: relative; z-index: 2; }
.sbl-hero.is-inner.sbl-inhero--photo .sbl-breadcrumb { font-size: 12.5px; margin-bottom: 45px; }
/* the design shows the green rule before the kicker; "no-dot" was hiding it */
.sbl-hero.is-inner.sbl-inhero--photo .sbl-eyebrow { font-size: 11px !important; margin: 0 0 16px; }
.sbl-hero.is-inner.sbl-inhero--photo .sbl-eyebrow.no-dot::before {
	display: block; width: 28px; height: 2px; border-radius: 0; background: #76bc21;
}
.sbl-hero.is-inner.sbl-inhero--photo .sbl-hero__title {
	font-size: 38px; line-height: 1.22; max-width: 470px; margin: 0;
}
.sbl-hero.is-inner.sbl-inhero--photo .sbl-lead {
	font-size: 14.5px; line-height: 1.38; max-width: 560px; margin-top: 16px; color: #c3ccd8;
}
/* per-page: cover-fit crops ~300px vertically, and each photo wants a
   different slice; Elementor writes its own background-position so these
   have to win. */
.sbl-hero.is-inner.sbl-inhero--contact:not(.wp-block-cover) { background-position: 50% 24% !important; }
.sbl-hero.is-inner.sbl-inhero--wws:not(.wp-block-cover) { background-position: 50% 50% !important; }
/* Who We Serve: wider intro, narrower headline measure (the design breaks
   it after "scale"), and a heavier scrim — its photo is far brighter than
   the Contact one, so the shared tint leaves it washed out. */
.sbl-hero.is-inner.sbl-inhero--wws .sbl-lead { max-width: 620px; }
.sbl-hero.is-inner.sbl-inhero--wws .sbl-hero__title { max-width: 400px; }
.sbl-hero.is-inner.sbl-inhero--wws:not(.wp-block-cover)::before {
	background: linear-gradient(90deg, rgba(8,22,40,.90) 0%, rgba(8,22,40,.88) 45%, rgba(8,22,40,.86) 100%);
}

/* Who We Serve segments: the section copy runs to a ~740px measure on a
   slightly tighter leading than the shared .sbl-lead default (three lines). */
.sbl-lead--wide { max-width: 750px; line-height: 1.57; }
.sbl-grid.cols-6 { gap: 15.5px; }

/* Office / "what to expect" copy is a bare text-editor widget (no <p>), so
   the `.sbl-office p` rule above never matched and the text fell back to the
   20px body size. Design is 13.25px on a loose ~31px leading. */
.sbl-office .elementor-widget-text-editor {
	font-size: 13.25px; line-height: 31px; color: var(--wp--preset--color--muted);
	/* the design wraps addresses at ~335px and the "what to expect" copy at
	   ~437px, so the two blocks need different measures. */
	max-width: 360px !important;
}
/* the "what to expect" copy is set tighter (≈19.5px leading) and on a wider
   measure than the address blocks. */
.sbl-office--last .elementor-widget-text-editor { max-width: 460px !important; line-height: 19.5px; }

/* ==================================================================
   SERVICES  (Figma node 185-848)
   Measured off the 2880px frame at 2x, so every px below is a CSS px.
   ================================================================== */

/* All three section headers on this page share one measure: the lead
   breaks to exactly two lines, with 682 / 685 / 699px of ink on line one
   (expertise / delivery / performance). The generic .sbl-lead measure is
   far narrower and pushed all three to three lines. */
.sbl-lead--svc { max-width: 720px !important; font-size: 17.5px !important; line-height: 28px !important; margin-bottom: 24px !important; }

/* ---- "Our RCM expertise" cards --------------------------------- */
/* 4 x 283px on a 50px gutter, against the generic grid's 20px. */
.sbl-grid.cols-4.sbl-rcmgrid { gap: 50px; }
.sbl-rcmgrid .sbl-card {
	/* Figma centres the whole card and drops the hairline border for a
	   soft shadow instead. */
	text-align: center; align-items: center;
	padding: 22px 22px 41px;
	border-color: transparent;
	box-shadow: 0 8px 26px rgba(11,31,58,.05);
}
/* 74px circle, not the site-wide 46px rounded square. */
.sbl-rcmgrid .sbl-tile { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto; }
.sbl-rcmgrid .sbl-tile svg { width: 34px; height: 34px; stroke-width: 1.6; }
.sbl-rcmgrid .sbl-card > div.elementor-widget-html { margin-bottom: 9px !important; }
.sbl-rcmgrid .sbl-card > div.elementor-widget-heading { margin-bottom: 25px !important; }
.sbl-rcmgrid .sbl-card h4,
.sbl-rcmgrid .sbl-card .elementor-heading-title { font-size: 17.5px !important; line-height: 24px !important; margin: 0 !important; }
/* The description runs on a 231px measure (which is what makes it break
   into Figma's five lines) while the card itself is padded only 22px, so
   "Coding & Revenue Integrity" still fits its title on one line — a
   narrower card box would wrap it and stretch the whole row. */
.sbl-rcmgrid .sbl-card__p { max-width: 218px; margin: 0 auto !important; }
.sbl-rcmgrid .sbl-card__p,
.sbl-rcmgrid .sbl-card__p .elementor-widget-text-editor { font-size: 15px !important; line-height: 23px !important; }

/* ---- specialty / technology panels ----------------------------- */
/* These two sit 48px inside the card row above them in the design. */
.sbl-grid.cols-2.sbl-xpanels { gap: 21px; margin-top: 32px; padding-inline: 48px; }
.sbl-xpanel {
	/* Icon in a fixed first column, everything else stacked in the second:
	   grid auto-placement puts each following widget on its own row of
	   column 2, which is what the icon-left panel layout needs and what a
	   flex column can't express without extra wrapper containers. */
	display: grid !important;
	grid-template-columns: 44px 1fr; column-gap: 16px;
	padding: 22px 30px 27px 26px;
}
/* Span every row, so the 44px circle never sets the height of row 1 — the
   label there is only 20px tall and would otherwise be padded out to 44. */
.sbl-xpanel > div.elementor-widget-html { grid-column: 1; grid-row: 1 / span 20; align-self: start; margin: 0 !important; }
.sbl-xpanel > *:not(div.elementor-widget-html) { grid-column: 2; }
.sbl-xpanel__i {
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	background: #eef1f6; color: #16304f;
}
.sbl-xpanel__i svg { width: 24px; height: 24px; }
.sbl-xpanel__i.is-green { background: #edf6e2; color: #76bc21; }
/* el_heading() wraps the widget in a div carrying the css class, so the
   direct child of the panel is .sbl-card__label — not .elementor-widget-*.
   The label's own margin is what has to open the gap to the first line. */
.sbl-xpanel .sbl-card__label { margin: 0 0 16px !important; }
.sbl-xpanel .sbl-card__label,
.sbl-xpanel .sbl-card__label .elementor-heading-title { font-size: 14px !important; line-height: 20px !important; letter-spacing: .05em; }
.sbl-xpanel .sbl-card__label .elementor-heading-title { margin: 0 !important; }
/* Each specialty/technology line is its own widget, so the 22px Figma
   leading has to come from the line-height alone — the stock .sbl-card__line
   margin would stack another 11px between every pair. */
.sbl-xpanel > div.elementor-widget-text-editor { margin: 0 !important; }
.sbl-xpanel .sbl-card__line,
.sbl-xpanel .sbl-card__line .elementor-widget-text-editor { font-size: 14.5px !important; line-height: 22px !important; color: #16304f !important; margin: 0 !important; }
.sbl-xpanel .pipe { color: #b9c2cf; }

/* ---- delivery model -------------------------------------------- */
.sbl-process-line {
	/* Figma spreads this line across 1162px of the 1296px column — that's
	   wide tracking, not just a bigger size. */
	text-align: left; padding-left: 33px; margin: 0 0 19px;
}
.sbl-grid.cols-5.sbl-stepgrid { gap: 9px; }
.sbl-stepgrid .sbl-card--navy { padding: 28px 30px; background: #12385c; border-color: transparent; }

/* ---- performance snapshot -------------------------------------- */
/* The stat columns line up with the text inside the navy bar below them,
   not with the section gutter. */
.sbl-statrow { padding-inline: 27px; margin-top: 19px; }
.sbl-statrow .c { max-width: 262px; }
.sbl-statrow .n { font-size: 33px; }
.sbl-improvebar {
	--flex-direction: column; --align-items: stretch; --gap: 19px;
	flex-direction: column; align-items: stretch; padding: 26px 30px 40px !important; gap: 19px;
}
/* The checklist is its own flex row now: the items sat as inline spans in a
   plain div, so the bar's own gap never applied to them and they bunched up
   at the left instead of spanning the bar. */
.sbl-improvebar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 57px; }
.sbl-improvebar .h,
.sbl-improvebar__h {
	/* Elementor containers centre their content by default; this label is
	   flush left in the design, and its green dot needs the same row. */
	--flex-direction: row; --align-items: center; --justify-content: flex-start; --gap: 9px;
	--padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
	display: block; position: relative;
	padding: 0 0 0 16px !important;
}
.sbl-improvebar .h,
.sbl-improvebar__h,
.sbl-improvebar__h .elementor-widget-text-editor { font-size: 10.75px !important; }
/* The row and each item are Elementor containers now. Those drive their own
   layout off custom properties (--flex-direction: column, --gap, --padding-*)
   and stretch to full width, so plain flex declarations get ignored: set the
   variables as well, or the seven ticks stack one per line. */
.sbl-improvebar__row {
	--display: flex; --flex-direction: row; --flex-wrap: wrap;
	--align-items: center; --justify-content: flex-start; --gap: 14px 57px;
	--padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
	flex-direction: row !important; flex-wrap: wrap !important; padding: 0 !important;
}
.sbl-improvebar__item {
	--padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 22.5px;
	position: relative; display: block !important;
	flex: 0 0 auto; width: auto; padding: 0 0 0 22.5px !important;
}
.sbl-improvebar__item,
.sbl-improvebar__item .elementor-widget-text-editor { color: #e6eaef !important; font-size: 13.8px !important; }
.sbl-improvebar__item .elementor-widget-text-editor { display: inline; }
/* .sbl-process-line is a text widget now: the class lands on the wrapper,
   the type has to be restated on the widget it contains. */
.sbl-process-line,
.sbl-process-line .elementor-widget-text-editor { font-size: 34px !important; letter-spacing: .09em; line-height: 1 !important; text-align: left !important; }
/* Same story as the tick: the widget inside fills the container, so the dot
   has to come out of flow rather than sit next to it as a flex child. */
.sbl-improvebar .h::before,
.sbl-improvebar__h::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--wp--preset--color--green); flex: none;
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);
}

/* Services, narrow viewports. The fixed pixel values above are all measured
   from the 1440 frame; below the grid breakpoints they have to give way —
   in particular .sbl-process-line, whose 34px/.09em tracking is set later in
   this file than the generic mobile rule and would otherwise still win. */
@media (max-width: 900px) {
	.sbl-grid.cols-4.sbl-rcmgrid { gap: 24px; }
	.sbl-grid.cols-2.sbl-xpanels { padding-inline: 0; margin-top: 24px; }
	.sbl-process-line { font-size: clamp(1.05rem, 3.2vw, 1.6rem); letter-spacing: .05em; padding-left: 0; text-align: center; }
	.sbl-statrow { padding-inline: 0; }
	.sbl-improvebar__row { gap: 12px 28px; }
}
@media (max-width: 560px) {
	.sbl-rcmgrid .sbl-card__p { max-width: 100%; }
	.sbl-xpanel { grid-template-columns: 1fr; }
	.sbl-xpanel > div.elementor-widget-html { grid-column: 1; grid-row: 1; margin: 0 0 14px !important; }
	.sbl-xpanel > *:not(div.elementor-widget-html) { grid-column: 1; }
}

/* ==================================================================
   BLOG  (Figma node 185-1237)
   Measured off the 2881px frame at 2x, so every px below is a CSS px.
   ================================================================== */

/* ---- hero ------------------------------------------------------ */
.sbl-hero.is-inner.sbl-inhero--photo.sbl-inhero--blog:not(.wp-block-cover) {
	min-height: 392px; padding: 0 0 18px;
	/* Figma's fill transform crops this photo to 54.9%-95.7% of the image
	   height at full width — which is exactly `cover` on a 1440x392 box,
	   offset 92.8% down. Anything less and the BLOG blocks fall out of
	   frame and only the magnifier shows. */
	background-position: 50% 93% !important;
}
/* Solved against the frame rather than eyeballed: at three sample regions
   the Figma pixels come out as this photo under a flat #0b1e3a at 79%,
   within a hundredth of each other, so there is no gradient here at all. */
.sbl-hero.is-inner.sbl-inhero--photo.sbl-inhero--blog:not(.wp-block-cover)::before {
	background: rgba(11,30,58,.79);
}
/* The shared .sbl-hero.is-inner.sbl-inhero--photo rules that set 38px /
   560px are three classes deep, so these have to match that weight or the
   lead keeps the narrower Contact/WWS measure and breaks in three. */
.sbl-hero.is-inner.sbl-inhero--photo.sbl-inhero--blog .sbl-hero__title { font-size: 40.5px; line-height: 47.5px; max-width: 660px; }
.sbl-hero.is-inner.sbl-inhero--photo.sbl-inhero--blog .sbl-lead { font-size: 16.5px; line-height: 23.5px; max-width: 690px; margin-top: 15px; }
.sbl-hero.is-inner.sbl-inhero--photo.sbl-inhero--blog .sbl-breadcrumb { font-size: 13.5px; margin-bottom: 37px; }
.sbl-hero.is-inner.sbl-inhero--photo.sbl-inhero--blog .sbl-eyebrow { font-size: 10.5px !important; margin: 0 0 18px; }

/* ---- shared: the whole article area sits 48px inside the gutter -- */
.sbl-blogsec .sbl-container { padding-block: 0; }
.sbl-blogcol {
	padding-inline: 48px !important; padding-block: 0 !important;
	--gap: 30px; gap: 30px;
}

/* ---- featured article ------------------------------------------ */
.sbl-featured {
	/* 739 + 29.5 gutter + 431.5 body = the 1200px article column */
	display: grid; grid-template-columns: 739px minmax(0, 1fr); gap: 29.5px;
	align-items: start;
}
.sbl-featured__media {
	border-radius: 18px; overflow: hidden; display: block;
	aspect-ratio: 739 / 425; background: none;
}
.sbl-featured__body { padding-top: 32px; }
.sbl-featured__tags { display: flex; flex-wrap: wrap; gap: 14.5px; margin: 0 0 27px; }
.sbl-featured__title { font-size: 29.5px; line-height: 37.5px; letter-spacing: -.01em; margin: 0 0 16.5px; max-width: 400px; }
.sbl-featured__excerpt { font-size: 16.2px; line-height: 22.5px; color: #4d5a6b; margin: 0 0 21px; max-width: none; }
/* Figma lets this paragraph run ~10px past the body column rather than
   breaking a line early; nothing sits to its right, so reproduce it. A
   max-width can't do this — a block never exceeds its containing block —
   so the measure has to be an explicit width. */
.sbl-featured__excerpt { width: 442px; }
.sbl-featured__body .sbl-meta { font-size: 14.3px; line-height: 1; margin: 0 0 20px; }
.sbl-featured__body .sbl-arrow-link { margin: 0; }
.sbl-featured__body .sbl-arrow-link a { font-size: 16.2px; }

/* ---- pills ------------------------------------------------------ */
.sbl-tag {
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: 0 29px; height: 30px; display: inline-flex; align-items: center; border-radius: 999px;
}
.sbl-tag.c-cyan { background: #e4f3fa; color: #00a7e1; }
.sbl-tag.c-green { background: #edf7e1; color: #76bc21; }

/* ---- article cards ---------------------------------------------- */
.sbl-grid.sbl-postgrid { gap: 23px; }
.sbl-postcard { border-radius: 14px; background: #fff; }
.sbl-postcard__link { display: block; }
.sbl-postcard__media {
	/* 385 x 150.5 in the design; the featured panel reuses this element at
	   its own aspect ratio, hence the ratio living on the parents. */
	position: relative; display: block; width: 100%; aspect-ratio: 385 / 150.5;
	overflow: hidden;
}
.sbl-featured__media .sbl-postcard__media { aspect-ratio: auto; height: 100%; }
.sbl-postcard__media > .sbl-postcard__icon {
	position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.5);
}
.sbl-postcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Figma gives each category its own panel; see sbl_category_art(). */
.sbl-postcard__media.g-warm { background: linear-gradient(135deg,#2c231a 0%,#16202f 55%,#0b1e37 100%); }
.sbl-postcard__media.g-teal { background: linear-gradient(135deg,#091e39 0%,#04304a 55%,#003e58 100%); }
.sbl-postcard__media.g-blue { background: linear-gradient(135deg,#0a1e39 0%,#13314f 55%,#1c3962 100%); }
.sbl-postcard__media.g-char { background: linear-gradient(135deg,#1a1b1b 0%,#121d2b 55%,#0b1e39 100%); }
.sbl-postcard__media.g-navy { background: linear-gradient(135deg,#0b1f3a 0%,#12385c 100%); }
.sbl-postcard__eyebrow {
	top: 15px; left: 23px; font-size: 10px; letter-spacing: .06em;
	background: rgba(255,255,255,.14); padding: 5px 11px; border-radius: 7px;
}
/* Figma sets the card copy on a ~270px measure inside a 385px card, which
   is what produces its two-line titles and three-line excerpts; the full
   339px of inner width would leave every card a line short. */
.sbl-postcard__body { padding: 15px 23px 42px; gap: 0; }
.sbl-postcard__body > * { max-width: 270px; }
/* The excerpt runs a little narrower again than the title does. */
.sbl-postcard__excerpt { max-width: 252px; }
.sbl-postcard h4, .sbl-postcard h4 a { color: var(--wp--preset--color--navy-800); }
.sbl-postcard .sbl-meta { font-size: 11.45px; line-height: 1; margin: 0 0 6.5px; }
.sbl-postcard h4 { font-size: 14.8px; line-height: 20px; margin: 0 0 9px; }
.sbl-postcard__excerpt { font-size: 11.4px; line-height: 16px; color: #5b6470; margin: 0 0 11.5px; }
.sbl-postcard .sbl-arrow-link { margin: 0; }

/* Titles are links now that the cards are real posts — they still have to
   read as headings, not as blue link text. */
.sbl-featured__title a, .sbl-postcard h4 a { color: inherit; text-decoration: none; }
.sbl-featured__title a:hover, .sbl-postcard h4 a:hover { color: var(--wp--preset--color--cyan); }

/* ---- pagination -------------------------------------------------- */
.sbl-pagination {
	/* one bordered pill holding the whole control, not a row of boxes */
	width: max-content; margin: 49px auto 0; padding: 5px 14px; gap: 4px; height: 38px;
	border: 1px solid var(--wp--preset--color--border); border-radius: 14px; background: #fff;
}
.sbl-pagination a, .sbl-pagination span {
	border: 0; min-width: 28px; height: 28px; border-radius: 8px;
	font-size: 13px; color: #4d5a6b;
}
.sbl-pagination a:hover { background: var(--wp--preset--color--surface); }
.sbl-pagination .current { background: #16181c; color: #fff; border: 0; font-weight: 600; }
.sbl-pagination .is-off { color: #c2c8d0; }
.sbl-pagination .is-gap { color: #16181c; font-weight: 700; letter-spacing: .06em; }

@media (max-width: 900px) {
	.sbl-blogcol { padding-inline: 0 !important; }
	.sbl-featured { grid-template-columns: 1fr; gap: 24px; }
	.sbl-featured__body { padding-top: 0; }
	.sbl-featured__title, .sbl-featured__excerpt { max-width: none; width: auto; }
}

/* ---- single article --------------------------------------------- */
/* The Figma set has no article template, so this only has to be a sane,
   on-brand reading view for what editors publish. */
.sbl-article__meta { font-size: 14.3px; color: #c3ccd8; margin: 14px 0 0; }
.sbl-single .wp-block-post-content > p { margin: 0 0 1.25em; line-height: 1.75; }
.sbl-single .wp-block-post-content > :is(h2,h3) { margin: 2em 0 .6em; }
.sbl-single .wp-block-post-content { font-size: 17px; color: #2f3a48; }
.sbl-single .wp-block-post-terms { font-size: 13px; color: var(--wp--preset--color--muted); }
.sbl-single .wp-block-post-terms a { color: var(--wp--preset--color--cyan); text-decoration: none; }