/*
 * Homepage V4 — staging redesign (Figma: Anatech Redesign → Home → Hero 76).
 * Every rule is scoped to body.home-v4 so no other page is affected.
 */

body.home-v4 {
	--v4-blue: #1145bb;
	--v4-blue-hover: #0d379a;
	--v4-orange: #ed4b00;
	--v4-white: #ffffff;
	--v4-pad-x: 60px;
	--v4-header-h: 88px;
	--v4-font: "Parkinsans", sans-serif;
	background-color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * Header — transparent, floating over the hero
 * ------------------------------------------------------------------ */

body.home-v4 header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
	padding: 0;
	background-color: rgba(166, 166, 166, 0.05);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: none;
	transition: background-color 0.3s ease, box-shadow 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}

body.admin-bar.home-v4 header {
	top: 32px;
}

/* Darker glass once the page has scrolled, so the white nav stays readable over light sections */
body.home-v4.v4-scrolled header {
	background-color: rgba(14, 14, 16, 0.78);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.home-v4 header > .container {
	max-width: none;
	width: 100%;
	min-height: var(--v4-header-h);
	margin: 0;
	padding: 20px var(--v4-pad-x);
	flex-wrap: nowrap;
	gap: 24px;
}

/* Logo: white version from the design; the original <img> alt text stays for screen readers. */
body.home-v4 header .logo a {
	position: relative;
	display: block;
	width: 174px;
	height: 45px;
	background: url("anatech-logo-white.svg") no-repeat left center / contain;
}

body.home-v4 header .logo img {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Main navigation (desktop only — below 992px WebSlideMenu turns it into its own off-canvas panel) */
@media (min-width: 992px) {
	body.home-v4 header .navigation-main {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}

	body.home-v4 header .wsmenu > .wsmenu-list {
		display: flex;
		align-items: center;
		gap: 40px;
		margin: 0 0 0 36px;
		padding: 0;
	}

	body.home-v4 header .wsmenu > .wsmenu-list > li {
		margin: 0;
		padding: 0;
	}

	body.home-v4 header .wsmenu > .wsmenu-list > li > a {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 0;
		font-family: var(--v4-font);
		font-size: 14px;
		font-weight: 400;
		line-height: 24px;
		color: var(--v4-white);
		background: none;
		transition: opacity 0.2s ease;
	}

	body.home-v4 header .wsmenu > .wsmenu-list > li > a:hover,
	body.home-v4 header .wsmenu > .wsmenu-list > li > a:focus-visible {
		color: var(--v4-white);
		opacity: 0.75;
	}

	/* "Services" dropdown marker: white disc with a blue chevron */
	body.home-v4 header .wsmenu > .wsmenu-list > li > a .wsarrow {
		position: relative;
		display: inline-block;
		flex: 0 0 14px;
		width: 14px;
		height: 14px;
		margin: 0;
		border: 0;
		border-radius: 50%;
		background: var(--v4-white);
	}

	body.home-v4 header .wsmenu > .wsmenu-list > li > a .wsarrow::before {
		content: none;
	}

	body.home-v4 header .wsmenu > .wsmenu-list > li > a .wsarrow::after {
		content: "";
		position: absolute;
		top: 3px;
		left: 4.5px;
		width: 5px;
		height: 5px;
		margin: 0;
		border: 0;
		border-right: 1.5px solid var(--v4-blue);
		border-bottom: 1.5px solid var(--v4-blue);
		background: none;
		transform: rotate(45deg);
	}

	/* Higher-specificity resets for WebSlideMenu's own link padding and arrow offsets */
	body.home-v4 header .wsmenu > .wsmenu-list > li > a {
		padding: 0;
	}

	body.home-v4 header .wsmenu > .wsmenu-list > li > a .wsarrow {
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
	}
}

/* Right side: "Become a Client" + round menu toggle */
/* The parent theme pins .right-btn on scroll; on V4 the whole header is fixed instead */
body.home-v4 header .right-btn.sticky {
	position: static;
	top: auto;
	right: auto;
}

body.home-v4 header .right-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

body.home-v4 header .right-btn > .navbar-toggler {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: 36px;
	font-family: var(--v4-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	color: var(--v4-white);
	background-color: var(--v4-blue);
	box-shadow: none;
	transition: background-color 0.2s ease;
}

body.home-v4 header .right-btn > .navbar-toggler:hover,
body.home-v4 header .right-btn > .navbar-toggler:focus-visible {
	color: var(--v4-white);
	background-color: var(--v4-blue-hover);
}

body.home-v4 header .right-btn > .navbar-toggler .icon {
	display: inline-flex;
	width: 12px;
	height: 12px;
	margin: 0;
}

body.home-v4 header .right-btn > .navbar-toggler .icon svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

body.home-v4 header .right-btn > .menu-btn {
	width: 48px;
	height: 48px;
	min-width: 48px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.28);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */

body.home-v4 .v4 {
	display: block;
}

body.home-v4 .v4-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: clamp(620px, min(61.25vw, 100svh), 960px); /* 882px at 1440px as in Figma, never taller than the screen */
	overflow: hidden;
	color: var(--v4-white);
	background-color: #2a2622; /* shown until the image loads */
}

body.home-v4 .v4-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

body.home-v4 .v4-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}

body.home-v4 .v4-hero__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 20%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 32%, rgba(0, 0, 0, 0) 60%);
}

body.home-v4 .v4-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 0 var(--v4-pad-x) 29px;
}

body.home-v4 .v4-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: 21px;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--v4-white);
	background-color: rgba(62, 62, 62, 0.6);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

body.home-v4 .v4-hero__title {
	max-width: 848px;
	margin: 0;
	font-family: var(--v4-font);
	font-size: clamp(30px, 3.34vw, 48px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--v4-white);
	text-wrap: balance;
}

/* Platform logos — continuous marquee */
body.home-v4 .v4-logos {
	position: relative;
	height: 104px;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	background-color: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

body.home-v4 .v4-logos__track {
	display: flex;
	width: max-content;
	height: 100%;
	animation: v4-marquee 36s linear infinite;
}

body.home-v4 .v4-logos:hover .v4-logos__track {
	animation-play-state: paused;
}

body.home-v4 .v4-logos__list {
	display: flex;
	flex: 0 0 auto;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.home-v4 .v4-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: 0 40px;
	border-right: 1px solid rgba(255, 255, 255, 0.22);
}

body.home-v4 .v4-logos__item::before {
	content: none;
}

body.home-v4 .v4-logos__item img {
	display: block;
	width: var(--v4-logo-w, auto);
	max-width: none;
	height: auto;
}

@keyframes v4-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-logos__track {
		animation: none;
	}
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1199px) {
	body.home-v4 {
		--v4-pad-x: 40px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	body.home-v4 header .wsmenu > .wsmenu-list {
		gap: 28px;
		margin-left: 24px;
	}
}

@media (max-width: 991px) {
	body.home-v4 {
		--v4-pad-x: 24px;
		--v4-header-h: 76px;
	}

	body.home-v4 header > .container {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	/* backdrop-filter would trap the fixed off-canvas menu inside the header */
	body.home-v4 header,
	body.home-v4.v4-scrolled header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background-color: rgba(14, 14, 16, 0.55);
	}

	body.home-v4 .v4-hero {
		height: auto;
		min-height: min(100svh, 760px);
		padding-top: var(--v4-header-h);
	}
}

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

@media (max-width: 767px) {
	body.home-v4 {
		--v4-pad-x: 20px;
		--v4-header-h: 68px;
	}

	body.home-v4 header .logo a {
		width: 132px;
		height: 34px;
	}

	body.home-v4 header .right-btn > .navbar-toggler {
		min-height: 40px;
		padding: 8px 16px;
		font-size: 13px;
	}

	body.home-v4 header .right-btn > .menu-btn {
		width: 40px;
		height: 40px;
		min-width: 40px;
	}

	body.home-v4 .v4-hero {
		min-height: min(100svh, 680px);
	}

	body.home-v4 .v4-hero__img {
		object-position: 62% 50%;
	}

	body.home-v4 .v4-hero__content {
		padding-bottom: 24px;
	}

	body.home-v4 .v4-hero__title {
		font-size: clamp(28px, 7.6vw, 34px);
	}

	body.home-v4 .v4-logos {
		height: 72px;
	}

	body.home-v4 .v4-logos__item {
		padding: 0 24px;
	}

	body.home-v4 .v4-logos__item img {
		width: calc(var(--v4-logo-w, 100px) * 0.75);
	}
}

@media (max-width: 479px) {
	body.home-v4 header .right-btn > .navbar-toggler {
		display: none;
	}
}

/* ------------------------------------------------------------------ *
 * About Us (Figma: Home → 02 - About Us)
 * ------------------------------------------------------------------ */

body.home-v4 .v4-about {
	padding: 107px var(--v4-pad-x) 44px;
	background-color: #ffffff;
	color: #000000;
}

body.home-v4 .v4-about__intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

body.home-v4 .v4-pill--light {
	font-size: 16px;
	line-height: 24px;
	color: #555555;
	background-color: #f3f3f3;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.home-v4 .v4-about__lead {
	max-width: 888px;
	margin: 0 auto;
	font-family: var(--v4-font);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	color: #646464;
}

body.home-v4 .v4-about__lead p {
	margin: 0;
	font: inherit;
	color: inherit;
}

body.home-v4 .v4-about__lead strong,
body.home-v4 .v4-about__lead b {
	font-weight: 400;
	color: #000000;
}

/* Team avatars: overlapping circles; the hovered one grows and shows its name */
body.home-v4 .v4-team {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 20px 0;
	list-style: none;
}

body.home-v4 .v4-team__member {
	position: relative;
	flex: 0 0 63px;
	width: 63px;
	height: 63px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	outline: none;
	transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

body.home-v4 .v4-team__member::before {
	content: none;
}

body.home-v4 .v4-team__member + .v4-team__member {
	margin-left: -15px;
}

body.home-v4 .v4-team__member img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

body.home-v4 .v4-team__member:hover,
body.home-v4 .v4-team__member:focus-visible {
	z-index: 2;
	transform: scale(1.42);
}

body.home-v4 .v4-team__member:focus-visible img {
	box-shadow: 0 0 0 3px var(--v4-blue);
}

body.home-v4 .v4-team__tip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	padding: 10px 14px;
	border-radius: 14px;
	font-family: var(--v4-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.62);
	box-shadow: 0 5px 13px rgba(0, 0, 0, 0.08);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Counter the parent's scale so the label stays a normal size */
	transform: translate(-50%, 4px) scale(0.7042);
	transform-origin: 50% 100%;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

body.home-v4 .v4-team__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: rgba(0, 0, 0, 0.62);
	border-bottom: 0;
}

body.home-v4 .v4-team__member:hover .v4-team__tip,
body.home-v4 .v4-team__member:focus-visible .v4-team__tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(0.7042);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-team__member,
	body.home-v4 .v4-team__tip {
		transition: none;
	}
}

body.home-v4 .v4-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 36px;
	font-family: var(--v4-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	color: #ffffff;
	text-decoration: none;
	background-color: var(--v4-blue);
	transition: background-color 0.2s ease;
}

body.home-v4 .v4-btn:hover,
body.home-v4 .v4-btn:focus-visible {
	color: #ffffff;
	background-color: var(--v4-blue-hover);
}

/* Word-by-word reveal: words start faint and light up in reading order as you scroll down. */
body.home-v4 .v4-reveal-ready .v4-word {
	display: inline;
	opacity: 0.12;
	transition: opacity 0.18s ease-out;
}

body.home-v4 .v4-reveal-ready .v4-word.is-on {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-reveal-ready .v4-word {
		opacity: 1;
		transition: none;
	}
}

@media (max-width: 991px) {
	body.home-v4 .v4-about {
		padding-top: 80px;
	}

	body.home-v4 .v4-about__lead {
		font-size: 28px;
	}
}

@media (max-width: 767px) {
	body.home-v4 .v4-about {
		padding-top: 64px;
	}

	body.home-v4 .v4-about__intro {
		gap: 20px;
	}

	body.home-v4 .v4-about__lead {
		font-size: 22px;
		line-height: 1.2;
	}

	body.home-v4 .v4-team {
		padding: 16px 0 12px;
	}

	body.home-v4 .v4-team__member {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
	}

	body.home-v4 .v4-team__member + .v4-team__member {
		margin-left: -11px;
	}
}

/* ------------------------------------------------------------------ *
 * Our Impact in Numbers + Trusted by Anatech (Figma: 02 - About Us, lower half)
 * ------------------------------------------------------------------ */

body.home-v4 .v4-about {
	padding-bottom: 107px;
}

body.home-v4 .v4-impact,
body.home-v4 .v4-clients {
	max-width: 1320px;
	margin: 0 auto;
}

body.home-v4 .v4-impact {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 44px;
}

body.home-v4 .v4-impact__title {
	margin: 0;
	font-family: var(--v4-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.33;
	color: #646464;
	text-align: left;
}

body.home-v4 .v4-impact__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.home-v4 .v4-impact__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 194px;
	margin: 0;
	padding: 20px;
	overflow: hidden;
	border-radius: 24px;
	background-color: #f3f3f3;
	text-align: left;
}

body.home-v4 .v4-impact__card::before {
	content: none;
}

body.home-v4 .v4-impact__num {
	position: relative;
	z-index: 1;
	font-family: var(--v4-font);
	font-size: 48px;
	font-weight: 500;
	line-height: 1.2;
	color: #000000;
}

body.home-v4 .v4-impact__text {
	position: relative;
	z-index: 1;
	max-width: 210px;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: #555555;
}

body.home-v4 .v4-impact__art {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
	display: block;
	max-width: none;
	height: auto;
	pointer-events: none;
}

/* Client logos: two moving rows with a fixed label at the outer end of each */
body.home-v4 .v4-clients {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 20px;
}

body.home-v4 .v4-clients__row {
	display: flex;
	align-items: stretch;
	gap: 20px;
}

body.home-v4 .v4-clients__label {
	flex: 0 0 203px;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 20px;
	font-family: var(--v4-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.33;
	color: #646464;
	text-align: left;
}

body.home-v4 .v4-clients__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

body.home-v4 .v4-clients__row--rtl .v4-clients__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 24px), transparent 100%);
}

body.home-v4 .v4-clients__row--ltr .v4-clients__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
}

body.home-v4 .v4-clients__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

body.home-v4 .v4-clients__set {
	display: flex;
	flex: 0 0 auto;
	gap: 20px;
	margin: 0;
	padding: 0 20px 0 0;
	list-style: none;
}

body.home-v4 .v4-clients__logo {
	flex: 0 0 203px;
	margin: 0;
	padding: 0;
}

body.home-v4 .v4-clients__logo::before {
	content: none;
}

body.home-v4 .v4-clients__logo img {
	display: block;
	width: 203px;
	height: auto;
	border-radius: 12px;
}

/* Runs on its own; the script pauses it only while the rows are off screen */
body.home-v4 .v4-clients__row--rtl .v4-clients__track {
	animation: v4-clients-rtl 30s linear infinite;
}

body.home-v4 .v4-clients__row--ltr .v4-clients__track {
	animation: v4-clients-ltr 30s linear infinite;
}

body.home-v4 .v4-clients.is-offscreen .v4-clients__track {
	animation-play-state: paused;
}

@keyframes v4-clients-rtl {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-33.3333%);
	}
}

@keyframes v4-clients-ltr {
	from {
		transform: translateX(-33.3333%);
	}
	to {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-clients__track {
		animation: none !important;
	}
}

@media (max-width: 1100px) {
	body.home-v4 .v4-impact__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	body.home-v4 .v4-about {
		padding-bottom: 64px;
	}

	body.home-v4 .v4-impact {
		margin-top: 36px;
		gap: 16px;
	}

	body.home-v4 .v4-impact__title,
	body.home-v4 .v4-clients__label {
		font-size: 18px;
	}

	body.home-v4 .v4-impact__num {
		font-size: 40px;
	}

	body.home-v4 .v4-clients__row {
		flex-direction: column;
		gap: 12px;
	}

	body.home-v4 .v4-clients__row--ltr .v4-clients__label {
		order: -1;
	}

	body.home-v4 .v4-clients__label {
		flex-basis: auto;
		padding: 0;
	}

	body.home-v4 .v4-clients__row .v4-clients__viewport {
		margin: 0 calc(var(--v4-pad-x) * -1);
		-webkit-mask-image: none;
		mask-image: none;
	}

	body.home-v4 .v4-clients__logo {
		flex-basis: 160px;
	}

	body.home-v4 .v4-clients__logo img {
		width: 160px;
	}

	body.home-v4 .v4-clients__set {
		gap: 12px;
		padding-right: 12px;
	}
}

@media (max-width: 560px) {
	body.home-v4 .v4-impact__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Services (dark): heading reveal, sticky service menu, image + copy cards
   ========================================================================== */

body.home-v4 .v4-services {
	padding: 80px var(--v4-pad-x) 52px;
	background-color: #000000;
	color: var(--v4-white);
}

body.home-v4 .v4-services__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	max-width: 949px;
}

body.home-v4 .v4-pill--dark {
	margin-bottom: 2px;
	background-color: #3e3e3e;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.home-v4 .v4-services__title {
	margin: 0;
	font-family: var(--v4-font);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	color: #bdbdbd;
}

body.home-v4 .v4-services__title strong,
body.home-v4 .v4-services__title b {
	font-weight: 400;
	color: var(--v4-white);
}

body.home-v4 .v4-services__intro {
	margin: 0;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.33;
	color: #bdbdbd;
}

body.home-v4 .v4-services__body {
	display: grid;
	grid-template-columns: 265px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	margin-top: 44px;
}

/* Left menu: stays in view while the cards scroll past */
body.home-v4 .v4-services__nav {
	position: sticky;
	top: calc(var(--v4-header-h) + 24px);
}

body.home-v4 .v4-services__nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.home-v4 .v4-services__nav li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid #232323;
}

