/* ==========================================================================
   Insure Pillar — design system
   Palette sampled from the brand logo:
     blue #0891D1 · red #E80303 · green #3FB500 · ink #3D3D3D
   ========================================================================== */

:root {
	--ip-blue: #0891d1;
	--ip-blue-600: #0577ae;
	--ip-blue-700: #045d88;
	--ip-navy: #06304a;
	--ip-navy-800: #04263a;
	--ip-red: #e80303;
	--ip-red-600: #c00202;
	--ip-green: #3fb500;
	--ip-green-600: #349400;
	--ip-ink: #3d3d3d;
	--ip-body: #4f5b66;
	--ip-muted: #7a8794;
	--ip-line: #e3e9ef;
	--ip-bg: #ffffff;
	--ip-bg-soft: #f4f8fb;
	--ip-bg-tint: #eef6fb;

	--ip-radius: 12px;
	--ip-radius-lg: 18px;
	--ip-radius-pill: 999px;
	/* Elevation is deliberately shallow: on a page made of cards, heavy
	   shadows read as noise. Depth comes from the border and the surface. */
	--ip-shadow-sm: 0 1px 2px rgba(6, 48, 74, 0.04);
	--ip-shadow: 0 2px 6px rgba(6, 48, 74, 0.05), 0 8px 20px rgba(6, 48, 74, 0.045);
	--ip-shadow-lg: 0 12px 34px rgba(6, 48, 74, 0.10);

	--ip-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ip-font-head: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Single site-wide content width — the wider measure the header used to
	   carry. Header, hero, every section and the footer all read this token,
	   so the logo and all page content share one left and right edge. */
	--ip-container: 1360px;
	--ip-gutter: 24px;
	--ip-section-y: 74px;
	--ip-header-h: 88px;
}

/* --------------------------------------------------------------- reset --- */

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

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

body {
	margin: 0;
	background: var(--ip-bg);
	color: var(--ip-body);
	font-family: var(--ip-font);
	font-size: 16.5px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.6em;
	font-family: var(--ip-font-head);
	color: var(--ip-navy);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.015em;
}

h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem); }
h3 { font-size: clamp(1.18rem, 1.05rem + 0.5vw, 1.4rem); }
h4 { font-size: 1.08rem; }
h5 { font-size: 1.03rem; }
h6 { font-size: 0.93rem; text-transform: uppercase; letter-spacing: 0.08em; }

p { margin: 0 0 1.15em; }

a {
	color: var(--ip-blue-600);
	text-decoration: none;
	transition: color 0.18s ease;
}

a:hover,
a:focus-visible {
	color: var(--ip-red);
}

ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: 0.4em; }

blockquote {
	margin: 1.6em 0;
	padding: 1.1em 1.5em;
	border-left: 4px solid var(--ip-blue);
	background: var(--ip-bg-soft);
	border-radius: 0 var(--ip-radius) var(--ip-radius) 0;
	color: var(--ip-navy);
	font-size: 1.06em;
}

blockquote p:last-child { margin-bottom: 0; }

code, pre, kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	padding: 1.1em 1.3em;
	background: var(--ip-navy);
	color: #dbe9f3;
	border-radius: var(--ip-radius);
	overflow-x: auto;
}

hr {
	border: 0;
	height: 1px;
	background: var(--ip-line);
	margin: 2.4em 0;
}

:focus-visible {
	outline: 3px solid var(--ip-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--ip-navy);
	color: #fff;
	border-radius: 0 0 var(--ip-radius) 0;
	font-weight: 600;
}

.skip-link:focus {
	left: 0;
	color: #fff;
}

/* Base size for every inline SVG from insurepillar_icon(). Context-specific
   rules further down are more specific and override this on purpose. */
.ip-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: currentColor;
}

/* ----------------------------------------------------------- structure --- */

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

/* Optional narrower reading measure — not used by any template, since the
   site deliberately keeps one width everywhere. */
.ip-container--narrow { max-width: 860px; }
.ip-container--wide { max-width: var(--ip-container); }

.ip-section {
	padding-block: var(--ip-section-y);
}

.ip-section--tight { padding-block: 56px; }
.ip-section--soft { background: var(--ip-bg-soft); }
.ip-section--tint { background: var(--ip-bg-tint); }

.ip-section--navy {
	background-color: var(--ip-navy);
	background-image: linear-gradient(135deg, var(--ip-navy) 0%, var(--ip-blue-700) 100%);
	color: rgba(255, 255, 255, 0.86);
}

.ip-section--navy h1,
.ip-section--navy h2,
.ip-section--navy h3,
.ip-section--navy h4 { color: #fff; }

.ip-grid {
	display: grid;
	gap: 26px;
	/* Equal-height rows: cards line up across the whole grid, not just within
	   a row, so the arrow links sit on one line down the page. */
	grid-auto-rows: 1fr;
}

.ip-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ip-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ip-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 980px) {
	.ip-grid--3,
	.ip-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.ip-grid--2,
	.ip-grid--3,
	.ip-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.ip-content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 52px;
	align-items: start;
}

@media (max-width: 1024px) {
	.ip-content-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------ section header --- */

.ip-section-head {
	max-width: 760px;
	margin-bottom: 48px;
}

.ip-section-head--center {
	margin-inline: auto;
	text-align: center;
}

.ip-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 6px 15px;
	border-radius: var(--ip-radius-pill);
	background: var(--ip-bg-tint);
	color: var(--ip-blue-700);
	font-size: 0.79rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ip-eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ip-red);
}

.ip-section--navy .ip-eyebrow {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.ip-section-head p {
	font-size: 1.06rem;
	color: var(--ip-muted);
	margin-bottom: 0;
}

.ip-section--navy .ip-section-head p { color: rgba(255, 255, 255, 0.82); }

/* --------------------------------------------------------------- button --- */

.ip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border: 2px solid transparent;
	border-radius: var(--ip-radius-pill);
	background: var(--ip-blue);
	color: #fff;
	font-family: var(--ip-font-head);
	font-size: 0.97rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ip-btn:hover,
.ip-btn:focus-visible {
	background: var(--ip-blue-600);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(8, 145, 209, 0.32);
}

.ip-btn--red { background: var(--ip-red); }

.ip-btn--red:hover,
.ip-btn--red:focus-visible {
	background: var(--ip-red-600);
	box-shadow: 0 10px 24px rgba(232, 3, 3, 0.28);
}

.ip-btn--green { background: var(--ip-green); }

.ip-btn--green:hover,
.ip-btn--green:focus-visible {
	background: var(--ip-green-600);
	box-shadow: 0 10px 24px rgba(63, 181, 0, 0.3);
}

.ip-btn--ghost {
	background: transparent;
	border-color: var(--ip-line);
	color: var(--ip-navy);
}

.ip-btn--ghost:hover,
.ip-btn--ghost:focus-visible {
	background: var(--ip-navy);
	border-color: var(--ip-navy);
	color: #fff;
	box-shadow: none;
}

.ip-btn--light {
	background: #fff;
	color: var(--ip-navy);
}

.ip-btn--light:hover,
.ip-btn--light:focus-visible {
	background: #fff;
	color: var(--ip-red);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.ip-btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.ip-btn--outline-light:hover,
.ip-btn--outline-light:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--ip-navy);
}

.ip-btn--sm { padding: 10px 20px; font-size: 0.88rem; }
.ip-btn--lg { padding: 17px 36px; font-size: 1.03rem; }
.ip-btn--block { display: flex; width: 100%; }

.ip-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.ip-btn-row--center { justify-content: center; }

.ip-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	font-size: 0.94rem;
	color: var(--ip-blue-600);
}

.ip-link-arrow::after {
	content: "→";
	transition: transform 0.18s ease;
}

.ip-link-arrow:hover::after { transform: translateX(4px); }

/* --------------------------------------------------------------- header --- */

.ip-topbar {
	background: var(--ip-navy);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.85rem;
}

.ip-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 42px;
	flex-wrap: wrap;
}

.ip-topbar__list {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ip-topbar__list li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.ip-topbar a {
	color: rgba(255, 255, 255, 0.86);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.ip-topbar a:hover { color: #fff; }

.ip-topbar__social {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ip-topbar__social a {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
}

.ip-topbar__social a:hover { background: var(--ip-blue); }

.ip-topbar__social svg { width: 14px; height: 14px; fill: currentColor; }

@media (max-width: 880px) {
	.ip-topbar { display: none; }
}

.ip-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: #fff;
	border-bottom: 1px solid var(--ip-line);
	transition: box-shadow 0.22s ease;
}

.ip-header.is-stuck { box-shadow: var(--ip-shadow); }

.admin-bar .ip-header { top: 32px; }

@media (max-width: 782px) {
	.admin-bar .ip-header { top: 46px; }
}

.ip-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--ip-header-h);
	flex-wrap: nowrap;
}

.ip-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.ip-brand img,
.ip-brand .custom-logo {
	max-height: 58px;
	width: auto;
}

.ip-brand__text .ip-brand__name {
	display: block;
	font-family: var(--ip-font-head);
	font-size: 1.32rem;
	font-weight: 800;
	color: var(--ip-navy);
	line-height: 1.1;
}

.ip-brand__text .ip-brand__tagline {
	display: block;
	font-size: 0.74rem;
	color: var(--ip-muted);
	letter-spacing: 0.04em;
}

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

/* ----------------------------------------------------------- navigation --- */

.ip-nav { min-width: 0; }

.ip-nav > ul {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ip-nav li { position: relative; margin: 0; }

.ip-nav a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 11px;
	border-radius: 8px;
	color: var(--ip-navy);
	font-family: var(--ip-font-head);
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}


.ip-nav a:hover,
.ip-nav .current-menu-item > a,
.ip-nav .current-menu-ancestor > a,
.ip-nav .current_page_item > a {
	background: var(--ip-bg-tint);
	color: var(--ip-blue-700);
}

.ip-nav .menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: 2px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: 0.65;
}

.ip-nav .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 20;
	min-width: 252px;
	margin: 0;
	padding: 10px;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius);
	box-shadow: var(--ip-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.ip-nav li:hover > .sub-menu,
.ip-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ip-nav .sub-menu .sub-menu {
	top: -10px;
	left: calc(100% + 6px);
}

.ip-nav .sub-menu a {
	padding: 9px 12px;
	font-size: 0.9rem;
	font-weight: 500;
	white-space: normal;
}

.ip-nav .sub-menu .menu-item-has-children > a::after {
	margin-left: auto;
	transform: rotate(-45deg);
}

.ip-nav-toggle {
	display: none;
	width: 46px;
	height: 46px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ip-line);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
}

.ip-nav-toggle span {
	position: relative;
	display: block;
	width: 20px;
	height: 2px;
	background: var(--ip-navy);
	border-radius: 2px;
	transition: background 0.18s ease;
}

.ip-nav-toggle span::before,
.ip-nav-toggle span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: var(--ip-navy);
	border-radius: 2px;
	transition: transform 0.22s ease, top 0.22s ease;
}

.ip-nav-toggle span::before { top: -6px; }
.ip-nav-toggle span::after { top: 6px; }

.ip-nav-toggle[aria-expanded="true"] span { background: transparent; }
.ip-nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.ip-nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1100px) {
	.ip-nav-toggle { display: inline-flex; }
	.ip-header__actions .ip-btn--quote { display: none; }

	.ip-nav {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 950;
		width: min(390px, 88vw);
		padding: 88px 22px 40px;
		background: #fff;
		box-shadow: var(--ip-shadow-lg);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.28s ease;
	}

	.ip-nav.is-open { transform: translateX(0); }

	.ip-nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.ip-nav a {
		padding: 13px 14px;
		font-size: 1rem;
		justify-content: space-between;
	}

	.ip-nav .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		padding: 2px 0 6px 14px;
		border: 0;
		border-left: 2px solid var(--ip-line);
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.ip-nav li.is-open > .sub-menu { display: block; }

	.ip-nav .menu-item-has-children > a::after {
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}

	.ip-nav li.is-open > a::after { transform: rotate(-135deg) translateY(-2px); }
}

.ip-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 940;
	background: rgba(6, 48, 74, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s;
}

.ip-nav-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}

/* ----------------------------------------------------------------- hero --- */

