/* =========================================================
   Ainush — Section styles
   Grown one section at a time as each is designed.
   ========================================================= */

/* ---------- Hero: full-bleed, diagonal photo collage ---------- */
.hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(480px, calc(100vh - 80px), 860px);
	display: flex;
	align-items: center;
	background:
		radial-gradient(ellipse 60% 55% at 15% 25%, rgba(18, 169, 193, 0.07), transparent 65%),
		linear-gradient(165deg, #FCFEFE 0%, var(--color-bg) 60%, #F0F8F9 100%);
}

/* Two whisper-soft accent marks, nothing more. */
.hero__orb {
	position: absolute;
	top: -260px;
	left: -200px;
	width: 640px;
	height: 640px;
	border-radius: 50%;
	border: 1px solid rgba(18, 169, 193, 0.10);
	pointer-events: none;
}

.hero__arc {
	position: absolute;
	top: 42%;
	left: -170px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 1px dashed rgba(22, 63, 104, 0.14);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 40px clamp(24px, 5vw, 72px);
}

.hero__content {
	max-width: min(880px, calc(58vw - 110px));
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 18px;
}

.hero__eyebrow-line {
	width: 44px;
	height: 1px;
	background: var(--color-primary);
	opacity: 0.5;
}

.hero__heading {
	font-size: clamp(2.2rem, 4.4vw, 4.2rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin-bottom: 0.36em;
}

.hero__heading-accent {
	color: var(--color-primary);
}

/* Authored line break in the heading applies on desktop only; narrow screens
   wrap naturally instead. */
.hero__heading br {
	display: inline;
}

/* Widened from 430px so the paragraph runs the width of the hero column. */
.hero__text {
	color: var(--color-text-muted);
	font-size: 1.1rem;
	line-height: 1.7;
	max-width: min(680px, 100%);
	margin-bottom: 1.7em;
}

/* Hold the paragraph to exactly three lines on the wide layout, so the stats
   and scroll cue below it never get pushed down by a longer edit.

   Only from 1200px up, and that is deliberate: this copy needs about 500px to
   fit three lines, so clamping narrower columns would hide the end of the
   sentence behind an ellipsis. Below this the paragraph wraps freely — a
   fourth line costs nothing, losing the value proposition costs a reader. */
@media (min-width: 1200px) {
	.hero__text {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

.hero__actions {
	display: flex;
	align-items: center;
	gap: 34px;
	flex-wrap: wrap;
}

.hero__actions .btn {
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8rem;
	padding: 18px 34px;
	box-shadow: 0 8px 20px rgba(18, 169, 193, 0.22);
}

.hero__actions .btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(18, 169, 193, 0.28);
}

/* Secondary CTA: text only with a thin rule, like the reference. */
.hero__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-dark);
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(22, 63, 104, 0.28);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.hero__link:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

/* Brochure download: the icon nudges down rather than sideways, so the gesture
   reads as "save" instead of "go to". */
.hero__brochure-icon {
	flex: none;
	transition: transform 0.2s ease;
}

.hero__brochure:hover .hero__brochure-icon {
	transform: translateY(2px);
}

.btn__arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.hero__actions .btn:hover .btn__arrow,
.hero__link:hover .btn__arrow {
	transform: translateX(4px);
}

/* Stats */
.hero__stats {
	display: flex;
	align-items: stretch;
	gap: 34px;
	margin-top: 34px;
}

.hero__stat {
	display: flex;
	flex-direction: column;
	padding-right: 34px;
	white-space: nowrap;
}

.hero__stat+.hero__stat {
	border-left: 1px solid var(--color-border);
	padding-left: 34px;
}

.hero__stat-value {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.7rem;
	color: var(--color-dark);
	line-height: 1.1;
}

.hero__stat-label {
	font-size: 0.9rem;
	color: var(--color-text-muted);
	margin-top: 4px;
}

/* Scroll cue */
.hero__scroll {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
	font-family: var(--font-heading);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.hero__scroll-mouse {
	position: relative;
	width: 22px;
	height: 34px;
	border: 1.5px solid var(--color-dark);
	border-radius: 12px;
	flex-shrink: 0;
}

.hero__scroll-mouse::after {
	content: '';
	position: absolute;
	top: 7px;
	left: 50%;
	width: 2px;
	height: 6px;
	margin-left: -1px;
	border-radius: 1px;
	background: var(--color-dark);
	animation: ainush-scroll 1.8s ease-in-out infinite;
}

@keyframes ainush-scroll {

	0%,
	100% {
		transform: translateY(0);
		opacity: 1;
	}

	50% {
		transform: translateY(7px);
		opacity: 0.3;
	}
}

/* Right side: photo collage bleeding off the top, right and bottom edges.
   A slim white diagonal runs between the upper and lower photo. */
.hero__visual {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 44%;
	z-index: 1;
}

.hero__visual-piece {
	position: absolute;
	inset: 0;
}

.hero__visual-piece img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The panel is tall and narrow, so each piece is framed on the part of its
   photo that actually reads once clipped. */
.hero__visual-piece--main img {
	object-position: 62% center;
}

.hero__visual-piece--lower img {
	object-position: 55% center;
}

.hero__visual-piece--main {
	clip-path: polygon(5% 0, 100% 0, 100% 87.5%, 30% 52%);
}

.hero__visual-piece--lower {
	clip-path: polygon(28% 54.5%, 100% 90%, 100% 100%, 0 100%);
}

/* Handwritten note card over the lower photo. */
.hero__note {
	position: absolute;
	right: 4%;
	bottom: 12%;
	z-index: 3;
	max-width: 190px;
	padding: 22px 26px;
	border-radius: 18px 18px 4px 18px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 10px 26px rgba(22, 63, 104, 0.10);
	transform: rotate(-4deg);
	font-family: 'Caveat', cursive;
	font-size: 1.7rem;
	line-height: 1.15;
	color: var(--color-primary);
	text-align: center;
}

@media (max-width: 1200px) {
	.hero__content {
		max-width: min(620px, calc(58vw - 90px));
	}

	.hero__heading {
		font-size: clamp(2rem, 4.2vw, 3.4rem);
	}

	.hero__stats {
		gap: 22px;
		margin-top: 48px;
	}

	.hero__stat,
	.hero__stat+.hero__stat {
		padding-left: 22px;
		padding-right: 22px;
	}

	.hero__note {
		display: none;
	}
}

@media (max-width: 900px) {
	.hero {
		min-height: 0;
		display: block;
		background: linear-gradient(170deg, #FBFDFD 0%, var(--color-bg) 60%, #EEF7F8 100%);
	}

	.hero__orb,
	.hero__arc {
		display: none;
	}

	.hero__inner {
		padding: 64px clamp(20px, 6vw, 40px) 0;
	}

	.hero__content {
		max-width: 100%;
	}

	.hero__text {
		max-width: 520px;
	}

	.hero__scroll {
		display: none;
	}

	.hero__stats {
		margin-top: 44px;
		margin-bottom: 56px;
	}

	/* Photo becomes a full-width band under the text, same diagonal cut. */
	.hero__visual {
		position: relative;
		width: 100%;
		height: 340px;
	}

	.hero__visual-piece--main {
		clip-path: polygon(0 12%, 100% 0, 100% 62%, 0 78%);
	}

	.hero__visual-piece--lower {
		clip-path: polygon(0 84%, 100% 68%, 100% 100%, 0 100%);
	}

	.hero__note {
		display: none;
	}
}

@media (max-width: 560px) {
	.hero__inner {
		padding-top: 48px;
	}

	.hero__heading {
		font-size: 2rem;
	}

	.hero__heading br {
		display: none;
	}

	.hero__actions {
		gap: 22px;
	}

	.hero__actions .btn {
		width: 100%;
		justify-content: center;
	}

	.hero__stats {
		gap: 0;
		flex-wrap: wrap;
		row-gap: 24px;
	}

	.hero__stat {
		flex: 0 0 50%;
		padding-right: 16px;
	}

	.hero__stat+.hero__stat {
		padding-left: 16px;
	}

	.hero__visual {
		height: 260px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__scroll-mouse::after {
		animation: none;
	}

	.about-us__frame {
		animation: none;
		transform: none;
	}
}

/* ---------- About us (home) ----------
   Ported from OSTECH .about-three. Left composition (image sizes, offsets,
   mask, overlap, call card) is final — do not alter. Dark tone is the
   reference's #232429 black; accent is Ainush teal in place of their orange.
   Every selector is scoped to .about-us. */
.about-us {
	padding: 120px 0;
	background: var(--color-white);
	overflow-x: clip;
	--about-dark: #232429;
	--about-body: #686A6F;
	--about-border: #DBDBDB;
}

.about-us__inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/* Only widen to 1320 once there is enough outer margin to absorb the photo
   bleed; at 1400-1650 the margin is too small and the first photo gets cut. */
@media (min-width: 1650px) {
	.about-us__inner {
		max-width: 1320px;
	}
}

.about-us__left,
.about-us__right {
	width: 50%;
	padding: 0 15px;
}

.about-us__right {
	position: relative;
	z-index: 1;
}

/* --- Left: overlapping photos (OSTECH geometry — locked) --- */
/* The two photos bleed left of the column like OSTECH. The bleed is held in
   variables so it can shrink at narrower viewports — a fixed -162px runs off
   screen once the container's outer margin is smaller than that. */
.about-us__left {
	overflow: visible;
}

.about-us__thumb {
	position: relative;
	z-index: 1;
	overflow: visible;
	margin-right: 50px;
	--bleed-one: -162px;
	--bleed-two: -80px;
}

.about-us__thumb__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* First photo: upper-left. */
.about-us__thumb__item--one {
	position: relative;
	z-index: 2;
	max-width: 328px;
	max-height: 328px;
	width: 100%;
	height: 328px;
	overflow: hidden;
	margin-left: var(--bleed-one);
}

/* Second photo: lower, shifted right of the first by ~82px, overlapping it. */
.about-us__thumb__item--two {
	position: relative;
	z-index: 3;
	width: 672px;
	max-width: calc(100% + 80px);
	height: 470px;
	margin-top: -125px;
	margin-left: var(--bleed-two);
	clip-path: polygon(45% 15%,
			45% 30%,
			0 30%,
			0 100%,
			65.7% 100%,
			65.7% 70%,
			100% 70%,
			100% 0,
			45% 0);
}

/* Full outlined rectangle behind the lower photo. It is deliberately larger
   than the photo so its left bar, bottom bar and the portion revealed by the
   photo's cut-away bottom-right corner all stay visible. Static, always. */
.about-us__frame {
	position: absolute;
	left: calc(var(--bleed-two) - 62px);
	bottom: 45px;
	width: 560px;
	height: 280px;
	border: 32px solid var(--color-primary);
	z-index: 1;
	pointer-events: none;
	will-change: transform;
	animation: ainush-frame-swing 7s ease-in-out infinite;
}

@keyframes ainush-frame-swing {

	0%,
	100% {
		transform: translateX(-18px);
	}

	50% {
		transform: translateX(18px);
	}
}

/* Dark call card overlapping the top-right of the photos. */
.about-us__call {
	position: absolute;
	top: 60px;
	right: 0;
	z-index: 5;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	background: var(--about-dark);
	padding: 20px 40px;
}

.about-us__call__icon {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: var(--gradient-brand);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.about-us__call__icon svg {
	width: 42px;
	height: 42px;
}

.about-us__call__label {
	display: block;
	color: var(--color-white);
	font-size: 16px;
	line-height: 1.6;
	white-space: nowrap;
}

.about-us__call__number {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.4;
	color: var(--color-primary);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.about-us__call__number:hover {
	color: var(--color-secondary);
}

/* --- Right: copy, matched to the reference's scale and rhythm --- */
.about-us__top {
	margin-bottom: 24px;
}

.about-us__tagline {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 12px;
}

.about-us__tagline::before {
	content: '';
	width: 24px;
	height: 4px;
	border-radius: 2px;
	background: var(--color-primary);
	flex-shrink: 0;
}

.about-us__title {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--about-dark);
	max-width: 560px;
	margin: 0 0 16px;
}

.about-us__text {
	color: var(--about-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 187.5%;
	max-width: 560px;
	padding-bottom: 0;
	margin-bottom: 0;
	margin: 0;
}

.about-us__features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--about-border);
	margin-bottom: 26px;
}

.about-us__feature+.about-us__feature {
	border-left: 1px solid var(--about-border);
	padding-left: 30px;
}

.about-us__feature__top {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 10px;
}

.about-us__feature__icon {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: var(--about-dark);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.about-us__feature__icon .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
}

.about-us__feature__icon img {
	width: 26px;
	height: 26px;
}

.about-us__feature__title {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 700;
	line-height: normal;
	color: var(--about-dark);
	margin: 0;
}

.about-us__feature__text {
	color: var(--about-body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.8;
	margin: 0;
}

.about-us__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
}

.about-us__list {
	margin-bottom: 24px;
}

.about-us__list__item {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--about-dark);
	margin-bottom: 12px;
	white-space: nowrap;
}

.about-us__list__item:last-child {
	margin-bottom: 0;
}

.about-us__list__icon {
	width: 20px;
	height: 20px;
	color: var(--color-primary);
	flex-shrink: 0;
}

.about-us .btn-dark {
	background: var(--about-dark);
	color: var(--color-white);
	border-radius: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	padding: 17px 34px;
	box-shadow: none;
}

.about-us .btn-dark:hover {
	background: var(--color-primary);
	color: var(--color-white);
	transform: none;
}

.about-us__award {
	flex-shrink: 0;
	text-align: center;
	width: 193px;
}

.about-us__award__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 112px;
	background: var(--color-primary);
	color: var(--about-dark);
}

.about-us__award__badge svg {
	width: 72px;
	height: 72px;
}

.about-us__award__text {
	margin: 0;
	background: var(--about-dark);
	color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	padding: 14px 12px;
}

/* Tablet: keep the overlap, pull the bleeds in so nothing scrolls sideways. */
@media (max-width: 1499px) {
	.about-us__thumb {
		--bleed-one: -110px;
		--bleed-two: -40px;
	}

	.about-us__frame {
		width: 520px;
	}
}

@media (max-width: 1350px) {
	.about-us__thumb {
		--bleed-one: -50px;
		--bleed-two: 10px;
	}

	.about-us__frame {
		left: calc(var(--bleed-two) - 56px);
		width: 480px;
		height: 260px;
	}
}

@media (max-width: 1199px) {
	.about-us__thumb {
		margin-right: 20px;
		--bleed-one: -30px;
		--bleed-two: 10px;
	}

	.about-us__thumb__item--two {
		width: 100%;
		max-width: calc(100% + 30px);
		height: 420px;
	}

	.about-us__frame {
		left: calc(var(--bleed-two) - 46px);
		width: 400px;
		height: 230px;
		bottom: 40px;
		border-width: 24px;
	}

	.about-us__call {
		padding: 16px 22px;
		gap: 18px;
	}

	.about-us__call__icon {
		width: 72px;
		height: 72px;
	}

	.about-us__call__icon svg {
		width: 30px;
		height: 30px;
	}

	.about-us__call__number {
		font-size: 20px;
	}

	.about-us__call__label {
		font-size: 14px;
	}

	.about-us__title {
		font-size: 34px;
	}

	.about-us__list__item {
		white-space: normal;
	}
}

@media (max-width: 991px) {
	.about-us {
		padding: 90px 0;
	}

	.about-us__left,
	.about-us__right {
		width: 100%;
	}

	.about-us__left {
		margin-bottom: 70px;
	}

	.about-us__thumb {
		margin-right: 0;
		max-width: 560px;
		--bleed-one: 0px;
		--bleed-two: 0px;
	}

	.about-us__thumb__item--two {
		max-width: 100%;
	}

	.about-us__frame {
		left: -30px;
		width: 380px;
		height: 230px;
		bottom: 40px;
	}
}

@media (max-width: 720px) {
	.about-us {
		padding: 70px 0;
	}

	.about-us__title {
		font-size: 28px;
	}

	.about-us__features {
		grid-template-columns: 1fr;
	}

	.about-us__feature+.about-us__feature {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid var(--about-border);
		padding-top: 24px;
	}

	.about-us__bottom {
		flex-direction: column;
		align-items: stretch;
	}

	.about-us__award {
		width: 100%;
	}

	.about-us__call {
		position: static;
		margin-top: 24px;
		width: 100%;
	}

	.about-us__thumb__item--one {
		max-width: 100%;
		height: auto;
		aspect-ratio: 1;
	}

	.about-us__thumb__item--two {
		height: 360px;
		margin-top: -70px;
	}

	.about-us__frame {
		display: none;
	}
}

/* ---------- Services: dark patterned section + bend carousel ---------- */
.services {
	position: relative;
	padding: 76px 0 80px;
	background-color: #1B1C21;
	overflow: hidden;
}

/* Background lives on its own layer so it can be panned with transform —
   far cheaper than animating background-position. It is wider than the
   section so the swing never exposes an edge. */
.services__bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -6%;
	width: 112%;
	z-index: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	pointer-events: none;
	will-change: transform;
	animation: ainush-bg-swing 20s ease-in-out infinite;
}

@keyframes ainush-bg-swing {

	0%,
	100% {
		transform: translateX(-2.5%);
	}

	50% {
		transform: translateX(2.5%);
	}
}

.services::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(27, 28, 33, 0.72) 0%, rgba(27, 28, 33, 0.55) 45%, rgba(27, 28, 33, 0.85) 100%);
	pointer-events: none;
}

