/* ==========================================================================
   Landing Builder — Frontend Styles
   Fonts: Syne (section titles) / Google Sans (everything else)
   ========================================================================== */

/* Width is matched to the site footer (.xpertlab-footer), which renders a
   1440px content box inside 40px of padding — a 1520px visible card. Every
   section here is a direct child, so this element's CONTENT box is what they
   span: 1520px, with no side padding of its own. The theme already insets the
   content column, which is what keeps the sections off the screen edges on
   narrower viewports (mobile padding is restored in the media queries). */
.lb-wrap {
	--lb-border: #DDDDDD;
	--lb-dark: #191919;
	--lb-muted: #778AA9;
	font-family: "Google Sans", Arial, sans-serif;
	color: var(--lb-dark);
	max-width: 1520px !important;
	margin: 0 auto;
	padding: 40px 0 80px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.lb-wrap * {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------------
   BeTheme compatibility: its page/content wrapper (.container, #Content,
   .Content, .content_wrapper, .mfn-main-container, etc.) caps width
   around 1140–1240px by default. A parent's own rendered width silently
   limits every descendant regardless of that descendant's own max-width
   (even with !important), so every section above would quietly shrink
   below 1600px unless the actual wrapping element is widened here too.
   Scoped with :has() so it only touches wrappers that contain our
   shortcode output, never BeTheme's layout elsewhere on the site.
   ------------------------------------------------------------------------ */
.container:has(> .lb-wrap),
.container:has(.lb-wrap),
.Content:has(.lb-wrap),
#Content:has(.lb-wrap),
.content_wrapper:has(.lb-wrap),
.mfn-main-container:has(.lb-wrap),
.mfn-builder-content-wraper:has(.lb-wrap),
/* BeTheme's Muffin-builder section wrapper caps its content at a fixed ~940px
   on "laptop" widths (roughly 1025–1240px). That squeezed the whole landing
   block — most visibly the two-column contact section — down to ~676px while
   the full-bleed bands beside it still spanned edge-to-edge. This is the single
   element that actually holds the cap on this theme; uncapping it lets every
   section grow back to the 1600px .lb-wrap limit. (Only this wrapper is touched
   — widening the inner wrap/column wrappers instead knocks the centered block a
   few px off-centre and nudges the full-bleed bands away from the screen edge.) */
.section_wrapper:has(.lb-wrap),
.mcb-section-inner:has(.lb-wrap) {
	max-width: none !important;
	width: 100% !important;
}

/* On tablet/mobile BeTheme adds horizontal padding to these same wrappers,
   which would inset the full-bleed Access Care band from the screen edges.
   Zero that padding so the band reaches both edges exactly as it does on
   desktop (the .lb-wrap's own padding still spaces every other section). */
@media (max-width: 991px) {
	.container:has(> .lb-wrap),
	.container:has(.lb-wrap),
	.Content:has(.lb-wrap),
	#Content:has(.lb-wrap),
	.content_wrapper:has(.lb-wrap),
	.mfn-main-container:has(.lb-wrap),
	.mfn-builder-content-wraper:has(.lb-wrap) {
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow-x: visible !important;
	}
}

/* ------------------------------------------------------------------------
   Section 1 — Intro (title/description + image)
   ------------------------------------------------------------------------ */

.healthcare-section {
	width: 100%;
	padding: 0;
	background: transparent;
	box-sizing: border-box;
}

/* space-between, not flex-start: the copy (590px) + gap (105px) + image (579px)
   add up to less than the 1520px row, so with flex-start the leftover width
   piled up AFTER the image and it stopped short of the right edge. Pushing the
   two columns apart lands the image's right edge on the same line as the
   bordered cards below it. */
.healthcare-container {
	max-width: 1600px !important;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 105px;
}

.healthcare-content {
	flex: 0 1 590px;
	max-width: 590px;
}

.healthcare-title {
	margin: 0 0 15px;
	font-family: 'Syne', sans-serif !important;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	color: #191919;
	letter-spacing: 0;
}

.healthcare-description p {
	margin: 0 0 24px;
	font-family: "Google Sans", sans-serif;
	font-size: 19px !important;
	font-weight: 400 !important;
	line-height: 1.35;
	color: #778AA9 !important;
}

.healthcare-description p:last-child {
	margin-bottom: 0;
}

.healthcare-image {
	flex: 1 1 auto;
	max-width: 579px;
	/* Pulls the image in off the right edge. The row is space-between, so the
	   leftover width sits between the two columns and a right margin is what
	   moves the image left — it takes that slack rather than overlapping the
	   copy the way a negative translate would. Reset below 1100px, where the
	   row is already tight and then stacks. */
	margin-right: 80px;
}

.healthcare-image img {
	width: 100%;
	display: block;
	border-radius: 40px;
	height: auto;
}

/* ── Section 1 slideshow (multiple right-side images, cross-fade) ── */
.healthcare-slideshow {
	position: relative;
	width: 100%;
}
/* Every slide stays in the box; only `opacity` used to separate them. That is
   invisible to HIT TESTING, so the browser's context menu always resolved to
   whichever slide painted last (the final absolutely-positioned one) — right
   click → "Open image in new tab" gave the same image on every slide.
   `visibility` and `pointer-events` are what actually take a hidden slide out
   of hit testing, so the menu now targets the image on screen. `visibility`
   is delayed by the fade duration on the way OUT so the cross-fade still
   plays; going in it switches immediately. */
.healthcare-slideshow .healthcare-slide {
	display: block;
	border-radius: 40px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
/* First image stays in normal flow and sizes the slideshow box. */
.healthcare-slideshow .healthcare-slide:first-child {
	position: relative;
	width: 100%;
	height: auto;
}
/* Remaining images overlay on top, matched to the first image's box. */
.healthcare-slideshow .healthcare-slide:not(:first-child) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.healthcare-slideshow .healthcare-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	/* Above the outgoing slide while that one fades, so the pointer meets the
	   incoming image rather than the one being replaced. */
	z-index: 1;
	transition: opacity 0.8s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	.healthcare-slideshow .healthcare-slide,
	.healthcare-slideshow .healthcare-slide.is-active {
		transition: none;
	}
}

/* Up to 1100px - Laptop */
@media (max-width: 1100px) {
	.healthcare-container {
		gap: 40px;
	}

	.healthcare-title {
		font-size: 28px;
	}

	.healthcare-image {
		max-width: 460px;
		margin-right: 0;
	}
}

/* Up to 991px - Tablet */
@media (max-width: 991px) {
	.healthcare-container {
		gap: 35px;
	}

	.healthcare-title {
		font-size: 26px;
	}

	.healthcare-description p {
		font-size: 14px;
		line-height: 1.8;
	}
}

/* Up to 900px — tablets in portrait: stack with the IMAGE first, then the
   content (column-reverse lifts the image, which is last in the markup, to
   the top). */
@media (max-width: 900px) {
	.healthcare-container {
		flex-direction: column-reverse;
		gap: 35px;
	}
	.healthcare-image {
		width: 100%;
		max-width: 500px;
		margin: auto;
	}
	.healthcare-content {
		max-width: 100%;
	}
}

/* 901px–1024px — Nest Hub and other landscape tablets: there IS enough
   horizontal room here, so the copy and the image stay side by side in ONE
   row (sharing the width evenly instead of the desktop's fixed 590 + 460).
   Stacking only begins at 900px and below. */
@media (min-width: 901px) and (max-width: 1024px) {
	.healthcare-container {
		flex-direction: row;
		align-items: center;
		gap: 30px;
	}

	.healthcare-content {
		flex: 1 1 52%;
		max-width: 52%;
	}

	.healthcare-image {
		flex: 1 1 48%;
		max-width: 48%;
		width: auto;
		margin: 0;
	}
}

/* Up to 768px - Mobile */
@media (max-width: 768px) {
	.healthcare-container {
		display: flex;
		flex-direction: column-reverse;
		gap: 35px;
		text-align: left;
	}

	.healthcare-image {
		width: 100%;
		max-width: 500px;
		margin: auto;
	}

	.healthcare-content {
		max-width: 100%;
	}

	.healthcare-title {
		font-size: 28px;
		margin-bottom: 25px;
	}

	.healthcare-description p {
		font-size: 15px;
		line-height: 1.8;
		margin-bottom: 20px;
	}
}

/* Up to 480px - Mobile */
@media (max-width: 480px) {
	.healthcare-title {
		font-size: 24px;
	}

	.healthcare-description p {
		font-size: 14px;
		line-height: 1.7;
	}

	.healthcare-image img {
		border-radius: 24px;
	}
}

/* ------------------------------------------------------------------------
   Technologies Used
   ------------------------------------------------------------------------ */

.tech-section {
	width: 100%;
	padding: 0;
	box-sizing: border-box;
	/* Extra air OUTSIDE the card — between it and Section 1 above and the
	   Access Care band below. .lb-wrap is a flex column with its own 48px gap
	   between sections; these margins add to that gap rather than replacing
	   it, and adjacent margins do not collapse in a flex container. */
	margin-top: 40px;
	margin-bottom: 40px;
}

.tech-box {
	max-width: 1600px !important;
	margin: 0 auto;
	border: 1px solid var(--lb-border);
	border-radius: 40px;
	background: #fff;
	padding: 30px 50px 34px;
}

.tech-title {
	margin: 0 0 32px;
	font-family: 'Syne', sans-serif !important;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: #191919;
	letter-spacing: 0;
}

/* A wrapping flex row centres each line on its own, so as soon as the logos
   need 2+ rows nothing lines up vertically. An auto-fit grid instead lays
   them out as a proper table: every row uses the same equal-width columns,
   so each logo sits in a clean column on every device. */
/* Narrower columns + a tighter gutter so six logos fit on ONE line (the old
   200px minimum only allowed five across). auto-fit collapses any track left
   empty, so the items always spread evenly across the row they end up on. */
/* align-items:start, not center: cells are stacked icon-over-name, so a
   two-line name makes its cell taller. Centring would then push that cell's
   icon down out of line with its neighbours' — top-aligning keeps every icon
   on the same line across the row. */
.tech-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	justify-content: center;
	align-items: start;
	column-gap: 20px;
	row-gap: 28px;
}

/* Stacked, not side by side: the icon sits above its name and both are
   centred in the grid cell. Every cell is then the same shape regardless of
   how long the name is, so the icons line up on a single baseline across the
   row instead of drifting with the label widths. */
.tech-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: 14px;
	min-width: 0;
}