.ip-hero {
	position: relative;
	/* A fixed 650px stage: the hero is the same height whichever slide is
	   showing, so nothing below it shifts as the slider advances. */
	height: 650px;
	min-height: 650px;
	display: flex;
	align-items: center;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--ip-navy);
	background-image:
		radial-gradient(ellipse 90% 70% at 78% 8%, rgba(8, 145, 209, 0.55) 0%, rgba(8, 145, 209, 0) 60%),
		radial-gradient(ellipse 70% 60% at 8% 92%, rgba(63, 181, 0, 0.22) 0%, rgba(63, 181, 0, 0) 62%),
		linear-gradient(145deg, #052a41 0%, var(--ip-navy) 42%, var(--ip-blue-700) 100%);
	color: rgba(255, 255, 255, 0.88);
	padding-block: 56px 96px;
}

/* ------------------------------------------------- hero photograph --- */

/*
 * The banner treatment: a wide photograph across the whole band with the copy
 * over a darkened left side. One layer per slide, crossfaded with the copy, so
 * the picture changes with the words rather than a beat later.
 */

.ip-hero__photos {
	position: absolute;
	inset: 0;
}

.ip-hero__photo {
	position: absolute;
	inset: 0;
	display: block;
	background-position: center right;
	/* Fitted, not filled: the whole plate is shown, so no part of a
	   photograph is cropped away at the band's edges. */
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	/*
	 * A straight crossfade, with no drift. The slow zoom that used to sit here
	 * was a keyframe animation that only ran while .is-active was set, so the
	 * outgoing photograph snapped back the instant the class came off — a jolt
	 * in the middle of the fade. Scaling also worked against a fitted
	 * background: any zoom pushes part of the picture outside the band. One
	 * long, eased opacity change is both smoother and true to the crop.
	 */
	transition: opacity 1.1s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity;
}

.ip-hero__photo.is-active { opacity: 1; }

/*
 * The active photograph drifts very slowly inward while its slide is showing.
 * It is slow enough to read as depth rather than movement, and it restarts on
 * each slide because .is-active is added fresh.
 */


@media (prefers-reduced-motion: reduce) {
	.ip-hero__photo { transition: none; }
}

/*
 * Legibility, not decoration: the headline sits at the left, so the scrim is
 * heaviest there and clears by the right edge where the subject is. --ip-hero-dim
 * scales the whole thing from the widget.
 */
.ip-hero__scrim {
	position: absolute;
	inset: 0;
	display: block;
	background:
		linear-gradient(90deg,
			rgba(4, 38, 58, calc(0.94 * var(--ip-hero-dim, 1))) 0%,
			rgba(4, 38, 58, calc(0.88 * var(--ip-hero-dim, 1))) 30%,
			rgba(5, 42, 65, calc(0.55 * var(--ip-hero-dim, 1))) 52%,
			rgba(6, 48, 74, calc(0.16 * var(--ip-hero-dim, 1))) 74%,
			rgba(6, 48, 74, calc(0.05 * var(--ip-hero-dim, 1))) 100%),
		linear-gradient(180deg,
			rgba(4, 38, 58, calc(0.34 * var(--ip-hero-dim, 1))) 0%,
			rgba(4, 38, 58, 0) 26%,
			rgba(4, 38, 58, 0) 62%,
			rgba(4, 38, 58, calc(0.5 * var(--ip-hero-dim, 1))) 100%);
}

/* With a photograph the drifting orbs are noise, and the grid fights the
   picture — both step back. */
.ip-hero--photo .ip-hero__orb { display: none; }
.ip-hero--photo .ip-hero__grid { opacity: 0.25; }

/* Over a photograph the glass panel loses its contrast, so it takes a tinted
   backing instead of a near-transparent one. */
.ip-hero--photo .ip-hero__panel {
	border-color: rgba(255, 255, 255, 0.24);
	background: rgba(5, 36, 56, 0.66);
	box-shadow: 0 24px 60px rgba(2, 18, 30, 0.42);
}

.ip-hero--photo .ip-hero__float {
	background: rgba(5, 36, 56, 0.72);
	border-color: rgba(255, 255, 255, 0.22);
}

/* Narrow screens put the copy over the middle of the picture, so the scrim
   becomes a top-to-bottom wash instead of a left-to-right one. */
@media (max-width: 860px) {
	/* A 2.15:1 plate fitted into a phone-shaped band would be a thin strip
	   across the middle, so narrow screens fill instead, centred on where the
	   people are rather than on the right edge. */
	.ip-hero__photo {
		background-size: cover;
		background-position: 60% center;
	}

	.ip-hero__scrim {
		background:
			linear-gradient(180deg,
				rgba(4, 38, 58, calc(0.86 * var(--ip-hero-dim, 1))) 0%,
				rgba(4, 38, 58, calc(0.72 * var(--ip-hero-dim, 1))) 52%,
				rgba(4, 38, 58, calc(0.86 * var(--ip-hero-dim, 1))) 100%);
	}
}

/* Decorative parallax layers. Kept inside the hero's overflow:hidden box so
   they can never widen the document. */
.ip-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}

.ip-hero__orb {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(6px);
	will-change: transform;
	transform: translate3d(0, var(--ip-shift, 0px), 0);
}

.ip-hero__orb--1 {
	width: 620px;
	height: 620px;
	top: -240px;
	right: -180px;
	background: radial-gradient(circle, rgba(56, 189, 248, 0.38) 0%, rgba(56, 189, 248, 0) 68%);
}

.ip-hero__orb { opacity: 0.55; }

.ip-hero__orb--2 {
	width: 480px;
	height: 480px;
	bottom: -220px;
	left: -160px;
	background: radial-gradient(circle, rgba(63, 181, 0, 0.34) 0%, rgba(63, 181, 0, 0) 70%);
}

.ip-hero__orb--3 {
	width: 300px;
	height: 300px;
	top: 42%;
	left: 46%;
	background: radial-gradient(circle, rgba(232, 3, 3, 0.16) 0%, rgba(232, 3, 3, 0) 70%);
}

/* Faint blueprint grid for depth. */
.ip-hero__grid {
	position: absolute;
	inset: -10% -5%;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: radial-gradient(ellipse 62% 58% at 30% 40%, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 62% 58% at 30% 40%, #000 0%, transparent 78%);
	will-change: transform;
	transform: translate3d(0, var(--ip-shift, 0px), 0);
}

/* Curved transition into the section below. */
.ip-hero__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 1;
	line-height: 0;
	pointer-events: none;
}

.ip-hero__wave svg {
	display: block;
	width: 100%;
	height: 70px;
}

@media (max-width: 768px) {
	.ip-hero__wave svg { height: 40px; }
	.ip-hero { padding-block: 64px 88px; }
}

.ip-hero__inner {
	position: relative;
	width: 100%;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: 56px;
	align-items: center;
}

@media (max-width: 1024px) {
	.ip-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

.ip-hero h1 {
	color: #fff;
	margin-bottom: 22px;
	font-size: clamp(2.1rem, 1.35rem + 3vw, 3.5rem);
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.ip-hero h1 .ip-accent {
	background: linear-gradient(100deg, #8fd8ff 0%, #d8f3ff 45%, #9be86a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ip-hero__lead {
	font-size: 1.16rem;
	color: rgba(255, 255, 255, 0.86);
	max-width: 640px;
	margin-bottom: 32px;
}

.ip-hero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

.ip-hero__pills li {
	margin: 0;
	padding: 9px 17px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--ip-radius-pill);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-size: 0.86rem;
	font-weight: 600;
	color: #fff;
	transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.ip-hero__pills li:hover {
	background: rgba(255, 255, 255, 0.17);
	border-color: rgba(255, 255, 255, 0.42);
	transform: translateY(-2px);
}

/*
 * A single quiet line rather than a row of boxes: the same facts at a
 * fraction of the weight, and it fits inside the hero's fixed height.
 */
.ip-hero__trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ip-hero__trust-item {
	display: flex;
	align-items: baseline;
	gap: 7px;
}

/* Hairline separators instead of four framed boxes. */
.ip-hero__trust-item + .ip-hero__trust-item {
	padding-left: 20px;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.ip-hero__trust-item strong {
	font-family: var(--ip-font-head);
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}

.ip-hero__trust-item span {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
}

.ip-hero__card {
	position: relative;
	padding: 34px;
	background: #fff;
	border-radius: var(--ip-radius-lg);
	box-shadow:
		0 2px 6px rgba(2, 20, 32, 0.16),
		0 24px 60px rgba(2, 20, 32, 0.32);
	color: var(--ip-body);
}

/* Soft brand-tinted halo so the card reads as lifted off the gradient. */
.ip-hero__card::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(140deg, rgba(255, 255, 255, 0.85), rgba(56, 189, 248, 0.35) 45%, rgba(63, 181, 0, 0.35));
}

.ip-hero__card h3 {
	margin-bottom: 6px;
	font-size: 1.3rem;
}

.ip-hero__card > p {
	font-size: 0.92rem;
	color: var(--ip-muted);
	margin-bottom: 20px;
}

/* ------------------------------------------------------------ page hero --- */

.ip-page-hero {
	position: relative;
	isolation: isolate;
	padding-block: 74px 68px;
	background-color: var(--ip-navy);
	background-image:
		radial-gradient(ellipse 80% 90% at 82% 0%, rgba(8, 145, 209, 0.42) 0%, rgba(8, 145, 209, 0) 62%),
		linear-gradient(135deg, #052a41 0%, var(--ip-navy) 45%, var(--ip-blue-700) 100%);
	color: rgba(255, 255, 255, 0.85);
	overflow: hidden;
}

.ip-page-hero .ip-hero__orb--1 {
	width: 460px;
	height: 460px;
	top: -190px;
	right: -130px;
}

/*
 * Inner-page headers are centred: breadcrumb, title, standfirst and any
 * buttons all share one axis, so the banner reads as a single centred block
 * rather than copy pushed against the left edge of a wide band.
 */
.ip-page-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 840px;
	margin-inline: auto;
	text-align: center;
}

.ip-page-hero .ip-btn-row { justify-content: center; }

.ip-page-hero h1 { color: #fff; margin-bottom: 12px; }

.ip-page-hero p {
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: 0;
}

.ip-breadcrumbs {
	margin-bottom: 16px;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
}

.ip-breadcrumbs a { color: rgba(255, 255, 255, 0.9); }
.ip-breadcrumbs a:hover { color: #fff; text-decoration: underline; }
.ip-breadcrumbs .sep { margin: 0 8px; opacity: 0.55; }

/* ---------------------------------------------------------------- cards --- */

.ip-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 30px;
	background: #fff;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	box-shadow: var(--ip-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ip-card:hover {
	transform: translateY(-4px);
	border-color: rgba(8, 145, 209, 0.35);
	box-shadow: var(--ip-shadow);
}

/*
 * The product icons carry their own colour — subject plus green shield — so
 * they stand on the card rather than sitting in a tinted tile, and they keep
 * that colour on hover.
 */
.ip-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* The card is a flex column, so without this the box stretches the full
	   width and the icon ends up centred instead of sitting with the text. */
	align-self: flex-start;
	margin-bottom: 18px;
	color: var(--ip-blue-600);
	font-size: 1.5rem;
}

/* Scoped to the filled UI icons: a blanket `svg` rule here would override the
   fill="none" on the stroked product icons and turn them into solid shapes. */
.ip-card__icon .ip-icon { width: 26px; height: 26px; fill: currentColor; }

/* The product icons are a composition — subject plus shield — so they need
   more room inside the tile than a single glyph did. */
.ip-card__icon .ip-picon { width: 78px; height: 78px; }

/* The filled UI icons still need their tile to read. */
.ip-card__icon:has(.ip-icon) {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: var(--ip-bg-tint);
}

.ip-card--red .ip-card__icon:has(.ip-icon) { background: #fdecec; color: var(--ip-red); }
.ip-card--green .ip-card__icon:has(.ip-icon) { background: #eefae6; color: var(--ip-green-600); }

.ip-card h3 {
	font-size: 1.19rem;
	margin-bottom: 10px;
}

.ip-card h3 a { color: inherit; }
.ip-card h3 a:hover { color: var(--ip-blue-600); }

.ip-card p {
	font-size: 0.95rem;
	margin-bottom: 14px;
}

.ip-card__list {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	font-size: 0.92rem;
}

.ip-card__list li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 24px;
}

.ip-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--ip-green);
	border-bottom: 2px solid var(--ip-green);
	transform: rotate(-45deg);
}

.ip-card__foot {
	margin-top: auto;
	padding-top: 6px;
}

.ip-card--link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* -------------------------------------------------- mission / vision --- */

.ip-pillar {
	position: relative;
	padding: 34px 32px;
	background: #fff;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	box-shadow: var(--ip-shadow-sm);
	overflow: hidden;
}

.ip-pillar::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: linear-gradient(180deg, var(--ip-blue), var(--ip-green));
}

.ip-pillar__label {
	display: block;
	margin-bottom: 10px;
	color: var(--ip-blue-600);
	font-family: var(--ip-font-head);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ip-pillar p {
	margin-bottom: 0;
	font-size: 1.02rem;
	color: var(--ip-ink);
}

.ip-values {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.ip-values li {
	margin: 0;
	padding: 10px 20px;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-pill);
	background: #fff;
	color: var(--ip-navy);
	font-family: var(--ip-font-head);
	font-size: 0.92rem;
	font-weight: 600;
	box-shadow: var(--ip-shadow-sm);
}

.ip-promise {
	margin-top: 44px;
	padding: 28px 24px;
	text-align: center;
	border: 1px dashed rgba(8, 145, 209, 0.4);
	border-radius: var(--ip-radius-lg);
	background: rgba(255, 255, 255, 0.6);
}

.ip-promise span {
	display: block;
	margin-bottom: 6px;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ip-muted);
}

.ip-promise strong {
	display: block;
	font-family: var(--ip-font-head);
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem);
	font-weight: 800;
	color: var(--ip-navy);
	letter-spacing: -0.015em;
}