.services__head {
	position: relative;
	z-index: 2;
	max-width: 760px;
	margin: 0 auto 46px;
	padding: 0 24px;
	text-align: center;
}

.services__tagline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-heading);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 14px;
}

.services__tagline::before {
	content: '';
	width: 24px;
	height: 4px;
	border-radius: 2px;
	background: var(--color-primary);
}

.services__title {
	font-size: clamp(28px, 3.2vw, 44px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-white);
	margin: 0;
}

/* --- Ringline carousel --- */
.services__carousel {
	position: relative;
	z-index: 2;
	touch-action: pan-y;
	/* Soft fade at both edges so cards leave the strip gracefully. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.services__stage {
	position: relative;
	height: 480px;
	cursor: grab;
}

.services__carousel.is-dragging .services__stage {
	cursor: grabbing;
}

.svc-card {
	position: absolute;
	top: 0;
	left: 50%;
	width: 430px;
	margin-left: -215px;
	will-change: transform;
}

.svc-card__inner {
	display: block;
	position: relative;
	height: 480px;
	border-radius: 4px;
	overflow: hidden;
}

.svc-card__media {
	display: block;
	position: absolute;
	inset: 0;
}

.svc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.svc-card__inner:hover .svc-card__media img {
	transform: scale(1.05);
}

/* A subtle scrim keeps the white ring type legible over any photo. */
.svc-card__inner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(12, 13, 16, 0.46) 0%, rgba(12, 13, 16, 0.10) 38%, rgba(12, 13, 16, 0.12) 62%, rgba(12, 13, 16, 0.52) 100%);
	pointer-events: none;
}

