@import url("https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap");
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	background: #fff;
}


body {
	--color-text: #000;
	--color-bg: #fff;
	--color-link: #000;
	--color-link-hover: #000;
	--color-info: #000;
	font-family: "DM Sans", sans-serif;
	min-height: 100vh;
	color: #57585c;
	color: var(--color-text);
	background-color: #fff;
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Page Loader */
.js .loading::before {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	content: '';
	position: fixed;
	z-index: 100000;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	outline: none;
}

.hidden {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

.message {
	position: relative;
	z-index: 100;
	display: none;
	padding: 1em;
	text-align: center;
	color: var(--color-bg);
	background: var(--color-text);
}

/* Icons */
main {
	position: relative;
	margin: 0 auto;
}


.grid__item {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
}

.grid__item--bg {
	background-color: var(--item-bg);
	min-height: 0;
	position: relative;
}

/* Custom cursor for hoverable boxes (desktop only) */
@media screen and (min-width: 52em) {
	.grid__item--bg {
		cursor: none;
		position: relative;
	}
	
	.grid__item--bg .custom-cursor {
		position: absolute;
		z-index: 3;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
		width: 20px;
		height: 20px;
		border: 2px solid rgba(255, 255, 255, 0.6);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		background: rgba(255, 255, 255, 0.1);
	}
	
	.grid__item--bg:hover .custom-cursor {
		opacity: 1;
	}
}

.grid__item-content {
	width: 100%;
	padding: 8vw;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	pointer-events: none;
	background: var(--item-bg);
}

.grid__item--bg .grid__item-content {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 3;
}

/* Gradient blur — bottom portion only, fades in on hover */
.blur-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 70%;
	z-index: 2;
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 55%);
	mask-image: linear-gradient(to bottom, transparent 0%, black 55%);
	background: rgba(0, 0, 0, 0);
	pointer-events: none;
	transition: backdrop-filter 0.55s ease, -webkit-backdrop-filter 0.55s ease, background 0.55s ease;
}

.theme-2:hover .blur-bottom,
.theme-3:hover .blur-bottom,
.theme-2:focus-within .blur-bottom,
.theme-3:focus-within .blur-bottom,
.theme-2:active .blur-bottom,
.theme-3:active .blur-bottom {
	backdrop-filter: blur(8px) saturate(1.4);
	-webkit-backdrop-filter: blur(8px) saturate(1.4);
	background: rgba(0, 0, 0, 0.22);
}

.grid__item-img {
	display: block;
	height: 100%;
	width: 100%;
	position: relative;
}

.grid__item-img::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		150deg,
		rgba(0,0,0,0.55) 0%,
		rgba(0,0,0,0.28) 40%,
		rgba(0,0,0,0.05) 100%
	);
	z-index: 1;
	pointer-events: none;
	transition: background 0.5s ease;
}

.grid__item-img canvas {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 0;
	display: block;
}

.grid__item-img img {
	height: 100%;
	display: block;
}

.grid__item-img img:nth-child(2) {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.3s;
}

.grid__item:hover .grid__item-img img:nth-child(2) {
	opacity: 1;
}

.js .grid__item-img img {
	display: none;
}

.grid__item-title {
	font-family: "Special Gothic Expanded One", sans-serif;
	font-weight: 700;
	font-size: 2.5rem;
	line-height: 1;
	margin: 2rem 0 0 0;
	color: var(--item-title);
}

/* Text shadow on image-backed boxes for readability */
.grid__item--bg .grid__item-subtitle span {
	text-shadow: 0 1px 18px rgba(0,0,0,0.85);
}


.grid__item-title--small {
	font-size: 1.5rem;
	line-height: 1.25;
	margin-bottom: 1rem;
}

.grid__item-meta {
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.25rem;
	font-size: 0.95rem;
	color: var(--item-meta);
}

.grid__item-subtitle {
	display: block;
	margin: 2rem 0 0 0;
	font-weight: 300;
	font-size: 1.35em;
	line-height: 1.6;
	letter-spacing: 0.01em;
	color: var(--item-subtitle);
}

.grid__item-subtitle span {
	display: block;
}

.grid__item-text {
	font-size: 1.15rem;
	font-weight: 300;
	line-height: 1.85;
	letter-spacing: 0.01em;
	margin: 2rem 0 0 0;
	color: var(--item-text);
}

