/* ==========================================================================
   Islamic Finance page
   Everything is scoped to .if-page, so the theme's own styles are not affected.
   Typeface is inherited from the theme. Brand values live in the variables below.
   ========================================================================== */

.if-page {
	--if-accent: #007a80;
	--if-accent-strong: #005d62;
	--if-accent-bright: #2fc2c4;
	--if-ink: #101517;
	--if-text: #3b4447;
	--if-muted: #667276;
	--if-line: #dfe5e6;
	--if-tint: #f3f6f6;
	--if-surface: #ffffff;
	--if-dark: #0b1719;
	--if-dark-2: #12262a;

	--if-container: 1280px;
	--if-gutter: clamp(20px, 4vw, 48px);
	--if-space: clamp(64px, 9vw, 128px);
	--if-radius: 4px;
	--if-ease: cubic-bezier(0.22, 0.61, 0.21, 1);
	/* Distance from the top of the window for headings that stay in view while their block scrolls. */
	--if-sticky-top: 120px;

	color: var(--if-text);
	font-size: 17px;
	line-height: 1.6;
	overflow-x: clip;
}

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

.if-page :where(h2, h3, h4, p, ul, ol, dl, dt, dd, figure, blockquote) {
	margin: 0;
	padding: 0;
}

.if-page :where(ul, ol) {
	list-style: none;
}

.if-page :where(button) {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.if-page :where(a) {
	color: inherit;
	text-decoration: none;
}

.if-page :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

.if-page :is(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--if-accent);
	outline-offset: 3px;
}

.if-page :is(.if-theme-dark, .if-theme-accent) :is(a, button, [tabindex]):focus-visible {
	outline-color: #fff;
}

.if-page [hidden] {
	display: none !important;
}

.if-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.if-icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

/* Layout ------------------------------------------------------------------ */

/* The wrapper also carries the theme's "container" class, so every block lines up with the hero.
   These values are a fallback only (zero specificity): the theme's container wins. */