/* Circular typography ringing the card. The SVG circle is wider than the
   card, so the type reads across the top and bottom and runs off the sides —
   the ring itself turns slowly. */
.svc-card__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 450px;
	height: 450px;
	margin: -225px 0 0 -225px;
	pointer-events: none;
	animation: ainush-ring-spin 26s linear infinite;
}

.svc-card__ring svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.svc-card__ring text {
	fill: var(--color-white);
	font-family: var(--font-heading);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@keyframes ainush-ring-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* Alternate cards spin the other way for a bit of life. */
.svc-card:nth-child(even) .svc-card__ring {
	animation-direction: reverse;
}

.services__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 30px;
}

.services__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba(255, 255, 255, 0.28);
	transition: background 0.2s ease, transform 0.2s ease;
}

.services__dot.is-active {
	background: var(--color-primary);
	transform: scale(1.35);
}

@media (max-width: 1023px) {
	.services {
		padding: 64px 0 68px;
	}

	.services__head {
		margin-bottom: 40px;
	}

	.services__stage {
		height: 420px;
	}

	.svc-card__inner {
		height: 420px;
	}

	.svc-card__ring {
		width: 400px;
		height: 400px;
		margin: -200px 0 0 -200px;
	}

	.svc-card__ring text {
		font-size: 24px;
	}
}

