/* =============================================================================
   Invergis Enterprise — core stylesheet

   1.  Design tokens
   2.  Reset and base
   3.  Typography
   4.  Layout primitives
   5.  Buttons and links
   6.  Header
   7.  Desktop navigation and mega menu
   8.  Mobile navigation
   9.  Search
   10. Cards
   11. Forms
   12. Editorial content
   13. Footer
   14. Utilities and motion
   ========================================================================== */

/* 1. Design tokens ========================================================= */

:root {
	/* Brand — the primary and navy values are re-declared inline from the
	   Customizer, so changing the brand colour cascades through the system. */
	--iv-primary: #0E65A7;
	--iv-primary-dark: #0B5288;
	--iv-primary-light: #E7F1F8;
	--iv-primary-rgb: 14, 101, 167;
	--iv-navy: #1c242c;
	--iv-navy-raised: #0B2239;
	--iv-navy-line: #14375A;

	/* Neutrals */
	--iv-ink: #111827;
	--iv-slate: #334155;
	--iv-muted: #61707F;
	--iv-mist: #F4F7F9;
	--iv-white: #FFFFFF;
	--iv-border: #E3E9EF;
	--iv-border-strong: #CBD5E1;

	/* Typography */
	--iv-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--iv-fs-display: clamp(2.25rem, 1.5rem + 2.9vw, 3.5rem);
	--iv-fs-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.25rem);
	--iv-fs-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem);
	--iv-fs-h3: clamp(1.1875rem, 1.08rem + 0.5vw, 1.4375rem);
	--iv-fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	--iv-fs-body: 1.0625rem;
	--iv-fs-small: 0.9375rem;
	--iv-fs-eyebrow: 0.8125rem;

	/* Space */
	--iv-gutter: clamp(1.25rem, 0.7rem + 2vw, 2.5rem);
	--iv-section: clamp(3.5rem, 2.2rem + 4vw, 6.25rem);
	--iv-max: 1320px;
	--iv-max-narrow: 780px;

	/* Surface */
	--iv-radius: 4px;
	--iv-radius-lg: 8px;
	--iv-shadow-sm: 0 1px 2px rgba(28, 36, 44, .06);
	--iv-shadow: 0 6px 24px -12px rgba(28, 36, 44, .18);
	--iv-shadow-lg: 0 24px 60px -32px rgba(28, 36, 44, .32);

	/* Motion */
	--iv-ease: cubic-bezier(.22, .61, .36, 1);
	--iv-fast: 160ms;
	--iv-base: 260ms;

	--iv-header-h: 86px;
}

/* 2. Reset and base ======================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--iv-header-h) + 24px);
}

body {
	margin: 0;
	background: var(--iv-white);
	color: var(--iv-slate);
	font-family: var(--iv-font);
	font-size: var(--iv-fs-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

/* Shared icon presentation, so each sprite reference stays free of attributes. */
.icon {
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.iv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: var(--iv-primary); text-decoration: none; }
a:hover { color: var(--iv-primary-dark); }

button { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

figure { margin: 0; }
address { font-style: normal; }

:focus-visible {
	outline: 2px solid var(--iv-primary);
	outline-offset: 3px;
	border-radius: 2px;
}

.section--dark :focus-visible,
.site-footer :focus-visible,
.page-hero :focus-visible,
.hero :focus-visible {
	outline-color: #7FC0EA;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px; left: 12px;
	z-index: 999;
	width: auto; height: auto;
	clip: auto; clip-path: none;
	padding: 12px 20px;
	background: var(--iv-white);
	color: var(--iv-ink);
	font-weight: 600;
	box-shadow: var(--iv-shadow);
	border-radius: var(--iv-radius);
}

/* 3. Typography ============================================================ */

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--iv-ink);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.022em;
}

h1 { font-size: var(--iv-fs-h1); }
h2 { font-size: var(--iv-fs-h2); }
h3 { font-size: var(--iv-fs-h3); line-height: 1.3; letter-spacing: -0.012em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong { color: var(--iv-ink); font-weight: 600; }

/* 4. Layout primitives ===================================================== */

.container {
	width: 100%;
	max-width: var(--iv-max);
	margin-inline: auto;
	padding-inline: var(--iv-gutter);
}

.container--narrow { max-width: var(--iv-max-narrow); }

.site-main { display: block; }

.section { padding-block: var(--iv-section); position: relative; }
.section--muted { background: var(--iv-mist); }

.section--dark {
	background: var(--iv-navy);
	color: #A8BED2;
	overflow: hidden;
}

.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--iv-white); }