:where(.if-container) {
	width: 100%;
	max-width: calc(var(--if-container) + var(--if-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--if-gutter);
}

.if-section {
	position: relative;
	padding-block: var(--if-space);
	background: var(--if-surface);
	scroll-margin-top: var(--if-sticky-top);
}

.if-theme-tint {
	background: var(--if-tint);
}

/* Two neighbouring blocks on the same background share one gap instead of two. */
.if-theme-light + .if-theme-light {
	padding-top: 0;
}

.if-theme-dark,
.if-theme-accent {
	--if-ink: #ffffff;
	--if-text: rgba(255, 255, 255, 0.78);
	--if-muted: rgba(255, 255, 255, 0.6);
	--if-line: rgba(255, 255, 255, 0.16);
	--if-accent: var(--if-accent-bright);
	color: var(--if-text);
}

.if-theme-dark {
	background:
		radial-gradient(60% 80% at 100% 0%, rgba(47, 194, 196, 0.16), transparent 70%),
		linear-gradient(180deg, var(--if-dark) 0%, var(--if-dark-2) 100%);
}

.if-theme-accent {
	--if-accent: #ffffff;
	background: linear-gradient(120deg, #005d62 0%, #007a80 60%, #0a8f93 100%);
}

.if-section__more {
	margin-top: clamp(28px, 4vw, 48px);
}

/* Typography -------------------------------------------------------------- */

.if-h2,
.if-h3,
.if-h4 {
	color: var(--if-ink);
	font-weight: 600;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.if-h2 {
	max-width: 22ch;
	margin-bottom: clamp(28px, 3.6vw, 48px);
	font-size: clamp(26px, 2.8vw, 40px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

/* Overline above each heading: green label with a dash in front. */
.if-page .if-overline,
#if-ifab-functions .if-overline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 clamp(12px, 1.4vw, 16px);
	color: var(--if-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.if-page .if-overline::before,
#if-ifab-functions .if-overline::before {
	content: "";
	flex: none;
	width: 28px;
	height: 2px;
	background: currentColor;
}

/* On dark backgrounds the label takes the bright green. */
#if-ifab-functions .if-overline {
	color: var(--expat-stroke, #2fc2c4) !important;
}

/* On dark backgrounds the label takes the bright green. */
.if-theme-dark .if-overline,
.if-contacts .if-overline {
	color: var(--if-accent-bright);
}

.if-h3 {
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.2;
}

.if-h4 {
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.3;
}

.if-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(24px, 3vw, 40px);
	color: var(--if-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

.if-eyebrow::before {
	content: "";
	width: 40px;
	height: 1px;
	background: currentColor;
}

.if-lead {
	color: var(--if-text);
	font-size: clamp(17px, 1.4vw, 19px);
	line-height: 1.6;
}

.if-prose > * + * {
	margin-top: 1em;
}

.if-prose a {
	color: var(--if-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.2s, text-decoration-color 0.2s;
}

.if-prose a:hover {
	color: var(--if-accent-strong);
}

.if-prose--lead {
	font-size: clamp(17px, 1.4vw, 19px);
}

.if-prose ul {
	padding-left: 1.2em;
	list-style: disc;
}

.if-prose ol {
	padding-left: 1.2em;
	list-style: decimal;
}

/* Links ------------------------------------------------------------------- */

.if-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--if-accent);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.if-link__label {
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.35s var(--if-ease);
}

.if-link:hover .if-link__label,
.if-card--link:hover .if-link__label {
	background-size: 100% 1px;
}

.if-link .if-icon {
	transition: transform 0.35s var(--if-ease);
}

.if-link:hover .if-icon--arrow,
.if-card--link:hover .if-link .if-icon--arrow {
	transform: translateX(5px);
}

.if-link:hover .if-icon--arrow-up,
.if-card--link:hover .if-link .if-icon--arrow-up {
	transform: translate(3px, -3px);
}

/* The whole card is clickable through the link's pseudo-element. */
.if-link--stretched::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.if-link--button {
	padding: 16px 26px;
	border: 1px solid var(--if-accent);
	border-radius: var(--if-radius);
	transition: background-color 0.3s, color 0.3s;
}

.if-link--button:hover {
	background: var(--if-accent);
	color: var(--if-dark);
}

.if-link--button .if-link__label {
	background: none;
}

/* Cards ------------------------------------------------------------------- */

.if-cards {
	display: grid;
	gap: clamp(16px, 2vw, 24px);
}

.if-card {
	position: relative;
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid var(--if-line);
	border-radius: var(--if-radius);
	background: var(--if-surface);
	transition: border-color 0.35s, box-shadow 0.35s var(--if-ease), transform 0.35s var(--if-ease);
}

/* Accent line that draws itself across the top edge. */
.if-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: 2px;
	border-radius: var(--if-radius) var(--if-radius) 0 0;
	background: var(--if-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s var(--if-ease);
}

.if-card--link:hover,
.if-card--link:focus-within {
	border-color: transparent;
	box-shadow: 0 18px 44px -18px rgba(11, 23, 25, 0.28);
	transform: translateY(-4px);
}

.if-card--link:hover::before,
.if-card--link:focus-within::before {
	transform: scaleX(1);
}

/* Overview ---------------------------------------------------------------- */

.if-intro {
	display: grid;
	gap: clamp(20px, 3vw, 32px) clamp(40px, 7vw, 120px);
}

.if-intro .if-h2 {
	margin-bottom: 0;
}

.if-note {
	margin-top: clamp(24px, 3vw, 36px);
	padding: 18px 22px;
	border-left: 2px solid var(--if-accent);
	background: var(--if-tint);
	color: var(--if-ink);
	font-size: 15px;
	line-height: 1.55;
}

.if-figures {
	margin-top: clamp(56px, 7vw, 104px);
}

.if-figures__grid {
	display: grid;
	gap: 0 clamp(24px, 3vw, 48px);
}

.if-section--figures {
	padding-block: clamp(48px, 6vw, 88px);
}

.if-figure {
	display: flex;
	flex-direction: column;
	padding-block: clamp(10px, 1.2vw, 16px);
}

.if-figure__value {
	order: 1;
	display: flex;
	flex-direction: column;
	color: var(--if-ink);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
}

/* Number with its units, all on one baseline; every figure uses the same sizes. */
.if-figure__line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.28em;
}

.if-figure__number {
	color: var(--if-accent);
	font-size: clamp(38px, 3.4vw, 52px);
	font-variant-numeric: tabular-nums;
}

.if-figure__unit {
	font-size: clamp(18px, 1.6vw, 22px);
	letter-spacing: -0.01em;
}

/* A currency sign such as "$": a space between it and the number. */
.if-figure__unit--symbol {
	margin-right: 0.08em;
	font-size: clamp(26px, 2.4vw, 34px);
}

/* "Более" / "Over": its own line above the number; the line is kept empty in the other figures. */
.if-figure__pre {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
}

.if-figure__label {
	order: 2;
	margin-top: 12px;
	color: var(--if-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
}

/* Figures side by side share their rows: numbers start on one line and labels on another,
   even when a long unit ("трлн теңгеден астам") wraps under its number. */
@supports (grid-template-rows: subgrid) {
	.if-figures__grid {
		grid-auto-rows: auto;
	}

	.if-figure {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		row-gap: 0;
		align-content: start;
	}
}

.if-why {
	display: grid;
	gap: clamp(24px, 3vw, 40px) clamp(40px, 7vw, 120px);
}

.if-page .if-why__title {
	margin-bottom: 0;
}

.if-why__item {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 32px);
	padding-block: clamp(16px, 1.8vw, 22px);
	border-top: 1px solid var(--if-line);
	transition: padding-left 0.4s var(--if-ease);
}

.if-why__item:last-child {
	border-bottom: 1px solid var(--if-line);
}

.if-why__index {
	flex: none;
	color: var(--if-accent);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.if-why__icon {
	flex: none;
	width: clamp(36px, 3.2vw, 44px);
	height: clamp(36px, 3.2vw, 44px);
	color: var(--if-accent);
}

.if-why__icon svg {
	fill: currentColor;
}

.if-why__icon svg,
.if-why__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Title above, content below (Why, How to Apply, IFAB, FAQ): text lines stay readable. */
.if-split__aside .if-lead,
.if-intro__text {
	max-width: 760px;
}

.if-why__text {
	color: var(--if-ink);
	font-size: clamp(17px, 1.5vw, 20px);
	font-weight: 500;
	line-height: 1.4;
}

/* Ecosystem: tall image, heading and a carousel of cards over the image ---- */

.if-eco {
	display: grid;
	gap: clamp(24px, 4vw, 40px);
}

.if-eco__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--if-radius);
	background: linear-gradient(160deg, var(--if-dark) 0%, #0e3438 55%, var(--if-accent) 130%);
}

.if-page .if-eco__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Without a photo: concentric rings that echo the AIFC mark. */
.if-eco__media--empty::before {
	content: "";
	position: absolute;
	top: 34%;
	left: 50%;
	width: 62%;
	aspect-ratio: 1;
	border: 1px solid rgba(47, 194, 196, 0.55);
	border-radius: 50%;
	box-shadow:
		0 0 0 46px rgba(47, 194, 196, 0.07),
		0 0 0 47px rgba(47, 194, 196, 0.3),
		0 0 0 104px rgba(47, 194, 196, 0.04),
		0 0 0 105px rgba(47, 194, 196, 0.16),
		0 0 0 176px rgba(47, 194, 196, 0.03),
		0 0 0 177px rgba(47, 194, 196, 0.1);
	transform: translate(-50%, -50%);
}

.if-eco__main {
	min-width: 0;
}

.if-eco__title {
	margin-bottom: clamp(24px, 4vw, 56px);
}

.if-eco__carousel {
	--if-slide: clamp(250px, 76vw, 290px);
	--if-slide-gap: clamp(14px, 2vw, 28px);
}

.if-eco-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: clamp(320px, 30vw, 410px);
	padding: clamp(22px, 2.2vw, 28px);
	background: var(--if-tint);
	transition: background-color 0.4s ease, box-shadow 0.5s var(--if-ease), transform 0.5s var(--if-ease);
}

.if-eco-card__icon {
	margin-bottom: clamp(20px, 2.4vw, 32px);
	color: var(--if-accent);
}

.if-eco-card__icon .if-icon {
	width: 44px;
	height: 44px;
	stroke-width: 1;
}

.if-eco-card__title {
	margin-bottom: 16px;
	color: var(--if-ink);
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.if-eco-card__text {
	margin-bottom: 24px;
	font-size: 15px;
	line-height: 1.6;
}

.if-eco-card__link {
	margin-top: auto;
}

@media (hover: hover) {
	.if-eco-card--link:hover {
		background: var(--if-surface);
		box-shadow: 0 18px 44px -18px rgba(11, 23, 25, 0.28);
		transform: translateY(-4px);
	}

	.if-eco-card--link:hover .if-link__label {
		background-size: 100% 1px;
	}

	.if-eco-card--link:hover .if-link .if-icon--arrow {
		transform: translateX(5px);
	}

	.if-eco-card--link:hover .if-link .if-icon--arrow-up {
		transform: translate(3px, -3px);
	}
}

/* Carousel ---------------------------------------------------------------- */

.if-carousel {
	--if-slide: clamp(220px, 68vw, 280px);
	--if-slide-gap: clamp(12px, 1.6vw, 20px);
	min-width: 0;
}

.if-page .if-carousel__track {
	display: flex;
	gap: var(--if-slide-gap);
	/* Room for the hover lift and its shadow, which the scroll container would otherwise clip. */
	margin: -12px -12px -36px;
	padding: 12px 12px 36px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: 12px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

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

.if-carousel__track.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.if-carousel__track.is-dragging a {
	pointer-events: none;
}

.if-carousel__slide {
	flex: 0 0 var(--if-slide);
	min-width: 0;
	scroll-snap-align: start;
}

.if-carousel__controls {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: clamp(24px, 3vw, 40px);
}

.if-carousel__bar {
	position: relative;
	flex: 1;
	max-width: 240px;
	height: 1px;
	background: var(--if-line);
}

.if-carousel__progress {
	position: absolute;
	top: -0.5px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--if-accent);
	transform: scaleX(var(--if-carousel-size, 0.3));
	transform-origin: left;
	translate: calc(var(--if-carousel-pos, 0) * 100%) 0;
	transition: translate 0.2s linear;
}

.if-page .if-carousel__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--if-ink);
	border-radius: 50%;
	color: var(--if-ink);
	transition: background-color 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s;
}

.if-page .if-carousel__arrow:hover:not(:disabled) {
	border-color: var(--if-accent);
	background: var(--if-accent);
	color: #fff;
}

.if-page .if-carousel__arrow:disabled {
	border-color: var(--if-line);
	color: var(--if-muted);
	cursor: default;
	opacity: 0.6;
}

.if-carousel__arrow--prev .if-icon {
	transform: scaleX(-1);
}

/* Report card: label, title, meta and an image at the bottom -------------- */

.if-page .if-report {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	min-height: clamp(330px, 28vw, 390px);
	overflow: hidden;
	border-radius: 14px;
	background: #f3f6fa;
	color: var(--if-ink);
	transition: box-shadow 0.5s var(--if-ease), transform 0.5s var(--if-ease);
}

.if-carousel__slide:nth-child(3n) .if-report {
	background: #faf3ee;
}

.if-report__label {
	margin: 18px 20px 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(16, 37, 66, 0.06);
	color: #102542;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.if-report__title {
	margin: 16px 20px 0;
	color: #102542;
	font-size: clamp(16px, 1.3vw, 18px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.if-report__meta {
	margin: 10px 20px 0;
	color: #5a6675;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.if-report__media {
	display: grid;
	place-items: center;
	flex: none;
	width: 100%;
	height: clamp(120px, 11vw, 150px);
	margin-top: auto;
	overflow: hidden;
}

/* The gap above the image survives even when the title is long. */
.if-report__meta,
.if-report__title:not(:has(+ .if-report__meta)) {
	padding-bottom: 22px;
}

.if-page .if-report__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--if-ease);
}

.if-report__media--empty {
	position: relative;
	background: linear-gradient(150deg, #d9ecec 0%, #c3dfe0 100%);
	color: var(--if-accent);
}

/* Without a cover: soft rings in the brand colour behind a document icon. */
.if-report__media--empty::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 78%;
	width: 46%;
	aspect-ratio: 1;
	border: 1px solid rgba(0, 122, 128, 0.35);
	border-radius: 50%;
	box-shadow:
		0 0 0 18px rgba(0, 122, 128, 0.05),
		0 0 0 19px rgba(0, 122, 128, 0.2),
		0 0 0 42px rgba(0, 122, 128, 0.04),
		0 0 0 43px rgba(0, 122, 128, 0.12);
	transform: translate(-50%, -50%);
	transition: transform 1s var(--if-ease);
}

.if-report__media--empty .if-icon {
	position: relative;
	width: 32px;
	height: 32px;
	stroke-width: 1;
}

.if-report:hover .if-report__media--empty::before {
	transform: translate(-50%, -50%) scale(1.1);
}

@media (hover: hover) {
	.if-page .if-report:hover {
		box-shadow: 0 22px 44px -22px rgba(16, 37, 66, 0.35);
		transform: translateY(-6px);
	}

	.if-report:hover .if-report__media img {
		transform: scale(1.06);
	}
}

/* Publication card, as on the site's Publications page: grid of 3, tag on the cover,
   date and title below ------------------------------------------------------ */

.if-page .if-pubs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.if-pubs__item {
	display: flex;
	min-width: 0;
	margin: 0;
}

.if-page .if-pub {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 12px;
	background: #f5f6f8;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.if-pub__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 4px;
	background: #fff;
	color: #0a2540;
	font-size: 12px;
	line-height: 1.4;
}

.if-pub__image {
	display: block;
	height: 180px;
	overflow: hidden;
}

.if-page .if-pub__image img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.if-pub__image--empty {
	display: grid;
	place-items: center;
	background: linear-gradient(150deg, #d9ecec 0%, #c3dfe0 100%);
	color: var(--if-accent);
}

.if-pub__image--empty .if-icon {
	width: 32px;
	height: 32px;
	stroke-width: 1;
}

.if-pub__body {
	display: block;
	padding: 16px;
}

.if-pub__date {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	opacity: 0.6;
}

.if-pub__title {
	display: block;
	margin: 6px 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	transition: color 0.25s ease;
}

.if-page .if-pub:hover {
	box-shadow: 0 16px 36px rgba(10, 37, 64, 0.16);
	transform: translateY(-4px);
}

.if-pub:hover .if-pub__image img {
	transform: scale(1.06);
}

.if-pub:hover .if-pub__title {
	color: #0a2540;
}

.if-page .if-pub:focus-visible {
	outline: 2px solid var(--if-accent);
	outline-offset: 3px;
}

@media (max-width: 768px) {
	.if-page .if-pubs {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.if-page .if-pub,
	.if-page .if-pub__image img {
		transition: none;
	}

	.if-page .if-pub:hover {
		transform: none;
	}
}

/* Tabs-------------------------------------------------------------------- */

.if-tabs__bar {
	margin-bottom: clamp(28px, 4vw, 48px);
	overflow-x: auto;
	scrollbar-width: none;
}

.if-tabs__bar::-webkit-scrollbar {
	display: none;
}

.if-tabs__list {
	position: relative;
	display: inline-flex;
	padding: 5px;
	border-radius: 999px;
	background: var(--if-tint);
}

.if-page .if-tabs__tab {
	position: relative;
	z-index: 1;
	padding: 13px clamp(18px, 2.4vw, 30px);
	border-radius: 999px;
	color: var(--if-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	transition: color 0.3s;
}

.if-page .if-tabs__tab.is-active {
	color: #fff;
}

.if-tabs__indicator {
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 0;
	width: var(--if-tab-w, 0);
	border-radius: 999px;
	background: var(--if-accent);
	transform: translateX(var(--if-tab-x, 0));
	transition: transform 0.45s var(--if-ease), width 0.45s var(--if-ease);
}

/* Before the script measures the tabs the active one is highlighted directly. */
.if-tabs__list:not(.is-ready) .if-tabs__indicator {
	display: none;
}

.if-page .if-tabs__list:not(.is-ready) .if-tabs__tab.is-active {
	background: var(--if-accent);
}

.if-js .if-tabs__panel:not(.is-active) {
	display: none;
}

.if-tabs__panel.is-active {
	animation: if-panel-in 0.5s var(--if-ease) both;
}

@keyframes if-panel-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

/* Activities: list on the left, details on the right. */
.if-switch {
	display: grid;
	gap: clamp(20px, 3vw, 32px) clamp(32px, 5vw, 80px);
}

.if-switch__list {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
}

.if-switch__list::-webkit-scrollbar {
	display: none;
}

.if-page .if-switch__tab {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border: 1px solid var(--if-line);
	border-radius: 999px;
	color: var(--if-text);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s, padding 0.4s var(--if-ease);
}

.if-switch__index {
	color: var(--if-accent);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

.if-switch__tab .if-icon {
	display: none;
}

.if-page .if-switch__tab.is-active {
	border-color: var(--if-ink);
	background: var(--if-ink);
	color: #fff;
}

.if-switch__tab.is-active .if-switch__index {
	color: var(--if-accent-bright);
}

.if-activity {
	padding: clamp(24px, 3.4vw, 48px);
	border-radius: var(--if-radius);
	background: var(--if-tint);
}

.if-js .if-activity:not(.is-active) {
	display: none;
}

.if-page:not(.if-js) .if-activity + .if-activity {
	margin-top: 16px;
}

.if-activity__title {
	margin-bottom: clamp(18px, 2vw, 28px);
}

.if-quote {
	margin-bottom: clamp(20px, 2.4vw, 28px);
	padding-left: clamp(18px, 2vw, 28px);
	border-left: 2px solid var(--if-accent);
}

.if-quote__text {
	color: var(--if-ink);
	font-size: clamp(17px, 1.4vw, 19px);
	line-height: 1.6;
}

.if-quote__source {
	margin-top: 12px;
	color: var(--if-muted);
	font-size: 14px;
	font-style: italic;
}

.if-activity__link {
	margin-top: clamp(20px, 2.4vw, 28px);
}

.if-service__index {
	display: block;
	margin-bottom: clamp(20px, 3vw, 40px);
	color: var(--if-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.if-service__title {
	margin-bottom: 16px;
}

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

.if-page .if-button {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 18px 30px;
	border-radius: var(--if-radius);
	background: var(--if-accent);
	color: var(--if-dark);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.45s var(--if-ease), transform 0.45s var(--if-ease);
}

.if-button .if-icon {
	transition: transform 0.45s var(--if-ease);
}

.if-page .if-button:hover {
	background: #fff;
	box-shadow: 0 16px 36px -16px rgba(47, 194, 196, 0.6);
	transform: translateY(-2px);
}

.if-button:hover .if-icon {
	transform: translateX(6px);
}

.if-steps__action {
	margin-top: clamp(32px, 4vw, 56px);
	padding-left: calc(var(--if-marker) + clamp(18px, 2.4vw, 32px));
}

/* How to apply ------------------------------------------------------------ */

.if-split {
	display: grid;
	gap: clamp(36px, 5vw, 56px) clamp(40px, 7vw, 120px);
}

/* FAQ category filter (pills, the active one black). */
.if-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 6px;
	/* The first label lines up with the text above it. */
	margin: 0 0 clamp(12px, 1.6vw, 20px) -16px;
}

.if-page .if-filter__button {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 10px 16px;
	border-radius: 10px;
	background: transparent;
	color: var(--if-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
	transition: background-color 0.3s, color 0.3s;
}

.if-page .if-filter__button:hover {
	background: var(--if-tint);
}

.if-page .if-filter__button.is-active {
	background: #000;
	color: #fff;
}

.if-filter__count {
	color: var(--if-muted);
	font-size: 13px;
	font-weight: 500;
}

.if-filter__button.is-active .if-filter__count {
	color: rgba(255, 255, 255, 0.6);
}

.if-faq__item[hidden] {
	display: none;
}

/* FAQ shows only the overline, so the list starts right under it. */
.if-split--faq {
	row-gap: clamp(8px, 1vw, 12px);
}

.if-split--faq .if-overline {
	margin-bottom: 0;
}

.if-split__aside .if-h2 {
	margin-bottom: clamp(20px, 2.4vw, 28px);
}

.if-split__aside .if-lead + div {
	margin-top: clamp(28px, 3vw, 40px);
}

.if-steps {
	--if-marker: 48px;
	position: relative;
}

.if-steps__track {
	position: absolute;
	top: calc(var(--if-marker) / 2);
	bottom: calc(var(--if-marker) / 2 + var(--if-steps-tail, 0px));
	left: calc(var(--if-marker) / 2 - 0.5px);
	width: 1px;
	background: var(--if-line);
}

.if-steps__fill {
	position: absolute;
	inset: 0;
	background: var(--if-accent);
	transform: scaleY(var(--if-steps-progress, 0));
	transform-origin: top;
}

.if-step {
	position: relative;
	display: grid;
	grid-template-columns: var(--if-marker) 1fr;
	gap: clamp(18px, 2.4vw, 32px);
	padding-bottom: clamp(28px, 3.4vw, 44px);
}

.if-step:last-child {
	padding-bottom: 0;
}

.if-step__marker {
	display: grid;
	place-items: center;
	width: var(--if-marker);
	height: var(--if-marker);
	border: 1px solid var(--if-line);
	border-radius: 50%;
	background: var(--if-dark);
	color: var(--if-muted);
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.5s var(--if-ease), border-color 0.5s, color 0.5s, box-shadow 0.5s;
}

.if-step.is-active .if-step__marker {
	border-color: var(--if-accent);
	background: var(--if-accent);
	color: var(--if-dark);
	box-shadow: 0 0 0 6px rgba(47, 194, 196, 0.16);
}

.if-step__body {
	padding-top: 10px;
}

.if-step__title {
	margin-bottom: 8px;
	transition: color 0.5s;
}

.if-js .if-step:not(.is-active) .if-step__title {
	color: var(--if-text);
}

.if-step__text {
	max-width: 58ch;
}

.if-step__text p + p {
	margin-top: 8px;
}

/* Links inside step texts and the "What's next?" note (dark block). */
.if-step__text a,
.if-steps__note-text a {
	color: var(--if-accent-bright);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.if-step__text a:hover,
.if-steps__note-text a:hover {
	color: #fff;
}

/* "What's next?" note under the steps. */
.if-steps__note {
	margin-top: clamp(28px, 3.6vw, 44px);
	margin-left: calc(var(--if-marker) + clamp(18px, 2.4vw, 32px));
	padding: clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 28px);
	max-width: 640px;
	border-left: 2px solid var(--if-accent-bright);
	background: rgba(255, 255, 255, 0.05);
}

.if-steps__note-title {
	margin-bottom: 8px;
	color: #fff;
}

.if-steps__note-text {
	color: rgba(255, 255, 255, 0.78);
	font-size: 15px;
	line-height: 1.6;
}

/* Overview: a lead text on its own. */
.if-overview__text {
	max-width: 900px;
	color: var(--if-ink);
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.55;
}

/* Advantage with a short lead ("Legal certainty."). */
.if-why__lead {
	color: inherit;
	font-weight: 700;
}

/* IFAB -------------------------------------------------------------------- */

.if-members {
	margin-top: clamp(56px, 7vw, 104px);
}

.if-members__title {
	margin-bottom: clamp(24px, 3vw, 40px);
}

.if-members__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 44px) clamp(14px, 2vw, 24px);
}

.if-member {
	position: relative;
}

.if-member__photo {
	position: relative;
	aspect-ratio: 4 / 5;
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: var(--if-radius);
	background: var(--if-tint);
}

.if-page .if-member__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.8s var(--if-ease), filter 0.5s;
}

.if-member__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(11, 23, 25, 0.55) 100%);
	opacity: 0;
	transition: opacity 0.45s;
}

.if-member__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--if-accent);
	font-size: 56px;
	font-weight: 600;
}

.if-member__role {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	padding: 6px 10px;
	border-radius: 2px;
	background: var(--if-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.if-member__name {
	color: var(--if-ink);
	font-size: clamp(16px, 1.4vw, 19px);
	font-weight: 600;
	line-height: 1.3;
}

.if-page .if-member__open {
	display: block;
	width: 100%;
	font-weight: inherit;
	transition: color 0.3s;
}

.if-member__open::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

.if-member__position {
	margin-top: 6px;
	color: var(--if-muted);
	font-size: 14px;
	line-height: 1.45;
}

.if-member__more {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: auto;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	aspect-ratio: 4 / 5;
	padding: 14px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.4s, transform 0.4s var(--if-ease);
	pointer-events: none;
}

.if-member__more .if-icon {
	width: 32px;
	height: 32px;
	padding: 7px;
	border-radius: 50%;
	background: #fff;
	color: var(--if-ink);
}

@media (hover: hover) {
	.if-member:hover .if-member__img,
	.if-member:focus-within .if-member__img {
		transform: scale(1.045);
	}

	.if-member:hover .if-member__photo::after,
	.if-member:focus-within .if-member__photo::after {
		opacity: 1;
	}

	.if-member:hover .if-member__more,
	.if-member:focus-within .if-member__more {
		opacity: 1;
		transform: none;
	}

	.if-member:hover .if-member__open {
		color: var(--if-accent);
	}
}

@media (hover: none) {
	.if-member__more {
		justify-content: flex-end;
		font-size: 0;
		opacity: 1;
		transform: none;
	}
}

/* Profile window ---------------------------------------------------------- */

.if-page .if-modal {
	width: min(960px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 6px;
	background: var(--if-surface);
	color: var(--if-text);
	box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.5);
	opacity: 0;
	transform: translateY(24px) scale(0.98);
	transition: opacity 0.35s, transform 0.45s var(--if-ease);
}

.if-modal::backdrop {
	background: rgba(11, 23, 25, 0.72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.35s;
}

.if-page .if-modal.is-open {
	opacity: 1;
	transform: none;
}

.if-modal.is-open::backdrop {
	opacity: 1;
}

.if-modal__box {
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 32px);
}

.if-modal__content {
	display: grid;
	overflow-y: auto;
	overscroll-behavior: contain;
	transition: opacity 0.2s;
}

.if-modal__content.is-switching {
	opacity: 0;
}

.if-modal__photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--if-tint);
}

.if-page .if-modal__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 18%;
}

.if-modal__photo:empty {
	display: none;
}

.if-modal__body {
	padding: clamp(24px, 4vw, 48px);
}

.if-modal__role {
	margin-bottom: 12px;
	color: var(--if-accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.if-modal__role:empty {
	display: none;
}

.if-modal__name {
	padding-right: 40px;
	outline: none;
}

.if-modal__position {
	margin-top: 10px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--if-line);
	color: var(--if-muted);
	font-size: 15px;
	line-height: 1.5;
}

.if-modal__bio {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.65;
}

.if-page .if-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--if-ink);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	transition: background-color 0.25s, color 0.25s, transform 0.4s var(--if-ease);
}

