:root {
	--iv-blue: #09185D;
	--iv-orange: #F87303;
	--iv-white: #FFFFFF;
	--iv-soft-blue: #F3F6FC;
	--iv-warm-gray: #F7F7F5;
	--iv-text: #1F2933;
	--iv-muted: #5F6B7A;
	--iv-border: rgba(9, 24, 93, 0.12);
	--iv-orange-soft: rgba(248, 115, 3, 0.10);
	--iv-blue-soft: rgba(9, 24, 93, 0.08);

	--iv-radius-sm: 12px;
	--iv-radius-md: 20px;
	--iv-radius-lg: 32px;
	--iv-radius-pill: 999px;

	--iv-shadow-sm: 0 10px 24px rgba(9, 24, 93, 0.08);
	--iv-shadow-md: 0 18px 48px rgba(9, 24, 93, 0.14);
	--iv-shadow-lg: 0 28px 80px rgba(9, 24, 93, 0.20);

	--iv-section-padding-desktop: 96px;
	--iv-section-padding-tablet: 72px;
	--iv-section-padding-mobile: 56px;

	--iv-row-width: min(1120px, 92vw);
	--iv-row-wide: min(1280px, 94vw);
}

body.ivmedical-site {
	color: var(--iv-text);
	font-size: 18px;
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

body.ivmedical-site p { color: var(--iv-muted); }

body.ivmedical-site h1,
body.ivmedical-site h2,
body.ivmedical-site h3,
body.ivmedical-site h4,
body.ivmedical-site h5,
body.ivmedical-site h6 {
	color: var(--iv-blue);
	font-weight: 800;
	letter-spacing: -0.035em;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

body.ivmedical-site h1 {
	font-size: clamp(2.375rem, 5vw, 4rem);
	line-height: 1.05;
}

body.ivmedical-site h2 {
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	line-height: 1.16;
}

body.ivmedical-site h3 {
	font-size: clamp(1.125rem, 1.5vw, 1.35rem);
	line-height: 1.28;
}

body.ivmedical-site h4 {
	font-size: clamp(1rem, 1.15vw, 1.125rem);
	line-height: 1.3;
}

/* NOTE: element-level heading sizes above are only a fallback. Divi's Heading
   module forces its own size via `.preset--module--divi-heading--default
   .et_pb_heading_container hN {font-size:50px}` (specificity 0,2,1), which those
   rules can't beat. The authoritative, higher-specificity heading-module + phone
   column overrides live at the END of this file (§ "Divi module overrides"). */

body.ivmedical-site a {
	color: var(--iv-blue);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

body.ivmedical-site a:hover,
body.ivmedical-site a:focus { color: var(--iv-orange); }

.skip-link {
	position: absolute;
	left: -999px;
	top: 16px;
	z-index: 999999;
	background: var(--iv-blue);
	color: var(--iv-white);
	padding: 12px 18px;
	border-radius: var(--iv-radius-sm);
}

.skip-link:focus { left: 16px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et_pb_button:focus-visible {
	outline: 3px solid var(--iv-orange);
	outline-offset: 4px;
}

.iv-section {
	padding-top: var(--iv-section-padding-desktop);
	padding-bottom: var(--iv-section-padding-desktop);
}

.iv-section-sm { padding-top: 64px; padding-bottom: 64px; }
.iv-row { width: var(--iv-row-width) !important; max-width: var(--iv-row-width) !important; }
.iv-row-wide { width: var(--iv-row-wide) !important; max-width: var(--iv-row-wide) !important; }

.iv-bg-white { background: var(--iv-white); }
.iv-bg-soft-blue { background: var(--iv-soft-blue); }
.iv-bg-warm-gray { background: var(--iv-warm-gray); }

.iv-bg-blue {
	background:
		radial-gradient(circle at top right, rgba(248, 115, 3, 0.16), transparent 28%),
		linear-gradient(135deg, #09185D 0%, #102574 64%, #071044 100%);
	color: var(--iv-white);
}

.iv-bg-blue h1,
.iv-bg-blue h2,
.iv-bg-blue h3,
.iv-bg-blue h4,
.iv-bg-blue p,
.iv-bg-blue li { color: var(--iv-white); }
.iv-bg-blue p { color: rgba(255, 255, 255, 0.82); }

.iv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--iv-orange);
	font-size: 13px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.iv-eyebrow::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 3px;
	background: var(--iv-orange);
	border-radius: 999px;
}

.iv-card,
.iv-service-card,
.iv-stat-card,
.iv-team-card,
.iv-testimonial-card {
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-md);
	box-shadow: var(--iv-shadow-sm);
	overflow: hidden;
}

.iv-card-pad { padding: 32px; }

.iv-service-card,
.iv-team-card,
.iv-testimonial-card {
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.iv-service-card:hover,
.iv-team-card:hover,
.iv-testimonial-card:hover,
.iv-service-card:focus-within,
.iv-team-card:focus-within,
.iv-testimonial-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--iv-shadow-md);
	border-color: rgba(248, 115, 3, 0.35);
}

.iv-icon-bubble {
	width: 58px;
	height: 58px;
	border-radius: 18px;
	background: var(--iv-orange-soft);
	color: var(--iv-orange);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.iv-icon-bubble img,
.iv-icon-bubble svg { width: 30px; height: 30px; }

.et_pb_button.iv-btn-primary,
.iv-btn-primary .et_pb_button {
	background: var(--iv-orange) !important;
	border: 2px solid var(--iv-orange) !important;
	color: var(--iv-white) !important;
	border-radius: var(--iv-radius-pill) !important;
	font-weight: 800;
	letter-spacing: -0.01em;
	padding: 14px 24px !important;
	line-height: 1.2 !important;
	box-shadow: 0 12px 28px rgba(248, 115, 3, 0.25);
}

.et_pb_button.iv-btn-primary:hover,
.iv-btn-primary .et_pb_button:hover,
.et_pb_button.iv-btn-primary:focus,
.iv-btn-primary .et_pb_button:focus {
	background: #E56600 !important;
	border-color: #E56600 !important;
	color: var(--iv-white) !important;
	box-shadow: 0 16px 36px rgba(248, 115, 3, 0.32);
}

.et_pb_button.iv-btn-secondary,
.iv-btn-secondary .et_pb_button {
	background: transparent !important;
	border: 2px solid var(--iv-blue) !important;
	color: var(--iv-blue) !important;
	border-radius: var(--iv-radius-pill) !important;
	font-weight: 800 !important;
	padding: 14px 24px !important;
	line-height: 1.2 !important;
}

.iv-bg-blue .et_pb_button.iv-btn-secondary,
.iv-bg-blue .iv-btn-secondary .et_pb_button {
	border-color: rgba(255, 255, 255, 0.72) !important;
	color: var(--iv-white) !important;
}

.et_pb_button.iv-btn-secondary:hover,
.iv-btn-secondary .et_pb_button:hover,
.et_pb_button.iv-btn-secondary:focus,
.iv-btn-secondary .et_pb_button:focus {
	background: var(--iv-blue) !important;
	color: var(--iv-white) !important;
}

/* Divi's default button preset forces `color:#FFFFFF!important` through an
   ID-scoped selector (`body #page-container .et_pb_section .preset--module--divi-button--default`,
   specificity 1,2,1), which out-specifies our .iv-btn-secondary color and leaves
   the outline button's text WHITE. That's correct on dark .iv-bg-blue sections but
   unreadable on light ones. Override ONLY on the light section backgrounds, and
   include `#page-container` (an ID) so we actually beat the preset: orange text at
   rest, blue fill + white text on hover. */
#page-container .iv-bg-white .et_pb_button.iv-btn-secondary,
#page-container .iv-bg-soft-blue .et_pb_button.iv-btn-secondary,
#page-container .iv-bg-warm-gray .et_pb_button.iv-btn-secondary {
	color: var(--iv-orange) !important;
}

/* Hover/focus must out-specify the orange rest rule above (which, being non-:hover,
   would otherwise keep the text orange on hover) → force the white-on-blue state. */
#page-container .iv-bg-white .et_pb_button.iv-btn-secondary:hover,
#page-container .iv-bg-white .et_pb_button.iv-btn-secondary:focus,
#page-container .iv-bg-soft-blue .et_pb_button.iv-btn-secondary:hover,
#page-container .iv-bg-soft-blue .et_pb_button.iv-btn-secondary:focus,
#page-container .iv-bg-warm-gray .et_pb_button.iv-btn-secondary:hover,
#page-container .iv-bg-warm-gray .et_pb_button.iv-btn-secondary:focus {
	background: var(--iv-blue) !important;
	color: var(--iv-white) !important;
}