body.home-v4 .v4-services__nav li::before {
	content: none;
}

body.home-v4 .v4-services__link {
	position: relative;
	display: block;
	padding: 20px 0 20px 12px;
	font-family: var(--v4-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.33;
	color: #bdbdbd;
	text-decoration: none;
	transition: color 0.25s ease;
}

body.home-v4 .v4-services__link::before {
	content: "";
	position: absolute;
	top: 24px;
	bottom: 24px;
	left: 0;
	width: 3px;
	border-radius: 2px;
	background-color: var(--v4-white);
	opacity: 0;
	transform: scaleY(0.4);
	transition: opacity 0.25s ease, transform 0.3s ease;
}

body.home-v4 .v4-services__link:hover,
body.home-v4 .v4-services__link:focus-visible,
body.home-v4 .v4-services__link.is-active {
	color: var(--v4-white);
}

body.home-v4 .v4-services__link.is-active::before {
	opacity: 1;
	transform: scaleY(1);
}

body.home-v4 .v4-services__link:focus-visible {
	outline: 2px solid var(--v4-white);
	outline-offset: 2px;
}

body.home-v4 .v4-services__list {
	display: flex;
	flex-direction: column;
	gap: 60px;
}

body.home-v4 .v4-service {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	scroll-margin-top: calc(var(--v4-header-h) + 24px);
}

body.home-v4 .v4-service__media {
	overflow: hidden;
	aspect-ratio: 508 / 427;
	border-radius: 20px;
	background-color: #111111;
}

body.home-v4 .v4-service__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body.home-v4 .v4-service:hover .v4-service__img {
	transform: scale(1.03);
}

body.home-v4 .v4-service__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	min-width: 0;
}

body.home-v4 .v4-service__title {
	margin: 0 0 6px;
	font-family: var(--v4-font);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.33;
	letter-spacing: 0;
	color: var(--v4-white);
}

body.home-v4 .v4-service__title a {
	color: inherit;
	text-decoration: none;
}

body.home-v4 .v4-service__title a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

body.home-v4 .v4-service__text {
	max-width: 500px;
	margin: 0;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.33;
	color: var(--v4-white);
}

body.home-v4 .v4-service__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 13px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.home-v4 .v4-service__tags li {
	margin: 0;
	padding: 0;
}

body.home-v4 .v4-service__tags li::before {
	content: none;
}