@media (max-width: 620px) {
	.services {
		padding: 52px 0 56px;
	}

	.services__stage {
		height: 380px;
	}

	.svc-card__inner {
		height: 380px;
	}

	.svc-card__ring {
		width: 350px;
		height: 350px;
		margin: -175px 0 0 -175px;
	}

	.svc-card__ring text {
		font-size: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.svc-card__ring {
		animation: none;
	}

	.services__bg {
		animation: none;
		transform: none;
	}
}

/* ---------- Why choose us (particle network background) ---------- */
.why {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* keeps the canvas inside this section */
	padding: 96px 0 104px;
	background: linear-gradient(165deg, #132B4E 0%, #0A1728 58%, #05080F 100%);
	color: var(--color-white);
}

/* Canvas sits behind everything in the section and never takes pointer input. */
.why__particles {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	opacity: 0.85;
}

.why__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px;
}

.why__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}

.why__tagline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 600;
	color: var(--color-white);
	margin-bottom: 12px;
}

.why__tagline::before {
	content: '//';
	color: var(--color-primary);
	font-weight: 700;
	letter-spacing: -0.06em;
}

.why__title {
	font-size: clamp(26px, 2.9vw, 40px);
	font-weight: 700;
	line-height: 1.22;
	color: var(--color-white);
	margin: 0;
}

.why__head-main {
	flex: 1 1 auto;
	min-width: 0;
}

.why__btn {
	white-space: nowrap;
}

.why__text {
	color: rgba(255, 255, 255, 0.72);
	font-size: 16px;
	line-height: 1.9;
	max-width: 760px;
	margin: 22px 0 0;
}

.why__body {
	display: grid;
	grid-template-columns: 0.78fr 1.22fr;
	gap: 46px;
	align-items: center;
	margin-top: 52px;
}

.why__media {
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

.why__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.why__points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 34px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.why__point {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

/* With an odd number of points the last one spans the row and centres. */
.why__point:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	max-width: 360px;
}

.why__point-icon {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-primary);
}

.why__point-icon .dashicons {
	font-size: 38px;
	width: 38px;
	height: 38px;
}

.why__point-icon img {
	width: 38px;
	height: 38px;
}

.why__point-title {
	font-family: var(--font-heading);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-white);
	margin: 0 0 6px;
}

.why__point-text {
	color: rgba(255, 255, 255, 0.62);
	font-size: 15px;
	line-height: 1.75;
	margin: 0;
}

@media (max-width: 1023px) {
	.why {
		padding: 76px 0 82px;
	}

	.why__body {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-top: 42px;
	}

	.why__points {
		gap: 30px 28px;
	}
}

@media (max-width: 620px) {
	.why {
		padding: 60px 0 66px;
	}

	.why__head {
		align-items: flex-start;
	}

	.why__points {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.why__btn {
		width: 100%;
		justify-content: center;
	}
}

/* ---------- Stats ---------- */
.stats {
	text-align: center;
}

.stats__item .stats__number {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 700;
	background: var(--gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.stats__item .stats__label {
	color: var(--color-text-muted);
	font-weight: 500;
}

/* ---------- Services grid ---------- */
.service-card__icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	background: var(--gradient-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

.service-card__icon img {
	width: 28px;
	height: 28px;
	filter: brightness(0) invert(1);
}

.service-card h3 {
	margin-bottom: 0.4em;
}

.service-card p {
	color: var(--color-text-muted);
	margin-bottom: 1.2em;
}

.service-card__link {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--color-primary);
}

/* ---------- Testimonials (Modern Speech-Bubble Reviews Carousel) ---------- */
.reviews-section {
	background-color: #FAFAFB;
	padding: 100px 0 110px;
	position: relative;
	overflow: hidden;
}

.reviews-header {
	text-align: center;
	margin-bottom: 56px;
}

.reviews-header__title {
	font-family: var(--font-heading);
	font-size: clamp(2rem, 3.8vw, 2.75rem);
	font-weight: 700;
	color: #111827;
	line-height: 1.18;
	letter-spacing: -0.03em;
	margin: 0 auto 16px;
	max-width: 24ch;
}

.reviews-trustpilot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body, system-ui, sans-serif);
	color: #111827;
	margin: 0 auto;
	flex-wrap: wrap;
}

.reviews-trustpilot__score {
	font-weight: 600;
	font-size: 1rem;
	color: #111827;
}

.reviews-trustpilot__icon {
	display: flex;
	align-items: center;
	line-height: 1;
}

.reviews-trustpilot__brand {
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: -0.02em;
	color: #111827;
}

.reviews-trustpilot__count {
	font-size: 0.92rem;
	color: #64748B;
	margin-left: 2px;
}

/* Two-column layout */
.reviews-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 48px;
	align-items: flex-start;
	position: relative;
}

.reviews-sidebar {
	display: flex;
	flex-direction: column;
	padding-top: 6px;
}

.reviews-sidebar__quote-icon {
	color: #94A3B8;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
}

.reviews-sidebar__title {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 2.2vw, 1.85rem);
	font-weight: 700;
	color: #111827;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0 0 36px;
}

.reviews-nav {
	display: flex;
	align-items: center;
	gap: 14px;
}

.reviews-nav__btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid #E2E8F0;
	background: #FFFFFF;
	color: #1E293B;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.reviews-nav__btn:hover:not(:disabled) {
	border-color: #CBD5E1;
	background: #F8FAFC;
	color: #0F172A;
	transform: translateY(-1px);
}

.reviews-nav__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	box-shadow: none;
}

.reviews-nav__track {
	width: 84px;
	height: 3px;
	background: #E2E8F0;
	border-radius: 99px;
	overflow: hidden;
	position: relative;
}

.reviews-nav__indicator {
	height: 100%;
	width: 35%;
	background: #1E293B;
	border-radius: 99px;
	transition: transform 0.15s ease-out;
	will-change: transform;
}

/* Right carousel */
.reviews-carousel-wrapper {
	min-width: 0;
	position: relative;
	overflow: hidden;
}

.reviews-carousel-track {
	display: flex;
	gap: 26px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 8px 6px 32px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	outline: none;
}

.reviews-carousel-track::-webkit-scrollbar {
	display: none;
}

.review-bubble-card {
	flex: 0 0 350px;
	max-width: 360px;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

.review-bubble {
	background: #FFFFFF;
	border-radius: 18px;
	padding: 30px 28px 24px;
	box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.02);
	border: 1px solid rgba(226, 232, 240, 0.85);
	position: relative;
	min-height: 215px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.review-bubble:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.03);
}

.review-bubble__tail {
	position: absolute;
	bottom: -9px;
	left: 28px;
	width: 18px;
	height: 10px;
	background: #FFFFFF;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.04));
}

.review-bubble__text {
	font-size: 0.93rem;
	line-height: 1.62;
	color: #334155;
	margin: 0 0 18px;
	font-weight: 400;
}

.review-bubble__stars {
	display: flex;
	gap: 3px;
	font-size: 15px;
	line-height: 1;
	color: #00B67A;
}

.review-star--filled {
	color: #00B67A;
}

.review-star--empty {
	color: #CBD5E1;
}

.review-author {
	margin-top: 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding-left: 10px;
}