/* Two dark sections in a row otherwise merge into one undifferentiated block.
   The second takes the raised navy and a hairline, so they read as stacked
   layers. Sibling selectors keep this correct however sections are reordered
   or switched off in the Customizer. */
.section--dark + .section--dark,
.section--services + .section--dark,
.section--industries + .section--dark {
	background: var(--iv-navy-raised);
}

.section--dark + .section--dark,
.section--dark + .section--services,
.section--dark + .section--industries,
.section--services + .section--dark,
.section--services + .section--industries,
.section--industries + .section--dark,
.section--industries + .section--services {
	border-top: 1px solid rgba(255, 255, 255, .08);
}

/* A faint blueprint grid used on dark sections and heroes. */
.section__grid,
.page-hero__grid,
.hero__backdrop {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(79, 163, 219, .07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(79, 163, 219, .07) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 78%);
}

.section-header { max-width: 780px; margin-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
.section-header--center { margin-inline: auto; text-align: center; }

.section-header--split {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(24px, 4vw, 72px);
	max-width: none;
}

.section-header--split .section-header__copy { max-width: 62ch; }
.section-header--split .section-header__action { flex: none; }

.section-header--split .section-header__heading {
	font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* A rule sets the eyebrow off the way the reference does. */
.section-header--split .section-header__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
}

.section-header--split .section-header__eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	flex: none;
}