/* --------------------------------------------------------- feature list --- */

.ip-feature {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.ip-feature__num {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ip-blue);
	color: #fff;
	font-family: var(--ip-font-head);
	font-weight: 800;
}

.ip-feature h4 { margin-bottom: 6px; }
.ip-feature p { font-size: 0.94rem; margin-bottom: 0; }

/* ----------------------------------------------------------- checklist --- */

.ip-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.ip-checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 640px) {
	.ip-checklist--2 { grid-template-columns: minmax(0, 1fr); }
}

.ip-checklist li {
	position: relative;
	margin: 0;
	padding-left: 34px;
	font-size: 0.97rem;
}

.ip-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #eefae6;
}

.ip-checklist li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 9px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--ip-green-600);
	border-bottom: 2px solid var(--ip-green-600);
	transform: rotate(-45deg);
}

/* ----------------------------------------------------------- statistics --- */

.ip-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

@media (max-width: 880px) { .ip-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ip-stat {
	padding: 26px 22px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	box-shadow: var(--ip-shadow-sm);
}

.ip-stat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--ip-bg-tint);
	color: var(--ip-blue-700);
	transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.ip-stat__icon .ip-picon { width: 30px; height: 30px; }

.ip-stat:hover .ip-stat__icon { transform: translateY(-3px); }

/* Tabular figures stop the number jittering as it counts. */
.ip-stat__value {
	font-variant-numeric: tabular-nums;
	display: block;
	font-family: var(--ip-font-head);
	font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem);
	font-weight: 800;
	color: var(--ip-blue-600);
	line-height: 1.05;
}

.ip-stat__label {
	display: block;
	margin-top: 6px;
	font-size: 0.88rem;
	color: var(--ip-muted);
}

.ip-section--navy .ip-stat {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: none;
}

.ip-section--navy .ip-stat__value { color: #fff; }
.ip-section--navy .ip-stat__label { color: rgba(255, 255, 255, 0.75); }

/* ------------------------------------------------------------- contact --- */

/*
 * Ways to reach us. One card per channel, each with its own accent passed in
 * as --ip-way, so the row reads as distinct routes rather than a grid of
 * identical boxes. Cards are equal height with the action pinned to the foot.
 */

.ip-ways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
	align-items: stretch;
}

.ip-ways--stack { grid-template-columns: minmax(0, 1fr); }

.ip-way {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 34px 28px 28px;
	background: #fff;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	box-shadow: var(--ip-shadow-sm);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* The accent reads as a hairline along the top edge rather than a block of
   colour, which would fight the brand red in the header. */
.ip-way::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	/* Matched to the card's own radius, or the bar's square ends show
	   outside the rounded top corners. */
	border-radius: var(--ip-radius-lg) var(--ip-radius-lg) 0 0;
	background: var(--ip-way, var(--ip-blue));
	opacity: 0.85;
}

.ip-way:hover {
	transform: translateY(-5px);
	border-color: color-mix(in srgb, var(--ip-way, var(--ip-blue)) 34%, var(--ip-line));
	box-shadow: var(--ip-shadow-lg);
}

.ip-way__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--ip-way, var(--ip-blue)) 12%, #fff);
	color: var(--ip-way, var(--ip-blue));
}

.ip-way__icon .ip-icon {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.ip-way__label {
	margin: 0 0 6px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ip-muted);
}

.ip-way__value {
	margin: 0 0 10px;
	font-family: var(--ip-font-head);
	font-size: 1.22rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	word-break: break-word;
}

.ip-way__value a {
	color: var(--ip-navy);
	text-decoration: none;
}

.ip-way__value a:hover { color: var(--ip-way, var(--ip-blue)); }

.ip-way__address {
	margin: 0 0 10px;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ip-ink);
}

.ip-way__note {
	margin: 0 0 20px;
	font-size: 0.89rem;
	color: var(--ip-muted);
}

/* Pushes the action to the foot so every card in the row lines up. */
.ip-way__action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	align-self: flex-start;
	padding: 10px 18px;
	border: 1px solid color-mix(in srgb, var(--ip-way, var(--ip-blue)) 30%, var(--ip-line));
	border-radius: var(--ip-radius-pill);
	background: color-mix(in srgb, var(--ip-way, var(--ip-blue)) 7%, #fff);
	color: var(--ip-way, var(--ip-blue));
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ip-way__action .ip-icon {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.ip-way__arrow {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.ip-way__action:hover {
	background: var(--ip-way, var(--ip-blue));
	border-color: var(--ip-way, var(--ip-blue));
	color: #fff;
}

.ip-way__action:hover .ip-way__arrow { transform: translateX(3px); }

.ip-way__action--wa { --ip-way: var(--ip-green); }

@media (max-width: 600px) {
	.ip-way { padding: 28px 22px 24px; }
	.ip-way__icon { width: 50px; height: 50px; margin-bottom: 14px; }
}

/* Dark band variant. */
.ip-section--navy .ip-way {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: none;
}

.ip-section--navy .ip-way__value a,
.ip-section--navy .ip-way__address { color: #fff; }

.ip-section--navy .ip-way__icon { background: rgba(255, 255, 255, 0.12); color: #fff; }

.ip-section--navy .ip-way__label,
.ip-section--navy .ip-way__note { color: rgba(255, 255, 255, 0.72); }

.ip-footer__credit {
	color: rgba(255, 255, 255, 0.62);
	font-size: 0.85rem;
}

.ip-footer__credit a,
.ip-footer__credit strong {
	color: rgba(255, 255, 255, 0.86);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.ip-footer__credit a:hover {
	color: #fff;
	text-decoration: underline;
}

/* A centred run of prose, for an opening paragraph that introduces a page. */
.ip-entry-content--center {
	margin-inline: auto;
	text-align: center;
}

.ip-entry-content--center h2,
.ip-entry-content--center h3 { text-align: center; }

/* The heading's left accent bar does not belong on centred copy. */
.ip-entry-content--center h2::before,
.ip-entry-content--center h3::before { display: none; }

/*
 * Sparse grids centre instead of stretching. With a single certificate the
 * card used to sit alone at the left of a three-column row with two columns
 * of empty space beside it.
 */
.ip-awards,
.ip-gallery,
.ip-videos {
	/*
	 * auto-fit collapses the tracks it does not need, so four cards fill the
	 * row instead of leaving one orphaned underneath three. The cap keeps a
	 * lone card from stretching the full width.
	 */
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	justify-content: center;
}

.ip-awards > *,
.ip-gallery > *,
.ip-videos > * {
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
}

/* ----------------------------------------------------------- photo wall --- */

/*
 * Every photograph on one page, with a row of tabs above it. The tabs only
 * hide items, so what a visitor without JavaScript sees is the whole wall.
 */

.ip-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 28px;
}

.ip-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-pill);
	background: #fff;
	color: var(--ip-navy);
	font-family: var(--ip-font);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ip-tab:hover {
	border-color: rgba(8, 145, 209, 0.4);
	color: var(--ip-blue);
}

.ip-tab.is-active {
	background: var(--ip-navy);
	border-color: var(--ip-navy);
	color: #fff;
}

.ip-tab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--ip-radius-pill);
	background: rgba(6, 48, 74, 0.08);
	color: inherit;
	font-size: 0.75rem;
	font-weight: 700;
}

.ip-tab.is-active .ip-tab__count { background: rgba(255, 255, 255, 0.2); }

.ip-photos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 16px;
}

.ip-photo {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--ip-radius);
	background: var(--ip-bg-soft);
	box-shadow: var(--ip-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ip-photo.is-filtered { display: none; }

/* One class above `.elementor img`, which would otherwise force height:auto. */
.ip-photos .ip-photo img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.45s ease;
}

.ip-photo:hover {
	transform: translateY(-3px);
	box-shadow: var(--ip-shadow);
}

.ip-photo:hover img { transform: scale(1.05); }

.ip-photo:focus-visible {
	outline: 3px solid var(--ip-blue);
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.ip-photos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
	.ip-photos .ip-photo img { height: 150px; }
	.ip-tab { padding: 10px 14px; font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ip-photo,
	.ip-photos .ip-photo img { transition: none; }
}

/* ---------------------------------------------------------- process bar --- */

.ip-process {
	display: grid;
	/* One column per step, set inline by the renderer, so three steps fill the
	   row instead of sitting in the left three-fifths of it. */
	grid-template-columns: repeat(var(--ip-steps, 5), minmax(0, 1fr));
	gap: 22px;
	counter-reset: ip-step;
	margin: 0;
	/* Room above the cards for the numbers and the thread that joins them. */
	padding: 34px 0 0;
	list-style: none;
}

@media (max-width: 980px) { .ip-process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ip-process { grid-template-columns: minmax(0, 1fr); } }

.ip-process__step {
	position: relative;
	padding: 44px 24px 30px;
	background: #fff;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	text-align: center;
	box-shadow: var(--ip-shadow-sm);
}

/* A quiet wash of brand colour under the number, so the card has some depth
   without a heavier shadow. It cannot be clipped with overflow, because the
   number itself sits above the card's top edge. */
.ip-process__step::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(150px 90px at 50% 0, rgba(8, 145, 209, 0.12), rgba(8, 145, 209, 0) 72%);
	pointer-events: none;
}

.ip-process__step::before {
	counter-increment: ip-step;
	content: counter(ip-step, decimal-leading-zero);
	position: absolute;
	/* The number's centre sits just above the card's top edge, so the thread
	   drawn at that height stays visible the whole way across. */
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--ip-blue) 0%, var(--ip-navy) 100%);
	box-shadow: 0 0 0 6px #fff, 0 6px 16px rgba(6, 48, 74, 0.18);
	color: #fff;
	font-family: var(--ip-font-head);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ip-process__step h4 {
	position: relative;
	margin: 0 0 8px;
	font-size: 1.06rem;
}

.ip-process__step p {
	position: relative;
	margin: 0;
	font-size: 0.9rem;
	color: var(--ip-muted);
}

/* --------------------------------------------------------- testimonials --- */

.ip-testimonial {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 30px;
	background: #fff;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	box-shadow: var(--ip-shadow-sm);
}

.ip-testimonial__quote {
	font-size: 1rem;
	color: var(--ip-ink);
	margin-bottom: 20px;
}

.ip-testimonial__quote::before {
	content: "\201C";
	display: block;
	font-family: Georgia, serif;
	font-size: 3rem;
	line-height: 0.8;
	color: var(--ip-blue);
	opacity: 0.35;
	margin-bottom: 8px;
}

.ip-testimonial__person {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--ip-line);
}

.ip-testimonial__avatar {
	width: 46px;
	height: 46px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
	background: var(--ip-bg-tint);
}

.ip-testimonial__avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ip-blue-700);
	font-family: var(--ip-font-head);
	font-weight: 800;
}

.ip-testimonial__name {
	display: block;
	font-family: var(--ip-font-head);
	font-weight: 700;
	color: var(--ip-navy);
	font-size: 0.97rem;
}