.if-page .if-modal__close:hover {
	background: var(--if-ink);
	color: #fff;
	transform: rotate(90deg);
}

.if-modal__nav {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	padding: 12px clamp(16px, 3vw, 28px);
	border-top: 1px solid var(--if-line);
}

.if-modal__counter {
	min-width: 44px;
	color: var(--if-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.if-page .if-modal__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--if-line);
	border-radius: 50%;
	color: var(--if-ink);
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.if-page .if-modal__arrow:hover {
	border-color: var(--if-accent);
	background: var(--if-accent);
	color: #fff;
}

.if-modal__arrow--prev .if-icon {
	transform: scaleX(-1);
}

/* Videos: "spotlight" — titles on the left, one large panel on the right ---- */

.if-spot {
	display: grid;
	gap: clamp(28px, 4vw, 48px) clamp(40px, 6vw, 96px);
}

.if-spot__heading {
	margin-bottom: clamp(24px, 3vw, 44px);
}

.if-spot__list {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.8vw, 26px);
}

.if-page .if-spot__tab {
	position: relative;
	padding: 6px 0 6px clamp(18px, 1.8vw, 24px);
	color: var(--if-muted);
	font-size: clamp(18px, 1.7vw, 24px);
	line-height: 1.3;
	text-align: left;
	transition: color 0.35s ease;
}