.iv-hero {
	/* Tightened per client feedback ("the blue is too heavy"): was 680px min-height
	   + the section's 96px padding (~680px of blue). Now ~440px floor with its own
	   64px padding so the hero reads as a lighter band, not a full screen of blue. */
	min-height: 440px;
	padding-top: 64px;
	padding-bottom: 64px;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.iv-hero::after {
	content: "";
	position: absolute;
	right: -160px;
	top: 90px;
	width: 520px;
	height: 520px;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(248, 115, 3, 0.20), transparent 66%);
	pointer-events: none;
}

.iv-hero-card {
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(14px);
	border-radius: var(--iv-radius-lg);
	padding: 28px;
	box-shadow: var(--iv-shadow-lg);
}

.iv-hero-stat {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(255,255,255,0.16);
}

.iv-hero-stat:last-child { border-bottom: 0; }
.iv-hero-stat strong { color: var(--iv-white); display: block; font-size: 20px; }
.iv-hero-stat span { color: rgba(255,255,255,0.76); font-size: 15px; }

/* Home hero polish (client request): put the two CTAs side-by-side and stop the
   stats card (which IS the right column, .iv-hero-card) from stretching to the tall
   left column and leaving empty space. The left column is a flex-column; switching
   it to row+wrap with the text blocks forced full-width lets the two button
   wrappers share one line, while align-items:flex-start stops vertical stretch. */