.ip-testimonial__role {
	display: block;
	font-size: 0.84rem;
	color: var(--ip-muted);
}

.ip-rating {
	display: inline-flex;
	gap: 2px;
	margin-bottom: 12px;
	color: #b86c00;
	font-size: 0.95rem;
	letter-spacing: 1px;
}

/* -------------------------------------------------------------- carousel --- */

.ip-carousel { position: relative; }

.ip-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 52px) / 3);
	gap: 26px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 10px;
	scrollbar-width: none;
}

.ip-carousel__track::-webkit-scrollbar { display: none; }

.ip-carousel__track > * { scroll-snap-align: start; }

@media (max-width: 980px) { .ip-carousel__track { grid-auto-columns: calc((100% - 26px) / 2); } }
@media (max-width: 640px) { .ip-carousel__track { grid-auto-columns: 88%; } }

.ip-carousel__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
}

.ip-carousel__btn {
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ip-line);
	border-radius: 50%;
	background: #fff;
	color: var(--ip-navy);
	font-size: 1.1rem;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ip-carousel__btn:hover {
	background: var(--ip-blue);
	border-color: var(--ip-blue);
	color: #fff;
}

/* ------------------------------------------------------------- accordion --- */

.ip-accordion {
	display: grid;
	gap: 12px;
}

.ip-accordion__item {
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius);
	background: #fff;
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ip-accordion__item.is-open {
	border-color: rgba(8, 145, 209, 0.4);
	box-shadow: var(--ip-shadow-sm);
}

.ip-accordion__trigger {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	padding: 19px 22px;
	border: 0;
	background: transparent;
	color: var(--ip-navy);
	font-family: var(--ip-font-head);
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
}

.ip-accordion__trigger:hover { color: var(--ip-blue-600); }

.ip-accordion__icon {
	position: relative;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--ip-bg-tint);
}

.ip-accordion__icon::before,
.ip-accordion__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--ip-blue-600);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.ip-accordion__icon::before { width: 10px; height: 2px; }
.ip-accordion__icon::after { width: 2px; height: 10px; }

.ip-accordion__item.is-open .ip-accordion__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

.ip-accordion__panel {
	display: none;
	padding: 0 22px 20px;
	font-size: 0.97rem;
}

.ip-accordion__panel > :last-child { margin-bottom: 0; }
.ip-accordion__item.is-open .ip-accordion__panel { display: block; }

/* ------------------------------------------------------------ trust bar --- */

.ip-trustbar {
	position: relative;
	z-index: 2;
	margin-top: -34px;
	margin-bottom: 8px;
}

.ip-trustbar__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	padding: 20px 26px;
	background: #fff;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	box-shadow: 0 10px 34px rgba(6, 48, 74, 0.12);
}

@media (max-width: 880px) {
	.ip-trustbar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
	.ip-trustbar { margin-top: -20px; }
}

@media (max-width: 480px) {
	.ip-trustbar__inner { grid-template-columns: minmax(0, 1fr); }
}

.ip-trustbar__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-inline: 14px;
	border-right: 1px solid var(--ip-line);
}

.ip-trustbar__item:last-child { border-right: 0; }

@media (max-width: 880px) {
	.ip-trustbar__item { border-right: 0; }
}

.ip-trustbar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 11px;
	background: var(--ip-bg-tint);
	color: var(--ip-blue-600);
}

.ip-trustbar__icon svg { width: 19px; height: 19px; }

.ip-trustbar__item strong {
	display: block;
	font-family: var(--ip-font-head);
	font-size: 0.95rem;
	color: var(--ip-navy);
	line-height: 1.25;
}

.ip-trustbar__item span {
	display: block;
	font-size: 0.8rem;
	color: var(--ip-muted);
}

/* ------------------------------------------------------------- spotlight --- */

/* Draws the eye to the recommended option in a grid. */
.ip-card--spotlight {
	border-color: transparent;
	background-color: #fff;
	background-image:
		linear-gradient(#fff, #fff),
		linear-gradient(140deg, var(--ip-blue), var(--ip-green));
	background-origin: padding-box, border-box;
	background-clip: padding-box, border-box;
	border: 2px solid transparent;
	box-shadow: 0 12px 34px rgba(8, 145, 209, 0.16);
}

.ip-card__flag {
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 5px 12px;
	border-radius: var(--ip-radius-pill);
	background-color: var(--ip-blue);
	background-image: linear-gradient(120deg, var(--ip-blue), var(--ip-green));
	color: #fff;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ tabs --- */

.ip-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
	padding: 6px;
	background: var(--ip-bg-soft);
	border-radius: var(--ip-radius-pill);
}

.ip-tabs__btn {
	padding: 11px 22px;
	border: 0;
	border-radius: var(--ip-radius-pill);
	background: transparent;
	color: var(--ip-navy);
	font-family: var(--ip-font-head);
	font-size: 0.93rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.ip-tabs__btn:hover { color: var(--ip-blue-600); }

.ip-tabs__btn.is-active {
	background: var(--ip-blue);
	color: #fff;
}

.ip-tabs__panel { display: none; }
.ip-tabs__panel.is-active { display: block; }

/* ------------------------------------------------------------------ form --- */

.ip-form {
	display: grid;
	gap: 16px;
}

.ip-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

@media (max-width: 640px) { .ip-form__row { grid-template-columns: minmax(0, 1fr); } }

.ip-field { display: grid; gap: 7px; }

.ip-field > label {
	font-family: var(--ip-font-head);
	font-size: 0.87rem;
	font-weight: 600;
	color: var(--ip-navy);
}

.ip-field .req { color: var(--ip-red); }

.ip-field input[type="text"],
.ip-field input[type="email"],
.ip-field input[type="tel"],
.ip-field input[type="url"],
.ip-field input[type="number"],
.ip-field input[type="date"],
.ip-field input[type="file"],
.ip-field select,
.ip-field textarea {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid var(--ip-line);
	border-radius: 10px;
	background: #fff;
	color: var(--ip-ink);
	font-family: inherit;
	font-size: 0.96rem;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ip-field textarea { min-height: 128px; resize: vertical; }

.ip-field input:focus,
.ip-field select:focus,
.ip-field textarea:focus {
	outline: 0;
	border-color: var(--ip-blue);
	box-shadow: 0 0 0 3px rgba(8, 145, 209, 0.16);
}

.ip-field--consent {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 10px;
}

.ip-field--consent input { margin-top: 5px; }

.ip-field--consent label {
	font-size: 0.85rem;
	font-weight: 400;
	color: var(--ip-muted);
	line-height: 1.55;
}

.ip-field--hp {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.ip-form__note {
	font-size: 0.82rem;
	color: var(--ip-muted);
	margin: 0;
}

.ip-alert {
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 0.94rem;
	border: 1px solid transparent;
}

.ip-alert--success {
	background: #eefae6;
	border-color: #b9e79a;
	color: #2c6b0d;
}

.ip-alert--error {
	background: #fdecec;
	border-color: #f5b5b5;
	color: #a90d0d;
}

.ip-alert ul { margin: 8px 0 0; padding-left: 1.2em; }

.ip-form-card {
	padding: 32px;
	background: #fff;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	box-shadow: var(--ip-shadow);
}

.ip-form-card--dark {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: none;
}

/* ------------------------------------------------------------- post grid --- */

.ip-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	overflow: hidden;
	box-shadow: var(--ip-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ip-post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ip-shadow);
}

.ip-post-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--ip-bg-tint);
	overflow: hidden;
}

.ip-post-card .ip-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.ip-post-card:hover .ip-post-card__media img { transform: scale(1.05); }

.ip-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px;
}

.ip-post-card h3 {
	font-size: 1.1rem;
	margin-bottom: 10px;
}

.ip-post-card h3 a { color: inherit; }
.ip-post-card h3 a:hover { color: var(--ip-blue-600); }

.ip-post-card p {
	font-size: 0.93rem;
	margin-bottom: 16px;
}

.ip-post-card__foot { margin-top: auto; }

.ip-badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: var(--ip-radius-pill);
	background: var(--ip-bg-tint);
	color: var(--ip-blue-700);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ip-badge--red { background: #fdecec; color: var(--ip-red-600); }
.ip-badge--green { background: #eefae6; color: var(--ip-green-600); }

.ip-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-bottom: 12px;
	font-size: 0.82rem;
	color: var(--ip-muted);
}

.ip-meta a { color: inherit; }
.ip-meta a:hover { color: var(--ip-blue-600); }

/* -------------------------------------------------------------- article --- */

.ip-entry-content > *:first-child { margin-top: 0; }

.ip-entry-content h2 { margin-top: 1.8em; }
.ip-entry-content h3 { margin-top: 1.5em; }

.ip-entry-content img,
.wp-block-image img { border-radius: var(--ip-radius); }

.ip-entry-content ul li::marker { color: var(--ip-blue); }

.ip-entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.6em;
	font-size: 0.94rem;
}

.ip-entry-content th,
.ip-entry-content td {
	padding: 12px 15px;
	border: 1px solid var(--ip-line);
	text-align: left;
}

.ip-entry-content th {
	background: var(--ip-bg-soft);
	color: var(--ip-navy);
	font-family: var(--ip-font-head);
	font-weight: 700;
}

.ip-table-wrap { overflow-x: auto; }

.ip-featured-media {
	margin-bottom: 32px;
	border-radius: var(--ip-radius-lg);
	overflow: hidden;
}

.ip-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--ip-line);
}

.ip-share__label {
	font-family: var(--ip-font-head);
	font-weight: 700;
	color: var(--ip-navy);
	font-size: 0.9rem;
	margin-right: 4px;
}

.ip-share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--ip-line);
	border-radius: 50%;
	color: var(--ip-navy);
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.ip-share a:hover {
	background: var(--ip-blue);
	border-color: var(--ip-blue);
	color: #fff;
}

.ip-share svg { width: 16px; height: 16px; fill: currentColor; }

/* -------------------------------------------------------------- sidebar --- */

.ip-sidebar { display: grid; gap: 26px; }

.ip-widget {
	padding: 26px;
	background: #fff;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	box-shadow: var(--ip-shadow-sm);
}

.ip-widget__title {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ip-line);
	font-size: 1.05rem;
}

.ip-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.95rem;
}

.ip-widget ul li {
	padding: 8px 0;
	border-bottom: 1px dashed var(--ip-line);
}

.ip-widget ul li:last-child { border-bottom: 0; }

.ip-widget--cta {
	background-color: var(--ip-navy);
	background-image: linear-gradient(140deg, var(--ip-navy), var(--ip-blue-700));
	border: 0;
	color: rgba(255, 255, 255, 0.86);
	text-align: center;
}

.ip-widget--cta h3 { color: #fff; border: 0; padding: 0; }
.ip-widget--cta p { font-size: 0.92rem; }

.ip-sidebar--sticky { position: sticky; top: calc(var(--ip-header-h) + 24px); }

/* ----------------------------------------------------------- pagination --- */

.ip-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 52px;
}

.ip-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--ip-line);
	border-radius: 10px;
	background: #fff;
	color: var(--ip-navy);
	font-weight: 600;
	font-size: 0.94rem;
}

.ip-pagination .page-numbers:hover,
.ip-pagination .page-numbers.current {
	background: var(--ip-blue);
	border-color: var(--ip-blue);
	color: #fff;
}

.ip-pagination .dots:hover { background: #fff; color: var(--ip-navy); border-color: var(--ip-line); }

/* ---------------------------------------------------------------- footer --- */

.ip-footer {
	position: relative;
	background: var(--ip-navy-800);
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.93rem;
}

/*
 * A hairline of brand colour at the top of the dark area. On pages that show
 * the call-to-action band it sits under that band; on the legal pages, which
 * have no band, it sits at the top of the footer itself.
 */
.ip-footer::before,
.ip-footer__cta::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ip-blue), var(--ip-green) 55%, var(--ip-red));
	opacity: 0.9;
	z-index: 3;
}

.ip-footer::before { inset: 0 0 auto; }

/* With the band present, its own line is the one that shows. */
.ip-footer:has(.ip-footer__cta)::before { display: none; }

.ip-footer__cta {
	position: relative;
	padding-block: 56px;
	background-color: var(--ip-blue-700);
	background-image: linear-gradient(120deg, var(--ip-blue-700), var(--ip-blue));
	color: #fff;
	overflow: hidden;
}

.ip-footer__cta-inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}