.grid__item-link {
	display: inline-block;
	color: currentColor;
	font-weight: 700;
	font-size: 0.95rem;
	position: relative;
	padding: 0 0 0.2rem;
	pointer-events: auto;
	color: var(--item-link);
}

.grid__item-link:focus,
.grid__item-link:hover {
	color: var(--item-link-hover);
}

.grid__item-link::before {
	content: '';
	position: absolute;
	background: currentColor;
	width: 80%;
	height: 1px;
	bottom: 0;
	transform-origin: 0% 50%;
	transform: scale3d(0,1,1);
	opacity: 0;
	transition: all 0.3s;
	transition-property: opacity, transform;
}

.grid__item-link:hover::before {
	opacity: 1;
	transform: scale3d(1,1,1);
}

.grid__item-link + .grid__item-link {
	margin: 0 0 0 3rem;
}

.grid__item-text + .grid__item-link {
	white-space: nowrap;
	margin-top: 1rem;
	align-self: flex-start;
	margin-top: auto;
}

.grid__item-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 1rem;
}

.connect-content {
	display: flex !important;
	flex-direction: column;
}

.connect-title {
	margin-top: 0.75rem !important;
}

.connect-location {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	opacity: 0.55;
	color: var(--item-text);
}

.avatar-wrap {
	position: relative;
	display: inline-block;
	width: 72px;
	height: 72px;
	margin-top: 0;
	flex-shrink: 0;
	cursor: pointer;
	pointer-events: auto;
}

.avatar-wrap::after {
	content: 'Hi!';
	position: absolute;
	/* pill sits to the left, 10px overlap with circle edge */
	top: 50%;
	right: calc(100% - 10px);
	transform: translateY(-50%);
	white-space: nowrap;
	border-radius: 20px;
	padding: 0.28rem 0.7rem;
	background: rgba(18, 22, 30, 0.88);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-family: "Special Gothic Expanded One", sans-serif;
	font-size: 1.1rem;
	color: #f7ac03;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.avatar-wrap:hover::after {
	opacity: 1;
}

.avatar-image {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	display: block;
}

/* Themes */
.theme-2 {
	--item-bg: transparent;
	--item-link: #fff;
	--item-link-hover: #fff;
	--item-meta: #fff;
	--item-title: #fff;
	--item-subtitle: #fff;
	--item-text: #fff;
}

.theme-2 .grid__item-img::after {
	background: linear-gradient(135deg,
		rgba(18,2,40,0.82) 0%,
		rgba(45,8,90,0.48) 55%,
		rgba(80,25,140,0.05) 100%
	);
}

.theme-2:hover .grid__item-img::after {
	background: linear-gradient(135deg,
		rgba(18,2,40,0.96) 0%,
		rgba(55,10,110,0.75) 45%,
		rgba(100,40,170,0.12) 80%,
		transparent 100%
	);
}

.theme-3 {
	--item-bg: transparent;
	--item-link: #fff;
	--item-link-hover: #fff;
	--item-meta: #fff;
	--item-title: #fff;
	--item-subtitle: #fff;
	--item-text: #fff;
}

.theme-3 .grid__item-img::after {
	background: linear-gradient(135deg,
		rgba(5,2,30,0.72) 0%,
		rgba(20,10,100,0.38) 55%,
		rgba(40,25,160,0.04) 100%
	);
}

.theme-3:hover .grid__item-img::after {
	background: linear-gradient(135deg,
		rgba(5,2,35,0.92) 0%,
		rgba(25,12,130,0.68) 45%,
		rgba(60,40,220,0.10) 80%,
		transparent 100%
	);
}


.theme-4 {
	--item-bg: #0f0b1e;
    --item-link: #fff;
    --item-link-hover: #9e6817;
    --item-meta: #fff;
    --item-title: #fff;
    --item-subtitle: #fff;
    --item-text: #fff;
}

.theme-5 {
	--item-bg: #efe9dd;
    --item-link: #12161e;
    --item-link-hover: #0d13c1;
    --item-meta: #fff;
    --item-title: #12161e;
    --item-subtitle: #12161e;
    --item-text: #12161e;
}

