/* Shared gradient text */
.grad-text {
	background: linear-gradient(90deg, #12c7b5 0%, #2d767a 14%, #d01fc2 57%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ===== Navigation ===== */
#page {
	position: relative;
}

.site-nav .container,
.hero__inner {
	padding-inline: 64px;
}

/* Nav bar: centred at the page container width on wide screens */
.site-nav .container {
	max-width: var(--container);
}

.site-nav {
	position: absolute;
	top: 24px;
	left: 0;
	right: 0;
	z-index: 50;
}

.site-nav__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 12px 16px 12px 40px;
	background: var(--glass);
	-webkit-backdrop-filter: blur(23px);
	backdrop-filter: blur(23px);
	border-radius: var(--r-pill);
	/* Own compositing layer so the blurred bar always repaints after a resize */
	transform: translateZ(0);
	will-change: transform;
}

.site-nav__logo svg {
	display: block;
	height: 24px; /* compact PURECDM logo, 24px tall on every page */
	width: auto;
}

.site-nav__menu > ul {
	display: flex;
	align-items: center;
	gap: 24px;
}

.site-nav__menu > ul > li > a,
.site-nav__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 21px;
	color: var(--white);
}

.site-nav__menu > ul > li > a::after,
.site-nav__toggle::after {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 4px;
	height: 1px;
	background: currentColor;
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

.site-nav__menu > ul > li > a:hover::after,
.site-nav__toggle:hover::after {
	opacity: 1;
}

.site-nav__menu > ul > li > a::after {
	left: 0;
	right: 0;
}

.site-nav__toggle {
	cursor: default;
}

.site-nav__toggle::after {
	display: none;
}

.site-nav__caret {
	display: inline-flex;
}

.site-nav__caret svg {
	width: 18px;
	height: 18px;
}

.site-nav__contact {
	color: var(--ink);
}

.has-dropdown {
	position: relative;
}

.site-nav__dropdown {
	position: absolute;
	top: calc(100% + 10px); /* Figma: panel top at y86, 6px over the bar's bottom edge (y92) */
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	width: 341px;
	/* Invisible bridge over the gap so the cursor can travel down into the panel. */
}

.site-nav__dropdown::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -20px;
	height: 20px;
}

.site-nav__dropdown {
	padding: 16px;
	background: var(--white);
	border-radius: var(--r-md);
	box-shadow: inset 0 0 0 1px var(--surface-200), 0 4px 4.2px rgba(0, 0, 0, 0.24);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.has-dropdown:hover .site-nav__dropdown,
.has-dropdown:focus-within .site-nav__dropdown,
.has-dropdown.is-open .site-nav__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.site-nav__dropdown li + li {
	border-top: 1px solid var(--surface-200);
}

.site-nav__dropdown li:hover,
.site-nav__dropdown li:hover + li {
	border-top-color: transparent;
}

.site-nav__dropdown a {
	position: relative;
	display: block;
	padding: 16px;
	border-radius: var(--r-sm);
	color: var(--ink);
}

.site-nav__dropdown-titlerow {
	display: flex;
	align-items: center;
	gap: 4px;
}

.site-nav__dropdown a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--grad);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
	pointer-events: none;
}

.site-nav__dropdown a:hover {
	box-shadow: 0 4px 4px rgba(45, 118, 122, 0.1);
}

.site-nav__dropdown a:hover::before {
	opacity: 1;
}

.site-nav__dropdown-title {
	display: block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
	color: var(--ink);
	transition: color var(--dur) var(--ease);
}

.site-nav__dropdown a:hover .site-nav__dropdown-title {
	color: var(--navy);
}

.site-nav__dropdown-desc {
	display: block;
	margin-top: 4px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12px;
	line-height: 18px;
	color: var(--body);
}

.site-nav__dropdown-arrow {
	flex: none;
	display: inline-flex;
	width: 16px;
	height: 16px;
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
}

.site-nav__dropdown-arrow svg {
	width: 100%;
	height: 100%;
}

.site-nav__dropdown a:hover .site-nav__dropdown-arrow {
	opacity: 1;
}

.site-nav__burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 8px;
}

.site-nav__burger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--white);
	border-radius: 2px;
}

/* ===== Hero ===== */
.hero {
	position: relative;
	overflow: hidden;
}