.ip-footer__cta h2 { color: #fff; margin-bottom: 6px; }
.ip-footer__cta p { margin: 0; color: rgba(255, 255, 255, 0.85); max-width: 620px; }

.ip-footer__main {
	display: grid;
	grid-template-columns: 1.4fr repeat(2, 1fr);
	gap: 48px;
	padding-block: 70px 52px;
}

@media (max-width: 980px) { .ip-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px; } }
@media (max-width: 560px) { .ip-footer__main { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Headings carry a short accent rule, so each column has a clear start. */
.ip-footer h3,
.ip-footer .ip-footer__heading {
	position: relative;
	display: block;
	margin-bottom: 26px;
	padding-bottom: 12px;
	color: #fff;
	font-family: var(--ip-font-head);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.ip-footer h3::after,
.ip-footer .ip-footer__heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--ip-blue), var(--ip-green));
}

.ip-footer__brand img {
	max-height: 58px;
	width: auto;
	margin-bottom: 20px;
	padding: 10px 14px;
	background: #fff;
	border-radius: var(--ip-radius);
}

.ip-footer__brand p {
	font-size: 0.92rem;
	line-height: 1.7;
	max-width: 42ch;
}

.ip-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ip-footer ul li { margin-bottom: 11px; }

.ip-footer a:not([class*="ip-btn"]) {
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.18s ease;
}

.ip-footer a:not([class*="ip-btn"]):hover { color: #fff; }

/* Quick Links get a chevron that appears on hover. */
.ip-footer__main nav li a {
	position: relative;
	display: inline-block;
	padding-left: 0;
	transition: color 0.18s ease, padding-left 0.18s ease;
}

.ip-footer__main nav li a::before {
	content: "›";
	position: absolute;
	left: 0;
	opacity: 0;
	color: var(--ip-blue);
	transition: opacity 0.18s ease;
}

.ip-footer__main nav li a:hover {
	padding-left: 14px;
	color: #fff;
}

.ip-footer__main nav li a:hover::before { opacity: 1; }

.ip-footer__contact li {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	margin-bottom: 16px;
	line-height: 1.6;
}

/* Each contact line gets its icon in a soft tile. */
.ip-footer__contact svg {
	width: 32px;
	height: 32px;
	padding: 8px;
	flex-shrink: 0;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.08);
	fill: #8fd8ff;
	box-sizing: border-box;
}

.ip-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}

.ip-footer__social a {
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ip-footer__social a:hover {
	background: var(--ip-blue);
	border-color: var(--ip-blue);
	transform: translateY(-2px);
}

.ip-footer .ip-footer__social svg { width: 17px; height: 17px; fill: currentColor; }

.ip-footer__disclaimer {
	padding: 26px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	font-size: 0.81rem;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.7;
}

/* A darker strip sets the small print apart from the columns. */
.ip-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 22px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.58);
}

.ip-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

/* Keep the small print out from under the floating buttons. */
@media (min-width: 861px) {
	.ip-footer__bottom { padding-right: 92px; }
}

.ip-footer__legal li { margin: 0; }

/* ------------------------------------------------------- floating & bar --- */

/*
 * Floating actions, stacked bottom-right. The financial review carries a word
 * because, unlike a chat bubble, an icon alone would not say what it does.
 */
.ip-floats {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 880;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.ip-float {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 20px 0 12px;
	border-radius: var(--ip-radius-pill);
	background: linear-gradient(135deg, var(--ip-blue) 0%, var(--ip-navy) 100%);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(6, 48, 74, 0.34);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ip-float:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(6, 48, 74, 0.42);
}

.ip-float__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
}

.ip-float__icon .ip-icon {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

.ip-whatsapp-float {
	position: static;
	z-index: 880;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
	transition: transform 0.2s ease;
}

.ip-whatsapp-float:hover { transform: scale(1.08); color: #fff; }
.ip-whatsapp-float svg { width: 30px; height: 30px; fill: currentColor; }

.ip-mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 890;
	display: none;
	background: #fff;
	border-top: 1px solid var(--ip-line);
	box-shadow: 0 -4px 20px rgba(6, 48, 74, 0.1);
}

.ip-mobile-bar a {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 10px 4px;
	color: var(--ip-navy);
	font-size: 0.72rem;
	font-weight: 600;
}

.ip-mobile-bar svg { width: 19px; height: 19px; fill: currentColor; }
.ip-mobile-bar a:hover { color: var(--ip-blue-600); }

@media (max-width: 768px) {
	.ip-mobile-bar { display: flex; }
	body { padding-bottom: 62px; }
	.ip-whatsapp-float { width: 50px; height: 50px; }
	.ip-floats { right: 16px; bottom: 76px; }

	/* The quick-contact bar already carries the review, so the pill would be
	   one prompt too many on a phone. */
	.ip-float--fna { display: none; }
	:root { --ip-section-y: 60px; --ip-header-h: 72px; }
}

/* -------------------------------------------- consultation block ------ */

.ip-consult {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 28px;
	align-items: stretch;
}

/* ---- left: the reassurance panel ---- */

.ip-consult__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 38px;
	border-radius: var(--ip-radius-lg);
	background-color: var(--ip-navy);
	background-image: linear-gradient(150deg, #052a41 0%, var(--ip-navy) 48%, var(--ip-blue-700) 100%);
	color: rgba(255, 255, 255, 0.84);
	overflow: hidden;
	isolation: isolate;
}

.ip-consult__crest {
	position: absolute;
	right: -70px;
	top: -40px;
	/* Sized against the panel so it does not run past the edge on a phone. */
	width: min(320px, 70vw);
	height: min(320px, 70vw);
	color: rgba(255, 255, 255, 0.1);
	z-index: -1;
}

.ip-consult__crest svg { width: 100%; height: 100%; }

.ip-consult__figure {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: -1;
}

.ip-consult .ip-consult__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Faces sit high in a portrait, so bias the crop upward. */
	object-position: center 30%;
}

/* Keeps the copy readable over any photograph. */
.ip-consult--has-image .ip-consult__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(6, 48, 74, 0.25) 0%, rgba(6, 48, 74, 0.88) 72%);
}

.ip-consult__panel h2 {
	color: #fff;
	font-size: clamp(1.45rem, 1.1rem + 1.3vw, 1.95rem);
	margin-bottom: 12px;
}

.ip-consult__lead {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.98rem;
	margin-bottom: 22px;
}

.ip-consult__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.ip-consult__benefits li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.95rem;
	color: #fff;
}

.ip-consult__benefits .ip-icon {
	width: 20px;
	height: 20px;
	padding: 3px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #9be86a;
}

/* ---- right: the form card ---- */

.ip-consult__card {
	padding: 34px;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	background: #fff;
	box-shadow: var(--ip-shadow-sm);
}

.ip-consult__head { margin-bottom: 24px; }
.ip-consult__head h3 { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem); margin-bottom: 6px; }

.ip-consult__time {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	color: var(--ip-muted);
	font-size: 0.92rem;
}

.ip-consult__time .ip-icon { color: var(--ip-green-600); }

.ip-consult__question {
	margin: 0 0 16px;
	font-family: var(--ip-font-head);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--ip-navy);
}

.ip-consult__choices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.ip-consult__choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 146px;
	padding: 18px 10px;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius);
	background: #fff;
	color: var(--ip-navy);
	font: inherit;
	font-weight: 600;
	font-size: 0.92rem;
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ip-consult__choice-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ip-blue-700);
}

.ip-consult__choice-icon .ip-picon { width: 70px; height: 70px; }

.ip-consult__choice:hover,
.ip-consult__choice:focus-visible {
	border-color: rgba(8, 145, 209, 0.5);
	transform: translateY(-2px);
	box-shadow: var(--ip-shadow-sm);
}

.ip-consult__choice[aria-checked="true"] {
	border-color: var(--ip-blue);
	box-shadow: inset 0 0 0 1px var(--ip-blue);
}

.ip-consult__skip { margin: 18px 0 0; }

.ip-consult__skip button {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.ip-consult__back {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 18px;
}

.ip-consult__back button {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
}

.ip-link-arrow--back::before { content: "\2190"; margin-right: 6px; }

.ip-consult__chosen {
	padding: 4px 12px;
	border-radius: var(--ip-radius-pill);
	background: var(--ip-bg-tint);
	color: var(--ip-blue-700);
	font-size: 0.82rem;
	font-weight: 600;
}

/* Roomier inputs than the compact form default: this is the page's one
   conversion point, so it gets the space. */
.ip-consult__card .ip-field input,
.ip-consult__card .ip-field select,
.ip-consult__card .ip-field textarea {
	padding: 13px 15px;
	border-radius: var(--ip-radius);
}

.ip-consult__card .ip-form-card { padding: 0; border: 0; background: none; box-shadow: none; }

@media (max-width: 1040px) {
	.ip-consult { grid-template-columns: 1fr; }
	.ip-consult__panel { padding: 30px; min-height: 240px; }
	.ip-consult__crest { right: -90px; top: -70px; }
}

@media (max-width: 560px) {
	.ip-consult__card { padding: 22px; }
	.ip-consult__choices { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.ip-consult__choice { min-height: 128px; font-size: 0.86rem; }
	.ip-consult__choice-icon .ip-picon { width: 58px; height: 58px; }
}

/* ------------------------------------- awards, gallery, videos -------- */

.ip-demo-badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 3px 9px;
	border-radius: var(--ip-radius-pill);
	background: #fff8e5;
	border: 1px dashed #e6c65c;
	color: #85670c;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ---- awards & certificates ---- */

.ip-award {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	background: #fff;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ip-award:hover {
	border-color: rgba(8, 145, 209, 0.35);
	transform: translateY(-3px);
	box-shadow: var(--ip-shadow);
}

.ip-award__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ip-bg-soft);
	overflow: hidden;
}

.ip-award .ip-award__media img {
	width: 100%;
	height: 100%;
	/* A certificate must never be cropped — show the whole document. */
	object-fit: contain;
	padding: 14px;
}

.ip-award__media--blank {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ip-blue-700);
}

.ip-award__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.ip-award__body h3 { font-size: 1.05rem; margin-bottom: 6px; }
.ip-award__meta { font-size: 0.85rem; color: var(--ip-muted); margin-bottom: 10px; }
.ip-award__body p { font-size: 0.92rem; }
.ip-award__body .ip-link-arrow { margin-top: auto; padding-top: 12px; }

/* ---- event gallery ---- */

.ip-gallery__year {
	margin: 44px 0 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ip-line);
	font-size: 1.15rem;
	color: var(--ip-navy);
}

.ip-gallery__year:first-of-type { margin-top: 0; }

.ip-event {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	background: #fff;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ip-event:hover {
	border-color: rgba(8, 145, 209, 0.35);
	transform: translateY(-3px);
	box-shadow: var(--ip-shadow);
}

.ip-event__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	background: var(--ip-bg-soft);
	overflow: hidden;
}

.ip-event .ip-event__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* People are usually in the upper half of an event photograph. */
	object-position: center 35%;
	transition: transform 0.4s ease;
}

.ip-event:hover .ip-event__media img { transform: scale(1.04); }

.ip-event__count {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 5px 11px;
	border-radius: var(--ip-radius-pill);
	background: rgba(6, 48, 74, 0.82);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
}

.ip-event__body { padding: 20px; }
.ip-event__body h4 { font-size: 1rem; margin-bottom: 4px; }
.ip-event__meta { font-size: 0.85rem; color: var(--ip-muted); margin-bottom: 8px; }
.ip-event__body p { font-size: 0.9rem; margin-bottom: 0; }

/* ---- videos ---- */

.ip-video {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	background: #fff;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ip-video:hover { border-color: rgba(8, 145, 209, 0.35); transform: translateY(-3px); box-shadow: var(--ip-shadow); }

.ip-video__play {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	aspect-ratio: 16 / 9;
	background: var(--ip-navy);
	cursor: pointer;
	overflow: hidden;
}

.ip-video .ip-video__play img { width: 100%; height: 100%; object-fit: cover; }

.ip-video__badge {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(232, 3, 3, 0.92);
	color: #fff;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.ip-video__badge svg { width: 26px; height: 26px; }
.ip-video__play:hover .ip-video__badge { transform: translate(-50%, -50%) scale(1.08); }
.ip-video__play:focus-visible { outline: 3px solid var(--ip-blue); outline-offset: -3px; }

.ip-video__body { padding: 18px 20px 22px; }
.ip-video__body h4 { font-size: 1rem; margin-bottom: 4px; }
.ip-video__meta { font-size: 0.84rem; color: var(--ip-muted); margin-bottom: 8px; }
.ip-video__body p { font-size: 0.9rem; margin-bottom: 0; }

/* ---- lightbox ---- */

body.ip-lightbox-open { overflow: hidden; }

.ip-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px;
}

.ip-lightbox[hidden] { display: none; }

.ip-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 22, 34, 0.92);
	cursor: zoom-out;
}

