:root {
	/* Retuned 2026-07-10 to match Lisa's homepage mockup: deep near-black navy
	   (was a brighter royal #09185D) + a redder brand orange (was amber #F87303). */
	--iv-blue: #0A1B42;
	--iv-orange: #F4722E;
	/* Same hue, deeper — for SMALL orange text on LIGHT backgrounds. The brand orange
	   is 2.88:1 on white (2.66 on soft-blue), far under WCAG AA's 4.5:1 for body-size
	   text; this shade is 5.38 on white / 4.97 soft-blue / 5.02 warm-gray. On navy the
	   brand orange itself passes (5.84), so dark sections keep --iv-orange. */
	--iv-orange-deep: #B34A10;
	--iv-white: #FFFFFF;
	--iv-soft-blue: #F3F6FC;
	--iv-warm-gray: #F7F7F5;
	--iv-text: #1F2933;
	--iv-muted: #5F6B7A;
	--iv-border: rgba(10, 27, 66, 0.14);
	--iv-orange-soft: rgba(244, 114, 46, 0.10);
	--iv-blue-soft: rgba(10, 27, 66, 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 {
	/* Deep near-black navy to match the mockup Hero (was a bright royal-blue
	   gradient with a #102574 mid-stop that read as "too heavy"). */
	background:
		radial-gradient(circle at 80% 24%, rgba(244, 114, 46, 0.10), transparent 28%),
		linear-gradient(158deg, #06162F 0%, #01112A 55%, #000B1F 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-eyebrow is applied to a Divi TEXT MODULE, so the label itself is the inner
   <p>, which Divi's text preset paints in the body grey (#5F6B7A, 16px) with
   !important — the orange/13px/uppercase above only ever reached the wrapper and
   its bar, and every eyebrow on the site rendered as grey body text (3.38:1 on the
   navy heroes). Make the <p> inherit the eyebrow style (0,3,1 + !important beats
   the preset). Colour per background: brand orange on navy (5.84:1), deep orange on
   the light sections where the brand orange is only 2.7-2.9:1. */
body.ivmedical-site .iv-eyebrow .et_pb_text_inner,
body.ivmedical-site .iv-eyebrow .et_pb_text_inner p,
body.ivmedical-site .iv-eyebrow p {
	/* Explicit values, not `inherit`: Divi also styles .et_pb_text_inner itself
	   (colour + 16px), so `inherit` on the <p> picked THAT up, not the wrapper. */
	color: var(--iv-orange) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	margin: 0 !important;
	padding: 0 !important;
}
body.ivmedical-site .iv-bg-white .iv-eyebrow,
body.ivmedical-site .iv-bg-soft-blue .iv-eyebrow,
body.ivmedical-site .iv-bg-warm-gray .iv-eyebrow,
body.ivmedical-site .iv-bg-white .iv-eyebrow .et_pb_text_inner,
body.ivmedical-site .iv-bg-soft-blue .iv-eyebrow .et_pb_text_inner,
body.ivmedical-site .iv-bg-warm-gray .iv-eyebrow .et_pb_text_inner,
body.ivmedical-site .iv-bg-white .iv-eyebrow p,
body.ivmedical-site .iv-bg-soft-blue .iv-eyebrow p,
body.ivmedical-site .iv-bg-warm-gray .iv-eyebrow p {
	color: var(--iv-orange-deep) !important;
}

.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(244, 114, 46, 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-blue) !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(244, 114, 46, 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-blue) !important;
	box-shadow: 0 16px 36px rgba(244, 114, 46, 0.32);
}

/* Primary button text is NAVY on the orange fill (owner decision 2026-09-06):
   white-on-#F4722E is 2.88:1, navy-on-#F4722E is 5.84:1 (AA), and the brand fill
   stays untouched. Divi's default button preset forces `color:#FFF !important`
   via `body #page-container .et_pb_section .preset--module--divi-button--default`
   (1,2,1), which silently out-ranked the .iv-btn-primary colour above (it was
   white too, so nobody saw the loss). This 1,3,0 selector actually wins. Covers
   the Theme Builder header/footer buttons too (they sit inside #page-container). */
#page-container .et_pb_section .et_pb_button.iv-btn-primary,
#page-container .et_pb_section .et_pb_button.iv-btn-primary:hover,
#page-container .et_pb_section .et_pb_button.iv-btn-primary:focus {
	color: var(--iv-blue) !important;
}

.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-deep) !important; /* brand orange is 2.7:1 on these bgs */
}

/* 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(244, 114, 46, 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(244, 114, 46, 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-deep) !important; /* 13px on the white header bar */
}

/* Desktop nav on ONE line. Divi's menu <ul> is flex-wrap:wrap inside a menu column
   Divi sizes to ~380px; the six 14px/800 items (the first is the 147px-wide
   "IV Medical | Home") need ~402px, so Testimonials + Contact wrapped to a 2nd line.
   Fix: never wrap, trim the item font one step and use a compact fixed gap in place
   of Divi's 22px per-item padding. Measured on staging @1920: all items on one row,
   menu starts ~200px right of the logo (no overlap). Desktop only — ≤980 the menu
   is the hamburger. */
@media (min-width: 981px) {
	.iv-header .et_pb_menu__menu > nav > ul {
		flex-wrap: nowrap !important;
	}
	.iv-header .et_pb_menu__menu > nav > ul > li {
		margin-left: 16px !important;
		padding: 0 !important;
	}
	.iv-header .et_pb_menu__menu > nav > ul > li > a {
		font-size: 13px !important;
		letter-spacing: 0 !important;
		white-space: nowrap !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; }
}

/* Footer: deep navy to match the mockup. The section carries the .iv-footer
   class, but Divi's per-section/module color settings win over utility CSS, so
   these are forced with !important. Logo uses the white variant; the orange CTA
   button is left intact. */