#home-hero .et_pb_column_0 {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	align-content: flex-start !important;
}
#home-hero .et_pb_column_0 > .et_pb_text,
#home-hero .et_pb_column_0 > .et_pb_heading {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}
#home-hero .et_pb_column_0 > .et_pb_button_module_wrapper {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 12px 14px 0 0 !important;
}
/* Card fits its content and centers beside the left column (was stretching ~549px
   with ~310px of empty space). */
#home-hero .iv-hero-card { align-self: center !important; }

.iv-stat-card { padding: 28px; text-align: center; }
.iv-stat-number { color: var(--iv-orange); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
.iv-stat-label { color: var(--iv-blue); font-weight: 800; margin-top: 10px; }
.iv-stat-note { color: var(--iv-muted); font-size: 15px; margin-top: 6px; }

.iv-contact-form input,
.iv-contact-form textarea,
.iv-contact-form select {
	border: 1px solid rgba(9, 24, 93, 0.22) !important;
	border-radius: 14px !important;
	padding: 15px 16px !important;
	font-size: 16px !important;
	color: var(--iv-text) !important;
	background: var(--iv-white) !important;
}

.iv-contact-form input:focus,
.iv-contact-form textarea:focus,
.iv-contact-form select:focus {
	border-color: var(--iv-orange) !important;
	box-shadow: 0 0 0 4px rgba(248, 115, 3, 0.12) !important;
}

.iv-header {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(9, 24, 93, 0.10);
}

.iv-header .et_pb_menu__menu > nav > ul > li > a {
	color: var(--iv-blue) !important;
	font-weight: 800;
}

.iv-header .et_pb_menu__menu > nav > ul > li > a:hover,
.iv-header .et_pb_menu__menu > nav > ul > li.current-menu-item > a {
	color: var(--iv-orange) !important;
}

/* Nav overlay + stacking. The Theme Builder header is position:static (its z-index
   is inert), so the open hamburger dropdown painted UNDER the position:relative
   hero and its lower items were hidden. Give the header its own stacking context
   above the page content and lift the dropdown itself so all items show on top. */
.et-l--header { position: relative; z-index: 1000; }
.et-l--header .et_mobile_menu,
.iv-header .et_mobile_menu { z-index: 1001 !important; }

/* Sticky, compacted header on tablet/mobile (<=980, where the menu collapses to a
   hamburger) so the nav stays reachable while scrolling. Trims the header section's
   50px top/bottom padding to 14px (~162px -> ~90px). Desktop header is untouched. */
@media (max-width: 980px) {
	.et-l--header {
		position: -webkit-sticky !important;
		position: sticky !important;
		top: 0 !important;
		z-index: 1000 !important;
	}
	.et-l--header .et_pb_section {
		padding-top: 14px !important;
		padding-bottom: 14px !important;
	}
	/* The header's menu column is only ~80px wide (hamburger only), so the dropdown
	   inherited that width and every label wrapped ("IV Medical | Home" over 3
	   lines). Give it a comfortable width anchored to its right edge, capped to the
	   viewport, so each item sits on one line. */
	.et-l--header .et_mobile_menu {
		min-width: min(230px, calc(100vw - 150px)) !important;
		max-width: calc(100vw - 20px) !important;
		left: auto !important;
		right: 0 !important;
		/* Match the header's frosted background exactly so the dropdown doesn't read
		   as a brighter solid-white rectangle (header is rgba(255,255,255,.92)+blur;
		   the dropdown was solid rgb(255,255,255)). */
		background-color: rgba(255, 255, 255, 0.92) !important;
		-webkit-backdrop-filter: blur(16px) !important;
		backdrop-filter: blur(16px) !important;
	}
	/* The hamburger's own menu module was solid white too; make it transparent so
	   the header's frosted background shows through uniformly. */
	.et-l--header .et_pb_menu { background-color: transparent !important; }
	/* Keep the widest label ("IV Medical | Home") on one line even in the ~210px
	   dropdown small phones (360px) get. */
	.et-l--header .et_mobile_menu a { font-size: 15px !important; }
}

.iv-footer { background: var(--iv-blue); color: var(--iv-white); }
.iv-footer h2, .iv-footer h3, .iv-footer h4, .iv-footer p, .iv-footer a, .iv-footer li {
	color: var(--iv-white);
}
.iv-footer a:hover, .iv-footer a:focus { color: var(--iv-orange); }

@media (max-width: 980px) {
	.iv-section { padding-top: var(--iv-section-padding-tablet); padding-bottom: var(--iv-section-padding-tablet); }
	.iv-hero { min-height: auto; padding-top: 60px; padding-bottom: 60px; }
	.iv-card-pad { padding: 26px; }
}

@media (max-width: 767px) {
	body.ivmedical-site { font-size: 16px; }
	.iv-section { padding-top: var(--iv-section-padding-mobile); padding-bottom: var(--iv-section-padding-mobile); }
	.iv-section-sm { padding-top: 44px; padding-bottom: 44px; }
	.iv-hero { padding-top: 48px; padding-bottom: 48px; }
	.iv-card-pad { padding: 22px; }
	.et_pb_button.iv-btn-primary,
	.et_pb_button.iv-btn-secondary { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}

/* =========================================================================
   § Divi module overrides (site-wide defaults, so headings/columns behave
   without hand-editing every module).

   Heading sizes: Divi's default heading preset forces 50/28/20 on every level
   via `.preset--module--divi-heading--default .et_pb_heading_container hN`
   (specificity 0,2,1). We keep H1/H2 at that default (they read well) and bring
   H3 and H4 down. `body.ivmedical-site .et_pb_heading_container hN` = (0,2,2) so
   it wins without !important; card H3 = (0,3,2) so it wins over the general H3.
   Values match the tested per-page settings: H3 30/20/20, card H3 30/18/20,
   H4 28/28/20.
   ========================================================================= */

/* Responsive heading sizes — vw-based clamp() so a heading scales smoothly with the
   viewport (and its column) instead of a fixed pixel size that outgrows narrow
   cards. Card H3 is capped small enough to hold multi-syllable words (e.g.
   "Accountability", "Communication") in a 4-up desktop card; the hyphens:auto
   safety-net below covers anything still too long. clamp(min, vw, max):
   general H3 22-30px, H4 20-28px, card H3 18-22px. One rule each — clamp replaces
   the old per-breakpoint px overrides. */
body.ivmedical-site .et_pb_heading_container h3 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.22; }
body.ivmedical-site .et_pb_heading_container h4 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.3; }
body.ivmedical-site .iv-card .et_pb_heading_container h3,
body.ivmedical-site .iv-service-card .et_pb_heading_container h3,
body.ivmedical-site .iv-stat-card .et_pb_heading_container h3,
body.ivmedical-site .iv-team-card .et_pb_heading_container h3,
body.ivmedical-site .iv-testimonial-card .et_pb_heading_container h3 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.25; }

