/* =============================================================================
   Invergis Enterprise — marketing section styles

   Loaded only on templates that render these sections (see inc/enqueue.php).
   ========================================================================== */

/* Hero ===================================================================== */

.hero {
	position: relative;
	background: linear-gradient(165deg, #1c242c 0%, #0B2239 52%, #0E3355 100%);
	color: #A8BED2;
	padding-top: clamp(3rem, 2rem + 4vw, 6rem);
	padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
	overflow: hidden;
}

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(32px, 4vw, 72px);
}

.hero__content { max-width: 44rem; }

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 7px 14px 7px 12px;
	background: rgba(79, 163, 219, .1);
	border: 1px solid rgba(79, 163, 219, .26);
	border-radius: 100px;
	color: #8FC8ED;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hero__pulse {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #4FA3DB;
	box-shadow: 0 0 0 0 rgba(79, 163, 219, .6);
	animation: iv-pulse 2.4s var(--iv-ease) infinite;
}

@keyframes iv-pulse {
	0% { box-shadow: 0 0 0 0 rgba(79, 163, 219, .55); }
	70% { box-shadow: 0 0 0 9px rgba(79, 163, 219, 0); }
	100% { box-shadow: 0 0 0 0 rgba(79, 163, 219, 0); }
}

.hero__title {
	margin: 0 0 22px;
	color: var(--iv-white);
	font-size: var(--iv-fs-display);
	font-weight: 600;
	line-height: 1.06;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.hero__lead {
	margin: 0 0 34px;
	max-width: 56ch;
	color: #B7CADC;
	font-size: var(--iv-fs-lead);
	line-height: 1.65;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(32px, 3vw, 52px); }

.hero__pillars {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.hero__pillars a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #93AEC7;
	font-size: var(--iv-fs-small);
	transition: color var(--iv-fast) var(--iv-ease);
}

.hero__pillars a:hover { color: var(--iv-white); }
.hero__pillars svg { color: #4FA3DB; }

.hero__visual { position: relative; display: grid; place-items: center; }
.hero__svg { width: 100%; max-width: 560px; height: auto; }

.hero__streams path { animation: iv-stream 3.4s linear infinite; }
.hero__streams path:nth-child(2) { animation-duration: 4.6s; }
.hero__streams path:nth-child(3) { animation-duration: 3.9s; }
.hero__streams path:nth-child(4) { animation-duration: 5.2s; }

@keyframes iv-stream {
	to { stroke-dashoffset: -64; }
}

.hero__nodes circle:not(:first-child) { animation: iv-float 6s var(--iv-ease) infinite alternate; }
.hero__nodes circle:nth-child(4) { animation-delay: -1.5s; }
.hero__nodes circle:nth-child(6) { animation-delay: -2.6s; }
.hero__nodes circle:nth-child(8) { animation-delay: -3.4s; }
.hero__cloud { animation: iv-float 7s var(--iv-ease) infinite alternate; }
.hero__card { animation: iv-float 8s var(--iv-ease) -2s infinite alternate; }

@keyframes iv-float {
	from { transform: translateY(0); }
	to { transform: translateY(-8px); }
}

/* A transparent header sits over the hero, so that variant alone pays for the
   header's height in padding. */
.has-transparent-header .hero { padding-top: calc(var(--iv-header-h) + clamp(3rem, 2rem + 4vw, 6rem)); }
.has-transparent-header .page-hero { padding-top: calc(var(--iv-header-h) + clamp(2.5rem, 2rem + 3vw, 4.5rem)); }

/* Page hero (services, industries, archives) ================================ */

.page-hero {
	position: relative;
	background: linear-gradient(160deg, #1c242c 0%, #0B2239 60%, #0D2E4B 100%);
	color: #A8BED2;
	padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem);
	padding-bottom: clamp(3rem, 2.2rem + 3vw, 5rem);
	overflow: hidden;
}

.page-hero__body { position: relative; max-width: 62ch; }

.page-hero__eyebrow {
	margin: 0 0 14px;
	color: #6FB3E2;
	font-size: var(--iv-fs-eyebrow);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.page-hero__title {
	margin: 0;
	color: var(--iv-white);
	font-size: var(--iv-fs-h1);
	line-height: 1.1;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.page-hero__text { margin: 20px 0 0; color: #B7CADC; font-size: var(--iv-fs-lead); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Breadcrumbs ============================================================== */

.breadcrumbs { position: relative; margin-bottom: 26px; font-size: .875rem; }
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.breadcrumbs__item { display: inline-flex; align-items: center; gap: 6px; color: #7D97AF; }
.breadcrumbs__item a { color: #A8BED2; }
.breadcrumbs__item a:hover { color: var(--iv-white); }
.breadcrumbs__sep { color: #4A6884; }

.page-header .breadcrumbs__item,
.entry-header .breadcrumbs__item { color: var(--iv-muted); }
.page-header .breadcrumbs__item a,
.entry-header .breadcrumbs__item a { color: var(--iv-slate); }
.page-header .breadcrumbs__sep,
.entry-header .breadcrumbs__sep { color: var(--iv-border-strong); }

/* Capability strip ========================================================= */

.capability-strip { border-bottom: 1px solid var(--iv-border); background: var(--iv-white); }

.capability-strip__list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px clamp(20px, 3vw, 46px);
	padding-block: 22px;
}

.capability-strip__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--iv-muted);
	font-size: var(--iv-fs-small);
	font-weight: 500;
}

.capability-strip__item svg { color: var(--iv-primary); }

/* Company introduction ===================================================== */

.section-intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(28px, 4vw, 80px);
	align-items: start;
}

.section-intro__heading { margin: 0; font-size: var(--iv-fs-h2); text-wrap: balance; }
.section-intro__text { font-size: var(--iv-fs-lead); line-height: 1.75; }
.section-intro__actions { margin-top: 26px; }

/* Service and industry cards =============================================== */

/* Both grids sit on the brand's navy so the two primary routes into the site
   read as the most prominent blocks on the page, with the cards lifted off it
   in white. */
.section--services,
.section--industries {
	position: relative;
	background: var(--iv-navy);
	overflow: hidden;
}

/* Both grids carry a deeper blue wash and a set of arcs, so the page's two
   primary blocks have more presence than a flat fill. */
.section--services,
.section--industries {
	background: linear-gradient(158deg, #1c242c 0%, #0A2647 52%, #0C3159 100%);
}

.section__arcs {
	position: absolute;
	top: -18%;
	right: -6%;
	width: min(46%, 620px);
	aspect-ratio: 1;
	pointer-events: none;
	opacity: .55;
}

/* Mirrored, so the same motif does not appear twice in the same corner. */
.section__arcs--left { top: auto; right: auto; bottom: -18%; left: -6%; }

.section__arcs svg { width: 100%; height: 100%; }

.section--services .btn--link,
.section--industries .btn--link { color: #7FC0EA; }
.section--services .btn--link:hover,
.section--industries .btn--link:hover { color: var(--iv-white); }

.tile-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(20px, 1.6vw, 26px);
	background: linear-gradient(180deg, var(--iv-white) 0%, #F7FAFC 100%);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 300ms var(--iv-ease), box-shadow 300ms var(--iv-ease), transform 300ms var(--iv-ease);
}

.tile-card::after {
	content: "";
	position: absolute;
	inset-inline: -1px;
	top: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--iv-primary), #4FA3DB);
	border-radius: 14px 14px 0 0;
	opacity: 0;
	transition: opacity 300ms var(--iv-ease);
}

.tile-card:hover {
	border-color: rgba(79, 163, 219, .55);
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55);
	transform: translateY(-4px);
}

.tile-card:hover::after { opacity: 1; }
.tile-card:focus-within { border-color: #4FA3DB; outline: 2px solid #7FC0EA; outline-offset: 3px; }

/* On a light background the card needs a visible edge of its own. */
.section:not(.section--services):not(.section--industries) .tile-card { border-color: var(--iv-border); }
.section:not(.section--services):not(.section--industries) .tile-card:hover {
	border-color: var(--iv-border-strong);
	box-shadow: var(--iv-shadow);
}
.section:not(.section--services):not(.section--industries) .tile-card:focus-within { outline-color: var(--iv-primary); }

/* Media-led variant: artwork above a tinted label carrying only the name. The
   label tints rotate through four soft neutrals so a long grid keeps rhythm
   without introducing a second accent colour. */
:root {
	--iv-tint-1: #E7EEF9;
	--iv-tint-2: #FBF2E5;
	--iv-tint-3: #E3F1E9;
	--iv-tint-4: #ECE9F7;
}

.tile-card--media {
	gap: 0;
	padding: 0;
	overflow: hidden;
	background: var(--iv-white);
	border-color: transparent;
}

.tile-card--media .tile-card__media {
	margin: 0;
	border-radius: 0;
	aspect-ratio: 5 / 4;
	flex: none;
}

/* Without artwork the panel still has to look composed. It takes a deeper
   shade of its own label tint, so the card reads as a deliberate colour tile
   rather than a hole where an image failed to load. */
.tile-card__fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(150deg, #D3E2F5 0%, #B9D3EC 100%);
	color: var(--iv-navy);
}

.tile-card__fallback .icon { opacity: .32; transition: transform 500ms var(--iv-ease); }
.tile-card--media:hover .tile-card__fallback .icon { transform: scale(1.08); }

.tile-card__label {
	display: flex;
	align-items: center;
	flex: 1;
	padding: clamp(16px, 1.5vw, 22px) clamp(16px, 1.6vw, 24px);
	background: var(--iv-tint-1);
	transition: background-color 300ms var(--iv-ease);
}

.tile-card--media .tile-card__title {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.tile-card--media .tile-card__link { color: var(--iv-navy); }
.tile-card--media:hover .tile-card__link { color: var(--iv-primary); }

.card-grid > .tile-card--media:nth-child(4n + 2) .tile-card__label { background: var(--iv-tint-2); }
.card-grid > .tile-card--media:nth-child(4n + 3) .tile-card__label { background: var(--iv-tint-3); }
.card-grid > .tile-card--media:nth-child(4n + 4) .tile-card__label { background: var(--iv-tint-4); }

.card-grid > .tile-card--media:nth-child(4n + 2) .tile-card__fallback { background: linear-gradient(150deg, #F9E9D2 0%, #F2DAB6 100%); }
.card-grid > .tile-card--media:nth-child(4n + 3) .tile-card__fallback { background: linear-gradient(150deg, #D4EADD 0%, #BADFC9 100%); }
.card-grid > .tile-card--media:nth-child(4n + 4) .tile-card__fallback { background: linear-gradient(150deg, #E0DAF2 0%, #CFC6EA 100%); }

.tile-card__media {
	display: block;
	overflow: hidden;
	margin: calc(clamp(20px, 1.6vw, 26px) * -1) calc(clamp(20px, 1.6vw, 26px) * -1) 4px;
	border-radius: 14px 14px 0 0;
	aspect-ratio: 16 / 9;
	background: var(--iv-mist);
}

.tile-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--iv-ease); }
.tile-card:hover .tile-card__media img { transform: scale(1.06); }

.tile-card__icon {
	display: inline-grid;
	place-items: center;
	width: 46px; height: 46px;
	background: var(--iv-primary-light);
	border-radius: 10px;
	color: var(--iv-primary);
	transition: transform 300ms var(--iv-ease), background-color 300ms var(--iv-ease);
}

.tile-card:hover .tile-card__icon { transform: scale(1.06); background: #D8E9F6; }

.tile-card__title { margin: 0; font-size: 1.0625rem; line-height: 1.35; }

/* One stretched anchor makes the entire card the link. */
.tile-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
.tile-card__link { color: var(--iv-ink); }
.tile-card:hover .tile-card__link { color: var(--iv-primary); }
.tile-card__link:focus-visible { outline: none; }

.tile-card__text { margin: 0; color: var(--iv-muted); font-size: 0.875rem; line-height: 1.6; flex: 1; }

.tile-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--iv-primary);
	font-size: 0.875rem;
	font-weight: 600;
}

.tile-card__cta svg { transition: transform 300ms var(--iv-ease); }
.tile-card:hover .tile-card__cta svg { transform: translateX(5px); }

/* AI feature section ======================================================= */

.section-ai {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
}

.section-ai__heading { margin: 0 0 20px; font-size: var(--iv-fs-h2); text-wrap: balance; }
.section-ai__text { margin: 0 0 30px; font-size: var(--iv-fs-lead); color: #A8BED2; max-width: 54ch; }

.section-ai__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--iv-radius-lg); overflow: hidden; }

.section-ai__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 22px;
	background: rgba(11, 34, 57, .92);
	color: #CFE0EE;
	font-size: var(--iv-fs-small);
	font-weight: 500;
	transition: background-color var(--iv-fast) var(--iv-ease);
}

.section-ai__item:hover { background: rgba(14, 101, 167, .22); }
.section-ai__item svg { color: #4FA3DB; }

/* Why choose us ============================================================ */

.reason-card {
	padding: clamp(22px, 2vw, 30px);
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	transition: border-color var(--iv-base) var(--iv-ease), box-shadow var(--iv-base) var(--iv-ease);
}

.reason-card:hover { border-color: var(--iv-border-strong); box-shadow: var(--iv-shadow); }

.reason-card__icon {
	display: inline-grid;
	place-items: center;
	width: 44px; height: 44px;
	margin-bottom: 18px;
	background: var(--iv-primary-light);
	border-radius: var(--iv-radius);
	color: var(--iv-primary);
}

.reason-card__title { margin: 0 0 10px; font-size: 1.125rem; }
.reason-card__text { margin: 0; color: var(--iv-muted); font-size: var(--iv-fs-small); }

/* Capability cards (dark) ================================================== */

.capability-card {
	padding: clamp(20px, 1.8vw, 28px);
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: var(--iv-radius-lg);
	transition: border-color var(--iv-base) var(--iv-ease), background-color var(--iv-base) var(--iv-ease), transform var(--iv-base) var(--iv-ease);
}

.capability-card:hover { background: rgba(79, 163, 219, .08); border-color: rgba(79, 163, 219, .35); transform: translateY(-3px); }

.capability-card__icon { display: inline-flex; margin-bottom: 16px; color: #4FA3DB; }
.capability-card__title { margin: 0 0 8px; font-size: 1.0625rem; color: var(--iv-white); }
.capability-card__text { margin: 0; color: #93AEC7; font-size: .9375rem; }

/* Approach timeline ======================================================== */

.approach {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(12px, 1.4vw, 24px);
	counter-reset: approach;
}

.approach__step { position: relative; padding-top: 30px; }

.approach__step::before {
	content: "";
	position: absolute;
	top: 7px; left: 0; right: 0;
	height: 1px;
	background: var(--iv-border);
}

.approach__step::after {
	content: "";
	position: absolute;
	top: 2px; left: 0;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--iv-white);
	border: 2px solid var(--iv-border-strong);
	transition: border-color var(--iv-base) var(--iv-ease), background-color var(--iv-base) var(--iv-ease);
}

.approach__step.is-active::after,
.approach__step:hover::after { border-color: var(--iv-primary); background: var(--iv-primary); }
.approach__step.is-active::before { background: linear-gradient(to right, var(--iv-primary), var(--iv-border)); }

.approach__trigger {
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
}

.approach__number {
	display: block;
	margin-bottom: 6px;
	color: var(--iv-primary);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .1em;
}

.approach__title {
	display: block;
	color: var(--iv-ink);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.approach__body { margin-top: 12px; color: var(--iv-muted); font-size: var(--iv-fs-small); }

/* Insight cards ============================================================ */

.insight-card { display: flex; flex-direction: column; }

.insight-card__media {
	display: block;
	overflow: hidden;
	margin-bottom: 18px;
	border-radius: var(--iv-radius-lg);
	background: var(--iv-mist);
	aspect-ratio: 16 / 10;
}

.insight-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--iv-ease); }
.insight-card:hover .insight-card__media img { transform: scale(1.05); }

.insight-card__category {
	margin: 0 0 10px;
	color: var(--iv-primary);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.insight-card__title { margin: 0 0 10px; font-size: 1.1875rem; line-height: 1.35; }
.insight-card__title a { color: var(--iv-ink); }
.insight-card__title a:hover { color: var(--iv-primary); }
.insight-card__excerpt { margin: 0 0 14px; color: var(--iv-muted); font-size: var(--iv-fs-small); flex: 1; }

.insight-card__meta { display: flex; gap: 16px; margin: 0; color: var(--iv-muted); font-size: .8125rem; }

/* Article meta ============================================================= */

.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 20px; font-size: .875rem; color: var(--iv-muted); }

.entry-meta__category {
	color: var(--iv-primary);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: .75rem;
}

.entry-header { padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.entry-title { font-size: var(--iv-fs-h1); text-wrap: balance; }
.entry-standfirst { margin: 20px 0 0; color: var(--iv-muted); font-size: var(--iv-fs-lead); }

.entry-byline { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--iv-border); }
.entry-byline__avatar { border-radius: 50%; }
.entry-byline__name { margin: 0; color: var(--iv-ink); font-weight: 600; font-size: var(--iv-fs-small); }
.entry-byline__role { margin: 0; color: var(--iv-muted); font-size: .8125rem; }

.entry-media { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.entry-media img { width: 100%; border-radius: var(--iv-radius-lg); }
.entry-media--inline { margin-bottom: 2rem; }

.entry-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); padding-bottom: var(--iv-section); }
.entry-layout .entry-content { max-width: var(--iv-max-narrow); margin-inline: auto; }
body:not(.no-sidebar) .entry-layout { grid-template-columns: minmax(0, 1fr) 300px; }
body:not(.no-sidebar) .entry-layout .entry-content { margin-inline: 0; }

.entry-sidebar { align-self: start; position: sticky; top: calc(var(--iv-header-h) + 24px); display: grid; gap: 28px; }
.widget__title { margin: 0 0 14px; font-size: 1rem; }

.entry-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.entry-tags a { display: inline-block; padding: 6px 12px; background: var(--iv-mist); border-radius: 100px; color: var(--iv-slate); font-size: .8125rem; }
.entry-tags a:hover { background: var(--iv-primary-light); color: var(--iv-primary); }

.page-header { padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.page-header__title { font-size: var(--iv-fs-h1); text-wrap: balance; }
.page-header__lead { margin: 18px 0 0; color: var(--iv-muted); font-size: var(--iv-fs-lead); }

/* Detail page sections ===================================================== */

.detail-intro { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 3vw, 60px); align-items: start; }
.detail-intro__lead .section-header__eyebrow { margin: 0; }
/* The introduction reads at the page's own body size rather than as an
   enlarged lead, so it sits in the same voice as the copy around it. */
.detail-intro__body { font-size: inherit; }
.detail-intro__lead-text, .detail-intro__lead { color: var(--iv-ink); }

.detail-intro__body .detail-intro__lead {
	margin: 0 0 1.15em;
	color: var(--iv-ink);
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.capability-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--iv-border); border: 1px solid var(--iv-border); border-radius: var(--iv-radius-lg); overflow: hidden; }

.capability-list__item {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 22px 24px;
	background: var(--iv-white);
	scroll-margin-top: calc(var(--iv-header-h) + 32px);
	transition: background-color var(--iv-fast) var(--iv-ease);
}

.capability-list__item:hover, .capability-list__item:target { background: var(--iv-primary-light); }
.capability-list__index { color: var(--iv-primary); font-size: .75rem; font-weight: 600; letter-spacing: .08em; }
.capability-list__name { color: var(--iv-ink); font-weight: 500; font-size: var(--iv-fs-small); }

.tech-list { display: flex; flex-wrap: wrap; gap: 10px; }

.tech-list__item {
	padding: 10px 18px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 100px;
	color: #CFE0EE;
	font-size: var(--iv-fs-small);
	transition: border-color var(--iv-fast) var(--iv-ease), background-color var(--iv-fast) var(--iv-ease);
}

.tech-list__item:hover { background: rgba(79, 163, 219, .14); border-color: rgba(79, 163, 219, .4); }

.benefit-card, .solution-card {
	padding: clamp(20px, 1.8vw, 28px);
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
}

.benefit-card__check {
	display: inline-grid;
	place-items: center;
	width: 34px; height: 34px;
	margin-bottom: 16px;
	background: var(--iv-primary-light);
	border-radius: 50%;
	color: var(--iv-primary);
}

.benefit-card__title, .solution-card__title { margin: 0 0 8px; font-size: 1.0625rem; }
.benefit-card__text, .solution-card__text { margin: 0; color: var(--iv-muted); font-size: var(--iv-fs-small); }

.solution-card { border-left: 3px solid var(--iv-primary); }

.challenge-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1px; background: var(--iv-border); border: 1px solid var(--iv-border); border-radius: var(--iv-radius-lg); overflow: hidden; }
.challenge-list__item { display: flex; gap: 16px; padding: 24px; background: var(--iv-mist); }
.challenge-list__index { color: var(--iv-primary); font-weight: 600; font-size: .8125rem; letter-spacing: .08em; }
.challenge-list__item p { margin: 0; color: var(--iv-slate); font-size: var(--iv-fs-small); }

.use-case-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.use-case-list__item { display: flex; gap: 14px; padding: 20px 22px; background: var(--iv-white); border: 1px solid var(--iv-border); border-radius: var(--iv-radius-lg); }
.use-case-list__icon { color: var(--iv-primary); display: inline-flex; margin-top: 2px; }
.use-case-list__item p { margin: 0; font-size: var(--iv-fs-small); }

.pill-list { display: flex; flex-wrap: wrap; gap: 10px; }

.pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-radius: 100px;
	color: var(--iv-slate);
	font-size: var(--iv-fs-small);
	font-weight: 500;
	transition: border-color var(--iv-fast) var(--iv-ease), color var(--iv-fast) var(--iv-ease), transform var(--iv-fast) var(--iv-ease);
}

.pill:hover { border-color: var(--iv-primary); color: var(--iv-primary); transform: translateY(-2px); }
.pill svg { color: var(--iv-primary); }

.checklist { list-style: none !important; padding-left: 0 !important; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: start; font-size: var(--iv-fs-body); }
.checklist svg { color: var(--iv-primary); margin-top: 5px; }

/* CTA band ================================================================= */

.cta-band {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, auto);
	align-items: center;
	gap: clamp(24px, 3vw, 56px);
	padding: clamp(32px, 3.4vw, 60px);
	background: linear-gradient(140deg, #0B2239, #0E65A7 180%);
	border-radius: var(--iv-radius-lg);
	overflow: hidden;
}

.cta-band::after {
	content: "";
	position: absolute;
	right: -80px; top: -120px;
	width: 380px; height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(79, 163, 219, .25), transparent 65%);
	pointer-events: none;
}

.cta-band__heading { margin: 0; color: var(--iv-white); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); text-wrap: balance; }
.cta-band__text { margin: 14px 0 0; color: #B7CADC; max-width: 58ch; }
.cta-band__actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }

/* Contact ================================================================== */

.contact-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.contact-layout__heading { margin: 0 0 16px; font-size: var(--iv-fs-h2); }
.contact-layout__text { color: var(--iv-muted); font-size: var(--iv-fs-lead); }
.contact-layout__details { display: grid; gap: 22px; margin: 32px 0; }
.contact-layout__details li { display: flex; gap: 14px; align-items: start; }
.contact-layout__details svg { color: var(--iv-primary); margin-top: 3px; }
.contact-layout__details p { margin: 0; }
.contact-layout__label { color: var(--iv-muted); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px !important; }

.inquiry {
	padding: clamp(24px, 2.4vw, 40px);
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	box-shadow: var(--iv-shadow);
}

.inquiry__heading { margin: 0 0 10px; font-size: 1.5rem; }
.inquiry__text { margin: 0 0 26px; color: var(--iv-muted); font-size: var(--iv-fs-small); }
.inquiry__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.inquiry__field { margin: 0; }
.inquiry__field--full { grid-column: 1 / -1; }
.inquiry__field.has-error input, .inquiry__field.has-error select, .inquiry__field.has-error textarea { border-color: #B42318; }
.inquiry__error { display: block; margin-top: 6px; color: #B42318; font-size: .8125rem; }
.inquiry__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inquiry__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }
.inquiry__privacy { margin: 0; color: var(--iv-muted); font-size: .8125rem; max-width: 40ch; }

.alert { display: flex; gap: 12px; align-items: start; padding: 16px 18px; margin-bottom: 24px; border-radius: var(--iv-radius); font-size: var(--iv-fs-small); }
.alert p { margin: 0 0 6px; }
.alert p:last-child, .alert ul { margin: 0; }
.alert ul { padding-left: 18px; list-style: disc; }
.alert--success { background: #ECFDF3; border: 1px solid #ABEFC6; color: #067647; }
.alert--success svg { color: #17B26A; margin-top: 2px; }
.alert--error { background: #FEF3F2; border: 1px solid #FECDCA; color: #B42318; }

/* Careers ================================================================== */

.job-list { display: grid; gap: 14px; }

.job-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	padding: clamp(20px, 1.8vw, 28px);
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	transition: border-color var(--iv-base) var(--iv-ease), box-shadow var(--iv-base) var(--iv-ease);
}

.job-card:hover { border-color: var(--iv-border-strong); box-shadow: var(--iv-shadow); }
.job-card__title { margin: 0 0 12px; font-size: 1.1875rem; }
.job-card__title a { color: var(--iv-ink); }
.job-card__title a:hover { color: var(--iv-primary); }

.job-card__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--iv-muted); font-size: var(--iv-fs-small); }
.job-card__meta li { display: inline-flex; align-items: center; gap: 7px; }
.job-card__meta svg { color: var(--iv-primary); }

.job-card__skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.job-card__skills li { padding: 4px 11px; background: var(--iv-mist); border-radius: 100px; color: var(--iv-slate); font-size: .75rem; }

.job-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 4vw, 64px); align-items: start; }

.job-summary {
	position: sticky;
	top: calc(var(--iv-header-h) + 24px);
	padding: clamp(22px, 2vw, 30px);
	background: var(--iv-mist);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
}

.job-summary__title { margin: 0 0 18px; font-size: 1.125rem; }
.job-summary__subtitle { margin: 22px 0 10px; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--iv-muted); }
.job-summary__list { margin: 0; display: grid; gap: 14px; }
.job-summary__list div { display: grid; gap: 2px; }
.job-summary__list dt { color: var(--iv-muted); font-size: .8125rem; }
.job-summary__list dd { margin: 0; color: var(--iv-ink); font-size: var(--iv-fs-small); font-weight: 500; }
.job-summary__apply { margin-top: 24px; width: 100%; justify-content: center; }