.et-l--footer .et_builder_inner_content .iv-footer.et_pb_section.et_flex_section {
	background-color: #081A3C !important;
	background-image: none !important;
	color: var(--iv-white);
}
.et-l--footer .iv-footer .et_pb_heading_container h1,
.et-l--footer .iv-footer .et_pb_heading_container h2,
.et-l--footer .iv-footer .et_pb_heading_container h3,
.et-l--footer .iv-footer .et_pb_heading_container h4,
.et-l--footer .iv-footer li, .et-l--footer .iv-footer strong {
	color: #FFFFFF !important;
}
.iv-footer .et_pb_text, .iv-footer .et_pb_text p, .iv-footer p {
	color: rgba(255, 255, 255, 0.74) !important;
}
.iv-footer a { color: rgba(255, 255, 255, 0.88) !important; }
.iv-footer a:hover, .iv-footer a:focus { color: var(--iv-orange) !important; }
/* Keep the orange CTA button readable (white label on orange). */
.iv-footer .et_pb_button, .iv-footer .et_pb_button:hover { color: #FFFFFF !important; }

@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;
}

/* Paragraphs in navy sections. `.iv-bg-blue p` (0,1,1) intends white text, but
   Divi's text preset paints `.et_pb_text_inner p` in the body grey (#5F6B7A) with
   !important, so every hero sub-line and the legal-page hero copy rendered grey on
   navy (3.38:1 — fails AA). Enforce the intent at 0,3,1 + !important. Card
   descendants are excluded so the dark-text-in-white-card rules below still apply. */
body.ivmedical-site .iv-bg-blue .et_pb_text_inner p:not(.iv-card *, .iv-service-card *, .iv-stat-card *, .iv-team-card *, .iv-testimonial-card *, .iv-tm *, .iv-eyebrow *, .iv-results *, .iv-cycle *, .iv-launch *) {
	color: rgba(255, 255, 255, 0.86) !important;
}

/* 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(244, 114, 46, 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(244, 114, 46, 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(244, 114, 46, 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; }
	body.ivmedical-site .iv-pre.iv-tm               { translate: 0 34px; scale: 0.96; } /* leadership grid cards */
	body.ivmedical-site .iv-pre.iv-res-card         { translate: 0 30px; scale: 0.96; } /* results metric cards */

	/* … 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;
	}
}

/* ==========================================================================
   ANIMATED PROCESS-STYLE CARDS  (added 2026-07-10)
   Sections: "A Foundation Built on Clarity and Support"  (.iv-stat-card)
             "Services Designed to Support the Full Revenue Cycle" (.iv-service-card)
   Inspired by Fellow Health Partners' animated numbered rings + the
   "Every Step. Every Dollar." card style. Company navy + orange, CSS only.
   ========================================================================== */

@keyframes iv-ring-spin { to { transform: rotate(360deg); } }

/* process-step auto numbering (independent counters per section) */
.et_pb_section:has(.iv-stat-card)    { counter-reset: iv-foundation; }
.iv-stat-card                        { counter-increment: iv-foundation; }
.et_pb_section:has(.iv-service-card) { counter-reset: iv-service; }
.iv-service-card                     { counter-increment: iv-service; }

/* let rings / badges sit outside the card edge, and give a springier hover */
.iv-stat-card, .iv-service-card {
	overflow: visible;
	position: relative;
	transition: transform .42s cubic-bezier(.2,.75,.3,1),
	            box-shadow .42s ease, border-color .3s ease;
}
.iv-stat-card:hover, .iv-service-card:hover,
.iv-stat-card:focus-within, .iv-service-card:focus-within {
	transform: translateY(-10px);
	border-color: rgba(244, 114, 46,.45) !important;
	box-shadow: inset 0 3px 0 0 var(--iv-orange),
	            0 26px 46px -20px rgba(10,27,66,.5) !important;
}

/* ---------- FOUNDATION: numbered medallion + rotating dashed ring ---------- */
.iv-stat-card { padding-top: 36px; }
.iv-stat-card::before {                 /* static number medallion */
	content: counter(iv-foundation, decimal-leading-zero);
	align-self: center;
	width: 58px; height: 58px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--iv-blue);
	color: #fff; font: 800 21px/1 Inter, sans-serif;
	margin-bottom: 20px;
	position: relative; z-index: 1;
	transition: background .35s ease, transform .35s ease;
}
.iv-stat-card::after {                   /* rotating dashed ring */
	content: ""; position: absolute;
	top: 28px; left: 50%; margin-left: -37px;
	width: 74px; height: 74px; border-radius: 50%;
	border: 2px dashed rgba(244, 114, 46,.55);
	animation: iv-ring-spin 13s linear infinite;
	z-index: 0; pointer-events: none;
}
.iv-stat-card:hover::before { background: var(--iv-orange); transform: scale(1.07); }
.iv-stat-card:hover::after  { border-style: solid; border-color: var(--iv-orange); }