body.home-v4 .v4-tag {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 12px 20px;
	border: 1px solid var(--v4-white);
	border-radius: 26px;
	font-family: var(--v4-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.33;
	white-space: nowrap;
	color: var(--v4-white);
	background-color: transparent;
	text-decoration: none;
	transition: color 0.25s ease, background-color 0.25s ease;
}

body.home-v4 .v4-tag__icon {
	flex: 0 0 16px;
	transition: transform 0.25s ease;
}

body.home-v4 a.v4-tag:hover,
body.home-v4 a.v4-tag:focus-visible {
	color: #000000;
	background-color: var(--v4-white);
}

body.home-v4 a.v4-tag:hover .v4-tag__icon,
body.home-v4 a.v4-tag:focus-visible .v4-tag__icon {
	transform: translate(2px, -2px);
}

body.home-v4 a.v4-tag:focus-visible {
	outline: 2px solid var(--v4-white);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-services__link,
	body.home-v4 .v4-services__link::before,
	body.home-v4 .v4-service__img,
	body.home-v4 .v4-tag,
	body.home-v4 .v4-tag__icon {
		transition: none;
	}

	body.home-v4 .v4-service:hover .v4-service__img {
		transform: none;
	}
}

@media (max-width: 1199px) {
	body.home-v4 .v4-services__body {
		grid-template-columns: 220px minmax(0, 1fr);
	}

	body.home-v4 .v4-services__link {
		font-size: 18px;
	}

	body.home-v4 .v4-tag {
		min-height: 44px;
		padding: 9px 16px;
		font-size: 17px;
		gap: 10px;
	}
}

/* Tablet: the cards carry their own titles, so the side menu is dropped */
@media (max-width: 991px) {
	body.home-v4 .v4-services {
		padding: 64px var(--v4-pad-x) 48px;
	}

	body.home-v4 .v4-services__body {
		display: block;
		margin-top: 36px;
	}

	body.home-v4 .v4-services__nav {
		display: none;
	}

	body.home-v4 .v4-services__list {
		gap: 48px;
	}
}

@media (max-width: 767px) {
	body.home-v4 .v4-services__title {
		font-size: 26px;
	}

	body.home-v4 .v4-services__intro br {
		display: none;
	}

	body.home-v4 .v4-service {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	body.home-v4 .v4-service__body {
		gap: 20px;
	}

	body.home-v4 .v4-service__title {
		font-size: 22px;
	}

	body.home-v4 .v4-service__tags {
		gap: 10px 8px;
	}

	body.home-v4 .v4-tag {
		min-height: 40px;
		padding: 8px 14px;
		font-size: 15px;
		gap: 8px;
	}

	body.home-v4 .v4-tag__icon {
		width: 14px;
		height: 14px;
		flex-basis: 14px;
	}
}

@media (max-width: 479px) {
	body.home-v4 .v4-services__title {
		font-size: 24px;
	}

	body.home-v4 .v4-tag {
		white-space: normal;
	}
}

/* ==========================================================================
   Scroll theme: About Us and Services share one page background that fades
   from white to black once the Services section fills more than half the
   screen (body.v4-theme-dark, set in homepage-v4.js). Only active with JS.
   ========================================================================== */

body.home-v4.v4-theme-ready main.v4 {
	background-color: #ffffff;
	transition: background-color 0.8s ease;
}

body.home-v4.v4-theme-ready.v4-theme-dark main.v4 {
	background-color: #000000;
}

body.home-v4.v4-theme-ready .v4-about,
body.home-v4.v4-theme-ready .v4-services {
	background-color: transparent;
}

body.home-v4.v4-theme-ready .v4-about__lead,
body.home-v4.v4-theme-ready .v4-about__lead strong,
body.home-v4.v4-theme-ready .v4-about__lead b,
body.home-v4.v4-theme-ready .v4-pill--light,
body.home-v4.v4-theme-ready .v4-pill--dark,
body.home-v4.v4-theme-ready .v4-impact__title,
body.home-v4.v4-theme-ready .v4-clients__label,
body.home-v4.v4-theme-ready .v4-services__title,
body.home-v4.v4-theme-ready .v4-services__title strong,
body.home-v4.v4-theme-ready .v4-services__title b,
body.home-v4.v4-theme-ready .v4-services__intro,
body.home-v4.v4-theme-ready .v4-services__nav li,
body.home-v4.v4-theme-ready .v4-services__link,
body.home-v4.v4-theme-ready .v4-service__title,
body.home-v4.v4-theme-ready .v4-service__text,
body.home-v4.v4-theme-ready .v4-service__media {
	transition: color 0.8s ease, background-color 0.8s ease, border-color 0.8s ease;
}

body.home-v4.v4-theme-ready .v4-services__link::before {
	transition: opacity 0.25s ease, transform 0.3s ease, background-color 0.8s ease;
}

body.home-v4.v4-theme-ready .v4-tag {
	transition: color 0.4s ease, background-color 0.4s ease, border-color 0.8s ease;
}

/* Light phase: Services shown in the About Us colours until it takes over */
body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-pill--dark {
	color: #555555;
	background-color: #f3f3f3;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-services__title,
body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-services__intro,
body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-services__link {
	color: #646464;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-services__title strong,
body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-services__title b,
body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-services__link:hover,
body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-services__link.is-active,
body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-service__title,
body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-service__text {
	color: #000000;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-services__link::before {
	background-color: #000000;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-services__nav li {
	border-bottom-color: #e6e6e6;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-service__media {
	background-color: #f3f3f3;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-tag {
	color: #000000;
	border-color: #000000;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) a.v4-tag:hover,
body.home-v4.v4-theme-ready:not(.v4-theme-dark) a.v4-tag:focus-visible {
	color: #ffffff;
	background-color: #000000;
}

/* Dark phase: the About Us part still on screen follows the black background */
body.home-v4.v4-theme-ready.v4-theme-dark .v4-about__lead,
body.home-v4.v4-theme-ready.v4-theme-dark .v4-impact__title,
body.home-v4.v4-theme-ready.v4-theme-dark .v4-clients__label {
	color: #bdbdbd;
}

body.home-v4.v4-theme-ready.v4-theme-dark .v4-about__lead strong,
body.home-v4.v4-theme-ready.v4-theme-dark .v4-about__lead b {
	color: #ffffff;
}

body.home-v4.v4-theme-ready.v4-theme-dark .v4-pill--light {
	color: #ffffff;
	background-color: #3e3e3e;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4.v4-theme-ready main.v4,
	body.home-v4.v4-theme-ready .v4-about__lead,
	body.home-v4.v4-theme-ready .v4-about__lead strong,
	body.home-v4.v4-theme-ready .v4-pill--light,
	body.home-v4.v4-theme-ready .v4-pill--dark,
	body.home-v4.v4-theme-ready .v4-impact__title,
	body.home-v4.v4-theme-ready .v4-clients__label,
	body.home-v4.v4-theme-ready .v4-services__title,
	body.home-v4.v4-theme-ready .v4-services__title strong,
	body.home-v4.v4-theme-ready .v4-services__intro,
	body.home-v4.v4-theme-ready .v4-services__nav li,
	body.home-v4.v4-theme-ready .v4-services__link,
	body.home-v4.v4-theme-ready .v4-service__title,
	body.home-v4.v4-theme-ready .v4-service__text,
	body.home-v4.v4-theme-ready .v4-service__media,
	body.home-v4.v4-theme-ready .v4-tag {
		transition: none;
	}
}

/* ==========================================================================
   Development showcase (dark): moving text behind a laptop whose screen
   scrolls through a full-page website by itself
   ========================================================================== */

body.home-v4 .v4-dev,
body.home-v4.v4-theme-ready .v4-dev {
	position: relative;
	overflow: hidden;
	padding: 60px var(--v4-pad-x) 73px;
	background-color: #000000;
	color: var(--v4-white);
}

body.home-v4 .v4-dev__head {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

body.home-v4 .v4-dev__title {
	margin: 0;
	font-family: var(--v4-font);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--v4-white);
}

body.home-v4 .v4-dev__stars {
	display: block;
	width: 153px;
	height: auto;
	margin-top: -11px;
}

body.home-v4 .v4-dev__stage {
	position: relative;
	margin-top: 47px;
}

body.home-v4 .v4-dev__curve {
	position: absolute;
	top: -155px;
	left: calc(var(--v4-pad-x) * -1);
	z-index: 1;
	width: calc(100% + var(--v4-pad-x) * 2);
	height: 820px;
	color: rgba(255, 255, 255, 0.45);
	pointer-events: none;
}

/* Big grey line of text that loops right to left behind the laptop */
body.home-v4 .v4-dev__marquee {
	position: absolute;
	top: 24.4%;
	left: calc(var(--v4-pad-x) * -1);
	right: calc(var(--v4-pad-x) * -1);
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

body.home-v4 .v4-dev__marquee-track {
	display: flex;
	width: max-content;
	animation: v4-dev-marquee 60s linear infinite;
}

body.home-v4 .v4-dev__marquee span {
	flex: 0 0 auto;
	padding-right: 0.5em;
	font-family: var(--v4-font);
	font-size: clamp(44px, 6.67vw, 96px);
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	color: #4a4a4a;
}

@keyframes v4-dev-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

body.home-v4 .v4-dev__laptop {
	position: relative;
	z-index: 2;
	width: min(777px, 100%);
	margin: 0 auto;
	aspect-ratio: 1554 / 942;
}

body.home-v4 .v4-dev__frame {
	display: block;
	width: 100%;
	height: auto;
}

/* Screen area measured from the Figma laptop (percent of the frame image) */
body.home-v4 .v4-dev__screen {
	position: absolute;
	top: 2.972%;
	left: 10.232%;
	width: 79.537%;
	height: 85.456%;
	overflow: hidden;
	border-radius: 4px 4px 0 0;
	background-color: #fdebff;
	container-type: size;
}

/* The page images are stacked and moved with a GPU transform (sharper and
   smoother than animating a background); 100cqh = the screen height. */
body.home-v4 .v4-dev__page {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	animation: v4-dev-screen 30s linear infinite;
	will-change: transform;
}

body.home-v4 .v4-dev__page img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* Scroll slowly down the whole page, pause at the bottom, then jump back
   up to the top quickly (~1.2s) and pause before the next pass */
@keyframes v4-dev-screen {
	0%,
	5% {
		transform: translate3d(0, 0, 0);
		animation-timing-function: ease-in-out;
	}

	83%,
	88% {
		transform: translate3d(0, calc(-100% + 100cqh), 0);
		animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	}

	92%,
	100% {
		transform: translate3d(0, 0, 0);
	}
}

body.home-v4 .v4-dev__notch {
	position: absolute;
	top: 0;
	left: 50%;
	width: 12.1%;
	height: 3.5%;
	min-height: 8px;
	border-radius: 0 0 6px 6px;
	background: radial-gradient(circle at 50% 45%, #1d3a55 0 2px, #0b0d10 2.5px 4px, transparent 4.5px) no-repeat, #000000;
	transform: translateX(-50%);
}

body.home-v4 .v4-dev.is-offscreen .v4-dev__marquee-track,
body.home-v4 .v4-dev.is-offscreen .v4-dev__page {
	animation-play-state: paused;
}

body.home-v4 .v4-dev__foot {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin-top: 65px;
}

body.home-v4 .v4-dev__text {
	max-width: 820px;
	margin: 0;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--v4-white);
}

body.home-v4 .v4-dev__btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 16px 24px;
	border-radius: 28px;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--v4-blue);
	background-color: var(--v4-white);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

body.home-v4 .v4-dev__btn svg {
	flex: 0 0 20px;
	transition: transform 0.25s ease;
}

body.home-v4 .v4-dev__btn:hover,
body.home-v4 .v4-dev__btn:focus-visible {
	color: var(--v4-white);
	background-color: var(--v4-blue);
}

body.home-v4 .v4-dev__btn:hover svg,
body.home-v4 .v4-dev__btn:focus-visible svg {
	transform: translate(2px, -2px);
}

body.home-v4 .v4-dev__btn:focus-visible {
	outline: 2px solid var(--v4-white);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-dev__marquee-track,
	body.home-v4 .v4-dev__page {
		animation: none;
	}

	body.home-v4 .v4-dev__btn,
	body.home-v4 .v4-dev__btn svg {
		transition: none;
	}
}

@media (max-width: 991px) {
	body.home-v4 .v4-dev,
	body.home-v4.v4-theme-ready .v4-dev {
		padding: 48px var(--v4-pad-x) 56px;
	}

	body.home-v4 .v4-dev__curve {
		display: none;
	}

	body.home-v4 .v4-dev__stars {
		width: 110px;
		margin-top: -4px;
	}

	body.home-v4 .v4-dev__stage {
		margin-top: 36px;
	}

	body.home-v4 .v4-dev__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		margin-top: 40px;
	}
}

@media (max-width: 767px) {
	body.home-v4 .v4-dev__title {
		font-size: 26px;
	}

	body.home-v4 .v4-dev__stars {
		width: 80px;
	}

	body.home-v4 .v4-dev__laptop {
		width: calc(100% + 16px);
		margin: 0 -8px;
	}

	body.home-v4 .v4-dev__btn {
		min-height: 48px;
		padding: 12px 20px;
	}
}

/* ==========================================================================
   Development — project collage (dark): two columns of website cards that
   run off the left and right edges, with the hand-held phone between them.
   Everything scales with the section width (cqw = 1% of 1440 design).
   ========================================================================== */

body.home-v4 .v4-dev2,
body.home-v4.v4-theme-ready .v4-dev2 {
	position: relative;
	overflow: hidden;
	overflow: clip; /* clips like hidden but keeps the sticky phone working */
	background-color: #000000;
	container-type: inline-size;
}

body.home-v4 .v4-dev2__inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 4.861cqw 0 4.097cqw;
}

body.home-v4 .v4-dev2__col {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 3.472cqw;
}

/* Card exports are already cropped where they leave the screen */
body.home-v4 .v4-dev2__col--left {
	width: 35.625cqw;
}

body.home-v4 .v4-dev2__col--right {
	width: 35.556cqw;
}

body.home-v4 .v4-dev2__card {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* The hand + phone travels down with the page while this section is on
   screen (sticky inside a track the full height of the section), then
   stops at the end of the section. */
body.home-v4 .v4-dev2__phone-track {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 36.806cqw;
	z-index: 2;
	width: 38.438cqw;
	pointer-events: none;
}

body.home-v4 .v4-dev2__device {
	position: -webkit-sticky;
	position: sticky;
	top: var(--v4-header-h);
}

body.home-v4 .v4-dev2__phone {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

/* Bounding box of the phone's real screen opening (from the Figma screen
   mask, below the status bar), in % of the frame image. The frame on top
   hides everything outside the exact screen shape, so the page fills the
   screen edge to edge; JS moves it with --v4-p. */
body.home-v4 .v4-dev2__screen {
	position: absolute;
	top: 9.851%;
	left: 11.382%;
	z-index: 0;
	width: 41.192%;
	height: 53.851%;
	overflow: hidden;
	background-color: #ffffff;
	container-type: size;
}

body.home-v4 .v4-dev2__screen-page {
	width: 100%;
	transform: translate3d(0, calc((100cqh - 100%) * var(--v4-p, 0)), 0);
	will-change: transform;
}

body.home-v4 .v4-dev2__screen-page img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

body.home-v4 .v4-dev2__curve {
	position: absolute;
	top: 1.944cqw;
	left: 0;
	z-index: 0;
	width: 100cqw;
	height: auto;
	overflow: visible;
	color: #4a4a4a;
	pointer-events: none;
}

/* ==========================================================================
   Case studies (light): 2 × 2 grid of square project cards with a glassy
   text band at the bottom
   ========================================================================== */

body.home-v4 .v4-cases,
body.home-v4.v4-theme-ready .v4-cases {
	padding: 80px var(--v4-pad-x) 52px;
	background-color: #ffffff;
	color: #000000;
}

body.home-v4 .v4-cases__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-width: 949px;
}

body.home-v4 .v4-cases__title {
	margin: 0;
	font-family: var(--v4-font);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	color: #000000;
}

body.home-v4 .v4-cases__intro {
	margin: 0;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.33;
	color: #555555;
}

body.home-v4 .v4-cases__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 20px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

body.home-v4 .v4-cases__grid > li {
	margin: 0;
	padding: 0;
}

body.home-v4 .v4-cases__grid > li::before {
	content: none;
}

body.home-v4 .v4-case {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 24px;
	background-color: #233e99;
	color: #ffffff;
	text-decoration: none;
	isolation: isolate;
}

body.home-v4 .v4-case__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Transparent laptop exported from the card: starts 40px down (of 650) */
body.home-v4 .v4-case__front {
	position: absolute;
	top: 6.154%;
	left: 0;
	width: 100%;
	max-width: none;
	height: auto;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Logos sit 50px from the left, centred on the same line (of 650) */
body.home-v4 .v4-case__logo {
	position: absolute;
	top: 11.15%;
	left: 7.692%;
	z-index: 1;
	width: var(--v4-logo-w, 25%);
	max-width: none;
	height: auto;
	transform: translateY(-50%);
}

body.home-v4 .v4-case__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 32px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 100%);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

body.home-v4 .v4-case__title {
	display: block;
	font-family: var(--v4-font);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	color: #ffffff;
}

body.home-v4 .v4-case__text {
	display: block;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.33;
	color: #ffffff;
}

body.home-v4 a.v4-case:hover .v4-case__bg,
body.home-v4 a.v4-case:focus-visible .v4-case__bg {
	transform: scale(1.04);
}

body.home-v4 a.v4-case:hover .v4-case__front,
body.home-v4 a.v4-case:focus-visible .v4-case__front {
	transform: translateY(-1.5%);
}

body.home-v4 a.v4-case:focus-visible {
	outline: 3px solid var(--v4-blue);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-case__bg,
	body.home-v4 .v4-case__front {
		transition: none;
	}
}

@media (max-width: 1199px) {
	body.home-v4 .v4-case__body {
		padding: 24px;
	}

	body.home-v4 .v4-case__title {
		font-size: 20px;
	}

	body.home-v4 .v4-case__text {
		font-size: 14px;
	}
}

@media (max-width: 991px) {
	body.home-v4 .v4-cases,
	body.home-v4.v4-theme-ready .v4-cases {
		padding: 64px var(--v4-pad-x) 48px;
	}

	body.home-v4 .v4-cases__grid {
		gap: 16px;
	}

	body.home-v4 .v4-case__body {
		padding: 16px;
		gap: 6px;
	}

	body.home-v4 .v4-case__title {
		font-size: 17px;
	}

	body.home-v4 .v4-case__text {
		display: -webkit-box;
		overflow: hidden;
		font-size: 13px;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
}

@media (max-width: 640px) {
	body.home-v4 .v4-cases__title {
		font-size: 26px;
	}

	body.home-v4 .v4-cases__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	body.home-v4 .v4-case__body {
		padding: 20px;
	}

	body.home-v4 .v4-case__title {
		font-size: 20px;
	}

	body.home-v4 .v4-case__text {
		font-size: 14px;
	}
}

/* ==========================================================================
   Scroll theme, second hand-over: the project collage and Case studies share
   the page background, so leaving the black collage the page stays black
   until Case studies fills more than half the screen, then fades to white
   (the visible end of the collage turns white with it).
   ========================================================================== */

body.home-v4.v4-theme-ready main.v4 .v4-dev2,
body.home-v4.v4-theme-ready main.v4 .v4-cases {
	background-color: transparent;
}

body.home-v4.v4-theme-ready .v4-cases__title,
body.home-v4.v4-theme-ready .v4-cases__intro {
	transition: color 0.8s ease;
}

body.home-v4.v4-theme-ready.v4-theme-dark .v4-cases__title {
	color: #ffffff;
}

body.home-v4.v4-theme-ready.v4-theme-dark .v4-cases__intro {
	color: #bdbdbd;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4.v4-theme-ready .v4-cases__title,
	body.home-v4.v4-theme-ready .v4-cases__intro {
		transition: none;
	}
}

/* ==========================================================================
   Giving Back banner: blue card with a sky photo, a frosted inner panel,
   the blue info panel on the left and the children on the right
   ========================================================================== */

body.home-v4 .v4-cta,
body.home-v4.v4-theme-ready main.v4 .v4-cta {
	padding: 80px var(--v4-pad-x);
	background-color: #ffffff;
}

body.home-v4 .v4-cta__card {
	position: relative;
	overflow: hidden;
	min-height: 481px;
	border-radius: 20px;
	background-color: var(--v4-blue);
	isolation: isolate;
}

body.home-v4 .v4-cta__sky {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Logo 60px from the top, 69px from the right (of the 1320 card) */
body.home-v4 .v4-cta__logo {
	position: absolute;
	top: 60px;
	right: 5.23%;
	z-index: 3;
	width: 129px;
	max-width: none;
	height: auto;
}

body.home-v4 .v4-cta__glass {
	position: absolute;
	inset: 32px;
	z-index: 1;
	overflow: hidden;
	border: 1px solid #ffffff;
	border-radius: 20px;
	background-color: rgba(199, 199, 199, 0.3);
}

body.home-v4 .v4-cta__info {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	box-sizing: border-box;
	width: min(600px, 48.1%);
	height: 100%;
	padding: 40px 30px;
	border-radius: 20px;
	background-color: var(--v4-blue);
	color: #ffffff;
}

body.home-v4 .v4-cta__copy {
	display: flex;
	flex-direction: column;
}

body.home-v4 .v4-cta__eyebrow,
body.home-v4 .v4-cta__text {
	margin: 0;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 400;
	color: #ffffff;
}

body.home-v4 .v4-cta__eyebrow {
	line-height: 1.5;
}

body.home-v4 .v4-cta__title {
	margin: 4px 0 24px;
	font-family: var(--v4-font);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0;
	color: #ffffff;
}

body.home-v4 .v4-cta__text {
	line-height: 1.33;
}

body.home-v4 .v4-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

body.home-v4 .v4-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 14px 40px;
	border: 1px solid #ffffff;
	border-radius: 28px;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

body.home-v4 .v4-cta__btn--primary {
	color: var(--v4-blue);
	background-color: #ffffff;
}

body.home-v4 .v4-cta__btn--secondary {
	color: #ffffff;
	background-color: transparent;
}

body.home-v4 .v4-cta__btn--primary:hover,
body.home-v4 .v4-cta__btn--primary:focus-visible {
	color: #ffffff;
	background-color: transparent;
}

body.home-v4 .v4-cta__btn--secondary:hover,
body.home-v4 .v4-cta__btn--secondary:focus-visible {
	color: var(--v4-blue);
	background-color: #ffffff;
}

body.home-v4 .v4-cta__btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* Children: 492 wide at 661px into the 1248 panel, cut by the panel bottom */
body.home-v4 .v4-cta__image {
	position: absolute;
	top: 0;
	left: 52.96%;
	z-index: 1;
	width: 39.42%;
	max-width: none;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-cta__btn {
		transition: none;
	}
}

@media (max-width: 1199px) {
	body.home-v4 .v4-cta__info {
		width: 54%;
	}

	body.home-v4 .v4-cta__image {
		left: 56%;
		width: 42%;
	}

	body.home-v4 .v4-cta__btn {
		padding: 12px 28px;
	}
}

@media (max-width: 991px) {
	body.home-v4 .v4-cta,
	body.home-v4.v4-theme-ready main.v4 .v4-cta {
		padding: 56px var(--v4-pad-x);
	}

	body.home-v4 .v4-cta__card {
		min-height: 0;
	}

	body.home-v4 .v4-cta__logo {
		display: none;
	}

	body.home-v4 .v4-cta__glass {
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
		margin: 20px;
	}

	body.home-v4 .v4-cta__info {
		width: 100%;
		height: auto;
	}

	body.home-v4 .v4-cta__image {
		position: relative;
		left: auto;
		display: block;
		width: min(80%, 420px);
		margin: 24px auto 0;
	}
}

@media (max-width: 640px) {
	body.home-v4 .v4-cta__card,
	body.home-v4 .v4-cta__glass,
	body.home-v4 .v4-cta__info {
		border-radius: 16px;
	}

	body.home-v4 .v4-cta__glass {
		margin: 12px;
	}

	body.home-v4 .v4-cta__info {
		padding: 28px 20px;
	}

	body.home-v4 .v4-cta__title {
		font-size: 26px;
	}

	body.home-v4 .v4-cta__actions {
		flex-direction: column;
		gap: 12px;
	}

	body.home-v4 .v4-cta__btn {
		width: 100%;
	}
}

/* ==========================================================================
   Testimonials: client logo tabs, quote + person on the left,
   project image on the right
   ========================================================================== */

body.home-v4 .v4-tm,
body.home-v4.v4-theme-ready main.v4 .v4-tm {
	padding: 80px var(--v4-pad-x) 52px;
	background-color: #ffffff;
	color: #000000;
}

body.home-v4 .v4-tm__head,
body.home-v4 .v4-certs__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

body.home-v4 .v4-tm__title,
body.home-v4 .v4-certs__title {
	max-width: 680px;
	margin: 0;
	font-family: var(--v4-font);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	color: #646464;
}

body.home-v4 .v4-certs__title {
	max-width: 790px;
}

body.home-v4 .v4-tm__title strong,
body.home-v4 .v4-tm__title b,
body.home-v4 .v4-certs__title strong,
body.home-v4 .v4-certs__title b {
	font-weight: 400;
	color: #000000;
}

/* Logo row: 191×71 tabs, 20px apart; the box slides to the chosen client */
body.home-v4 .v4-tm__logos {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 44px 0 0;
	scrollbar-width: none;
}

body.home-v4 .v4-tm__logos::-webkit-scrollbar {
	display: none;
}

body.home-v4 .v4-tm__logo {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 71px;
	margin: 0;
	padding: 20px 30px;
	border: 1px solid transparent;
	border-radius: 12px;
	font: inherit;
	color: #111111;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.home-v4 .v4-tm__logo--static {
	cursor: default;
}

body.home-v4 .v4-tm__logo img {
	display: block;
	max-width: none;
	height: auto;
}

body.home-v4 .v4-tm__logo-text {
	font-family: var(--v4-font);
	font-size: 18px;
	white-space: nowrap;
}

body.home-v4 .v4-tm__logo.is-active,
body.home-v4 button.v4-tm__logo:hover {
	border-color: #a8a8a8;
	background-color: #f9f9f9;
}

body.home-v4 .v4-tm__logo:focus-visible {
	outline: 2px solid var(--v4-blue);
	outline-offset: 2px;
}

body.home-v4 .v4-tm__marker {
	display: none;
}

/* With JS the active border is drawn by one box that slides between tabs */
body.home-v4 .v4-tm.is-ready .v4-tm__marker {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	display: block;
	box-sizing: border-box;
	width: var(--v4-tm-w, 0);
	height: 100%;
	border: 1px solid #a8a8a8;
	border-radius: 12px;
	background-color: #f9f9f9;
	transform: translateX(var(--v4-tm-x, 0));
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

body.home-v4 .v4-tm.is-ready .v4-tm__logo.is-active {
	border-color: transparent;
	background-color: transparent;
}

body.home-v4 .v4-tm__panels {
	margin-top: 42px;
}

body.home-v4 .v4-tm__panel {
	display: grid;
	grid-template-columns: minmax(0, 565fr) minmax(0, 713fr);
	gap: 42px;
	animation: v4-tm-in 0.45s ease both;
}

body.home-v4 .v4-tm__panel[hidden] {
	display: none;
}

@keyframes v4-tm-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

body.home-v4 .v4-tm__content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
}

body.home-v4 .v4-tm__stars {
	display: flex;
	gap: 8px;
	margin: 0 0 12px;
	color: #ffc107;
}

body.home-v4 .v4-tm__stars svg {
	display: block;
	width: 20px;
	height: 20px;
}

body.home-v4 .v4-tm__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

body.home-v4 .v4-tm__quote p {
	margin: 0;
	font-family: var(--v4-font);
	font-size: 20px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.33;
	color: #111111;
}

body.home-v4 .v4-tm__avatar {
	display: block;
	width: 79px;
	height: 79px;
	border-radius: 12px;
	object-fit: cover;
}

body.home-v4 .v4-tm__who {
	display: flex;
	flex-direction: column;
	margin: 14px 0 0;
	font-family: var(--v4-font);
}

body.home-v4 .v4-tm__role,
body.home-v4 .v4-tm__company {
	font-size: 16px;
	line-height: 1.5;
	color: #646464;
}

body.home-v4 .v4-tm__name {
	margin: 2px 0;
	font-size: 24px;
	line-height: 1.3;
	color: #111111;
}

body.home-v4 .v4-tm__media {
	overflow: hidden;
	aspect-ratio: 713 / 468;
	border-radius: 20px;
	background-color: #e9e9e9;
}

body.home-v4 .v4-tm__media img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Certifications: heading + six badges spread across the row
   ========================================================================== */

body.home-v4 .v4-certs,
body.home-v4.v4-theme-ready main.v4 .v4-certs {
	padding: 80px var(--v4-pad-x) 68px;
	background-color: #ffffff;
	color: #000000;
}

body.home-v4 .v4-certs__intro {
	max-width: 600px;
	margin: 0;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: #555555;
}

body.home-v4 .v4-certs__list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 38px 0 0;
	padding: 0;
	list-style: none;
}

body.home-v4 .v4-certs__item {
	flex: 0 1 auto;
	margin: 0;
}

body.home-v4 .v4-certs__item img {
	display: block;
	max-width: 100%;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-tm__panel,
	body.home-v4 .v4-tm.is-ready .v4-tm__marker,
	body.home-v4 .v4-tm__logo {
		animation: none;
		transition: none;
	}
}

@media (max-width: 1399px) {
	body.home-v4 .v4-tm__logos {
		justify-content: flex-start;
		overflow-x: auto;
		margin-right: calc(var(--v4-pad-x) * -1);
		padding-right: var(--v4-pad-x);
	}
}

@media (max-width: 1199px) {
	body.home-v4 .v4-tm__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
	}

	body.home-v4 .v4-tm__quote p {
		font-size: 18px;
	}

	body.home-v4 .v4-certs__item img {
		width: 150px;
	}
}

@media (max-width: 991px) {
	body.home-v4 .v4-tm,
	body.home-v4.v4-theme-ready main.v4 .v4-tm {
		padding: 56px var(--v4-pad-x) 40px;
	}

	body.home-v4 .v4-tm__logos {
		margin-top: 32px;
	}

	body.home-v4 .v4-tm__panels {
		margin-top: 28px;
	}

	body.home-v4 .v4-tm__panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	body.home-v4 .v4-tm__content {
		gap: 28px;
	}

	body.home-v4 .v4-certs,
	body.home-v4.v4-theme-ready main.v4 .v4-certs {
		padding: 56px var(--v4-pad-x);
	}

	body.home-v4 .v4-certs__list {
		flex-wrap: wrap;
		justify-content: center;
		gap: 24px 32px;
	}

	body.home-v4 .v4-certs__item img {
		width: 140px;
	}
}

@media (max-width: 640px) {
	body.home-v4 .v4-tm__title,
	body.home-v4 .v4-certs__title {
		font-size: 26px;
	}

	body.home-v4 .v4-tm__logo {
		min-height: 60px;
		padding: 14px 20px;
	}

	body.home-v4 .v4-tm__logo img {
		transform: scale(0.85);
	}

	body.home-v4 .v4-tm__quote p {
		font-size: 17px;
	}

	body.home-v4 .v4-tm__name {
		font-size: 20px;
	}

	body.home-v4 .v4-tm__media {
		border-radius: 16px;
	}

	body.home-v4 .v4-certs__list {
		gap: 20px;
	}

	body.home-v4 .v4-certs__item {
		flex: 0 0 calc(50% - 10px);
		display: flex;
		justify-content: center;
	}

	body.home-v4 .v4-certs__item img {
		width: 120px;
	}
}

/* The theme draws a blue dot before list items; not wanted on the badges */
body.home-v4 .v4-certs__item {
	padding: 0;
}

body.home-v4 .v4-certs__item::before {
	content: none;
	display: none;
}

/* ==========================================================================
   Behind Anatech: team cards in a horizontal row (drag / swipe to scroll).
   Hover or focus a card to slide up the divider + "View Profile / Linkedin"
   ========================================================================== */

body.home-v4 .v4-crew,
body.home-v4.v4-theme-ready main.v4 .v4-crew {
	overflow: clip;
	padding: 80px var(--v4-pad-x) 52px;
	background-color: #000000;
	color: #ffffff;
}

body.home-v4 .v4-crew__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

body.home-v4 .v4-crew .v4-crew__pill {
	color: #ffffff;
	background-color: #3e3e3e;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.home-v4 .v4-crew__title {
	max-width: 760px;
	margin: 0;
	font-family: var(--v4-font);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	color: #ffffff;
}

body.home-v4 .v4-crew__list {
	display: flex;
	gap: 42px;
	margin: 44px calc(var(--v4-pad-x) * -1) 0 0;
	padding: 0 var(--v4-pad-x) 0 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
}

body.home-v4 .v4-crew__list::-webkit-scrollbar {
	display: none;
}

body.home-v4 .v4-crew__list.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

body.home-v4 .v4-crew__card {
	position: relative;
	flex: 0 0 406px;
	overflow: hidden;
	box-sizing: border-box;
	height: 499px;
	margin: 0;
	padding: 0;
	border-radius: 12px;
	background-color: #000000;
	scroll-snap-align: start;
	outline: none;
}

body.home-v4 .v4-crew__card::before {
	content: none;
	display: none;
}

body.home-v4 .v4-crew__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* "Portrait Overlay": clear down to ~57%, then fades to black */
body.home-v4 .v4-crew__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 57%, rgba(0, 0, 0, 0.5) 79%, rgba(0, 0, 0, 0.95) 100%);
	pointer-events: none;
}

body.home-v4 .v4-crew__details {
	position: absolute;
	right: 20px;
	bottom: 22px;
	left: 20px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: var(--v4-font);
}

body.home-v4 .v4-crew__quote {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.33;
	color: #bdbdbd;
}

body.home-v4 .v4-crew__id {
	display: flex;
	flex-direction: column;
	margin: 0;
}

body.home-v4 .v4-crew__name {
	font-size: 20px;
	line-height: 1.33;
	color: #ffffff;
}

body.home-v4 .v4-crew__role {
	font-size: 16px;
	line-height: 1.33;
	color: #ffffff;
}

/* Hidden extra row: collapses to 0 height (and cancels the 10px gap) */
body.home-v4 .v4-crew__more {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: -10px;
	opacity: 0;
	transition: grid-template-rows 0.4s ease, margin-top 0.4s ease, opacity 0.3s ease;
}

body.home-v4 .v4-crew__more-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	overflow: hidden;
	min-height: 0;
	border-top: 1px solid #bdbdbd;
	font-size: 16px;
	line-height: 1.33;
	color: #ffffff;
}

body.home-v4 .v4-crew__view,
body.home-v4 .v4-crew__linkedin {
	padding-top: 10px;
}

body.home-v4 .v4-crew__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #ffffff;
	text-decoration: none;
}