/* Never break a word mid-letter. hyphens:auto hyphenates at syllable boundaries
   (html lang="en-US"); overflow-wrap:break-word is the last resort only when no
   hyphenation point exists; word-break:normal forbids the ugly break-all Divi/UA
   styles can introduce. Applies to every heading + blurb module title. */
body.ivmedical-site .et_pb_heading_container h1,
body.ivmedical-site .et_pb_heading_container h2,
body.ivmedical-site .et_pb_heading_container h3,
body.ivmedical-site .et_pb_heading_container h4,
body.ivmedical-site .et_pb_heading_container h5,
body.ivmedical-site .et_pb_heading_container h6,
body.ivmedical-site .et_pb_module_header {
	overflow-wrap: break-word;
	word-break: normal;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* A white .iv-card inside a .iv-bg-blue section: the section's white-text rules
   (.iv-bg-blue p/li/hN, specificity 0,1,1) bleed into the card and render
   white-on-white — e.g. the Key Benefits list in the Services "IV AI" section.
   These 0,3,2 selectors win and force dark, legible text back inside the card.
   (Headings inside cards are already dark: Divi's heading preset sets
   gcid-heading-color !important, which beats the .iv-bg-blue white rule.) */
body.ivmedical-site .iv-bg-blue .iv-card p,
body.ivmedical-site .iv-bg-blue .iv-card li,
body.ivmedical-site .iv-bg-blue .iv-service-card p,
body.ivmedical-site .iv-bg-blue .iv-service-card li,
body.ivmedical-site .iv-bg-blue .iv-stat-card p,
body.ivmedical-site .iv-bg-blue .iv-stat-card li,
body.ivmedical-site .iv-bg-blue .iv-team-card p,
body.ivmedical-site .iv-bg-blue .iv-team-card li,
body.ivmedical-site .iv-bg-blue .iv-testimonial-card p,
body.ivmedical-site .iv-bg-blue .iv-testimonial-card li {
	color: var(--iv-text);
}

/* Headings on .iv-bg-blue sections: Divi's heading preset forces
   color:var(--gcid-heading-color)!important (dark) on EVERY heading, which is
   illegible on the dark-blue gradient. Force them to Soft Blue Tint. The 0,3,2
   !important selector beats the preset's 0,2,1 !important. */
body.ivmedical-site .iv-bg-blue .et_pb_heading_container h1,
body.ivmedical-site .iv-bg-blue .et_pb_heading_container h2,
body.ivmedical-site .iv-bg-blue .et_pb_heading_container h3,
body.ivmedical-site .iv-bg-blue .et_pb_heading_container h4,
body.ivmedical-site .iv-bg-blue .et_pb_heading_container h5,
body.ivmedical-site .iv-bg-blue .et_pb_heading_container h6 {
	color: var(--iv-soft-blue) !important;
}

/* EXCEPTION: a heading inside a white card that sits in a blue section (e.g. the
   "Key Benefits" heading in the Services IV AI card) must stay dark on its white
   background. 0,4,2 !important beats the light-heading rule above. */
body.ivmedical-site .iv-bg-blue .iv-card .et_pb_heading_container h1,
body.ivmedical-site .iv-bg-blue .iv-card .et_pb_heading_container h2,
body.ivmedical-site .iv-bg-blue .iv-card .et_pb_heading_container h3,
body.ivmedical-site .iv-bg-blue .iv-card .et_pb_heading_container h4,
body.ivmedical-site .iv-bg-blue .iv-service-card .et_pb_heading_container h2,
body.ivmedical-site .iv-bg-blue .iv-service-card .et_pb_heading_container h3,
body.ivmedical-site .iv-bg-blue .iv-stat-card .et_pb_heading_container h3,
body.ivmedical-site .iv-bg-blue .iv-team-card .et_pb_heading_container h3,
body.ivmedical-site .iv-bg-blue .iv-testimonial-card .et_pb_heading_container h3 {
	color: var(--iv-blue) !important;
}

/* Phone column layout: Divi 5 emits NO default phone stacking, so columns keep
   desktop widths. Reflow PAGE CONTENT only — scoped to `.et-l--post` (the regular
   page-content wrapper), which naturally excludes the Theme Builder header (menu
   column is 3_5 too) and footer (already configured in the global footer). 4-col
   grids -> 2-up, everything else -> single column. !important is required to beat
   Divi's compound gutter selectors (`.et_pb_gutters3...>.et_pb_column_1_4`). */
@media (max-width: 767px) {
	body.ivmedical-site .et-l--post .et_pb_row { flex-wrap: wrap !important; }

	body.ivmedical-site .et-l--post .et_pb_column.et_pb_column_1_4 {
		width: 47.25% !important;
		margin-right: 5.5% !important;
		margin-bottom: 24px !important;
	}
	body.ivmedical-site .et-l--post .et_pb_column.et_pb_column_1_4:nth-child(2n) { margin-right: 0 !important; }

	body.ivmedical-site .et-l--post .et_pb_column.et_pb_column_1_2,
	body.ivmedical-site .et-l--post .et_pb_column.et_pb_column_1_3,
	body.ivmedical-site .et-l--post .et_pb_column.et_pb_column_2_3,
	body.ivmedical-site .et-l--post .et_pb_column.et_pb_column_3_4,
	body.ivmedical-site .et-l--post .et_pb_column.et_pb_column_2_5,
	body.ivmedical-site .et-l--post .et_pb_column.et_pb_column_3_5 {
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 24px !important;
	}
}

/* Divi 5 flex card grids: the value/feature/team/stat/testimonial cards are FLEX
   columns (`.et_flex_column_24_24` sharing a flex row — NOT legacy `.et_pb_column_1_4`),
   so the reflow above never touched them and 4-up rows stayed 4-up down to phone,
   crushing cards to ~90-130px (words wrapped mid-letter). Reflow them by their
   `.iv-*-card` class: 2-up on tablet/narrow desktop (<=1200), 1-up on phone (<=767).
   47.5% + 5% gutter (2nd of each pair drops its right margin) = a clean 2-up row. */
@media (max-width: 1200px) {
	/* Divi 5 flex rows already space columns with `column-gap`, so we set the gap
	   ourselves and size cards to fit two per row (47.5% + 47.5% + 4% gap = 99%).
	   Adding our own margins on top of the row's gap is what pushed the 2nd card
	   past 100% and stacked them 1-up. */
	body.ivmedical-site .et-l--post .et_flex_row {
		flex-wrap: wrap !important;
		column-gap: 4% !important;
		row-gap: 28px !important;
	}
	body.ivmedical-site .et-l--post .et_pb_column.iv-card,
	body.ivmedical-site .et-l--post .et_pb_column.iv-service-card,
	body.ivmedical-site .et-l--post .et_pb_column.iv-stat-card,
	body.ivmedical-site .et-l--post .et_pb_column.iv-team-card,
	body.ivmedical-site .et-l--post .et_pb_column.iv-testimonial-card {
		flex: 0 0 47.5% !important;
		max-width: 47.5% !important;
		width: 47.5% !important;
		margin: 0 !important;
	}
}
@media (max-width: 767px) {
	body.ivmedical-site .et-l--post .et_pb_column.iv-card,
	body.ivmedical-site .et-l--post .et_pb_column.iv-service-card,
	body.ivmedical-site .et-l--post .et_pb_column.iv-stat-card,
	body.ivmedical-site .et-l--post .et_pb_column.iv-team-card,
	body.ivmedical-site .et-l--post .et_pb_column.iv-testimonial-card {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		margin: 0 !important;
	}
}

/* =========================================================================
   § Scrolling "works alongside your tools" marquee + richer icons
   ========================================================================= */

/* Marquee: two identical item sets in .iv-marquee__track; translateX(-50%)
   scrolls exactly one set for a seamless loop. Each item uses margin-right (not
   flex gap) so -50% lands perfectly. Edges fade via a mask; hover pauses;
   reduced-motion stops the animation and wraps the chips into a static grid. */
body.ivmedical-site .iv-marquee-band { padding: 6px 0; }
body.ivmedical-site .iv-marquee {
	position: relative;
	display: flex;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
body.ivmedical-site .iv-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	flex-shrink: 0;
	animation: iv-marquee-scroll 42s linear infinite;
	will-change: transform;
}
body.ivmedical-site .iv-marquee:hover .iv-marquee__track { animation-play-state: paused; }
body.ivmedical-site .iv-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	margin-right: 18px;
	padding: 12px 22px;
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-pill);
	background: var(--iv-white);
	box-shadow: var(--iv-shadow-sm);
	color: var(--iv-blue);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: -0.01em;
}
body.ivmedical-site .iv-marquee__item svg { width: 22px; height: 22px; color: var(--iv-orange); flex-shrink: 0; }
@keyframes iv-marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	body.ivmedical-site .iv-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
	body.ivmedical-site .iv-marquee {
		-webkit-mask-image: none; mask-image: none;
	}
	body.ivmedical-site .iv-marquee__item { margin-bottom: 12px; }
}

