/* Responsive overrides (mobile 393, tablet) */

/* ===== Tablet ===== */
@media (max-width: 1200px) {
	:root {
		--gutter: 40px;
	}

	.intro__wrapper {
		width: 100%;
	}

	.benefits__grid {
		flex-wrap: wrap;
	}

	.benefits__col {
		flex: 1 1 300px;
	}

	.benefit-card--info {
		width: 100%;
	}

	.cta__panel {
		padding: 56px 48px;
	}
}

@media (max-width: 1100px) {
	.svc-intro__grid { gap: 40px; }
	.svc-intro__text { width: min(50%, 539px); }
	.svc-result { width: min(42%, 423px); }
	.svc-support__grid--cols2 { grid-template-columns: repeat(2, minmax(0, 398px)); }
	.about-earlier__inner { gap: 40px; }
	/* 2 columns, filled row by row (the desktop 3x2 column-flow would add a 3rd column and collapse these to 0). */
	.about-how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row; }
	.about-team__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.experience-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }
	.contact-form-card { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
	.contact-form-card__title { font-size: 38px; line-height: 46px; }
}

@media (min-width: 768px) and (max-width: 1100px) {
	.site-nav {
		top: 16px;
	}

	.site-nav .container {
		padding-inline: 24px;
	}

	.site-nav__bar {
		padding: 12px 16px 12px 20px;
	}

	.site-nav__menu {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		display: block;
		max-height: 0;
		padding: 12px 20px;
		background: var(--white);
		border-radius: var(--r-md);
		box-shadow: 0 24px 60px rgba(16, 16, 16, .18);
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		transform: translateY(-12px);
		visibility: hidden;
		transition: max-height .72s cubic-bezier(.33, 1, .68, 1), opacity .48s ease, transform .72s cubic-bezier(.33, 1, .68, 1), visibility 0s linear .72s;
	}

	.site-nav.is-open .site-nav__menu {
		max-height: 700px;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		visibility: visible;
		transition-delay: 0s;
	}

	.site-nav__menu > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.site-nav__menu > ul > li + li {
		border-top: 1px solid rgba(16, 16, 16, .08);
	}

	.site-nav__menu > ul > li > a,
	.site-nav__toggle {
		color: var(--ink);
		padding: 10px 0;
		font-size: 16px;
	}

	.site-nav__dropdown {
		position: static;
		width: auto;
		max-width: 100%;
		padding: 0 0 8px 12px;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
	}

	.has-dropdown:hover .site-nav__dropdown,
	.has-dropdown:focus-within .site-nav__dropdown,
	.has-dropdown.is-open .site-nav__dropdown {
		transform: none;
	}

	.site-nav__dropdown a {
		padding: 12px 10px;
	}

	.site-nav__dropdown li + li {
		border-top: 0;
	}

	.site-nav__contact {
		display: none;
	}

	.site-nav__burger {
		display: flex;
	}

	body:not(.page-home) .site-nav__burger span {
		background: var(--ink);
	}
}