body.home-v4 .v4-crew__linkedin svg {
	display: block;
	flex: 0 0 auto;
}

body.home-v4 .v4-crew__arrow {
	margin-left: 6px;
	transition: transform 0.25s ease;
}

body.home-v4 a.v4-crew__linkedin:hover .v4-crew__arrow,
body.home-v4 a.v4-crew__linkedin:focus-visible .v4-crew__arrow {
	transform: translate(2px, -2px);
}

body.home-v4 a.v4-crew__linkedin:focus-visible,
body.home-v4 .v4-crew__card:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

body.home-v4 .v4-crew__card:hover .v4-crew__more,
body.home-v4 .v4-crew__card:focus-within .v4-crew__more,
body.home-v4 .v4-crew__card:focus .v4-crew__more {
	grid-template-rows: 1fr;
	margin-top: 0;
	opacity: 1;
}

/* Touch screens have no hover: show the full card */
@media (hover: none) {
	body.home-v4 .v4-crew__more {
		grid-template-rows: 1fr;
		margin-top: 0;
		opacity: 1;
	}

	body.home-v4 .v4-crew__list {
		cursor: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-crew__more,
	body.home-v4 .v4-crew__arrow {
		transition: none;
	}
}

@media (max-width: 991px) {
	body.home-v4 .v4-crew,
	body.home-v4.v4-theme-ready main.v4 .v4-crew {
		padding: 56px var(--v4-pad-x) 48px;
	}

	body.home-v4 .v4-crew__list {
		gap: 24px;
		margin-top: 32px;
	}

	body.home-v4 .v4-crew__card {
		flex-basis: 340px;
		height: auto;
		aspect-ratio: 406 / 499;
	}
}

@media (max-width: 640px) {
	body.home-v4 .v4-crew__title {
		font-size: 26px;
	}

	body.home-v4 .v4-crew__list {
		gap: 16px;
	}

	body.home-v4 .v4-crew__card {
		flex-basis: 82vw;
		max-width: 340px;
	}

	body.home-v4 .v4-crew__details {
		right: 16px;
		bottom: 16px;
		left: 16px;
	}

	body.home-v4 .v4-crew__quote,
	body.home-v4 .v4-crew__role,
	body.home-v4 .v4-crew__more-inner {
		font-size: 14px;
	}

	body.home-v4 .v4-crew__name {
		font-size: 18px;
	}
}

/* ==========================================================================
   Theme layer for Certifications → Behind Anatech (only once the JS is
   running): when the black team section fills more than half the screen the
   shared page background fades to black, Certifications loses its own white
   background so it fades with the page, its text turns light and the badges
   sit on white cards so they stay readable.
   ========================================================================== */

body.home-v4.v4-theme-ready main.v4 .v4-certs {
	background-color: transparent;
}

body.home-v4.v4-theme-ready .v4-certs__title,
body.home-v4.v4-theme-ready .v4-certs__title strong,
body.home-v4.v4-theme-ready .v4-certs__title b,
body.home-v4.v4-theme-ready .v4-certs__intro,
body.home-v4.v4-theme-ready .v4-certs__item {
	transition: color 0.8s ease, background-color 0.8s ease;
}

body.home-v4.v4-theme-ready .v4-certs__item {
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0);
}

body.home-v4.v4-theme-ready.v4-theme-dark .v4-certs__title {
	color: #bdbdbd;
}

body.home-v4.v4-theme-ready.v4-theme-dark .v4-certs__title strong,
body.home-v4.v4-theme-ready.v4-theme-dark .v4-certs__title b {
	color: #ffffff;
}

body.home-v4.v4-theme-ready.v4-theme-dark .v4-certs__intro {
	color: #bdbdbd;
}

body.home-v4.v4-theme-ready.v4-theme-dark .v4-certs__item {
	background-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4.v4-theme-ready .v4-certs__title,
	body.home-v4.v4-theme-ready .v4-certs__title strong,
	body.home-v4.v4-theme-ready .v4-certs__title b,
	body.home-v4.v4-theme-ready .v4-certs__intro,
	body.home-v4.v4-theme-ready .v4-certs__item {
		transition: none;
	}
}

/* ==========================================================================
   FAQ: night-sky background, profile card on the left and the questions as
   chat bubbles. Clicking a question opens its answer just below it (the
   Anatech mark beside it) and closes whichever answer was open before.
   ========================================================================== */

body.home-v4 .v4-faq,
body.home-v4.v4-theme-ready main.v4 .v4-faq {
	position: relative;
	overflow: clip;
	isolation: isolate;
	padding: 80px var(--v4-pad-x) 52px;
	background-color: #000000;
	color: #ffffff;
}

body.home-v4 .v4-faq__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

/* "Background Overlay": black at the top and bottom, clear in the middle */
body.home-v4 .v4-faq::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, #000000 0%, rgba(9, 9, 9, 0) 42%, rgba(9, 9, 9, 0) 62%, #000000 100%);
	pointer-events: none;
}

body.home-v4 .v4-faq__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

body.home-v4 .v4-faq .v4-faq__pill {
	color: #ffffff;
	background-color: #3e3e3e;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.home-v4 .v4-faq__title {
	max-width: 760px;
	margin: 0;
	font-family: var(--v4-font);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	color: #ffffff;
}

body.home-v4 .v4-faq__body {
	display: grid;
	grid-template-columns: minmax(0, 364px) minmax(0, 1fr);
	gap: 103px;
	align-items: start;
	margin-top: 44px;
}

body.home-v4 .v4-faq__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, 0.36);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-family: var(--v4-font);
}

body.home-v4 .v4-faq__person {
	display: flex;
	align-items: flex-end;
	gap: 12px;
}

body.home-v4 .v4-faq__avatar {
	display: block;
	flex: 0 0 151px;
	width: 151px;
	height: 151px;
	border-radius: 12px;
	background-color: #000000;
	object-fit: cover;
}

body.home-v4 .v4-faq__who {
	display: flex;
	flex-direction: column;
	margin: 0;
}

body.home-v4 .v4-faq__name {
	font-size: 20px;
	line-height: 1.33;
	color: #ffffff;
}

body.home-v4 .v4-faq__role,
body.home-v4 .v4-faq__quote {
	font-size: 16px;
	line-height: 1.33;
	color: #ffffff;
}

body.home-v4 .v4-faq__quote {
	margin: 0;
}

body.home-v4 .v4-faq__btn {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 10px;
	min-height: 56px;
	padding: 0 24px;
	border: 1px solid #ffffff;
	border-radius: 28px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--v4-blue);
	background-color: #ffffff;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

body.home-v4 .v4-faq__btn:hover,
body.home-v4 .v4-faq__btn:focus-visible {
	color: #ffffff;
	background-color: transparent;
}

body.home-v4 .v4-faq__btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

body.home-v4 .v4-faq__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.home-v4 .v4-faq__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

body.home-v4 .v4-faq__item::before {
	content: none;
	display: none;
}

body.home-v4 .v4-faq__q-wrap {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

body.home-v4 .v4-faq__q {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: 12px 20px;
	border: 1px solid rgba(255, 255, 255, 0.36);
	border-radius: 12px;
	font-family: var(--v4-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.33;
	text-align: left;
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.03);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

body.home-v4 .v4-faq__q:hover,
body.home-v4 .v4-faq__q[aria-expanded="true"] {
	border-color: rgba(255, 255, 255, 0.7);
	background-color: rgba(255, 255, 255, 0.12);
}

body.home-v4 .v4-faq__q:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* Answer: collapsed to 0 height (once the JS runs); opening slides it down */
body.home-v4 .v4-faq.is-js .v4-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	transition: grid-template-rows 0.4s ease, opacity 0.3s ease, visibility 0s linear 0.4s;
}

body.home-v4 .v4-faq__a {
	display: grid;
}

body.home-v4 .v4-faq__a-inner {
	overflow: hidden;
	min-height: 0;
}

body.home-v4 .v4-faq.is-js .v4-faq__item.is-open .v4-faq__a {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition: grid-template-rows 0.4s ease, opacity 0.3s ease 0.05s, visibility 0s linear 0s;
}

body.home-v4 .v4-faq__a-row {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 25px;
	padding-top: 24px;
}

body.home-v4 .v4-faq__bubble {
	box-sizing: border-box;
	width: 405px;
	max-width: 100%;
	margin: 0;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 12px;
	font-family: var(--v4-font);
	font-size: 16px;
	line-height: 1.33;
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

body.home-v4 .v4-faq__mark {
	display: inline-flex;
	flex: 0 0 49px;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 49px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.36);
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

body.home-v4 .v4-faq__mark svg {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-faq.is-js .v4-faq__a,
	body.home-v4 .v4-faq.is-js .v4-faq__item.is-open .v4-faq__a,
	body.home-v4 .v4-faq__q,
	body.home-v4 .v4-faq__btn {
		transition: none;
	}
}

@media (max-width: 1199px) {
	body.home-v4 .v4-faq__body {
		grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
		gap: 48px;
	}
}

@media (max-width: 991px) {
	body.home-v4 .v4-faq,
	body.home-v4.v4-theme-ready main.v4 .v4-faq {
		padding: 56px var(--v4-pad-x) 48px;
	}

	body.home-v4 .v4-faq__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		margin-top: 32px;
	}

	body.home-v4 .v4-faq__card {
		max-width: 420px;
	}
}

@media (max-width: 640px) {
	body.home-v4 .v4-faq__title {
		font-size: 26px;
	}

	body.home-v4 .v4-faq__q {
		font-size: 17px;
	}

	body.home-v4 .v4-faq__a-row {
		gap: 12px;
		padding-top: 16px;
	}

	body.home-v4 .v4-faq__bubble {
		padding: 18px;
		font-size: 15px;
	}

	body.home-v4 .v4-faq__mark {
		flex-basis: 40px;
		width: 40px;
		height: 36px;
	}

	body.home-v4 .v4-faq__avatar {
		flex-basis: 110px;
		width: 110px;
		height: 110px;
	}
}

/* ==========================================================================
   Theme footer restyle (Home v4 only). Same footer markup and content as
   the rest of the site, restyled to match the Figma footer: black, full
   width, three link columns, three-column addresses, map and wordmark
   ========================================================================== */

body.home-v4 footer:has(.footer-top) {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 74px 0 18.6vw;
	background-color: #000000;
	color: #ffffff;
	font-family: var(--v4-font);
}

body.home-v4 footer:has(.footer-top) > .container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 var(--v4-pad-x);
}

body.home-v4 footer .footer-top {
	padding: 0 0 50px;
	border: 0;
}

body.home-v4 footer .footer-top > .row,
body.home-v4 footer .footer-middle > .row {
	margin: 0;
}

body.home-v4 footer .footer-top > .row > [class*="col-"],
body.home-v4 footer .footer-middle > .row > [class*="col-"] {
	padding: 0;
}

/* Logo + intro */
body.home-v4 footer .about-footer p {
	margin: 0;
}

body.home-v4 footer .about-footer img {
	display: block;
	width: 216px;
	max-width: 100%;
	height: auto;
}

body.home-v4 footer .about-footer p + p {
	max-width: 350px;
	margin-top: 26px;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #cccccc;
}