/* Richer icon bubbles: subtle gradient + inner ring, and a playful lift when the
   parent card is hovered. Applies site-wide to every existing .iv-icon-bubble. */
body.ivmedical-site .iv-icon-bubble {
	background: linear-gradient(135deg, var(--iv-orange-soft), rgba(9, 24, 93, 0.05));
	box-shadow: inset 0 0 0 1px rgba(248, 115, 3, 0.18);
	transition: transform 200ms ease, box-shadow 200ms ease;
}
body.ivmedical-site .iv-service-card:hover .iv-icon-bubble,
body.ivmedical-site .iv-card:hover .iv-icon-bubble {
	transform: translateY(-3px) rotate(-4deg);
	box-shadow: inset 0 0 0 1px rgba(248, 115, 3, 0.32), var(--iv-shadow-sm);
}

/* ---------------------------------------------------------------------------
   CARD ANIMATION (v1.0.10 — varied per section + trigger-based reveal w/ delay)
   Hover lift (all card types) + a scroll-in REVEAL whose motion differs by
   section/card so the page never repeats one identical effect. Signatures:
     • .iv-service-card      → tilt-rise        • .iv-stat-card  → zoom / pop
     • .iv-team-card         → slide-in-left     • .iv-testimonial-card → slide-in-right
     • generic .iv-card      → varies by the SECTION BACKGROUND it sits in:
                               white = slide-left, soft-blue = zoom,
                               blue = slide-right, warm-gray = rise.
   The reveal is TRIGGER-based (IntersectionObserver in ivmedical-custom.js adds
   `.iv-inview`), NOT scroll-scrubbed: it plays on its own ~640ms timeline after a
   ~300ms delay (staggered per card via --iv-reveal-delay) once a card is meaningfully
   in view — so the effect is watchable. This replaced the old `animation-timeline:
   view()` scrub, which fired the instant a card touched the viewport edge (owner
   couldn't see it) and did nothing in Safari. JS adds `.iv-pre` ONLY to cards that
   START below the fold, so above-the-fold cards never hide (no flash) and nothing is
   stuck hidden if JS is off / errors / reduced-motion (fail-open). Each reveal
   animates opacity + the INDIVIDUAL translate/scale/rotate props (never `transform`)
   so it composes with the hover `transform`. Gated: prefers-reduced-motion:
   no-preference.
--------------------------------------------------------------------------- */