.tech-item img,
.tech-item svg {
	object-position: center;
}

/* The AWS wordmark is short and wide, so inside its square icon box it reads
   as floating high in the cell. A small downward nudge optically centres it
   without changing the row's layout height. */
.tech-item--aws img,
.tech-item--aws svg {
	position: relative;
	top: 6px;
}

.tech-item img,
.tech-item svg {
	width: 50px;
	height: 50px;
	object-fit: contain;
	flex-shrink: 0;
	display: block;
}

.tech-item span {
	font-family: "Google Sans", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: #191919;
	/* Names stay on one line whenever they fit; a name too long for its grid
	   column wraps inside the cell instead of spilling into the next one. */
	white-space: normal;
	overflow-wrap: break-word;
}

/* Up to 1200px - Laptop */
@media (max-width: 1200px) {
	.tech-list {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 26px 20px;
	}
}

/* Up to 768px - Tablet */
@media (max-width: 768px) {
	.tech-box {
		padding: 26px 30px 28px;
		border-radius: 30px;
	}

	.tech-title {
		font-size: 28px;
		margin-bottom: 26px;
	}

	.tech-list {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 26px 20px;
	}

	.tech-item span {
		font-size: 18px;
	}
}

/* Up to 480px - Mobile */
@media (max-width: 480px) {
	.tech-section {
		padding: 0;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.tech-box {
		padding: 22px 20px 24px;
		border-radius: 22px;
	}

	.tech-title {
		font-size: 24px;
		margin-bottom: 22px;
	}

	/* Two fixed columns so the logos stay a tidy 2-up table even when a name
	   is much longer than the others. */
	.tech-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
		row-gap: 22px;
	}

	.tech-item {
		gap: 12px;
	}

	/* Smaller here, and `object-fit: contain` (inherited from the base rule)
	   guarantees the whole logo is fitted inside the box rather than cropped to
	   it — so a wide wordmark like AWS shrinks to fit instead of losing its ends.
	   Nothing clips it either: .tech-item carries no overflow of its own. */
	.tech-item img,
	.tech-item svg {
		width: 32px;
		height: 32px;
	}

	.tech-item span {
		font-size: 16px;
	}
}

/* ------------------------------------------------------------------------
   Access Care band (solid background + blurred accent shapes)
   ------------------------------------------------------------------------ */

/* Full-bleed at every width: the band is nested inside BeTheme's centered
   content column, so fixed negative margins only reached the column edge (a
   visible gap between ~992–1599px). The viewport-based technique below pulls
   the band out to both screen edges regardless of how the theme sizes that
   column. Body has overflow-x:hidden, so 100vw won't add a horizontal scroll. */