.section-header__eyebrow {
	margin: 0 0 12px;
	color: var(--iv-primary);
	font-size: var(--iv-fs-eyebrow);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* The inverted palette applies wherever the header sits on a dark section,
   not only where the modifier was passed: brand blue on navy measures 2.6:1,
   so an eyebrow that misses the modifier is unreadable rather than off-brand. */
.section-header--invert .section-header__eyebrow,
.section--dark .section-header__eyebrow { color: #6FB3E2; }

.section-header--invert .section-header__heading,
.section--dark .section-header__heading { color: var(--iv-white); }

.section-header__heading { margin: 0; }
.section-header__text { margin: 18px 0 0; font-size: var(--iv-fs-lead); color: var(--iv-muted); }

.section-header--invert .section-header__text,
.section--dark .section-header__text { color: #A8BED2; }
.section-header__link { margin: 22px 0 0; }

/* 5. Buttons =============================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: var(--iv-radius);
	font-size: var(--iv-fs-small);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.005em;
	cursor: pointer;
	transition: background-color var(--iv-fast) var(--iv-ease),
		border-color var(--iv-fast) var(--iv-ease),
		color var(--iv-fast) var(--iv-ease),
		transform var(--iv-fast) var(--iv-ease);
}

.btn__icon { transition: transform var(--iv-base) var(--iv-ease); }
.btn:hover .btn__icon { transform: translateX(4px); }

.btn--primary { background: var(--iv-primary); border-color: var(--iv-primary); color: var(--iv-white); }
.btn--primary:hover { background: var(--iv-primary-dark); border-color: var(--iv-primary-dark); color: var(--iv-white); }

.btn--secondary { background: var(--iv-white); border-color: var(--iv-border-strong); color: var(--iv-ink); }
.btn--secondary:hover { border-color: var(--iv-primary); color: var(--iv-primary); }

.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .3); color: var(--iv-white); }
.btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); color: var(--iv-white); }

.btn--light { background: var(--iv-white); border-color: var(--iv-white); color: var(--iv-primary); }
.btn--light:hover { background: var(--iv-primary-light); color: var(--iv-primary-dark); }

.btn--outline {
	padding: 14px 26px;
	background: transparent;
	border-color: rgba(255, 255, 255, .35);
	border-radius: 100px;
	color: var(--iv-white);
}

.btn--outline:hover {
	background: rgba(255, 255, 255, .1);
	border-color: var(--iv-white);
	color: var(--iv-white);
}

.btn--link {
	padding: 0;
	background: none;
	border: 0;
	color: var(--iv-primary);
	font-size: var(--iv-fs-small);
}
.btn--link:hover { color: var(--iv-primary-dark); }

/* 6. Header ================================================================ */

.site-header {
	position: relative;
	z-index: 100;
	background: var(--iv-white);
	border-bottom: 1px solid var(--iv-border);
	transition: background-color var(--iv-base) var(--iv-ease),
		border-color var(--iv-base) var(--iv-ease),
		box-shadow var(--iv-base) var(--iv-ease);
}

.site-header--sticky { position: sticky; top: 0; }
.admin-bar .site-header--sticky { top: 32px; }

/* A solid header gets a shadow once the page scrolls under it; the transparent
   variant swaps its whole appearance instead (below). */
.site-header.is-scrolled { box-shadow: 0 1px 20px -10px rgba(28, 36, 44, .3); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 2vw, 40px);
	min-height: var(--iv-header-h);
}

/* Transparent over the hero, solid once the page scrolls. */
.has-transparent-header .site-header {
	position: absolute;
	inset-inline: 0;
	background: transparent;
	border-bottom-color: rgba(255, 255, 255, .12);
}

.has-transparent-header .site-header--sticky { position: fixed; top: 0; }
.admin-bar.has-transparent-header .site-header--sticky { top: 32px; }

.has-transparent-header .site-header.is-scrolled {
	position: fixed;
	background: var(--iv-white);
	border-bottom-color: var(--iv-border);
	box-shadow: 0 1px 20px -8px rgba(28, 36, 44, .28);
	animation: iv-header-drop var(--iv-base) var(--iv-ease);
}

@keyframes iv-header-drop {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

/* Branding — the site name is client-supplied and can be far longer than the
   space a small header has for it, so it stays truncatable. It holds its full
   width wherever the nav is on screen, and gives way only in the mobile header
   or when a name is long enough to crowd the nav out. */
.site-branding { flex: 0 0 auto; min-width: 0; max-width: 32%; }

.site-branding__link,
.site-branding__wordmark {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.site-branding__logo { max-height: 44px; width: auto; }
.site-branding__logo--inverted { display: none; }

.site-branding__mark { color: var(--iv-primary); display: inline-flex; flex: none; }

.site-branding__name {
	color: var(--iv-ink);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.has-transparent-header .site-header:not(.is-scrolled) .site-branding__name { color: var(--iv-white); }
.has-transparent-header .site-header:not(.is-scrolled) .site-branding__mark { color: #7FC0EA; }

.has-transparent-header .site-header:not(.is-scrolled) .site-branding__logo--inverted { display: block; }
.has-transparent-header .site-header:not(.is-scrolled) .site-branding__logo--inverted ~ .site-branding__logo--default,
.has-transparent-header .site-header:not(.is-scrolled) .site-branding__logo--default:not(:only-child) { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.site-header__cta { padding: 12px 18px; letter-spacing: -0.005em; }

.site-header__search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--iv-radius);
	color: var(--iv-slate);
	cursor: pointer;
	transition: color var(--iv-fast) var(--iv-ease), background-color var(--iv-fast) var(--iv-ease);
}
.site-header__search-toggle:hover { background: var(--iv-mist); color: var(--iv-primary); }

.has-transparent-header .site-header:not(.is-scrolled) .site-header__search-toggle { color: rgba(255, 255, 255, .82); }
.has-transparent-header .site-header:not(.is-scrolled) .site-header__search-toggle:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.site-header__burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius);
	cursor: pointer;
}

.site-header__burger-box { display: grid; gap: 5px; width: 20px; }

.site-header__burger-bar {
	height: 1.5px;
	background: var(--iv-ink);
	border-radius: 2px;
	transition: transform var(--iv-base) var(--iv-ease), opacity var(--iv-fast) var(--iv-ease);
}

.has-transparent-header .site-header:not(.is-scrolled) .site-header__burger { border-color: rgba(255, 255, 255, .3); }
.has-transparent-header .site-header:not(.is-scrolled) .site-header__burger-bar { background: var(--iv-white); }

.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(2) { opacity: 0; }
.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* 7. Desktop navigation ==================================================== */

.nav { flex: 1 1 auto; display: flex; justify-content: center; }

/* No search and no button: the actions column is empty, so the menu takes the
   right edge instead of centring against dead space. */
.site-header__inner--bare .nav { justify-content: flex-end; }
.nav__list { display: flex; align-items: center; gap: clamp(2px, 1vw, 16px); }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item--mega { position: static; }

/* Uppercase, letter-spaced wordmarks rather than sentence-case links: the
   restraint is what makes an enterprise header read as considered. */
.nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 12px 8px;
	color: var(--iv-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: .085em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--iv-fast) var(--iv-ease);
}

/* The hover indicator carries the affordance the chevron used to. */
.nav__link::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 4px;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--iv-base) var(--iv-ease);
}