/* Filters, search results, empty states ==================================== */

.filter-bar { margin-bottom: clamp(24px, 2vw, 40px); border-bottom: 1px solid var(--iv-border); }
.filter-bar__list { display: flex; flex-wrap: wrap; gap: 4px 22px; }

.filter-bar__link {
	display: inline-block;
	padding: 12px 2px;
	border-bottom: 2px solid transparent;
	color: var(--iv-muted);
	font-size: var(--iv-fs-small);
	font-weight: 500;
	transition: color var(--iv-fast) var(--iv-ease), border-color var(--iv-fast) var(--iv-ease);
}

.filter-bar__link:hover, .filter-bar__link.is-active { color: var(--iv-primary); border-bottom-color: var(--iv-primary); }

.search-page__form { margin-bottom: clamp(28px, 3vw, 48px); }
.search-results { display: grid; gap: 4px; }
.search-result { padding: 24px 0; border-bottom: 1px solid var(--iv-border); }
.search-result__type { margin: 0 0 6px; color: var(--iv-primary); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.search-result__title { margin: 0 0 8px; font-size: 1.25rem; }
.search-result__title a { color: var(--iv-ink); }
.search-result__title a:hover { color: var(--iv-primary); }
.search-result__excerpt { margin: 0; color: var(--iv-muted); font-size: var(--iv-fs-small); }

.empty-state { padding: clamp(32px, 3vw, 56px); background: var(--iv-mist); border-radius: var(--iv-radius-lg); text-align: center; color: var(--iv-muted); }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 20px; }
.empty-state .btn { margin-top: 20px; width: auto; }