/* Link columns */
body.home-v4 footer .footer-link-block h5 {
	margin: 0 0 30px;
	font-family: var(--v4-font);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: #ffffff;
}

body.home-v4 footer .footer-link-block ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.home-v4 footer .footer-link-block .wsmenu-list li {
	margin: 0 0 12px;
	padding: 0;
}

body.home-v4 footer .footer-link-block a {
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.33;
	color: #ffffff;
	text-decoration: none;
	transition: color 0.2s ease;
}

body.home-v4 footer .footer-link-block a:hover,
body.home-v4 footer .footer-link-block a:focus-visible,
body.home-v4 footer .copyright a:hover,
body.home-v4 footer .copyright a:focus-visible {
	color: #bdbdbd;
}

body.home-v4 footer .footer-link-block.contact {
	width: auto;
	max-width: none;
	margin-left: 0;
	padding-left: 0;
}

body.home-v4 footer .footer-link-block ul.contact li {
	margin: 0 0 18px;
}

body.home-v4 footer .footer-link-block ul.contact a {
	padding-left: 38px;
}

body.home-v4 footer .footer-link-block ul.contact i {
	font-size: 20px;
	color: #ffffff;
}

/* Social circles: 38px, #3a3a3a */
body.home-v4 footer ul.social-contact {
	display: flex;
	gap: 12px;
	margin: 28px 0 0;
}

body.home-v4 footer ul.social-contact li {
	margin: 0;
}

body.home-v4 footer ul.social-contact a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	color: #ffffff;
	background-color: #3a3a3a;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.home-v4 footer ul.social-contact a:hover,
body.home-v4 footer ul.social-contact a:focus-visible {
	color: #000000;
	background-color: #ffffff;
}

body.home-v4 footer ul.social-contact a:hover i,
body.home-v4 footer ul.social-contact a:focus-visible i {
	color: inherit;
}

/* Addresses */
body.home-v4 footer .footer-middle {
	padding: 0 0 28px;
	border: 0;
}

body.home-v4 footer .address-block {
	padding-left: 38px;
	color: #9a9a9a;
}

body.home-v4 footer .address-block i {
	top: 0;
	left: 0;
	font-size: 22px;
	color: #9a9a9a;
}

body.home-v4 footer .address-block p {
	margin: 0 0 8px;
	font-family: var(--v4-font);
	font-size: 16px;
	line-height: 1.33;
	color: #9a9a9a;
}