/* ---------- SERVICES: rotating ring + number badge on the icon tile ---------- */
.iv-service-card .iv-icon-bubble {
	position: relative; overflow: visible;
	transition: background .35s ease;
}
.iv-service-card .iv-icon-bubble::before {   /* rotating dashed ring around the tile */
	content: ""; position: absolute; top: -13px; left: -13px;
	width: 84px; height: 84px; border-radius: 50%;
	border: 2px dashed rgba(244, 114, 46,.55);
	animation: iv-ring-spin 13s linear infinite;
	z-index: 0; pointer-events: none;
}
.iv-service-card .iv-icon-bubble::after {    /* static number badge */
	content: counter(iv-service);
	position: absolute; top: -10px; right: -10px;
	width: 25px; height: 25px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--iv-blue); color: #fff;
	font: 800 12px/1 Inter, sans-serif;
	border: 2px solid #fff; z-index: 3;
}
.iv-service-card .iv-icon-bubble svg { position: relative; z-index: 1; transition: stroke .3s ease, color .3s ease; }
.iv-service-card:hover .iv-icon-bubble { background: var(--iv-orange) !important; }
.iv-service-card:hover .iv-icon-bubble svg,
.iv-service-card:hover .iv-icon-bubble svg * { stroke: #fff !important; color: #fff !important; }
.iv-service-card:hover .iv-icon-bubble::before { border-style: solid; border-color: var(--iv-orange); }

@media (prefers-reduced-motion: reduce) {
	.iv-stat-card::after,
	.iv-service-card .iv-icon-bubble::before { animation: none; }
}

/* ==========================================================================
   HOMEPAGE HERO — 2-surgeon image (added 2026-09-04)
   Surgeons photo as the section background (right), navy gradient over the left
   for legible text; the old stats card is emptied so the image reads through.
   Only targets the hero (.iv-hero.iv-bg-blue), not other .iv-bg-blue sections.
   ========================================================================== */
.iv-hero.iv-bg-blue {
	background: #05142E;
	min-height: 520px;
}

/* PARALLAX (added 2026-09-06). The photo lives on an absolutely-positioned
   ::before layer that is 45% TALLER than the hero (overflowing above it, clipped by
   the hero's overflow:hidden) and is translated DOWN by 0.3 × scrollY from
   ivmedical-custom.js (--iv-plx) — so the image climbs at 70% of page speed while
   the copy scrolls normally. Implemented with a transform, not
   background-attachment:fixed, which iOS Safari ignores and which breaks under any
   ancestor transform/backdrop-filter. The legibility gradient rides ON the layer:
   it is horizontal (uniform top-to-bottom), so shifting the layer vertically never
   changes what the text sits on. Headroom: 45% of 520px = 234px ≥ 0.3 × (header +
   hero height) ≈ 210px, so the top edge is never exposed while the hero is visible.
   Rows are lifted above the layer; the orange ::after glow already paints above it
   (later pseudo). prefers-reduced-motion: the JS never sets --iv-plx → static. */
.iv-hero.iv-bg-blue::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -45%;
	height: 145%;
	background:
		linear-gradient(90deg, rgba(5,20,46,.93) 0%, rgba(5,20,46,.80) 33%,
		                rgba(5,20,46,.52) 55%, rgba(5,20,46,.24) 77%, rgba(5,20,46,.05) 100%),
		url("/wp-content/uploads/2026/09/iv-hero-surgeons-opt.jpg")
		    center right / cover no-repeat;
	transform: translate3d(0, var(--iv-plx, 0px), 0);
	will-change: transform;
	pointer-events: none;
	z-index: 0;
}
.iv-hero.iv-bg-blue > .et_pb_row { position: relative; z-index: 1; }

.iv-hero .iv-hero-card {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.iv-hero .iv-hero-card > * { display: none !important; }

@media (max-width: 980px) {
	.iv-hero.iv-bg-blue { min-height: 440px; }
	/* Text is centred over the photo on small screens, so the overlay is a flat
	   (vertically uniform) navy tint — still safe to shift with the parallax. */
	.iv-hero.iv-bg-blue::before {
		background:
			linear-gradient(rgba(5,20,46,.88), rgba(5,20,46,.88)),
			url("/wp-content/uploads/2026/09/iv-hero-surgeons-opt.jpg")
			    center / cover no-repeat;
	}
	.iv-hero .iv-hero-card { display: none !important; }
}

/* ==========================================================================
   INTERACTIVE PROCESS EXPLORER (.iv-proc) + card CONNECTORS (added 2026-09-04)
   Hover/click a step -> it activates and the shared detail panel swaps to it.
   "Every Step. Every Dollar." styling, company navy + warm orange.
   ========================================================================== */
.iv-proc { max-width: 1120px; margin: 8px auto 0; }

/* ---- step track ---- */
.iv-proc-track {
	display: flex; align-items: stretch; justify-content: center;
	gap: 6px; flex-wrap: wrap;
}
.iv-proc-step {
	flex: 1 1 0; min-width: 150px; max-width: 230px;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 12px; padding: 22px 16px 20px;
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-top: 3px solid transparent;
	border-radius: var(--iv-radius-md);
	box-shadow: var(--iv-shadow-sm);
	cursor: pointer; position: relative;
	transition: transform .35s cubic-bezier(.2,.75,.3,1), box-shadow .35s ease, border-color .3s ease;
	font-family: inherit;
}
.iv-proc-num {
	font: 800 13px/1 Inter, sans-serif; color: var(--iv-orange);
	letter-spacing: .04em;
}
.iv-proc-ico {
	position: relative; width: 56px; height: 56px; border-radius: 16px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--iv-orange-soft); color: var(--iv-orange);
	transition: background .35s ease, color .35s ease;
}
.iv-proc-ico::before {
	content: ""; position: absolute; top: -11px; left: -11px;
	width: 78px; height: 78px; border-radius: 50%;
	border: 2px dashed rgba(244,114,46,.5);
	animation: iv-ring-spin 13s linear infinite;
}
.iv-proc-ico svg { width: 28px; height: 28px; position: relative; z-index: 1; stroke: currentColor; }
.iv-proc-label { font: 700 15px/1.25 Inter, sans-serif; color: var(--iv-blue); }
.iv-proc-step.is-active {
	border-color: var(--iv-orange); border-top-color: var(--iv-orange);
	box-shadow: 0 18px 34px -18px rgba(10,27,66,.5);
	transform: translateY(-4px);
}
.iv-proc-step.is-active .iv-proc-ico { background: var(--iv-orange); color: #fff; }
.iv-proc-step.is-active .iv-proc-ico::before { border-style: solid; border-color: var(--iv-orange); }

/* connector chevron between steps */
.iv-proc-conn {
	flex: 0 0 auto; align-self: center;
	display: flex; align-items: center; justify-content: center;
	min-width: 22px; color: rgba(244,114,46,.85);
}
.iv-proc-conn::before { content: "\203A"; font: 700 30px/1 Inter, system-ui, sans-serif; }

/* ---- detail panel ---- */
.iv-proc-panel {
	position: relative; margin-top: 26px;
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-left: 4px solid var(--iv-orange);
	border-radius: var(--iv-radius-md);
	box-shadow: var(--iv-shadow-sm);
	padding: 34px 38px;
}
.iv-proc-detail { display: none; grid-template-columns: 1.1fr 1fr; gap: 30px 44px; align-items: start; }
.iv-proc-detail.is-active { display: grid; animation: iv-proc-fade .4s ease; }
@keyframes iv-proc-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.iv-proc-detail-num { display: inline-block; font: 800 12px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--iv-orange-deep); margin-bottom: 10px; }
.iv-proc-detail-main h3 { margin: 0 0 10px; color: var(--iv-blue); font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; line-height: 1.15; }
.iv-proc-detail-main p { margin: 0; color: var(--iv-muted); font-size: 1rem; line-height: 1.6; }
.iv-proc-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.iv-proc-feat { display: flex; align-items: flex-start; gap: 10px; color: var(--iv-text); font-size: .95rem; line-height: 1.4; font-weight: 600; }
.iv-proc-feat-ico {
	flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--iv-orange-soft); color: var(--iv-orange);
}