/* ===== Scroll reveal =====
   Fade and short rise for sections below the hero. JS adds .is-visible once as each element scrolls in. */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1),
	            transform 0.7s cubic-bezier(0.33, 1, 0.68, 1);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="fade"] { transform: none; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Stats cards rise from further down (50px) for a more pronounced lift. */
.stats__card[data-reveal] { transform: translateY(50px); }
.stats__card[data-reveal].is-visible { transform: none; }

/* Hero entrance: content fades and rises on load, staggered. */
@keyframes pcdm-hero-rise {
	from { opacity: 0; transform: translateY(80px); }
	to { opacity: 1; transform: none; }
}

/* The hero reveals on load (not scroll), so it keeps its own animation and
   overrides the generic transition above. */
.hero [data-reveal] {
	opacity: 0;
	transform: none;
	animation: pcdm-hero-rise 1.15s cubic-bezier(0.33, 1, 0.68, 1) both;
	animation-delay: var(--reveal-delay, 0ms);
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal],
	.hero [data-reveal] {
		animation: none;
		transition: none;
		opacity: 1;
		transform: none;
	}
}

.hero__bg {
	position: absolute;
	inset: 0;
}

.hero__bg img,
.hero__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}

.hero__inner {
	position: relative;
	z-index: 2;
	min-height: 828px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: 24px;
	padding-bottom: 96px;
}

/* Hero content: centred in the page container; the video background spans the full width */

.hero__content {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
}

.hero__eyebrow {
	display: block;
	margin-bottom: 24px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: 0.0075em;
	color: var(--surface-050);
}

.hero__title {
	max-width: 690px;
	font-weight: 400;
	font-size: clamp(38px, calc(3.5714vw + 16.5714px), 68px);
	line-height: clamp(44px, calc(3.5714vw + 22.5714px), 74px);
	letter-spacing: -0.0221em;
	color: var(--white);
}

.hero__card {
	position: relative;
	flex: none;
	width: 268px;
	min-height: 124px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	border-radius: var(--r-md);
	background: var(--glass);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	color: var(--white);
	transition: background var(--dur) var(--ease), min-height var(--dur) var(--ease);
}

.hero__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	padding: 1px;
	background: var(--grad);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
	pointer-events: none;
}

.hero__card:hover {
	min-height: 134px;
	background: rgba(92, 174, 251, 0.1);
}

.hero__card:hover::before {
	opacity: 0.55;
}