/* 1. Hover lift — every card type */
body.ivmedical-site .iv-card,
body.ivmedical-site .iv-service-card,
body.ivmedical-site .iv-stat-card,
body.ivmedical-site .iv-team-card,
body.ivmedical-site .iv-testimonial-card {
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

body.ivmedical-site .iv-card:hover,
body.ivmedical-site .iv-service-card:hover,
body.ivmedical-site .iv-stat-card:hover,
body.ivmedical-site .iv-team-card:hover,
body.ivmedical-site .iv-testimonial-card:hover,
body.ivmedical-site .iv-card:focus-within,
body.ivmedical-site .iv-service-card:focus-within,
body.ivmedical-site .iv-stat-card:focus-within,
body.ivmedical-site .iv-team-card:focus-within,
body.ivmedical-site .iv-testimonial-card:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--iv-shadow-lg);
	border-color: rgba(248, 115, 3, 0.35);
}

/* 2. Trigger-based scroll reveal. ivmedical-custom.js adds `.iv-pre` to cards that
   START below the fold, then `.iv-inview` when each enters view → a time-based
   animation plays (~640ms) after a delay (--iv-reveal-delay, staggered per card),
   so the effect is watchable instead of scroll-scrubbed. Above-fold cards are never
   prepped (no flash); if JS is off / errors / reduced-motion, nothing hides. */