/* Thin rail on the left; the accent bar grows over it for the current video. */
.if-spot__tab::before,
.if-spot__tab::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: var(--if-line);
}

.if-spot__tab::after {
	width: 3px;
	background: var(--if-accent);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.5s var(--if-ease);
}

.if-page .if-spot__tab:hover,
.if-page .if-spot__tab.is-active {
	color: var(--if-ink);
}

.if-spot__tab.is-active::after {
	transform: scaleY(1);
}

.if-spot__more {
	margin-top: clamp(24px, 3vw, 40px);
}

.if-spot__panels {
	min-width: 0;
}

.if-page:not(.if-js) .if-spot__panel + .if-spot__panel {
	margin-top: 20px;
}

.if-spot__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 6px;
	background: var(--if-dark);
	box-shadow: 0 24px 48px -24px rgba(11, 23, 25, 0.45);
}

.if-page .if-spot__poster,
.if-spot__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.if-page .if-spot__poster {
	transition: transform 1.2s var(--if-ease);
}

.if-spot__frame:hover .if-spot__poster {
	transform: scale(1.04);
}

.if-spot__caption {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding: clamp(18px, 3vw, 40px);
	background: linear-gradient(20deg, rgba(11, 23, 25, 0.78) 0%, rgba(11, 23, 25, 0.3) 28%, rgba(11, 23, 25, 0) 52%);
	color: #fff;
}