.hero__card-texture {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.hero__card-texture img {
	position: absolute;
	left: -121px;
	top: -60px;
	width: 515px;
	height: 290px;
	max-width: none;
	object-fit: cover;
	opacity: 0.15;
}

.hero__card-title {
	position: relative;
	z-index: 1;
	max-width: 165px;
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
}

.hero__card-foot {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.hero__card-label {
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
}

.hero__card .icon-btn {
	flex: none;
}

/* Design deviation (not in Figma): nudge the arrow circle up slightly on card hover. */
.hero__card:hover .icon-btn {
	transform: scale(1.12);
}

/* ===== Intro ===== */
.intro {
	position: relative;
	overflow: hidden;
	background: var(--surface-100);
}

.intro__frame {
	position: relative;
	max-width: var(--container);
	margin-inline: auto;
}

.intro__art {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.intro__art img {
	position: absolute;
	left: 23px;
	top: -140px;
	width: 584px;
	height: 876px;
	max-width: none;
	object-fit: cover;
}

.intro__container {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: flex-end;
	padding-block: var(--section-py);
	padding-inline: var(--gutter);
}

.intro__wrapper {
	width: 657px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
}

.intro__title {
	max-width: 605px;
	margin-bottom: 32px;
	font-weight: 400;
	font-size: 44px;
	line-height: 52px;
	letter-spacing: -0.015em;
	color: var(--ink);
}

.intro__body {
	max-width: 605px;
	font-family: var(--font-head);
	font-weight: 300;
	font-size: 24px;
	line-height: 32px;
	text-align: left; /* Intro body text */
	color: var(--ink);
}

.intro__body + .intro__body {
	max-width: 603px;
	margin-top: 32px;
}

.intro__body strong {
	font-weight: 500;
}

.intro__btn {
	align-self: flex-start;
	margin-top: 32px;
}

/* ===== Stats ===== */
.stats {
	background: var(--white);
}

.stats__row {
	display: flex;
	height: 224px;
	max-width: var(--container);
	margin-inline: auto;
	padding-block: 40px;
	/* Match the site gutter so the cards line up with the other 1440 sections
	   (were flush to the edge, slipping ~80px further out). */
	padding-inline: var(--gutter);
}

.stats__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0 32px;
	border-right: 1px solid var(--line);
}

.stats__card:last-child {
	border-right: 0;
}

.stats__value {
	font-family: var(--font-head);
	font-weight: 400;
	font-size: 44px;
	line-height: 52px;
	letter-spacing: -0.015em;
	color: var(--navy);
}

.stats__label {
	margin-top: 12px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	line-height: 25px;
	color: var(--ink);
}

/* ===== Integrated biometrics ===== */
.biometrics {
	background: var(--white);
	padding-block: var(--section-py);
}

.biometrics__title {
	max-width: 676px;
	margin-bottom: 58px;
	font-weight: 400;
	font-size: clamp(32px, calc(3.3333vw + 12px), 60px);
	line-height: clamp(38px, calc(3.5714vw + 16.5714px), 68px);
	letter-spacing: 0.0083em;
	color: var(--navy);
}
.biometrics__title .grad-text {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.biometrics__text {
	width: 643px;
	max-width: 100%;
	margin-left: auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.biometrics__text p {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 20px;
	line-height: 27px;
	text-align: left; /* Section body text */
	color: var(--ink);
}

/* ===== Services ===== */
.services {
	position: relative;
	overflow: hidden;
	padding-block: var(--section-py);
	/* Figma (updated): #1E364E at the bottom fading to transparent at 41.83%; eased so there is no band. */
	background: linear-gradient(0deg,
		rgba(30, 54, 78, 0.94) 0%,
		rgba(30, 54, 78, 0.915) 3.6%,
		rgba(30, 54, 78, 0.85) 7.1%,
		rgba(30, 54, 78, 0.74) 9.8%,
		rgba(30, 54, 78, 0.61) 13.4%,
		rgba(30, 54, 78, 0.47) 16.9%,
		rgba(30, 54, 78, 0.335) 20.5%,
		rgba(30, 54, 78, 0.2) 24%,
		rgba(30, 54, 78, 0.095) 26.7%,
		rgba(30, 54, 78, 0.026) 30.3%,
		rgba(255, 255, 255, 0) 33.8%), var(--white);
}

/* Services background art: positioned in vw (design px / 1440 * 100), cropped at the top by the section overflow */
.services__texture {
	position: absolute;
	top: -15.347vw;   /* -221/1440 */
	left: -2.917vw;   /* -42/1440 */
	width: 106.458vw; /* 1533/1440 */
	height: 50.764vw; /* 731/1440 */
	z-index: 0;
	opacity: 0.34;
	pointer-events: none;
	/* The art ends behind the first card row; fade its bottom edge so it doesn't show as a hard line. */
	-webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}

.services__texture img,
.services__texture video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.services__inner {
	position: relative;
	z-index: 1;
}

.services__header {
	max-width: 764px;
	margin: 0 auto 80px;
	text-align: center;
}

.services__title {
	font-weight: 400;
	font-size: clamp(32px, calc(3.3333vw + 12px), 60px);
	line-height: clamp(38px, calc(3.5714vw + 16.5714px), 68px);
	letter-spacing: 0.0083em;
	color: var(--ink);
}
.services__intro {
	max-width: 700px;
	margin: 24px auto 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	color: var(--ink);
}

.services__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	padding-inline: 40px;
}

.service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Figma (updated): title + text at the top, button at the bottom */
	gap: 24px;
	min-height: 260px;
	padding: 32px;
	background: var(--white);
	border-radius: var(--r-lg);
	box-shadow: 0 4px 16.6px rgba(0, 0, 0, 0.12);
}

/* Default: gradient border. */
.service-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: var(--grad);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	transition: opacity var(--dur) var(--ease);
	pointer-events: none;
}

/* Hover: grey border. */
.service-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--line);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
	pointer-events: none;
}

.service-card:hover::before {
	opacity: 0;
}

.service-card:hover::after {
	opacity: 1;
}

.service-card__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.service-card__title {
	font-weight: 400;
	font-size: 32px;
	line-height: 38px;
	letter-spacing: 0.0078em;
	color: var(--navy);
}

.service-card:first-child .service-card__title {
	max-width: 378px;
}

.service-card__desc {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	color: var(--ink);
}

.service-card__more {
	position: relative;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--white);
	box-shadow: 0 0 4.6px rgba(0, 0, 0, 0.1);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--ink);
	transition: border-color var(--dur) var(--ease);
}

/* Hover: swap the grey border for the gradient. */
.service-card__more::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--grad);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
	pointer-events: none;
}

.service-card:hover .service-card__more {
	border-color: transparent;
}

.service-card:hover .service-card__more::before {
	opacity: 1;
}