@media (prefers-reduced-motion: no-preference) {
	/* Pre-reveal: hidden + offset, with NO transition — so JS adding `.iv-pre` (which
	   only ever happens to cards below the fold) is an INSTANT hide, never a fade-out.
	   The transition lives on `.iv-inview` below and fires when that class is added. */
	body.ivmedical-site .iv-pre {
		opacity: 0;
		will-change: opacity, translate, scale;
	}

	/* Motion varies by card type … (opacity + INDIVIDUAL translate/scale/rotate,
	   never `transform`, so it composes with the hover `transform`) */
	body.ivmedical-site .iv-pre.iv-service-card     { translate: 0 34px; rotate: -2.5deg; }
	body.ivmedical-site .iv-pre.iv-stat-card        { scale: 0.9; }
	body.ivmedical-site .iv-pre.iv-team-card        { translate: -48px 0; }
	body.ivmedical-site .iv-pre.iv-testimonial-card { translate: 48px 0; }
	body.ivmedical-site .iv-pre.iv-card             { translate: 0 34px; }

	/* … and, for generic .iv-card, by the SECTION BACKGROUND it sits in */
	body.ivmedical-site .iv-bg-white     .iv-pre.iv-card { translate: -48px 0; }
	body.ivmedical-site .iv-bg-soft-blue .iv-pre.iv-card { translate: 0 0; scale: 0.9; }
	body.ivmedical-site .iv-bg-blue      .iv-pre.iv-card { translate: 48px 0; }
	body.ivmedical-site .iv-bg-warm-gray .iv-pre.iv-card { translate: 0 34px; }

	/* Revealed. The transition is defined HERE (fires on the .iv-inview add — verified)
	   so the reveal animates while the hidden state stays instant. Reveal props carry
	   --iv-reveal-delay (per-card stagger); transform/shadow/border stay instant so the
	   hover lift is unaffected. !important beats the more-specific per-section offsets. */
	body.ivmedical-site .iv-pre.iv-inview {
		opacity: 1 !important;
		translate: 0 0 !important;
		scale: 1 !important;
		rotate: 0deg !important;
		transition:
			opacity   640ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--iv-reveal-delay, 300ms),
			translate 640ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--iv-reveal-delay, 300ms),
			scale     640ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--iv-reveal-delay, 300ms),
			rotate    640ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--iv-reveal-delay, 300ms),
			transform 220ms ease,
			box-shadow 220ms ease,
			border-color 220ms ease;
	}
}