.nav__item:hover > .nav__link::after,
.nav__item:focus-within > .nav__link::after,
.nav__item.is-current > .nav__link::after { transform: scaleX(1); }

.nav__item--has-children > .nav__link { padding-right: 2px; }
.nav__link:hover, .nav__item.is-current > .nav__link { color: var(--iv-primary); }

.has-transparent-header .site-header:not(.is-scrolled) .nav__link { color: rgba(255, 255, 255, .9); }
.has-transparent-header .site-header:not(.is-scrolled) .nav__link:hover,
.has-transparent-header .site-header:not(.is-scrolled) .nav__item.is-current > .nav__link { color: #fff; }

.nav__toggle {
	display: inline-flex;
	align-items: center;
	padding: 12px 2px;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

/* At rest the chevron is invisible but keeps its space, so the row matches the
   clean reference header and nothing shifts when it fades in on engagement.
   The button itself stays in the DOM throughout for assistive technology. */
.nav__chevron {
	color: var(--iv-muted);
	opacity: 0;
	transition: transform var(--iv-base) var(--iv-ease), opacity var(--iv-fast) var(--iv-ease);
}

.nav__item--has-children:hover .nav__chevron,
.nav__item--has-children:focus-within .nav__chevron { opacity: 1; }
.has-transparent-header .site-header:not(.is-scrolled) .nav__chevron { color: rgba(255, 255, 255, .7); }

.nav__item--has-children:hover .nav__chevron,
.nav__item--has-children:focus-within .nav__chevron { transform: rotate(180deg); }

/* Standard dropdown */
.nav__submenu {
	position: absolute;
	top: calc(100% - 2px);
	left: 0;
	min-width: 260px;
	padding: 10px;
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius-lg);
	box-shadow: var(--iv-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--iv-base) var(--iv-ease), transform var(--iv-base) var(--iv-ease), visibility var(--iv-base);
}

.nav__item--has-children:hover > .nav__submenu,
.nav__item--has-children:focus-within > .nav__submenu,
.nav__item--has-children.is-open > .nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav__item--suppressed:hover > .nav__submenu { opacity: 0; visibility: hidden; }

.nav__submenu .nav__link {
	display: block;
	padding: 10px 14px;
	border-radius: var(--iv-radius);
	color: var(--iv-slate);
	white-space: normal;
}

.nav__submenu .nav__link:hover { background: var(--iv-mist); color: var(--iv-primary); }

/* 7b. Mega menu ============================================================ */

/* The panel floats below the header as a rounded card rather than a full-bleed
   bar, so it reads as a surface laid over the page. */
.mega {
	position: absolute;
	top: 100%;
	inset-inline: 0;
	padding: 10px var(--iv-gutter) 28px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--iv-base) var(--iv-ease), transform var(--iv-base) var(--iv-ease), visibility var(--iv-base);
}

.nav__item--mega:hover > .mega,
.nav__item--mega:focus-within > .mega,
.nav__item--mega.is-open > .mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav__item--mega.nav__item--suppressed:hover > .mega { opacity: 0; visibility: hidden; }

.mega__shell {
	display: grid;
	grid-template-columns: 23% minmax(0, 1fr) 22%;
	max-width: min(1680px, 100%);
	margin-inline: auto;
	background: var(--iv-white);
	border: 1px solid var(--iv-border);
	border-radius: 16px;
	box-shadow: 0 40px 80px -40px rgba(28, 36, 44, .45);
	overflow: hidden;
	max-height: min(88vh, 760px);
}

.mega__col { min-width: 0; }