.section-footer-link { margin-top: 28px; }

/* Comments ================================================================= */

.comments { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); border-top: 1px solid var(--iv-border); margin-top: 3rem; }
.comments__title { margin: 0 0 24px; font-size: 1.375rem; }
.comments__list { display: grid; gap: 24px; margin-bottom: 40px; }
.comments__list ol { list-style: none; padding-left: clamp(16px, 3vw, 40px); margin-top: 24px; display: grid; gap: 24px; }
.comment-body { padding: 20px 22px; background: var(--iv-mist); border-radius: var(--iv-radius-lg); font-size: var(--iv-fs-small); }
.comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.comment-author img { border-radius: 50%; }
.comment-metadata { color: var(--iv-muted); font-size: .8125rem; margin-bottom: 10px; }
.comment-form { display: grid; gap: 16px; max-width: 640px; }

/* Responsive =============================================================== */

@media (max-width: 1200px) {
	.capability-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.approach { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
}

@media (max-width: 1024px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { order: -1; max-width: 440px; }
	.section-intro, .section-ai, .contact-layout, .job-layout, .detail-intro { grid-template-columns: 1fr; }
	.section-ai__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.job-summary { position: static; }
	body:not(.no-sidebar) .entry-layout { grid-template-columns: 1fr; }
	.entry-sidebar { position: static; }
	.cta-band { grid-template-columns: 1fr; }
	.use-case-list { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.approach { grid-template-columns: 1fr; row-gap: 0; }
	.approach__step { padding: 0 0 28px 28px; }

	.approach__step::before {
		top: 6px; left: 5px; right: auto;
		width: 1px; height: 100%;
	}

	.approach__step:last-child::before { display: none; }
	.approach__step::after { top: 4px; left: 0; }
	.capability-list, .challenge-list { grid-template-columns: 1fr; }
	.job-card { grid-template-columns: 1fr; }
	.job-card__action .btn { width: 100%; justify-content: center; }
}

@media (max-width: 576px) {
	.inquiry__grid { grid-template-columns: 1fr; }
	.section-ai__list { grid-template-columns: 1fr; }
	.inquiry__actions { flex-direction: column; align-items: stretch; }
}

/* Today vs what it takes ==================================================== */

/* Two lists read as one argument, so they share a row grid: row n on the left
   is answered by row n on the right, and both sides keep that alignment
   however long either line wraps. */
/* Both columns are cells of one grid — the lists dissolve into it with
   `display: contents` — so a pair shares a row and stays level however far
   either line wraps. Each item names its own row, because source order runs
   down one column and then the other. */
.contrast {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(90px, 9vw, 150px) minmax(0, 1fr);
	align-items: stretch;
	column-gap: 0;
	row-gap: 12px;
}

.contrast__column,
.contrast__list { display: contents; }

.contrast__label {
	grid-row: 1;
	margin: 0 0 4px;
	padding: 16px clamp(18px, 1.8vw, 26px);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.contrast__column--today > .contrast__label,
.contrast__column--today > .contrast__list > .contrast__item { grid-column: 1; }

.contrast__column--needed > .contrast__label,
.contrast__column--needed > .contrast__list > .contrast__item { grid-column: 3; }

.contrast__column--today .contrast__label { background: var(--iv-navy); color: var(--iv-white); }
.contrast__column--needed .contrast__label { background: var(--iv-primary-light); color: var(--iv-navy); }

.contrast__list { margin: 0; padding: 0; list-style: none; }

.contrast__item {
	grid-row: var(--contrast-row, auto);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 18px clamp(18px, 1.8vw, 26px);
	background: #E7ECF1;
	border-radius: var(--iv-radius-lg);
}

.contrast__column--needed .contrast__item { background: #E3EDF8; }

.contrast__mark { display: grid; place-items: center; }
.contrast__column--today .contrast__mark { color: #B45309; }
.contrast__column--needed .contrast__mark { color: var(--iv-primary); }

.contrast__text { color: var(--iv-navy); font-size: 0.9375rem; line-height: 1.5; }

/* The gap is decoration: a rift opening between the two columns. */
.contrast__gap {
	position: relative;
	grid-column: 2;
	grid-row: 1 / span var(--contrast-span, 5);
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
	padding-top: 14px;
	color: var(--iv-border-strong);
}

.contrast__arrows { display: flex; gap: 6px; color: var(--iv-primary); opacity: .55; }

.contrast__gap-label {
	margin-top: 18px;
	padding: 10px 12px;
	border: 1px solid var(--iv-border-strong);
	border-radius: var(--iv-radius);
	color: var(--iv-muted);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--iv-white);
}

.contrast__rift { flex: 1; width: 100%; min-height: 120px; margin-top: -4px; }

/* Below this the rift has no room to read as one, so the columns stack. Source
   order takes over again: the explicit rows and columns are released, and each
   list follows its own heading. */
@media (max-width: 900px) {
	.contrast { grid-template-columns: 1fr; row-gap: 12px; }
	.contrast__gap { display: none; }
	.contrast__label { grid-row: auto; margin-top: 16px; }
	.contrast__column--today > .contrast__label,
	.contrast__column--today > .contrast__list > .contrast__item,
	.contrast__column--needed > .contrast__label,
	.contrast__column--needed > .contrast__list > .contrast__item { grid-column: 1; }
	.contrast__item { grid-row: auto; }
}

/* Services explorer ========================================================= */

.stack__tabs {
	display: flex;
	gap: clamp(4px, 1vw, 20px);
	margin-bottom: clamp(28px, 3vw, 44px);
	border-bottom: 1px solid var(--iv-border);
	overflow-x: auto;
	scrollbar-width: none;
}

.stack__tabs::-webkit-scrollbar { display: none; }

/* Ten practices overflow the strip on most screens; the fade is the only clue
   that there is more to the right. */
.stack__tabs { mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.stack__tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }

.stack__tab {
	position: relative;
	flex: 0 0 auto;
	padding: 14px clamp(8px, 1vw, 16px);
	background: none;
	border: 0;
	color: var(--iv-muted);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--iv-fast) var(--iv-ease);
}

.stack__tab::after {
	content: "";
	position: absolute;
	left: clamp(8px, 1vw, 16px);
	right: clamp(8px, 1vw, 16px);
	bottom: -1px;
	height: 2px;
	background: var(--iv-navy);
	opacity: 0;
	transition: opacity var(--iv-fast) var(--iv-ease);
}

.stack__tab:hover { color: var(--iv-navy); }
.stack__tab.is-active { color: var(--iv-navy); }
.stack__tab.is-active::after { opacity: 1; }
.stack__tab:focus-visible { outline: 2px solid var(--iv-primary); outline-offset: -4px; border-radius: var(--iv-radius); }

.stack__panel {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

/* A class selector beats the UA's `[hidden] { display: none }`, so setting
   `display` on the panel would show every one of them. Restate it. */
.stack__panel[hidden] { display: none; }

.stack__panel:focus-visible { outline: 2px solid var(--iv-primary); outline-offset: 6px; border-radius: var(--iv-radius-lg); }

.stack__title {
	margin: 0 0 18px;
	color: var(--iv-navy);
	font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.stack__text { margin: 0 0 24px; color: var(--iv-muted); font-size: 0.9375rem; line-height: 1.65; }

.stack__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--iv-navy);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.stack__link:hover { color: var(--iv-primary); }
.stack__link svg { transition: transform var(--iv-base) var(--iv-ease); }
.stack__link:hover svg { transform: translate(2px, -2px); }

.stack__list { margin: 0; padding: 0; list-style: none; }

.stack__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: clamp(16px, 1.6vw, 22px) 0;
	border-bottom: 1px solid var(--iv-border);
}

.stack__item:first-child { border-top: 1px solid var(--iv-border); }
.stack__mark { display: grid; place-items: center; color: var(--iv-navy); transition: color var(--iv-fast) var(--iv-ease); }
.stack__item:hover .stack__mark { color: var(--iv-primary); }

.stack__item-link {
	color: var(--iv-navy);
	font-size: 0.9375rem;
	font-weight: 500;
	transition: color var(--iv-fast) var(--iv-ease);
}

.stack__item-link:hover { color: var(--iv-primary); }

@media (max-width: 900px) {
	.stack__panel { grid-template-columns: 1fr; gap: 28px; }
}

/* About page ================================================================ */

/* The narrative sets against its label the way the detail pages do, so About
   reads as part of the same family rather than a one-off layout. */
.story {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 72px);
	align-items: start;
}

.story__heading {
	margin: 10px 0 0;
	color: var(--iv-navy);
	font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

.story__body { font-size: var(--iv-fs-lead); }

.story__body .story__lead {
	margin: 0 0 1.15em;
	color: var(--iv-ink);
	font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
	line-height: 1.55;
	letter-spacing: -0.015em;
}

/* Figures under the narrative, on one rule rather than in boxes. */
.stat-band {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.5vw, 40px);
	margin: clamp(40px, 5vw, 72px) 0 0;
	padding-top: clamp(28px, 3vw, 44px);
	border-top: 1px solid var(--iv-border);
}

.stat-band__item { margin: 0; }

.stat-band__value {
	margin: 0 0 8px;
	color: var(--iv-primary);
	font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
}

.stat-band__label { margin: 0; color: var(--iv-muted); font-size: 0.875rem; line-height: 1.5; }

/* Vision and mission: a pair, so they share a row and a rule between them. */
.purpose {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 72px);
}

.purpose__panel { position: relative; }

.purpose__panel + .purpose__panel {
	padding-left: clamp(28px, 4vw, 72px);
	border-left: 1px solid rgba(255, 255, 255, .16);
}

.purpose__icon {
	display: inline-grid;
	place-items: center;
	width: 48px; height: 48px;
	margin-bottom: 20px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 12px;
	color: #7FC0EA;
}

.purpose__eyebrow {
	margin: 0 0 14px;
	color: #7FC0EA;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.purpose__statement {
	margin: 0 0 16px;
	color: var(--iv-white);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.025em;
}

.purpose__text { margin: 0; color: #B7CADC; font-size: 0.9375rem; line-height: 1.7; }

/* Core values: numbered, because they are a list the team is held to. */
.value-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 28px);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.value-card {
	position: relative;
	padding: clamp(24px, 2.4vw, 34px);
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-radius: 14px;
	transition: border-color 300ms var(--iv-ease), box-shadow 300ms var(--iv-ease), transform 300ms var(--iv-ease);
}

.value-card:hover {
	border-color: var(--iv-border-strong);
	box-shadow: var(--iv-shadow);
	transform: translateY(-3px);
}

.value-card__index {
	position: absolute;
	top: clamp(20px, 2vw, 28px);
	right: clamp(20px, 2vw, 28px);
	color: var(--iv-primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	opacity: .35;
}

.value-card__icon {
	display: inline-grid;
	place-items: center;
	width: 46px; height: 46px;
	margin-bottom: 18px;
	background: var(--iv-primary-light);
	border-radius: 11px;
	color: var(--iv-primary);
	transition: background-color 300ms var(--iv-ease);
}

.value-card:hover .value-card__icon { background: #D3E6F5; }

.value-card__title {
	margin: 0 0 10px;
	color: var(--iv-navy);
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.value-card__text { margin: 0; color: var(--iv-muted); font-size: 0.9375rem; line-height: 1.65; }

@media (max-width: 1024px) {
	.value-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.story { grid-template-columns: 1fr; }

	.purpose { grid-template-columns: 1fr; }

	/* Stacked, the rule belongs above the second panel, not beside it. */
	.purpose__panel + .purpose__panel {
		padding-left: 0;
		padding-top: clamp(28px, 4vw, 44px);
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .16);
	}
}

@media (max-width: 640px) {
	.value-list { grid-template-columns: 1fr; }
	.stat-band { grid-template-columns: 1fr; gap: 24px; }
}

/* Our Approach (About) ===================================================== */

.section--our-approach { background: var(--iv-mist); }

.approach-detail {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: clamp(32px, 4vw, 72px);
	align-items: start;
}

/* The index tracks a list that is far taller than the viewport, so it rides
   along rather than scrolling away at the first phase. */
.approach-detail__index { position: sticky; top: calc(var(--iv-header-h) + 32px); }

.approach-index { margin: 0; padding: 0; list-style: none; }

.approach-index__item { position: relative; padding-left: 22px; }

/* One continuous rule behind the markers, cut short after the last. */
.approach-index__item::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 4px;
	width: 1px;
	background: var(--iv-border-strong);
}

.approach-index__item:first-child::before { top: 11px; }
.approach-index__item:last-child::before { bottom: auto; height: 11px; }

.approach-index__item::after {
	content: "";
	position: absolute;
	top: 7px; left: 0;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--iv-mist);
	border: 2px solid var(--iv-border-strong);
	transition: border-color var(--iv-base) var(--iv-ease), background-color var(--iv-base) var(--iv-ease);
}

.approach-index__item.is-current::after { border-color: var(--iv-primary); background: var(--iv-primary); }

.approach-index__link {
	display: block;
	padding: 0 0 26px;
	color: var(--iv-muted);
	text-decoration: none;
	transition: color var(--iv-base) var(--iv-ease);
}

.approach-index__item:last-child .approach-index__link { padding-bottom: 0; }

.approach-index__item.is-current .approach-index__link,
.approach-index__link:hover { color: var(--iv-navy); }

.approach-index__number {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--iv-primary);
}