@media (max-width: 980px) {
	.iv-proc-conn { display: none; }
	.iv-proc-step { flex: 1 1 40%; min-width: 130px; }
	.iv-proc-detail.is-active { grid-template-columns: 1fr; gap: 22px; }
	.iv-proc-feats { grid-template-columns: 1fr 1fr; }
	.iv-proc-panel { padding: 26px 22px; }
}
@media (max-width: 560px) {
	.iv-proc-feats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.iv-proc-ico::before { animation: none; }
	.iv-proc-detail.is-active { animation: none; }
}

/* ---- connector chevrons between Foundation cards (desktop 4-across only) ---- */
.iv-connector {
	position: absolute; top: 53px; right: -22px; width: 24px; height: 24px;
	display: flex; align-items: center; justify-content: center;
	color: var(--iv-orange); z-index: 4; pointer-events: none;
}
.iv-connector-chev { display: flex; }
.iv-connector svg { width: 20px; height: 20px; }
@media (max-width: 1080px) { .iv-connector { display: none; } }

/* ==========================================================================
   LEADERSHIP & TEAM GRID  ([iv_team_grid])
   ========================================================================== */
.iv-team { --iv-tm-blue: var(--iv-blue, #0A1B42); --iv-tm-orange: var(--iv-orange, #F4722E); --iv-tm-orange-text: var(--iv-orange-deep, #B34A10); --iv-tm-muted: #5B6880; }
.iv-team-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px;
	align-items: stretch;
}
.iv-tm {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(10, 27, 66, 0.08);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(10, 27, 66, 0.08);
	transition: transform .22s ease, box-shadow .22s ease;
}
.iv-tm:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(10, 27, 66, 0.16); }

/* Photo / initials medallion */
.iv-tm-photo {
	position: relative;
	aspect-ratio: 1 / 1;
	background:
		radial-gradient(circle at 50% 38%, rgba(244,114,46,0.10), transparent 60%),
		linear-gradient(160deg, #eef3fb, #dfe8f5);
	display: flex; align-items: center; justify-content: center;
}
.iv-tm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-tm-initials {
	width: 96px; height: 96px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--iv-tm-blue); color: #fff;
	font-family: "Space Grotesk", "Inter", sans-serif;
	font-weight: 700; font-size: 30px; letter-spacing: .02em;
	box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(244,114,46,0.85), 0 10px 22px rgba(10,27,66,0.28);
}