/* The rail: the index of everything the menu covers. */
.mega__rail {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 22px 0 18px;
	background: var(--iv-white);
	border-right: 1px solid var(--iv-border);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mega__eyebrow {
	margin: 0 0 12px;
	padding-inline: 22px;
	color: var(--iv-muted);
	font-size: var(--iv-fs-eyebrow);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.mega-rail { margin: 0; padding: 0; list-style: none; }
.mega-rail__row { display: block; }

.mega-rail__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 11px 18px 11px 22px;
	color: var(--iv-slate);
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: background-color var(--iv-fast) var(--iv-ease), color var(--iv-fast) var(--iv-ease), border-color var(--iv-fast) var(--iv-ease);
}

/* Active and hover are one state: the rail entry you are on is the one the
   detail beside it is showing. */
.mega-rail__item.is-active,
.mega-rail__item:hover {
	background: var(--iv-primary-light);
	border-left-color: var(--iv-primary);
	color: var(--iv-primary);
}

.mega-rail__item:focus-visible { outline: 2px solid var(--iv-primary); outline-offset: -2px; }

.mega-rail__icon { display: inline-flex; color: var(--iv-primary); }

.mega-rail__title {
	min-width: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.mega-rail__arrow {
	color: var(--iv-border-strong);
	transition: color var(--iv-fast) var(--iv-ease), transform var(--iv-fast) var(--iv-ease);
}

.mega-rail__item.is-active .mega-rail__arrow,
.mega-rail__item:hover .mega-rail__arrow { color: var(--iv-primary); transform: translateX(2px); }

.mega__explore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* Pushed to the foot so it sits below the list however long the list is. */
	margin: 18px 22px 0;
	padding-top: 16px;
	border-top: 1px solid var(--iv-border);
	color: var(--iv-primary);
	font-size: 0.8125rem;
	font-weight: 600;
}

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

/* The detail: what the highlighted record actually contains. */
.mega__detail {
	min-width: 0;
	padding: 26px clamp(20px, 2vw, 34px) 30px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* A grid beats `block` here: `[hidden]` from the UA stylesheet is a single
   `display: none`, and any display we set would outrank it. */
.mega-detail[hidden] { display: none; }

.mega-detail__head {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
	text-decoration: none;
}

.mega-detail__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 52px; height: 52px;
	border-radius: 12px;
	background: var(--iv-primary-light);
	color: var(--iv-primary);
	transition: background-color var(--iv-base) var(--iv-ease);
}

.mega-detail__head:hover .mega-detail__icon { background: #D3E6F5; }

.mega-detail__title {
	color: var(--iv-navy);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	transition: color var(--iv-fast) var(--iv-ease);
}

.mega-detail__head:hover .mega-detail__title { color: var(--iv-primary); }

.mega-detail__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px clamp(20px, 2.4vw, 48px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega-detail__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 10px 10px 10px 0;
	color: var(--iv-slate);
	font-size: 0.9375rem;
	line-height: 1.4;
	text-decoration: none;
	border-radius: 6px;
	transition: color var(--iv-fast) var(--iv-ease);
}

.mega-detail__link svg {
	color: var(--iv-border-strong);
	transition: color var(--iv-fast) var(--iv-ease), transform var(--iv-fast) var(--iv-ease);
}

.mega-detail__link:hover { color: var(--iv-primary); }
.mega-detail__link:hover svg { color: var(--iv-primary); transform: translateX(3px); }
.mega-detail__link:focus-visible { outline: 2px solid var(--iv-primary); outline-offset: 2px; }

.mega-detail__text { margin: 0; color: var(--iv-muted); font-size: 0.9375rem; line-height: 1.7; }

.mega__col--promo { background: linear-gradient(180deg, #F4F9FD 0%, #E9F2FA 100%); }

.mega-promo {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(14px, 1.2vw, 20px);
	color: inherit;
}

.mega-promo__media {
	display: block;
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 8 / 7;
	background: var(--iv-navy);
}

.mega-promo__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--iv-ease); }
.mega-promo:hover .mega-promo__media img { transform: scale(1.05); }

.mega-promo__placeholder {
	display: grid;
	place-items: center;
	width: 100%; height: 100%;
	background: linear-gradient(150deg, #0B2239 0%, #0E3E68 60%, #14568C 100%);
	color: #7FC0EA;
}

.mega-promo__body { display: block; padding: clamp(16px, 1.4vw, 22px) 4px 4px; }

.mega-promo__eyebrow {
	display: block;
	margin-bottom: 10px;
	color: var(--iv-primary);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.mega-promo__heading {
	display: block;
	margin-bottom: 10px;
	color: var(--iv-navy);
	font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.25rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
}

.mega-promo__text { display: block; margin-bottom: 16px; color: var(--iv-muted); font-size: 0.8125rem; line-height: 1.55; }

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

.mega-promo__cta svg { transition: transform var(--iv-base) var(--iv-ease); }
.mega-promo:hover .mega-promo__cta svg { transform: translateX(4px); }

/* The promo yields its column first: it is an invitation, while the rail and
   the detail are the navigation the menu exists for. The detail drops to one
   column of links before anything starts to scroll. */
@media (max-width: 1500px) {
	.mega__shell { grid-template-columns: 26% minmax(0, 1fr); }
	.mega__col--promo { display: none; }
}

@media (max-width: 1340px) {
	.mega__shell { grid-template-columns: 30% minmax(0, 1fr); }
	.mega__rail { padding-top: 18px; }
	.mega-rail__item { padding: 9px 14px 9px 18px; gap: 10px; }
	.mega-rail__title { font-size: 0.875rem; }
	.mega__eyebrow { padding-inline: 18px; }
	.mega__explore { margin-inline: 18px; }
	.mega__detail { padding: 22px 20px 24px; }
	.mega-detail__list { grid-template-columns: 1fr; }
	.mega-detail__icon { width: 44px; height: 44px; }
	.mega-detail__title { font-size: 1.1875rem; }
}

/* 8. Mobile navigation ===================================================== */

.mobile-nav {
	position: fixed;
	inset: var(--iv-header-h) 0 0;
	z-index: 95;
	background: var(--iv-white);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform var(--iv-base) var(--iv-ease);
}

.admin-bar .mobile-nav { top: calc(var(--iv-header-h) + 32px); }
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__inner { padding: 24px var(--iv-gutter) 48px; }

.mobile-nav__item { border-bottom: 1px solid var(--iv-border); }
.mobile-nav__item--parent { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.mobile-nav__item--parent > .mobile-nav__submenu { grid-column: 1 / -1; }

.mobile-nav__link {
	display: block;
	padding: 16px 0;
	color: var(--iv-ink);
	font-size: 1.0625rem;
	font-weight: 500;
}

.mobile-nav__item--depth-0 > .mobile-nav__link {
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: .075em;
	text-transform: uppercase;
}

.mobile-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	background: none;
	border: 0;
	color: var(--iv-muted);
	cursor: pointer;
}

.mobile-nav__minus { display: none; }
.mobile-nav__toggle[aria-expanded="true"] .mobile-nav__plus { display: none; }
.mobile-nav__toggle[aria-expanded="true"] .mobile-nav__minus { display: block; }

.mobile-nav__submenu { padding-left: 14px; border-left: 2px solid var(--iv-primary-light); margin-bottom: 12px; }
.mobile-nav__submenu .mobile-nav__item { border-bottom: 0; }
.mobile-nav__submenu .mobile-nav__link { padding: 11px 0; font-size: 1rem; color: var(--iv-slate); font-weight: 400; }
.mobile-nav__submenu .mobile-nav__submenu .mobile-nav__link { font-size: .9375rem; color: var(--iv-muted); }
.mobile-nav__item--all .mobile-nav__link { color: var(--iv-primary); font-weight: 600; }

.mobile-nav__footer { margin-top: 28px; display: grid; gap: 20px; justify-items: start; }
.mobile-nav__cta { width: 100%; justify-content: center; }
.mobile-nav__contact { display: grid; gap: 12px; }
.mobile-nav__contact li { display: flex; align-items: center; gap: 10px; color: var(--iv-muted); }
.mobile-nav__contact a { color: var(--iv-slate); }

.site-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(28, 36, 44, .5);
	opacity: 0;
	transition: opacity var(--iv-base) var(--iv-ease);
}
.site-overlay.is-visible { opacity: 1; }

/* 9. Search ================================================================ */

.site-search {
	border-top: 1px solid var(--iv-border);
	background: var(--iv-white);
	padding-block: 20px;
}

.search-form__field {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 6px 6px 16px;
	background: var(--iv-white);
	border: 1px solid var(--iv-border-strong);
	border-radius: var(--iv-radius);
}

.search-form__field:focus-within { border-color: var(--iv-primary); box-shadow: 0 0 0 3px rgba(var(--iv-primary-rgb), .12); }
.search-form__icon { color: var(--iv-muted); }

.search-form__input {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	border: 0;
	background: none;
	color: var(--iv-ink);
	font: inherit;
}
.search-form__input:focus { outline: none; }

.search-form__submit {
	padding: 11px 20px;
	background: var(--iv-primary);
	border: 0;
	border-radius: var(--iv-radius);
	color: var(--iv-white);
	font-size: var(--iv-fs-small);
	font-weight: 600;
	cursor: pointer;
}
.search-form__submit:hover { background: var(--iv-primary-dark); }

/* 10. Cards ================================================================ */

.card-grid { display: grid; gap: clamp(16px, 1.6vw, 24px); }
.card-grid--services { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Four across on the first row, three on the rest: every row stays full, and
   the change of pace is what gives the grid its character. */
.card-grid--services > * { grid-column: span 4; }
.card-grid--services > *:nth-child(-n + 4) { grid-column: span 3; }
.card-grid--services > *:nth-child(n + 5) .tile-card__media { aspect-ratio: 16 / 9; }
/* Three columns divide the six industries into two full rows; four would
   leave the second row two short. */
.card-grid--industries { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.card-grid--insights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--capabilities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid--benefits { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.media-placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: linear-gradient(140deg, var(--iv-mist), #E6EEF5);
	color: var(--iv-primary);
	opacity: .5;
}

/* 11. Forms ================================================================ */

label { display: block; color: var(--iv-ink); font-size: var(--iv-fs-small); font-weight: 500; margin-bottom: 6px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], input[type="password"], select, textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--iv-white);
	border: 1px solid var(--iv-border-strong);
	border-radius: var(--iv-radius);
	color: var(--iv-ink);
	font: inherit;
	font-size: var(--iv-fs-small);
	transition: border-color var(--iv-fast) var(--iv-ease), box-shadow var(--iv-fast) var(--iv-ease);
}

textarea { resize: vertical; min-height: 120px; }

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--iv-primary);
	box-shadow: 0 0 0 3px rgba(var(--iv-primary-rgb), .14);
}

select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2361707F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

.required { color: #B42318; margin-left: 2px; }

/* 12. Editorial content ==================================================== */

.entry-content { color: var(--iv-slate); font-size: var(--iv-fs-lead); line-height: 1.75; }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 { margin-top: 2em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.entry-content h3 { margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-left: 1.35em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: .5em; }
.entry-content img { border-radius: var(--iv-radius-lg); }

.entry-content blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--iv-primary);
	color: var(--iv-ink);
	font-size: 1.25rem;
	line-height: 1.5;
}

.entry-content code {
	padding: 2px 6px;
	background: var(--iv-mist);
	border-radius: 3px;
	font-size: .9em;
}

.entry-content pre {
	padding: 20px;
	overflow-x: auto;
	background: var(--iv-navy);
	border-radius: var(--iv-radius-lg);
	color: #CFE3F2;
	font-size: .9375rem;
}

.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--iv-fs-small); }
.entry-content th, .entry-content td { padding: 12px 14px; border-bottom: 1px solid var(--iv-border); text-align: left; }
.entry-content th { color: var(--iv-ink); font-weight: 600; }