.ip-lightbox__inner {
	position: relative;
	z-index: 1;
	max-width: min(1100px, 100%);
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.ip-lightbox__figure { margin: 0; max-height: calc(100vh - 140px); display: flex; }

.ip-lightbox__figure img {
	max-width: 100%;
	max-height: calc(100vh - 140px);
	width: auto;
	height: auto;
	border-radius: var(--ip-radius);
	background: #fff;
}

.ip-lightbox__video { width: min(960px, 86vw); aspect-ratio: 16 / 9; }
.ip-lightbox__video iframe { width: 100%; height: 100%; border: 0; border-radius: var(--ip-radius); }

.ip-lightbox__caption {
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.92rem;
	text-align: center;
}

.ip-lightbox__btn {
	position: absolute;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.ip-lightbox__btn:hover { background: rgba(255, 255, 255, 0.24); }
.ip-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ip-lightbox__btn[hidden] { display: none; }

/* Chevrons and a cross, drawn rather than loaded. */
.ip-lightbox__btn::before,
.ip-lightbox__btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.ip-lightbox__btn--close { top: -14px; right: -14px; }
.ip-lightbox__btn--close::before { transform: translate(-50%, -50%) rotate(45deg); }
.ip-lightbox__btn--close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.ip-lightbox__btn--prev { left: -66px; top: calc(50% - 24px); }
.ip-lightbox__btn--prev::before { transform: translate(-40%, -50%) rotate(-45deg) translateY(-4px); }
.ip-lightbox__btn--prev::after { transform: translate(-40%, -50%) rotate(45deg) translateY(4px); }

.ip-lightbox__btn--next { right: -66px; top: calc(50% - 24px); }
.ip-lightbox__btn--next::before { transform: translate(-60%, -50%) rotate(45deg) translateY(-4px); }
.ip-lightbox__btn--next::after { transform: translate(-60%, -50%) rotate(-45deg) translateY(4px); }

@media (max-width: 900px) {
	.ip-lightbox { padding: 16px; }
	.ip-lightbox__btn--prev { left: 4px; }
	.ip-lightbox__btn--next { right: 4px; }
	.ip-lightbox__btn--close { top: -8px; right: 0; }
}

/* ------------------------------------------------- hero slider -------- */

/*
 * Slides are stacked in one grid cell rather than laid side by side: the hero
 * then takes the height of the tallest slide and never jumps as it advances.
 */
.ip-hero__slides { display: grid; }

.ip-hero__single { grid-area: 1 / 1; }

/*
 * The wrapper only fades. It used to slide as well, which fought the per-line
 * rise of its own children and read as two competing movements.
 */
.ip-hero__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 0.85s;
}

.ip-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s;
}

.ip-hero__dots {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 28px;
}

.ip-hero__dot {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}

/* A 26px hit area around a 9px dot: comfortable to tap, quiet to look at. */
.ip-hero__dot::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.38);
	transform: translateY(-50%);
	transition: background-color 0.2s ease, width 0.25s ease;
}

.ip-hero__dot.is-active::after { width: 26px; background: #fff; }
.ip-hero__dot:hover::after { background: rgba(255, 255, 255, 0.7); }

.ip-hero__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.ip-hero__slide { transition: none; }
}

/* The hero eyebrow is a quiet label above the headline, not a heading in its
   own right, so it sits smaller than the eyebrows used in page sections. */
.ip-hero .ip-eyebrow {
	margin-bottom: 16px;
	padding: 5px 13px;
	/* Never below 12px: uppercase with this much tracking stops being legible. */
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}

@media (max-width: 980px) {
	/* Stacked, the copy sets the height — a hard 650px would clip it. */
	.ip-hero {
		height: auto;
		min-height: 520px;
	}
}

@media (max-width: 560px) {
	/* 0.75rem is the floor: below 12px the uppercase tracking stops being
	   legible on a phone. */
	.ip-hero .ip-eyebrow { font-size: 0.75rem; padding: 5px 11px; }
}

/* ------------------------------------------------- hero visual -------- */

/*
 * One panel, one ring, one floating figure. Three elements, each with a
 * reason to be where it is — rather than a scatter of cards.
 */
.ip-hero__visual {
	position: relative;
	display: flex;
	align-items: center;
	/* The panel sits right; the floating figure takes the space this frees on
	   the left, so the two overlap at a corner instead of on top of each other. */
	justify-content: flex-end;
	min-height: 400px;
}

/* Two concentric rings set the panel into the space instead of letting it
   float against a flat background. */
.ip-hero__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 420px;
	height: 420px;
	margin: -210px -150px 0 0;
	right: 0;
	left: auto;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	pointer-events: none;
}

.ip-hero__ring::after {
	content: "";
	position: absolute;
	inset: 54px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
}

.ip-hero__panel {
	position: relative;
	z-index: 2;
	width: min(352px, 100%);
	padding: 22px 22px 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--ip-radius-lg);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 20px 50px rgba(2, 18, 30, 0.28);
}

.ip-hero__panel-head {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-bottom: 16px;
	margin-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.ip-hero__panel-crest {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.ip-hero__panel-crest svg { width: 24px; height: 24px; }

.ip-hero__panel-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.ip-hero__panel-title strong {
	font-family: var(--ip-font-head);
	font-size: 0.98rem;
	color: #fff;
}

.ip-hero__panel-title em {
	font-style: normal;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.68);
}

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

.ip-hero__panel-list li {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ip-hero__panel-list li:last-child { border-bottom: 0; }

.ip-hero__panel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.86);
}

/* A 1px stroke is right for the display icons but disappears at list size,
   so the small ones in the hero panel carry a touch more weight. */
.ip-hero__panel-icon .ip-picon { width: 24px; height: 24px; stroke-width: 1.5; }

.ip-hero__panel-label {
	flex: 1;
	min-width: 0;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.88);
}

.ip-hero__panel-tick {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	color: #9be86a;
}

/* Overlaps the panel's lower-left corner, which ties the two together and
   stops the composition reading as one floating rectangle. */
.ip-hero__float {
	position: absolute;
	z-index: 3;
	left: 0;
	bottom: 12%;
	display: flex;
	align-items: center;
	gap: 11px;
	/* Narrow enough to clear the panel behind it. */
	max-width: 196px;
	padding: 13px 17px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--ip-radius);
	background: rgba(6, 48, 74, 0.62);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.ip-hero__float strong {
	font-family: var(--ip-font-head);
	font-size: 1.45rem;
	line-height: 1;
	color: #8fd8ff;
}

.ip-hero__float span {
	font-size: 0.8rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.78);
}

@media (max-width: 1180px) {
	.ip-hero__ring { width: 360px; height: 360px; margin: -180px 0 0 -160px; }
	.ip-hero__float { bottom: 2%; }
}

@media (max-width: 980px) {
	/* The headline carries the hero on small screens; the composition would
	   only push the call to action below the fold. */
	.ip-hero__visual { display: none; }
}

/* ----------------------------------------------- insurance finder ----- */

/*
 * Three across rather than six: each option gets enough room for a label and
 * a line saying what sits behind it, which is what actually helps somebody
 * choose. The arrow only appears on hover, so the resting state stays quiet.
 */
.ip-finder {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.ip-finder__tile {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	height: 100%;
	padding: 24px 26px;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-lg);
	background: #fff;
	color: var(--ip-navy);
	text-decoration: none;
	overflow: hidden;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* A wash that grows from the icon corner on hover. */
.ip-finder__tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(8, 145, 209, 0.08), rgba(8, 145, 209, 0) 62%);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.ip-finder__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--ip-blue-700);
}

.ip-finder__icon .ip-picon { width: 74px; height: 74px; }

.ip-finder__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ip-finder__label {
	font-family: var(--ip-font-head);
	font-weight: 700;
	font-size: 1.06rem;
	line-height: 1.25;
	color: var(--ip-navy);
}

.ip-finder__text {
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--ip-muted);
}

.ip-finder__go {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	margin-left: auto;
	border-radius: 50%;
	background: var(--ip-blue);
	color: #fff;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.ip-finder__go svg { width: 16px; height: 16px; }

.ip-finder__tile:hover,
.ip-finder__tile:focus-visible {
	border-color: rgba(8, 145, 209, 0.45);
	transform: translateY(-4px);
	box-shadow: var(--ip-shadow);
}

.ip-finder__tile:hover::before,
.ip-finder__tile:focus-visible::before { opacity: 1; }

.ip-finder__tile:hover .ip-finder__go,
.ip-finder__tile:focus-visible .ip-finder__go {
	opacity: 1;
	transform: none;
}

/* The tile currently filtering the grid. */
.ip-finder__tile.is-active {
	border-color: var(--ip-blue);
	box-shadow: inset 0 0 0 1px var(--ip-blue);
}

.ip-finder__tile.is-active .ip-finder__go { opacity: 1; transform: none; }

/* Shown once a filter is applied, so the visitor can always get back. */
.ip-finder__reset {
	display: none;
	margin: 26px auto 0;
	padding: 10px 20px;
	border: 1px solid var(--ip-line);
	border-radius: var(--ip-radius-pill);
	background: #fff;
	color: var(--ip-body);
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

.ip-finder__reset.is-visible { display: block; }
.ip-finder__reset:hover { border-color: var(--ip-blue); color: var(--ip-blue-700); }

/* A product hidden by the finder. */
.ip-card[hidden] { display: none; }

@media (max-width: 1100px) { .ip-finder { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 620px) {
	.ip-finder { grid-template-columns: 1fr; gap: 12px; }
	.ip-finder__tile { padding: 18px 20px; gap: 15px; }
	.ip-finder__icon .ip-picon { width: 62px; height: 62px; }
	.ip-finder__label { font-size: 1rem; }
	/* On a phone the arrow is never hovered, so show it as an affordance. */
	.ip-finder__go { opacity: 1; transform: none; }
}

/* --- keeping the photo card's copy inside its fixed height --- */

/* The copy runs in full — the grid equalises the rows around it. */
.ip-card--photo > p { margin-bottom: 16px; }
.ip-card--photo .ip-card__list { margin-bottom: 0; }
.ip-card--photo .ip-card__foot { padding-top: 16px; }

/* ---------------------------------------------------- the counters ---- */

/*
 * The figures are the one place on the page that should feel celebratory, so
 * the card gets a little more room, a coloured rule that grows on hover, and
 * the number counts up the first time it comes into view.
 */
.ip-stat {
	position: relative;
	padding: 34px 24px 30px;
	overflow: hidden;
}

.ip-stat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--ip-blue), var(--ip-green));
	transform: translateX(-50%);
	transition: width 0.3s ease;
}

.ip-stat:hover::before { width: 64px; }

.ip-stat__label {
	margin-top: 8px;
	font-size: 0.92rem;
	color: var(--ip-body);
}

@media (max-width: 880px) {
	.ip-stat { padding: 26px 18px 24px; }
	.ip-stat__icon { width: 50px; height: 50px; margin-bottom: 12px; }
	.ip-stat__icon .ip-picon { width: 26px; height: 26px; }
}

/* ------------------------------------------------------------- map ---- */

.ip-map {
	position: relative;
	height: var(--ip-map-height, 420px);
	background: var(--ip-bg-soft);
	overflow: hidden;
}

.ip-map--rounded {
	border-radius: var(--ip-radius-lg);
	border: 1px solid var(--ip-line);
}

.ip-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* The default map is bright; a touch of restraint keeps it in the palette. */
	filter: saturate(0.92) contrast(1.02);
}

@media (max-width: 700px) {
	.ip-map { height: min(var(--ip-map-height, 420px), 300px); }
}

/* ------------------------------------------------------- type scale --- */

/*
 * Headings inside body copy sit a step below the headings that open a section,
 * so a page reads as one hierarchy instead of a stack of equally loud titles.
 */
.ip-entry-content h2 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); }
.ip-entry-content h3 { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem); }

.ip-entry-content p,
.ip-entry-content li { font-size: 1rem; }