body.home-v4 footer .address-block h5 {
	max-width: 345px;
	margin: 0;
	font-family: var(--v4-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.33;
	color: #ffffff;
}

body.home-v4 footer .address-block h5 strong {
	font-weight: 600;
}

/* Divider + copyright */
body.home-v4 footer .copyright {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	margin: 0;
	padding: 30px 0 0;
	border-top: 1px solid #3a3a3a;
}

body.home-v4 footer .copyright p {
	margin: 0;
	font-family: var(--v4-font);
	font-size: 15px;
	line-height: 1.33;
	color: #ffffff;
}

body.home-v4 footer .copyright ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.home-v4 footer .copyright li {
	margin: 0;
	padding: 0;
}

body.home-v4 footer .copyright a {
	font-family: var(--v4-font);
	font-size: 15px;
	line-height: 1.33;
	color: #ffffff;
	text-decoration: none;
	transition: color 0.2s ease;
}

body.home-v4 footer a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* Map (904 x 475 at 221px in the 1440 frame) and the wordmark, both on the bottom edge */
body.home-v4 footer .map-img {
	position: absolute;
	top: auto;
	right: auto;
	bottom: 0;
	left: 15.35%;
	z-index: 0;
	width: 62.8%;
	margin: 0;
	pointer-events: none;
}

body.home-v4 footer .map-img img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

body.home-v4 footer .anatech-img {
	position: absolute;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	margin: 0;
	line-height: 0;
	pointer-events: none;
}

body.home-v4 footer .anatech-img img {
	display: block;
	width: 99.8%;
	max-width: none;
	height: auto;
	margin: 0;
}

@media (min-width: 992px) {
	/* Columns at 60 / 590 / 833 / 1147 of the 1440 frame */
	body.home-v4 footer .footer-top > .row > [class*="col-"]:nth-child(1) {
		flex: 0 0 40.15%;
		max-width: 40.15%;
	}

	body.home-v4 footer .footer-top > .row > [class*="col-"]:nth-child(2) {
		flex: 0 0 42.2%;
		max-width: 42.2%;
	}

	body.home-v4 footer .footer-top > .row > [class*="col-"]:nth-child(3) {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
	}

	body.home-v4 footer .footer-top .d-flex.justify-content-between {
		justify-content: flex-start !important;
	}

	body.home-v4 footer .footer-top .d-flex > .footer-link-block:first-child {
		flex: 0 0 43.6%;
	}

	/* Addresses at 60 / 530 / 1000 */
	body.home-v4 footer .footer-middle > .row > [class*="col-"] {
		flex: 0 0 35.6%;
		max-width: 35.6%;
	}

	body.home-v4 footer .footer-middle > .row > [class*="col-"]:last-child {
		flex: 1 1 0;
		max-width: none;
	}
}

@media (max-width: 991px) {
	body.home-v4 footer:has(.footer-top) {
		padding-top: 56px;
	}

	body.home-v4 footer .footer-top > .row,
	body.home-v4 footer .footer-middle > .row {
		row-gap: 40px;
	}

	body.home-v4 footer .footer-middle > .row {
		row-gap: 24px;
	}

	body.home-v4 footer .map-img {
		left: 0;
		width: 100%;
	}
}

@media (max-width: 640px) {
	body.home-v4 footer .footer-top .d-flex.justify-content-between {
		flex-direction: column;
		gap: 32px;
	}

	body.home-v4 footer .footer-link-block h5 {
		margin-bottom: 18px;
	}

	body.home-v4 footer .copyright {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Theme layer for Behind Anatech, same as Services: the section has no
   background of its own once the JS is running, so the whole page fades
   white → black together (no hard edge under Certifications). Until the
   switch the heading and pill use the light-page colours.
   ========================================================================== */

body.home-v4.v4-theme-ready main.v4 .v4-crew {
	background-color: transparent;
}

body.home-v4.v4-theme-ready .v4-crew .v4-crew__pill,
body.home-v4.v4-theme-ready .v4-crew__title {
	transition: color 0.8s ease, background-color 0.8s ease;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-crew .v4-crew__pill {
	color: #555555;
	background-color: #f3f3f3;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-crew__title {
	color: #000000;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4.v4-theme-ready .v4-crew .v4-crew__pill,
	body.home-v4.v4-theme-ready .v4-crew__title {
		transition: none;
	}
}

/* Footer details from Figma: "Connect With Us" in title case, and the
   building icon for the secondary addresses (Font Awesome fa-building) */
body.home-v4 footer .footer-link-block.contact h5 {
	text-transform: capitalize;
}

body.home-v4 footer .footer-middle .row > [class*="col-"]:nth-child(n+2) .address-block i::before {
	content: "\f1ad";
}

body.home-v4 footer .footer-link-block ul.contact a {
	display: inline-block;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Header + hero fixes from Figma (Hero 76 / Nav List)
   - Header: 88px tall (20px top/bottom), right group = "Become a Client"
     183×48 + 48px round menu button, 20px apart.
   - The header slides away once the hero has scrolled past; it is shown
     only while the hero is on screen.
   - Hero text block: 63px from the left, 30px above the logo strip.
   - Logo: hover animation from the Figma prototype (the orange bar turns
     into a cursor that wipes the wordmark away and back).
   ========================================================================== */

body.home-v4 header .navigation-main .right-btn {
	gap: 20px;
}

body.home-v4 header .navigation-main .right-btn > .menu-btn.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	min-width: 48px;
	margin: 0;
	padding: 12px;
	border: 0;
	border-radius: 50%;
	background-color: #828282;
}

/* Same glass as Figma while scrolling through the hero (no dark bar) */
body.home-v4.v4-scrolled header {
	background-color: rgba(166, 166, 166, 0.05);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: none;
}

body.home-v4 header {
	transition: background-color 0.35s ease, -webkit-backdrop-filter 0.35s ease, backdrop-filter 0.35s ease;
}

/* Past the hero only "Become a Client" + the menu button stay (top right);
   the logo, the links and the glass bar fade away */
body.home-v4.v4-past-hero header {
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	pointer-events: none;
}

body.home-v4.v4-past-hero header .right-btn {
	pointer-events: auto;
}

body.home-v4 header .logo,
body.home-v4 header .navigation-main .wsmenu {
	transition: opacity 0.35s ease, visibility 0s linear 0s;
}

body.home-v4.v4-past-hero header .logo {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

@media (min-width: 992px) {
	body.home-v4.v4-past-hero header .navigation-main .wsmenu {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.35s ease, visibility 0s linear 0.35s;
	}
}

@media (min-width: 992px) {
	body.home-v4 .v4-hero__content {
		padding: 0 var(--v4-pad-x) 30px 63px;
	}
}

/* Logo animation (inline SVG injected by homepage-v4.js) */
body.home-v4 header .logo a.v4-logo-svg {
	background: none;
}

body.home-v4 header .logo a.v4-logo-svg svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

body.home-v4 header .v4-logo__cursor {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

body.home-v4 header .logo a.is-animating .v4-logo__mark {
	animation: v4-logo-mark 3.2s ease both;
}

body.home-v4 header .logo a.is-animating .v4-logo__bar {
	animation: v4-logo-bar 3.2s ease both;
}

body.home-v4 header .logo a.is-animating .v4-logo__cursor {
	animation: v4-logo-cursor 3.2s linear both;
}

body.home-v4 header .logo a.is-animating .v4-logo__word {
	animation: v4-logo-word 3.2s linear both;
}

@keyframes v4-logo-mark {
	0% { opacity: 1; }
	10% { opacity: 0.25; }
	18%, 84% { opacity: 0; }
	92% { opacity: 0.25; }
	100% { opacity: 1; }
}

@keyframes v4-logo-bar {
	0% { opacity: 1; }
	8%, 92% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes v4-logo-cursor {
	0% { opacity: 0; transform: translateX(-33px) rotate(28deg) scaleY(0.55); }
	8% { opacity: 1; transform: translateX(-33px) rotate(28deg) scaleY(0.55); }
	18%, 22% { opacity: 1; transform: translateX(0) rotate(0deg) scaleY(1); }
	50%, 54% { opacity: 1; transform: translateX(112px) rotate(0deg) scaleY(1); }
	80%, 84% { opacity: 1; transform: translateX(0) rotate(0deg) scaleY(1); }
	92% { opacity: 1; transform: translateX(-33px) rotate(28deg) scaleY(0.55); }
	100% { opacity: 0; transform: translateX(-33px) rotate(28deg) scaleY(0.55); }
}

@keyframes v4-logo-word {
	0%, 22% { clip-path: inset(0 0 0 0); }
	50%, 54% { clip-path: inset(0 0 0 100%); }
	80%, 100% { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 header,
	body.home-v4.v4-past-hero header {
		transition: none;
	}

	body.home-v4 header .logo a.is-animating .v4-logo__mark,
	body.home-v4 header .logo a.is-animating .v4-logo__bar,
	body.home-v4 header .logo a.is-animating .v4-logo__cursor,
	body.home-v4 header .logo a.is-animating .v4-logo__word {
		animation: none;
	}
}

@media (max-width: 767px) {
	body.home-v4 header .navigation-main .right-btn {
		gap: 12px;
	}

	body.home-v4 header .navigation-main .right-btn > .menu-btn.btn {
		width: 40px;
		height: 40px;
		min-width: 40px;
		padding: 10px;
	}
}

/* About Us pin (homepage-v4.js wraps the intro in .v4-about__pin and sets
   its height + the intro's sticky top) */
body.home-v4 .v4-about__pin.is-pinned > .v4-about__intro {
	position: sticky;
	z-index: 1;
}

/* ==========================================================================
   Our Impact in Numbers — calm entrance (only with JS, see homepage-v4.js):
   the title and cards fade up one after another, the numbers count up with a
   soft ease-out, the 3D art settles in and then breathes slowly. Cards lift a
   little on hover. Reduced motion: everything is simply shown.
   ========================================================================== */

body.home-v4 .v4-impact.v4-anim .v4-impact__title,
body.home-v4 .v4-impact.v4-anim .v4-impact__card {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
	transition-delay: calc(var(--v4-i, 0) * 0.12s);
}

body.home-v4 .v4-impact.v4-anim .v4-impact__art {
	opacity: 0;
	transform: scale(0.82) rotate(-4deg);
	transform-origin: 100% 100%;
	transition: opacity 1.1s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--v4-i, 0) * 0.12s + 0.25s);
}

body.home-v4 .v4-impact.v4-anim.is-in .v4-impact__title,
body.home-v4 .v4-impact.v4-anim.is-in .v4-impact__card {
	opacity: 1;
	transform: none;
}

body.home-v4 .v4-impact.v4-anim.is-in .v4-impact__art {
	opacity: 1;
	transform: none;
}

/* After the entrance: a slow "breathing" float on the art */
body.home-v4 .v4-impact.v4-anim.is-settled .v4-impact__art {
	animation: v4-impact-breathe 7s ease-in-out infinite;
	animation-delay: calc(var(--v4-i, 0) * -1.6s);
}

@keyframes v4-impact-breathe {
	0%, 100% { transform: scale(1) rotate(0deg); }
	50% { transform: scale(1.045) rotate(-1.5deg); }
}

body.home-v4 .v4-impact__num {
	font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
	body.home-v4 .v4-impact.v4-anim.is-settled .v4-impact__card {
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
		transition-delay: 0s;
	}

	body.home-v4 .v4-impact.v4-anim.is-settled .v4-impact__card:hover {
		transform: translateY(-6px);
		box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.25);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-impact.v4-anim .v4-impact__title,
	body.home-v4 .v4-impact.v4-anim .v4-impact__card,
	body.home-v4 .v4-impact.v4-anim .v4-impact__art {
		opacity: 1;
		transform: none;
		transition: none;
		animation: none;
	}
}

/* Service tags hover, as in the Figma prototype: the pill fills blue
   (border too), the text turns white and the ↗ arrow turns to → */
body.home-v4 a.v4-tag:hover,
body.home-v4 a.v4-tag:focus-visible,
body.home-v4.v4-theme-ready a.v4-tag:hover,
body.home-v4.v4-theme-ready a.v4-tag:focus-visible,
body.home-v4.v4-theme-ready:not(.v4-theme-dark) a.v4-tag:hover,
body.home-v4.v4-theme-ready:not(.v4-theme-dark) a.v4-tag:focus-visible {
	color: #ffffff;
	border-color: var(--v4-blue);
	background-color: var(--v4-blue);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

body.home-v4 .v4-tag__icon {
	transform-origin: 50% 50%;
	transition: transform 0.3s ease;
}

body.home-v4 a.v4-tag:hover .v4-tag__icon,
body.home-v4 a.v4-tag:focus-visible .v4-tag__icon {
	transform: rotate(45deg);
}

/* Phone screen: the page header (SynapseBN bar, the top 142px of the 786px
   wide screenshot) stays fixed at the top of the screen while the rest of
   the page auto-scrolls underneath — slowly down, a short pause, a quick
   return to the top, pause. The bar is a copy of the top of the first
   screenshot added by homepage-v4.js. */
body.home-v4 .v4-dev2__screen-bar {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1;
	height: calc(100cqw * 142 / 786);
	overflow: hidden;
	background-color: #ffffff;
	pointer-events: none;
}

body.home-v4 .v4-dev2__screen-bar img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
}

body.home-v4 .v4-dev2__screen-page {
	animation: v4-dev2-screen 36s linear infinite;
}

body.home-v4 .v4-dev2.is-offscreen .v4-dev2__screen-page {
	animation-play-state: paused;
}

@keyframes v4-dev2-screen {
	0%,
	5% {
		transform: translate3d(0, 0, 0);
		animation-timing-function: ease-in-out;
	}

	85%,
	90% {
		transform: translate3d(0, calc(-100% + 100cqh), 0);
		animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	}

	93.5%,
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-dev2__screen-page {
		animation: none;
		transform: none;
	}
}

/* End of the project collage: a soft fade over the bottom edge (hand +
   phone + cards) into the page background — black while the page is
   dark, white once it has turned white (follows the scroll theme). */
body.home-v4 .v4-dev2::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	height: min(22cqw, 320px);
	background-color: #000000;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000000 85%);
	mask-image: linear-gradient(180deg, transparent 0%, #000000 85%);
	pointer-events: none;
}

body.home-v4.v4-theme-ready .v4-dev2::after {
	transition: background-color 0.8s ease;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-dev2::after {
	background-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4.v4-theme-ready .v4-dev2::after {
		transition: none;
	}
}

/* Testimonials 5s timer: a blue line runs round the sliding box; when it
   closes the next client is shown (homepage-v4.js) */
body.home-v4 .v4-tm__progress {
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	overflow: visible;
	pointer-events: none;
}

body.home-v4 .v4-tm__progress rect {
	fill: none;
	stroke: var(--v4-blue);
	stroke-width: 1.5;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	vector-effect: non-scaling-stroke;
}

body.home-v4 .v4-tm.is-running .v4-tm__progress rect.is-anim {
	animation: v4-tm-progress 5s linear forwards;
}

body.home-v4 .v4-tm.is-paused .v4-tm__progress rect.is-anim {
	animation-play-state: paused;
}

@keyframes v4-tm-progress {
	to {
		stroke-dashoffset: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-tm__progress {
		display: none;
	}
}


/* ==========================================================================
   Certifications: badges keep their own shape. No white box behind them in
   either theme (the badge artwork carries its own fills).
   ========================================================================== */

body.home-v4 .v4-certs__item,
body.home-v4.v4-theme-ready .v4-certs__item,
body.home-v4.v4-theme-ready.v4-theme-dark .v4-certs__item {
	background: none;
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

/* ==========================================================================
   Behind Anatech: photo zooms in on hover; View Profile + Linkedin are links;
   the row moves on its own (assets/homepage-v4.js), so no snap fighting it.
   ========================================================================== */

body.home-v4 .v4-crew__list {
	scroll-snap-type: none;
}

body.home-v4 .v4-crew__photo {
	transform: scale(1);
	transform-origin: 50% 35%;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

body.home-v4 .v4-crew__card:hover .v4-crew__photo,
body.home-v4 .v4-crew__card:focus-within .v4-crew__photo {
	transform: scale(1.08);
}

body.home-v4 a.v4-crew__view {
	color: #ffffff;
	text-decoration: none;
	transition: color 0.25s ease;
}

body.home-v4 a.v4-crew__view:hover,
body.home-v4 a.v4-crew__view:focus-visible,
body.home-v4 a.v4-crew__linkedin:hover {
	color: #bdbdbd;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.home-v4 a.v4-crew__view:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-crew__photo {
		transition: none;
	}
}

/* ==========================================================================
   Laptop + phone screens: the page starts moving sooner and quicker, then
   eases off towards the bottom (was a slow ease-in start).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	body.home-v4 .v4-dev__page {
		animation-name: v4-dev-screen-fast;
	}

	body.home-v4 .v4-dev2__screen-page {
		animation-name: v4-dev2-screen-fast;
	}
}

@keyframes v4-dev-screen-fast {
	0%,
	3% {
		transform: translate3d(0, 0, 0);
		animation-timing-function: cubic-bezier(0.3, 0.6, 0.45, 1);
	}

	83%,
	88% {
		transform: translate3d(0, calc(-100% + 100cqh), 0);
		animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	}

	92%,
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes v4-dev2-screen-fast {
	0%,
	3% {
		transform: translate3d(0, 0, 0);
		animation-timing-function: cubic-bezier(0.3, 0.6, 0.45, 1);
	}

	85%,
	90% {
		transform: translate3d(0, calc(-100% + 100cqh), 0);
		animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	}

	93.5%,
	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* ==========================================================================
   Full-screen menu (same as live): a backdrop-filter on <header> makes it the
   containing block of the fixed menu, which squashed the menu into the 88px
   bar. The glass now sits on header::before instead, so the menu (nav.wsfmain)
   covers the whole screen again, at every scroll position.
   ========================================================================== */

body.home-v4 header,
body.home-v4.v4-scrolled header,
body.home-v4.v4-past-hero header {
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

body.home-v4 header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(166, 166, 166, 0.05);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	pointer-events: none;
	transition: opacity 0.35s ease;
}

body.home-v4.v4-past-hero header::before {
	opacity: 0;
}

@media (max-width: 991px) {
	body.home-v4 header::before {
		background-color: rgba(14, 14, 16, 0.55);
	}
}

/* Past the hero the header lets clicks through; the open menu must not */
body.home-v4.wsfopen header nav.wsfmain,
body.home-v4 header .offcanvas.show,
body.home-v4 header .offcanvas.showing {
	pointer-events: auto;
}

/* Menu button: the theme gives the middle line a 14px top margin, which pushed
   the three lines below the centre of the 48px circle. Centre them. */
body.home-v4 header .navigation-main .right-btn > .menu-btn.btn > span {
	margin: 0;
}

/* About Us lead: the whole sentence in solid black once revealed (it was
   grey #646464 with only the first words black); white in the dark phase. */
body.home-v4 .v4-about__lead {
	color: #000000;
}

body.home-v4.v4-theme-ready.v4-theme-dark .v4-about__lead {
	color: #ffffff;
}

/* Testimonials + CTA: no white block of their own once the theme fade is on,
   so the page colour fades as one surface (no hard line into Certifications). */
body.home-v4.v4-theme-ready main.v4 .v4-tm,
body.home-v4.v4-theme-ready main.v4 .v4-cta {
	background-color: transparent;
}

/* Services card title: the link inside the title had the theme's own colour
   transition stacked on top of the title's, so it lagged behind and stayed
   dark on the black background. It now follows the title colour directly. */
body.home-v4 .v4-service__title a,
body.home-v4 .v4-service__title a:visited {
	color: inherit;
	transition: none;
}

/* Behind Anatech: the card row starts at the left edge of the screen (no left
   padding); the heading above keeps its usual left padding. */
body.home-v4 .v4-crew__list {
	margin-left: calc(var(--v4-pad-x) * -1);
	padding-left: 0;
	scroll-padding-left: 0;
}

/* Footer secondary addresses: the building icon drawn to match Figma (tall
   block with six windows and a door, small block with three windows),
   replacing the Font Awesome glyph. Grey via currentColor. */
body.home-v4 footer .footer-middle .row > [class*="col-"]:nth-child(n+2) .address-block i {
	display: inline-block;
	width: 23px;
	height: 22px;
	vertical-align: top;
}

body.home-v4 footer .footer-middle .row > [class*="col-"]:nth-child(n+2) .address-block i::before {
	content: "";
	display: block;
	width: 23px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 43'%3E%3Cpath fill-rule='evenodd' d='M2 0H31V3.5H29V42.5H0V39H3.5V3.5H2ZM32 10H43V13.5H41.5V39H45V42.5H32ZM10.7 8.5h3.1a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1 -1.2 1.2h-3.1a1.2 1.2 0 0 1 -1.2 -1.2v-1.6a1.2 1.2 0 0 1 1.2 -1.2zM10.7 14.5h3.1a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1 -1.2 1.2h-3.1a1.2 1.2 0 0 1 -1.2 -1.2v-1.6a1.2 1.2 0 0 1 1.2 -1.2zM10.7 21h3.1a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1 -1.2 1.2h-3.1a1.2 1.2 0 0 1 -1.2 -1.2v-1.6a1.2 1.2 0 0 1 1.2 -1.2zM18.7 8.5h3.1a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1 -1.2 1.2h-3.1a1.2 1.2 0 0 1 -1.2 -1.2v-1.6a1.2 1.2 0 0 1 1.2 -1.2zM18.7 14.5h3.1a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1 -1.2 1.2h-3.1a1.2 1.2 0 0 1 -1.2 -1.2v-1.6a1.2 1.2 0 0 1 1.2 -1.2zM18.7 21h3.1a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1 -1.2 1.2h-3.1a1.2 1.2 0 0 1 -1.2 -1.2v-1.6a1.2 1.2 0 0 1 1.2 -1.2zM11 39V32.5a1.5 1.5 0 0 1 1.5-1.5h7a1.5 1.5 0 0 1 1.5 1.5V39ZM36.6 18h0.8a1.4 1.4 0 0 1 1.4 1.4v1.2a1.4 1.4 0 0 1 -1.4 1.4h-0.8a1.4 1.4 0 0 1 -1.4 -1.4v-1.2a1.4 1.4 0 0 1 1.4 -1.4zM36.6 24.5h0.8a1.4 1.4 0 0 1 1.4 1.4v1.2a1.4 1.4 0 0 1 -1.4 1.4h-0.8a1.4 1.4 0 0 1 -1.4 -1.4v-1.2a1.4 1.4 0 0 1 1.4 -1.4zM36.6 31h0.8a1.4 1.4 0 0 1 1.4 1.4v1.2a1.4 1.4 0 0 1 -1.4 1.4h-0.8a1.4 1.4 0 0 1 -1.4 -1.4v-1.2a1.4 1.4 0 0 1 1.4 -1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45 43'%3E%3Cpath fill-rule='evenodd' d='M2 0H31V3.5H29V42.5H0V39H3.5V3.5H2ZM32 10H43V13.5H41.5V39H45V42.5H32ZM10.7 8.5h3.1a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1 -1.2 1.2h-3.1a1.2 1.2 0 0 1 -1.2 -1.2v-1.6a1.2 1.2 0 0 1 1.2 -1.2zM10.7 14.5h3.1a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1 -1.2 1.2h-3.1a1.2 1.2 0 0 1 -1.2 -1.2v-1.6a1.2 1.2 0 0 1 1.2 -1.2zM10.7 21h3.1a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1 -1.2 1.2h-3.1a1.2 1.2 0 0 1 -1.2 -1.2v-1.6a1.2 1.2 0 0 1 1.2 -1.2zM18.7 8.5h3.1a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1 -1.2 1.2h-3.1a1.2 1.2 0 0 1 -1.2 -1.2v-1.6a1.2 1.2 0 0 1 1.2 -1.2zM18.7 14.5h3.1a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1 -1.2 1.2h-3.1a1.2 1.2 0 0 1 -1.2 -1.2v-1.6a1.2 1.2 0 0 1 1.2 -1.2zM18.7 21h3.1a1.2 1.2 0 0 1 1.2 1.2v1.6a1.2 1.2 0 0 1 -1.2 1.2h-3.1a1.2 1.2 0 0 1 -1.2 -1.2v-1.6a1.2 1.2 0 0 1 1.2 -1.2zM11 39V32.5a1.5 1.5 0 0 1 1.5-1.5h7a1.5 1.5 0 0 1 1.5 1.5V39ZM36.6 18h0.8a1.4 1.4 0 0 1 1.4 1.4v1.2a1.4 1.4 0 0 1 -1.4 1.4h-0.8a1.4 1.4 0 0 1 -1.4 -1.4v-1.2a1.4 1.4 0 0 1 1.4 -1.4zM36.6 24.5h0.8a1.4 1.4 0 0 1 1.4 1.4v1.2a1.4 1.4 0 0 1 -1.4 1.4h-0.8a1.4 1.4 0 0 1 -1.4 -1.4v-1.2a1.4 1.4 0 0 1 1.4 -1.4zM36.6 31h0.8a1.4 1.4 0 0 1 1.4 1.4v1.2a1.4 1.4 0 0 1 -1.4 1.4h-0.8a1.4 1.4 0 0 1 -1.4 -1.4v-1.2a1.4 1.4 0 0 1 1.4 -1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   MOBILE (Figma "Home Page" mobile frame, 390 wide): layout + animations.
   Everything below only applies up to 767px.
   ========================================================================== */

@media (max-width: 767px) {
	body.home-v4 {
		--v4-pad-x: 20px;
	}

	/* Header: logo left, white "≡ Menu" pill right */
	body.home-v4 header .navigation-main .right-btn > .menu-btn.btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		width: auto;
		min-width: 0;
		height: 36px;
		padding: 0 14px 0 12px;
		border-radius: 999px;
		background-color: #ffffff;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
	}

	body.home-v4 header .navigation-main .right-btn > .menu-btn.btn > span {
		position: relative;
		display: block;
		flex: 0 0 18px;
		width: 18px;
		height: 2px;
		margin: 0;
		border-radius: 2px;
		background-color: #1145bb;
	}

	body.home-v4 header .navigation-main .right-btn > .menu-btn.btn > span::before,
	body.home-v4 header .navigation-main .right-btn > .menu-btn.btn > span::after {
		height: 2px;
		border-radius: 2px;
		background-color: #1145bb;
	}

	body.home-v4 header .navigation-main .right-btn > .menu-btn.btn > span::before {
		top: -6px;
		left: 6px;
		width: 12px;
	}

	body.home-v4 header .navigation-main .right-btn > .menu-btn.btn > span::after {
		top: 6px;
		left: 0;
		width: 12px;
	}

	body.home-v4 header .navigation-main .right-btn > .menu-btn.btn > .text {
		display: block;
		position: static;
		margin: 0;
		font-family: var(--v4-font);
		font-size: 14px;
		line-height: 1;
		color: #1145bb;
	}

	/* Section headings: one size, like the mobile frame */
	body.home-v4 .v4-services__title,
	body.home-v4 .v4-cases__title,
	body.home-v4 .v4-tm__title,
	body.home-v4 .v4-certs__title,
	body.home-v4 .v4-crew__title,
	body.home-v4 .v4-faq__title,
	body.home-v4 .v4-cta__title {
		font-size: 20px;
		line-height: 1.15;
	}

	body.home-v4 .v4-about__lead {
		font-size: 20px;
		line-height: 1.2;
	}

	/* Impact: 2 x 2 small cards, picture tucked in the corner */
	body.home-v4 .v4-impact__title,
	body.home-v4 .v4-clients__label {
		font-size: 16px;
	}

	body.home-v4 .v4-impact__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	body.home-v4 .v4-impact__card {
		min-height: 122px;
		padding: 10px;
		border-radius: 12px;
		gap: 2px;
	}

	body.home-v4 .v4-impact__num {
		font-size: 28px;
	}

	body.home-v4 .v4-impact__text {
		max-width: 72%;
		font-size: 12.5px;
		line-height: 1.45;
		color: #000000;
	}

	body.home-v4 .v4-impact__art {
		width: 56px !important;
	}

	/* Clients: a still 2-column grid of logo tiles ("Trusted by Anatech") */
	body.home-v4 .v4-clients {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	body.home-v4 .v4-clients__row,
	body.home-v4 .v4-clients__viewport,
	body.home-v4 .v4-clients__track,
	body.home-v4 .v4-clients__set {
		display: contents;
	}

	body.home-v4 .v4-clients__set[aria-hidden="true"],
	body.home-v4 .v4-clients__row--ltr .v4-clients__label {
		display: none;
	}

	body.home-v4 .v4-clients__label {
		grid-column: 1 / -1;
		margin: 0;
	}

	body.home-v4 .v4-clients__logo {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80px;
		padding: 10px;
		border-radius: 10px;
		background-color: #f3f3f3;
		list-style: none;
		transition: opacity 0.5s ease, transform 0.5s ease;
	}

	/* Hidden only once the script is ready to reveal them (never stuck blank) */
	body.home-v4 .v4-clients.is-armed:not(.is-in) .v4-clients__logo {
		opacity: 0;
		transform: translateY(12px);
	}

	body.home-v4 .v4-clients__logo::before {
		content: none;
	}

	body.home-v4 .v4-clients.is-in .v4-clients__logo {
		opacity: 1;
		transform: none;
	}

	body.home-v4 .v4-clients__logo img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 46px;
		object-fit: contain;
	}

	/* Services: the service names stay pinned at the top while the cards
	   scroll under them (active one marked), like the mobile prototype */
	body.home-v4 .v4-services__intro {
		font-size: 14px;
	}

	body.home-v4 .v4-services__body {
		margin-top: 16px;
	}

	body.home-v4 .v4-services__nav {
		display: block;
		position: sticky;
		top: 52px;
		z-index: 6;
		margin: 0 calc(var(--v4-pad-x) * -1) 28px;
		padding: 6px var(--v4-pad-x) 0;
		background-color: #000000;
		transition: background-color 0.8s ease;
	}

	body.home-v4 .v4-services__nav::after {
		content: "";
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		height: 28px;
		background: linear-gradient(180deg, #000000, rgba(0, 0, 0, 0));
		pointer-events: none;
	}

	body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-services__nav {
		background-color: #ffffff;
	}

	body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-services__nav::after {
		background: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0));
	}

	body.home-v4 .v4-services__link {
		padding: 10px 0 10px 12px;
		font-size: 16px;
	}

	body.home-v4 .v4-services__link::before {
		top: 8px;
		bottom: 8px;
	}

	body.home-v4 .v4-service {
		scroll-margin-top: 260px;
	}

	body.home-v4 .v4-service__title {
		font-size: 20px;
	}

	body.home-v4 .v4-service__text {
		font-size: 14px;
	}

	/* Development: centred copy and button */
	body.home-v4 .v4-dev__foot {
		align-items: center;
		text-align: center;
	}

	body.home-v4 .v4-dev__text {
		margin-right: auto;
		margin-left: auto;
		font-size: 14px;
	}

	body.home-v4 .v4-dev__btn {
		align-self: center;
		margin-right: auto;
		margin-left: auto;
	}

	/* Case studies: two square cards with the title only */
	body.home-v4 .v4-cases__grid > li:nth-child(n+3) {
		display: none;
	}

	body.home-v4 .v4-case {
		aspect-ratio: 1 / 1;
		min-height: 0;
		height: auto;
	}

	body.home-v4 .v4-case__text {
		display: none;
	}

	body.home-v4 .v4-case__title {
		font-size: 16px;
	}

	/* Giving Back: logo, children on top, blue panel underneath */
	body.home-v4 .v4-cta__glass {
		flex-direction: column-reverse;
		padding-top: 52px;
	}

	body.home-v4 .v4-cta__logo {
		display: block;
		top: 34px;
		right: auto;
		left: 50%;
		width: 112px;
		transform: translateX(-50%);
	}

	body.home-v4 .v4-cta__image {
		width: 86%;
		margin: 8px auto -2px;
	}

	body.home-v4 .v4-cta__text {
		font-size: 14px;
	}

	/* Testimonials: photo next to the name, smaller logo tabs */
	body.home-v4 .v4-tm__person {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}

	body.home-v4 .v4-tm__avatar {
		flex: 0 0 60px;
		width: 60px;
		height: 60px;
		border-radius: 8px;
	}

	body.home-v4 .v4-tm__quote p {
		font-size: 15px;
		line-height: 1.4;
	}

	body.home-v4 .v4-tm__name {
		font-size: 20px;
	}

	/* Certifications: one row of badges that slides along on its own */
	body.home-v4 .v4-certs__list {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 20px;
		width: max-content;
		margin-right: 0;
		animation: v4-certs-slide 22s linear infinite;
	}

	body.home-v4 .v4-certs {
		overflow: hidden;
	}

	body.home-v4 .v4-certs__item,
	body.home-v4.v4-theme-ready .v4-certs__item {
		flex: 0 0 96px;
		width: 96px;
		max-width: none;
	}

	body.home-v4 .v4-certs__item img,
	body.home-v4.v4-theme-ready .v4-certs__item img {
		width: 96px;
		height: auto;
	}

	/* Team: one full-width card at a time, details always shown */
	body.home-v4 .v4-crew__list {
		margin-left: calc(var(--v4-pad-x) * -1);
		margin-right: calc(var(--v4-pad-x) * -1);
		padding: 0 var(--v4-pad-x);
		gap: var(--v4-pad-x);
		scroll-padding-left: var(--v4-pad-x);
	}

	body.home-v4 .v4-crew__card {
		flex: 0 0 calc(100vw - var(--v4-pad-x) * 2);
		max-width: none;
	}

	/* FAQ: questions first, Subhash's card after them */
	body.home-v4 .v4-faq__body {
		display: flex;
		flex-direction: column;
	}

	body.home-v4 .v4-faq__list {
		order: 1;
	}

	body.home-v4 .v4-faq__card {
		order: 2;
		margin-top: 24px;
	}

	body.home-v4 .v4-faq__q {
		font-size: 15px;
	}

	/* Footer: centred logo, Services and About Us side by side */
	body.home-v4 footer .about-footer {
		text-align: center;
	}

	body.home-v4 footer .about-footer img {
		margin-right: auto;
		margin-left: auto;
	}

	body.home-v4 footer .footer-top .d-flex.justify-content-between {
		flex-direction: row !important;
		gap: 16px;
	}

	body.home-v4 footer .footer-top .d-flex.justify-content-between > .footer-link-block:first-child {
		order: 2;
	}
}

@keyframes v4-certs-slide {
	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-certs__list {
		animation: none;
	}

	body.home-v4 .v4-clients__logo {
		opacity: 1;
		transform: none;
	}
}

/* The theme sets overflow-x:hidden on <body>, which turns it into a scroll
   box and stops "position: sticky" (About Us pin, mobile Services menu).
   clip hides the sideways overflow the same way without that side effect.
   (Not while the full-screen menu is open, so its scroll lock still works.) */
body.home-v4:not(.wsfopen) {
	overflow-x: clip !important;
	overflow-y: visible !important;
}

@media (max-width: 767px) {
	body.home-v4 .v4-services__nav {
		top: 60px;
	}

	body.home-v4 .v4-clients__logo img {
		width: 100%;
		max-width: 150px;
		max-height: 56px;
	}

	body.home-v4 .v4-tm__logo {
		min-height: 48px;
		padding: 8px 16px;
		border-radius: 8px;
	}

	body.home-v4 .v4-tm__logo img {
		max-height: 30px;
		width: auto;
	}

	body.home-v4 .v4-crew__more {
		grid-template-rows: 1fr;
		margin-top: 0;
		opacity: 1;
	}

	body.home-v4 .v4-faq__q {
		width: 100%;
		font-size: 15px;
	}

	body.home-v4 footer .footer-top .d-flex.justify-content-between > .footer-link-block {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
	}
}

/* Mobile services list: sits below the Menu pill, solid band behind the header once it sticks */
@media (max-width: 767px) {
	body.home-v4 .v4-services__nav {
		top: 64px;
	}

	body.home-v4.admin-bar .v4-services__nav {
		top: 110px;
	}

	body.home-v4 .v4-services__nav::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 130px;
		background-color: #000000;
		opacity: 0;
		pointer-events: none;
		transition: background-color 0.8s ease;
	}

	body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-services__nav::before {
		background-color: #ffffff;
	}

	body.home-v4 .v4-services__nav.is-stuck::before {
		opacity: 1;
	}

	body.home-v4 .v4-services__link {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	body.home-v4 .v4-service {
		scroll-margin-top: 290px;
	}

	body.home-v4.admin-bar .v4-service {
		scroll-margin-top: 336px;
	}
}

/* Mobile polish to match the prototype: blur under the pinned services list,
   no certs intro, footer link columns and bottom row */
@media (max-width: 767px) {
	body.home-v4 .v4-services__nav::after {
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
	}

	body.home-v4 .v4-certs__intro {
		display: none;
	}

	body.home-v4 footer .footer-top .d-flex.justify-content-between > .footer-link-block {
		flex: 0 0 auto;
	}

	body.home-v4 footer .footer-top .d-flex.justify-content-between > .footer-link-block:last-child {
		flex: 1 1 auto;
	}

	body.home-v4 footer a[href^="mailto:"] {
		font-size: 14px;
	}

	body.home-v4 footer .copyright {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	body.home-v4 footer .copyright p {
		width: 100%;
		margin: 0;
		text-align: center;
	}

	body.home-v4 footer .copyright .wsmenu-list {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		margin: 12px 0 0;
		padding: 0;
	}

	body.home-v4 footer .copyright .wsmenu-list li {
		margin: 0;
		white-space: nowrap;
	}

	body.home-v4 footer .copyright .wsmenu-list a {
		font-size: 13px;
	}
}

/* Mobile Development collage: bigger hand + phone, side screenshots larger
   and running off the screen edges */
@media (max-width: 767px) {
	body.home-v4 .v4-dev2__col--left,
	body.home-v4 .v4-dev2__col--right {
		width: 44cqw;
		gap: 4cqw;
	}

	body.home-v4 .v4-dev2__col--left {
		margin-left: -6cqw;
	}

	body.home-v4 .v4-dev2__col--right {
		margin-right: -6cqw;
	}

	body.home-v4 .v4-dev2__phone-track {
		left: 32cqw;
		width: 56cqw;
	}
}

/* Mobile Development collage, sized to the reference: big hand + phone
   (screen ~40% of the width, hand running off the right edge), sitting a
   third of the way down the screen; screenshot columns cut by both edges */
@media (max-width: 767px) {
	body.home-v4 .v4-dev2__col--left,
	body.home-v4 .v4-dev2__col--right {
		width: 48cqw;
		gap: 5cqw;
	}

	body.home-v4 .v4-dev2__col--left {
		margin-left: -5cqw;
	}

	body.home-v4 .v4-dev2__col--right {
		margin-right: -6cqw;
	}

	body.home-v4 .v4-dev2__phone-track {
		left: 19.5cqw;
		width: 97cqw;
	}

	body.home-v4 .v4-dev2__device {
		top: max(var(--v4-header-h), 36vh);
	}
}

/* Mobile testimonials tabs: fixed logo height so each tab (and the active
   box around it) has its real width even before the logo has loaded */
@media (max-width: 767px) {
	body.home-v4 .v4-tm__logo img {
		width: auto;
		height: 26px;
		max-height: none;
		transform: none;
	}
}

/* Footer addresses (all screens), per reference: briefcase / single
   building / two buildings, and the address text all in regular weight */
body.home-v4 footer .footer-middle .row > [class*="col-"]:nth-child(2) .address-block i {
	width: 23px;
	text-align: center;
}

body.home-v4 footer .footer-middle .row > [class*="col-"]:nth-child(2) .address-block i::before {
	content: "\f1ad";
	display: inline;
	width: auto;
	height: auto;
	background: none;
	-webkit-mask: none;
	mask: none;
}

body.home-v4 footer .address-block h5 strong {
	font-weight: 400;
}

/* Case study cards: small eyebrow line above the title; logos shown white
   (so dark client logos read on the photo backgrounds too) */
body.home-v4 .v4-case__tag {
	display: block;
	font-family: var(--v4-font);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.72);
}

body.home-v4 .v4-case__logo {
	filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
	body.home-v4 .v4-case__tag {
		font-size: 11px;
	}
}

/* Case study cards: soft dark fade behind the text so it stays readable on
   light screenshots (e.g. Wines From Italy) */
body.home-v4 .v4-case__body {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.6) 100%);
}

/* Hero platform logos: four copies of the row slide by one copy per loop,
   so the strip is always full edge to edge on wide screens too */
body.home-v4 .v4-logos__track {
	animation-name: v4-logos-slide;
}

@keyframes v4-logos-slide {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-25%);
	}
}

/* Mobile Development collage: no curved line behind the phone */
@media (max-width: 767px) {
	body.home-v4 .v4-dev2__curve {
		display: none;
	}
}

/* Wide screens (over 1440px): keep the 1440 Figma layout in the middle.
   Backgrounds stay full width; text and cards keep 60px inside a centred
   1440px area, so at 1920px they start 300px from the left. */
@media (min-width: 1441px) {
	body.home-v4 {
		--v4-pad-x: max(60px, calc((100vw - 1320px) / 2));
	}

	body.home-v4 .v4-hero__content {
		padding-left: calc(var(--v4-pad-x) + 3px);
	}
}

/* Hero eyebrow pill: rotating words (assets/homepage-v4.js) */
body.home-v4 .v4-hero__eyebrow {
	position: relative;
	justify-content: center;
	box-sizing: border-box;
	overflow: hidden;
	white-space: nowrap;
}

body.home-v4 .v4-hero__eyebrow.is-rotating {
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

body.home-v4 .v4-hero__eyebrow-text {
	display: inline-block;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

body.home-v4 .v4-hero__eyebrow.is-out .v4-hero__eyebrow-text {
	opacity: 0;
	transform: translateY(-8px);
}

/* Heading reveal: words waiting to light up stay readable (they were nearly
   invisible on the white phase, e.g. "through code and strategy.") */
body.home-v4 .v4-reveal-ready .v4-word {
	opacity: 0.28;
}

body.home-v4 .v4-reveal-ready .v4-word.is-on {
	opacity: 1;
}

/* Phone screen: start the screen 2px higher, tucked under the frame, so no
   thin dark line can show between the status bar and the SynapseBN header
   at any size or scroll position */
body.home-v4 .v4-dev2__screen {
	top: calc(9.851% - 2px);
	height: calc(53.851% + 2px);
}

/* Mobile header: "≡ Menu" pill in light grey (blue lines and label kept) */
@media (max-width: 767px) {
	body.home-v4 header .navigation-main .right-btn > .menu-btn.btn {
		background-color: #ededed;
	}
}

/* Phones: the portrait hero video (mobile Figma frame) is framed in the middle */
@media (max-width: 767px) {
	body.home-v4 .v4-hero__video.has-mobile {
		object-position: 50% 50%;
	}
}

/* Hero service slides: visible heading swaps per service (the real H1 text
   stays for search engines / screen readers); height kept so nothing jumps */
body.home-v4 .v4-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body.home-v4 .v4-hero__title.has-slides {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 2.4em;
}

body.home-v4 .v4-hero__rot {
	display: block;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

body.home-v4 .v4-hero__rot.is-out {
	opacity: 0;
	transform: translateY(14px);
}

@media (max-width: 767px) {
	body.home-v4 .v4-hero__title.has-slides {
		min-height: 3.6em;
	}
}

/* Service card images: no dark hairline round the rounded corners. The card
   background no longer shows through the anti-aliased edge (it was #111 under
   a light page while the colours fade), and the image itself is clipped to
   the same radius so the hover zoom can't leak past the corner either. */
body.home-v4 .v4-service__media,
body.home-v4.v4-theme-ready .v4-service__media,
body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-service__media {
	background-color: transparent;
	-webkit-clip-path: inset(0 round 20px);
	clip-path: inset(0 round 20px);
	isolation: isolate;
}

body.home-v4 .v4-service__img {
	border-radius: 20px;
}

/* The service image exports have their own dark rounded corners and a dark
   1-2px edge baked in; zoom them in slightly so those edges sit outside the
   card's rounded clip and only the photo shows. */
body.home-v4 .v4-service__img {
	transform: scale(1.05);
}

body.home-v4 .v4-service:hover .v4-service__img {
	transform: scale(1.08);
}

/* ==========================================================================
   Figma "New Changes" (Oct 26)
   ========================================================================== */

/* Testimonials: side slide between clients (old one out, new one in) */
body.home-v4 .v4-tm__panels {
	position: relative;
	overflow: hidden;
}

body.home-v4 .v4-tm__panel.is-active {
	animation: v4-tm-slide-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.home-v4 .v4-tm__panel.is-leaving {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	display: grid;
	animation: v4-tm-slide-out 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
	pointer-events: none;
}

body.home-v4 .v4-tm__panels.is-back .v4-tm__panel.is-active {
	animation-name: v4-tm-slide-in-back;
}

body.home-v4 .v4-tm__panels.is-back .v4-tm__panel.is-leaving {
	animation-name: v4-tm-slide-out-back;
}

@keyframes v4-tm-slide-in {
	from { opacity: 0; transform: translateX(14%); }
	to { opacity: 1; transform: none; }
}

@keyframes v4-tm-slide-out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateX(-14%); }
}

@keyframes v4-tm-slide-in-back {
	from { opacity: 0; transform: translateX(-14%); }
	to { opacity: 1; transform: none; }
}

@keyframes v4-tm-slide-out-back {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateX(14%); }
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-tm__panel.is-active,
	body.home-v4 .v4-tm__panel.is-leaving {
		animation: none;
	}
}

/* As Seen On (black, before Behind Anatech) */
body.home-v4 .v4-seen {
	padding: 80px var(--v4-pad-x) 72px;
	background-color: #000000;
	color: #ffffff;
}

body.home-v4 .v4-seen .v4-pill--dark {
	background-color: #3e3e3e;
	color: #ffffff;
}

body.home-v4 .v4-seen__title {
	margin: 12px 0 0;
	font-family: var(--v4-font);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
	color: #ffffff;
}

body.home-v4 .v4-seen__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px 48px;
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
}

body.home-v4 .v4-seen__item {
	margin: 0;
	padding: 0;
}

body.home-v4 .v4-seen__item::before {
	content: none;
}

body.home-v4 .v4-seen__item img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 108px;
	height: auto;
}

/* Full-screen menu (Figma "Navigation"): smaller items with a label above */
body.home-v4 #menu-floting-menu::before {
	content: "Navigation";
	display: block;
	margin: 0 0 14px;
	font-family: var(--v4-font);
	font-size: 16px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.85);
}

body.home-v4 #menu-floting-menu > li {
	margin-bottom: 14px;
}