/* 13. Footer =============================================================== */

.site-footer {
	background: var(--iv-navy);
	color: #93A9BF;
	padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem) 0;
	font-size: var(--iv-fs-small);
}

.site-footer a { color: #C3D4E3; }
.site-footer a:hover { color: var(--iv-white); }

.site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 2.4fr);
	gap: clamp(32px, 4vw, 72px);
	padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.site-footer__logo img { max-height: 40px; width: auto; }

.site-footer__wordmark {
	color: var(--iv-white);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.site-footer__summary { margin: 18px 0 24px; max-width: 42ch; line-height: 1.6; }

.site-footer__contact { display: grid; gap: 14px; margin-bottom: 26px; }
.site-footer__contact li { display: flex; gap: 12px; align-items: start; }
.site-footer__contact svg { color: var(--iv-primary); margin-top: 2px; }

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 2.5vw, 40px);
}

.footer-column__title {
	margin: 0 0 18px;
	color: var(--iv-white);
	font-size: var(--iv-fs-eyebrow);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.footer-column__list { display: grid; gap: 11px; }
.footer-column__list a { display: inline-block; transition: transform var(--iv-fast) var(--iv-ease); }
.footer-column__list a:hover { transform: translateX(3px); }

.site-footer__widgets { padding-block: 32px; border-top: 1px solid var(--iv-navy-line); }

.social-links { display: flex; gap: 10px; }

.social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border: 1px solid var(--iv-navy-line);
	border-radius: var(--iv-radius);
	color: #C3D4E3;
	transition: border-color var(--iv-fast) var(--iv-ease), background-color var(--iv-fast) var(--iv-ease), color var(--iv-fast) var(--iv-ease);
}