/* Services: thin top line as an inset shadow so the section height is unchanged */
@media (min-width: 768px) {
	.services {
		box-shadow: inset 0 1px 0 var(--line);
	}
}

/* Figma Regular/18 is 18/25 (the body default is 27). Desktop only; phones set their own sizes. */
@media (min-width: 768px) {
	.services__intro,
	.service-card__desc {
		line-height: 25px;
	}
}

.service-card__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.service-card__icon svg {
	width: 100%;
	height: 100%;
}

/* ===== Benefits ===== */
.benefits {
	background: var(--surface-100);
	padding-block: var(--section-py);
}

.benefits__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 96px;
}

.benefits__title {
	font-weight: 400;
	font-size: clamp(32px, calc(3.3333vw + 12px), 60px);
	line-height: clamp(38px, calc(3.5714vw + 16.5714px), 68px);
	letter-spacing: 0.0083em;
	color: var(--ink);
}

.benefits__brand-pure {
	color: var(--navy);
}

.benefits__brand-cdm {
	color: #3d8c8c;
}

.benefits__intro {
	flex: none;
	width: 633px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	color: var(--ink);
}

.benefits__grid {
	display: flex;
	gap: 24px;
	align-items: stretch;
}

.benefits__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.benefits__col .benefit-card:last-child {
	flex: 1;
}

.benefit-card {
	background: var(--white);
	box-shadow: inset 0 0 0 1px var(--line);
	border-radius: var(--r-md);
	padding: 24px;
}

.benefit-card__title {
	margin-bottom: 16px;
	font-weight: 400;
	font-size: 32px;
	line-height: 38px;
	letter-spacing: 0.0078em;
	color: var(--navy);
}

.benefit-card__body {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 22px;
	text-align: left; /* Benefit card body text */
	color: var(--ink);
}

.benefit-card--info {
	position: relative;
	overflow: hidden;
	flex: none;
	width: 366px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 32px 24px;
	border: 0;
	box-shadow: 0 4px 16.6px rgba(45, 118, 122, 0.1);
}

.benefit-card--info::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: var(--grad);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}

.benefit-card--info .benefit-card__body {
	text-align: left;
}

.benefit-card__art {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Art PNG already includes its transparency */
	opacity: 1;
	pointer-events: none;
}

.benefit-card__art img {
	position: absolute;
	left: -505px;
	top: -99px;
	width: 1376px;
	height: 400px;
	max-width: none;
}

.benefit-card--info .benefit-card__title {
	position: relative;
	z-index: 1;
	max-width: none;
	margin-bottom: 32px;
}

.benefit-card--info .benefit-card__body {
	position: relative;
	z-index: 1;
}

/* ===== Closing CTA ===== */
.cta {
	background: var(--white);
	padding-block: 24px;
}

.cta .container {
	/* CTA panel: centred at the page container width with 24px side margins */
	max-width: var(--container);
	padding-inline: 24px;
}

.cta__panel {
	position: relative;
	overflow: hidden;
	padding: 64px 120px;
	border-radius: var(--r-lg);
	background: var(--white);
	text-align: center;
}

/* CTA panel background image: cover, anchored to the top, low opacity */
.cta__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("../images/cta-bg.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0.1;
	/* Tilted and pushed down; translateY is a percentage of the panel height so it scales.
	   scale covers the rotated corners. */
	transform: translateY(35%) rotate(10deg) scale(1.2);
	transform-origin: center;
	pointer-events: none;
}

/* CTA gradient overlay: navy fading to transparent, above the image and below the text */
.cta__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to bottom,
		rgba(30, 54, 78, 0.78) 0%,
		rgba(30, 54, 78, 0.68) 4%,
		rgba(30, 54, 78, 0.54) 9%,
		rgba(30, 54, 78, 0.40) 16%,
		rgba(30, 54, 78, 0.25) 24%,
		rgba(30, 54, 78, 0.11) 34%,
		rgba(30, 54, 78, 0.03) 44%,
		rgba(30, 54, 78, 0) 53%);
	pointer-events: none;
}

.cta__header {
	position: relative;
	z-index: 1;
}