.if-page .if-spot__watch {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: #fff;
	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 600;
	line-height: 1.3;
}

/* The whole panel starts the video. */
.if-spot__watch::after {
	content: "";
	position: absolute;
	inset: 0;
}

.if-spot__watch-label {
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	transition: background-size 0.45s var(--if-ease);
}

.if-spot__frame:hover .if-spot__watch-label {
	background-position: 100% 100%;
	background-size: 0 1px;
}

.if-spot__play {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(44px, 4vw, 56px);
	height: clamp(44px, 4vw, 56px);
	border-radius: 50%;
	background: #fff;
	color: var(--if-accent);
	transition: transform 0.4s var(--if-ease), background-color 0.3s, color 0.3s;
}

.if-spot__play::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid #fff;
	border-radius: 50%;
	animation: if-pulse 2.6s var(--if-ease) infinite;
}

.if-spot__play .if-icon {
	width: 36%;
	height: 36%;
	margin-left: 6%;
}

.if-spot__frame:hover .if-spot__play {
	background: var(--if-accent);
	color: #fff;
	transform: scale(1.08);
}

@keyframes if-pulse {
	from {
		opacity: 0.7;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(1.7);
	}
}

/* FAQ --------------------------------------------------------------------- */

.if-faq__item {
	border-bottom: 1px solid var(--if-line);
}