.review-author__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: #E2E8F0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.review-author__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.review-author__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #0066FF;
	color: #FFFFFF;
	font-weight: 700;
	font-size: 1rem;
}

.review-author__details {
	display: flex;
	flex-direction: column;
}

.review-author__name {
	font-weight: 700;
	font-size: 0.95rem;
	color: #111827;
	line-height: 1.25;
}

.review-author__meta {
	font-size: 0.78rem;
	color: #64748B;
	margin-top: 2px;
	line-height: 1.2;
}

@media (max-width: 991px) {
	.reviews-layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.reviews-sidebar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
	}

	.reviews-sidebar__quote-icon {
		width: 100%;
		margin-bottom: 12px;
	}

	.reviews-sidebar__title {
		margin-bottom: 0;
	}
}

@media (max-width: 640px) {
	.reviews-section {
		padding: 70px 0 80px;
	}

	.review-bubble-card {
		flex: 0 0 85vw;
		max-width: 320px;
	}

	.reviews-sidebar {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
}

/* ---------- CTA banner ---------- */
.cta-banner {
	background: var(--gradient-brand);
	border-radius: var(--radius-lg);
	padding: 64px;
	text-align: center;
	color: var(--color-white);
}

.cta-banner h2 {
	color: var(--color-white);
}

.cta-banner p {
	color: rgba(255, 255, 255, 0.92);
	max-width: 560px;
	margin: 0 auto 28px;
}

/* ---------- Blog preview / archive cards ---------- */
.post-card__media {
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: 20px;
	aspect-ratio: 16/10;
}

.post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__meta {
	font-size: 0.82rem;
	color: var(--color-primary);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.6em;
}

.post-card h3 a:hover {
	color: var(--color-primary);
}

/* ---------- Values / process steps (fixed 4-up groups) ---------- */
.value-card {
	text-align: center;
}

.value-card__icon img {
	width: 48px;
	height: 48px;
	margin: 0 auto 18px;
}

.process-step {
	text-align: center;
	position: relative;
}

.process-step__number {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--color-white);
	background: var(--gradient-brand);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
}

/* ---------- Team ---------- */
.team-card {
	text-align: center;
}

.team-card__photo {
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-bottom: 18px;
	aspect-ratio: 1/1;
}

.team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team-card__role {
	color: var(--color-primary);
	font-weight: 600;
	font-size: 0.9rem;
}

/* ---------- Single service ---------- */
.single-service__header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

@media (max-width: 860px) {
	.single-service__header {
		grid-template-columns: 1fr;
	}
}

/* ---------- Contact page ---------- */
.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 56px;
}

.contact-info__item {
	margin-bottom: 24px;
}

.contact-info__item strong {
	display: block;
	color: var(--color-dark);
	font-family: var(--font-heading);
	margin-bottom: 4px;
}

.contact-map {
	border-radius: var(--radius-md);
	overflow: hidden;
	margin-top: 24px;
	border: 1px solid var(--color-border);
}

.contact-map iframe {
	width: 100%;
	height: 300px;
	border: 0;
	display: block;
}

@media (max-width: 860px) {
	.contact-layout {
		grid-template-columns: 1fr;
	}
}

/* ---------- Our blog (particle network background) ----------
   Qualified with the element on purpose: WordPress puts a bare `blog` class on
   <body> for the posts index, so an unqualified `.blog` here also styled the
   whole document there — 92px of body padding, a white ground and, worst of
   all, overflow:hidden on <body>. */
section.blog {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* keeps the canvas inside this section */
	padding: 92px 0 96px;
	background: var(--color-white);
}

/* Canvas sits behind everything in the section and never takes pointer input. */
.blog__particles {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
	opacity: 0.7;
}

.blog__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}

.blog__title {
	font-size: 40px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--color-dark);
	margin-bottom: 0;
}

.blog__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	/* cards keep their natural height, as in the design */
	gap: 34px;
	margin-top: 48px;
	text-align: left;
}

.blog__card {
	background: var(--color-white);
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: 0 14px 38px rgba(22, 63, 104, 0.10);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 48px rgba(22, 63, 104, 0.16);
}

.blog__card-media {
	display: block;
	aspect-ratio: 16 / 11;
	overflow: hidden;
}

.blog__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.blog__card:hover .blog__card-media img {
	transform: scale(1.05);
}

.blog__card-body {
	padding: 26px 28px 30px;
}

.blog__card-meta {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.95rem;
	color: var(--color-text-muted);
	margin-bottom: 12px;
}

.blog__card-icon {
	width: 18px;
	height: 18px;
	flex: none;
}

.blog__card-title {
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	font-weight: 700;
	line-height: 1.32;
	color: var(--color-dark);
	margin: 0;
}

.blog__card-title a {
	color: inherit;
	transition: color 0.2s ease;
}

.blog__card-title a:hover {
	color: var(--color-primary);
}

.blog__text {
	color: var(--color-text-muted);
	font-size: 1.05rem;
	max-width: 720px;
	margin: 46px auto 0;
}

.blog__action {
	margin-top: 18px;
}

.blog__link {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--color-dark);
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.blog__link:hover {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
}

@media (max-width: 900px) {
	section.blog {
		padding: 72px 0 78px;
	}

	.blog__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 26px;
	}
}

@media (max-width: 640px) {
	section.blog {
		padding: 56px 0 62px;
	}

	.blog__title {
		font-size: 30px;
	}

	.blog__grid {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-top: 34px;
	}

	.blog__card-body {
		padding: 22px 22px 26px;
	}

	.blog__text {
		margin-top: 34px;
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.blog__card,
	.blog__card-media img {
		transition: none;
	}

	.blog__card:hover {
		transform: none;
	}

	.blog__card:hover .blog__card-media img {
		transform: none;
	}
}

/* ---------- FAQ (accordion + illustration, particle network background) ----------
   Reproduces the reference composition. Every number below comes from that
   layout, expressed as a ratio of the 1520 row so it holds at desktop and
   scales cleanly under it:

     .faq__inner    1520    × 545.2   row
       .faq__main    887.13 × 545.2   58.363% of the row
         .faq__content 700  × 537.2   inset 170px (11.184%) from the row's left
       .faq__media   630.66 × 385.93  41.491% of the row, vertically centred
         img         601.66 × 385.93  95.4% of the media box
*/
.faq {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* keeps the canvas inside this section */
	padding: 100px 0;
	background: var(--color-white);
}

/* Network spans the whole section — behind the accordion and the illustration
   alike — and never takes pointer input. Its weight is carried by the alphas
   on the canvas element itself rather than an opacity here, so the nodes stay
   readable while the links stay hairline. */
.faq__network {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

/* min() gives the row exactly 1520px once the viewport can hold it plus
   gutters, and 24px gutters below that — no breakpoint needed. */
.faq__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	width: min(1520px, 100% - 48px);
	min-height: 545.2px;
	margin: 0 auto;
}

.faq__main {
	flex: 0 0 58.363%;
	/* 887.13 / 1520 */
	min-width: 0;
	min-height: 545.2px;
	/* Percentage padding resolves against the row, so this is 170px at
	   desktop and stays proportional as the row narrows. */
	padding-left: 11.184%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* The title and list share one 700-wide box, the title sitting at its top. */
.faq__content {
	width: 100%;
	max-width: 700px;
	min-height: 537.2px;
}

.faq__title {
	font-size: 40px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	color: #000000;
	margin: 0 0 40px;
	white-space: nowrap;
	/* one line at desktop, as in the reference */
}

.faq__title-accent {
	color: #FF6B2C;
}

/* Card height falls out of the 537.2 box: 537.2 - 50 (title) - 40 (margin)
   = 447.2 for the list. In the reference that holds six single-line rows, one
   two-line row and six 18px gaps, which puts a row at ~44.8px — a 25.5px line
   box with 10px above and below. Hence the compact pill. */
.faq__list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.faq__item {
	background: #F4F4FD;
	border-radius: 10px;
	overflow: hidden;
	transition: background 0.25s ease;
}

.faq__item.is-open {
	background: #ECECFA;
}

.faq__question {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 10px 32px;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--font-heading);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-dark);
	transition: color 0.2s ease;
}