.ip-entry-content > h2 { margin-top: 1.6em; }
.ip-entry-content > h2:first-child { margin-top: 0; }

body { font-size: 1rem; }

/* --------------------------------------------- text beside a picture -- */

.ip-textmedia {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 48px;
	align-items: center;
}

.ip-textmedia--flip .ip-entry-content { order: 2; }

.ip-textmedia__media {
	margin: 0;
	border-radius: var(--ip-radius-lg);
	overflow: hidden;
	background: var(--ip-bg-soft);
	/* Tall enough to hold its own beside a couple of paragraphs. */
	height: 420px;
}

.ip-textmedia .ip-textmedia__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}

.ip-textmedia .ip-entry-content { max-width: none; }

@media (max-width: 900px) {
	.ip-textmedia { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.ip-textmedia--flip .ip-entry-content { order: 0; }
	.ip-textmedia__media { height: 280px; }
}

/* ------------------------------------------------ product opening ----- */

/*
 * The photograph sits beside the summary rather than above it, so the page
 * opens with what the cover is, who it suits and the next step all visible
 * without scrolling — the detail sections follow underneath.
 */
.ip-product-intro {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 32px;
	align-items: center;
	margin-bottom: 40px;
	padding-bottom: 36px;
	border-bottom: 1px solid var(--ip-line);
}

.ip-product-intro--flat { grid-template-columns: minmax(0, 1fr); }

.ip-product-intro__media {
	position: relative;
	margin: 0;
	height: 280px;
	border-radius: var(--ip-radius-lg);
	background: var(--ip-bg-soft);
	overflow: hidden;
}

.ip-product-intro .ip-product-intro__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center 32%;
	display: block;
}

.ip-product-intro__badge {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 3px 12px rgba(6, 48, 74, 0.16);
	color: var(--ip-blue-600);
}

.ip-product-intro__badge .ip-picon { width: 32px; height: 32px; }

.ip-product-intro__body { min-width: 0; }

.ip-product-intro__lead {
	font-size: 1.1rem;
	line-height: 1.55;
	color: var(--ip-ink);
	margin-bottom: 18px;
}

.ip-product-intro__points {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ip-product-intro__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.95rem;
	color: var(--ip-body);
}

.ip-product-intro__points .ip-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--ip-green-600);
}

@media (max-width: 860px) {
	.ip-product-intro {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.ip-product-intro__media { height: 220px; }
}

/* ------------------------------------------- photo-led product card --- */

/*
 * A photograph across the top, the product's own icon in a white badge over
 * its lower-left corner, then the copy. The card keeps its padding for the
 * text while the image runs edge to edge.
 */
.ip-card--photo {
	/* Full height of its grid row: grid-auto-rows:1fr makes every row as tall
	   as its tallest card, so the cards match each other and still fit their
	   photograph and copy without anything being cut. */
	height: 100%;
	padding: 0 0 26px;
	overflow: hidden;
}

.ip-card--photo > *:not(.ip-card__media) {
	padding-inline: 26px;
}

.ip-card__media {
	position: relative;
	margin-bottom: 32px;
	/* A definite height, not a ratio: a percentage height on the image only
	   resolves against a parent whose height is already known, and an
	   aspect-ratio box does not count. Every card gets the same band. */
	height: 210px;
	background: var(--ip-bg-soft);
	overflow: visible;
}

/*
 * Absolutely positioned so the photograph cannot drive the box's height —
 * in flow, an img with height:100% inside an auto-height parent falls back to
 * its intrinsic size and every card ends up a different height.
 */
.ip-card .ip-card__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* Faces sit in the upper half of these photographs. */
	object-position: center 32%;
	border-radius: var(--ip-radius-lg) var(--ip-radius-lg) 0 0;
}

.ip-card__badge {
	position: absolute;
	left: 22px;
	bottom: -26px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 3px 12px rgba(6, 48, 74, 0.14);
	color: var(--ip-blue-600);
}

.ip-card__badge .ip-picon { width: 34px; height: 34px; }

/* The photograph is the card's own top edge, so nothing may overlap it. */
.ip-card--photo::before { display: none; }

.ip-card--photo h3 { margin-top: 4px; }

@media (max-width: 1100px) { .ip-card__media { height: 200px; } }

@media (max-width: 560px) {
	.ip-card__media { height: 190px; }
	.ip-card--photo > *:not(.ip-card__media) { padding-inline: 20px; }
	.ip-card__badge { left: 18px; width: 56px; height: 56px; bottom: -24px; }
	.ip-card__badge .ip-picon { width: 30px; height: 30px; }
}

/* ------------------------------------------------- product icons ------ */

/*
 * The product icon family is stroked, not filled, so it needs its own base
 * rule — .ip-icon sets fill:currentColor, which would turn these into blobs.
 */
.ip-picon {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ip-picon--lg { width: 32px; height: 32px; }

/*
 * Two tones. Left alone, the subject takes the colour it inherits and the
 * shield stays green. Where a product supplies --ip-icon (the palette from the
 * client's own product sheet) both take that colour, with the shield lightened
 * so each icon still reads as a single hue.
 */
.ip-picon__main { stroke: var(--ip-icon, currentColor); }

.ip-picon__accent {
	stroke: var(--ip-icon-accent, var(--ip-picon-accent, var(--ip-green-600)));
	opacity: var(--ip-icon-accent-opacity, 1);
}

/* The gap the shield cuts out of the subject behind it. It is painted in the
   colour of the surface, so it needs overriding on anything but white. */
.ip-picon__knockout {
	stroke: var(--ip-picon-knockout, #fff);
	stroke-width: 3.6;
}

/* On a dark or tinted surface a white gap would show, so there is none. */
.ip-hero .ip-picon__knockout,
.ip-section--navy .ip-picon__knockout,
.ip-consult__panel .ip-picon__knockout { stroke: none; }

/* On a dark band the deep green goes muddy, so lift it. */
.ip-section--navy .ip-picon__accent,
.ip-hero .ip-picon__accent,
.ip-consult__panel .ip-picon__accent { --ip-picon-accent: #9be86a; }

/* ==================================================== dark band surfaces ===

 * A widget set to the "Deep navy" band inherits light text from
 * .ip-section--navy, but its card keeps the white background it has in every
 * other band — which is exactly how white-on-white text happens. Every surface
 * that can land inside a band is therefore given a glassy dark treatment here,
 * so any widget can be dropped into a navy band and stay readable.
 */

.ip-section--navy .ip-card,
.ip-section--navy .ip-pillar,
.ip-section--navy .ip-process__step,
.ip-section--navy .ip-testimonial,
.ip-section--navy .ip-post-card,
.ip-section--navy .ip-accordion__item,
.ip-section--navy .ip-values li,
.ip-section--navy .ip-promise {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.16);
	color: rgba(255, 255, 255, 0.8);
	box-shadow: none;
}

/* On the dark band the white ring around a step number would glare, and the
   blue wash behind it is invisible — both are dropped. */
.ip-section--navy .ip-process__step::before {
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
}

.ip-section--navy .ip-process__step::after { display: none; }

.ip-section--navy .ip-process__step:hover::before {
	transform: translateX(-50%) scale(1.06);
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2);
}

.ip-section--navy .ip-card:hover,
.ip-section--navy .ip-pillar:hover,
.ip-section--navy .ip-process__step:hover,
.ip-section--navy .ip-testimonial:hover,
.ip-section--navy .ip-post-card:hover,
.ip-section--navy .ip-values li:hover,
.ip-section--navy .ip-accordion__item.is-open {
	background-color: rgba(255, 255, 255, 0.13);
	border-color: rgba(255, 255, 255, 0.38);
}

.ip-section--navy .ip-entry-content > h2::before { background: #9be86a; }

.ip-section--navy .ip-card h3,
.ip-section--navy .ip-card h3 a,
.ip-section--navy .ip-post-card h3 a,
.ip-section--navy .ip-testimonial__name,
.ip-section--navy .ip-promise strong,
.ip-section--navy .ip-trustbar__item strong,
.ip-section--navy .ip-accordion__trigger {
	color: #fff;
}

.ip-section--navy .ip-entry-content,
.ip-section--navy .ip-entry-content p,
.ip-section--navy .ip-entry-content li,
.ip-section--navy .ip-card p,
.ip-section--navy .ip-card__list li,
.ip-section--navy .ip-pillar p,
.ip-section--navy .ip-process__step p,
.ip-section--navy .ip-post-card p,
.ip-section--navy .ip-feature p,
.ip-section--navy .ip-testimonial__quote,
.ip-section--navy .ip-testimonial__role,
.ip-section--navy .ip-accordion__panel,
.ip-section--navy .ip-promise span,
.ip-section--navy .ip-trustbar__item span,
.ip-section--navy .ip-meta {
	color: rgba(255, 255, 255, 0.78);
}

/* Accent text that is a mid blue on white needs lifting off the navy. */
.ip-section--navy .ip-pillar__label,
.ip-section--navy .ip-link-arrow,
.ip-section--navy .ip-card h3 a:hover,
.ip-section--navy .ip-post-card h3 a:hover,
.ip-section--navy .ip-accordion__trigger:hover,
.ip-section--navy .ip-meta a:hover,
.ip-section--navy .ip-tabs__btn:hover {
	color: #8fd8ff;
}

.ip-section--navy .ip-card__icon:has(.ip-icon),
.ip-section--navy .ip-feature__num,
.ip-section--navy .ip-testimonial__avatar--initials,
.ip-section--navy .ip-accordion__icon {
	background-color: rgba(255, 255, 255, 0.14);
	color: #fff;
}

/* The tick glyph is drawn from borders, so it needs the lighter green. */
.ip-section--navy .ip-card__list li::before {
	border-color: #9be86a;
}

.ip-section--navy .ip-testimonial__quote::before,
.ip-section--navy .ip-testimonial__person {
	color: rgba(255, 255, 255, 0.5);
	border-top-color: rgba(255, 255, 255, 0.16);
}

.ip-section--navy .ip-tabs__nav {
	background-color: rgba(255, 255, 255, 0.1);
}

.ip-section--navy .ip-tabs__btn {
	color: rgba(255, 255, 255, 0.82);
}

.ip-section--navy .ip-tabs__btn.is-active {
	background-color: var(--ip-blue);
	color: #fff;
}

/*
 * Forms are the exception: dense input UI reads better on a solid light
 * surface, so the card stays white and the inherited light text is reset
 * rather than carried in.
 */
.ip-section--navy .ip-form-card {
	background-color: #fff;
	border-color: rgba(255, 255, 255, 0.24);
	color: var(--ip-ink);
}

.ip-section--navy .ip-form-card h2,
.ip-section--navy .ip-form-card h3,
.ip-section--navy .ip-form-card h4 {
	color: var(--ip-navy);
}

.ip-section--navy .ip-form-card p,
.ip-section--navy .ip-form-card .ip-form__note {
	color: var(--ip-muted);
}

/* ------------------------------------------------- continuing bands --- */

/*
 * Generated pages put one widget per Elementor container, so a heading and the
 * grid beneath it are two separate bands. When they share a background they
 * should read as one: close the seam rather than stacking two lots of section
 * padding. The classes are set on the container, so they stay visible and
 * removable in the editor's Advanced tab.
 */
/* 48px is the gap .ip-section-head already leaves above its content, so a
   heading band and the grid below it end up on the same rhythm as a heading
   inside a single band. */
.ip-band-open .ip-section { padding-bottom: 48px; }
.ip-band-continues .ip-section { padding-top: 0; }

/* The page hero carries its own bottom padding; a second full section's worth
   underneath it just leaves a hole between the title and the copy. Enough is
   kept for the content to clear the dark band rather than butt against it. */
.ip-band-after-hero .ip-section { padding-top: 44px; }

/* =========================================================== motion ===== */

/*
 * Everything here is scoped to .ip-motion, which is only present when the
 * visitor has not asked for reduced motion, IntersectionObserver exists, and
 * theme.js has confirmed it is running. Without it the page renders fully
 * styled and completely static.
 */

/*
 * The hidden state is declared against the component selectors themselves, not
 * against a class JavaScript adds later. If it were added later the elements
 * would already have painted at full opacity and would animate *out* before
 * animating in — a visible flash. Keep this list in sync with REVEAL_TARGETS
 * in assets/js/theme.js.
 *
 * The reveal is expressed as :not(.is-visible) rather than a separate winning
 * rule. A plain `.is-visible` rule loses to any target that includes an
 * element name — `.ip-values li` did exactly that, and those items stayed
 * invisible for good.
 */
.ip-motion .ip-section-head,
.ip-motion .ip-card,
.ip-motion .ip-way,
.ip-motion .ip-pillar,
.ip-motion .ip-stat,
.ip-motion .ip-process__step,
.ip-motion .ip-testimonial,
.ip-motion .ip-post-card,
.ip-motion .ip-feature,
.ip-motion .ip-values li,
.ip-motion .ip-promise,
.ip-motion .ip-accordion__item,
.ip-motion .ip-form-card,
.ip-motion .ip-footer__cta-inner {
	transition:
		opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--ip-delay, 0ms);
}

.ip-motion .ip-section-head:not(.is-visible),
.ip-motion .ip-card:not(.is-visible),
.ip-motion .ip-way:not(.is-visible),
.ip-motion .ip-pillar:not(.is-visible),
.ip-motion .ip-stat:not(.is-visible),
.ip-motion .ip-process__step:not(.is-visible),
.ip-motion .ip-testimonial:not(.is-visible),
.ip-motion .ip-post-card:not(.is-visible),
.ip-motion .ip-feature:not(.is-visible),
.ip-motion .ip-values li:not(.is-visible),
.ip-motion .ip-promise:not(.is-visible),
.ip-motion .ip-accordion__item:not(.is-visible),
.ip-motion .ip-form-card:not(.is-visible),
.ip-motion .ip-footer__cta-inner:not(.is-visible) {
	opacity: 0;
	transform: translate3d(0, 26px, 0);
}

/*
 * Hero motion.
 *
 * Three quiet layers: the copy rises in line by line, the composition breathes,
 * and a dashed ring turns slowly behind it. Nothing loops fast enough to pull
 * the eye away from the headline, and all of it stops for reduced motion.
 */

/* 1. The copy, staggered — re-runs when the slider changes slide, because
      .is-active is added fresh each time. */
/*
 * The stagger is tighter than it was: with a slide on screen for a couple of
 * seconds, the last line used to still be arriving as the next slide began.
 * Every line is now settled inside 0.8s.
 */
.ip-motion .ip-hero__slide.is-active > *,
.ip-motion .ip-hero__single > *,
.ip-motion .ip-hero__card {
	animation: ip-rise 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.ip-motion .ip-hero__slide.is-active > *:nth-child(1),
.ip-motion .ip-hero__single > *:nth-child(1) { animation-delay: 0.03s; }
.ip-motion .ip-hero__slide.is-active > *:nth-child(2),
.ip-motion .ip-hero__single > *:nth-child(2) { animation-delay: 0.08s; }
.ip-motion .ip-hero__slide.is-active > *:nth-child(3),
.ip-motion .ip-hero__single > *:nth-child(3) { animation-delay: 0.13s; }
.ip-motion .ip-hero__slide.is-active > *:nth-child(4),
.ip-motion .ip-hero__single > *:nth-child(4) { animation-delay: 0.18s; }
.ip-motion .ip-hero__slide.is-active > *:nth-child(5),
.ip-motion .ip-hero__single > *:nth-child(5) { animation-delay: 0.23s; }
.ip-motion .ip-hero__card { animation-delay: 0.24s; }

/* The assurance line and dots follow the copy in. */
.ip-motion .ip-hero__dots,
.ip-motion .ip-hero__trust {
	animation: ip-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.42s backwards;
}

/* 2. The composition arrives, then breathes. */
.ip-motion .ip-hero__panel {
	animation:
		ip-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s backwards,
		ip-hero-float 7s ease-in-out 1.1s infinite;
}

.ip-motion .ip-hero__float {
	animation:
		ip-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.42s backwards,
		ip-hero-float 7s ease-in-out 2.4s infinite;
}

@keyframes ip-hero-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -9px, 0); }
}