.if-page .if-faq__button {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding-block: clamp(20px, 2.2vw, 28px);
	color: var(--if-ink);
	font-size: clamp(17px, 1.5vw, 20px);
	font-weight: 600;
	line-height: 1.35;
	transition: color 0.3s;
}

.if-page .if-faq__button:hover,
.if-faq__item.is-open .if-faq__button {
	color: var(--if-accent);
}

.if-faq__icon {
	position: relative;
	flex: none;
	width: 32px;
	height: 32px;
	margin-top: -3px;
	border: 1px solid var(--if-line);
	border-radius: 50%;
	transition: background-color 0.3s, border-color 0.3s, transform 0.5s var(--if-ease);
}

.if-faq__icon::before,
.if-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 1.5px;
	margin: -0.75px 0 0 -6px;
	background: currentColor;
	transition: transform 0.5s var(--if-ease), background-color 0.3s;
}

.if-faq__icon::after {
	transform: rotate(90deg);
}

.if-faq__item.is-open .if-faq__icon {
	border-color: var(--if-accent);
	background: var(--if-accent);
	color: #fff;
	transform: rotate(180deg);
}

.if-faq__item.is-open .if-faq__icon::after {
	transform: rotate(0deg);
}

.if-js .if-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.5s var(--if-ease), visibility 0s 0.5s;
}

.if-js .if-faq__item.is-open .if-faq__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 0.5s var(--if-ease), visibility 0s;
}

.if-faq__inner {
	min-height: 0;
	overflow: hidden;
}

.if-faq__answer {
	max-width: 68ch;
	padding-bottom: clamp(22px, 2.4vw, 32px);
	font-size: 16px;
	opacity: 1;
	transition: opacity 0.4s 0.1s;
}

.if-js .if-faq__item:not(.is-open) .if-faq__answer {
	opacity: 0;
	transition-delay: 0s;
}

.if-page:not(.if-js) .if-faq__icon {
	display: none;
}

/* Contacts: dark rounded panel with rings ---------------------------------- */

.if-contacts {
	position: relative;
	padding: clamp(32px, 5.4vw, 72px) clamp(24px, 7.4vw, 104px);
	overflow: hidden;
	border-radius: clamp(16px, 2vw, 26px);
	background: #04214f;
	color: #fff;
}

/* Photo or video background chosen in the admin, with a shade that keeps the text readable. */
.if-page .if-contacts__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.if-contacts__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 33, 79, 0.88) 0%, rgba(4, 33, 79, 0.6) 55%, rgba(4, 33, 79, 0.25) 100%);
}