.theme-20 {
	--item-bg: #6317f5;
    --item-link: #b29d85;
    --item-link-hover: #ffffff;
    --item-meta: #ffffff;
    --item-title: #ffffff;
    --item-subtitle: #ffffff;
    --item-text: #ffffff;
}

.theme-21 {
	--item-bg: #1a1308;
    --item-link: #f7ac03;
    --item-link-hover: #ffffff;
    --item-meta: #b8a98c;
    --item-title: #f7ac03;
    --item-subtitle: #b8a98c;
    --item-text: #b8a98c;
}

/* ─── Life Sciences tile ─────────────────────────────────────────────────── */
.theme-ls {
	--item-bg: #071c1f;
	--item-link: #3ecfbe;
	--item-link-hover: #ffffff;
	--item-meta: rgba(255,255,255,0.45);
	--item-title: #ffffff;
	--item-subtitle: rgba(255,255,255,0.8);
	--item-text: rgba(255,255,255,0.68);
}

.ls-layout {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 5vw;
	width: 100%;
}

.ls-intro {
	flex: 0 0 36%;
	max-width: 36%;
}

.ls-intro .grid__item-title {
	margin-top: 0;
	line-height: 1.1;
}

.ls-intro .grid__item-text {
	margin-top: 1.25rem;
}

.ls-stats {
	display: flex;
	gap: 1.25rem;
	margin-top: 2rem;
	flex-wrap: nowrap;
}

.ls-stat__number {
	display: block;
	font-family: "Special Gothic Expanded One", sans-serif;
	font-size: 1.6rem;
	line-height: 1;
	color: #3ecfbe;
}

.ls-stat__label {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.45);
	margin-top: 0.4rem;
}

.ls-capabilities {
	flex: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	align-self: center;
	pointer-events: auto;
}

.ls-cap {
	border: 1px solid rgba(62, 207, 190, 0.18);
	border-radius: 10px;
	padding: 1.25rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	background: rgba(62, 207, 190, 0.04);
	transition: border-color 0.25s ease, background 0.25s ease;
}

.ls-cap:hover {
	border-color: rgba(62, 207, 190, 0.38);
	background: rgba(62, 207, 190, 0.08);
}

.ls-cap__label {
	font-family: "Special Gothic Expanded One", sans-serif;
	font-size: 0.875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #3ecfbe;
	font-weight: 400;
}

.ls-cap__desc {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}


.industries-carousel {
	overflow: hidden;
	width: 100%;
	margin-top: 2.5rem;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.industries-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0 2.5rem;
	width: max-content;
	animation: industries-scroll 28s linear infinite;
}

.industries-carousel:hover .industries-track {
	animation-play-state: paused;
}

.industries-track li {
	color: var(--item-text);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	line-height: 1;
	opacity: 0.4;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}

.industries-track li:hover {
	opacity: 0.8;
}