/* Body */
.iv-tm-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.iv-tm-name { margin: 0; color: var(--iv-tm-blue); font-size: 19px; font-weight: 700; line-height: 1.2; }
.iv-tm-role {
	margin: 6px 0 10px; color: var(--iv-tm-orange-text);
	font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.iv-tm-blurb { margin: 0 0 16px; color: #4a5875; font-size: 14px; line-height: 1.55; }
.iv-tm-more {
	margin-top: auto; align-self: flex-start;
	background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--iv-tm-orange-text); font-size: 13px; font-weight: 800;
	letter-spacing: .03em; text-transform: uppercase;
	display: inline-flex; align-items: center; gap: 6px;
}
.iv-tm-more span { transition: transform .18s ease; }
.iv-tm-more:hover span, .iv-tm-more:focus span { transform: translateX(4px); }
.iv-tm-more:focus-visible { outline: 2px solid var(--iv-tm-orange); outline-offset: 3px; border-radius: 3px; }
.iv-tm-pending { margin-top: auto; color: var(--iv-tm-muted); font-size: 13px; font-style: italic; } /* was #8794ab = 3.06:1 */
.iv-tm.is-pending .iv-tm-photo { filter: none; }

/* Read-bio modal */
.iv-team-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.iv-team-modal[hidden] { display: none; }
.iv-team-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 16, 40, 0.62); backdrop-filter: blur(3px); }
.iv-team-modal-panel {
	position: relative; z-index: 1;
	width: min(680px, 100%); max-height: min(86vh, 820px); overflow-y: auto;
	background: #fff; border-radius: 18px; padding: 34px 38px 36px;
	box-shadow: 0 30px 80px rgba(5, 16, 40, 0.5);
}
.iv-team-modal-close {
	position: absolute; top: 12px; right: 14px;
	width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: #eef2f8; color: var(--iv-blue, #0A1B42);
	font-size: 26px; line-height: 1; cursor: pointer;
}
.iv-team-modal-close:hover { background: var(--iv-orange, #F4722E); color: #fff; }
.iv-tm-bio-name { margin: 0; color: var(--iv-blue, #0A1B42); font-size: 26px; font-weight: 700; padding-right: 40px; }
.iv-tm-bio-role { margin: 6px 0 18px; color: var(--iv-orange-deep, #B34A10); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.iv-team-modal-content p { color: #33405c; font-size: 15.5px; line-height: 1.72; margin: 0 0 14px; }
.iv-team-modal-content .iv-tm-beyond { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(10,27,66,0.1); color: #4a5875; font-size: 14.5px; }
.iv-team-modal-content .iv-tm-beyond span { color: var(--iv-blue, #0A1B42); font-weight: 800; }
body.iv-modal-open { overflow: hidden; }

/* Responsive */
@media (max-width: 1100px) { .iv-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .iv-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 520px)  { .iv-team-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } .iv-team-modal-panel { padding: 28px 22px 26px; } }

/* Brand colors must win over Divi text-module (.et_pb_text_inner p) paragraph styles,
   since [iv_team_grid] renders inside a Divi Text module. */
.iv-team .iv-tm-name,
.iv-team .iv-tm-bio-name { color: var(--iv-tm-blue) !important; }
.iv-team .iv-tm-role,
.iv-team .iv-tm-bio-role { color: var(--iv-tm-orange-text) !important; }
.iv-team .iv-tm-blurb { color: #4a5875 !important; font-size: 14px !important; line-height: 1.55 !important; }
.iv-team .iv-tm-more { color: var(--iv-tm-orange-text) !important; }
.iv-team .iv-tm-pending { color: var(--iv-tm-muted) !important; }
.iv-team .iv-team-modal-content p { color: #33405c !important; font-size: 15.5px !important; line-height: 1.72 !important; }
.iv-team .iv-team-modal-content .iv-tm-beyond span { color: var(--iv-tm-blue) !important; }

/* ==========================================================================
   LEADERSHIP HERO  ([iv_leadership_hero])  — inside .iv-bg-blue section
   ========================================================================== */
.iv-lead-hero {
	display: grid;
	grid-template-columns: 1.12fr 0.88fr;
	gap: 48px;
	align-items: center;
}
.iv-lead-hero-text { min-width: 0; }
.iv-lead-eyebrow {
	color: var(--iv-orange, #F4722E) !important;
	text-transform: uppercase; letter-spacing: .16em; font-weight: 800;
	font-size: 13px; margin: 0 0 16px !important;
}
.iv-lead-title {
	color: #fff !important;
	font-size: clamp(30px, 4.3vw, 47px); line-height: 1.08; font-weight: 700;
	margin: 0 0 22px !important; letter-spacing: -0.01em;
}
.iv-lead-title .iv-lead-accent { display: block; color: var(--iv-orange, #F4722E) !important; }
.iv-lead-intro {
	color: rgba(255, 255, 255, 0.82) !important;
	font-size: 17px; line-height: 1.68; margin: 0 !important; max-width: 620px;
}
.iv-lead-hero-media img {
	width: 100%; height: auto; display: block;
	aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: 16px;
	box-shadow: 0 22px 55px rgba(3, 12, 32, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.10);
}
@media (max-width: 900px) {
	.iv-lead-hero { grid-template-columns: 1fr; gap: 30px; }
	.iv-lead-hero-media { order: -1; max-width: 520px; }
	.iv-lead-intro { max-width: none; }
}

/* ==========================================================================
   TEAM CTA BAND  ([iv_team_cta])  — inside .iv-bg-blue section
   ========================================================================== */
.iv-team-cta {
	display: flex; align-items: center; justify-content: space-between;
	gap: 36px; flex-wrap: wrap;
}
.iv-team-cta-lead { display: flex; align-items: center; gap: 20px; flex: 1 1 340px; }
.iv-team-cta-icon {
	flex: 0 0 auto; width: 58px; height: 58px; border-radius: 16px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(244, 114, 46, 0.14); color: var(--iv-orange, #F4722E);
	border: 1px solid rgba(244, 114, 46, 0.4);
}
.iv-team-cta-icon svg { width: 30px; height: 30px; }
.iv-team-cta-title {
	color: #fff !important; margin: 0 !important;
	font-size: clamp(21px, 2.5vw, 29px); line-height: 1.18; font-weight: 700;
}
.iv-team-cta-title span { color: rgba(255, 255, 255, 0.92) !important; }
.iv-team-cta-action { flex: 1 1 360px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.iv-team-cta-action p { color: rgba(255, 255, 255, 0.78) !important; margin: 0 !important; font-size: 15px; line-height: 1.62; }
.iv-team-cta-btn {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--iv-orange, #F4722E); color: var(--iv-blue, #0A1B42) !important; text-decoration: none; /* navy-on-orange, like .iv-btn-primary */
	padding: 14px 28px; border-radius: 9px;
	font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
	box-shadow: 0 12px 26px rgba(244, 114, 46, 0.32);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.iv-team-cta-btn span { transition: transform .18s ease; }
.iv-team-cta-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 32px rgba(244, 114, 46, 0.44); }
.iv-team-cta-btn:hover span { transform: translateX(4px); }
@media (max-width: 720px) {
	.iv-team-cta { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* Divi tags the shortcode's Text module bg_layout_light, forcing dark headings.
   On the navy hero/CTA the H1/H2 must stay white — scope with .iv-bg-blue to win. */
.iv-bg-blue .iv-lead-hero .iv-lead-title { color: #fff !important; }
.iv-bg-blue .iv-lead-hero .iv-lead-title .iv-lead-accent { color: var(--iv-orange, #F4722E) !important; }
.iv-bg-blue .iv-team-cta .iv-team-cta-title { color: #fff !important; }
.iv-bg-blue .iv-team-cta .iv-team-cta-title span { color: rgba(255, 255, 255, 0.92) !important; }

/* ==========================================================================
   HEADER TONING-DOWN (site-wide) + white-section heading color fix
   Lighter weight on all headings; smaller H1/H2. High-specificity + !important
   to beat Divi's preset critical CSS (.preset--module--divi-*--default … hN).
   ========================================================================== */
body.ivmedical-site h1,
body.ivmedical-site h2,
body.ivmedical-site h3,
body.ivmedical-site h4 { font-weight: 600 !important; letter-spacing: -0.005em; }

body.ivmedical-site h1,
body.ivmedical-site .et_pb_text_inner h1,
body.ivmedical-site .et_pb_heading_container h1 { font-size: clamp(1.85rem, 3.3vw, 2.7rem) !important; line-height: 1.14 !important; }

body.ivmedical-site h2,
body.ivmedical-site .et_pb_text_inner h2,
body.ivmedical-site .et_pb_heading_container h2 { font-size: clamp(1.3rem, 2vw, 1.65rem) !important; line-height: 1.22 !important; }

/* Fix: a heading in a white section was assigned Divi "Soft Blue Tint" (near-white)
   and rendered invisible. White-section headings should be navy. */
body.ivmedical-site .iv-bg-white .et_pb_heading_container h1,
body.ivmedical-site .iv-bg-white .et_pb_heading_container h2,
body.ivmedical-site .iv-bg-white .et_pb_heading_container h3 { color: var(--iv-blue) !important; }

/* Keep navy-band shortcode titles white / accent orange after the weight change. */
.iv-bg-blue .iv-lead-hero .iv-lead-title { color: #fff !important; }
.iv-bg-blue .iv-lead-hero .iv-lead-title .iv-lead-accent { color: var(--iv-orange, #F4722E) !important; }
.iv-bg-blue .iv-team-cta .iv-team-cta-title { color: #fff !important; }

/* The homepage-hero surgeon background (.iv-hero.iv-bg-blue) also matched the
   Leadership hero, doubling the image. The Leadership hero supplies its own
   surgeon photo (.iv-lead-hero-media), so keep this section clean navy. */
.iv-hero.iv-bg-blue:has(.iv-lead-hero) {
	background:
		radial-gradient(circle at 82% 22%, rgba(244, 114, 46, 0.12), transparent 34%),
		linear-gradient(158deg, #06162F 0%, #01112A 55%, #000B1F 100%) !important;
}
.iv-hero.iv-bg-blue:has(.iv-lead-hero)::before { content: none; } /* no parallax photo layer here */


/* ==========================================================================
   CONTENT SECTIONS from Lisa's 2026-09-06 brief (inc/iv-content.php):
   [iv_results] [iv_cycle] [iv_specialties] [iv_launch]
   All render inside a Divi TEXT module, so text colours/sizes carry
   body.ivmedical-site + !important to beat Divi's .et_pb_text_inner preset.
   ========================================================================== */

/* Shared inline eyebrow (plain <p> emitted by the shortcodes) */
body.ivmedical-site .et_pb_text_inner .iv-eyebrow-inline {
	display: inline-flex !important; align-items: center; gap: 10px;
	color: var(--iv-orange) !important; font-size: 13px !important; font-weight: 800 !important;
	line-height: 1.2 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important;
	margin: 0 0 14px !important; padding: 0 !important;
}
body.ivmedical-site .et_pb_text_inner .iv-eyebrow-inline::before {
	content: ""; display: inline-block; width: 34px; height: 3px; background: var(--iv-orange); border-radius: 999px;
}
body.ivmedical-site .iv-bg-white .et_pb_text_inner .iv-eyebrow-inline,
body.ivmedical-site .iv-bg-soft-blue .et_pb_text_inner .iv-eyebrow-inline,
body.ivmedical-site .iv-bg-warm-gray .et_pb_text_inner .iv-eyebrow-inline { color: var(--iv-orange-deep) !important; }

/* ---- [iv_results] — navy band, glass cards, count-up numbers ---- */
.iv-results { max-width: 1140px; margin: 0 auto; }
.iv-results-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
body.ivmedical-site .et_pb_text_inner .iv-results-title { color: #fff !important; font-size: clamp(1.5rem, 2.4vw, 2rem) !important; font-weight: 600 !important; line-height: 1.2 !important; margin: 0 0 12px !important; padding: 0 !important; }
body.ivmedical-site .et_pb_text_inner .iv-results-intro { color: rgba(255,255,255,0.78) !important; font-size: 16px !important; line-height: 1.6 !important; margin: 0 !important; padding: 0 !important; }
.iv-results-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.iv-res-card {
	position: relative; padding: 26px 26px 24px; border-radius: 16px;
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
	box-shadow: 0 18px 40px rgba(0, 8, 30, 0.35);
	transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.iv-res-card:hover { transform: translateY(-4px); border-color: rgba(244,114,46,0.55); background: rgba(255,255,255,0.07); }
.iv-res-icon { display: inline-flex; width: 40px; height: 40px; border-radius: 12px; align-items: center; justify-content: center; color: var(--iv-orange); background: rgba(244,114,46,0.14); margin-bottom: 14px; }
.iv-res-icon svg { width: 22px; height: 22px; }
body.ivmedical-site .et_pb_text_inner .iv-res-value { color: #fff !important; font-size: clamp(2.2rem, 3.6vw, 2.9rem) !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -0.02em; margin: 0 0 8px !important; padding: 0 !important; font-variant-numeric: tabular-nums; }
body.ivmedical-site .et_pb_text_inner .iv-res-value .iv-res-affix { font-size: 0.55em; font-weight: 700; color: var(--iv-orange); vertical-align: baseline; }
body.ivmedical-site .et_pb_text_inner .iv-res-value-text { font-size: 1.55rem !important; color: var(--iv-orange) !important; padding-top: 6px !important; }
body.ivmedical-site .et_pb_text_inner .iv-res-label { color: #fff !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.25 !important; margin: 0 0 8px !important; padding: 0 !important; }
body.ivmedical-site .et_pb_text_inner .iv-res-note { color: rgba(255,255,255,0.74) !important; font-size: 14.5px !important; line-height: 1.55 !important; margin: 0 !important; padding: 0 !important; }
@media (max-width: 980px) { .iv-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 600px) { .iv-results-grid { grid-template-columns: 1fr; } }

/* ---- [iv_cycle] — navy section, ring of stage nodes + detail panel ---- */
.iv-cycle { max-width: 1140px; margin: 0 auto; }
.iv-cycle-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
body.ivmedical-site .et_pb_text_inner .iv-cycle-title { color: #fff !important; font-size: clamp(1.5rem, 2.4vw, 2rem) !important; font-weight: 600 !important; line-height: 1.2 !important; margin: 0 0 12px !important; padding: 0 !important; }
body.ivmedical-site .et_pb_text_inner .iv-cycle-intro { color: rgba(255,255,255,0.78) !important; font-size: 16px !important; line-height: 1.6 !important; margin: 0 !important; padding: 0 !important; }
.iv-cycle-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.iv-cycle-ring { --size: 480px; --node: 68px; position: relative; width: var(--size); height: var(--size); margin: 0 auto; }
.iv-cycle-track {
	position: absolute; inset: calc(var(--node) / 2); border-radius: 50%;
	border: 2px dashed rgba(255,255,255,0.22);
}
.iv-cycle-track::before {
	/* slowly orbiting orange arc = "the cycle keeps turning" */
	content: ""; position: absolute; inset: -3px; border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0 78%, rgba(244,114,46,0.0) 78%, var(--iv-orange) 92%, transparent 100%);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	        mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	animation: iv-cycle-orbit 14s linear infinite;
}
@keyframes iv-cycle-orbit { to { transform: rotate(360deg); } }
.iv-cycle-center {
	position: absolute; top: 50%; left: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
	border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	background: radial-gradient(circle at 50% 35%, rgba(244,114,46,0.18), rgba(5,20,46,0.0) 70%);
}
.iv-cycle-center-num { color: #fff; font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.iv-cycle-center-num small { font-size: 0.5em; color: var(--iv-orange); font-weight: 700; }
.iv-cycle-center-label { color: rgba(255,255,255,0.72); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; margin-top: 8px; max-width: 150px; line-height: 1.3; }
.iv-cycle-node {
	--angle: calc(var(--i) * (360deg / var(--n)) - 90deg);
	position: absolute; top: 50%; left: 50%; width: var(--node); height: var(--node); margin: calc(var(--node) / -2) 0 0 calc(var(--node) / -2);
	transform: rotate(var(--angle)) translate(calc(var(--size) / 2 - var(--node) / 2)) rotate(calc(var(--angle) * -1));
	border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); background: #0B1D48; color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center; padding: 0;
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.iv-cycle-node-icon { display: inline-flex; }
.iv-cycle-node-icon svg { width: 26px; height: 26px; }
.iv-cycle-node-num {
	position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--iv-orange); color: var(--iv-blue); font-size: 12px; font-weight: 800; line-height: 24px; text-align: center;
}
.iv-cycle-node-label {
	position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
	white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.72);
}
.iv-cycle-node:hover, .iv-cycle-node:focus-visible { border-color: var(--iv-orange); box-shadow: 0 0 0 6px rgba(244,114,46,0.18); outline: none; }
.iv-cycle-node.is-active { background: var(--iv-orange); border-color: var(--iv-orange); color: var(--iv-blue); box-shadow: 0 0 0 8px rgba(244,114,46,0.2); }
.iv-cycle-node.is-active .iv-cycle-node-num { background: #fff; }
.iv-cycle-node.is-active .iv-cycle-node-label { color: #fff; }
/* All 7 panels are stacked in ONE grid cell, so the panel box is always the height
   of the TALLEST stage and the prev/next buttons (margin-top:auto) sit in exactly
   the same place for every stage. Inactive panels stay in the layout but invisible
   ([hidden] would be display:none and drop out of the height calculation). */
.iv-cycle-panels { position: relative; display: grid; }
.iv-cycle-panel {
	grid-area: 1 / 1; display: flex; flex-direction: column;
	padding: 32px 34px; border-radius: 18px;
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
	box-shadow: 0 24px 60px rgba(0, 8, 30, 0.4);
}
.iv-cycle-panel[hidden] { display: flex; visibility: hidden; opacity: 0; pointer-events: none; }
.iv-cycle-panel-nav { margin-top: auto; padding-top: 6px; }
.iv-cycle-panel.is-active { animation: iv-cycle-in .32s ease both; }
@keyframes iv-cycle-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.iv-cycle-panel-step { display: inline-block; color: var(--iv-orange); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px; }
body.ivmedical-site .et_pb_text_inner .iv-cycle-panel-title { color: #fff !important; font-size: clamp(1.3rem, 2vw, 1.65rem) !important; font-weight: 600 !important; line-height: 1.2 !important; margin: 0 0 6px !important; padding: 0 !important; }
body.ivmedical-site .et_pb_text_inner .iv-cycle-panel-tag { color: var(--iv-orange) !important; font-style: italic; font-size: 16px !important; margin: 0 0 14px !important; padding: 0 !important; }
body.ivmedical-site .et_pb_text_inner .iv-cycle-panel-body { color: rgba(255,255,255,0.82) !important; font-size: 15.5px !important; line-height: 1.65 !important; margin: 0 0 16px !important; padding: 0 !important; }
body.ivmedical-site .et_pb_text_inner .iv-cycle-panel-metric { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 18px !important; padding: 14px 16px !important; border-radius: 12px; background: rgba(244,114,46,0.12); border: 1px solid rgba(244,114,46,0.3); color: rgba(255,255,255,0.8) !important; font-size: 14px !important; }
body.ivmedical-site .et_pb_text_inner .iv-cycle-panel-metric strong { color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1; }
.iv-cycle-panel-nav { display: flex; gap: 10px; justify-content: space-between; }
.iv-cycle-prev { min-width: 52px; justify-content: center; }
.iv-cycle-next { min-width: 150px; text-align: center; }
.iv-cycle-prev, .iv-cycle-next {
	border: 1px solid rgba(255,255,255,0.3); background: transparent; color: #fff; cursor: pointer;
	border-radius: 999px; padding: 10px 18px; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.iv-cycle-prev:hover, .iv-cycle-next:hover, .iv-cycle-prev:focus-visible, .iv-cycle-next:focus-visible { background: var(--iv-orange); border-color: var(--iv-orange); color: var(--iv-blue); outline: none; }
@media (max-width: 1100px) { .iv-cycle-ring { --size: 400px; --node: 60px; } .iv-cycle-body { gap: 28px; } }
@media (max-width: 900px) {
	.iv-cycle-body { grid-template-columns: 1fr; }
	/* Ring becomes a stage list; the labels move inline. */
	.iv-cycle-ring { width: auto; height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
	.iv-cycle-track, .iv-cycle-center { display: none; }
	.iv-cycle-node { position: static; width: auto; height: auto; margin: 0; transform: none; border-radius: 12px; padding: 10px 12px; justify-content: flex-start; gap: 10px; }
	.iv-cycle-node-icon svg { width: 22px; height: 22px; }
	.iv-cycle-node-num { position: static; flex: 0 0 auto; }
	.iv-cycle-node-label { position: static; transform: none; white-space: normal; text-align: left; line-height: 1.2; }
	.iv-cycle-panel { padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce) { .iv-cycle-track::before { animation: none; } .iv-cycle-panel.is-active { animation: none; } }

/* ---- [iv_specialties] — chips ---- */
.iv-spec { max-width: 1040px; margin: 0 auto; text-align: center; }
.iv-spec-head { max-width: 680px; margin: 0 auto 28px; }
body.ivmedical-site .et_pb_text_inner .iv-spec-title { color: var(--iv-blue) !important; font-size: clamp(1.5rem, 2.4vw, 2rem) !important; font-weight: 600 !important; line-height: 1.2 !important; margin: 0 0 12px !important; padding: 0 !important; }
body.ivmedical-site .et_pb_text_inner .iv-spec-intro { color: var(--iv-muted) !important; font-size: 16px !important; line-height: 1.6 !important; margin: 0 !important; padding: 0 !important; }
body.ivmedical-site .et_pb_text_inner .iv-spec-list { list-style: none !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 !important; padding: 0 !important; }
body.ivmedical-site .et_pb_text_inner .iv-spec-chip {
	display: inline-flex; align-items: center; gap: 10px; margin: 0 !important; padding: 12px 20px !important;
	border-radius: 999px; background: #fff; border: 1px solid rgba(10,27,66,0.14); box-shadow: 0 6px 18px rgba(10,27,66,0.06);
	color: var(--iv-blue) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important;
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.ivmedical-site .et_pb_text_inner .iv-spec-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--iv-orange); flex: 0 0 auto; }
body.ivmedical-site .et_pb_text_inner .iv-spec-chip:hover { transform: translateY(-2px); border-color: var(--iv-orange); box-shadow: 0 10px 24px rgba(244,114,46,0.18); }

/* ---- [iv_launch] — navy panel with orange CTA (sits in a light section) ---- */
.iv-launch {
	max-width: 1140px; margin: 0 auto; display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
	padding: 40px 44px; border-radius: 22px;
	background: radial-gradient(circle at 88% 18%, rgba(244,114,46,0.22), transparent 36%), linear-gradient(150deg, #0A1B42 0%, #06162F 60%, #03102A 100%);
	box-shadow: 0 30px 70px rgba(10,27,66,0.28);
}
.iv-launch-icon { flex: 0 0 auto; width: 72px; height: 72px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: var(--iv-orange); background: rgba(244,114,46,0.14); border: 1px solid rgba(244,114,46,0.35); }
.iv-launch-icon svg { width: 36px; height: 36px; }
.iv-launch-copy { flex: 1 1 420px; }
body.ivmedical-site .et_pb_text_inner .iv-launch .iv-eyebrow-inline { color: var(--iv-orange) !important; }
body.ivmedical-site .et_pb_text_inner .iv-launch-title { color: #fff !important; font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important; font-weight: 600 !important; line-height: 1.2 !important; margin: 0 0 10px !important; padding: 0 !important; }
body.ivmedical-site .et_pb_text_inner .iv-launch-body { color: rgba(255,255,255,0.8) !important; font-size: 15.5px !important; line-height: 1.62 !important; margin: 0 !important; padding: 0 !important; max-width: 640px; }
.iv-launch-btn {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
	background: var(--iv-orange); color: var(--iv-blue) !important; text-decoration: none !important;
	padding: 15px 28px; border-radius: 999px; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
	box-shadow: 0 12px 26px rgba(244,114,46,0.32); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.iv-launch-btn span { transition: transform .18s ease; }
.iv-launch-btn:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 32px rgba(244,114,46,0.44); }
.iv-launch-btn:hover span { transform: translateX(4px); }
@media (max-width: 700px) { .iv-launch { padding: 30px 24px; } .iv-launch-btn { width: 100%; justify-content: center; } }