/* Concentric rings that fade out towards the text. */
.if-contacts__rings {
	position: absolute;
	inset: 0;
	background: repeating-radial-gradient(circle at 52% 50%, transparent 0 96px, #3d6fb6 96px 99px);
	-webkit-mask-image: linear-gradient(90deg, transparent 34%, rgba(0, 0, 0, 0.25) 50%, #000 66%);
	mask-image: linear-gradient(90deg, transparent 34%, rgba(0, 0, 0, 0.25) 50%, #000 66%);
	transform: scale(1.02);
	transition: transform 1.6s var(--if-ease);
}

/* On narrow screens the rings run behind the text, so they are toned down. */
@media (max-width: 899px) {
	.if-contacts__rings {
		opacity: 0.3;
	}
}

.if-contacts:hover .if-contacts__rings {
	transform: scale(1.08);
}

.if-contacts__title {
	position: relative;
	margin-bottom: clamp(16px, 2vw, 28px);
	color: #fff;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 400;
	line-height: 1.3;
}

.if-contacts__list {
	position: relative;
	display: grid;
	gap: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 48px);
}

.if-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.if-contact__about {
	max-width: 34ch;
	margin-bottom: 10px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 15px;
	line-height: 1.45;
}

.if-page .if-contact__email {
	margin-top: auto;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	color: #fff;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 700;
	line-height: 1.4;
	overflow-wrap: anywhere;
	transition: background-size 0.45s var(--if-ease), color 0.3s;
}

.if-page .if-contact__email:hover {
	background-position: 100% 100%;
	background-size: 0 1px;
	color: #9cc3f5;
}

.if-page .if-contact__email:focus-visible {
	outline-color: #fff;
}

.if-contacts--single .if-contact__about {
	max-width: 46ch;
}

/* Related business: large card on the left, smaller cards on the right ---- */

.if-related {
	display: grid;
	gap: clamp(12px, 1.4vw, 20px);
}

.if-related__list {
	display: grid;
	grid-auto-rows: 1fr;
	gap: clamp(12px, 1.4vw, 20px);
}

.if-related__item {
	display: flex;
}

.if-js .if-related__item {
	animation: if-panel-in 0.6s var(--if-ease) both;
}

.if-page .if-related__card {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	flex: 1;
	min-height: clamp(130px, 13vw, 170px);
	overflow: hidden;
	border-radius: 14px;
	background: #e2f1f0;
	color: var(--if-ink);
	transition: background-color 0.4s ease, box-shadow 0.5s var(--if-ease);
}

.if-page .if-related__card--main {
	min-height: clamp(220px, 28vw, 360px);
}

.if-related__body {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(18px, 2.2vw, 30px);
}

.if-related__title {
	overflow-wrap: break-word;
	hyphens: auto;
	font-size: clamp(18px, 1.7vw, 22px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.if-related__card--main .if-related__title {
	font-size: clamp(22px, 2.2vw, 30px);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.if-related__desc {
	margin-top: 8px;
	color: var(--if-text);
	font-size: 14px;
	line-height: 1.45;
}

.if-related__card--main .if-related__desc {
	margin-top: 14px;
	font-size: 16px;
}

.if-related__arrow {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin-top: auto;
	border: 1px solid currentColor;
	border-radius: 50%;
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity 0.4s, transform 0.5s var(--if-ease);
}

.if-related__arrow .if-icon {
	width: 18px;
	height: 18px;
}

.if-related__desc + .if-related__arrow,
.if-related__title + .if-related__arrow {
	margin-top: auto;
}

.if-related__media {
	position: relative;
	overflow: hidden;
	background: linear-gradient(140deg, var(--if-dark) 0%, #0e3438 100%);
}

.if-page .if-related__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--if-ease);
}

.if-related__media--empty::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 62%;
	width: 58%;
	aspect-ratio: 1;
	border: 1px solid rgba(47, 194, 196, 0.5);
	border-radius: 50%;
	box-shadow:
		0 0 0 26px rgba(47, 194, 196, 0.07),
		0 0 0 27px rgba(47, 194, 196, 0.3),
		0 0 0 60px rgba(47, 194, 196, 0.04),
		0 0 0 61px rgba(47, 194, 196, 0.16);
	transform: translate(-50%, -50%) scale(0.94);
	transition: transform 1s var(--if-ease);
}

@media (hover: hover) {
	.if-page .if-related__card:hover {
		background: #d3ebe9;
		box-shadow: 0 20px 44px -24px rgba(11, 23, 25, 0.4);
	}

	.if-related__card:hover .if-related__media img {
		transform: scale(1.06);
	}

	.if-related__card:hover .if-related__media--empty::before {
		transform: translate(-50%, -50%) scale(1.08);
	}

	.if-related__card:hover .if-related__arrow {
		opacity: 1;
		transform: none;
	}
}

/* IFAB core functions use the theme's Spoilers block markup. The colours come from the
   --expat-* variables set on the section in spoilers.php. They are enforced by ID and with
   !important because the theme paints this block in its own colours. */
#if-ifab-functions,
#if-ifab-functions.expatTab__section {
	background: var(--expat-bg) !important;
}

#if-ifab-functions::before,
#if-ifab-functions::after,
#if-ifab-functions .expatTab__container,
#if-ifab-functions .expatTab__wrapper,
#if-ifab-functions .expatTab__item {
	background: none !important;
}

#if-ifab-functions .expatTab__header h2,
#if-ifab-functions .expatTab__item_title,
#if-ifab-functions .expatTab__item_text,
#if-ifab-functions .expatTab__item_text p {
	color: var(--expat-text) !important;
}

#if-ifab-functions .expatTab__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#if-ifab-functions .expatTab__header h2 {
	font-size: clamp(26px, 2.8vw, 40px) !important;
	line-height: 1.12 !important;
}

#if-ifab-functions .expatTab__item {
	border-color: color-mix(in srgb, var(--expat-text) 24%, transparent) !important;
}

#if-ifab-functions .expatTab__item_title {
	transition: color 0.3s ease;
}

#if-ifab-functions .expatTab__item_title:hover,
#if-ifab-functions .expatTab__item.active .expatTab__item_title {
	color: var(--expat-stroke) !important;
}

#if-ifab-functions .expatTab__item_title::after {
	border-color: transparent !important;
	background-color: var(--expat-stroke) !important;
}

.if-spoilers + .if-section--members {
	padding-top: clamp(48px, 6vw, 88px);
}

.if-section--members .if-members {
	margin-top: 0;
}

/* Subscribe --------------------------------------------------------------- */

.if-subscribe {
	padding-bottom: var(--if-space);
	background: var(--if-surface);
}

/* Scroll reveal ----------------------------------------------------------- */

.if-js [data-if-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.8s var(--if-ease), transform 0.8s var(--if-ease);
	transition-delay: calc(var(--if-i, 0) * 80ms);
}

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

/* After the entrance the delay is dropped so hover effects respond at once. */
.if-js [data-if-reveal].is-done {
	transition-delay: 0s;
}

/* Breakpoints ------------------------------------------------------------- */

@media (min-width: 640px) {
	.if-figures__grid,
	.if-cards--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.if-members__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.if-modal__content {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	}

	.if-modal__photo {
		aspect-ratio: auto;
		min-height: 100%;
	}

	.if-page .if-modal__photo img {
		position: sticky;
		top: 0;
		max-height: calc(100dvh - 32px - 69px);
		object-position: center top;
	}
}