@media (max-width: 900px) {
	.svc-intro__grid,
	.team-profile__grid { flex-direction: column; align-items: stretch; }
	.svc-intro__text,
	.svc-result,
	.team-profile__photo { width: 100%; }
	.svc-support__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.svc-card { flex-basis: calc(50% - 12px); }
	.about-earlier__inner { grid-template-columns: 1fr; }
	.about-earlier__media { min-height: 360px; }
	.about-stats { gap: 0; }
	.experience-grid { grid-template-columns: 1fr; max-width: 640px; }
	.study-card { min-height: 440px; }
	.contact-form-card { height: auto; }
	.news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) and (max-width: 1439px) {
	.page-home .intro__frame {
		display: grid;
		grid-template-columns: minmax(280px, 40%) minmax(0, 60%);
		align-items: stretch;
		min-height: 620px;
	}

	.page-home .intro__art {
		position: relative;
		inset: auto;
		overflow: hidden;
	}

	.page-home .intro__art img {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.page-home .intro__container {
		justify-content: flex-start;
		padding: 72px 40px 72px 24px;
	}

	.page-home .intro__wrapper {
		width: 100%;
	}

	.page-home .intro__title {
		font-size: clamp(36px, calc(1.9048vw + 21.7143px), 44px);
		line-height: clamp(44px, calc(1.9048vw + 29.7143px), 52px);
	}

	.page-home .intro__body {
		font-size: clamp(18px, calc(1.4286vw + 7.2857px), 24px);
		line-height: clamp(26px, calc(1.4286vw + 14.2857px), 32px);
	}
}

.home-mobile-copy {
	display: none;
}

@media (min-width: 601px) and (max-width: 767px) {
	.hero__title {
		font-size: clamp(38px, calc(3.5714vw + 16.5714px), 68px);
		line-height: clamp(44px, calc(3.5714vw + 22.5714px), 74px);
	}

	.page-home .cta__desktop-copy {
		display: inline;
	}

	.page-home .cta__mobile-copy {
		display: none;
	}
}

@media (max-width: 600px) {
	.home-desktop-copy {
		display: none !important;
	}

	.home-mobile-copy {
		display: inline;
	}

	.stats__row.home-mobile-copy {
		display: flex;
	}

	.biometrics__text.home-mobile-copy {
		display: block;
	}

	/* Mobile copy is block-flow, so restore the Figma paragraph gap explicitly. */
	.biometrics__text.home-mobile-copy p + p {
		margin-top: 32px;
	}

	.services__grid.home-mobile-copy {
		display: grid;
	}

	.hero__bg .home-mobile-copy {
		display: block;
	}
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
	.site-main img[aria-hidden="true"] {
		max-width: none;
	}

	.site-main .service-card,
	.site-main .svc-card,
	.site-main .svc-q-card,
	.site-main .news-card,
	.site-main .study-card,
	.site-main .experience-card,
	.site-main .values-card {
		min-width: 0;
	}

	.site-main .service-card__title,
	.site-main .svc-card__title,
	.site-main .svc-q-card__title,
	.site-main .news-card__title,
	.site-main .study-card__title,
	.site-main .experience-card__title,
	.site-main .values-card__title {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	:root {
		--gutter: 16px;
		--section-py: 48px;
	}

	.container {
		padding-inline: var(--gutter);
	}

	/* Nav */
	.site-nav {
		top: 16px;
	}

	.site-nav .container {
		padding-inline: 16px;
	}

	.site-nav__bar {
		padding: 12px 16px 12px 20px;
	}

	.site-nav__menu {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		display: block;
		max-height: 0;
		padding: 12px 20px;
		background: var(--white);
		border-radius: var(--r-md);
		box-shadow: 0 24px 60px rgba(16, 16, 16, 0.18);
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		transform: translateY(-12px);
		visibility: hidden;
		transition: max-height .72s cubic-bezier(.33, 1, .68, 1), opacity .48s ease, transform .72s cubic-bezier(.33, 1, .68, 1), visibility 0s linear .72s;
	}

	.site-nav.is-open .site-nav__menu {
		max-height: 700px;
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		visibility: visible;
		transition-delay: 0s;
	}

	.site-nav__menu > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.site-nav__menu > ul > li + li {
		border-top: 1px solid rgba(16, 16, 16, .08);
	}

	.site-nav__menu > ul > li > a,
	.site-nav__toggle {
		color: var(--ink);
		padding: 10px 0;
		font-size: 16px;
	}

	.site-nav__dropdown {
		position: static;
		width: auto;
		max-width: 100%;
		padding: 0 0 8px 12px;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
	}

	.has-dropdown:hover .site-nav__dropdown,
	.has-dropdown:focus-within .site-nav__dropdown,
	.has-dropdown.is-open .site-nav__dropdown {
		transform: none;
	}

	.site-nav__dropdown a {
		padding: 12px 10px;
	}

	.site-nav__dropdown li + li {
		border-top: 0;
	}

	.site-nav__contact {
		display: none;
	}

	.site-nav__burger {
		display: flex;
		transition: transform .42s cubic-bezier(.33, 1, .68, 1);
	}

	.site-nav__burger:hover {
		transform: scale(1.12);
	}

	.site-nav.is-open .site-nav__burger {
		transform: rotate(-90deg);
	}

	.site-nav.is-open .site-nav__burger:hover {
		transform: rotate(90deg) scale(1.12);
	}

	body:not(.page-home) .site-nav__burger span {
		background: var(--ink);
	}

	/* Hero */
	.hero__inner {
		min-height: 689px;
		padding-top: 24px;
		padding-bottom: 48px;
	}

	.hero__content {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.hero__text {
		display: flex;
		flex-direction: column;
		gap: 24px;
		width: 345px;
		max-width: 100%;
		height: 317px;
	}

	.hero__eyebrow {
		margin-bottom: 0;
		font-family: var(--font-head);
		font-weight: 700;
		font-size: 18px;
		line-height: 22px;
		letter-spacing: .1px;
	}

	.hero__title {
		max-width: none;
		font-size: 38px;
		line-height: 44px;
		letter-spacing: -.015em;
	}

	.hero__card {
		width: 100%;
		height: 124px;
		min-height: 124px;
		padding: 16px 24px;
		background: rgba(92, 174, 251, .2);
	}

	.hero__card-title {
		max-width: none;
	}

	/* Intro */
	.intro {
		min-height: 1023px;
		padding: 0 16px 48px;
	}

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

	.intro__container {
		order: 1;
		display: block;
		padding: 0;
	}

	.intro__art {
		order: 0;
		position: static;
		margin: 0;
	}

	.intro__art img {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		height: 413px;
		object-fit: cover;
	}

	.intro__wrapper {
		width: 100%;
		height: 538px;
		gap: 32px;
	}

	.intro__title {
		max-width: none;
		height: 190px;
		margin: 0;
		font-size: 32px;
		line-height: 38px;
		letter-spacing: .25px;
		color: var(--navy);
	}

	.intro__body {
		max-width: none;
		margin: 0;
		font-family: var(--font-body);
		font-weight: 500;
		font-size: 16px;
		line-height: 22px;
		text-align: left;
	}

	.intro__body + .intro__body {
		margin-top: 0;
		font-weight: 400;
		line-height: 24px;
	}

	/* The second Home intro paragraph is regular-weight throughout in Figma. */
	.intro__body + .intro__body strong {
		font-weight: inherit;
	}

	/* Figma: regular 16/24 type; fills the column like the first paragraph. */
	.intro__body + .intro__body {
		width: 100%;
		max-width: none;
		letter-spacing: .15px;
	}

	.intro__btn {
		width: 100%;
		height: 44px;
		margin-top: 0;
		justify-content: center;
	}

	/* Stats */
	.stats__row {
		flex-direction: column;
		height: auto;
		padding-block: 24px;
		padding-inline: 0;
	}

	.stats__card {
		box-sizing: border-box;
		height: 123px;
		padding: 24px 36px 24px 32px;
		align-items: flex-start;
		justify-content: center;
		text-align: left;
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

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

	.stats__value {
		font-size: 32px;
		line-height: 38px;
		letter-spacing: .25px;
	}

	.stats__label {
		margin-top: 12px;
		font-size: 18px;
		line-height: 25px;
	}

	/* Biometrics */
	.biometrics__title {
		max-width: none;
		margin-bottom: 24px;
		font-size: 32px;
		line-height: 38px;
	}

	.biometrics__text {
		width: 100%;
		margin-left: 0;
	}

	.biometrics__text p {
		font-size: 16px;
		line-height: normal;
		text-align: left;
	}

	/* Services */
	.services__header {
		margin-bottom: 32px;
	}

	.services__title {
		font-size: 32px;
		line-height: 38px;
	}

	.services__intro {
		max-width: 361px;
		font-size: 16px;
		line-height: 24px;
	}

	.services__texture {
		left: 50%;
		top: -32px;
		width: 864px;
		height: 392px;
		opacity: .4;
		transform: translateX(-50%);
		-webkit-mask-image: none; /* desktop edge fades are tuned to the desktop placement */
		        mask-image: none;
	}

	.services__grid {
		grid-template-columns: 1fr;
		padding-inline: 0;
	}

	.service-card {
		min-height: 0;
		justify-content: flex-end; /* phones keep the content at the bottom, as before */
		padding: 24px;
		gap: 16px;
	}

	.service-card__title {
		font-size: 24px;
		line-height: 32px;
	}

	.service-card__desc {
		font-size: 16px;
	}

	/* Benefits */
	.benefits {
		padding-block: 40px;
	}

	.benefits__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-bottom: 24px;
	}

	.benefits__title {
		font-size: 32px;
		line-height: 38px;
	}

	.benefits__intro {
		width: 100%;
		font-size: 16px;
	}

	.benefits__grid {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 16px;
	}

	.benefits__col {
		gap: 16px;
	}

	.benefit-card__title {
		font-size: 24px;
		line-height: 32px;
	}

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

	.benefit-card--info {
		box-sizing: border-box;
		width: 100%;
		height: 416px;
		padding: 24px;
		gap: 12px;
	}

	.benefit-card--info .benefit-card__title {
		width: 277px;
		margin-bottom: 0;
	}

	.benefit-card__art img {
		left: 50%;
		top: -200px;
		transform: translateX(-50%);
	}

	/* CTA */
	.cta {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 690px;
		padding: 12px;
	}

	.cta .container {
		display: flex;
		width: 100%;
		height: 666px;
		padding: 0;
	}

	.cta__panel {
		box-sizing: border-box;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 48px;
		height: 666px;
		padding: 64px 16px;
		background: var(--white);
	}

	.cta__panel::before {
		display: block;
		background-image: url("../images/cta-wave-mobile.webp");
		background-position: -407px 0px;
		background-size: 1183px 666px;
		opacity: .1;
		transform: none;
		top: 169px;
		left: -100px;
		scale: 1.3;
		rotate: -10deg;
	}

	.cta__panel::after {
		display: block;
		background: linear-gradient(178.58deg,
			rgba(30, 54, 78, 1) -6.05%,
			rgba(30, 54, 78, .81) -1.23%,
			rgba(30, 54, 78, .64) 3.58%,
			rgba(30, 54, 78, .49) 8.4%,
			rgba(30, 54, 78, .36) 13.21%,
			rgba(30, 54, 78, .25) 18.03%,
			rgba(30, 54, 78, .16) 22.85%,
			rgba(30, 54, 78, .09) 27.66%,
			rgba(30, 54, 78, .04) 32.48%,
			rgba(30, 54, 78, .01) 37.29%,
			rgba(30, 54, 78, 0) 42.11%);
	}

	.cta__header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		width: 337px;
		max-width: 100%;
		height: 299px;
	}

	.cta__title {
		width: 291px;
		margin: 0;
		font-size: 32px;
		line-height: 38px;
		letter-spacing: .25px;
		color: var(--navy);
	}

	.cta__lead,
	.cta__body {
		width: 100%;
		margin: 0;
		font-weight: 500;
		font-size: 18px;
		line-height: 25px;
		text-align: center;
	}

	.cta__lead {
		height: 50px;
	}

	.cta__body {
		height: 125px;
	}

	.cta__desktop-copy {
		display: none;
	}

	.cta__mobile-copy {
		display: block;
	}

	.cta__bar {
		box-sizing: border-box;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 32px;
		width: 100%;
		height: 191px;
		margin: 0;
		padding: 24px;
		text-align: left;
	}

	.cta__bar-text {
		width: 100%;
		font-size: 18px;
		line-height: 25px;
	}

	.cta__bar .btn {
		width: 100%;
		height: 44px;
		padding: 8px 20px;
		font-size: 16px;
	}

	/* Footer */
	.site-footer {
		box-sizing: border-box;
		height: 905px;
		min-height: 0;
		padding: 40px 0;
	}

	.site-footer__inner {
		box-sizing: border-box;
		height: 825px;
		min-height: 0;
		padding: 0 24px;
		gap: 24px;
	}

	.site-footer__top {
		flex-direction: column;
		align-items: stretch;
		flex: none;
		height: 643px;
		gap: 24px;
	}

	.site-footer__brand {
		display: flex;
		flex-direction: column;
		gap: 16px;
		height: 98px;
		width: 100%;
	}

	.site-footer__desc {
		width: 100%;
		max-width: none;
		margin: 0;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: .15px;
	}

	.site-footer__mobile-desc > span {
		display: block;
		white-space: nowrap;
	}

	.site-footer__links {
		width: 100%;
		flex-direction: column;
		gap: 24px;
	}

	.site-footer__col {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	.site-footer__news {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.site-footer__form {
		width: 100%;
	}

	.site-footer__col-title {
		margin-bottom: 16px;
		line-height: 25px;
	}

	.site-footer__col ul li {
		line-height: 21px;
	}

	.site-footer__news .site-footer__col-title {
		margin-bottom: 0;
	}

	.site-footer__form input,
	.site-footer__subscribe {
		box-sizing: border-box;
		width: 100%;
		height: 48px;
	}

	.site-footer__form input {
		letter-spacing: .15px;
	}

	.site-footer__line {
		display: block;
		width: 100%;
		height: 1px;
		border: 0;
		background: rgba(255, 255, 255, .07);
		flex: none;
		margin: 0 0 -1px;
	}

	.site-footer__meta {
		flex-direction: column;
		align-items: flex-start;
		height: 134px;
		gap: 20px;
	}

	.site-footer__email { order: 0; }
	.site-footer__socials { order: 1; height: 52px; }
	.site-footer__copy {
		order: 2;
		width: 100%;
		font-family: var(--font-body);
		font-size: 14px;
		font-weight: 500;
		line-height: 21px;
		text-align: center;
		letter-spacing: .15px;
	}

	.site-footer__socials a {
		background: rgba(255, 255, 255, .07);
	}

	.svc-hero,
	.news-hero { min-height: 646px; padding: 128px 16px 48px; }

	.svc-hero {
		box-sizing: border-box;
		height: auto;
		min-height: 0;
		padding: var(--svc-hero-top, 154px) 0 48px;
		text-align: left;
	}

	.svc-hero__title {
		max-width: none;
		margin: 24px 0 0;
	}

	.svc-hero__sub {
		max-width: none;
		margin: 24px 0 0;
		font-size: 18px;
		line-height: 25px;
	}
	.svc-hero__title,
	.news-hero__title,
	.about-hero__title,
	.join-hero__heading,
	.contact-hero__title { font-size: 38px; line-height: 44px; letter-spacing: -.015em; }
	.svc-hero__eyebrow,
	.news-hero__eyebrow,
	.about-hero__eyebrow,
	.contact-hero__eyebrow { font-size: 18px; line-height: 22px; }
	.news-hero__intro,
	.about-hero__intro,
	.contact-hero__intro { font-size: 16px; line-height: 22px; }
	.svc-hero__sub,
	.join-hero__sub { font-size: 18px; line-height: 25px; }

	.svc-questions__grid,
	.team-profile__grid { flex-direction: column; min-height: 0; padding: 48px 16px; gap: 32px; }
	.svc-questions__col,
	.team-profile__text,
	.team-profile__photo { width: 100%; }
	.svc-questions__lead,
	.svc-q-card__text,
	.team-profile__bio { font-size: 16px; line-height: 24px; text-align: left; }
	/* Service Section 2: intro text + result card (standard for every service). */
	.svc-intro { padding: 28px 0 48px; } /* top trimmed: the hero helix already fades into this edge */
	.svc-intro__grid {
		flex-direction: column;
		align-items: center;
		gap: 60px;
		min-height: 0;
		padding: 0 16px;
	}
	.svc-intro__text { width: 100%; }
	.svc-intro__text p {
		font-size: 20px;
		line-height: 27px;
		text-align: left;
	}
	.svc-intro__mobile-copy { flex-direction: column; gap: 32px; }
	.svc-result {
		box-sizing: border-box;
		width: 100%;
		min-height: 400px;
		padding: 24px;
		gap: 16px;
		border-radius: 16px;
	}
	.svc-result__graph {
		width: 509px;
		height: 148px;
		left: calc(50% - 254.5px);
		top: 8px;
		opacity: .47;
	}
	.svc-result__title {
		font-size: 32px;
		line-height: 38px;
		letter-spacing: .25px;
		max-width: 304px;
	}
	.svc-result__text {
		font-size: 18px;
		line-height: 25px;
		text-align: left;
	}


	.svc-connected__title { font-size: 32px; line-height: 38px; }

	/* Service Section 4, "questions" layout (standard). */
	.svc-questions { padding: 48px 0; }
	.svc-questions > .container {
		display: flex;
		flex-direction: column;
		gap: 56px;
	}
	.svc-questions__header {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		width: 100%;
		margin: 0;
	}
	.svc-questions__eyebrow {
		font-size: 20px;
		line-height: 25px;
		letter-spacing: .15px;
	}
	.svc-questions__title {
		margin: 0;
		font-size: 32px;
		line-height: 38px;
		letter-spacing: .25px;
	}
	.svc-questions__lead {
		max-width: none;
		margin: 0;
		font-family: var(--font-body);
		font-weight: 500;
		font-size: 16px;
		line-height: 22px;
	}
	.svc-questions__grid {
		display: flex;
		flex-direction: column;
		gap: 16px;
		width: 100%;
		padding: 0;
	}
	.svc-questions__col { display: contents; }
	.svc-q-card {
		box-sizing: border-box;
		width: 100%;
		min-height: 0;
		padding: 23px; /* + 1px border = Figma's 24px (Figma borders sit inside the box) */
		gap: 16px;
		border-color: #e8e8e8;
		order: var(--mobile-order, 0);
	}
	.svc-q-card__title {
		font-size: 24px;
		line-height: 32px;
	}
	.svc-q-card__text {
		font-size: 18px;
		line-height: 25px;
	}

	/* Service Section 4, connected layout. Split = image on top, text below;
	   overlay = text over a faint image band at the top. */
	.svc-connected__inner { padding: 0 16px; }
	.svc-connected__text {
		width: 100%;
		max-width: none;
		gap: 24px;
	}
	.svc-connected__title { letter-spacing: .25px; }
	.svc-connected__body {
		max-width: none;
		margin: 0;
		font-weight: 500;
		font-size: 18px;
		line-height: 25px;
		text-align: left;
	}
	.svc-connected--split {
		gap: 48px;
		padding: 0 0 48px;
	}
	.svc-connected--split .svc-connected__media {
		aspect-ratio: auto;
		width: 100%;
	}
	.svc-connected--split .svc-connected__media img {
		position: static;
		width: 100%;
		height: auto;
		transform: none;
	}

	/* Service CTA (standard for every service, also used by About): Advisory's tuned look, sized by its content. */
	.cta:is(.cta--service, .cta--about) { height: auto; }
	.cta:is(.cta--service, .cta--about) .container,
	.cta:is(.cta--service, .cta--about) .cta__panel { height: auto; }
	.cta:is(.cta--service, .cta--about) .cta__panel::after {
		background: linear-gradient(178.58deg, rgba(30, 54, 78, .72) -6.05%, rgba(30, 54, 78, .40) 9%, rgba(30, 54, 78, .12) 23%, rgba(255, 255, 255, 0) 35%);
	}
	.cta:is(.cta--service, .cta--about) .cta__header {
		width: 100%;
		height: auto;
	}
	.cta:is(.cta--service, .cta--about) .cta__title { width: 100%; }
	.cta:is(.cta--service, .cta--about) .cta__lead,
	.cta:is(.cta--service, .cta--about) .cta__body { height: auto; }
	.cta:is(.cta--service, .cta--about) .cta__bar {
		height: auto;
		justify-content: flex-start;
		gap: 24px;
		padding: 23px; /* + 1px border = Figma's 24px */
	}
	.cta:is(.cta--service, .cta--about) .cta__bar-text {
		display: block;
		flex: none;
		text-align: left;
	}
	.cta:is(.cta--service, .cta--about) .cta__bar .btn {
		flex: none;
		margin: 0;
	}

	/* About CTA: Figma's 267px lead frame (3 centred lines). */
	.cta--about .cta__lead { max-width: 267px; margin-inline: auto; }
	/* The title is 0.3px wider than Figma's 337px frame in the browser; 2px of slack keeps it on one line. */
	.cta.cta--about .cta__title { width: calc(100% + 2px); margin-inline: -1px; }

	/* ---- Page overrides (match each page's own Figma; new services use the standard above) ---- */
	/* Advisory questions: the first card title is a few px wider than the card in the browser. */
	.svc-advisory .svc-q-card:first-child .svc-q-card__title { white-space: nowrap; }
	/* Biostatistics connected: Figma frames the wave in a 393x331 box, tilted 23deg, 32px above the text. */
	.svc-biostatistics .svc-connected--split { gap: 32px; }
	.svc-biostatistics .svc-connected--split .svc-connected__media { aspect-ratio: 393 / 331; }
	.svc-biostatistics .svc-connected--split .svc-connected__media img {
		position: absolute;
		inset: 0;
		height: 100%;
		object-fit: cover;
		transform: rotate(23deg);
	}
	/* Pharmacokinetics connected: Figma body text is 16/22. */
	.svc-pharmacokinetics .svc-connected__body { font-size: 16px; line-height: 22px; }
	/* Advisory / CDM CTA: Figma's narrower lead frame sets its line breaks. */
	.svc-advisory .cta__lead { margin-left: auto; margin-right: auto; }
	.svc-advisory .cta__lead { max-width: 289px; }
	/* CDM: CTA copy flows at full width like Biostatistics/PK. */
	/* Connected titles: Figma's narrower title frames set the line breaks. */
	.svc-clinical-data-management .svc-connected__title { max-width: 338px; }
	.svc-biostatistics .svc-connected__title { max-width: 308px; }
	/* Pharmacokinetics CTA: Figma's last bar line is a few px wider than the box. */
	.svc-pharmacokinetics .cta__bar-text { width: calc(100% + 12px); }

	/* Service Section 3: support cards (standard for every service).
	   Card height follows its text on mobile. */
	.svc-support { padding: 48px 0; }
	.svc-support__wave {
		width: 2048px;
		max-width: none;
		height: 1152px;
		left: -484px;
		top: -378px;
		transform: none;
	}
	.svc-support__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48px;
	}
	.svc-support__header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		width: 100%;
		max-width: none;
		margin: 0;
	}
	.svc-support__title {
		font-size: 32px;
		line-height: 38px;
		letter-spacing: .25px;
	}
	.svc-support__sub {
		width: 100%;
		max-width: none;
		margin: 0;
		font-weight: 500;
		font-size: 18px;
		line-height: 25px;
	}
	.svc-support__grid,
	.svc-support__grid--cols2 {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 16px;
		width: 100%;
		max-width: none;
		margin: 0;
	}
	.svc-card {
		box-sizing: border-box;
		flex: none;
		width: 100%;
		min-height: 0;
		padding: 24px;
		gap: 16px;
		order: var(--mobile-order, 0);
	}
	.svc-card__title {
		font-size: 24px;
		line-height: 32px;
	}
	.svc-card__text {
		font-weight: 500;
		font-size: 16px;
		line-height: 22px;
	}

	/* Figma mobile: hero text and stats are left-aligned; no binary background. */
	.about-hero { padding: 116px 0 24px; min-height: 0; text-align: left; }
	.about-hero__digits { display: none; }
	.about-hero__eyebrow { min-height: 46px; }
	.about-hero__intro { margin-top: 16px; }
	.about-hero__venn { margin-top: 48px; }
	.about-hero__venn img { height: 325px; object-fit: contain; }
	/* Stats: full-bleed rows (rule under each), text at 32px. */
	.about-stats { grid-template-columns: 1fr; margin: 24px calc(-1 * var(--gutter)) 0; }
	.about-stat,
	.about-stat:first-child { align-items: flex-start; gap: 12px; padding: 32px 36px 31px 32px; border-left: 0; border-top: 0; border-bottom: 1px solid #e8e8e8; } /* 153px incl. rule */
	.about-stat__label { line-height: 25px; }
	/* ---- About, Figma mobile. Sections with a .container get their 16px from it. ---- */
	/* Earlier: binary band (787x263) on top, text below. */
	.about-earlier { display: flex; flex-direction: column; min-height: 0; padding: 0 0 48px; gap: 52px; }
	.about-earlier__media,
	.about-earlier__blur { display: none; }
	.about-earlier__art { display: block; width: 787px; max-width: none; height: 263px; object-fit: cover; object-position: left top; }
	.about-earlier__inner { display: block; }
	.about-earlier__text { width: 100%; gap: 32px; }
	.about-earlier__body { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 25px; }
	.about-earlier__btn { width: 100%; justify-content: center; margin-top: 0; }
	.about-earlier__title,
	.about-how__title,
	.experience-title { font-size: 32px; line-height: 38px; letter-spacing: .25px; }

	/* How we work: one column, cards sized to their text. */
	.about-how { padding: 48px 0; }
	.about-how__wave { top: -378px; }
	.about-how__header { margin: 0 0 48px; }
	.about-how__sub { margin-top: 20px; font-size: 20px; line-height: 27px; }
	.about-how__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 16px; }
	.about-how__card { min-height: 0; box-shadow: 0 4px 12.6px rgba(0, 0, 0, .08); }

	/* Meet the team: header, then one card per row. */
	.about-team { padding: 48px 0 0; }
	.about-team__eyebrow { line-height: 25px; letter-spacing: .15px; }
	.about-team__intro { max-width: 349px; margin: 32px 0 64px; font-size: 24px; line-height: 32px; letter-spacing: 0; }
	.about-team__row { display: flex; flex-direction: column; gap: 16px; }
	.about-team__row + .about-team__row { margin-top: 16px; }
	.about-team__row > .team-card { flex: none; }
	.team-card { gap: 24px; padding: 16px; border-color: #e1e1e1; box-shadow: none; }
	/* Figma's 327x302 frame, scaled with the card so wider phones show the whole portrait. */
	.team-card__photo,
	.team-card--featured .team-card__photo { margin: 0; height: auto; aspect-ratio: 327 / 302; }
	.team-card--featured .team-card__photo img { object-fit: cover; }
	.team-card__info { gap: 24px; padding: 0; }
	.team-card__meta { gap: 8px; }
	.team-card__name { color: var(--ink); }
	.team-card__role { margin-top: 8px; color: var(--navy); }
	.team-card__more { width: 150px; height: 40px; justify-content: center; box-shadow: 0 0 4.8px rgba(0, 0, 0, .1); }

	/* Values card (Figma: part of the team section, 64px below the cards). */
	.about-values { margin-top: 0; padding: 64px 0 48px; }
	.values-card { gap: 32px; padding: 24px 16px; }
	.values-card__content { gap: 32px; padding-bottom: 32px; }
	.values-card__heading { font-size: 24px; line-height: 32px; letter-spacing: 0; color: var(--ink); }
	.values-card__graphic { display: none; }
	.values-points { display: flex; }
	.values-info { width: 100%; gap: 12px; padding: 22.5px 14.5px; } /* + 1.5px gradient border = Figma 24/16 */
	.values-info__body { font-size: 16px; line-height: 22px; text-align: left; }

	/* Our experience. */
	.experience-section { padding: 48px 16px; }
	.experience-header { margin: 0 0 48px; }
	.experience-eyebrow { line-height: 25px; }
	.experience-title { max-width: none; margin-bottom: 24px; }
	.experience-intro { font-size: 16px; line-height: 24px; letter-spacing: .15px; }
	.experience-grid,
	.experience-left { display: flex; flex-direction: column; gap: 16px; }
	.experience-card,
	.study-card {
		padding: 23px;
		border: 1px solid transparent;
		border-radius: 16px;
		background:
			linear-gradient(#fff, #fff) padding-box,
			linear-gradient(90deg, #12C7B5 0%, #2D767A 34.13%, #D01FC2 99.04%) border-box;
		box-shadow: 0 4px 16.6px rgba(45, 118, 122, .1);
	}
	.experience-card__title { margin-bottom: 32px; font-size: 24px; font-weight: 400; line-height: 32px; letter-spacing: 0; }
	.experience-tags,
	.modalities-list,
	.study-card__text { display: none; }
	.exp-rows { display: grid; }
	.study-card { min-height: 0; padding-top: 192px; }
	.study-card::before { top: -32px; width: 685px; height: 199px; }
	.study-card__content { max-width: none; }
	.study-card .experience-card__title { max-width: none; margin-bottom: 24px; font-size: 32px; font-weight: 500; line-height: 38px; letter-spacing: .25px; }
	.study-list { display: grid; }

	.join-hero { min-height: 633px; padding: 190px 0 48px; justify-content: flex-start; }
	/* Join section 2 on phones: binary image on top, heading and body text below */
	.join-intro { min-height: 0; flex-direction: column; align-items: stretch; gap: 32px; padding: 0 16px 48px; }
	.join-intro__media { position: static; display: block; width: 100%; max-width: none; height: 413px; }
	.join-intro__media img { object-fit: cover; object-position: center bottom; }
	.join-intro__text { width: 100%; gap: 56px; }
	.join-intro__title { font-size: 24px; line-height: 32px; letter-spacing: 0; }
	.join-intro__desc { gap: 33px; }
	.join-intro__body,
	.join-intro__cta { font-size: 24px; line-height: 33px; }
	.join-opps { padding: 48px 16px; }
	.join-opps__heading { font-size: 32px; line-height: 38px; }
	.join-opps__card { padding: 24px; }
	.join-opps__form { flex-direction: column; width: 100%; }
	.join-opps__input,
	.join-opps__btn { width: 100%; }

	/* Contact on phones: hero text left-aligned; form card with gradient border, paired fields side by side */
	.contact-hero { min-height: 437px; align-items: flex-start; padding: 140px 0 0; text-align: left; }
	.contact-hero__inner { align-items: flex-start; }
	.contact-hero__eyebrow { font-size: 20px; line-height: 25px; letter-spacing: .15px; }
	.contact-hero__intro { font-size: 24px; line-height: 33px; font-weight: 500; }
	.contact-form-section {
		min-height: 0;
		padding: 48px 0;
		/* Starts as the hero's #F9F9F9 (no edge under the hero, as in the Figma render) and deepens
		   to navy towards the bottom. */
		background: linear-gradient(0deg,
			#1E364E -2.75%,
			rgba(30, 54, 78, .72) 10%,
			rgba(30, 54, 78, .45) 25%,
			rgba(30, 54, 78, .22) 42%,
			rgba(30, 54, 78, .08) 60%,
			rgba(30, 54, 78, 0) 78%), #F9F9F9;
	}
	.contact-form-section::after { display: none; }
	.contact-form-section__wave { left: 0; top: -86px; width: 100%; height: 705px; transform: none; background-size: cover; }
	.contact-form-card {
		display: flex;
		flex-direction: column;
		height: auto;
		padding: 23px;
		gap: 40px;
		border: 1px solid transparent;
		background:
			linear-gradient(#fff, #fff) padding-box,
			linear-gradient(90deg, #12C7B5 0%, #2D767A 34.13%, #D01FC2 99.04%) border-box;
	}
	.contact-form-card__copy { min-height: 0; }
	.contact-form-card__title { margin-bottom: 16px; font-size: 24px; line-height: 32px; letter-spacing: 0; }
	.contact-form-card__body,
	.contact-form-card__cta { font-size: 16px; line-height: 24px; letter-spacing: .15px; }
	.contact-form-card__cta { margin-top: 19px; }
	.contact-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.contact-form input,
	.contact-form select { height: 45px; }
	.contact-form input,
	.contact-form select,
	.contact-form textarea { border-color: #e1e1e1; letter-spacing: .15px; }
	.contact-form input::placeholder,
	.contact-form textarea::placeholder { color: #8c8c8c; }
	.contact-form__submit { height: 44px; font-weight: 700; line-height: 25px; box-shadow: 0 0 4.6px rgba(45, 118, 122, .3); }

	/* News & Insights on phones: hero text left-aligned, full-width button; cards one per column */
	.news-hero { min-height: 0; padding: 160px 0 89px; justify-content: flex-start; } /* height = content (646 at 393) */
	.news-hero__eyebrow { min-height: 23px; }
	.news-hero__title { max-width: none; }
	.news-hero__intro { max-width: none; }
	.news-hero__btn { margin-top: 16px; } /* 40px below the intro, as in the Figma render */
	/* Hero arcs positioned relative to the button so part of the shape shows above it */
	.news-hero__arcs { top: calc(100% - 164px); bottom: auto; width: 1477px; height: 360px; background-size: 1477px auto; opacity: .35; }
	.news-featured,
	.news-latest { padding: 48px 0; }
	.news-sec__title { margin-bottom: 48px; font-size: 32px; line-height: 38px; letter-spacing: .25px; }
	.news-grid,
	.news-featured .news-grid { grid-template-columns: 1fr; row-gap: 16px; }
	.news-card__image { aspect-ratio: 359 / 277; } /* 277px tall inside the 1px card border */
	.news-card__body { padding: 24px; }
	.news-card__excerpt { -webkit-line-clamp: 3; }
	.cta--news .cta__lead { max-width: 309px; margin-inline: auto; }

	/* Team profile on phones: breadcrumb, photo, name and role beside the LinkedIn badge, bio */
	.team-profile { padding: 116px 0 40px; }
	.team-profile__digits { display: none; }
	.team-profile .breadcrumb { margin-bottom: 48px; }
	.team-profile__grid { padding: 0; gap: 56px; }
	.team-profile__photo { position: relative; height: auto; aspect-ratio: 361 / 391; }
	.team-profile__photo img { position: absolute; top: 9.46%; left: -13.3%; width: 118%; max-width: none; height: auto; object-fit: initial; }
	.team-profile__text { padding-top: 0; gap: 24px; }
	.team-profile__head { align-items: flex-start; gap: 24px; }
	.team-profile__name { font-size: 38px; line-height: 44px; letter-spacing: -.015em; }
	.team-profile__role { font-size: 16px; line-height: 22px; }
	.team-profile__linkedin { margin-top: 4px; }
	.team-profile__bio { font-size: 20px; line-height: 27px; color: var(--ink); }
	.team-profile__bio p + p { margin-top: 27px; }
}

@media (min-width: 480px) and (max-width: 767px) {
	.page-home .intro {
		min-height: 0 !important;
		padding: 0 24px 64px;
	}

	.page-home .intro__frame {
		gap: 32px;
	}

	.page-home .intro__art img {
		height: clamp(280px, 44vw, 340px);
	}

	.page-home .intro__wrapper {
		height: auto !important;
		min-height: 0;
		justify-content: flex-start;
		gap: 24px;
	}

	.page-home .intro__title {
		height: auto !important;
		min-height: 0;
		margin: 0 !important;
		font-size: clamp(34px, calc(3.5714vw + 12.5714px), 40px);
		line-height: clamp(40px, calc(3.5714vw + 18.5714px), 46px);
	}

	.page-home .intro__body {
		margin: 0 !important;
		font-size: 17px;
		line-height: 25px;
	}

	.page-home .intro__btn {
		width: auto;
		min-width: 220px;
	}

	.page-home .biometrics__title,
	.page-home .services__title,
	.page-home .benefits__title {
		font-size: clamp(32px, calc(3.3333vw + 12px), 60px);
		line-height: clamp(38px, calc(3.5714vw + 16.5714px), 68px);
	}
}

@media (min-width: 601px) and (max-width: 1439px) {
	.svc-hero__title,
	.about-hero__title,
	.join-hero__heading,
	.news-hero__title,
	.contact-hero__title {
		font-size: clamp(38px, calc(3.5714vw + 16.5714px), 68px);
		line-height: clamp(44px, calc(3.5714vw + 22.5714px), 74px);
	}

	.svc-support__title,
	.svc-questions__title,
	.svc-connected__title,
	.about-how__title,
	.experience-title,
	.news-sec__title,
	.about-earlier__title,
	.about-team__title,
	.contact-form-card__title {
		font-size: clamp(32px, calc(3.3333vw + 12px), 60px);
		line-height: clamp(38px, calc(3.5714vw + 16.5714px), 68px);
	}

	.svc-hero__sub,
	.about-hero__intro,
	.join-hero__sub,
	.news-hero__intro,
	.contact-hero__intro,
	.svc-support__sub {
		font-size: clamp(16px, calc(.9524vw + 10.2857px), 24px);
		line-height: clamp(22px, calc(1.1905vw + 14.8571px), 32px);
	}
}

/* Service and About mobile copy (SCF): shown only in the mobile layout; desktop copy is the fallback */
.pcdm-service-mobile-copy { display: none; }
.pcdm-about-mobile-copy { display: none; }

@media (max-width: 600px) {
	.pcdm-desktop-copy { display: none !important; }
	.pcdm-service-mobile-copy { display: inline; }
	.pcdm-about-mobile-copy { display: inline; }
	.pcdm-about-mobile-block { display: block; }
	/* About hero title on phones: one gradient spans the whole title across wrapped lines */
	.about-hero__title .pcdm-about-mobile-copy {
		display: block;
		background: linear-gradient(90deg, #12C7B5 0, #2D8A86 41px, #486786 109px, #5E5B8F 141px, #734F98 169px, #8744A1 196px, #C623BD 272px);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: var(--navy);
	}
	.about-hero__title .pcdm-about-mobile-copy .grad-text {
		background: none;
		-webkit-text-fill-color: transparent;
	}
	.site-footer__desktop-desc { display: none; }
	.site-footer__mobile-desc { display: block; }
	.join-hero__sub { max-width: 333px; margin-left: auto; margin-right: auto; }

	/* Service hero on phones: bottom space holds the binary helix, anchored to the left edge */
	.svc-hero { padding-bottom: 241px; }
	.svc-hero__digits {
		inset: auto;
		width: 560px;
		height: 315px;
		left: 67px;
		bottom: -57px;
		scale: 1.2;
		background-size: 560px 315px;
		background-position: 0 0;
		opacity: .25;
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 66%, transparent 76.5%);
		        mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 66%, transparent 76.5%);
	}
	.home-mobile-copy.pcdm-mobile-fixed-lines br,
	.cta__mobile-copy.pcdm-mobile-fixed-lines br { display: inline; }
	.svc-intro__mobile-copy { display: flex; }
}

/* Home "What this means for your study" card, 768-1200px: arcs left half, text right half */
@media (min-width: 768px) and (max-width: 1200px) {
	.benefit-card--info {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-content: center;
		column-gap: 0;
		min-height: 280px;
		padding: 40px 0;
	}

	/* The art sits in the same rows as the heading and text, so it starts at the
	   top of the heading and ends at the bottom of the text. */
	.benefit-card--info .benefit-card__art {
		position: relative;
		inset: auto;
		grid-column: 1;
		grid-row: 1 / 3;
		width: auto;
		margin: 0 0 0 24px;
		overflow: hidden;
	}

	.benefit-card--info .benefit-card__art picture {
		display: contents;
	}

	.benefit-card--info .benefit-card__art img {
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: fill; /* whole artwork always visible; it stretches with the box */
	}

	.benefit-card--info .benefit-card__title,
	.benefit-card--info .benefit-card__body {
		grid-column: 2;
		padding: 0 40px;
	}

	.benefit-card--info .benefit-card__title {
		margin-bottom: 24px;
	}
}

/* Footer, 768-1100px: brand on top, link columns and newsletter share a row */
@media (min-width: 768px) and (max-width: 1100px) {
	.site-footer,
	.site-footer__inner {
		height: auto;
		min-height: 0;
	}

	.site-footer__top {
		flex: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 40px;
	}

	.site-footer__brand {
		width: 100%;
		max-width: none;
	}

	.site-footer__desc {
		max-width: 560px;
	}

	.site-footer__links {
		width: 100%;
		justify-content: space-between;
		gap: 40px;
	}

	.site-footer__news {
		flex: 0 1 366px;
		width: auto;
		min-width: 0;
	}

	.site-footer__line {
		margin-top: 40px;
	}
}

/* Home stats, 768-1100px: 2 x 2 grid */
@media (min-width: 768px) and (max-width: 1100px) {
	.stats__row.home-desktop-copy {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		height: auto;
	}

	.stats__card {
		padding: 28px 32px;
		border-right: 0;
	}

	.stats__card:nth-child(odd) {
		border-right: 1px solid var(--line);
	}

	.stats__card:nth-child(-n + 2) {
		border-bottom: 1px solid var(--line);
	}
}

/* Service hero, 601-767px: binary band below the text, same as 768+ */
@media (min-width: 601px) and (max-width: 767px) {
	.svc-hero {
		padding-bottom: 237px;
	}

	.svc-hero__digits {
		background-position: center bottom -345px;
	}
}

/* Service Section 2, 601-1000px: intro text and result card side by side */
@media (min-width: 601px) and (max-width: 1000px) {
	/* Both columns match the taller one's height */
	.svc-intro__grid {
		flex-direction: row;
		align-items: stretch;
		gap: 32px;
	}

	.svc-intro__text {
		flex: 0 0 calc(50% - 16px);
		width: auto;
		justify-content: center;
	}

	.svc-result {
		flex: 0 0 calc(50% - 16px);
		width: auto;
	}

	.svc-result__graph {
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Service Section 4 overlay layout (CDM), 800px and below: binary strip becomes a bar across the top */
@media (max-width: 800px) {
	/* Top space = bar height (scales with width) plus a small gap to the title */
	.svc-connected:not(.svc-connected--split) {
		box-sizing: border-box;
		min-height: 0;
		padding: max(48px, calc(8px + 7.8125vw)) 0 48px;
		justify-content: flex-start;
	}

	.svc-connected:not(.svc-connected--split) .svc-connected__digits {
		top: 4px;
		left: 50%;
		width: max(511px, 100%);
		max-width: none;
		height: auto;
		clip-path: none;
		scale: none;
		transform: translateX(-50%);
	}

	.svc-connected:not(.svc-connected--split) .svc-connected__inner {
		align-items: flex-start;
		justify-content: flex-start;
	}
}

/* Overlay layout, 801-1000px: text block narrows to keep clear of the left strip */
@media (min-width: 801px) and (max-width: 1000px) {
	.svc-connected:not(.svc-connected--split) .svc-connected__text {
		max-width: calc(100% - 223px);
	}
}

/* Pharmacokinetics Section 4, 601-900px: image and text columns side by side */
@media (min-width: 601px) and (max-width: 900px) {
	.svc-pharmacokinetics .svc-connected--split {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding: 0;
		min-height: var(--cs-h, 656px);
	}

	.svc-pharmacokinetics .svc-connected--split .svc-connected__media {
		flex: 0 0 var(--media-w, 60%);
		width: auto;
		height: auto;
		aspect-ratio: auto;
	}

	.svc-pharmacokinetics .svc-connected--split .svc-connected__media img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: var(--ci-obj-pos, right center);
		transform: var(--ci-flip, none);
	}

	.svc-pharmacokinetics .svc-connected--split .svc-connected__media::after {
		display: block;
	}

	.svc-pharmacokinetics .svc-connected--split .svc-connected__body-col {
		flex: 1 1 auto;
		justify-content: center;
		padding: 48px 32px 48px 24px;
	}

	.svc-pharmacokinetics .svc-connected--split .svc-connected__text {
		max-width: var(--ct-w, 550px);
	}

	.svc-pharmacokinetics .svc-connected--split .svc-connected__title {
		font-size: clamp(32px, calc(3.3333vw + 12px), 60px);
		line-height: clamp(38px, calc(3.5714vw + 16.5714px), 68px);
	}
}

/* About "Earlier biometrics" on tablets (768-1100): binary band full width on top, text below */
@media (min-width: 768px) and (max-width: 1100px) {
	.about-earlier { min-height: 0; padding: 0 0 72px; gap: 56px; }
	.about-earlier__media,
	.about-earlier__blur { display: none; }
	.about-earlier__art { display: block; width: 100%; max-width: none; height: auto; aspect-ratio: 2048 / 684; object-fit: cover; object-position: left top; }
	.about-earlier__inner { justify-content: flex-start; }
	.about-earlier__text { width: 100%; max-width: 760px; }
}

/* About featured team cards on tablets: photo fills the frame, top-anchored */
@media (min-width: 768px) and (max-width: 1100px) {
	.team-card--featured .team-card__photo img { object-fit: cover; object-position: center top; }
}
/* About team cards, 601-900px: two per row, last one centred */
@media (min-width: 601px) and (max-width: 900px) {
	.about-team__row:not(.about-team__row--featured) { flex-wrap: wrap; justify-content: center; }
	.about-team__row:not(.about-team__row--featured) > .team-card { flex: 0 1 calc(50% - 12px); }
}
@media (min-width: 601px) and (max-width: 767px) {
	.about-team__row,
	.about-team__row:not(.about-team__row--featured) { flex-direction: row; gap: 16px; }
	.about-team__row > .team-card,
	.about-team__row:not(.about-team__row--featured) > .team-card { flex: 0 1 calc(50% - 8px); }
}

/* About "Our experience" on tablets (768-1100): list layout, Therapeutic areas and Modalities
   side by side, Study & Design full width below with items in two columns */
@media (min-width: 768px) and (max-width: 1100px) {
	.experience-grid { display: flex; flex-direction: column; gap: 16px; max-width: none; }
	.experience-left { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.experience-tags,
	.modalities-list,
	.study-card__text { display: none; }
	.exp-rows,
	.study-list { display: grid; }
	.experience-card { padding: 24px; }
	.study-card { min-height: 0; justify-content: flex-start; padding: 200px 24px 32px; }
	.study-card::before { top: -32px; width: max(685px, 100%); height: 199px; background-size: cover; }
	.study-card__content { max-width: none; }
	.study-card .experience-card__title { max-width: none; margin-bottom: 24px; }
	.study-list li { font-size: 16px; line-height: 22px; }
}
@media (min-width: 768px) and (max-width: 900px) {
	.experience-left { grid-template-columns: 1fr; }
}

/* Team profile: 901+ photo scales with the row; 601-900 stacked with the photo width capped */
@media (min-width: 901px) {
	.team-profile__photo { width: min(608px, 47.5%); height: auto; aspect-ratio: 608 / 790; }
}
@media (min-width: 601px) and (max-width: 900px) {
	.team-profile__photo { position: relative; width: min(100%, 480px); height: auto; aspect-ratio: 361 / 391; align-self: center; } /* centred above the text */
	.team-profile__photo img { position: absolute; top: 9.46%; left: -13.3%; width: 118%; max-width: none; height: auto; object-fit: initial; }
}

/* News cards, 601-767px: two per row */
@media (min-width: 601px) and (max-width: 767px) {
	.news-grid,
	.news-featured .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* News hero: phones (<=600) text left-aligned with a full-width button; 601-767 stays centred */
@media (max-width: 600px) {
	.news-hero { text-align: left; }
	.news-hero__inner { align-items: stretch; }
	.news-hero__btn { justify-content: center; }
}

/* Join "Work with us" on phones: fields stacked, role text and full-width Apply button stacked */
@media (max-width: 767px) {
	.join-apply {
		padding: 48px 0;
		background: linear-gradient(0.03deg, #1E364E -2.73%, rgba(255, 255, 255, 0) 93.58%), var(--surface-100);
	}
	.join-apply__card { padding: 24px; }
	.join-apply__row { grid-template-columns: 1fr; }
	.join-apply__role { flex-direction: column; align-items: stretch; }
	.join-apply__role-btn { width: 100%; min-width: 0; }
}

/* Join section 2 on tablets (768-1100): image band on top, text below */
@media (min-width: 768px) and (max-width: 1100px) {
	.join-intro { min-height: 0; flex-direction: column; align-items: stretch; gap: 48px; padding: 0 var(--gutter) 72px; }
	.join-intro__media { position: static; display: block; width: 100%; height: 413px; }
	.join-intro__media img { object-fit: cover; object-position: center bottom; }
	.join-intro__text { width: 100%; max-width: 760px; }
}

/* Contact form on phones (<=600): one field per row */
@media (max-width: 600px) {
	.contact-form__row { grid-template-columns: 1fr; gap: 24px; }
}

/* Contact card on tablets (768-1100): text on top, form below at full width */
@media (min-width: 768px) and (max-width: 1100px) {
	.contact-form-section { padding: 72px 0; } /* the container's gutter gives the sides */
	.contact-form-card { display: flex; flex-direction: column; height: auto; gap: 40px; max-width: 760px; }
	.contact-form-card__copy { min-height: 0; }
}

/* Privacy Policy below desktop: the contents card is hidden (as in the Figma mobile frame)
   and the policy uses the full width. */
@media (max-width: 1000px) {
	.pp-toc { display: none; }
}
/* Phones (Figma 393): hero 456 (eyebrow 18/22, title 38/44, intro 20/27, centred); policy card
   24px/16px padding; headings 24/32. */
@media (max-width: 767px) {
	.pp-hero { min-height: 456px; padding: 92px 0 36px; }
	.pp-hero__inner { gap: 22px; }
	.pp-hero__eyebrow { font-weight: 500; font-size: 18px; line-height: 22px; letter-spacing: 0.1px; }
	.pp-hero__title { font-size: 38px; line-height: 44px; letter-spacing: -0.015em; }
	.pp-hero__intro { max-width: none; }
	.pp-content { padding: 48px 0; }
	.pp-doc { padding: 23px 15px; } /* + 1px border = Figma 24/16 */
	/* Privacy section headings on phones: single size, balanced wrapping */
	.pp-doc__heading { font-size: 26px; line-height: 32px; letter-spacing: 0; text-wrap: balance; }
	.pp-doc__section,
	.pp-toc { scroll-margin-top: 88px; }
}

/* Footer on phones: heights follow the content */
@media (max-width: 767px) {
	.site-footer,
	.site-footer__inner,
	.site-footer__top,
	.site-footer__meta { height: auto; }
}

/* Contact menu item: shown in the phone/tablet menu, hidden on desktop where the bar has a Contact button */
.site-nav__menu-contact { display: none; }
@media (max-width: 1100px) {
	.site-nav__menu > ul > li.site-nav__menu-contact { display: block; }
}


/* =====================================================================
   Sticky header, full-height Home hero, hover effects.
   Kept last so these override the earlier per-page nav rules.
   ===================================================================== */

/* Sticky header: fixed at the top; once scrolled (main.js adds html.nav-scrolled)
   it sits 12px from the top, white with a soft shadow. */
.site-nav {
	position: fixed;
	transition: top var(--dur) var(--ease);
}
.site-nav__bar {
	transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
html.nav-scrolled .site-nav { top: 12px; }
html.nav-scrolled .site-nav__bar {
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(30, 54, 78, 0.12);
}
html.nav-scrolled .site-nav__menu > ul > li > a,
html.nav-scrolled .site-nav__toggle { color: var(--ink); }
html.nav-scrolled .site-nav__caret svg path { stroke: var(--ink); }
html.nav-scrolled .site-nav__burger span { background: var(--ink); }
html.nav-scrolled .site-nav__logo-dark { display: contents; }
html.nav-scrolled .site-nav__logo-light { display: none; }
/* In-page anchor links land below the fixed header */
html { scroll-padding-top: 104px; }
/* Logged-in editors: clear the WordPress admin bar. */
.admin-bar .site-nav { margin-top: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-nav { margin-top: 46px; }
}

/* Home hero fills the screen height, with a minimum for very short windows */
.hero__inner {
	min-height: max(640px, 100vh);
	min-height: max(640px, 100svh);
}
@media (max-width: 767px) {
	.hero__inner {
		min-height: max(560px, 100vh);
		min-height: max(560px, 100svh);
	}
}

/* Hover effects: pointer devices only, none with reduced motion. Links lift; info boxes deepen their shadow. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.btn {
		transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
	}
	.btn:hover {
		transform: translateY(-1px);
		background-color: #f6fbfb;
	}
	.btn .btn__icon,
	.btn .icon-swap,
	.service-card__icon,
	.news-card__arrow {
		transition: transform var(--dur) var(--ease);
	}
	.btn:hover .btn__icon,
	.btn:hover .icon-swap,
	.service-card:hover .service-card__icon,
	a.news-card:hover .news-card__arrow {
		transform: translateX(3px);
	}

	.service-card,
	a.news-card {
		transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	}
	.service-card:hover,
	a.news-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 32px rgba(30, 54, 78, 0.12);
	}

	.svc-card,
	.svc-q-card,
	.benefit-card,
	.experience-card,
	.team-card {
		transition: box-shadow var(--dur) var(--ease);
	}
	.svc-card:hover,
	.svc-q-card:hover,
	.benefit-card:hover,
	.experience-card:hover,
	.team-card:hover {
		box-shadow: 0 12px 28px rgba(30, 54, 78, 0.10);
	}
}

/* Nav current-page state: underline. Desktop bar only. */
@media (min-width: 1101px) {
	.site-nav__menu > ul > li > a.is-current::after { opacity: 1; }
	.site-nav__toggle.is-current::after {
		display: block;
		opacity: 1;
		right: 34px; /* under the label, not the caret */
	}
}
@media (max-width: 1100px) {
	.site-nav__menu a.is-current { font-weight: 700; color: var(--navy); }
}

/* Home glass bar (phones/tablets, before scrolling): Figma "Hero Navbar" fill. */
.page-home .site-nav__bar { background-color: rgba(92, 174, 251, 0.16); }
@media (min-width: 1101px) {
	.page-home .site-nav__bar { background-color: #ffffff; }
}
html.nav-scrolled .site-nav__bar { background-color: #ffffff; }

/* Phone/tablet menu: open panel scrolls if taller than the screen */
@media (max-width: 1100px) {
	.site-nav.is-open .site-nav__menu {
		max-height: calc(100vh - 100px);
		max-height: calc(100svh - 100px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* =====================================================================
   Home - fit to screen height on desktop: on windows shorter than 1040px,
   spacing, large headings and cards scale with the viewport height (vh).
   ===================================================================== */
@media (min-width: 1101px) and (max-height: 1040px) {
	/* Section padding: Figma 96px -> ~54px at 900 high, ~46px at 768. */
	.biometrics,
	.services,
	.benefits {
		padding-block: clamp(40px, 6vh, 96px);
	}

	/* Section headings (Figma 60/68): capped by the screen height as well as the width. */
	.biometrics__title,
	.services__title,
	.benefits__title {
		font-size: min(clamp(32px, calc(3.3333vw + 12px), 60px), 6.4vh);
		line-height: 1.13;
	}

	/* Biometrics: heading -> text gap and paragraph gap. */
	.biometrics__title { margin-bottom: clamp(24px, 4vh, 58px); }
	.biometrics__text { gap: clamp(20px, 3.5vh, 40px); }

	/* Services: header -> cards gap, card height and padding. */
	.services__header { margin-bottom: clamp(28px, 5vh, 80px); }
	.services__grid .service-card {
		min-height: clamp(196px, 27vh, 260px);
		padding: clamp(20px, 3vh, 32px);
		gap: clamp(14px, 2vh, 24px);
	}
	.services__grid .service-card__title {
		font-size: min(32px, 3.6vh);
		line-height: 1.19;
	}

	/* Benefits: header -> cards gap, card padding and titles. */
	.benefits__header { margin-bottom: clamp(28px, 6vh, 96px); }
	.benefits__grid,
	.benefits__col { gap: clamp(16px, 2.4vh, 24px); }
	.benefit-card { padding: clamp(16px, 2.4vh, 24px); }
	.benefit-card--info { padding: clamp(20px, 3vh, 32px) clamp(16px, 2.4vh, 24px); }
	.benefit-card__title {
		font-size: min(32px, 3.6vh);
		line-height: 1.19;
		margin-bottom: clamp(10px, 1.6vh, 16px);
	}
	.benefit-card--info .benefit-card__title { margin-bottom: clamp(16px, 3vh, 32px); }
}

/* Short desktop windows (<=800px high): smaller Benefits card text */
@media (min-width: 1101px) and (max-height: 800px) {
	.benefit-card__body {
		font-size: 15px;
		line-height: 20px;
	}
}
@media (min-width: 1101px) and (max-height: 800px) {
	.benefits { padding-block: 32px; }
	.benefits__header { margin-bottom: 24px; }
}

/* Narrow desktops (1101-1200px) on shorter windows: compact Benefits section */
@media (min-width: 1101px) and (max-width: 1200px) and (max-height: 1040px) {
	.benefits { padding-block: 32px; }
	.benefits__header { margin-bottom: 24px; }
	.benefit-card--info {
		min-height: 0;
		padding: 24px 0;
	}
	.benefit-card--info .benefit-card__title { margin-bottom: 12px; }
	.benefit-card__title {
		font-size: 26px;
		line-height: 32px;
	}
	.benefit-card__body {
		font-size: 14px;
		line-height: 19px;
	}
}

/* Home hero "Book a time" card: smooth grow on hover (height, background, border) */
/* Higher specificity to override the load-reveal "transition: none" rule */
.hero .hero__card[data-reveal] {
	transition:
		min-height 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		background-color 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero__card::before { transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
	.hero .hero__card[data-reveal],
	.hero__card::before { transition: none; }
}

/* Sticky header hides while scrolling down and slides back on scroll up (main.js: html.nav-hidden). */
.site-nav {
	transition: top var(--dur) var(--ease), transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.nav-hidden .site-nav {
	/* fully above the screen, including the admin-bar offset and the 12-24px top gap (phones too) */
	transform: translateY(calc(-100% - 120px));
}
@media (prefers-reduced-motion: reduce) {
	.site-nav { transition: none; }
}

/* Home: tighter spacing between the metrics row and the biometrics heading. Desktop. */
@media (min-width: 1101px) {
	.stats__row { padding-bottom: 16px; }
	.biometrics {
		padding-top: 48px;
		padding-bottom: 72px;
	}
}
@media (min-width: 1101px) and (max-height: 1040px) {
	.biometrics {
		padding-top: clamp(28px, 4vh, 48px);
		padding-bottom: clamp(36px, 5vh, 72px);
	}
}

/* Home: intro (section 2) and metrics spacing. Desktop only. */
/* Home section 2: top and bottom padding on all desktop widths */
@media (min-width: 1101px) {
	.page-home .intro__container {
		padding-top: 72px;
		padding-bottom: 72px;
	}
}
@media (min-width: 1101px) {
	.stats__row {
		height: auto; /* 24px top padding above the cards */
		padding-top: 24px;
	}
}

/* =====================================================================
   Fit to screen height - About. Desktop windows shorter than the sections need;
   sizes scale with the screen height.
   ===================================================================== */
@media (min-width: 1101px) and (max-height: 1040px) {
	/* Hero, Venn diagram and stats in one screen: diagram size and spacing scale with the height */
	.about-hero {
		padding-top: clamp(112px, 15vh, 200px);
		padding-bottom: clamp(32px, 5vh, 96px);
		min-height: 0;
	}
	.about-hero__venn { margin-top: clamp(20px, 3.5vh, 56px); }
	.about-hero__venn img {
		width: auto;
		height: clamp(210px, calc(100vh - 640px), 509px);
	}
	.about-stats { margin-top: clamp(20px, 3.5vh, 80px); }
}
@media (min-width: 1101px) and (max-height: 1040px) {
	/* How we work: padding, heading gap and the six cards scale with the screen height. */
	.about-how { padding-block: clamp(40px, 6vh, 96px); }
	.about-how__header { margin-bottom: clamp(28px, 4.5vh, 72px); }
	.about-how__title { font-size: min(60px, 6.4vh); line-height: 1.13; }
	.about-how__card {
		min-height: clamp(200px, 26vh, 266px);
		padding-block: clamp(20px, 3vh, 28px);
	}
}
@media (min-width: 1101px) and (max-height: 800px) {
	.about-how { padding-block: 32px; }
	.about-how__header { margin-bottom: 24px; }
	.about-how__sub { margin-top: 12px; }
	.about-how__grid { gap: 16px; }
	.about-how__card { padding-block: 18px; }
}
@media (min-width: 1101px) and (max-height: 1040px) {
	/* Our experience: padding, heading spacing, card padding and the study card height scale with
	   the screen height. */
	.experience-section { padding-block: clamp(40px, 6vh, 96px); }
	.experience-header { margin-bottom: clamp(24px, 4vh, 64px); }
	.experience-eyebrow { margin-bottom: clamp(12px, 1.8vh, 24px); }
	.experience-title { margin-bottom: clamp(12px, 1.8vh, 24px); }
	.experience-title { font-size: min(48px, 5.2vh); }
	.experience-card { padding: clamp(16px, 2.2vh, 24px); }
	.experience-left,
	.experience-grid { gap: clamp(12px, 1.6vh, 16px); }
	.study-card {
		min-height: clamp(400px, 52vh, 540px);
		padding-block: clamp(20px, 3vh, 32px);
	}
}

/* =====================================================================
   Fit to screen height - service pages
   ===================================================================== */
@media (min-width: 1101px) and (max-height: 1040px) {
	/* Support cards: padding, heading gap, heading size and card padding scale with the height. */
	.svc-support { padding-block: clamp(40px, 6vh, 96px); }
	.svc-support__header { margin-bottom: clamp(28px, 4.5vh, 80px); }
	.svc-support__title { font-size: min(60px, 6.4vh); line-height: 1.13; }
	.svc-support .svc-card {
		padding-block: clamp(18px, 2.6vh, 28px);
		gap: clamp(10px, 1.4vh, 16px);
	}
	.svc-support__grid { gap: clamp(16px, 2.2vh, 24px); }
}
@media (min-width: 1101px) and (max-height: 1040px) {
	/* Advisory questions: padding, heading block and card spacing scale with the height. */
	.svc-questions { padding-block: clamp(40px, 6vh, 96px); }
	.svc-questions__header { margin-bottom: clamp(24px, 4vh, 56px); }
	.svc-questions__title { margin-top: clamp(12px, 1.8vh, 24px); font-size: min(60px, 6.4vh); line-height: 1.13; }
	.svc-questions__lead { margin-top: clamp(12px, 1.8vh, 24px); }
	.svc-questions__grid,
	.svc-questions__col { gap: clamp(16px, 2.2vh, 24px); }
	.svc-q-card { padding-block: clamp(18px, 2.6vh, 28px); }
}

/* =====================================================================
   Fit to screen height - team profile. Photo keeps its proportions and its
   height follows the screen, so breadcrumb and photo fit in one screen.
   ===================================================================== */
@media (min-width: 1101px) and (max-height: 1040px) {
	.team-profile { padding-top: clamp(104px, 13vh, 160px); }
	.team-profile .breadcrumb { margin-bottom: clamp(20px, 3vh, 48px); }
	.team-profile__photo {
		height: min(790px, calc(100vh - 13vh - 120px));
		width: auto;
		aspect-ratio: 608 / 790;
	}
}

/* Contact card paragraph: full column width on desktop (line breaks are in the text) */
@media (min-width: 1101px) {
	.contact-form-card__body { max-width: none; }
}

/* Fit to screen height - shorter desktop windows */
@media (min-width: 1101px) and (max-height: 1040px) {
	/* About - Earlier biometrics: height at most the window */
	.about-earlier { min-height: min(776px, 100vh); padding-block: clamp(40px, 6vh, 96px); }
	/* About - Values: smaller bottom padding. */
	.about-values { padding-bottom: clamp(32px, 5vh, 96px); }
}
@media (min-width: 1101px) and (max-height: 800px) {
	/* About - Our experience on short windows. */
	.experience-section { padding-block: 28px; }
	.experience-header { margin-bottom: 20px; }
	.experience-eyebrow,
	.experience-title { margin-bottom: 8px; }
	.experience-card { padding: 14px 16px; }
	.experience-left,
	.experience-grid { gap: 10px; }
	.study-card { min-height: 0; padding-block: 18px; }
}
@media (min-width: 1101px) and (max-height: 1040px) {
	/* Service support cards: the per-page "Card min height" floor (214-266px) scales with height. */
	.svc-support .svc-card { min-height: min(var(--svc-card-h, 214px), 30vh); }
	/* Contact form section and Join / News heroes: height at most the window */
	.contact-form-section { min-height: min(776px, 100vh); padding-block: clamp(40px, 6vh, 96px); }
	.join-hero,
	.news-hero { min-height: min(812px, 100vh); }
	/* News - latest news: padding and gaps scale with height. */
	.news-latest,
	.news-featured { padding-block: clamp(40px, 6vh, 96px); }
	.news-sec__title { margin-bottom: clamp(24px, 4vh, 64px); }
	.news-latest__more,
	.news-featured__more { margin-top: clamp(20px, 3vh, 48px); }
}
@media (min-width: 1101px) and (max-height: 800px) {
	.svc-support { padding-block: 28px; }
	.svc-support__header { margin-bottom: 20px; }
	.svc-support__sub { margin-top: 12px; }
	.svc-support__grid { gap: 12px; }
	.svc-support .svc-card { padding-block: 14px; gap: 8px; }
}

/* Home section 2, 1101-1439px: no minimum height, section fits its text */
@media (min-width: 1101px) and (max-width: 1439px) {
	.page-home .intro__frame { min-height: 0; }
}

/* About hero load animation: rise on its own GPU layer to avoid heading jitter.
   Order: text, then diagram, then stats (stats delay set in main.js). */
.about-hero [data-reveal] {
	transform: translate3d(0, 20px, 0);
	transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--reveal-delay, 0ms);
	backface-visibility: hidden;
}
.about-hero [data-reveal="fade"] { transform: none; }
.about-hero [data-reveal].is-visible { transform: translate3d(0, 0, 0); }
@media (prefers-reduced-motion: reduce) {
	.about-hero [data-reveal] { transition: none; transform: none; }
}

/* About section 2 on narrower, shorter desktop windows: section fits its text */
@media (min-width: 1101px) and (max-width: 1599px) and (max-height: 900px) {
	.about-earlier { min-height: 0; padding-block: 72px; }
}

/* Home base spacing on all desktop widths: stat cards and the next section */
@media (min-width: 1101px) {
	.page-home .stats__row { padding-top: 36px; }
	.page-home .biometrics { padding-top: 84px; } /* + 16px stats bottom padding = 100px gap */
	.page-home .biometrics { padding-bottom: 84px; }
	/* Heading width in em so it keeps three lines as the font scales */
	.page-home .biometrics__title { max-width: 12em; }
	/* "Working together to deliver better evidence" (services): 72px top and bottom */
	.page-home .services { padding-top: 72px; padding-bottom: 72px; }
	/* "Why sponsors choose PureCDM" (benefits): 72px top and bottom */
	.page-home .benefits { padding-top: 72px; padding-bottom: 72px; }
}

/* =====================================================================
   Short laptop screens: desktop windows 740px high or less.
   Each section fits in one screen.
   ===================================================================== */
@media (min-width: 1101px) and (max-height: 740px) {
	/* Home */
	.hero__inner { min-height: max(560px, 100vh); min-height: max(560px, 100svh); }
	.page-home .intro__container { padding-top: 40px; padding-bottom: 40px; }
	.page-home .stats__row { padding-top: 24px; }
	.page-home .biometrics { padding-top: 48px; padding-bottom: 40px; }
	.page-home .services { padding-top: 40px; padding-bottom: 40px; }
	.page-home .benefits { padding-top: 40px; padding-bottom: 40px; }

	/* Service pages */
	.svc-hero { min-height: min(723px, 100vh); padding-top: clamp(150px, 30vh, 239px); }
	.svc-intro__grid { min-height: min(632px, 100vh); }
	.svc-questions { padding-block: 32px; }
	.svc-connected { min-height: min(var(--cs-h, 667px), 100vh); }

	/* About */
	.experience-section { padding-block: 24px; }

	/* News, Join, Contact */
	.news-latest { padding-block: 40px; }
	.join-intro { min-height: min(722px, 100vh); padding-block: 40px; }
	.contact-hero { min-height: min(625px, 100vh); }
	.contact-form-section { min-height: 0; padding-block: 24px; }
	.contact-form-card { padding-block: 28px; }
	.contact-form-card__copy { min-height: 0; }
	.contact-form { gap: 16px; }

	/* Home - "Working together" cards */
	.page-home .services__header { margin-bottom: 20px; }
	.page-home .services__intro { margin-top: 12px; }
	.page-home .services__grid { gap: 16px; }
	.services__grid .service-card { padding: 18px; gap: 12px; }

	/* Service pages - intro + "questions" */
	.svc-intro__grid { min-height: 0; padding-block: 48px; }
	.svc-result { min-height: 0; }
	.svc-questions { padding-block: 24px; }
	.svc-questions__header { margin-bottom: 16px; }
	.svc-questions__title, .svc-questions__lead { margin-top: 8px; }
	.svc-questions__grid, .svc-questions__col { gap: 12px; }
	.svc-q-card { padding: 16px 20px; gap: 8px; }

	/* About - Our experience */
	.experience-header { margin-bottom: 12px; }
	.experience-eyebrow, .experience-title { margin-bottom: 4px; }
	.experience-title { max-width: 760px; }
	.experience-card__title { margin-bottom: 12px; }
	.experience-tags { gap: 8px; }
	.experience-tag { min-height: 28px; padding-block: 3px; }
	.modalities-list { row-gap: 6px; }
	.study-card { padding-block: 14px; }

	/* News - Latest */
	.news-latest { padding-block: 24px; }
	.news-sec__title { margin-bottom: 16px; }
	.news-card__image { aspect-ratio: 410.67 / 220; }
	.news-latest__more { margin-top: 12px; }
}
/* Very short (<=640px high, e.g. 1280x620): About hero a touch tighter. */
@media (min-width: 1101px) and (max-height: 640px) {
	.page-home .benefits { padding-block: 24px; }
	.benefits__header { margin-bottom: 16px; }
	.benefit-card { padding: 16px; }
	.contact-form-section { padding-block: 16px; }
	.contact-form-card { padding-block: 20px; }
	.contact-form textarea { height: 80px; }
	.about-how { padding-block: 20px; }
	.about-how__header { margin-bottom: 16px; }
	.about-how__grid { gap: 12px; }
	.about-values { padding-bottom: 24px; }
	.values-card { padding-block: 28px; gap: 32px; }
	.experience-section { padding-block: 16px; }
	.svc-questions { padding-block: 16px; }
}

/* About "How we work": section padding on desktop windows taller than 740px */
@media (min-width: 1101px) and (min-height: 741px) {
	.about-how { padding-block: 72px; }
}

/* About "Meet the team": section padding on desktop (Values section below overlaps by 32px) */
@media (min-width: 1101px) {
	.about-team { padding-top: 72px; padding-bottom: 80px; }
}

/* About Values card: inner padding on desktop windows taller than 740px */
@media (min-width: 1101px) and (min-height: 741px) {
	.values-card { padding-top: 72px; padding-bottom: 72px; }
}

/* About CTA: panel padding on desktop */
@media (min-width: 1101px) {
	.cta--about .cta__panel { padding-top: 72px; padding-bottom: 72px; }
}

/* About Values card: wave video pulled up toward the heading on desktop */
@media (min-width: 1101px) {
	.values-card__graphic { margin-top: -30px; }
	/* Keep the heading above the overlapping video box */
	.values-card__heading { position: relative; z-index: 1; }
}

/* About "Experience" heading: one line on desktop; section padding on windows taller than 800px */
@media (min-width: 1101px) {
	.experience-title { max-width: none; line-height: 1.2; }
}
@media (min-width: 1101px) and (min-height: 801px) {
	.experience-section { padding-block: 54px; } /* Reduced padding so the cards fit the window height */
}

/* ============================================================
   About - Our Experience, desktop cards: two stacked cards on the left,
   Study & Design card on the right. Kept last so it wins over earlier rules.
   ============================================================ */
@media (min-width: 1101px) {
	.experience-grid {
		grid-template-columns: minmax(0, 592px) minmax(0, 531px);
		max-width: none;
		gap: 16px;
	}
	.experience-left { gap: 16px; }
	.experience-card,
	.study-card {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		gap: 32px;
		padding: 32px;
		border: 1.5px solid transparent;
		border-radius: 16px;
		background:
			linear-gradient(#fff, #fff) padding-box,
			linear-gradient(135deg, #00c9c7, #167ee6, #df24d8) border-box;
		box-shadow: 0 4px 16.6px rgba(45, 118, 122, 0.1);
	}
	.experience-card__title { margin: 0; }
	.experience-tags,
	.modalities-list,
	.study-card__text { display: none; }
	.exp-points {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 24px;
		margin: 0;
		padding: 0;
		list-style: none;
		font-family: var(--font-body);
		font-weight: 500;
		/* Figma 16/22, scaled like the site's other body text (~14.6/20 at 1440, capped there) */
		font-size: clamp(13.6px, calc(10.269px + 0.2985vw), 14.567px);
		line-height: clamp(18.7px, calc(14.12px + 0.4104vw), 20.03px);
		color: var(--ink);
	}
	.exp-points--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.exp-points li {
		padding-top: 10px;
		border-top: 1px solid #d9d9d9;
	}
	/* A lone last item in the 3-column list ("Endocrinology / Metabolic") gets Figma's 216px. */
	.exp-points--3 li:last-child:nth-child(3n + 1) { grid-column: span 2; max-width: 216px; }

	/* Study & Design */
	.study-card { min-height: 0; }
	.study-card::before { top: -174px; }
	.study-card__content { max-width: none; display: flex; flex-direction: column; gap: 24px; }
	/* Study card title on one line */
	.study-card .experience-card__title { max-width: none; margin: 0; white-space: nowrap; }
	/* Experience cards: tighter padding and gap so the cards stay aligned and fit the screen */
	.experience-card,
	.study-card { gap: 24px; padding-block: 24px; }
	.study-card .study-list li { padding: 8px 0; font-size: 12px; line-height: 16px; } /* 33px rows, as Figma */
	.study-list {
		display: grid;
		grid-template-columns: minmax(0, 201fr) minmax(0, 242fr);
	}
}

/* =====================================================================
   Other pages: section and CTA panel padding on desktop windows taller than
   800px; fixed-height centred sections fit their content.
   ===================================================================== */
@media (min-width: 1101px) and (min-height: 801px) {
	.svc-support { padding-block: 72px; }
	.svc-questions { padding-block: 72px; }
	.news-featured,
	.news-latest { padding-block: 72px; }
}
/* These still fit at 72px on 741-800px-high windows (1440 on a 1600x900 screen). */
@media (min-width: 1101px) and (min-height: 741px) {
	.svc-intro__grid { min-height: 0; padding-block: 72px; }
	.join-intro { min-height: 0; padding-block: 72px; }
	.join-apply { padding-block: 72px; }
	.contact-form-section { min-height: 0; padding-block: 72px; }
}
@media (min-width: 1101px) {
	.cta--service .cta__panel { padding-top: 72px; padding-bottom: 72px; }
}

/* About "Our Experience": tighter cards on windows 800px high or less */
@media (min-width: 1101px) and (max-height: 800px) {
	.experience-card,
	.study-card { gap: 16px; padding-block: 20px; }
	.exp-points { row-gap: 8px; }
	.experience-header { margin-bottom: 16px; }
}

/* Service support cards: height fits content, cards in a row match the tallest (desktop) */
@media (min-width: 1101px) {
	.svc-support .svc-card { min-height: 0; }
}

/* =====================================================================
   Avoid a single word on the last line, all widths. main.js also joins the
   last two words with a non-breaking space for browsers without text-wrap: pretty.
   ===================================================================== */
h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption { text-wrap: pretty; }
[class*="card__title"], .svc-q-card__title, .team-card__name, .values-card__heading { text-wrap: balance; }

/* Join section 2 on desktop: artwork positioned from the right, left of the text.
   Taller windows use the fixed section height; shorter windows fit the text and scale the artwork. */
@media (min-width: 1101px) {
	/* Content centred in a 1440 frame on wider screens */
	.join-intro { padding-inline: max(80px, calc((100% - 1440px) / 2 + 80px)); }
	.join-intro__media {
		left: auto;
		right: calc(max(80px, (100% - 1440px) / 2 + 80px) + 698px);
		top: 0;
		bottom: 0;
		height: auto;
		width: auto;
		max-width: calc(100% - max(80px, (100% - 1440px) / 2 + 80px) - 698px);
		aspect-ratio: 1168 / 1444;
	}
	.join-intro__media img { object-fit: contain; object-position: top right; }
}
@media (min-width: 1101px) and (min-height: 801px) {
	.join-intro { min-height: 622px; padding-block: 72px; } /* Section height */
}

/* Desktop windows 800px high or less: sections that need tighter spacing */
@media (min-width: 1101px) and (min-height: 741px) and (max-height: 800px) {
	.page-home .services { padding-top: 60px; padding-bottom: 60px; } /* 72 would be taller than the window */
}
@media (min-width: 1101px) and (max-height: 800px) {
	.join-intro { min-height: 0; padding-block: 56px; }
}
@media (min-width: 1101px) and (max-height: 740px) {
	/* About - Our Experience cards */
	.experience-section { padding-block: 16px; }
	.experience-header { margin-bottom: 12px; }
	.experience-card,
	.study-card { gap: 12px; padding-block: 14px; }
	.exp-points { row-gap: 6px; }
	.exp-points li { padding-top: 6px; }
	.study-card .study-list li { padding-block: 6px; }
}

/* Desktop windows 741-800px high: section padding where it fits the window */
@media (min-width: 1101px) and (min-height: 741px) and (max-height: 800px) {
	/* 72px */
	.svc-support { padding-block: 72px; }
	.news-featured,
	.news-latest { padding-block: 72px; }
	.join-intro { padding-block: 72px; }
	/* 60px (72 would not fit) */
	.svc-questions { padding-block: 60px; }
	.about-values { padding-bottom: 60px; }
	/* About - Our Experience: tighter cards (as on short laptops) so the section can have 60px */
	.experience-section { padding-block: 60px; }
	.experience-header { margin-bottom: 12px; }
	.experience-card,
	.study-card { gap: 12px; padding-block: 14px; }
	.exp-points { row-gap: 6px; }
	.exp-points li { padding-top: 6px; }
	.study-card .study-list li { padding-block: 6px; }
}

/* Home CTA panel padding on desktop */
@media (min-width: 1101px) {
	/* Top padding offsets the heading's line spacing */
	.page-home .cta .cta__panel { padding-top: 62px; padding-bottom: 72px; } /* Offsets the heading's line spacing above the letters */
}
/* Service hero arrow: positioned from the top so it stays inside the window on first load */
@media (min-width: 768px) {
	.svc-hero .svc-hero__cue { bottom: auto; top: min(698px, calc(100vh - 92px)); } /* 698 = hero 664 + 34 */
}
@media (min-width: 1101px) and (min-height: 741px) and (max-height: 800px) {
	.svc-hero .svc-hero__cue { top: min(698px, calc(100vh - 126px)); }
}

/* Hide design line breaks once main.js marks them as no longer fitting */
.pcdm-br-flow br.pcdm-br { display: none; }

/* Tablet: headings and eyebrows balanced into even lines */
@media (max-width: 1100px) {
	h1, h2, [class*="__eyebrow"], [class*="-eyebrow"] { text-wrap: balance; }
}
/* Tablet: benefits heading keeps its own width next to the intro text */
@media (min-width: 768px) and (max-width: 1100px) {
	.benefits__title { flex: 0 0 auto; }
}
/* Tablet 901-1100: service support cards two per row */
@media (min-width: 901px) and (max-width: 1100px) {
	.svc-card { flex-basis: calc(50% - 12px); }
}
/* Home hero text on tablets: wider text box, auto height */
@media (min-width: 601px) and (max-width: 1100px) {
	.hero__text { width: auto; max-width: min(640px, 100%); height: auto; }
}
/* Phones: hero text uses the full width */
@media (max-width: 600px) {
	.hero__text { width: auto; max-width: 100%; }
}

/* Home stats: 2 x 2 grid on phones and tablets */
/* Desktop copy shows above 600px, phone copy at 600px and below */
@media (min-width: 601px) and (max-width: 1100px) {
	.stats__row.home-desktop-copy {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		height: auto;
	}
}
@media (max-width: 600px) {
	.stats__row.home-mobile-copy {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		height: auto;
	}
}
@media (max-width: 1100px) {
	/* content from the top, so the two numbers in a row line up even when one label is longer */
	.stats__row .stats__card { height: auto; justify-content: flex-start; border-right: 0; border-bottom: 0; }
	.stats__row .stats__card:nth-child(odd) { border-right: 1px solid var(--line); }
	.stats__row .stats__card:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 767px) {
	.stats__row .stats__card { padding: 20px 16px 20px 20px; }
}
/* Home stats text sizes: tablet and phone */
@media (min-width: 768px) and (max-width: 1100px) {
	.stats__row .stats__label {
		font-size: clamp(14px, calc(10.993px + 0.3916vw), 15.3px);
		line-height: clamp(20px, calc(16.5px + 0.4518vw), 21.5px);
	}
}
@media (max-width: 767px) {
	.stats__row .stats__value { font-size: 26px; line-height: 31px; letter-spacing: .2px; }
	.stats__row .stats__label { font-size: 14px; line-height: 20px; }
}

/* Service pages, phone layout: body, card and eyebrow text sizes */
@media (max-width: 767px) {
	.svc-hero__sub,
	.svc-intro__mobile-copy p,
	.svc-result__text,
	.svc-support__sub,
	.svc-connected__body,
	.cta--service .cta__lead,
	.cta--service .cta__body { font-size: 16px; line-height: 24px; }
	.svc-q-card__text { font-size: 16px; line-height: 22px; }
	.svc-questions__eyebrow { font-size: 18px; line-height: 22px; }
}
/* About hero stats, phone layout: text sizes */
@media (max-width: 767px) {
	.about-stat__value,
	.about-stat__value > span { font-size: 26px; line-height: 31px; letter-spacing: .2px; }
	.about-stat__label,
	.about-stat__label > span { font-size: 14px; line-height: 20px; }
	.about-stat,
	.about-stat:first-child { padding: 20px 16px 20px 20px; gap: 8px; } /* Spacing in proportion to the smaller text */
}
/* Join section 2 text, phone layout: same size for all three paragraphs */
@media (max-width: 767px) {
	.join-intro__title,
	.join-intro__body,
	.join-intro__cta { font-size: 20px; line-height: 28px; }
	/* Equal gap between the paragraphs */
	.join-intro__text { gap: 33px; }
}
/* Join role cards, phone layout: title and text sizes */
@media (max-width: 767px) {
	.join-apply__role-title { font-size: 20px; line-height: 26px; }
	.join-apply__role-desc,
	.join-apply__role-text { font-size: 14px; line-height: 20px; }
}

/* Home "Working together" background fade on desktop */
@media (min-width: 1101px) {
	.page-home .services {
		background: linear-gradient(0deg,
			rgba(30, 54, 78, 0.76) 0%,
			rgba(30, 54, 78, 0.74) 3%,
			rgba(30, 54, 78, 0.687) 5.9%,
			rgba(30, 54, 78, 0.599) 8.1%,
			rgba(30, 54, 78, 0.493) 11.1%,
			rgba(30, 54, 78, 0.38) 14%,
			rgba(30, 54, 78, 0.271) 17%,
			rgba(30, 54, 78, 0.161) 19.9%,
			rgba(30, 54, 78, 0.077) 22.1%,
			rgba(30, 54, 78, 0.021) 25.1%,
			rgba(255, 255, 255, 0) 28%), var(--white);
	}
}
/* Home "Working together": padding on desktop windows taller than 800px */
@media (min-width: 1101px) and (min-height: 801px) {
	.page-home .services { padding-top: 84px; padding-bottom: 84px; }
}
/* Home CTA heading colour */
.page-home .cta .cta__title { color: var(--navy, #1e364e); }
/* All CTA headings navy; panel top padding offsets the heading's line spacing */
.cta .cta__title { color: var(--navy, #1e364e); }
@media (min-width: 1101px) {
	.cta--about .cta__panel,
	.cta--service .cta__panel { padding-top: 62px; }
}
/* CTA panel fade, desktop and tablet */
@media (min-width: 768px) {
	.cta__panel::after {
		background: linear-gradient(to bottom,
			rgba(30, 54, 78, 0.78) 0%,
			rgba(30, 54, 78, 0.68) 3.3%,
			rgba(30, 54, 78, 0.54) 7.5%,
			rgba(30, 54, 78, 0.40) 13.3%,
			rgba(30, 54, 78, 0.25) 19.9%,
			rgba(30, 54, 78, 0.11) 28.2%,
			rgba(30, 54, 78, 0.03) 36.5%,
			rgba(30, 54, 78, 0) 44%);
	}
}
/* Footer, desktop: gap between the links and the copyright line */
@media (min-width: 1101px) {
	.site-footer,
	.site-footer__inner { min-height: 0; }
	.site-footer__top { flex: none; margin-bottom: 80px; }
}
/* Footer on phones 360px and up: two link columns side by side, sign-up full width below */
@media (min-width: 360px) and (max-width: 767px) {
	.site-footer__links {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: start;
		column-gap: 40px;
		row-gap: 32px;
	}
	.site-footer__news { grid-column: 1 / -1; }
}
@media (min-width: 360px) and (max-width: 400px) {
	.site-footer__links { column-gap: 24px; }
}
@media (min-width: 360px) and (max-width: 374px) {
	.site-footer__links { column-gap: 16px; } /* keeps "Clinical data management" on one line at 360 */
}
/* Footer on phones up to 600px: link columns spread to the edges */
@media (min-width: 360px) and (max-width: 600px) {
	.site-footer__links { justify-content: space-between; }
	/* Company column offset from the right edge */
	.site-footer__links > .site-footer__col:nth-child(2) { position: relative; left: -15px; }
}
/* Footer on phones up to 400px: smaller headings and links so the columns fit side by side */
@media (max-width: 400px) {
	.site-footer__col-title,
	.site-footer__col-title span { font-size: 16px; line-height: 22px; }
	.site-footer__col ul li { line-height: 18px; }
	.site-footer__col ul a { font-size: 12px; line-height: 18px; }
}
/* Footer bottom, phones: email and social icons side by side with a divider, copyright centred below */
@media (max-width: 767px) {
	.site-footer__meta {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		height: auto;
		column-gap: 16px;
		row-gap: 24px;
	}
	.site-footer__socials {
		height: auto;
		padding-left: 16px;
		border-left: 1px solid rgba(255, 255, 255, .2);
	}
	.site-footer__copy { flex-basis: 100%; }
}

/* About "How we work" background, desktop: bottom navy fade and wave artwork position */
@media (min-width: 1101px) {
	.about-how {
		/* Linear bottom fade, navy to clear */
		background: linear-gradient(0deg,
			rgba(30, 54, 78, 0.8) -2.75%,
			rgba(255, 255, 255, 0) 29.4%), #ffffff;
	}
	.about-how__wave { top: -26.25vw; }
}
@media (min-width: 1101px) and (max-width: 1439px) {
	.about-how__wave { top: -378px; }
}
/* About "How we work": vertical padding on taller desktop windows */
@media (min-width: 1101px) and (min-height: 801px) {
	.about-how { padding-block: 84px; }
}
/* About "How we work": fade positions for the larger padding */
/* Wave artwork fades out over its lower part so no edge shows inside the dark fade (About and service pages) */
.about-how__wave,
.svc-support__wave {
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* =====================================================================
   Service pages - desktop
   ===================================================================== */
@media (min-width: 1101px) {
	/* Hero: top padding, height and digits artwork position */
	.svc-hero { min-height: min(664px, 100vh); padding-top: min(180px, clamp(150px, 30vh, 239px)); }
	.svc-hero__digits { background-position: center -190px; } /* Digits band behind the heading block */

	/* Support section: wave artwork at full size and fixed position */
	.svc-support__wave {
		width: max(2048px, calc(100% + 608px));
		max-width: none;
		height: auto;
		left: -484px;
		transform: none;
	}

	/* Support section: linear bottom fade */
	.svc-support {
		background: linear-gradient(0deg,
			rgba(30, 54, 78, 0.76) -2.75%,
			rgba(255, 255, 255, 0) 29.4%), #ffffff;
	}
}
/* Service pages, desktop: no bottom padding on the hero, no top padding on the intro grid */
@media (min-width: 1101px) {
	.svc-hero { padding-bottom: 0; }
	.svc-intro__grid { padding-top: 0; }
}
/* Service hero, desktop: height follows the text, scroll arrow centred in the space below */
@media (min-width: 1101px) {
	.svc-hero { min-height: 0; padding-top: 190px; padding-bottom: 110px; } /* Space above the eyebrow and below the subtitle */
	.svc-hero .svc-hero__cue { top: auto; bottom: 34px; }
}
/* "The result" card, desktop: text starts below the absolutely placed graph; height follows content */
@media (min-width: 1101px) {
	.svc-result { min-height: 0; padding-top: 198px; }
}
/* Join hero, desktop: height follows the text, with space above and below */
@media (min-width: 1101px) {
	.join-hero { min-height: 0; padding-top: 180px; padding-bottom: 100px; } /* Space from the nav bar and below the text */
}
/* Join "Work with us": wave artwork fades out over its lower part so no edge shows */
.join-apply__wave {
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
/* Join "Work with us": linear bottom fade, desktop */
@media (min-width: 1101px) {
	.join-apply { background: linear-gradient(0deg, #1E364E -2.75%, rgba(255, 255, 255, 0) 34%), var(--surface-100); }
}

/* =====================================================================
   Bottom fades, desktop: same navy and linear shape for every section
   ===================================================================== */
@media (min-width: 1101px) {
	.page-home .services { background: linear-gradient(0deg, rgba(30, 54, 78, 0.76) 0%, rgba(30, 54, 78, 0) 28%), var(--white); }
	.about-how { background: linear-gradient(0deg, rgba(30, 54, 78, 0.76) 0%, rgba(30, 54, 78, 0) 29.4%), #ffffff; }
	.svc-support { background: linear-gradient(0deg, rgba(30, 54, 78, 0.76) 0%, rgba(30, 54, 78, 0) 29.4%), #ffffff; }
	.join-apply { background: linear-gradient(0deg, rgba(30, 54, 78, 0.76) 0%, rgba(30, 54, 78, 0) 34%), var(--surface-100); }
	.contact-form-section { background: linear-gradient(0deg, rgba(30, 54, 78, 0.76) 0%, rgba(30, 54, 78, 0) 41.83%), #f9f9f9; }
	/* CTA panels fade from the top */
	.cta__panel::after { background: linear-gradient(to bottom, rgba(30, 54, 78, 0.76) 0%, rgba(30, 54, 78, 0) 44%); }
}
/* Home "Working together": bottom fade with a fixed height, at most a third of the section */
@media (min-width: 1101px) {
	.page-home .services { background: linear-gradient(0deg, rgba(30, 54, 78, 0.76) 0, rgba(30, 54, 78, 0) min(240px, 33%)), var(--white); }
}
/* About "How we work": bottom fade with a fixed height, at most a third of the section */
@media (min-width: 1101px) {
	.about-how { background: linear-gradient(0deg, rgba(30, 54, 78, 0.76) 0, rgba(30, 54, 78, 0) min(240px, 33%)), #ffffff; }
}
/* Remaining bottom fades: fixed height, at most a third of the section */
@media (min-width: 1101px) {
	.svc-support { background: linear-gradient(0deg, rgba(30, 54, 78, 0.76) 0, rgba(30, 54, 78, 0) min(240px, 33%)), #ffffff; }
	.join-apply { background: linear-gradient(0deg, rgba(30, 54, 78, 0.76) 0, rgba(30, 54, 78, 0) min(240px, 33%)), var(--surface-100); }
	.contact-form-section { background: linear-gradient(0deg, rgba(30, 54, 78, 0.76) 0, rgba(30, 54, 78, 0) min(240px, 33%)), #f9f9f9; }
}

/* Bottom fades, desktop: eased fade shape (navy = 76% x (1 - x)^2) so no edge shows at the top */
@media (min-width: 1101px) {
	.page-home .services,
	.about-how,
	.svc-support,
	.join-apply,
	.contact-form-section {
		--fade: min(240px, 33%);
		background-image: linear-gradient(0deg,
		rgba(30, 54, 78, 0.760) 0,
		rgba(30, 54, 78, 0.639) calc(var(--fade) * 0.0833),
		rgba(30, 54, 78, 0.528) calc(var(--fade) * 0.1667),
		rgba(30, 54, 78, 0.427) calc(var(--fade) * 0.2500),
		rgba(30, 54, 78, 0.338) calc(var(--fade) * 0.3333),
		rgba(30, 54, 78, 0.259) calc(var(--fade) * 0.4167),
		rgba(30, 54, 78, 0.190) calc(var(--fade) * 0.5000),
		rgba(30, 54, 78, 0.132) calc(var(--fade) * 0.5833),
		rgba(30, 54, 78, 0.084) calc(var(--fade) * 0.6667),
		rgba(30, 54, 78, 0.048) calc(var(--fade) * 0.7500),
		rgba(30, 54, 78, 0.021) calc(var(--fade) * 0.8333),
		rgba(30, 54, 78, 0.005) calc(var(--fade) * 0.9167),
		rgba(30, 54, 78, 0.000) calc(var(--fade) * 1));
	}
}

/* CTA panels, desktop: eased top fade, at most half the panel height */
@media (min-width: 1101px) {
	.cta__panel::after {
		--fade: min(240px, 50%);
		background: linear-gradient(to bottom,
		rgba(30, 54, 78, 0.760) 0,
		rgba(30, 54, 78, 0.639) calc(var(--fade) * 0.0833),
		rgba(30, 54, 78, 0.528) calc(var(--fade) * 0.1667),
		rgba(30, 54, 78, 0.427) calc(var(--fade) * 0.2500),
		rgba(30, 54, 78, 0.338) calc(var(--fade) * 0.3333),
		rgba(30, 54, 78, 0.259) calc(var(--fade) * 0.4167),
		rgba(30, 54, 78, 0.190) calc(var(--fade) * 0.5000),
		rgba(30, 54, 78, 0.132) calc(var(--fade) * 0.5833),
		rgba(30, 54, 78, 0.084) calc(var(--fade) * 0.6667),
		rgba(30, 54, 78, 0.048) calc(var(--fade) * 0.7500),
		rgba(30, 54, 78, 0.021) calc(var(--fade) * 0.8333),
		rgba(30, 54, 78, 0.005) calc(var(--fade) * 0.9167),
		rgba(30, 54, 78, 0.000) calc(var(--fade) * 1.0000));
	}
}

/* Home hero, phones: text near the top, hero height follows content */
@media (max-width: 767px) {
	.hero__inner {
		min-height: 0;
		min-height: auto;
		justify-content: flex-start;
		padding-top: 128px; /* 16px top + 56px nav bar + 56px gap */
		padding-bottom: 48px;
	}
	.hero__content { gap: 40px; }
	.hero__text { height: auto; }
}
/* Home hero, phones: spacing around the text and card */
@media (max-width: 767px) {
	.hero__inner { padding-top: 182px; padding-bottom: 100px; } /* 182 = 16 top + 56 nav bar + 110 */
	.hero__content { gap: 80px; }
}
/* Home hero, phones and small tablets: spacing around the text and card */
@media (max-width: 767px) {
	.hero__inner { padding-top: 182px; padding-bottom: 110px; } /* 182 = 16 top + 56 nav bar + 110 */
	.hero__content { gap: 110px; }
}
@media (min-width: 601px) and (max-width: 767px) {
	.hero__card { width: 268px; max-width: 100%; align-self: flex-end; }
}
/* Home hero, phones: space below the card */
@media (max-width: 767px) {
	.hero__inner { padding-bottom: 48px; }
}
.hero__card-title { text-wrap: balance; } /* Avoid a single word on the last line of the card title */
/* Home section 2, phones and small tablets (<=767): title on the left, digits artwork on the right */
@media (max-width: 767px) {
	/* Top and bottom space scale with the screen width */
	.page-home .intro {
		position: relative;
		overflow: hidden;
		min-height: 0;
		padding-top: min(40px, 10.18vw);
		padding-bottom: min(40px, 10.18vw);
	}
	/* Height follows the text */
	.page-home .intro__wrapper { height: auto; }
	.page-home .intro__frame { position: static; gap: 0; }
	/* Artwork covers the full section height, right-aligned, original aspect ratio */
	.page-home .intro__art {
		position: absolute;
		top: 0;
		bottom: 0;
		left: auto;
		right: 0;
		width: auto;
		height: 100%;
		z-index: 0;
		pointer-events: none;
		/* Bottom copy: full at the bottom, faint behind the text, hidden at the top */
		--intro-art-fade: linear-gradient(to bottom, transparent 0%, transparent 22%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.06) 78%, rgba(0,0,0,.5) 90%, #000 100%);
		-webkit-mask-image: var(--intro-art-fade);
		        mask-image: var(--intro-art-fade);
	}
	.page-home .intro__art img { position: static; width: auto; height: 100%; object-fit: contain; }
	/* Top copy: artwork at the top right beside the title, fading out downwards */
	.page-home .intro::before {
		--intro-top-art-end: calc(min(40px, 10.18vw) + 254px); /* just below the title */
		content: "";
		position: absolute;
		top: 0; /* bleeds to the section's top edge (the section clips it - nothing shows in the hero) */
		right: -60px; /* bleeds off the right edge too */
		width: 280px;
		height: var(--intro-top-art-end); /* Image size; bottom cropped */
		/* the image's sparse top 46px is skipped, so the digits are dense right at the top edge */
		background: url("../images/intro-digits.webp") no-repeat right 0 top -46px / 100% auto;
		z-index: 0;
		pointer-events: none;
		/* Three mask layers:
		   1. above the title: full strength;
		   2 x 3. beside the title: lighter on the left behind the words, fading out below the title. */
		--intro-top-art-mask:
			linear-gradient(to bottom, #000 0, #000 calc(min(40px, 10.18vw) - 8px), transparent calc(min(40px, 10.18vw) + 16px)),
			linear-gradient(to right, rgba(0,0,0,.35) 0, rgba(0,0,0,.35) 80px, #000 140px),
			linear-gradient(to bottom, #000 0, #000 calc(var(--intro-top-art-end) - 135px), rgba(0,0,0,.45) calc(var(--intro-top-art-end) - 68px), transparent 100%);
		-webkit-mask-image: var(--intro-top-art-mask);
		        mask-image: var(--intro-top-art-mask);
		-webkit-mask-composite: source-over, source-in;
		        mask-composite: add, intersect;
	}
	.page-home .intro__container { position: relative; z-index: 1; }
}
/* 601-767: the title is 3 lines (not the phone's 5), so the top diagram ends sooner - just below the title */
@media (min-width: 601px) and (max-width: 767px) {
	.page-home .intro::before { --intro-top-art-end: 200px; }
}
@media (max-width: 600px) {
	/* Title lines never wrap: font size follows the column width (container units), height follows content */
	.page-home .intro__container { container-type: inline-size; }
	.page-home .intro__title {
		height: auto;
		white-space: nowrap;
		font-size: min(32px, calc(100cqi / 10.9));
		line-height: 1.1875; /* 38 / 32 - follows the font when it shrinks */
	}
}

/* Home stats, phones: space above and below the cards */
@media (max-width: 600px) {
	.page-home .stats__row.home-mobile-copy { padding-top: 36px; padding-bottom: 36px; } /* Bottom padding matches the top */
	.page-home .biometrics { padding-top: 36px; }
}

/* Home "Integrated biometrics." heading, phones: one line, font scales with the column width */
@media (max-width: 600px) {
	.page-home .biometrics__inner { container-type: inline-size; }
	.page-home .biometrics__title {
		font-size: min(30px, calc(100cqi / 11.4));
		line-height: 1.2; /* 36 / 30 */
	}
}

/* Home "What this means for your study" card, phones: top of the arcs artwork cropped, height follows content */
@media (max-width: 600px) {
	.benefit-card--info { height: auto; min-height: 0; padding-top: 114px; }
	.benefit-card--info .benefit-card__art img { top: -314px; } /* Crop the top of the artwork */
}

/* Home CTA, phones: mobile line breaks, one-line gap between paragraphs, heights follow the text */
@media (max-width: 600px) {
	.page-home .cta__header,
	.page-home .cta__lead,
	.page-home .cta__body { height: auto; }
	/* Text scales with the column width so the line breaks hold on narrow screens */
	.page-home .cta__header { container-type: inline-size; width: 337px; }
	.page-home .cta .cta__lead,
	.page-home .cta .cta__body { font-size: min(16px, calc(100cqi / 18.72)); line-height: 1.5; } /* 24 / 16; beats the all-pages rule below */
	.page-home .cta .cta__body { margin-top: calc(1.5em - 24px); } /* one line between the paragraphs (0 at 16px) */
}

/* CTA text, phones, all pages: 16/24 paragraph text; headings unchanged */
@media (max-width: 600px) {
	.cta .cta__lead,
	.cta .cta__body { font-size: 16px; line-height: 24px; }
	/* Card text: 17/24 */
	.cta .cta__bar .cta__bar-text { font-size: 17px; line-height: 24px; text-wrap: pretty; } /* beats body:not(.page-home) .cta__bar-text (pages.css); pretty = no single word on the last line */
}

/* About "Earlier biometrics involvement", phones: empty space around the digits artwork cropped */
@media (max-width: 767px) {
	.about-earlier__art { height: 175px; object-position: left -52px; } /* Crop to the digits */
	/* No gap between the hero and this section */
	.about-hero { padding-bottom: 0; }
	/* Space from the digits to the heading */
	.about-earlier { gap: 16px; }
}
/* Same on tablets (768-1100, stacked layout): digits artwork cropped, smaller gap to the heading */
@media (min-width: 768px) and (max-width: 1100px) {
	.about-earlier__art { aspect-ratio: 2048 / 441; object-position: left 58%; }
	.about-earlier { gap: 16px; }
}

/* About "Study & Design experience" card, phones and tablets: top of the arcs artwork cropped */
@media (max-width: 767px) {
	.study-card { padding-top: 136px; }          /* Text starts below the artwork */
	.study-card::before { top: -88px; }         /* Crop the top of the artwork */
}
@media (min-width: 768px) and (max-width: 1100px) {
	.study-card { padding-top: 140px; }          /* Text starts below the artwork */
	.study-card::before { top: -92px; }         /* Crop the top of the artwork */
}

/* Service "The result" card, phones and tablets: text follows the graph, height follows content */
@media (max-width: 767px) {
	.svc-result { height: auto; min-height: 0; justify-content: flex-start; padding-top: 167px; } /* Text starts below the graph */
}
/* 601-1100: graph in the flow just above the text, text at the card's bottom */
@media (min-width: 601px) and (max-width: 1100px) {
	.svc-result { height: auto; min-height: 0; justify-content: flex-end; padding-top: 24px; }
	.svc-result__graph { position: relative; top: auto; flex: none; margin-bottom: -1px; } /* Offset for the empty space at the bottom of the image */
}

/* Biostatistics "More than statistical outputs", phones: wave moved up, text closer below (sizes in vw) */
@media (max-width: 767px) {
	.svc-biostatistics .svc-connected--split .svc-connected__media img { transform: translateY(-12.7vw) rotate(23deg); }
	.svc-biostatistics .svc-connected--split .svc-connected__media { margin-bottom: -21vw; }
}
/* Same on tablets where this section is stacked (768-900) */
@media (min-width: 768px) and (max-width: 900px) {
	.svc-biostatistics .svc-connected--split .svc-connected__media img { transform: translateY(-20.7vw) rotate(23deg); }
	.svc-biostatistics .svc-connected--split .svc-connected__media { margin-bottom: -29.5vw; }
}

/* Pharmacokinetics "PK insight when it matters", phones (<=600): top half of the image cropped */
@media (max-width: 600px) {
	.svc-pharmacokinetics .svc-connected--split .svc-connected__media { aspect-ratio: 393 / 125; height: auto; }
	.svc-pharmacokinetics .svc-connected--split .svc-connected__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: left bottom;
	}
}

/* Join the team hero, phones and small tablets: space above and below the text, height follows content */
@media (max-width: 767px) {
	.join-hero { min-height: 0; padding-top: 154px; padding-bottom: 85px; }
}

/* Contact hero, phones and small tablets: height follows content, smaller gap to the form card */
@media (max-width: 767px) {
	.contact-hero { min-height: 0; padding-bottom: 24px; }
}

/* Service hero, phones: binary helix behind the heading and subtitle, smaller bottom padding */
@media (max-width: 600px) {
	.svc-hero { padding-bottom: 57px; } /* Together with the intro's top padding sets the gap to the next text */
	.svc-hero__digits {
		bottom: auto;
		top: calc(var(--svc-hero-top, 154px) - 50px); /* Behind the eyebrow-to-subtitle block */
		/* Soft fade at top and bottom so the helix spans the whole text block */
		-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
		        mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
	}
}
/* Service hero, tablets 601-1100: spacing below the nav and subtitle, digits band placed relative to the text */
@media (min-width: 601px) and (max-width: 1100px) {
	.svc-hero { min-height: 0; padding-top: var(--svc-hero-top, 154px); padding-bottom: 57px; } /* Combined with the intro's top padding */
	.svc-intro { padding-top: 28px; }
	.svc-intro__grid { padding-top: 0; min-height: 0; } /* Reset the desktop min-height on tablets */
	.svc-hero__digits { background-position: center calc(var(--svc-hero-top, 154px) - 380px); }
}
/* Service hero, 768-1100: extra bottom padding to balance the eyebrow's line spacing */
@media (min-width: 768px) and (max-width: 1100px) {
	.svc-hero { padding-bottom: 59px; }
}
/* Service hero, phones and 601-767: bottom spacing to the next block */
@media (max-width: 600px) {
	.svc-hero { padding-bottom: 40px; }
}
@media (min-width: 601px) and (max-width: 767px) {
	.svc-hero { padding-bottom: 41px; }
}

/* Biostatistics "More than statistical outputs", stacked layouts (<=900):
   wave as a faint background behind the heading and text, fading out downwards */
@media (max-width: 900px) {
	.svc-biostatistics .svc-connected--split { position: relative; gap: 0; padding-top: 48px; }
	.svc-biostatistics .svc-connected--split .svc-connected__media {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 0;
		margin: 0;
		opacity: .35;
		pointer-events: none;
		/* Full behind the heading, faded out over a fixed distance */
		-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 150px, transparent 300px);
		        mask-image: linear-gradient(to bottom, #000 0, #000 150px, transparent 300px);
	}
	.svc-biostatistics .svc-connected--split .svc-connected__body-col { position: relative; z-index: 1; }
}
/* Biostatistics wave position, stacked layouts: no tilt, scaled up, placed as % of the image box */
@media (max-width: 900px) {
	.svc-biostatistics .svc-connected--split .svc-connected__media img {
		/* Upward shift, no rotation */
		transform: translateY(-50px) rotate(0deg); /* Fixed px so wider screens keep the same position */
		scale: 1.5;
		/* Keeps the wave's middle level with the heading on taller boxes */
		inset: calc(-50px - (100% - 331px) / 2) 0 auto 21.9%;
		height: 100%;
	}
}

/* Join the team section 2, stacked layouts (<=1100): digits art as a faint background behind the text */
@media (max-width: 1100px) {
	.join-intro { position: relative; overflow: hidden; gap: 0; padding-top: 30px; } /* Text offset from the section top */
	.join-intro__media {
		position: absolute;
		top: 0;
		left: auto; /* an older rule pinned it left */
		right: 0;
		bottom: 0;
		width: min(70%, 520px);
		height: auto;
		z-index: 0;
		pointer-events: none;
	}
	/* faintness on the image (the reveal animation sets the wrapper's opacity to 1) */
	/* object-position: center = the browser default; set here because older rules (center bottom / top left) would otherwise apply */
	.join-intro__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .3; }
	.join-intro__text { position: relative; z-index: 1; }
}

/* About hero stats on phones (<=767): one row of three with dividers between the columns */
@media (max-width: 767px) {
	.about-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 0; }
	.about-stat,
	.about-stat:first-child { align-items: flex-start; gap: 4px; padding: 4px 0 4px 12px; border-top: 0; border-bottom: 0; border-left: 1px solid #e8e8e8; }
	.about-stat:first-child { padding-left: 0; border-left: 0; }
	.about-stat__value,
	.about-stat__value > span { font-size: 24px; line-height: 30px; letter-spacing: 0; }
	.about-stat__label,
	.about-stat__label > span { font-size: 13px; line-height: 17px; text-wrap: balance; } /* a wrapped label splits evenly, no lone "in" */
	.about-hero { padding-bottom: 32px; }
}
/* About stats on phones: single-line labels, columns sized to their text,
   font sizes follow the row width (container units) */
@media (max-width: 767px) {
	.about-stats {
		container-type: inline-size;
		grid-template-columns: repeat(3, auto);
		justify-content: space-between;
	}
	.about-stat__label,
	.about-stat__label > span { white-space: nowrap; font-size: min(15.3px, 3.324cqi); line-height: 1.4; } /* 12 / 361 */
	.about-stat__value,
	.about-stat__value > span { font-size: min(26.4px, 6.648cqi); line-height: 1.25; } /* 24 / 361 */
}

/* About "Earlier biometrics" section, stacked layouts (<=1100): digits band as a faint background behind the heading */
@media (max-width: 1100px) {
	.about-earlier { position: relative; gap: 0; padding-top: 48px; }
	.about-earlier__art {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		opacity: .35;
		pointer-events: none;
	}
	.about-earlier__inner { position: relative; z-index: 1; }
}
/* About stats on phones: each number centred over its label */
@media (max-width: 767px) {
	.about-stat,
	.about-stat:first-child { align-items: center; text-align: center; }
}
/* About stats on phones: equal space above the numbers and below the labels */
@media (max-width: 767px) {
	.about-stats { margin-top: 33px; } /* Top spacing */
}

/* Navy fades at 50% on every fade section and CTA, all layouts.
   Doubled classes override the earlier page- and size-specific rules; each section keeps its own base colour. */
.services.services,
.about-how.about-how,
.svc-support.svc-support,
.join-apply.join-apply,
.contact-form-section.contact-form-section {
	--fade: min(240px, 33%);
	background-image: linear-gradient(0deg,
	rgba(30, 54, 78, 0.500) 0,
	rgba(30, 54, 78, 0.420) calc(var(--fade) * 0.0833),
	rgba(30, 54, 78, 0.347) calc(var(--fade) * 0.1667),
	rgba(30, 54, 78, 0.281) calc(var(--fade) * 0.2500),
	rgba(30, 54, 78, 0.222) calc(var(--fade) * 0.3333),
	rgba(30, 54, 78, 0.170) calc(var(--fade) * 0.4167),
	rgba(30, 54, 78, 0.125) calc(var(--fade) * 0.5000),
	rgba(30, 54, 78, 0.087) calc(var(--fade) * 0.5833),
	rgba(30, 54, 78, 0.056) calc(var(--fade) * 0.6667),
	rgba(30, 54, 78, 0.031) calc(var(--fade) * 0.7500),
	rgba(30, 54, 78, 0.014) calc(var(--fade) * 0.8333),
	rgba(30, 54, 78, 0.003) calc(var(--fade) * 0.9167),
	rgba(30, 54, 78, 0.000) calc(var(--fade) * 1));
}
.page-home .services.services { background-color: var(--white); }
.about-how.about-how,
.svc-support.svc-support { background-color: #ffffff; }
.join-apply.join-apply { background-color: var(--surface-100); }
.contact-form-section.contact-form-section { background-color: #f9f9f9; }
.cta.cta .cta__panel.cta__panel::after {
	--fade: min(240px, 50%);
	background: linear-gradient(to bottom,
	rgba(30, 54, 78, 0.500) 0,
	rgba(30, 54, 78, 0.420) calc(var(--fade) * 0.0833),
	rgba(30, 54, 78, 0.347) calc(var(--fade) * 0.1667),
	rgba(30, 54, 78, 0.281) calc(var(--fade) * 0.2500),
	rgba(30, 54, 78, 0.222) calc(var(--fade) * 0.3333),
	rgba(30, 54, 78, 0.170) calc(var(--fade) * 0.4167),
	rgba(30, 54, 78, 0.125) calc(var(--fade) * 0.5000),
	rgba(30, 54, 78, 0.087) calc(var(--fade) * 0.5833),
	rgba(30, 54, 78, 0.056) calc(var(--fade) * 0.6667),
	rgba(30, 54, 78, 0.031) calc(var(--fade) * 0.7500),
	rgba(30, 54, 78, 0.014) calc(var(--fade) * 0.8333),
	rgba(30, 54, 78, 0.003) calc(var(--fade) * 0.9167),
	rgba(30, 54, 78, 0.000) calc(var(--fade) * 1));
}

/* Biostatistics "More than statistical outputs", desktop: section sized to its text, wave fills the left side */
@media (min-width: 1101px) {
	.svc-biostatistics .svc-connected--split { min-height: 0; }
	.svc-biostatistics .svc-connected--split .svc-connected__body-col { padding-top: 103px; padding-bottom: 99px; } /* Visible spacing above and below the text */
}
/* Pharmacokinetics "PK insight when it matters", desktop: section sized to its text */
@media (min-width: 1101px) {
	.svc-pharmacokinetics .svc-connected--split { min-height: 0; }
	.svc-pharmacokinetics .svc-connected--split .svc-connected__body-col { padding-top: 103px; padding-bottom: 99px; } /* Visible spacing above and below the text */
	.svc-pharmacokinetics .svc-connected--split .svc-connected__media img { object-fit: fill; width: min(100%, 530px); } /* Whole wave at the section height, width capped */
}
/* Contact hero, desktop: spacing from the nav bar to the eyebrow and from the hero text to the form card */
@media (min-width: 1101px) {
	.contact-hero { min-height: 0; justify-content: flex-start; padding-top: 131px; padding-bottom: 0; } /* top 131 = 50px below the nav bar (80) to the eyebrow text */
	.contact-form-section.contact-form-section { padding-top: 30px; }
	.contact-hero .contact-hero__title .pcdm-br { display: none; } /* Contact page title on one line (Home pop-up form not affected) */
}
/* Home stats, desktop: spacing above the numbers and below the labels */
@media (min-width: 1101px) {
	.page-home .stats__row { padding-top: 51px; padding-bottom: 49px; }  /* Spacing to the numbers and from the labels to the Biometrics section */
	.page-home .biometrics { padding-top: 47px; }  /* Spacing to the heading */
}
/* Home "Integrated biometrics." heading, desktop: scales with the window width, capped by the window height */
@media (min-width: 1101px) {
	.page-home .biometrics__title {
		font-size: min(clamp(36px, 4.1667vw, 60px), 7.9vh); /* Height cap so short laptops fit */
		line-height: 1.1333; /* 68 / 60 */
	}
}

/* Home "Integrated biometrics." section, all layouts: light grey background */
.page-home .biometrics.biometrics { background-color: var(--surface-100); } /* #F9F9F9, same grey as the page hero */

/* Home "What this means for your study" card, desktop: art block above the heading,
   arcs sit at its bottom edge so they stay clear of the heading */
@media (min-width: 1201px) {
	.benefit-card--info { padding-top: 0; }
	.benefit-card--info .benefit-card__art {
		position: relative;
		inset: auto;
		flex: 1 1 auto;
		min-height: 120px;
		margin: 0 -24px 16px; /* bleed to the card's top and sides; 16px + the art's own 4px = 20px above the heading */
	}
	.benefit-card--info .benefit-card__art img { top: auto; bottom: 0; }
}

/* Home "Why sponsors choose PureCDM" header, desktop: heading scales with the width (height-capped), intro text width */
@media (min-width: 1101px) {
	.page-home .benefits__title {
		font-size: min(clamp(36px, 4.1667vw, 60px), 7.9vh);
		line-height: 1.1333; /* 68 / 60 */
	}
	.page-home .benefits__title { flex: none; } /* keeps its 2 lines */
	/* Intro width with right padding; shrinks when the heading needs room, pretty wrap avoids a lone last word */
	.page-home .benefits__intro { flex: 0 1 640px; width: auto; min-width: 0; margin-right: 30px; text-wrap: pretty; }
}

/* Clinical Data Management "Designed with analysis in mind", desktop: section padding and type sizes */
@media (min-width: 1101px) {
	.svc-clinical-data-management .svc-connected:not(.svc-connected--split) { min-height: 0; padding-top: 103px; padding-bottom: 99px; } /* Visible spacing above and below the text */
	.svc-clinical-data-management .svc-connected__title {
		font-size: min(clamp(36px, 3.6111vw, 52px), 6.85vh);
		line-height: 1.1346; /* 59 / 52 */
	}
	.svc-clinical-data-management .svc-connected__body { font-size: clamp(15.3px, 1.1806vw, 17px); line-height: 1.4118; } /* 24 / 17 */
}

/* Home "Working together to deliver better evidence" cards, desktop: card width and gaps, pair centred */
@media (min-width: 1101px) {
	.page-home .services__grid.home-desktop-copy {
		grid-template-columns: repeat(2, 43.3333%); /* Column width as % of the row, scales with the window */
		justify-content: center;
		column-gap: 40px;
		row-gap: 32px; /* 40 would push the section past a 760px-high window */
	}
}
@media (min-width: 1101px) and (max-height: 700px) {
	.page-home .services__grid.home-desktop-copy { row-gap: 26px; } /* short laptops (e.g. 1366x650): keeps the section within the window */
}

/* =====================================================================
   Gradient borders, all layouts: real borders with the gradient painted under them
   (white padding-box + gradient border-box) so they render evenly on every side.
   Not used on the hero "Let's talk" card: its fill is see-through.
   ===================================================================== */
.benefit-card--info.benefit-card--info,
.svc-result.svc-result,
.svc-card.svc-card {
	border: 1.5px solid transparent;
	background:
		linear-gradient(var(--white), var(--white)) padding-box,
		var(--grad) border-box;
}
.team-card__more.team-card__more {
	border: 1.5px solid transparent;
	background:
		linear-gradient(var(--white), var(--white)) padding-box,
		var(--grad) border-box;
}
/* Pill buttons: gradient ring inside the button box (--ring sets the width) */
.gborder.gborder {
	border: var(--ring, 2px) solid transparent;
	background:
		linear-gradient(var(--gb-fill, var(--white)), var(--gb-fill, var(--white))) padding-box,
		var(--grad) border-box;
}
.benefit-card--info::before,
.svc-result::before,
.svc-card::before,
.team-card__more::before,
.gborder::before { display: none; }

/* Hover-only rings: same method, swapped in on hover. */
.service-card__more.service-card__more {
	border: 1px solid transparent;
	background:
		linear-gradient(var(--white), var(--white)) padding-box,
		linear-gradient(var(--line), var(--line)) border-box;
}
.service-card:hover .service-card__more.service-card__more,
.service-card__more.service-card__more:hover {
	background:
		linear-gradient(var(--white), var(--white)) padding-box,
		var(--grad) border-box;
}
.service-card__more::before { display: none; }
.site-nav__dropdown a { border: 1px solid transparent; }
/* 1px border + padding = the old spacing on each layout */
@media (min-width: 1101px) { .site-nav__dropdown a { padding: 15px; } }            /* Dropdown item padding */
@media (max-width: 1100px) { .site-nav__dropdown a { padding: 11px 9px; } }        /* Dropdown item padding, tablets */
.site-nav__dropdown a:hover {
	background:
		linear-gradient(var(--white), var(--white)) padding-box,
		var(--grad) border-box;
}
.site-nav__dropdown a::before { display: none; }

/* Home "Why sponsors choose PureCDM", desktop:
   heading and intro centred as a pair; "What this means" card in the middle column */
@media (min-width: 1201px) {
	/* Equal space left of the heading, between heading and text, and right of the text */
	/* Left padding = gap = right padding, scaling with the window; the intro takes the rest */
	.page-home .benefits__header { justify-content: flex-start; margin-inline: 0; padding-inline: min(64px, 4.4444vw); column-gap: min(64px, 4.4444vw); }
	.page-home .benefits__header .benefits__intro { flex: 1 1 auto; max-width: 640px; }
	.page-home .benefits__intro { margin-right: 0; }
	.page-home .benefits__grid > .benefit-card--info { order: 2; }
	.page-home .benefits__grid > .benefits__col:nth-of-type(2) { order: 3; }
}
/* Home "Why sponsors" intro on tablets (768-1100): narrows to fit the content width */
@media (min-width: 768px) and (max-width: 1100px) {
	.page-home .benefits__intro { flex: 0 1 633px; width: auto; min-width: 0; }
}

/* Home "What this means for your study" card in the centre: 3rd card on phones, full width between the rows on tablets */
@media (max-width: 767px) {
	.page-home .benefits__grid > .benefit-card--info { order: 2; }
	.page-home .benefits__grid > .benefits__col:nth-of-type(2) { order: 3; }
}
@media (min-width: 768px) and (max-width: 1200px) {
	.page-home .benefits__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.page-home .benefits__grid > .benefits__col { display: contents; }
	.page-home .benefits__col:nth-of-type(1) > .benefit-card:nth-child(1) { order: 1; }
	.page-home .benefits__col:nth-of-type(2) > .benefit-card:nth-child(1) { order: 2; }
	.page-home .benefits__grid > .benefit-card--info { order: 3; grid-column: 1 / -1; }
	.page-home .benefits__col:nth-of-type(1) > .benefit-card:nth-child(2) { order: 4; }
	.page-home .benefits__col:nth-of-type(2) > .benefit-card:nth-child(2) { order: 5; }
}
/* Home "Working together" service cards on tablets (768-1100): size to their content */
@media (min-width: 768px) and (max-width: 1100px) {
	.page-home .service-card { min-height: 0; justify-content: flex-start; }
	.page-home .service-card .service-card__more { margin-top: auto; }
}

/* Home "Why sponsors" header on tablets 768-1200: left padding = gap = right padding, intro takes the rest */
@media (min-width: 768px) and (max-width: 1200px) {
	.page-home .benefits__header { justify-content: flex-start; margin-inline: 0; padding-inline: min(64px, 4.4444vw); column-gap: min(64px, 4.4444vw); }
	.page-home .benefits__header .benefits__title { flex: none; }
	.page-home .benefits__header .benefits__intro { flex: 1 1 auto; max-width: 640px; width: auto; min-width: 0; margin-right: 0; }
}
/* "What this means" card, stacked layouts (<=767): fits its content, arcs cropped at the top */
@media (max-width: 767px) {
	.benefit-card--info { height: auto; min-height: 0; justify-content: flex-start; padding-top: 80px; }
	.benefit-card--info .benefit-card__art img { top: -348px; }
}
/* "What this means" card, stacked layouts (<=767): heading wraps evenly, arcs larger and closer to the heading */
@media (max-width: 767px) {
	.benefit-card--info .benefit-card__title { width: auto; text-wrap: balance; }
	.benefit-card--info .benefit-card__art img { transform-origin: 50% 99%; transform: translateX(-50%) translateY(16px) scale(1.25); } /* keeps the centring (translateX) of the older phone rule */
}

/* About "Earlier biometrics" wave, desktop only */
@media (min-width: 1101px) {
	/* Wave height as % of the section, width in proportion. More specific than the fluid-type.css rule. */
	.about-earlier .about-earlier__media img { height: 149.04%; }
}

/* Join "We offer a supportive environment" (section 2), desktop: section sized to its text, artwork scales to fit */
@media (min-width: 1101px) {
	.join-intro.join-intro { min-height: 0; padding-top: 101px; padding-bottom: 100px; } /* visible 100 / 100 (text line spacing) */
}

/* Join the team + Contact navy fades at 30% on the form section, all layouts */
.join-apply.join-apply.join-apply,
.contact-form-section.contact-form-section.contact-form-section {
	--fade: min(240px, 33%);
	background-image: linear-gradient(0deg,
	rgba(30, 54, 78, 0.300) 0,
	rgba(30, 54, 78, 0.252) calc(var(--fade) * 0.0833),
	rgba(30, 54, 78, 0.208) calc(var(--fade) * 0.1667),
	rgba(30, 54, 78, 0.169) calc(var(--fade) * 0.2500),
	rgba(30, 54, 78, 0.133) calc(var(--fade) * 0.3333),
	rgba(30, 54, 78, 0.102) calc(var(--fade) * 0.4167),
	rgba(30, 54, 78, 0.075) calc(var(--fade) * 0.5000),
	rgba(30, 54, 78, 0.052) calc(var(--fade) * 0.5833),
	rgba(30, 54, 78, 0.033) calc(var(--fade) * 0.6667),
	rgba(30, 54, 78, 0.019) calc(var(--fade) * 0.7500),
	rgba(30, 54, 78, 0.008) calc(var(--fade) * 0.8333),
	rgba(30, 54, 78, 0.002) calc(var(--fade) * 0.9167),
	rgba(30, 54, 78, 0.000) calc(var(--fade) * 1));
}

/* Contact hero, tablets 601-1100: spacing from the nav bar to the eyebrow and from the hero text to the form card */
@media (min-width: 601px) and (max-width: 1100px) {
	.contact-hero.contact-hero { min-height: 0; justify-content: flex-start; padding-top: 118px; padding-bottom: 0; } /* 68 nav + 50 */
	.contact-form-section.contact-form-section { padding-top: 30px; }
}

/* Contact page, 601-767: keeps the tablet layout (centred hero text, 40px gutter, centred card, tablet wave) */
@media (min-width: 601px) and (max-width: 767px) {
	.contact-hero.contact-hero { align-items: center; text-align: center; font-size: 13.6px; line-height: 20.4px; }
	.contact-hero .contact-hero__inner { align-items: center; text-align: center; padding-inline: 40px; }
	.contact-hero .contact-hero__eyebrow { font-size: 17px; line-height: 21.25px; letter-spacing: .1275px; }
	.contact-hero .contact-hero__title { font-size: 40.8px; line-height: 44.4px; letter-spacing: -.0221em; }
	.contact-hero .contact-hero__intro { font-size: 16.8px; line-height: 23.1px; font-weight: 400; }
	.contact-form-section.contact-form-section { padding-bottom: 72px; }
	.contact-form-section .contact-form-section__wave { left: 50%; top: -397px; width: 2048px; height: 1152px; transform: translateX(-50%); background-size: contain; }
	.contact-form-section .contact-form-section__inner { padding-inline: 40px; }
	.contact-form-section .contact-form-card { padding: 40px; max-width: 760px; }
	.contact-form-section .contact-form-card__title { font-size: 26.4px; line-height: 31.2px; letter-spacing: -.015em; }
	.contact-form-section .contact-form-card__body,
	.contact-form-section .contact-form-card__cta { font-size: 15.3px; line-height: 21.25px; letter-spacing: normal; }
	.contact-form-section .contact-form-card__cta { margin-top: 32px; }
	.contact-form-section .contact-form__field { font-size: 12px; line-height: 17.85px; }
	.contact-form-section .contact-form input,
	.contact-form-section .contact-form select,
	.contact-form-section .contact-form textarea { letter-spacing: normal; border-color: #d9d9d9; }
	.contact-form-section .contact-form__submit { font-size: 15.3px; line-height: 18.7px; font-weight: 600; }
	.contact-form-section.contact-form-section { min-height: 776px; font-size: 13.6px; line-height: 20.4px; }
	.contact-form-section .contact-form-card { background: #fff; border: 1px solid var(--navy); } /* tablet's navy edge, not the phone gradient */
	.contact-form-section .pcdm-form-msg { font-size: 12px; line-height: 17.85px; }
	.contact-form-section .pcdm-form-done { padding: 56px 32px; }
	.contact-form-section .pcdm-form-done__title { font-size: 19.2px; line-height: 22.8px; }
	.contact-form-section .pcdm-form-done__text { font-size: 13.6px; line-height: 20.4px; }
	.contact-form-section .contact-form input,
	.contact-form-section .contact-form select { height: 46px; }
	.contact-form-section .contact-form input::placeholder,
	.contact-form-section .contact-form textarea::placeholder { color: #9a9a9a; }
	.contact-form-section .contact-form__submit { box-shadow: 0 4px 4.8px rgba(0, 0, 0, .15); }
}

/* About / team-profile CTA heading on phones: show the line break from the mobile copy */
@media (max-width: 600px) {
	.cta--about .cta__title .pcdm-about-mobile-copy br { display: inline; }
}

/* CDM "Designed with analysis in mind", 481-800: heading gap below the digits bar grows with the width */
@media (min-width: 481px) and (max-width: 800px) {
	.svc-clinical-data-management .svc-connected:not(.svc-connected--split) .svc-connected__title { margin-top: calc((100vw - 480px) * .015); }
}

/* Privacy Policy hero: spacing from the nav to the eyebrow and from the hero text to the content */
@media (min-width: 1101px) {
	.pp-hero.pp-hero { min-height: 0; align-items: flex-start; padding-top: 180px; padding-bottom: 0; }
	.pp-content.pp-content { padding-top: 99px; }
}
@media (min-width: 601px) and (max-width: 1100px) {
	.pp-hero.pp-hero { min-height: 0; align-items: flex-start; padding-top: 168px; padding-bottom: 0; }
	.pp-content.pp-content { padding-top: 99px; }
}
@media (max-width: 600px) {
	.pp-hero.pp-hero { min-height: 0; align-items: flex-start; padding-top: 154px; padding-bottom: 0; }
	.pp-content.pp-content { padding-top: 85px; }
}

/* Join hero, tablets 768-1100: content-height hero with spacing below the nav and below the text */
@media (min-width: 768px) and (max-width: 1100px) {
	.join-hero.join-hero { min-height: 0; justify-content: flex-start; padding-top: 168px; padding-bottom: 100px; } /* 68 nav + 100 */
}

/* Advisory first question card on small phones: let the title wrap */
@media (max-width: 392px) {
	.svc-advisory .svc-q-card:first-child .svc-q-card__title { white-space: normal; }
}

/* Headings in navy on every page and layout (brand spans, gradient words and white hero headings excluded) */
.intro__title.intro__title,
.services__title.services__title,
.benefits__title.benefits__title,
.news-card__title.news-card__title,
.join-intro__title.join-intro__title,
.team-card__name.team-card__name,
.values-card__heading.values-card__heading { color: var(--navy); }

/* Home section 2: justified paragraphs on 768+, heading and paragraph sizes and spacing on desktop */
@media (min-width: 768px) {
	.page-home .intro__body.intro__body { text-align: justify; hyphens: none; }
}
@media (min-width: 1101px) {
	.page-home .intro .intro__title {
		font-size: min(41px, 2.8472vw, 5.8156vh);
		line-height: 1.1818; /* 52 / 44 */
		max-width: 14.76em; /* Figma 605px box at 41px - keeps the same line breaks when the window is narrower */
	}
	.page-home .intro .intro__title .grad-text::before { content: "\A"; white-space: pre; }
	.page-home .intro .intro__body {
		font-size: clamp(17px, 1.5486vw, 22.3px);
		line-height: 1.3333; /* 32 / 24 */
	}
}
@media (min-width: 1101px) and (min-height: 741px) {
	.page-home .intro__container.intro__container { padding-top: 89px; padding-bottom: 89px; }
}

/* Home "Integrated Biometrics": paragraphs justified on 768+ */
@media (min-width: 768px) {
	.biometrics .biometrics__text p { text-align: justify; hyphens: none; }
}

/* Home "Why sponsors choose PureCDM": header aligned to the card edges, card order per layout */
@media (min-width: 768px) {
	.page-home .benefits__header.benefits__header { justify-content: space-between; margin-inline: 0; padding-inline: 0; column-gap: 24px; }
	.page-home .benefits__header.benefits__header .benefits__intro { flex: 0 1 633px; max-width: 633px; margin-right: 0; }
}
.page-home .benefits__grid > .benefits__col.benefits__col,
.page-home .benefits__grid > .benefit-card--info.benefit-card--info { order: 0; }
@media (min-width: 768px) and (max-width: 1200px) {
	.page-home .benefits__col:nth-of-type(1) > .benefit-card:nth-child(1) { order: 1; }
	.page-home .benefits__col:nth-of-type(2) > .benefit-card:nth-child(1) { order: 2; }
	.page-home .benefits__col:nth-of-type(1) > .benefit-card:nth-child(2) { order: 3; }
	.page-home .benefits__col:nth-of-type(2) > .benefit-card:nth-child(2) { order: 4; }
	.page-home .benefits__grid > .benefit-card--info.benefit-card--info { order: 5; grid-column: 1 / -1; }
}

/* About "Study & Design experience" card, desktop: arcs positioned from the heading so they stay clear of it */
@media (min-width: 1101px) {
	.study-card.study-card::before { content: none; }
	.study-card .study-card__content { position: relative; }
	.study-card .study-card__content::before {
		content: "";
		position: absolute;
		z-index: -1;
		bottom: calc(100% + 20px);
		left: 50%;
		width: 1376px;
		height: 400px;
		background: url("../images/experience-lines.webp") center / cover no-repeat;
		opacity: 0.4;
		transform: translateX(-50%);
		pointer-events: none;
	}
}

/* About "Earlier biometrics involvement" section, desktop: text column width, heading and paragraph sizes, spacing */
@media (min-width: 1101px) {
	.about-earlier .about-earlier__text { width: min(612px, 42.5vw); }
	.about-earlier .about-earlier__title {
		font-size: min(41px, 2.8472vw, 5.8156vh);
		line-height: 1.1818; /* 52 / 44 */
	}
	.about-earlier .about-earlier__body {
		font-size: clamp(16px, 1.5486vw, 22.3px);
		line-height: 1.3333; /* 32 / 24 */
	}
	.about-earlier .about-earlier__media img { height: min(799px, 55.49vw); }
}
@media (min-width: 1101px) and (min-height: 741px) {
	.about-earlier.about-earlier { padding-block: 89px; }
}
/* About "Earlier biometrics involvement": brand gradient on the heading highlight; second paragraph width on desktop */
.about-earlier .about-earlier__title .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 1101px) {
	/* Line breaks are saved in the text, so the second paragraph has no width limit */
	.about-earlier .about-earlier__body + .about-earlier__body { max-width: none; text-wrap: wrap; }
}
@media (max-width: 1100px) {
	.about-earlier .about-earlier__body br { display: none; } /* tablets wrap naturally (phones use the mobile copy) */
}

/* About "How we work": card texts start level in each row (title heights set in main.js), 768+ */

/* Incomplete last rows left-aligned: service support cards and About team cards on tablets 601-900 */
.svc-support__grid.svc-support__grid:not(.svc-support__grid--cols2) { justify-content: flex-start; }
@media (min-width: 601px) and (max-width: 900px) {
	.about-team__row.about-team__row:not(.about-team__row--featured) { justify-content: flex-start; }
}

/* Team profile bios: one empty line between paragraphs */
.team-profile__bio p + p { margin-top: 1.35em; margin-top: 1lh; }

/* Revealed elements drop will-change so they repaint sharp at full size */
[data-reveal].is-visible { will-change: auto; }

/* Advisory question cards: card text justified on 768+ */
@media (min-width: 768px) {
	.svc-questions .svc-q-card__text { text-align: justify; hyphens: none; }
}

/* Service support card sections, desktop windows taller than 740px: spacing, heading sizes and card heights */
@media (min-width: 1101px) and (min-height: 741px) {
	.svc-support.svc-support { padding-block: 89px; }
	.svc-support .svc-support__header { margin-bottom: 74px; }
	.svc-support .svc-support__title { font-size: min(56px, 3.8889vw); line-height: 1.1333; }
	.svc-support .svc-support__sub { font-size: clamp(15px, 1.1597vw, 16.7px); line-height: 1.3889; }
	.svc-support .svc-support__grid { gap: 24px; }
	.svc-support .svc-card { min-height: calc(var(--svc-card-h, 214px) * .93); }
}

/* Service "The result" text and support card texts: normal text wrapping, 601+ */
@media (min-width: 601px) {
	.svc-result .svc-result__text,
	.svc-result .svc-result__text *,
	.svc-support .svc-card__text,
	.svc-support .svc-card__text * { text-wrap: wrap; }
}

/* Pharmacokinetics "PK insight when it matters", desktop: section padding and wave fill */
@media (min-width: 1101px) {
	.svc-pharmacokinetics .svc-connected--split .svc-connected__body-col.svc-connected__body-col { padding-top: 199px; padding-bottom: 194px; }
	.svc-pharmacokinetics .svc-connected--split .svc-connected__media img { object-fit: fill; width: min(100%, 645px); }
}
/* Service support sections, desktop: spacing and card heights capped by the window height */
@media (min-width: 1101px) and (min-height: 741px) {
	.svc-support.svc-support { padding-block: min(89px, 7vh); }
	.svc-support .svc-support__header { margin-bottom: min(74px, 5.5vh); }
	.svc-support .svc-card { min-height: min(calc(var(--svc-card-h, 214px) * .93), 21vh); }
}

/* ============================================================================
   SERVICES TEMPLATE: desktop (1101+) type sizes for all four service pages.
   Sizes scale with the window width and are capped by the window height.
   ============================================================================ */
@media (min-width: 1101px) {
	.svc-hero .svc-hero__title { font-size: min(63.2px, 4.3889vw, 7.2vh); line-height: 1.0882; }
	.svc-hero .svc-hero__sub { font-size: clamp(17px, 1.5486vw, 22.3px); line-height: 1.375; }
	.svc-result .svc-result__title { font-size: min(40.9px, 2.8403vw, 5.8vh); line-height: 1.1818; }
	.svc-support .svc-card .svc-card__title,
	.svc-questions .svc-q-card__title { font-size: clamp(22px, 2.0694vw, 29.8px); line-height: 1.1875; }
	.svc-questions .svc-questions__title { font-size: min(56px, 3.8889vw, 7vh); line-height: 1.1333; }
	.svc-questions .svc-questions__lead { font-size: clamp(17px, 1.5486vw, 22.3px); line-height: 1.3333; }
	[class*="svc-"] .svc-connected .svc-connected__title,
	.svc-connected .svc-connected__title.svc-connected__title { font-size: min(56px, 3.8889vw, 7vh); line-height: 1.1333; }
	.cta.cta--service .cta__title { font-size: min(44.6px, 3.0972vw, 6.2vh); line-height: 1.2083; }
}
@media (min-width: 1101px) and (min-height: 741px) {
	.svc-questions.svc-questions { padding-block: min(89px, 7vh); }
}
/* fit-to-screen for the 93% sizes (1366x768 and similar): card titles also follow the window height */
@media (min-width: 1101px) {
	.svc-support .svc-card .svc-card__title,
	.svc-questions .svc-q-card__title { font-size: clamp(22px, min(2.0694vw, 3.5vh), 29.8px); }
}
@media (min-width: 1101px) and (min-height: 741px) and (max-height: 800px) {
	.svc-questions.svc-questions { padding-block: 36px; }
	.svc-support.svc-support { padding-block: 40px; }
	.svc-support .svc-support__header { margin-bottom: 32px; }
}

/* Service card titles: normal wrapping, title box width set in em on desktop to control line breaks */
@media (min-width: 768px) {
	.svc-support .svc-card .svc-card__title,
	.svc-support .svc-card .svc-card__title *,
	.svc-questions .svc-q-card__title,
	.svc-questions .svc-q-card__title * { text-wrap: wrap; }
}
@media (min-width: 1101px) {
	.svc-support .svc-card .svc-card__title { max-width: 11.083em; }
}

/* Service "The result" text: max width on desktop */
@media (min-width: 1101px) {
	.svc-result .svc-result__text { max-width: 18.75em; }
}

/* Service section 2 (intro text + "The result" card), desktop: sizes, padding and gaps scaled below 1440 */
@media (min-width: 1101px) {
	.svc-intro .svc-intro__grid { gap: min(80px, 5.5556vw); }
	.svc-intro .svc-intro__text { width: min(539px, 37.4306vw); }
	.svc-intro .svc-intro__text p { font-size: clamp(15px, 1.3889vw, 20px); line-height: 1.35; }
	.svc-result.svc-result {
		width: min(423px, 29.375vw);
		min-height: min(440px, 30.5556vw);
		justify-content: flex-end;
		padding: 178px min(23px, 1.5972vw) 32px; /* 23 + the 1px border = Figma's 24 (text box 375px, as Figma) */
	}
	.svc-result .svc-result__graph { width: 135.46%; left: -17.85%; }
	.svc-result .svc-result__title.svc-result__title { max-width: 6.909em; font-size: min(44px, 3.0556vw); line-height: 1.1818; }
	.svc-result .svc-result__text.svc-result__text { max-width: none; font-size: clamp(15px, 1.3889vw, 20px); line-height: 1.35; }
}
@media (min-width: 1101px) and (min-height: 741px) {
	.svc-intro .svc-intro__grid { padding-block: min(96px, 6.6667vw); }
}

/* Join the Team, desktop 1101+: hero height and type sizes, section 2 heading and text sizes */
@media (min-width: 1101px) {
	.join-hero.join-hero { min-height: min(755px, 100vh); padding-top: 80px; padding-bottom: 37px; justify-content: center; }
	.join-hero .join-hero__heading { font-size: min(63.2px, 4.3889vw, 7.2vh); line-height: 1.0882; }
	.join-hero .join-hero__sub { font-size: clamp(17px, 1.5486vw, 22.3px); line-height: 1.375; max-width: 30.333em; }
	.join-intro .join-intro__title { font-size: min(29.8px, 2.0694vw); line-height: 1.1875; max-width: 18.344em; }
	.join-intro .join-intro__body,
	.join-intro .join-intro__cta { font-size: clamp(16px, 1.5486vw, 22.3px); line-height: 1.375; max-width: 24.833em; }
	.join-intro .join-intro__body *,
	.join-intro .join-intro__cta * { font-size: inherit; line-height: inherit; }
}

/* Service connected sections (CDM, Bio, PK): one shared height with the text centred, desktop and tablet */
@media (min-width: 1101px) {
	.svc-connected.svc-connected:not(.svc-connected--split) { min-height: min(600px, 41.667vw); padding-top: 48px; padding-bottom: 48px; justify-content: center; }
	.svc-connected--split.svc-connected--split { min-height: min(600px, 41.667vw); }
	[class*="svc-"] .svc-connected--split .svc-connected__body-col.svc-connected__body-col { padding-top: 48px; padding-bottom: 48px; justify-content: center; }
	.svc-pharmacokinetics .svc-connected--split .svc-connected__media img { width: min(100%, 635px, 44.08vw); }
}
@media (min-width: 768px) and (max-width: 1100px) {
	.svc-connected.svc-connected:not(.svc-connected--split),
	.svc-connected--split.svc-connected--split { min-height: max(460px, 41.667vw); }
	.svc-connected.svc-connected:not(.svc-connected--split) { padding-top: 48px; padding-bottom: 48px; justify-content: center; }
	[class*="svc-"] .svc-connected--split .svc-connected__body-col.svc-connected__body-col { justify-content: center; }
}
@media (min-width: 901px) and (max-width: 1100px) {
	[class*="svc-"] .svc-connected--split .svc-connected__body-col.svc-connected__body-col { padding-top: 48px; padding-bottom: 48px; }
}

/* CDM / Bio / PK connected sections: body text size, scales with the window. Desktop. */
@media (min-width: 1101px) {
	[class*="svc-"] .svc-connected .svc-connected__body,
	[class*="svc-"] .svc-connected .svc-connected__body * { font-size: clamp(15px, 1.1597vw, 16.7px); line-height: 1.3889; }
}