@keyframes industries-scroll {
	0%   { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}

/* Full-width grid item */
.grid__item--full {
	grid-column: 1 / -1;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
}

/* Brand logos carousel */
.logo-section-label {
	font-family: "Special Gothic Expanded One", sans-serif;
	font-size: 1.1rem;
	font-weight: 400;
	letter-spacing: 0.3rem;
	text-transform: uppercase;
	color: var(--item-text);
	opacity: 0.35;
	margin: 0 0 2rem 0;
}

.logo-carousel {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.logo-track {
	display: flex;
	align-items: center;
	gap: 0 4rem;
	width: max-content;
	animation: logo-scroll 35s linear infinite;
}

.logo-carousel:hover .logo-track {
	animation-play-state: paused;
}

@keyframes logo-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 112px;
	opacity: 0.4;
	filter: brightness(0) invert(1);
	transition: opacity 0.25s ease;
	pointer-events: auto;
}

.logo-item--sm {
	height: 46px;
}


.logo-item:hover {
	opacity: 0.9;
}

.logo-item img {
	display: block !important;
	width: auto;
	height: 100%;
	max-width: 180px;
	object-fit: contain;
}

@media screen and (min-width: 85em) {
	.grid__item-title {
		font-size: clamp(4rem, 6vw, 8rem);
	}
	.grid__item:first-child .grid__item-title:not(.grid__item-title--small) {
		font-size: clamp(5rem, 8vw, 11rem);
	}
	.grid__item {
		min-height: clamp(500px, 50vw, 900px);
	}
	.theme-2,
	.theme-3 {
		min-height: clamp(400px, 40vw, 720px);
	}
	.grid__item-content {
		padding: clamp(5rem, 8vw, 10rem);
	}
	.grid__item-text {
		max-width: 58ch;
	}
}

/* Hero full-screen on mobile */
.grid__item:first-child {
	height: 100vh;
	background: var(--item-bg);
}

/* Let glows show through — transparent content for hero only */
.grid__item:first-child .grid__item-content {
	background: transparent;
}

@media screen and (min-width: 52em) {
	.grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.grid__item {
		min-height: 50vw;
		width: 100%;
	}
	.grid__item:first-child {
		grid-column: 1 / -1;
		min-height: 100vh;
		width: 100%;
	}
	.theme-2,
	.theme-3 {
		min-height: 40vw;
	}
	.grid__item-subtitle * {
		opacity: 0;
		transform: translate3d(100px, 0, 0);
		transition: all 0.5s cubic-bezier(0.2, 1, 0.7, 1);
		transition-property: transform, opacity;
	}
	.grid__item:hover .grid__item-subtitle * {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	.grid__item:hover .grid__item-subtitle span {
		transition-delay: 0.1s;
	}
	.grid__item:hover .grid__item-subtitle .grid__item-link {
		transition-delay: 0s;
	}
	.grid__item-title {
		font-size: 6vw;
	}
	.grid__item:first-child .grid__item-title:not(.grid__item-title--small) {
		font-size: 8vw;
		line-height: 1;
	}
	.grid__item-title--small {
		font-size: 3vw;
	}
	.grid__item-text {
		margin-top: 2.5rem;
	}
	.unite-graph {
		margin-left: -8vw;
		margin-right: -8vw;
		width: calc(100% + 16vw);
		max-width: none;
	}
}

/* ─── Scroll indicator ─────────────────────────────────────────────────── */
.scroll-indicator {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
	margin-top: 2.5rem;
	pointer-events: none;
}

.scroll-label {
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.28rem;
	text-transform: uppercase;
	color: var(--item-meta);
	opacity: 0.45;
}

.scroll-chevrons {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.scroll-chevron {
	width: 20px;
	height: 12px;
	color: var(--item-text);
	opacity: 0;
	animation: chevron-cascade 2.4s ease-in-out infinite;
}

.scroll-chevron:nth-child(2) { animation-delay: 0.22s; }
.scroll-chevron:nth-child(3) { animation-delay: 0.44s; }

@keyframes chevron-cascade {
	0%   { opacity: 0;    transform: translateY(-4px); }
	30%  { opacity: 0.75; transform: translateY(0);    }
	65%  { opacity: 0.35; transform: translateY(5px);  }
	100% { opacity: 0;    transform: translateY(10px); }
}

/* ─── Hero glow animations ─────────────────────────────────────────────── */
.hero-glows {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.hero-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0;
	mix-blend-mode: screen;
	will-change: transform, opacity;
}

/* Purple — top-left */
.hero-glow--1 {
	width: 55vw;
	height: 55vw;
	max-width: 700px;
	max-height: 700px;
	background: radial-gradient(circle, rgba(99,23,245,0.55) 0%, transparent 70%);
	top: -15%;
	left: -10%;
	animation: glow-drift-1 14s ease-in-out infinite;
}

/* Gold — bottom-right */
.hero-glow--2 {
	width: 45vw;
	height: 45vw;
	max-width: 580px;
	max-height: 580px;
	background: radial-gradient(circle, rgba(247,172,3,0.35) 0%, transparent 70%);
	bottom: -10%;
	right: 5%;
	animation: glow-drift-2 11s ease-in-out infinite;
	animation-delay: -4s;
}

/* Cyan — centre-right */
.hero-glow--3 {
	width: 35vw;
	height: 35vw;
	max-width: 460px;
	max-height: 460px;
	background: radial-gradient(circle, rgba(0,200,255,0.25) 0%, transparent 70%);
	top: 30%;
	right: -5%;
	animation: glow-drift-3 17s ease-in-out infinite;
	animation-delay: -8s;
}

/* Soft rose — bottom-left accent */
.hero-glow--4 {
	width: 30vw;
	height: 30vw;
	max-width: 380px;
	max-height: 380px;
	background: radial-gradient(circle, rgba(245,60,120,0.2) 0%, transparent 70%);
	bottom: 10%;
	left: 15%;
	animation: glow-drift-4 20s ease-in-out infinite;
	animation-delay: -12s;
}

@keyframes glow-drift-1 {
	0%   { opacity: 0;    transform: translate(0,    0)    scale(1);    }
	20%  { opacity: 0.85; }
	50%  { opacity: 0.6;  transform: translate(5%,   4%)   scale(1.12); }
	80%  { opacity: 0.9;  }
	100% { opacity: 0;    transform: translate(0,    0)    scale(1);    }
}

@keyframes glow-drift-2 {
	0%   { opacity: 0;    transform: translate(0,    0)    scale(0.95); }
	25%  { opacity: 0.75; }
	55%  { opacity: 0.5;  transform: translate(-4%,  3%)   scale(1.1);  }
	80%  { opacity: 0.8;  }
	100% { opacity: 0;    transform: translate(0,    0)    scale(0.95); }
}

@keyframes glow-drift-3 {
	0%   { opacity: 0;    transform: translate(0,    0)    scale(1.05); }
	30%  { opacity: 0.65; }
	60%  { opacity: 0.4;  transform: translate(-3%,  -5%)  scale(0.9);  }
	85%  { opacity: 0.7;  }
	100% { opacity: 0;    transform: translate(0,    0)    scale(1.05); }
}

@keyframes glow-drift-4 {
	0%   { opacity: 0;    transform: translate(0,    0)    scale(1);    }
	35%  { opacity: 0.55; }
	65%  { opacity: 0.3;  transform: translate(3%,   -4%)  scale(1.08); }
	90%  { opacity: 0.6;  }
	100% { opacity: 0;    transform: translate(0,    0)    scale(1);    }
}

/* ─── Unite radial graph ───────────────────────────────────────────────── */
.unite-graph {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 1.5rem auto 0;
	overflow: visible !important;
}

/* Hidden between 1024px–1400px where it renders too small to read in a half-column */
@media screen and (min-width: 64em) and (max-width: 87.49em) {
	.unite-graph {
		display: none;
	}
}

.unite-pulse-ring {
	transform-box: fill-box;
	transform-origin: center;
	animation: unite-pulse 3.5s ease-in-out infinite;
}

@keyframes unite-pulse {
	0%, 100% { opacity: 0.04; transform: scale(1); }
	50%       { opacity: 0.18; transform: scale(1.18); }
}

/* ─── Enable Venn Diagram Section ─────────────────────────────────────── */
.enable-section {
	position: relative;
	overflow: hidden;
	--item-bg: #0f0b1e; /* dark purple tint — distinct from hero's neutral grey */
}

/* Ambient background glows */
.enable-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 65% 55% at 15% 85%, rgba(99,23,245,0.11) 0%, transparent 60%),
		radial-gradient(ellipse 50% 45% at 85% 15%, rgba(0,200,255,0.08) 0%, transparent 60%),
		radial-gradient(ellipse 40% 40% at 50% 55%, rgba(247,172,3,0.06) 0%, transparent 55%);
	pointer-events: none;
	z-index: 0;
}

.enable-section .grid__item-content {
	position: relative;
	z-index: 1;
}

/* Gradient text highlight — reusable */
.gradient-text {
	background: linear-gradient(135deg, #9b5de5 0%, #00c8ff 25%, #f7ac03 62%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

/*
 * Triangular layout — 480×155px container, 180×90px rectangles
 *   Top-centre  (strategy):  left=150, top=0    → centre (240, 45)
 *   Bottom-left (comms):     left=22,  top=65   → centre (112, 110)
 *   Bottom-right (execution):left=278, top=65   → centre (368, 110)
 *   Centroid: x=(240+112+368)/3=240, y=(45+110+110)/3≈88
 */

/* Scaler wrapper — clips to available width, scales diagram proportionally */
.enable-diagram-wrap {
	width: 100%;
	margin: 2rem 0 0;
	overflow: hidden;
}

/* Triangular rectangles container — fixed 480×230, scaled via JS */
.enable-diagram {
	position: relative;
	width: 480px;
	height: 230px;
	transform-origin: top left;
	flex-shrink: 0;
	overflow: visible;
}

.enable-lines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

/* Individual nodes — flat rectangles */
.enable-node {
	position: absolute;
	width: 180px;
	height: 90px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 1rem;
	transition: border-color 0.3s ease, background 0.3s ease;
}

.enable-node span {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.55;
}

/* Top-centre — purple */
.enable-node--strategy {
	background: rgba(99, 23, 245, 0.13);
	border: 1px solid rgba(99, 23, 245, 0.28);
	top: 0;
	left: 150px;
	z-index: 2;
}

/* Bottom-left — gold */
.enable-node--comms {
	background: rgba(247, 172, 3, 0.1);
	border: 1px solid rgba(247, 172, 3, 0.22);
	top: 65px;
	left: 22px;
	z-index: 1;
}

/* Bottom-right — cyan */
.enable-node--execution {
	background: rgba(0, 200, 255, 0.09);
	border: 1px solid rgba(0, 200, 255, 0.18);
	top: 65px;
	left: 278px;
	z-index: 1;
}

/* Hover brightens nodes */
.enable-section:hover .enable-node--strategy  { background: rgba(99, 23, 245, 0.22);  border-color: rgba(99, 23, 245, 0.45); }
.enable-section:hover .enable-node--comms     { background: rgba(247, 172, 3, 0.18);  border-color: rgba(247, 172, 3, 0.38); }
.enable-section:hover .enable-node--execution { background: rgba(0, 200, 255, 0.15);  border-color: rgba(0, 200, 255, 0.32); }

/* "Lasting Impact" pill — below all three rectangles */
.enable-impact {
	position: absolute;
	top: 178px;
	left: 240px;
	transform: translate(-50%, 0);
	z-index: 3;
	text-align: center;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 40px;
	padding: 0.5rem 1.3rem;
	white-space: nowrap;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.enable-section:hover .enable-impact {
	background: rgba(255, 255, 255, 0.13);
	border-color: rgba(255, 255, 255, 0.3);
}

.enable-impact span {
	font-family: "Special Gothic Expanded One", sans-serif;
	font-size: 1.05rem;
	letter-spacing: 0.06em;
	background: linear-gradient(135deg, #9b5de5 0%, #00c8ff 55%, #f7ac03 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	display: block;
}

/* ─── Mobile optimisations (max 51.99em / ~831px) ──────────────────────── */
@media screen and (max-width: 51.99em) {

	/* Remove the "please view on a larger screen" nag — site is now mobile-ready */
	.message {
		display: none;
	}

	/* Reduce padding inside every card */
	.grid__item-content {
		padding: 7vw 6vw;
	}

	/* Hero: comfortable viewport height, not too tall */
	.grid__item:first-child {
		height: 100svh;
		min-height: 520px;
	}

	/* Center the hero content vertically; pin scroll indicator to bottom */
	.grid__item:first-child .grid__item-content {
		justify-content: center;
	}

	.grid__item:first-child .scroll-indicator {
		position: absolute;
		bottom: 2.5rem;
		left: 6vw;
		margin-top: 0;
	}

	/* Image cards: square feels cramped — use 90vw tall so copy is visible */
	.grid__item--bg {
		height: 90vw;
		min-height: 320px;
	}

	/* Typography scale-down */
	.grid__item-title {
		font-size: 2.2rem;
		margin-top: 1.25rem;
	}

	/* Hero "Tech Leader" — oversized for impact on mobile */
	.grid__item:first-child .grid__item-title:not(.grid__item-title--small) {
		font-size: 15vw;
		line-height: 1;
		margin-top: 0.5rem;
	}

	.grid__item-title--small {
		font-size: 1.15rem;
		margin-bottom: 0.5rem;
	}

	.grid__item-subtitle {
		font-size: 1.05rem;
		margin-top: 1rem;
		line-height: 1.55;
	}

	.grid__item-text {
		font-size: 0.95rem;
		line-height: 1.75;
		margin-top: 1.25rem;
	}

	.grid__item-meta {
		font-size: 0.75rem;
		letter-spacing: 0.18rem;
	}

	/* Nav links: slightly bigger tap target */
	.grid__item-nav {
		margin-top: 1.5rem;
	}

	.grid__item-link {
		font-size: 1rem;
		padding: 0.15rem 0;
	}

	.grid__item-link + .grid__item-link {
		margin-left: 0;
	}

	/* On mobile, subtitle text is always visible (no hover interaction) */
	.grid__item-subtitle * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	/* Trusted By section: tighten vertical rhythm */
	.logo-section-label {
		font-size: 0.85rem;
		letter-spacing: 0.22rem;
		margin-bottom: 1.25rem;
	}

	/* Smaller logo height on mobile */
	.logo-item {
		height: 64px;
	}

	.logo-item--sm {
		height: 28px;
	}

	/* Reduce gap between logos */
	.logo-track {
		gap: 0 2.5rem;
	}

	/* Industries carousel: tighter gap and spacing on mobile */
	.industries-carousel {
		margin-top: 1.5rem;
	}

	.industries-track {
		gap: 0 1.5rem;
	}

	.industries-track li {
		font-size: 0.75rem;
		letter-spacing: 0.14rem;
	}

	/* Enable diagram: centre within wrapper; JS scaler pivots from top-centre */
	.enable-diagram-wrap {
		margin: 1.5rem auto 0;
		display: flex;
		justify-content: center;
	}
	.enable-diagram {
		transform-origin: top center;
	}

	/* Unite graph: give breathing room below */
	.unite-graph {
		margin-top: 1rem;
	}

	/* Connect / avatar section */
	.avatar-image,
	.avatar-wrap {
		width: 60px;
		height: 60px;
	}

	/* Hero glow: reduce blur to ease GPU on low-end devices */
	.hero-glow {
		filter: blur(60px);
	}
}

/* On mobile, override the JS-driven img hide so first image shows statically */
@media screen and (max-width: 51.99em) {
	.js .grid__item-img img:first-child {
		display: block !important;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.js .grid__item-img img:last-child {
		display: none !important;
	}
}

/* ─── Floating back-to-top pill (mobile only) ───────────────────────────── */
.back-to-top {
	display: none;
}

@media screen and (max-width: 51.99em) {
	.back-to-top,
	.back-to-top:visited,
	.back-to-top:active,
	.back-to-top:focus {
		color: rgba(255, 255, 255, 0.88);
	}

	.back-to-top {
		display: block;
		position: fixed;
		top: 1.1rem;
		left: 50%;
		transform: translateX(-50%) translateY(-120%);
		z-index: 9999;
		font-family: "Special Gothic Expanded One", sans-serif;
		font-size: 0.75rem;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.88);
		background: rgba(15, 11, 30, 0.82);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 999px;
		padding: 0.45rem 1.2rem;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.back-to-top.is-visible {
		opacity: 1;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
	}

	/* Life Sciences tile — single column on mobile */
	.ls-layout {
		flex-direction: column;
		gap: 2rem;
	}

	.ls-intro {
		flex: none;
		max-width: 100%;
	}

	.ls-capabilities {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.ls-credit {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ─── iPad mini / Air portrait (768px–831px) ──────────────────────────────── */
/* Mobile layout but with tablet-appropriate card heights and type sizes */
@media screen and (min-width: 48em) and (max-width: 51.99em) {
	.theme-2,
	.theme-3 {
		height: 60vw;
		min-height: 380px;
	}
	.theme-2 .grid__item-title,
	.theme-3 .grid__item-title {
		font-size: 5.5vw;
		margin-top: 1.5rem;
	}
	.theme-2 .grid__item-subtitle,
	.theme-3 .grid__item-subtitle {
		font-size: 1.15rem;
		margin-top: 1.25rem;
	}
	.theme-2 .grid__item-content,
	.theme-3 .grid__item-content {
		padding: 6vw;
	}
}

/* ─── Touch devices (iPad, phone) ─────────────────────────────────────────── */
/* No hover = always show subtitles and make content tappable */
@media (hover: none) {
	.grid__item-subtitle * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	/* Unite graph: always visible on touch devices regardless of viewport width */
	.unite-graph {
		display: block !important;
	}
	/* Allow taps to reach links inside content layers */
	.grid__item-content {
		pointer-events: auto;
	}
}

/* ─── Tablet (832px–1200px) — tighter padding, slightly smaller body text ── */
@media screen and (min-width: 52em) and (max-width: 75em) {
	.grid__item-content {
		padding: 7vw;
	}
	.grid__item-text {
		font-size: 0.93rem;
	}
}