.faq__trigger:hover {
	color: var(--color-primary);
}

.faq__trigger:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -3px;
}

/* Plus sign built from the box's own pseudo-elements; the vertical bar drops
   away when the panel opens, leaving a minus. */
.faq__icon {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
}

.faq__icon::before,
.faq__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	border-radius: 1px;
	transform: translate(-50%, -50%);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.faq__icon::before {
	width: 16px;
	height: 2px;
}

.faq__icon::after {
	width: 2px;
	height: 16px;
}

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

.faq__item.is-open .faq__trigger {
	color: var(--color-primary);
}

.faq__answer {
	height: 0;
	overflow: hidden;
	transition: height 0.3s ease;
}

/* faq-accordion.js animates to the measured scrollHeight, then clears the
   inline height on transitionend so an open panel can reflow freely. Without
   a resting state for that moment the rule above would reclaim it and the
   panel would snap shut the instant it finished opening. The inline height
   outranks this during both transitions, so only the settled state uses it. */
.faq__item.is-open .faq__answer {
	height: auto;
}

.faq__answer-body {
	padding: 0 32px 22px;
}

.faq__answer-body p {
	margin: 0;
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-text-muted);
}

.faq__media {
	flex: 0 0 41.491%;
	/* 630.66 / 1520 */
	aspect-ratio: 630.66 / 385.93;
	max-height: 385.93px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.faq__media img {
	width: 95.4%;
	/* 601.66 / 630.66 */
	height: 100%;
	object-fit: contain;
}

@media (max-width: 991px) {
	.faq {
		padding: 76px 0;
	}

	.faq__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 44px;
		min-height: 0;
		max-width: var(--container-width);
	}

	.faq__main {
		flex: 1 1 auto;
		min-height: 0;
		padding-left: 0;
	}

	.faq__content {
		max-width: 100%;
		min-height: 0;
	}

	.faq__title {
		white-space: normal;
	}

	.faq__media {
		flex: 1 1 auto;
		max-width: 630.66px;
		margin: 0 auto;
	}
}

@media (max-width: 640px) {
	.faq {
		padding: 58px 0;
	}

	.faq__title {
		font-size: 30px;
		margin-bottom: 26px;
	}

	.faq__list {
		gap: 14px;
	}

	.faq__trigger {
		padding: 10px 20px;
		font-size: 16px;
		gap: 14px;
	}

	.faq__answer-body {
		padding: 0 20px 18px;
	}
}

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

	.faq__icon::before,
	.faq__icon::after {
		transition: none;
	}
}

/* ---------- About page: story composition (About template only) ----------
   Everything below is scoped to body.page-template-template-about, the class
   WordPress derives from page-templates/template-about.php, so the home page
   (.page-template-template-home) is untouched. */
.page-template-template-about .about-showcase {
	--about-radius: 24px;
	--about-gap: 32px;
}

/* Row 1 — large image left, small image over two cards right. */
.page-template-template-about .about-showcase__media {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: var(--about-gap);
	align-items: stretch;
}

.page-template-template-about .about-showcase__media--single {
	grid-template-columns: 1fr;
}

.page-template-template-about .about-showcase__large {
	margin: 0;
	border-radius: var(--about-radius);
	overflow: hidden;
	aspect-ratio: 6 / 5;
	background: var(--color-border);
}

.page-template-template-about .about-showcase__large img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The side column stretches to the large image's height; the two rows then
   split it the way the reference does (image slightly shorter than cards). */
.page-template-template-about .about-showcase__side {
	display: grid;
	grid-template-rows: minmax(0, 0.48fr) minmax(0, 0.52fr);
	gap: var(--about-gap);
	min-height: 0;
}

.page-template-template-about .about-showcase__media--single .about-showcase__side {
	grid-template-rows: auto auto;
}

.page-template-template-about .about-showcase__small {
	margin: 0;
	border-radius: var(--about-radius);
	overflow: hidden;
	min-height: 0;
	background: var(--color-border);
}

.page-template-template-about .about-showcase__small img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-template-template-about .about-showcase__media--single .about-showcase__small {
	aspect-ratio: 16 / 9;
}

/* Statistic cards. */
.page-template-template-about .about-showcase__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--about-gap);
	min-height: 0;
}

.page-template-template-about .about-stat {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	padding: 26px;
	border-radius: var(--about-radius);
	min-height: 0;
}

.page-template-template-about .about-stat--gradient {
	background: var(--gradient-brand);
	color: var(--color-white);
}

.page-template-template-about .about-stat--plain {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	color: var(--color-dark);
}

.page-template-template-about .about-stat__text {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.45;
}

.page-template-template-about .about-stat--plain .about-stat__text {
	color: var(--color-text-muted);
}