.approach-index__title {
	display: block;
	margin-top: 2px;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.approach-detail__phases {
	display: grid;
	gap: clamp(16px, 1.6vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.approach-phase {
	padding: clamp(24px, 2.6vw, 40px);
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	box-shadow: var(--iv-shadow-sm);
	/* The index links here; clear the fixed header before the heading. */
	scroll-margin-top: calc(var(--iv-header-h) + 24px);
}

.approach-phase__head {
	display: flex;
	align-items: baseline;
	gap: clamp(16px, 1.8vw, 28px);
	padding-bottom: 20px;
	border-bottom: 1px solid var(--iv-border);
}

.approach-phase__number {
	flex: none;
	color: var(--iv-primary);
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.approach-phase__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }

.approach-phase__title {
	margin: 0;
	color: var(--iv-navy);
	font-size: var(--iv-fs-h3);
	letter-spacing: -0.02em;
}

.approach-phase__marker {
	margin: 0;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--iv-primary-light);
	color: var(--iv-primary-dark);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: .04em;
	white-space: nowrap;
}

.approach-phase__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(20px, 2.4vw, 40px);
	padding-top: 20px;
}

.approach-phase__lead { margin: 0; color: var(--iv-slate); font-size: var(--iv-fs-body); line-height: 1.75; }

.approach-phase__outputs-label {
	margin: 0 0 12px;
	color: var(--iv-muted);
	font-size: var(--iv-fs-eyebrow);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.approach-phase__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.approach-phase__output {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px;
	color: var(--iv-slate);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.approach-phase__mark { display: inline-flex; margin-top: 2px; color: var(--iv-primary); }

@media (max-width: 1024px) {
	/* The index costs a column the phases need more than the orientation is
	   worth; the phases carry their own numbers anyway. */
	.approach-detail { grid-template-columns: 1fr; }
	.approach-detail__index { display: none; }
}

@media (max-width: 768px) {
	.approach-phase__body { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.approach-phase__head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* "The two things people ask us next" (About) ============================== */

.more-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 28px);
}

.more-card {
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 2.4vw, 36px);
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	box-shadow: var(--iv-shadow-sm);
	text-decoration: none;
	transition: border-color 300ms var(--iv-ease), box-shadow 300ms var(--iv-ease), transform 300ms var(--iv-ease);
}

.more-card:hover,
.more-card:focus-visible {
	border-color: rgba(var(--iv-primary-rgb), .38);
	box-shadow: var(--iv-shadow);
	transform: translateY(-3px);
}

.more-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	margin-bottom: 18px;
	border-radius: var(--iv-radius);
	background: var(--iv-primary-light);
	color: var(--iv-primary);
	transition: background-color 300ms var(--iv-ease);
}

.more-card:hover .more-card__icon { background: #D3E6F5; }

.more-card__title {
	margin: 0 0 10px;
	color: var(--iv-navy);
	font-size: var(--iv-fs-h3);
	letter-spacing: -0.02em;
}

.more-card__text { margin: 0; color: var(--iv-muted); font-size: var(--iv-fs-small); line-height: 1.7; }

.more-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Pushed to the foot so both cards' links sit level however the copy wraps. */
	margin-top: auto;
	padding-top: 20px;
	color: var(--iv-primary);
	font-size: var(--iv-fs-small);
	font-weight: 600;
}

.more-card__link svg { transition: transform var(--iv-base) var(--iv-ease); }
.more-card:hover .more-card__link svg { transform: translateX(4px); }

@media (max-width: 768px) {
	.more-grid { grid-template-columns: 1fr; }
}