.access-care-section {
	position: relative;
	overflow: hidden;
	background: #E9F5FF;
	z-index: 2;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* The band itself is full-bleed (100vw), so its inner container is what has to
   line up with the bordered cards above it. Those cards span .lb-wrap's 1520px
   content box, which the theme insets by 72px from each side of the page —
   hence 1520 + 2 × 72 = 1664 with 72px of padding. Result: the title's left
   edge and the image's right edge land exactly on the cards' edges, at every
   width where that theme inset applies. */
.access-care-container {
	max-width: 1664px;
	margin: auto;
	/* Optically balanced rather than numerically equal: the heading's own
	   half-leading (50px text on a 1.2 line-height) adds ~12px of dead space
	   above the first cap, so a matching 80/80 read as top-heavy. 60px up top
	   puts the same amount of visible air above the title as below the copy. */
	padding-top: 60px;
	padding-bottom: 80px;
	padding-left: 72px;
	padding-right: 72px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 60px;
	position: relative;
	z-index: 2;
}

/* Same copy width as Section 1's text column so both sections' paragraphs
   start AND end on the same lines. */
.access-content {
	max-width: 590px;
	position: relative;
	z-index: 3;
}

.access-content h2 {
	margin: 0 0 15px;
	font-family: "Google Sans", Arial, sans-serif !important;
	font-size: 50px;
	font-weight: 700;
	/* The title is entered as multiple lines (nl2br), so this leading is the
	   gap BETWEEN those lines, not just internal text spacing. */
	line-height: 1.35;
	color: #191919;
	letter-spacing: 0;
}

.access-content p {
	margin: 0 0 18px;
	font-family: "Google Sans", sans-serif;
	font-size: 19px !important;
	line-height: 1.45;
	color: #778AA9 !important;
	font-weight: 400 !important;
}

.access-content p:last-child {
	margin-bottom: 0;
}

/* ── Right-side artwork: bleeds past the band and is clipped by it ───────────
   The artwork is one tall composite — 667 x 866 in the Figma, portrait. Two
   wrong ways to handle that, both tried:

     • height:auto in flow — the image sets the row height, so the band grew to
       ~970px against the design's ~600px. Whatever file is uploaded decides how
       tall the section is.
     • a fixed box + object-fit:cover — the band stops growing, but `cover`
       SCALES THE ART UP to fill the box and then crops it, so the phones came
       out oversized and sliced through the middle.

   What the design actually does is neither: the group keeps its natural 667x866
   and the BAND is shorter than it, so the mockups run past the band's top AND
   bottom edges and are cut at both. Reproducing that means the artwork must not
   contribute to the row's height at all — hence absolute. The band's height is
   still the copy plus its padding (unchanged by this artwork), and
   .access-care-section's overflow:hidden does the cutting.

   The box is pinned top:0/bottom:0 — the band's FULL height, ignoring the
   container's vertical padding — so the artwork runs off BOTH edges and is cut
   at the top as well as the bottom, as in the Figma. Only `right` keeps the
   72px inset, so the artwork's right edge still lines up with the cards above.

   Centering is done with flex, not translateY(-50%): the scroll-reveal rule
   animates .access-images' own `transform` and resets it to `none`, which would
   wipe a transform-based centering. A flex item taller than its container with
   align-items:center overflows it symmetrically, which is exactly the wanted
   "equal bleed above and below". */
.access-images {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 72px;
	width: 667px;
	display: flex;
	align-items: center;
	z-index: 2;
}

.access-images img {
	width: 100%;
	/* Natural proportions. No object-fit: nothing is being fitted into a box —
	   the image is simply taller than the band and gets cut at both ends. */
	height: auto;
	display: block;
	/* Cross-axis overflow only works if the item isn't squeezed to fit. */
	flex: 0 0 auto;
}
.blur-white-left {
	position: absolute;
	width: 296px;
	height: 296px;
	background: #fff;
	border-radius: 50%;
	filter: blur(46px);
	left: 393px;
	top: 70px;
	z-index: 1;
}

.blur-white-right {
	position: absolute;
	width: 420px;
	height: 420px;
	background: #fff;
	border-radius: 50%;
	filter: blur(73px);
	right: 443px;
	top: 29px;
	z-index: 1;
}

.blur-pink {
	position: absolute;
	top: 42%;
	width: 244px;
	height: 227px;
	background: #FFDAE9;
	border-radius: 50%;
	filter: blur(60px);
	right: 305px;
	bottom: 40px;
	z-index: 1;
}

/* The theme narrows its content inset from 72px to 52px at its own 1279px
   breakpoint, so the band's inner padding follows it to stay on the cards'
   left/right edges. */
@media (max-width: 1279px) {
	.access-care-container {
		padding-left: 52px;
		padding-right: 52px;
	}
}

/* Up to 1200px - Laptop */
@media (max-width: 1200px) {
	.access-content h2 {
		font-size: 44px;
	}
}

/* 992–1400px: the copy column's fixed 590px would eat almost the whole row and
   squeeze the image down to a sliver, so both columns share the row
   proportionally until the layout stacks at 991px. */
@media (min-width: 992px) and (max-width: 1400px) {
	.access-care-container {
		gap: 32px;
	}

	.access-content {
		max-width: 50%;
	}

	.access-images {
		width: 46%;
	}
}

/* Up to 991px - Tablet */
@media (max-width: 991px) {
	/* True viewport-wide full-bleed so the band touches both screen edges
	   like desktop, regardless of the theme's tablet/mobile side padding
	   (the fixed negative margins below only reached .lb-wrap's edge). */
	.access-care-section {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.access-care-container {
		flex-direction: column-reverse;
		text-align: center;
		gap: 50px;
	}

	.access-content {
		max-width: 700px;
	}

	.access-content h2 {
		font-size: 40px;
	}

	/* Back into normal flow. The desktop rule takes this out of flow so the
	   artwork can bleed past the band's bottom edge — but the container is
	   column-reverse here, with the artwork ABOVE the copy, so an absolute box
	   would sit on top of the text instead of stacking with it. In flow it
	   shows in full, which is right for a stacked layout: there is no band edge
	   for it to be cut against. */
	.access-images {
		position: static;
		display: block;
		top: auto;
		bottom: auto;
		right: auto;
		width: 100%;
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	.blur-white-left {
		left: 50%;
		top: 80px;
		transform: translateX(-50%);
	}

	.blur-white-right {
		right: 50%;
		transform: translateX(50%);
	}
}

/* Up to 767px - Mobile */
@media (max-width: 767px) {
	/* Matches .lb-wrap's own 24px mobile padding. */
	.access-care-container {
		padding: 60px 24px;
	}

	.access-content h2 {
		font-size: 34px;
	}

	.access-content p {
		font-size: 15px;
	}

	.blur-white-left,
	.blur-white-right {
		width: 180px;
		height: 180px;
		filter: blur(90px);
	}

	.blur-pink {
		width: 140px;
		height: 140px;
		filter: blur(90px);
	}
}

/* Up to 480px - Mobile */
@media (max-width: 480px) {
	.access-care-container {
		/* Matches .lb-wrap's 20px padding at this width. */
		padding: 48px 20px;
	}

	.access-content h2 {
		font-size: 30px;
		line-height: 1.1;
	}
}

/* ------------------------------------------------------------------------
   Key Features
   ------------------------------------------------------------------------ */

.lb-features {
	max-width: 1600px !important;
	padding: 22px 40px 45px;
	border: 1px solid var(--lb-border);
	border-radius: 24px;
	background: #fff;
}

.lb-features-title {
	font-family: 'Syne', sans-serif !important;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	text-align: center;
	color: #191919;
	letter-spacing: 0;
	margin: 0 0 25px;
}

.lb-features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 60px;
	row-gap: 32px;
}

.lb-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
}

.lb-feature-icon {
	flex-shrink: 0;
	width: 55px;
	height: 54px;
}

.lb-feature-icon svg,
.lb-feature-icon img {
	width: 55px;
	height: 54px;
	display: block;
	object-fit: contain;
}

.lb-feature-copy {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lb-feature-title {
	font-family: "Google Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: -0.1px;
	color: #191919;
	margin: 0;
}

.lb-feature-desc {
	font-family: "Google Sans", Arial, sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.2;
	color: #778AA9;
	margin: 0;
}

/* ------------------------------------------------------------------------
   Section 3 — Talk to our Executive
   ------------------------------------------------------------------------ */

.lb-section3 {
	max-width: 1600px !important;
	margin: 0;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--lb-border);
	border-radius: 40px;
	background: #fff;
	overflow: hidden;
}

.lb-section3-left {
	flex: 1 1 420px;
	max-width: 539px;
	background: #F3F9FF;
	padding: 45px 40px;
	display: flex;
	flex-direction: column;
}

/* The header's own font-size is the single source of truth for BOTH the title
   and the icon: the title is 1em of it and the icon box is a 1em square, so
   the icon can never end up smaller or bigger than the title text. */
.lb-section3-header {
	display: flex;
	/* Centred against the WHOLE title, however many lines it runs to. On a phone
	   "Talk to our Executive" wraps to two, and the icon belongs across both of
	   them — pinning it to the first line left it hanging off the top corner. */
	align-items: center;
	gap: 16px;
	font-size: 38px;
	margin-bottom: 24px;
}

.lb-section3-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Covers the WHOLE heading — one line or two.
	   1.2 is the title's line-height, so multiplying by the number of lines it
	   actually runs to gives exactly the height of the text block. That is what
	   the design does: 75px of icon against a two-line "Talk to our Executive"
	   at 31px (31 × 1.2 × 2 = 74.4px).
	   Whether the title wraps depends on the viewport AND on the wording the
	   admin typed, which no media query can know — so reveal.js measures the
	   line count and hands it over in --lb-s3-title-lines. The fallback of 1
	   keeps this sensible if the script never runs. */
	width: calc(1.2em * var(--lb-s3-title-lines, 1));
	height: calc(1.2em * var(--lb-s3-title-lines, 1));
	flex-shrink: 0;
	line-height: 0;
}