.social-links a:hover { background: var(--iv-primary); border-color: var(--iv-primary); color: var(--iv-white); }

.social-links--mobile a, .social-links--contact a { border-color: var(--iv-border); color: var(--iv-slate); }
.social-links--mobile a:hover, .social-links--contact a:hover { background: var(--iv-primary); border-color: var(--iv-primary); color: var(--iv-white); }

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 26px;
	border-top: 1px solid var(--iv-navy-line);
	font-size: .875rem;
}

.site-footer__copyright { margin: 0; }
.site-footer__legal-list { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* 14. Utilities and motion ================================================= */

.is-flipped { transform: rotate(180deg); }

.pagination { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.pagination__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

.pagination__item .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px; height: 42px;
	padding: 0 12px;
	border: 1px solid var(--iv-border);
	border-radius: var(--iv-radius);
	color: var(--iv-slate);
	font-size: var(--iv-fs-small);
	font-weight: 500;
}

.pagination__item .page-numbers:hover { border-color: var(--iv-primary); color: var(--iv-primary); }
.pagination__item .page-numbers.current { background: var(--iv-primary); border-color: var(--iv-primary); color: var(--iv-white); }

[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms var(--iv-ease), transform 600ms var(--iv-ease);
	transition-delay: var(--iv-reveal-delay, 0ms);
}

[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	[data-reveal] { opacity: 1; transform: none; }
}

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

@media (max-width: 1340px) {
	.nav__link { font-size: 0.75rem; letter-spacing: .06em; padding-inline: 6px; }
	.nav__link::after { left: 6px; right: 6px; }
	.site-header__cta { padding-inline: 15px; }
}

@media (max-width: 1200px) {
	:root { --iv-header-h: 72px; }

	.card-grid--capabilities, .card-grid--benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Two even columns divide ten exactly; the asymmetric spans are released. */
	.card-grid--services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card-grid--services > *,
	.card-grid--services > *:nth-child(-n + 4) { grid-column: auto; }
	.card-grid--services > *:nth-child(n + 5) .tile-card__media { aspect-ratio: 5 / 4; }

	.site-branding { flex: 0 1 auto; max-width: none; }
	.nav, .site-header__cta { display: none; }
	.site-header__burger { display: inline-flex; }
	.site-header__inner { justify-content: space-between; }

	.section-header--split { flex-direction: column; align-items: flex-start; }
	.section-header--split .section-header__action { padding-bottom: 0; }
}

@media (max-width: 1024px) {
	.card-grid--insights, .card-grid--why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card-grid--industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__top { grid-template-columns: 1fr; }
	.site-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 576px) {
	.site-header__inner { gap: 12px; }
	.site-branding__name { font-size: 1rem; }
	.site-branding__logo { max-height: 34px; }
}

@media (max-width: 640px) {
	.card-grid--services, .card-grid--insights, .card-grid--why,
	.card-grid--capabilities, .card-grid--benefits, .card-grid--industries {
		grid-template-columns: 1fr;
	}

	.site-footer__columns { grid-template-columns: 1fr; gap: 28px; }
	.site-footer__bottom { flex-direction: column; align-items: flex-start; }
	.btn { width: 100%; justify-content: center; }
	.btn--outline {
	padding: 14px 26px;
	background: transparent;
	border-color: rgba(255, 255, 255, .35);
	border-radius: 100px;
	color: var(--iv-white);
}

.btn--outline:hover {
	background: rgba(255, 255, 255, .1);
	border-color: var(--iv-white);
	color: var(--iv-white);
}

.btn--link { width: auto; }
}