body.home-v4 #menu-floting-menu > li > a {
	font-size: clamp(32px, 2.8vw, 40px);
	line-height: 1.4;
}

/* Header logo hover: the loader animation on a copy of the logo */
body.home-v4 header .logo a.has-logo-anim {
	position: relative;
}

body.home-v4 header .logo .v4-logo-anim {
	position: absolute;
	top: 50%;
	left: 0;
	display: none;
	width: 100%;
	transform: translateY(-50%);
	pointer-events: none;
}

body.home-v4 header .logo .v4-logo-anim svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

body.home-v4 header .logo a.is-logo-anim > img {
	visibility: hidden;
}

body.home-v4 header .logo a.is-logo-anim .v4-logo-anim {
	display: block;
}

body.home-v4 header .logo .v4-loader__bar {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

body.home-v4 header .logo a.is-logo-anim .v4-loader__mark {
	animation: v4-ldr-mark 2.6s linear infinite both;
}

body.home-v4 header .logo a.is-logo-anim .v4-loader__bar {
	animation: v4-ldr-bar 2.6s linear infinite both;
}

body.home-v4 header .logo a.is-logo-anim .v4-loader__word {
	animation: v4-ldr-word 2.6s linear infinite both;
}

@media (max-width: 767px) {
	/* Clients: two sliding rows of bigger logos (mobile Figma "Trusted By") */
	body.home-v4 .v4-clients {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	body.home-v4 .v4-clients__row {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	body.home-v4 .v4-clients__viewport {
		display: block;
		overflow: hidden;
		margin: 0 calc(var(--v4-pad-x) * -1);
	}

	body.home-v4 .v4-clients__track {
		display: flex;
	}

	body.home-v4 .v4-clients__set,
	body.home-v4 .v4-clients__set[aria-hidden="true"] {
		display: flex;
		gap: 12px;
		padding-right: 12px;
	}

	body.home-v4 .v4-clients__logo,
	body.home-v4 .v4-clients.is-armed:not(.is-in) .v4-clients__logo {
		display: block;
		flex: 0 0 176px;
		height: auto;
		padding: 0;
		background: none;
		opacity: 1;
		transform: none;
	}

	body.home-v4 .v4-clients__logo img {
		width: 176px;
		max-width: none;
		max-height: none;
		height: auto;
	}

	/* Team: smaller cards, the next one peeking in */
	body.home-v4 .v4-crew__card {
		flex: 0 0 min(256px, 66vw);
	}

	/* Smaller buttons on phones */
	body.home-v4 .v4-cta__actions {
		gap: 12px;
	}

	body.home-v4 .v4-cta__btn {
		min-height: 40px;
		padding: 8px 22px;
		font-size: 14px;
		line-height: 1.5;
	}

	body.home-v4 .v4-btn {
		padding: 9px 22px;
		font-size: 14px;
	}

	/* As Seen On */
	body.home-v4 .v4-seen {
		padding: 56px var(--v4-pad-x);
	}

	body.home-v4 .v4-seen__title {
		font-size: 20px;
	}

	body.home-v4 .v4-seen__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 24px;
		margin-top: 36px;
		justify-items: center;
	}

	body.home-v4 .v4-seen__item img {
		max-height: 64px;
	}
}

/* As Seen On: logos at their Figma size (half of the 2x export), on one row */
body.home-v4 .v4-seen__list {
	flex-wrap: nowrap;
}

body.home-v4 .v4-seen__item {
	flex: 0 1 auto;
	min-width: 0;
}

body.home-v4 .v4-seen__item img {
	max-height: none;
}

@media (max-width: 767px) {
	body.home-v4 .v4-seen__item img {
		width: auto !important;
		max-width: 100%;
		max-height: 64px;
	}
}

/* Header logo hover: only the new loader animation runs (the older hover
   animation is switched off, and the static logo hides while it plays) */
body.home-v4 header .logo a .v4-logo__mark,
body.home-v4 header .logo a .v4-logo__bar,
body.home-v4 header .logo a .v4-logo__cursor,
body.home-v4 header .logo a .v4-logo__word {
	animation: none !important;
}

body.home-v4 header .logo a.is-logo-anim > svg {
	visibility: hidden;
}

@media (max-width: 767px) {
	/* Giving Back: the two buttons sit side by side at their own width */
	body.home-v4 .v4-cta__actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
	}

	body.home-v4 .v4-cta__btn {
		width: auto;
		flex: 0 0 auto;
	}
}

/* Header logo hover: the cursor ends just past the word, so the logo box
   must not clip it */
body.home-v4 header .logo {
	overflow: visible;
}

/* As Seen On: continuous logo slide (JS adds 3 hidden copies, .is-marquee) */
body.home-v4 .v4-seen {
	overflow: clip;
}

body.home-v4 .v4-seen__list.is-marquee {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	width: max-content;
	margin-left: calc(-1 * var(--v4-pad-x));
	animation: v4-seen-slide 36s linear infinite;
}

body.home-v4 .v4-seen__list.is-marquee.is-paused {
	animation-play-state: paused;
}

body.home-v4 .v4-seen__list.is-marquee .v4-seen__item {
	flex: 0 0 auto;
	padding: 0 64px;
}

@keyframes v4-seen-slide {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (max-width: 767px) {
	body.home-v4 .v4-seen__list.is-marquee {
		display: flex;
		margin-top: 36px;
		animation-duration: 24s;
	}

	body.home-v4 .v4-seen__list.is-marquee .v4-seen__item {
		padding: 0 28px;
	}

	body.home-v4 .v4-seen__list.is-marquee .v4-seen__item img {
		width: auto !important;
		max-width: none;
		height: 56px;
		max-height: none;
	}
}

/* As Seen On: theme layer. Like the other dark sections, the section is
   transparent so the page background fades white to black (0.8s) when the
   dark sections cover half the screen; until then the pill, heading and
   logos use light-page colours (logos inverted so white text stays visible). */
body.home-v4.v4-theme-ready main.v4 .v4-seen {
	background-color: transparent;
}

body.home-v4.v4-theme-ready .v4-seen .v4-pill--dark,
body.home-v4.v4-theme-ready .v4-seen__title,
body.home-v4.v4-theme-ready .v4-seen__item img {
	transition: color 0.8s ease, background-color 0.8s ease, filter 0.8s ease;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-seen .v4-pill--dark {
	color: #555555;
	background-color: #f3f3f3;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-seen__title {
	color: #000000;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-seen__item img {
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4.v4-theme-ready .v4-seen .v4-pill--dark,
	body.home-v4.v4-theme-ready .v4-seen__title,
	body.home-v4.v4-theme-ready .v4-seen__item img {
		transition: none;
	}
}

/* Services mega menu (desktop): white header + vertical services list like the
   reference; stays open while the cursor is on the link or the panel. */
@media (min-width: 992px) {
	/* the inner services list was caught by the header nav flex rule */
	body.home-v4 header .wsmegamenu .wsmenu-list {
		display: block;
		width: 410px;
		max-width: 100%;
		margin: 0;
		gap: 0;
	}

	body.home-v4 header .wsmegamenu .wsmenu-list > li {
		width: 100%;
	}

	body.home-v4 header li.sub > .wsmegamenu {
		transition-delay: 0.12s;
	}

	body.home-v4 header li.sub:hover > .wsmegamenu,
	body.home-v4 header li.sub:focus-within > .wsmegamenu {
		transition-delay: 0s;
	}

	/* header turns white while the panel is open */
	body.home-v4:not(.v4-past-hero) header:has(li.sub:hover)::before,
	body.home-v4:not(.v4-past-hero) header:has(li.sub:focus-within)::before {
		background-color: #ffffff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		opacity: 1;
	}

	body.home-v4:not(.v4-past-hero) header:has(li.sub:hover) .logo a,
	body.home-v4:not(.v4-past-hero) header:has(li.sub:focus-within) .logo a {
		background-image: url("/wp-content/uploads/2025/07/logo-mark.svg"), url("/wp-content/uploads/2025/07/logo-text.svg");
		background-repeat: no-repeat, no-repeat;
		background-position: 0 50%, 59px 50%;
		background-size: auto 40px, auto 33px;
	}

	body.home-v4:not(.v4-past-hero) header:has(li.sub:hover) .logo a.is-logo-anim,
	body.home-v4:not(.v4-past-hero) header:has(li.sub:focus-within) .logo a.is-logo-anim {
		background-image: none;
	}

	body.home-v4:not(.v4-past-hero) header:has(li.sub:hover) .wsmenu > .wsmenu-list > li > a,
	body.home-v4:not(.v4-past-hero) header:has(li.sub:focus-within) .wsmenu > .wsmenu-list > li > a {
		color: #111111;
		opacity: 1;
	}

	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:hover > a,
	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:focus-within > a {
		color: #1145bb;
		opacity: 1;
	}

	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:hover > a .wsarrow,
	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:focus-within > a .wsarrow {
		background: #1145bb;
	}

	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:hover > a .wsarrow::after,
	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:focus-within > a .wsarrow::after {
		border-color: #ffffff;
	}
}

@media (min-width: 992px) {
	body.home-v4:not(.v4-past-hero) header:has(li.sub:hover) .logo a > svg,
	body.home-v4:not(.v4-past-hero) header:has(li.sub:focus-within) .logo a > svg {
		visibility: hidden;
	}

	/* bridge under the Services link down to the panel */
	body.home-v4 header .wsmenu > .wsmenu-list > li.sub > a::after {
		content: "";
		position: absolute;
		left: -24px;
		right: -24px;
		top: 100%;
		height: 40px;
	}
}

/* Service images v2 (Figma 554-15992, Oct 27): clean 2x exports with a 24px
   radius and no baked dark edge, so they show at full size. */
body.home-v4 .v4-service__media,
body.home-v4.v4-theme-ready .v4-service__media,
body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-service__media {
	-webkit-clip-path: inset(0 round 24px);
	clip-path: inset(0 round 24px);
	border-radius: 24px;
}

body.home-v4 .v4-service__img {
	border-radius: 24px;
	transform: scale(1.01);
}

body.home-v4 .v4-service:hover .v4-service__img {
	transform: scale(1.04);
}

/* As Seen On: logos with white text get a "-light" version (white parts dark)
   that shows while the page is white; the original shows once it is black. */
body.home-v4 .v4-seen__logo {
	position: relative;
	display: block;
}

body.home-v4 .v4-seen__item img.v4-seen__light {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	max-height: none;
	opacity: 0;
	filter: none;
	transition: opacity 0.8s ease;
}

body.home-v4 .v4-seen__logo.has-light > img:first-child {
	transition: opacity 0.8s ease;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-seen__logo.has-light > img:first-child {
	opacity: 0;
}

body.home-v4.v4-theme-ready:not(.v4-theme-dark) .v4-seen__item img.v4-seen__light {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	body.home-v4 .v4-seen__logo.has-light > img,
	body.home-v4 .v4-seen__item img.v4-seen__light {
		transition: none;
	}
}

/* Hero: the eyebrow pill sits right above the service heading, also when the
   heading is one line (no reserved 2nd line; the block stays bottom-aligned). */
body.home-v4 .v4-hero__title.has-slides {
	min-height: 0;
}

@media (max-width: 767px) {
	body.home-v4 .v4-hero__title.has-slides {
		min-height: 0;
	}
}

/* ==========================================================================
   Launch fixes (Oct 28, "Fix before live" doc)
   ========================================================================== */

/* Menu brand line: was an H2, now a paragraph with the same look */
body.home-v4 .ws-brand-title {
	display: block;
	margin: 14px 0 10px;
	font-family: var(--v4-font);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	color: #ffffff;
}

body.home-v4 .ws-rate .ws-brand-title {
	margin: 10px 0 0;
	line-height: 1.3;
}

body.home-v4 .ws-brand-title strong {
	display: block;
	font-size: 16px;
	font-weight: 400;
}

/* Services submenu toggle in the full-screen menu (phones/tablets only) */
body.home-v4 .v4-sub-toggle,
body.home-v4 .v4-sub {
	display: none;
}

@media (max-width: 991px) {
	body.home-v4 #menu-floting-menu > li.v4-has-sub {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	body.home-v4 .v4-sub-toggle {
		position: relative;
		display: inline-flex;
		flex: 0 0 36px;
		width: 36px;
		height: 36px;
		margin-left: 12px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.6);
		border-radius: 50%;
		background: transparent;
		cursor: pointer;
	}

	body.home-v4 .v4-sub-toggle span::before,
	body.home-v4 .v4-sub-toggle span::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 14px;
		height: 2px;
		margin: -1px 0 0 -7px;
		background: #ffffff;
		transition: transform 0.25s ease;
	}

	body.home-v4 .v4-sub-toggle span::after {
		transform: rotate(90deg);
	}

	body.home-v4 .v4-sub-toggle[aria-expanded="true"] span::after {
		transform: rotate(0deg);
	}

	body.home-v4 .v4-sub:not([hidden]) {
		display: block;
		flex: 0 0 100%;
		margin: 6px 0 4px;
		padding: 0 0 0 4px;
		list-style: none;
	}

	body.home-v4 .v4-sub li {
		margin: 0 0 8px;
		padding: 0;
	}

	body.home-v4 .v4-sub li::before {
		content: none;
	}

	body.home-v4 #menu-floting-menu .v4-sub a {
		font-size: 18px;
		line-height: 1.35;
		color: rgba(255, 255, 255, 0.85);
	}

	/* "Become a Client" in the open menu on phones/tablets */
	body.home-v4 .ws-header-right {
		display: flex !important;
		align-items: center;
		gap: 10px;
	}

	body.home-v4 .ws-header-right a.navbar-toggler {
		display: inline-flex !important;
		align-items: center;
		gap: 6px;
		min-height: 40px;
		padding: 8px 16px;
		border: 0;
		border-radius: 36px;
		background: #ffffff;
		color: #1145bb;
		font-size: 14px;
		line-height: 1;
		white-space: nowrap;
	}

	body.home-v4 .ws-header-right a.navbar-toggler .icon svg {
		width: 14px;
		height: 14px;
	}
}