@media (min-width: 900px) {
	/* Up to three contacts side by side; each column wide enough for its e-mail. */
	.if-contacts__list {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	}

	.if-spot {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		align-items: start;
	}

	.if-related:not(.if-related--single) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.if-page .if-related__card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Activities: vertical list. */
	.if-switch {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		align-items: start;
	}

	.if-switch__list {
		flex-direction: column;
		gap: 0;
		overflow: visible;
		border-top: 1px solid var(--if-ink);
	}

	.if-page .if-switch__tab {
		padding: 20px 0;
		border: 0;
		border-bottom: 1px solid var(--if-line);
		border-radius: 0;
		font-size: 17px;
		font-weight: 600;
		white-space: normal;
	}

	.if-switch__label {
		flex: 1;
	}

	.if-switch__tab .if-icon {
		display: block;
		color: var(--if-accent);
		opacity: 0;
		transform: translateX(-8px);
		transition: opacity 0.35s, transform 0.4s var(--if-ease);
	}

	.if-page .if-switch__tab:hover {
		color: var(--if-ink);
		padding-left: 8px;
	}

	.if-page .if-switch__tab.is-active {
		padding-left: 16px;
		border-color: var(--if-line);
		background: none;
		color: var(--if-accent);
		box-shadow: inset 2px 0 0 var(--if-accent);
	}

	.if-switch__tab.is-active .if-switch__index {
		color: var(--if-accent);
	}

	.if-switch__tab.is-active .if-icon {
		opacity: 1;
		transform: none;
	}

	.if-why__item:hover {
		padding-left: 12px;
	}
}

@media (min-width: 1000px) {
	.if-members__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* Key figures: three per row, so long values ("$ 47.25 million") stay on one line. */
	.if-figures__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		row-gap: clamp(16px, 2vw, 28px);
	}

	/* Ecosystem: the image runs the full height on the left, the cards slide over its edge. */
	.if-eco {
		--if-eco-overlap: clamp(60px, 7vw, 100px);
		grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
		gap: 0;
	}

	.if-eco__media {
		aspect-ratio: auto;
		min-height: 640px;
	}

	.if-eco__main {
		padding-block: clamp(48px, 6vw, 96px) clamp(32px, 4vw, 56px);
	}

	.if-eco__title,
	.if-eco__main > .if-overline {
		padding-left: clamp(48px, 7vw, 100px);
	}

	.if-eco__carousel .if-carousel__controls {
		padding-left: calc(var(--if-eco-overlap) + clamp(48px, 7vw, 100px));
	}

	.if-eco__carousel {
		position: relative;
		z-index: 1;
		margin-left: calc(var(--if-eco-overlap) * -1);
	}
}

/* Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.if-page *,
	.if-page *::before,
	.if-page *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}

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

@media print {
	.if-modal,
	.if-carousel__controls {
		display: none;
	}

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

	.if-js .if-tabs__panel:not(.is-active),
	.if-js .if-activity:not(.is-active) {
		display: block;
	}

	.if-js .if-faq__panel {
		grid-template-rows: 1fr;
		visibility: visible;
	}
}

/* Hover polish ------------------------------------------------------------
   Elements that fade in on scroll get their transition from the reveal rule,
   so their own hover transitions are restored here once the entrance is over. */

.if-page .if-why__item,
.if-page .if-why__item:hover {
	padding-left: 0;
}

.if-why__index,
.if-why__icon,
.if-why__text {
	transition: transform 0.6s var(--if-ease), color 0.4s ease;
}

@media (hover: hover) {
	.if-why__item:hover .if-why__index,
	.if-why__item:hover .if-why__icon {
		transform: translateX(4px);
	}

	.if-why__item:hover .if-why__text {
		color: var(--if-accent);
		transform: translateX(10px);
	}
}

.if-js .if-card[data-if-reveal].is-done {
	transition: border-color 0.4s ease, box-shadow 0.5s var(--if-ease), transform 0.5s var(--if-ease);
}

.if-js .if-card--link.is-done:hover,
.if-js .if-card--link.is-done:focus-within {
	transform: translateY(-4px);
}

/* ==========================================================================
   Asset Management page (.if-page--am): black and white accents.
   ========================================================================== */

/* Key figures: note under the numbers. */
.if-figures__note {
	margin-top: clamp(20px, 2.4vw, 32px);
	color: var(--if-muted);
	font-size: 14px;
	line-height: 1.5;
}

/* How to apply: black block, white steps and line, heading and handbook on the left. */
.if-page--am .if-section--apply {
	--if-accent: #ffffff;
	background: #000;
}

.if-page--am .if-section--apply .if-overline {
	color: #fff;
}

.if-page--am .if-steps__track {
	background: rgba(255, 255, 255, 0.18);
}

.if-page--am .if-step.is-active .if-step__marker {
	border-color: #fff;
	background: #fff;
	color: #000;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.14);
}

.if-page--am .if-step__marker {
	background: #000;
}

.if-page--am .if-step__text a,
.if-page--am .if-steps__note-text a {
	color: #fff;
}

.if-page--am .if-steps__note {
	border-left-color: #fff;
}

.if-page--am .if-section--apply .if-link--button:hover {
	color: #000;
}

/* Button: white with black text. */
.if-page--am .if-section--apply .if-button {
	background: #fff;
	color: #000;
}

.if-page--am .if-section--apply .if-button:hover {
	background: #e9eceb;
	color: #000;
	box-shadow: 0 16px 36px -16px rgba(255, 255, 255, 0.45);
}

@media (min-width: 900px) {
	.if-page--am .if-section--apply .if-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}

	.if-page--am .if-section--apply .if-split__aside {
		position: sticky;
		top: var(--if-sticky-top);
	}
}

/* Contacts: black panel with grey rings. */
.if-page--am .if-contacts {
	background: #000;
}

.if-page--am .if-contacts__rings {
	background: repeating-radial-gradient(circle at 52% 50%, transparent 0 96px, rgba(255, 255, 255, 0.22) 96px 99px);
}

.if-page--am .if-contacts__shade {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.25) 100%);
}

/* Related business: black image panels. */
.if-page--am .if-related__media {
	background: #000;
}

.if-page--am .if-related__media--empty::before {
	border-color: rgba(255, 255, 255, 0.4);
	box-shadow:
		0 0 0 26px rgba(255, 255, 255, 0.05),
		0 0 0 27px rgba(255, 255, 255, 0.22),
		0 0 0 60px rgba(255, 255, 255, 0.03),
		0 0 0 61px rgba(255, 255, 255, 0.12);
}

/* Subscribe: black band, light text (form fields keep their own colours). */
.if-page--am .if-subscribe {
	padding-block: var(--if-space);
	background: #000;
	color: #fff;
}

.if-page--am .if-subscribe > *,
.if-page--am .if-subscribe section {
	background: #000 !important;
}

.if-page--am .if-subscribe :is(h1, h2, h3, h4, h5, p, span, label, a, li):not(button *) {
	color: #fff;
}