.lb-section3-icon svg,
.lb-section3-icon img {
	/* Follow the box above rather than re-declaring a size of their own. */
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* The spare-challenge payload. Browsers already hide <script>, but
   .lb-form-field is a flex container with a gap — a theme reset that made
   scripts visible would add a phantom row here. */
.lb-form-captcha-pool {
	display: none !important;
}

/* No stroke override here on purpose.
   The icon now renders at (or near) the size it was drawn for — 75px against a
   two-line title — so the file's own stroke-width of 4.5 on a 75px canvas comes
   out at exactly the weight the design shows, and scales correctly with the
   heading at every breakpoint. Pinning the stroke to a fixed pixel width was
   only ever a workaround for the icon being shrunk. */

.lb-section3-title {
	font-family: "Syne", sans-serif;
	font-weight: 600 !important;
	font-size: 1em !important;
	line-height: 1.2 !important;
	color: var(--lb-dark);
	margin: 0;
}

.lb-section3-desc {
	font-family: "Google Sans", Arial, sans-serif;
	font-weight: 400 !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
	color: #778AA9 !important;
	margin: 0 0 35px 0 !important;
}

.lb-call-box {
	position: relative;
	background: #fff;
	border: 1px solid var(--lb-border);
	border-radius: 35px;
	padding: 28px 28px 26px;
	margin-bottom: 32px;
}

.lb-call-box {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 20px;
	row-gap: 0;
}

.lb-call-icon {
	grid-row: 1 / 2;
	width: 80px;
	height: 80px;
	flex-shrink: 0;
}

.lb-call-icon svg,
.lb-call-icon img {
	width: 80px;
	height: 80px;
	display: block;
}

.lb-call-copy {
	grid-row: 1 / 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Breathing room between "Call Our Executive" and the line under it. */
	gap: 10px;
}

.lb-call-title {
	font-family: "Google Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: -0.1px;
	color: #191919;
	margin: 0 0 2px;
}

.lb-call-desc {
	font-family: "Google Sans", Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	color: #778AA9;
	margin: 0;
}

.lb-call-divider {
	grid-column: 1 / -1;
	border: none;
	border-top: 1px solid var(--lb-border);
	margin: 22px 0 18px;
}

.lb-call-phone {
	grid-column: 1 / -1;
	font-family: "Google Sans", Arial, sans-serif;
	font-weight: 700;
	font-size: 28px;
	color: var(--lb-dark);
	text-decoration: none;
}

/* The theme underlines links on hover with its own rule, so a base
   `text-decoration: none` alone left the number underlined the moment the
   pointer touched it. ONLY the decoration is set here — no colour (the hover
   colour change is intentional) and no size (these selectors would otherwise
   outrank the smaller font-size the responsive rules set further down). */
.lb-call-phone:hover,
.lb-call-phone:focus,
.lb-call-phone:active {
	text-decoration: none !important;
}

/* The icon is a 65px box next to a 2–3 line paragraph, so top-aligning it
   left it visibly off against the text. Centre both so the icon always sits
   on the middle of the description regardless of how many lines it wraps to. */
.lb-bottom-note {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: auto;
}

.lb-bottom-icon {
	width: 65px;
	height: 65px;
	flex-shrink: 0;
}

.lb-bottom-icon svg,
.lb-bottom-icon img {
	width: 65px;
	height: 65px;
	display: block;
}

.lb-bottom-desc {
	font-family: "Google Sans", Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 128%;
	color: var(--lb-muted);
	margin: 0;
	max-width: 284px;
}

.lb-bottom-arrow {
	display: block;
	position: absolute;
	left: 384px;
    top: -16px;
}

.lb-section3-right {
	flex: 1 1 500px;
	max-width: 900px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 45px 40px;
}

/* ------------------------------------------------------------------------
   Contact Form (built-in, rendered inside Section 3's right panel)
   All colors/fonts/sizes come from CSS variables injected per Landing
   Block from its own saved form design, so these structural rules never
   hardcode a design value.
   ------------------------------------------------------------------------ */

.lb-form-wrapper {
	width: 100%;
}
.lb-form-wrapper *,
.lb-form-wrapper *::before,
.lb-form-wrapper *::after {
	box-sizing: border-box;
}

.lb-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.lb-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.lb-form-field-full {
	grid-column: 1 / -1;
}

.lb-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.lb-form-label {
	font-family: "Google Sans", Arial, sans-serif;
	font-weight: 500;
	font-size: var(--lb-form-label-size, 16px);
	color: var(--lb-form-label-color, #191919);
}

.lb-form-required {
	color: var(--lb-form-required-color, #FF4B4B);
	margin-left: 2px;
}

.lb-form-input-wrap {
	position: relative;
	display: flex !important;
	align-items: center !important;
	background: var(--lb-form-input-bg, #FAFAFA);
	border-radius: var(--lb-form-input-radius, 52px);
	height: 54px;
	padding: 0 22px;
	gap: 14px;
}

/* "Other" free-text box: keep it collapsed until the select reveals it.
   The base rule above forces display:flex !important, which would otherwise
   defeat the [hidden] attribute — this override restores that behaviour. */
.lb-form-other-wrap[hidden] {
	display: none !important;
}

/* Once revealed it sits directly under its dropdown, so it needs a little
   separation (the field's own 6px gap alone read as touching) while its text
   lines up with the dropdown's via the icon-sized spacer. */
.lb-form-other-wrap {
	margin-top: 8px;
}

.lb-form-icon-spacer {
	visibility: hidden;
}

.lb-form-input-wrap.lb-form-textarea-wrap {
	border-radius: var(--lb-form-textarea-radius, 22px);
	height: auto;
	align-items: flex-start;
	padding: 18px 20px;
}

.lb-form-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--lb-form-icon-color, #191919);
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	line-height: 0;
}
.lb-form-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.lb-form-icon-arrow {
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	transition: transform .2s ease;
	pointer-events: none;
}
.lb-form-input-wrap.lb-form-dropdown-active .lb-form-icon-arrow {
	transform: translateY(-50%) rotate(180deg);
}

.lb-form-input-wrap input[type="text"],
.lb-form-input-wrap input[type="email"],
.lb-form-input-wrap input[type="tel"],
.lb-form-input-wrap select,
.lb-form-input-wrap textarea {
	flex: 1 !important;
	height: 100% !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	font-family: "Google Sans", Arial, sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--lb-form-placeholder-size, 14px) !important;
	line-height: 1.4 !important;
	color: var(--lb-form-input-text, #191919) !important;
	width: 100% !important;
	/* Allow the flex item to shrink below its intrinsic (placeholder-driven)
	   width so long placeholders stay inside the wrapper instead of
	   overflowing and getting clipped on the edge. */
	min-width: 0 !important;
	margin: 0 !important;
	/* Small top/left inset so the first characters and the tops of letters
	   have breathing room and never touch (or get clipped by) the edge. */
	padding: 2px 0 0 4px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

/* Neutralize the browser autofill background — repaint the input with the
   wrap's own background colour via a full-cover inset box-shadow so autofilled
   fields look identical to normal ones (see .lb-form-input-wrap background). */
.lb-form-input-wrap input:-webkit-autofill,
.lb-form-input-wrap input:-webkit-autofill:hover,
.lb-form-input-wrap input:-webkit-autofill:focus,
.lb-form-input-wrap input:-webkit-autofill:active,
.lb-form-input-wrap textarea:-webkit-autofill,
.lb-form-input-wrap select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--lb-form-input-bg, #FAFAFA) inset !important;
	        box-shadow: 0 0 0 1000px var(--lb-form-input-bg, #FAFAFA) inset !important;
	-webkit-text-fill-color: var(--lb-form-input-text, #191919) !important;
	caret-color: var(--lb-form-input-text, #191919) !important;
	transition: background-color 100000s ease-in-out 0s !important;
}

.lb-form-input-wrap input,
.lb-form-input-wrap select,
.lb-form-input-wrap textarea,
.lb-form-dropdown-trigger {
	box-shadow: none !important;
}

.lb-form-input-wrap textarea {
	height: auto !important;
	resize: none;
	min-height: 120px;
	line-height: 1.5 !important;
}

.lb-form-input-wrap select.lb-form-select {
	padding-right: 24px;
	cursor: pointer;
}

.lb-form-input-wrap input::placeholder,
.lb-form-input-wrap textarea::placeholder {
	color: var(--lb-form-placeholder-color, #778AA9);
	font-size: var(--lb-form-placeholder-size, 14px);
	font-family: "Google Sans", Arial, sans-serif;
	opacity: 1;
}

/* Custom select trigger — replaces the native <select> visually while the
   real <select> stays in the DOM (visually hidden) so it still submits. */
select.lb-form-select.lb-form-select-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	border: 0 !important;
}

.lb-form-dropdown-trigger {
	flex: 1 !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	background: transparent !important;
	font-family: "Google Sans", Arial, sans-serif !important;
	font-size: var(--lb-form-placeholder-size, 14px) !important;
	text-align: left !important;
	width: 100% !important;
	min-width: 0 !important;
	padding: 2px 0 0 4px !important;
	margin: 0 !important;
	border: 0 !important;
	cursor: pointer !important;
	appearance: none !important;
	color: var(--lb-form-input-text, #191919) !important;
	/* Reserve room for the absolutely-positioned arrow so the placeholder /
	   selected label truncates before it instead of running underneath. */
	padding-right: 28px !important;
}
.lb-form-dropdown-trigger.lb-form-dropdown-placeholder {
	color: var(--lb-form-placeholder-color, #778AA9) !important;
}
.lb-form-dropdown-label {
	display: block !important;
	width: 100% !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lb-form-dropdown-menu {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	background: #FFFFFF;
	border-radius: 20px;
	box-shadow: 0 16px 40px rgba(17, 24, 39, 0.14);
	padding: 8px;
	max-height: 240px;
	overflow-y: auto;
	z-index: 30;
}
.lb-form-dropdown-menu[hidden] {
	display: none;
}
.lb-form-dropdown-option {
	padding: 12px 16px;
	border-radius: 14px;
	font-family: "Google Sans", Arial, sans-serif;
	font-size: var(--lb-form-placeholder-size, 14px);
	color: var(--lb-form-input-text, #191919);
	cursor: pointer;
}
.lb-form-dropdown-option:hover,
.lb-form-dropdown-option:focus-visible {
	background: #F1F2F4;
}
.lb-form-dropdown-option.lb-form-dropdown-option-selected {
	background: #EAEBEE;
	font-weight: 600;
}

.lb-form-submit-btn,
.lb-form-submit-btn:link,
.lb-form-submit-btn:visited {
	position: relative !important;
	overflow: hidden !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	align-self: center !important;
	width: 100% !important;
	max-width: 320px !important;
	height: 62px !important;
	padding: 0 28px !important;
	/* Equal air above and below the button. Below it there is nothing but
	   `.lb-section3-right`'s 45px bottom padding; above it there is `.lb-form`'s
	   24px gap. 21 + 24 = 45, so the two match. (The ≤600px block re-tunes this
	   to that breakpoint's 28px panel padding.) */
	margin-top: 21px !important;
	border: none !important;
	outline: none !important;
	border-radius: var(--lb-form-btn-radius, 60px) !important;
	background: var(--lb-form-btn-grad, linear-gradient(240.87deg, #EDF8FF, #35B6FF)) !important;
	font-family: "Syne", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--lb-form-btn-font-size, 22px) !important;
	color: var(--lb-form-btn-text, #191919) !important;
	cursor: pointer !important;
	transition: transform .25s ease, filter .25s ease !important;
	appearance: none !important;
	white-space: nowrap !important;
	line-height: 1 !important;
}
.lb-form-submit-btn span {
	font-family: inherit !important;
	font-weight: 700 !important;
	color: var(--lb-form-btn-text, #191919) !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
}
.lb-form-submit-btn svg {
	width: 18px !important;
	height: 14px !important;
	min-width: 18px !important;
	flex-shrink: 0 !important;
	color: var(--lb-form-btn-text, #191919) !important;
	fill: var(--lb-form-btn-text, #191919) !important;
}
.lb-form-submit-btn svg path {
	fill: var(--lb-form-btn-text, #191919) !important;
}
.lb-form-submit-btn:hover,
.lb-form-submit-btn:focus {
	transform: translateY(-2px) !important;
	filter: brightness(1.03) !important;
}
.lb-form-submit-btn:disabled {
	opacity: .6 !important;
	cursor: not-allowed !important;
	transform: none !important;
}

/* In-flight state — "Submitting… ⌛", the same feedback the Form Blocks plugin
   gives. `cursor: wait` and a slightly higher opacity than the plain disabled
   state above make it read as "working", not "unavailable". */
.lb-form-submit-btn.lb-form-submitting {
	opacity: .75 !important;
	cursor: wait !important;
}

.lb-form-submit-btn .lb-form-btn-wait {
	display: inline-block !important;
	font-size: 17px !important;
	line-height: 1 !important;
	animation: lb-form-wait-tip 1.1s ease-in-out infinite !important;
}

@keyframes lb-form-wait-tip {
	0%, 45%   { transform: rotate(0deg); }
	55%, 100% { transform: rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
	.lb-form-submit-btn .lb-form-btn-wait {
		animation: none !important;
	}
}

/* The whole pill reads as the text box, so show the text caret over all of it —
   including the icon and the padding at either end. A click landing anywhere in
   here is forwarded to the control by form-frontend.js. */
.lb-form-input-wrap {
	cursor: text;
}

.lb-form-input-wrap .lb-form-icon {
	/* Decoration only — never swallow a click aimed at the field. The event
	   falls through to .lb-form-input-wrap, which focuses the control. */
	pointer-events: none;
}

.lb-form-input-wrap:has( select ) {
	cursor: pointer;
}
.lb-form-btn-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,0.6);
	transform: scale(0);
	animation: lb-form-ripple-anim .6s ease-out;
	pointer-events: none;
}
@keyframes lb-form-ripple-anim {
	to { transform: scale(2.5); opacity: 0; }
}

.lb-form-message {
	font-family: "Google Sans", Arial, sans-serif;
	font-size: 14px;
	min-height: 0;
	opacity: 1;
	transition: opacity .5s ease;
}

/* The message box is always in the markup, between the last field and the submit
   button. Empty it has no height — but it is still a flex CHILD of `.lb-form`,
   so it collected a `gap: 24px` on each side and silently added 48px above the
   button instead of 24px. Taking it out of the flow while empty is what lets the
   button's own margin actually control that distance. It comes back the moment
   the script writes a message into it. */
.lb-form-message:empty {
	display: none;
}
/* Success notice on its way out — the script adds this, waits for the fade,
   then empties the box. */
.lb-form-message.lb-form-fading {
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.lb-form-message {
		transition: none;
	}
}
.lb-form-message.lb-form-success {
	color: #1AA260;
}
.lb-form-message.lb-form-error {
	color: #E0433C;
}
.lb-form-field.lb-form-invalid .lb-form-input-wrap {
	box-shadow: 0 0 0 2px #E0433C;
}
.lb-form-field-error {
	font-family: "Google Sans", Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #E0433C;
	margin: 4px 0 0;
}

/* ------------------------------------------------------------------------
   Security check (Really Simple Captcha image)
   Laid out like the Job Opening / Custom Contact Form plugins: the image and
   its refresh button on one row, the box to type the code beneath it.
   ------------------------------------------------------------------------ */
.lb-form-captcha-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 2px;
}

.lb-form-captcha-img {
	display: block;
	width: 110px;
	height: 40px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid rgba(25, 25, 25, 0.15);
	padding: 2px 4px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	/* The theme sets `height: auto` on content images, which would squash the
	   40px image down to its aspect ratio inside the padding. */
	max-width: 110px;
}

/* The code is four characters — spaced out and upper-cased so it is easy to
   read back off the image, matching the other two forms. */
.lb-form-input-wrap input.lb-form-captcha-answer {
	letter-spacing: 2px !important;
	text-transform: uppercase !important;
}

/* …but the 26-character placeholder is far too wide once tracked out and
   upper-cased, so only the PLACEHOLDER drops back to normal. What the visitor
   types still comes out spaced and capitalised. */
.lb-form-input-wrap input.lb-form-captcha-answer::placeholder {
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* Themes style every <button>, so this needs the same !important treatment
   as the submit button above. */
.lb-form-captcha-refresh,
.lb-form-captcha-refresh:link,
.lb-form-captcha-refresh:visited,
.lb-form-captcha-refresh:hover,
.lb-form-captcha-refresh:focus,
.lb-form-captcha-refresh:active {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	/* Sits beside the image now, not pushed to the far end of the input row. */
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	outline: none !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--lb-form-icon-color, #191919) !important;
	cursor: pointer !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-webkit-tap-highlight-color: transparent !important;
	line-height: 0 !important;
	/* No `transform` in the transition: the icon should only move on a real
	   click, never on hover — same as the other two forms. */
	transition: background-color .2s ease !important;
}

.lb-form-captcha-refresh::before,
.lb-form-captcha-refresh::after {
	display: none !important;
	content: none !important;
}

/* Hover gives feedback with the background circle only; the icon turns when
   the button is actually pressed. */
.lb-form-captcha-refresh:hover {
	background-color: rgba(25, 25, 25, 0.06) !important;
}

.lb-form-captcha-refresh svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
	transition: transform .4s ease !important;
}

.lb-form-captcha-refresh:active svg {
	transform: rotate(-180deg) !important;
}

@media (max-width: 480px) {
	.lb-form-grid {
		grid-template-columns: 1fr;
	}
	.lb-form-submit-btn {
		max-width: 100%;
		font-size: 18px !important;
	}
	.lb-form-submit-btn span {
		font-size: 18px !important;
		white-space: nowrap !important;
	}
}

/* ------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.lb-features-grid {
		column-gap: 32px;
	}

	.lb-bottom-arrow {
		display: none;
	}

	/* Nest Hub / tablet: the panel is full width, so centre the
	   "Or simply fill out the form…" note (icon + text) as a group. */
	/* .lb-bottom-note {
		justify-content: center;
	} */
	/* Re-cap the description width (the <=1100 rule removes it) so the
	   icon + text stay a compact block that visibly centres instead of
	   stretching across the whole panel. Higher specificity than the
	   plain .lb-bottom-desc rule so this wins regardless of source order. */
	.lb-bottom-note .lb-bottom-desc {
		max-width: 340px;
	}
}

/* Section 3's two-column layout gets too cramped below ~1100px: the left
   panel loses width and the "Call Our Executive" card's title/description
   wrap one word per line. Stack it into a single column earlier so the card
   regains full width and reads properly. */
@media (max-width: 1100px) {
	.lb-section3 {
		flex-direction: column;
		border-radius: 24px;
	}
	.lb-section3-left {
		max-width: 100%;
		border-radius: 0;
	}
	.lb-section3-right {
		max-width: 100%;
	}
	/* Panel is full width when stacked, so let the "Or simply fill out the
	   form…" line use the whole row instead of being capped narrow with a
	   large empty gap beside it. */
	.lb-bottom-desc {
		max-width: none;
	}
}

/* When Section 3 is still two columns (≥1101px) but not yet full desktop
   width, keep the phone number on one line. */
@media (min-width: 1101px) and (max-width: 1240px) {
	.lb-call-phone {
		white-space: nowrap;
		font-size: 24px;
	}
}

@media (max-width: 900px) {
	.lb-wrap {
		padding: 32px 24px 60px;
		gap: 32px;
	}

	/* .access-care-section full-bleed handled by the ≤991 rule above */

	.lb-features-grid {
		grid-template-columns: 1fr;
	}

	.lb-section3 {
		flex-direction: column;
		border-radius: 24px;
	}

	.lb-section3-left {
		max-width: 100%;
		border-radius: 0;
	}

	.lb-section3-right {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.lb-wrap {
		padding: 24px 20px 48px;
		gap: 24px;
	}

	/* .access-care-section full-bleed handled by the ≤991 rule above */

	.lb-features {
		padding: 24px 20px 28px;
		border-radius: 16px;
	}

	.lb-features-title {
		font-size: 24px;
		margin-bottom: 28px;
	}

	.lb-feature-title {
		font-size: 18px;
	}

	.lb-feature-desc {
		font-size: 14px;
	}

	.lb-section3-left,
	.lb-section3-right {
		padding: 28px 20px;
	}

	/* Panel padding drops to 28px here, so the space below the button drops with
	   it — match it above: 4 + the form's 24px gap = 28. */
	.lb-form-submit-btn {
		margin-top: 4px !important;
	}

	/* Set it on the header so the icon scales down WITH the title — the icon is
	   sized in em (1.2em × line count), so this one value drives both.

	   32px was too big for a phone, and the icon is what made it overflow rather
	   than just look large: at 32px a two-line title gives a 77px icon, three
	   lines a 115px one, and on a 375px screen that left the text barely 140px to
	   wrap "Executive" into — so it spilled past the card and was clipped. 24px
	   pulls the icon back to ~58px and gives the words room. */
	.lb-section3-header {
		font-size: 24px;
	}

	/* Belt and braces, independent of the size above: a flex item will not shrink
	   below its longest word by default, so one long word in an admin-typed title
	   could still push past the card. min-width lets it shrink, and break-word
	   lets that word split rather than overflow and be cut off. */
	.lb-section3-title {
		min-width: 0;
		overflow-wrap: break-word;
	}

	.lb-call-box {
		grid-template-columns: auto 1fr;
		padding: 20px;
	}

	.lb-call-icon,
	.lb-call-icon svg,
	.lb-call-icon img {
		width: 42px;
		height: 42px;
	}

	/* "Call Our Executive" and its sub-line. The title had no mobile step at all
	   — it rendered at its full 18px next to the now-smaller icon, which is what
	   made the pair read oversized in a 20px-padded card. */
	.lb-call-title {
		font-size: 15px;
	}
	.lb-call-desc {
		font-size: 13px;
	}
	.lb-call-copy {
		gap: 6px;
	}

	.lb-call-phone {
		font-size: 22px;
		text-align: center;
	}
}


/* ==========================================================================
   Scroll-reveal entrance — a DISTINCT signature motion per section (v2.7.0)
   `lb-reveal` is rendered SERVER-SIDE on each <section> (hidden from first
   paint → no flicker); reveal.js only ADDS `lb-in` when a section enters the
   viewport (threshold:0 + double rAF) — the SAME entrance plays in EVERY state.

   Each section uses its OWN technique so no two read alike:
     1. Intro       — CLIP-WIPE unveil (image wipes open L→R) + blur-focus copy.
     2. Technologies — 3D CARD-FLIP (logos flip in on the Y axis), staggered.
     3. Access Care  — SHEAR-GLIDE (columns skew into alignment from each side).
     4. Key Features — ELASTIC POP (cards spring up from small w/ back-overshoot).
     5. Section 3    — 3D UNFOLD (form panel hinges up on the X axis) + rise copy.

   Hidden states live inside the reduced-motion guard; revealed resets come
   AFTER at EQUAL specificity so they win the tie and content always ends
   visible & crisp. Blur is used only on text/images; bordered cards use
   transform only. Transforms/clip/opacity never affect layout → zero shift.
   ========================================================================== */
.lb-wrap {
	--lb-ease:   cubic-bezier(0.16, 1, 0.3, 1);
	--lb-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: no-preference) {

	/* ── 1. Intro — CINEMATIC CLIP-WIPE: the image is unveiled by a left→right
	     clip wipe while gently zooming; the copy focuses in from a soft blur. */
	.healthcare-section.lb-reveal .healthcare-content {
		opacity: 0;
		transform: translateY(26px);
		filter: blur(12px);
		transition: opacity 1.15s var(--lb-ease),
		            transform 1.2s var(--lb-ease),
		            filter 1.15s var(--lb-ease);
	}
	.healthcare-section.lb-reveal .healthcare-image {
		opacity: 0;
		clip-path: inset(0 0 0 100%);
		transform: scale(1.08);
		transition: opacity 0.55s var(--lb-ease) 0.15s,
		            clip-path 1.35s var(--lb-ease) 0.15s,
		            transform 1.45s var(--lb-ease) 0.15s;
	}

	/* ── 2. Technologies — 3D CARD-FLIP: each logo flips in around its own
	     vertical axis (like turning a card) in a staggered wave. ─────────── */
	.tech-section.lb-reveal .tech-title {
		opacity: 0;
		transform: translateY(24px);
		filter: blur(6px);
		transition: opacity 1s var(--lb-ease),
		            transform 1s var(--lb-ease),
		            filter 1s var(--lb-ease);
		transition-delay: 0.05s;
	}
	.tech-section.lb-reveal .tech-item {
		opacity: 0;
		transform: perspective(900px) rotateY(-82deg);
		transform-origin: 50% 50%;
		transition: opacity 0.7s var(--lb-ease),
		            transform 0.9s var(--lb-ease);
	}
	.tech-section.lb-reveal .tech-item:nth-child(1) { transition-delay: 0.20s; }
	.tech-section.lb-reveal .tech-item:nth-child(2) { transition-delay: 0.30s; }
	.tech-section.lb-reveal .tech-item:nth-child(3) { transition-delay: 0.40s; }
	.tech-section.lb-reveal .tech-item:nth-child(4) { transition-delay: 0.50s; }
	.tech-section.lb-reveal .tech-item:nth-child(5) { transition-delay: 0.60s; }
	.tech-section.lb-reveal .tech-item:nth-child(6) { transition-delay: 0.70s; }
	.tech-section.lb-reveal .tech-item:nth-child(n+7) { transition-delay: 0.80s; }

	/* ── Small screens: 2D reveal instead of the card-flip ──
	   `perspective() rotateY()` is a 3D transform, which promotes each logo to
	   its own compositor layer. Mobile GPUs rasterise that layer once, at the
	   size the element has mid-rotation — a heavily foreshortened 82° — and then
	   reuse that same bitmap as it straightens up. The result is a logo drawn
	   from far too few pixels: soft, and on the worst offenders visibly clipped
	   at the edges where the perspective pushed it outside its own layer bounds.
	   Setting `transform: none` afterwards does not re-render it sharply, because
	   the promoted layer is kept.

	   A flat translate+scale never triggers that promotion, so the logos stay
	   crisp. The stagger and timing above are untouched — only the geometry of
	   the movement changes, and only where the artefact appears. */
	@media (max-width: 768px) {
		.tech-section.lb-reveal .tech-item {
			transform: translateY(18px) scale(0.96);
		}
	}

	/* ── 3. Access Care — SHEAR-GLIDE: the two columns SKEW in from opposite
	     sides and straighten as they settle — a modern sheared slide. ────── */
	.access-care-section.lb-reveal .access-content {
		opacity: 0;
		transform: skewY(5deg) translateY(30px);
		transition: opacity 1.1s var(--lb-ease),
		            transform 1.2s var(--lb-ease);
	}
	.access-care-section.lb-reveal .access-images {
		opacity: 0;
		transform: skewX(-6deg) translateX(52px);
		transition: opacity 1.1s var(--lb-ease) 0.08s,
		            transform 1.25s var(--lb-ease) 0.08s;
	}
	.access-care-section.lb-reveal .access-content h2,
	.access-care-section.lb-reveal .access-content p {
		transform: translateY(20px);
		transition: transform 1.05s var(--lb-ease);
	}
	.access-care-section.lb-reveal .access-content h2              { transition-delay: 0.24s; }
	.access-care-section.lb-reveal .access-content p:nth-of-type(1) { transition-delay: 0.34s; }
	.access-care-section.lb-reveal .access-content p:nth-of-type(2) { transition-delay: 0.42s; }
	.access-care-section.lb-reveal .access-content p:nth-of-type(n+3) { transition-delay: 0.50s; }

	/* ── 4. Key Features — ELASTIC POP: each card springs up from small with a
	     back-easing overshoot and a slight un-rotate, staggered. ─────────── */
	.lb-features.lb-reveal .lb-features-title {
		opacity: 0;
		transform: translateY(24px);
		filter: blur(6px);
		transition: opacity 1s var(--lb-ease),
		            transform 1s var(--lb-ease),
		            filter 1s var(--lb-ease);
		transition-delay: 0.05s;
	}
	.lb-features.lb-reveal .lb-feature-item {
		opacity: 0;
		transform: scale(0.7) translateY(48px) rotate(-4deg);
		transition: opacity 0.7s var(--lb-ease),
		            transform 0.85s var(--lb-spring);
	}
	.lb-features.lb-reveal .lb-feature-item:nth-child(1) { transition-delay: 0.18s; }
	.lb-features.lb-reveal .lb-feature-item:nth-child(2) { transition-delay: 0.28s; }
	.lb-features.lb-reveal .lb-feature-item:nth-child(3) { transition-delay: 0.38s; }
	.lb-features.lb-reveal .lb-feature-item:nth-child(4) { transition-delay: 0.48s; }
	.lb-features.lb-reveal .lb-feature-item:nth-child(5) { transition-delay: 0.58s; }
	.lb-features.lb-reveal .lb-feature-item:nth-child(n+6) { transition-delay: 0.68s; }

	/* ── 5. Section 3 — 3D UNFOLD: the form panel hinges UP from its bottom edge
	     (rotateX) as if unfolding, while the left copy rises + focuses in. ── */
	.lb-section3.lb-reveal .lb-section3-header {
		opacity: 0;
		transform: translateY(28px);
		filter: blur(7px);
		transition: opacity 1.05s var(--lb-ease),
		            transform 1.1s var(--lb-ease),
		            filter 1.05s var(--lb-ease);
		transition-delay: 0.10s;
	}
	.lb-section3.lb-reveal .lb-section3-desc,
	.lb-section3.lb-reveal .lb-call-box,
	.lb-section3.lb-reveal .lb-bottom-note {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity 1.05s var(--lb-ease),
		            transform 1.1s var(--lb-ease);
	}
	.lb-section3.lb-reveal .lb-section3-desc   { transition-delay: 0.20s; }
	.lb-section3.lb-reveal .lb-call-box        { transition-delay: 0.30s; }
	.lb-section3.lb-reveal .lb-bottom-note     { transition-delay: 0.40s; }
	.lb-section3.lb-reveal .lb-section3-right {
		opacity: 0;
		transform: perspective(1300px) rotateX(-40deg) translateY(38px);
		transform-origin: 50% 100%;
		transition: opacity 0.9s var(--lb-ease) 0.12s,
		            transform 1.2s var(--lb-ease) 0.12s;
	}
}

/* ── Revealed resets — AFTER the media query at EQUAL specificity so they win
     the tie; content always ends visible, un-skewed, un-blurred & crisp. ─── */
.healthcare-section.lb-in .healthcare-content,
.healthcare-section.lb-in .healthcare-image,
.tech-section.lb-in .tech-title,
.tech-section.lb-in .tech-item,
.access-care-section.lb-in .access-content,
.access-care-section.lb-in .access-images,
.access-care-section.lb-in .access-content h2,
.access-care-section.lb-in .access-content p,
.lb-features.lb-in .lb-features-title,
.lb-features.lb-in .lb-feature-item,
.lb-section3.lb-in .lb-section3-header,
.lb-section3.lb-in .lb-section3-desc,
.lb-section3.lb-in .lb-call-box,
.lb-section3.lb-in .lb-bottom-note,
.lb-section3.lb-in .lb-section3-right {
	opacity: 1;
	transform: none;
	filter: none;
}
/* Intro image: clear the clip wipe to fully visible. */
.healthcare-section.lb-in .healthcare-image {
	clip-path: inset(0 0 0 0);
}