/* 3. A dashed ring turning behind the panel. */
.ip-hero__ring::before {
	content: "";
	position: absolute;
	inset: 26px;
	border: 1px dashed rgba(255, 255, 255, 0.16);
	border-radius: 50%;
}

.ip-motion .ip-hero__ring::before {
	animation: ip-hero-turn 46s linear infinite;
}

@keyframes ip-hero-turn {
	to { transform: rotate(360deg); }
}

@keyframes ip-rise {
	from { opacity: 0; transform: translate3d(0, 28px, 0); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ip-hero__panel,
	.ip-hero__float,
	.ip-hero__ring::before,
	.ip-hero__slide.is-active > *,
	.ip-hero__single > *,
	.ip-hero__dots,
	.ip-hero__trust {
		animation: none !important;
	}
}

/* Parallax on featured imagery inside a clipped frame. */
.ip-parallax-frame {
	overflow: hidden;
	border-radius: var(--ip-radius-lg);
}

.ip-parallax-frame img {
	will-change: transform;
	transform: translate3d(0, var(--ip-shift, 0px), 0) scale(1.06);
}

/* ======================================================= refinements ===== */

/* Cards gain a brand sheen and a lifted icon on hover. */
.ip-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(150deg, rgba(8, 145, 209, 0.04), transparent 60%);
	opacity: 0;
	transition: opacity 0.28s ease;
	pointer-events: none;
}

.ip-card:hover::before { opacity: 1; }

.ip-card > * { position: relative; }

/* No colour change on hover — the card itself does the responding. */
.ip-card__icon { transition: none; }

/* Centred section headings get a small gradient rule. */
.ip-section-head--center h2::after {
	content: "";
	display: block;
	width: 62px;
	height: 4px;
	margin: 18px auto 0;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--ip-blue), var(--ip-green));
}

.ip-section--navy .ip-section-head--center h2::after {
	background: linear-gradient(90deg, #8fd8ff, #9be86a);
}

/* Buttons get a light sweep on hover. */
.ip-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ip-btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 45%;
	height: 100%;
	z-index: -1;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
	transform: skewX(-18deg);
	transition: left 0.55s ease;
}

.ip-btn:hover::after { left: 130%; }

/* Steps joined by a rule that runs between the first and last number only —
   it used to start and end at fixed percentages, so with three steps it
   carried on past the last card into empty space. */
.ip-process { position: relative; }

@media (min-width: 981px) {
	.ip-process::before {
		content: "";
		position: absolute;
		top: 30px;
		left: calc(50% / var(--ip-steps, 5));
		right: calc(50% / var(--ip-steps, 5));
		height: 2px;
		background: repeating-linear-gradient(90deg, rgba(8, 145, 209, 0.45) 0 7px, rgba(8, 145, 209, 0) 7px 14px);
	}
}

.ip-process__step {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ip-process__step:hover {
	transform: translateY(-5px);
	border-color: rgba(8, 145, 209, 0.32);
	box-shadow: var(--ip-shadow-lg);
}

.ip-process__step:hover::before {
	transform: translateX(-50%) scale(1.06);
	box-shadow: 0 0 0 6px #fff, 0 10px 22px rgba(6, 48, 74, 0.26);
}

/* Stat values pick up the brand gradient. */
.ip-stat {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ip-stat:hover {
	transform: translateY(-4px);
	box-shadow: var(--ip-shadow);
}

.ip-stat__value {
	background-color: var(--ip-blue-700);
	background-image: linear-gradient(120deg, var(--ip-blue-700), var(--ip-blue) 55%, var(--ip-green));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ip-section--navy .ip-stat__value {
	background: none;
	color: #fff;
}

/* Testimonials lift like the cards do. */
.ip-testimonial {
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ip-testimonial:hover {
	transform: translateY(-4px);
	border-color: rgba(8, 145, 209, 0.3);
	box-shadow: var(--ip-shadow);
}

.ip-pillar {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ip-pillar:hover {
	transform: translateY(-4px);
	box-shadow: var(--ip-shadow);
}

.ip-values li {
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.ip-values li:hover {
	transform: translateY(-3px);
	border-color: rgba(8, 145, 209, 0.45);
	box-shadow: var(--ip-shadow-sm);
}

/* Long-form content polish. */
.ip-entry-content > h2 {
	position: relative;
	padding-left: 18px;
}

.ip-entry-content > h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.16em;
	bottom: 0.16em;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--ip-blue), var(--ip-green));
}

.ip-entry-content a:not(.ip-btn):not(.ip-link-arrow) {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	transition: background-size 0.3s ease, color 0.18s ease;
}

.ip-entry-content a:not(.ip-btn):not(.ip-link-arrow):hover {
	background-size: 100% 1px;
}

/* ------------------------------------------------------------ utilities --- */

.ip-text-center { text-align: center; }
.ip-mb-0 { margin-bottom: 0; }
.ip-mt-32 { margin-top: 32px; }
.ip-mt-48 { margin-top: 48px; }
.ip-lead { font-size: 1.1rem; color: var(--ip-body); }
.ip-small { font-size: 0.86rem; color: var(--ip-muted); }

.ip-disclaimer-note {
	margin-top: 34px;
	padding: 16px 20px;
	border-left: 3px solid var(--ip-blue);
	background: var(--ip-bg-soft);
	border-radius: 0 var(--ip-radius) var(--ip-radius) 0;
	font-size: 0.86rem;
	color: var(--ip-muted);
}

.ip-disclaimer-note p:last-child { margin-bottom: 0; }

.ip-empty {
	padding: 48px 30px;
	text-align: center;
	border: 1px dashed var(--ip-line);
	border-radius: var(--ip-radius-lg);
	color: var(--ip-muted);
	background: var(--ip-bg-soft);
}

/* WordPress core alignment classes */
.alignleft { float: left; margin: 0 1.6em 1.2em 0; }
.alignright { float: right; margin: 0 0 1.2em 1.6em; }
.aligncenter { margin: 0 auto 1.2em; }
/* Editor "wide" blocks fill the container rather than sitting at their own
   width, so they keep the site's single left/right edge. */
.alignwide { max-width: 100%; margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.wp-caption-text, .wp-element-caption { font-size: 0.84rem; color: var(--ip-muted); text-align: center; }
.sticky .ip-post-card { border-color: var(--ip-blue); }
.clearfix::after { content: ""; display: table; clear: both; }

/* Elementor: let the editor own the layout inside canvas templates. Only the
   hero the PHP template draws is suppressed — the Page Hero widget renders the
   same band and must stay visible. */
/* Only a WordPress *page* built in Elementor draws its own hero widget.
   Elementor also adds .elementor-page to product and post singles, which was
   wrongly hiding the hero the template draws for them. */
.page.elementor-page .ip-page-hero--template { display: none; }

/* Long-form copy reads better on a narrower measure than the full container. */
.ip-entry-content--narrow { max-width: 74ch; }
.ip-section-head--center + .ip-entry-content--narrow { margin-inline: auto; }

.ip-elementor-hint {
	margin: 0;
	padding: 10px 16px;
	background: #fff8e5;
	border: 1px dashed #e6c65c;
	border-radius: var(--ip-radius);
	color: #85670c;
	font-size: 0.85rem;
}

@media print {
	.ip-header, .ip-footer__cta, .ip-mobile-bar, .ip-floats, .ip-topbar { display: none !important; }
}

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

/* ------------------------------------------------------ touch targets --- */

/*
 * Anything tapped with a thumb gets a target of at least 24px, and the
 * navigation — which is the most-used control on a phone — gets 44px. These
 * are minimums applied on top of the existing look: nothing moves on a
 * desktop, where a pointer is precise.
 */
@media (max-width: 1024px) {
	.ip-mobile-bar a { font-size: 0.75rem; }

	.ip-nav .menu > li > a,
	.ip-nav .sub-menu > li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.ip-topbar a,
	.ip-footer__nav a,
	.ip-footer__main .menu a,
	.ip-footer__legal a,
	.ip-footer__contact a,
	.ip-footer__credit a,
	.ip-breadcrumbs a,
	.ip-card__list a {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
	}

	/* A card's title is its main link; a 23px line box is a small thing to hit. */
	.ip-card h3 a,
	.ip-card--photo h3 a,
	.ip-post-card h3 a {
		display: inline-block;
		padding-block: 2px;
	}

	/* The breadcrumb list is inline, so its links stay inline too. */
	.ip-breadcrumbs a { vertical-align: middle; }
}

@media (max-width: 600px) {
	/* The decorative shield is pinned past the panel's right edge; on a narrow
	   screen that put it outside the viewport. */
	.ip-consult__crest { right: -10px; top: -20px; }
}