/* Contact side panel: tighter spacing so "Submit the request" fits on a 900px-tall laptop */
@media (min-width: 992px) {
	body.home-v4 #submit-request .offcanvas-header {
		padding-top: 24px;
		padding-bottom: 8px;
	}

	body.home-v4 #submit-request .offcanvas-body .mb-3 {
		margin-bottom: 10px !important;
	}

	body.home-v4 #submit-request .offcanvas-title {
		font-size: 40px;
		line-height: 1.2;
	}

	body.home-v4 #submit-request .offcanvas-body textarea {
		height: 92px;
		min-height: 92px;
	}
}

/* Mobile: case-study tags readable; certifications intro shown (real copy now) */
@media (max-width: 767px) {
	body.home-v4 .v4-case__tag {
		font-size: 13px;
	}

	body.home-v4 .v4-certs__intro {
		display: block;
	}

	/* Footer map behind the copyright + links, dimmed so the pins don't sit on the text */
	body.home-v4 footer .map-img {
		z-index: 0;
		opacity: 0.35;
		pointer-events: none;
	}

	body.home-v4 footer .copyright {
		position: relative;
		z-index: 1;
	}
}

/* contact panel title (now a paragraph) keeps the heading colour */
body.home-v4 #submit-request .offcanvas-title {
	color: #000000;
}

/* Services dropdown marker: crisp chevron (SVG) inside the disc instead of a
   rotated border "v" */
@media (min-width: 992px) {
	body.home-v4 header .wsmenu > .wsmenu-list > li > a .wsarrow::after {
		top: 0;
		left: 0;
		width: 14px;
		height: 14px;
		border: 0 !important;
		transform: none;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4.2 5.6 7 8.4l2.8-2.8' fill='none' stroke='%231145BB' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
	}

	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:hover > a .wsarrow::after,
	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:focus-within > a .wsarrow::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4.2 5.6 7 8.4l2.8-2.8' fill='none' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
	}
}

/* Mobile menu: no Services submenu (user request, Oct 28) */
body.home-v4 .v4-sub-toggle,
body.home-v4 .v4-sub,
body.home-v4 .v4-sub:not([hidden]) {
	display: none !important;
}

@media (max-width: 991px) {
	body.home-v4 #menu-floting-menu > li.v4-has-sub {
		display: block;
	}
}

/* Services marker: same as the other staging pages - blue disc with the
   theme's white up-right arrow (dropdown-arrow.svg) */
@media (min-width: 992px) {
	body.home-v4 header .wsmenu > .wsmenu-list > li > a .wsarrow,
	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:hover > a .wsarrow,
	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:focus-within > a .wsarrow {
		flex: 0 0 16px;
		width: 16px;
		height: 16px;
		background: #1145bb;
	}

	body.home-v4 header .wsmenu > .wsmenu-list > li > a .wsarrow::after,
	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:hover > a .wsarrow::after,
	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:focus-within > a .wsarrow::after {
		top: 0;
		left: 0;
		width: 16px;
		height: 16px;
		border: 0 !important;
		transform: none;
		background: url("../../anatech/images/dropdown-arrow.svg") center / 9px auto no-repeat;
		transition: transform 0.25s ease;
	}

	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:hover > a .wsarrow::after,
	body.home-v4 header .wsmenu > .wsmenu-list > li.sub:focus-within > a .wsarrow::after {
		transform: rotate(45deg);
	}
}