.cta__title {
	max-width: 1102px;
	margin: 0 auto;
	font-weight: 400;
	font-size: 48px;
	line-height: 58px;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.cta__lead {
	max-width: 718px;
	margin: 24px auto 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	color: var(--ink);
}

.cta__mobile-copy {
	display: none;
}

.cta__body {
	max-width: 758px;
	margin: 24px auto 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 18px;
	color: var(--ink);
}

.cta__bar {
	position: relative;
	z-index: 1;
	width: 965px;
	max-width: 100%;
	margin: 48px auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 21px 32px;
	background: var(--white);
	border: 1.5px solid var(--surface-200);
	border-radius: var(--r-lg);
	box-shadow: 0 4px 16.6px rgba(0, 0, 0, 0.12);
}

.cta__bar-text {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 18px;
	color: var(--navy);
}

/* ===== Footer ===== */
.site-footer {
	background: var(--navy);
	padding-block: 80px;
	min-height: 631px;
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	min-height: 471px;
}

.site-footer__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	flex: 1;
}

.site-footer__logo svg {
	display: block;
	height: 47px; /* logo with the "Integrated Biometrics" line; letters stay 28px tall */
	width: auto;
}

.site-footer__desc {
	margin-top: 24px;
	max-width: 284px;
	color: var(--white);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.0094em;
}

.site-footer__mobile-desc {
	display: none;
}

.site-footer__links {
	display: flex;
	gap: 64px;
}

.site-footer__col {
	width: 180px;
}

.site-footer__col-title {
	display: block;
	margin-bottom: 18px;
	color: var(--white);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 18px;
}

.site-footer__col ul li {
	line-height: 21px; /* Figma: 21px rows + 12px gap */
}

.site-footer__col ul li + li {
	margin-top: 12px;
}

.site-footer__col ul a {
	color: var(--surface-100);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 21px;
	letter-spacing: 0.0107em;
	transition: font-weight var(--dur) var(--ease);
}

.site-footer__col ul a:hover {
	font-weight: 600;
}

.site-footer__news {
	width: 366px;
}

.site-footer__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 0;
}

.site-footer__form input {
	width: 100%;
	padding: 12px 16px;
	border: 0;
	border-radius: 8px;
	background: rgba(246, 248, 255, 0.1);
	color: var(--white);
	font-size: 16px;
	line-height: 24px;
}

.site-footer__form input::placeholder {
	color: var(--line-2);
}

.site-footer__subscribe {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--white);
	color: var(--navy);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
}

.site-footer__subscribe-icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.site-footer__line {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	margin: 0 0 24px;
}

.site-footer__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-footer__copy {
	color: var(--white);
	font-family: "Inter", sans-serif;
	font-size: 12px;
	line-height: 15px;
}

.site-footer__socials {
	display: flex;
	align-items: center;
	gap: 16px;
}

.site-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(246, 248, 255, 0.1);
}

.site-footer__socials svg {
	width: 16px;
	height: 16px;
}

.site-footer__email {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--white);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.0107em;
}

.site-footer__email-icon {
	display: inline-flex;
	width: 19px;
	height: 19px;
}

/* Mobile menu open: page areas are tappable (iOS) so a tap outside closes the menu */
html.nav-open body { cursor: pointer; }

/* Newsletter form: honeypot hidden from people; status message under the button. */
.site-footer__form { position: relative; }
.site-footer__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.site-footer__form-msg {
	flex-basis: 100%;
	margin: 4px 0 0;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 20px;
	color: var(--white);
}
.site-footer__form-msg:empty { display: none; }
.site-footer__form-msg.is-error { color: #ffb4b4; }
.site-footer__form.is-sending .site-footer__subscribe { opacity: 0.6; pointer-events: none; }
.site-footer__form input.is-invalid { box-shadow: inset 0 0 0 1px #ffb4b4; }

/* Newsletter success: a soft green confirmation card with a check mark, fading in. */
.site-footer__form-msg.is-success {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid rgba(74, 222, 128, 0.35);
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(74, 222, 128, 0.16), rgba(18, 199, 181, 0.10));
	color: #d9fbe6;
	animation: pcdm-msg-in 0.4s cubic-bezier(.33, 1, .68, 1) both;
}
.site-footer__form-msg.is-success::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 0;
	border-radius: 50%;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat,
		#22c55e;
	box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
}
@keyframes pcdm-msg-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.site-footer__form-msg.is-success { animation: none; }
}

/* Service cards: 1.5px gradient border (padding-box white + border-box gradient); light grey on hover */
.service-card {
	border: 1.5px solid transparent;
	background:
		linear-gradient(var(--white), var(--white)) padding-box,
		var(--grad) border-box;
}
.service-card:hover {
	background:
		linear-gradient(var(--white), var(--white)) padding-box,
		linear-gradient(var(--line), var(--line)) border-box;
}
.service-card::before,
.service-card::after { display: none; }