.page-template-template-about .about-stat__value {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(2.4rem, 3.4vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.page-template-template-about .about-stat__label {
	display: block;
	margin-top: 8px;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1rem;
}

/* Row 2 — heading left, copy right. */
.page-template-template-about .about-showcase__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	margin-top: clamp(3rem, 5vw, 5rem);
}

.page-template-template-about h2 {
	max-width: 26ch;
	font-family: var(--font-heading);
	font-size: clamp(1.85rem, 3.2vw, 2.45rem);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: #111827;
}

.page-template-template-about .about-showcase__content__heading h2 {
	margin-bottom: 0;
	max-width: 26ch;
	font-family: var(--font-heading);
	font-size: clamp(1.85rem, 3.2vw, 2.45rem);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: #111827;
}

.page-template-template-about .about-showcase__content__body {
	color: #000000;
	line-height: 1.8;
}

.page-template-template-about .about-showcase__content__body p:last-child {
	margin-bottom: 0;
}

/* Entrance animation: large image slides in from the left, small image drops
   in from the top, staggered. Triggered by .is-visible on the section. */
.page-template-template-about .about-image-large,
.page-template-template-about .about-image-small {
	opacity: 0;
	will-change: transform, opacity;
	transition:
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.8s ease;
}

.page-template-template-about .about-image-large {
	transform: translateX(-100px);
	transition-delay: 0.1s;
}

.page-template-template-about .about-image-small {
	transform: translateY(-80px);
	transition-delay: 0.25s;
}

.page-template-template-about .about-showcase.is-visible .about-image-large,
.page-template-template-about .about-showcase.is-visible .about-image-small {
	opacity: 1;
	transform: none;
}

/* Tablet: stack the composition, keep the two cards side by side. */
@media (max-width: 980px) {
	.page-template-template-about .about-showcase__media {
		grid-template-columns: 1fr;
	}

	.page-template-template-about .about-showcase__large {
		aspect-ratio: 16 / 10;
	}

	.page-template-template-about .about-showcase__side {
		grid-template-rows: auto auto;
	}

	.page-template-template-about .about-showcase__small {
		aspect-ratio: 16 / 9;
	}

	.page-template-template-about .about-showcase__content {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 600px) {
	.page-template-template-about .about-showcase {
		--about-gap: 20px;
	}

	.page-template-template-about .about-showcase__stats {
		grid-template-columns: 1fr;
	}

	.page-template-template-about .about-stat {
		gap: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.page-template-template-about .about-image-large,
	.page-template-template-about .about-image-small {
		transition: none;
		transform: none;
		opacity: 1;
	}
}

/* Without scripting the reveal never fires, so show the images as-is. */
@media (scripting: none) {

	.page-template-template-about .about-image-large,
	.page-template-template-about .about-image-small {
		transition: none;
		transform: none;
		opacity: 1;
	}
}

/* ---------- About page: core values (About template only) ---------- */
.page-template-template-about .about-values__head {
	max-width: 640px;
	margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
	text-align: center;
}

.page-template-template-about .about-values__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 20px 8px 10px;
	border-radius: 999px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-dark);
}

.page-template-template-about .about-values__pill__dot {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--gradient-brand);
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
}

.page-template-template-about .about-values__pill__dot svg {
	width: 13px;
	height: 13px;
}

.page-template-template-about .about-values__title {
	margin: 20px auto 0;
	max-width: 26ch;
	font-family: var(--font-heading);
	font-size: clamp(1.85rem, 3.2vw, 2.45rem);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: #111827;
}

.page-template-template-about .about-values__subtitle {
	margin: 16px 0 0;
	color: #1a1a1a;
	font-size: 1.05rem;
}

.page-template-template-about .about-values__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.page-template-template-about .about-value {
	display: flex;
	flex-direction: column;
	padding: 32px;
	min-height: 300px;
	border-radius: var(--radius-lg);
	background: var(--color-white);
	border: 1px solid #E2E2E2;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-template-template-about .about-value:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

/* A fixed gap under the icon keeps every title on the same line across a row;
   the grid still stretches the cards to a common height. */
.page-template-template-about .about-value__icon img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.page-template-template-about .about-value__title {
	margin: 76px 0 12px;
	font-size: clamp(1.25rem, 1.7vw, 1.5rem);
	color: #000;
}

/* Each description holds exactly two lines, so every card keeps the same
   rhythm whether the copy runs short or long. */
.page-template-template-about .about-value__text {
	margin: 0;
	color: #1a1a1a;
	line-height: 1.7;
	min-height: 3.4em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

@media (max-width: 980px) {
	.page-template-template-about .about-values__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.page-template-template-about .about-value {
		min-height: 0;
		padding: 26px;
	}

	.page-template-template-about .about-value__title {
		margin-top: 28px;
	}
}

@media (max-width: 600px) {
	.page-template-template-about .about-values__grid {
		grid-template-columns: 1fr;
	}
}

/* One column is narrow enough that two lines could clip real copy, so let it
   flow there. */
@media (max-width: 600px) {
	.page-template-template-about .about-value__text {
		-webkit-line-clamp: none;
		line-clamp: none;
		display: block;
		overflow: visible;
		min-height: 0;
	}
}

/* ---------- About page: live network backdrop ----------
   A viewport-sized canvas pinned behind the whole page. The theme's particle
   engine moves each node's x/y every frame and redraws the links between them —
   nothing here animates opacity. Sections drop their own fills so the mesh shows
   through, and cards stay solid so copy keeps its contrast. */
.page-template-template-about #main-content {
	position: relative;
	background-color: var(--color-bg);
}

.page-template-template-about .about-network {
	position: fixed;
	inset: 0;
	z-index: 0;
	/* Never intercepts clicks: it spans the viewport over every control. */
	pointer-events: none;
}

/* Everything else on the page sits above the layer. The footer needs it too —
   it is unpositioned, so a z-index:0 fixed layer would otherwise paint over it. */
.page-template-template-about #main-content>*:not(.about-network),
.page-template-template-about .site-footer {
	position: relative;
	z-index: 1;
}

.page-template-template-about #main-content>.section {
	background: transparent;
}

.page-template-template-about #main-content>.section--alt {
	background: rgba(255, 255, 255, 0.72);
}

/* ---------- About page: sticky mission / vision / values ---------- */
.page-template-template-about .mission-scroll__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 72px;
	/* Items stretch so the left column is as tall as the panels; that stretched
	   box is what the sticky visual sticks inside. */
	align-items: stretch;
}

/* Left column: parks itself below the header and holds its place while the
   panels on the right scroll past. */
.page-template-template-about .mission-visual-col {
	position: relative;
}

.page-template-template-about .mission-visual {
	position: sticky;
	top: 120px;
	height: 520px;
	display: flex;
	align-items: center;
}

.page-template-template-about .mission-visual__stack {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--shadow-md);
	background: var(--color-border);
}

/* All three images are stacked and cross-faded, so a swap never waits on a
   network request or flashes an empty frame. */
.page-template-template-about .mission-visual__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}

.page-template-template-about .mission-visual__img.is-active {
	opacity: 1;
	transform: translateY(0);
}

/* Right column: one panel per topic, each tall enough to read on its own. */
.page-template-template-about .content-panel {
	min-height: 74vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 0;
	opacity: 0.5;
	transition: opacity 0.5s ease;
}

.page-template-template-about .content-panel.is-active {
	opacity: 1;
}

.page-template-template-about .content-panel__media {
	display: none;
}

.page-template-template-about .content-panel__title {
	margin: 0 0 18px;
	max-width: 26ch;
	font-family: var(--font-heading);
	font-size: clamp(1.85rem, 3.2vw, 2.45rem);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: #111827;
}

.page-template-template-about .content-panel__text {
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.8;
}

.page-template-template-about .content-panel__text p:last-child {
	margin-bottom: 0;
}

.page-template-template-about .content-panel__list {
	margin: 26px 0 0;
	display: grid;
	gap: 14px;
}

.page-template-template-about .content-panel__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--color-text);
	line-height: 1.6;
}

.page-template-template-about .content-panel__list svg {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 3px;
	color: var(--color-primary);
}

/* A short gradient rule under the active heading carries the brand accent
   without washing the section in it. */
.page-template-template-about .content-panel__title::after {
	content: '';
	display: block;
	width: 0;
	height: 3px;
	margin-top: 14px;
	border-radius: 999px;
	background: var(--gradient-brand);
	transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-template-template-about .content-panel.is-active .content-panel__title::after {
	width: 72px;
}

/* Tablet: keep the sticky behaviour, tighten the gap. */
@media (max-width: 1100px) {
	.page-template-template-about .mission-scroll__inner {
		gap: 40px;
	}

	.page-template-template-about .mission-visual {
		height: 420px;
		top: 100px;
	}
}

/* Mobile: no sticky column — each panel carries its own image above its copy,
   and every panel reads at full strength. */
@media (max-width: 860px) {
	.page-template-template-about .mission-scroll__inner {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.page-template-template-about .mission-visual {
		display: none;
	}

	.page-template-template-about .content-panel {
		min-height: 0;
		opacity: 1;
		padding: 32px 0;
	}

	.page-template-template-about .content-panel__media {
		display: block;
		margin-bottom: 26px;
		border-radius: 20px;
		overflow: hidden;
		aspect-ratio: 16 / 10;
	}

	.page-template-template-about .content-panel__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.page-template-template-about .content-panel__title::after {
		width: 72px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.page-template-template-about .mission-visual__img,
	.page-template-template-about .content-panel,
	.page-template-template-about .content-panel__title::after {
		transition: none;
	}

	.page-template-template-about .mission-visual__img {
		transform: none;
	}
}

/* main.css sets `overflow-x: hidden` on html and body, which makes them scroll
   containers and stops position: sticky from pinning to the viewport. `clip`
   hides the same overflow without creating one. Kept to the About page — the
   home page's bleeding photos still rely on the original rule. Split into two
   rules so browsers without :has() still get the body half. */
body.page-template-template-about {
	overflow-x: clip;
}

html:has(> body.page-template-template-about) {
	overflow-x: clip;
}

/* =========================================================
   About page — Team
   ---------------------------------------------------------
   A white panel carrying a pill, a heading, prev/next arrows
   and a horizontal row of member cards. The first card is the
   highlighted one on the brand gradient; the rest are
   portraits captioned over the foot of the photo.

   The row is a native overflow-x track with scroll snapping,
   so it swipes on touch and keyboard-scrolls without any
   carousel library — the arrows just call scrollBy.
   ========================================================= */
.team {
	padding: clamp(54px, 7vw, 100px) 0 clamp(64px, 8vw, 120px);
	background: var(--color-white, #ffffff);
	position: relative;
}

/* ---------- Head: pill + heading, navigation arrows on right ---------- */
.team__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: clamp(28px, 3.5vw, 46px);
}

.team__intro {
	min-width: 0;
}

.team__pill {
	display: inline-block;
	padding: 6px 18px;
	border: 1px solid #d1d5db;
	border-radius: 999px;
	font-family: var(--font-heading);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #4b5563;
	margin-bottom: 18px;
	background: transparent;
}

.team__title {
	margin: 0;
	max-width: 26ch;
	font-family: var(--font-heading);
	font-size: clamp(1.85rem, 3.2vw, 2.45rem);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: #111827;
}

.team__nav {
	display: flex;
	gap: 12px;
	flex: none;
	align-items: center;
	margin-bottom: 6px;
}

.team__nav-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #0066ff;
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 102, 255, 0.28);
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	cursor: pointer;
}

.team__nav-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	background: #0052cc;
	box-shadow: 0 8px 20px rgba(0, 102, 255, 0.38);
}

.team__nav-btn:active:not(:disabled) {
	transform: translateY(0);
}

.team__nav-btn:disabled {
	opacity: 0.35;
	box-shadow: none;
	cursor: default;
	transform: none;
}

/* ---------- Track ---------- */
.team__track {
	--team-gap: clamp(16px, 1.8vw, 24px);
	display: flex;
	gap: var(--team-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 12px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

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

.team__track:focus-visible {
	outline: 2px solid #0066ff;
	outline-offset: 4px;
}

/* ---------- Team Member 3D Flip Cards ---------- */
.team__member {
	position: relative;
	flex: 0 0 min(82vw, 280px);
	scroll-snap-align: start;
	border-radius: 22px;
	aspect-ratio: 1 / 1.32;
	perspective: 1200px;
	background: transparent;
	cursor: pointer;
}

.team__card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 22px;
	transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
	transform-style: preserve-3d;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.team__member:hover .team__card-inner,
.team__member:focus-within .team__card-inner,
.team__member.is-flipped .team__card-inner {
	transform: rotateY(180deg);
	box-shadow: 0 16px 40px rgba(0, 102, 255, 0.22);
}

.team__card-front,
.team__card-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 22px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Front Face: Portrait Photo */
.team__card-front {
	background: #f1f5f9;
	transform: rotateY(0deg);
}

.team__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 22px;
}

.team__photo--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #94a3b8;
	background: #f1f5f9;
	height: 100%;
}

.team__photo--empty svg {
	width: 44px;
	height: 44px;
	opacity: 0.5;
}

.team__photo-hint {
	font-family: var(--font-heading);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Front Caption at foot of photo */
.team__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 44px 16px 20px;
	text-align: center;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
	border-bottom-left-radius: 22px;
	border-bottom-right-radius: 22px;
	pointer-events: none;
}

.team__caption .team__name {
	color: #ffffff;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 3px;
}

.team__caption .team__role {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.82rem;
	line-height: 1.4;
	margin: 0;
}

/* Back Face: Vibrant Blue Info Card */
.team__card-back {
	background: #0066ff;
	color: #ffffff;
	padding: 30px 24px 24px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	transform: rotateY(180deg);
}

.team__card-back .team__feature-top {
	margin-bottom: 6px;
}

.team__card-back .team__name {
	color: #ffffff;
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 3px;
}

.team__card-back .team__role {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.85rem;
	margin: 0 0 16px;
	font-weight: 400;
}

.team__bio {
	margin: 0 0 auto;
	font-size: 0.88rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.team__socials {
	display: flex;
	gap: 14px;
	margin-top: auto;
	padding-top: 18px;
	align-items: center;
}

.team__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.team__social:hover {
	opacity: 1;
	transform: translateY(-2px);
	color: #ffffff;
}

.team__social svg {
	width: 17px;
	height: 17px;
}

.team__social--empty {
	opacity: 0.4;
}

.team__name {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.team__role {
	margin: 4px 0 0;
	font-size: 0.82rem;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.team__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.team__nav {
		align-self: flex-end;
	}
}

@media (min-width: 640px) {
	.team__member {
		flex: 0 0 270px;
	}
}

@media (min-width: 1024px) {
	.team__member {
		flex: 0 0 calc((100% - 3 * var(--team-gap)) / 4);
		min-width: 250px;
	}
}