/*
 * DataLase — main stylesheet.
 * Enqueued by datalase_assets() in functions.php.
 *
 * Design tokens sourced from the DataLase Figma file (Pantone refs in
 * brackets). Helvetica Neue is served via the system stack for now —
 * a licensed webfont kit will be added later; keep the family first in
 * --font-base so the kit takes over automatically.
 */

:root {
	/* Brand colours */
	--color-orange:  #E35205; /* 166C — primary */
	--color-yellow:  #EAAA00; /* 124C */
	--color-magenta: #AA0061; /* 227 X */
	--color-green:   #719949; /* 7490C */
	--color-blue:    #0086BF; /* 7460C */
	--color-navy:    #002F6C; /* 294 */

	/* Neutrals */
	--color-dark:      #1D1D1B; /* Black C — body text */
	--color-dark-navy: #18222C; /* WP D Navy — dark section / footer bg */
	--color-grey:      #A7A8AA; /* Cool Grey 6C */
	--color-grey-light:#C8C9C7; /* Cool Grey 3C */
	--color-grey-bg:   #F4F4F4; /* light grey band (sampled from the design) */
	--color-white:     #FFFFFF;

	/* Semantic aliases */
	--color-primary:   var(--color-orange);
	--color-body:      var(--color-dark);

	/* Full-width edge padding: 100px at 1920, scaling with the viewport */
	--edge-pad: max(1.5rem, 5.2083vw);

	/* Typography */
	--font-base: "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* Type scale (desktop) — size / line-height / weight per Figma styles */
	--text-heading-size:        3rem;      /* 48px — Headings */
	--text-heading-leading:     1.0833;    /* 52px */
	--text-heading-weight:      500;

	--text-subheading-xl-size:  1.875rem;  /* 30px — Sub Heading Xtra */
	--text-subheading-xl-leading: 1.1667;  /* 35px */
	--text-subheading-xl-weight: 500;

	--text-subheading-size:     1.5625rem; /* 25px — Sub Headings */
	--text-subheading-leading:  1.28;      /* 32px */
	--text-subheading-weight:   700;

	--text-body-size:           1.25rem;   /* 20px — Body Copy med */
	--text-body-leading:        1.25;      /* 25px */
	--text-body-weight:         500;

	--text-body-sm-size:        1.0625rem; /* 17px — Body Copy Footer */
	--text-body-sm-leading:     1.2353;    /* 21px */
	--text-body-sm-weight:      500;

	--text-nav-size:            0.875rem;  /* 14px — Nav Bar */
	--text-nav-leading:         1;
	--text-nav-weight:          700;
}

/* Mobile type scale — Mobile Heading 30/32, Mobile Body Copy med 14/17 */
@media (max-width: 767px) {
	:root {
		--text-heading-size:    1.875rem;  /* 30px */
		--text-heading-leading: 1.0667;    /* 32px */

		--text-body-size:       0.875rem;  /* 14px */
		--text-body-leading:    1.2143;    /* 17px */
	}
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-base);
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-leading);
	color: var(--color-body);
	background: var(--color-white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.5em;
}

h1 {
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
}

h2 {
	font-size: var(--text-subheading-xl-size);
	font-weight: var(--text-subheading-xl-weight);
	line-height: var(--text-subheading-xl-leading);
}

h3 {
	font-size: var(--text-subheading-size);
	font-weight: var(--text-subheading-weight);
	line-height: var(--text-subheading-leading);
}

a {
	color: var(--color-primary);
}

img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ */
/* Accessibility helpers                                               */
/* ------------------------------------------------------------------ */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	clip: auto;
	clip-path: none;
	background: var(--color-white);
	color: var(--color-body);
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.site-header__inner,
.site-footer__inner,
.section__inner {
	max-width: 75rem; /* 1200px content column on the 1920 designs */
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.section {
	padding-block: 4rem;
}

/* ------------------------------------------------------------------ */
/* Section: Hero (centered intro — e.g. "Product Identification.       */
/* Re-engineered." on the homepage)                                    */
/* ------------------------------------------------------------------ */

.section--hero {
	text-align: center;
}

.section--hero .section__inner {
	/* 730px text measure per the Figma block, 30px between elements */
	max-width: 45.625rem;
	display: grid;
	gap: 1.875rem;
	justify-items: center;
}

/* Hero heading holds its display size whichever tag it renders as — the
   H1/H2 choice is semantic (one H1 per page), never visual. Without this
   it would inherit the bare h1/h2 element sizes and shrink as an H2. */
.hero__heading {
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
}

.section--hero .hero__heading,
.section--hero .hero__text p {
	margin: 0;
}

/* Paragraph separation inside the text block: one blank line (25px) */
.section--hero .hero__text p + p {
	margin-top: 1.5625rem;
}

/* ------------------------------------------------------------------ */
/* Section: Split Content — coloured band, circular image one side,    */
/* content the other. Variants: image left/right, text left/centered,  */
/* brand background colours, optional accordion.                       */
/* ------------------------------------------------------------------ */

.bg--white   { background: var(--color-white); }
/* Light grey band — the quiet way to separate two sections that would
   otherwise both be white. */
.bg--grey    { background: var(--color-grey-bg); }
.bg--orange  { background: var(--color-orange); }
.bg--yellow  { background: var(--color-yellow); }
.bg--magenta { background: var(--color-magenta); }
.bg--green   { background: var(--color-green); }
.bg--navy    { background: var(--color-navy); }
.bg--blue    { background: var(--color-blue); }

.section--split {
	color: var(--color-white);
	padding-block: 3.125rem; /* 820px band − 719px circle at 1920 */
}

.section--split__inner {
	/* Content spread on the 1920 design: 719px circle + ~60px gap +
	   638px content column */
	max-width: 88.5rem;
	display: grid;
	grid-template-columns: minmax(0, 719fr) minmax(0, 638fr);
	gap: clamp(2rem, 3.1vw, 3.75rem);
	align-items: center;
}

.section--split-image-right .section--split__inner {
	grid-template-columns: minmax(0, 638fr) minmax(0, 719fr);
}

.section--split-image-right .section--split__media {
	order: 2;
}

.section--split__media {
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	max-width: 719px;
	justify-self: center;
	width: 100%;
}

.section--split__media img,
.section--split__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Maps and oEmbed players both arrive as iframes carrying their own width
   and height attributes — override those so they fill the pane. */
.section--split__media iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Maps stay square. Google puts its zoom controls, attribution and "view
   larger map" link in the corners, all of which a circle clips away. */
.section--split__media--map {
	border-radius: 0;
}

/* Editor-only stand-in when a map has no API key or no location set. */
.section--split__media--notice {
	display: grid;
	place-items: center;
	padding: 3rem;
	text-align: center;
	background: rgba(0, 0, 0, 0.08);
}

/* Content column: 15px between every element per Figma */
.section--split__content {
	display: grid;
	gap: 1.875rem;
	justify-items: start;
}

.section--split-center .section--split__content {
	text-align: center;
	justify-items: center;
}

.section--split__heading {
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
	margin: 0;
}

.section--split__text p {
	margin: 0;
}

.section--split__text p + p {
	margin-top: 1.5625rem;
}

.section--split a:not(.button) {
	color: var(--color-white);
}

@media (max-width: 899px) {
	.section--split__inner,
	.section--split-image-right .section--split__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.section--split__media,
	.section--split-image-right .section--split__media {
		order: 0;
		max-width: 27rem;
	}
}

/* Accordion (native details/summary) */

.accordion {
	width: 100%;
	display: grid;
}

.accordion__item {
	border-top: 1px solid rgba(255, 255, 255, 0.45);
}

.accordion__item:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.accordion__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.9375rem;
	list-style: none;
	cursor: pointer;
	font-size: var(--text-subheading-size);
	font-weight: var(--text-subheading-weight);
	line-height: var(--text-subheading-leading);
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.accordion__title::-webkit-details-marker {
	display: none;
}

.accordion__item[open] > .accordion__title,
.accordion__title:hover,
.accordion__title:focus-visible {
	opacity: 1;
}

.accordion__chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.accordion__item[open] .accordion__chevron {
	transform: rotate(180deg);
}

.accordion__copy {
	padding-bottom: 0.9375rem;
	max-width: 38.25rem;
}

.accordion__copy p {
	margin: 0;
}

/*
 * Datasheet download, or a link, at the foot of an accordion item.
 * Beats the "margin: 0" above by coming later at the same specificity.
 */
.accordion__copy .accordion__actions {
	margin: 1.25rem 0 0;
}

.accordion__action {
	font-size: var(--text-nav-size);
}

.accordion__action-detail {
	margin-left: 0.5em;
	font-weight: 500;
	opacity: 0.75;
}

/*
 * Accordions live inside coloured bands more often than not, where a dark
 * pill disappears into the background. Same white-pill treatment the
 * section's own button already uses there.
 */
.section--split:not(.bg--white) .accordion__action,
.section--faqs:not(.bg--white) .accordion__action {
	background: var(--color-white);
	color: var(--color-dark);
}

/*
 * Barely there on hover, deliberately. The pill's usual orange hover is a
 * brand colour, and these buttons only ever sit on brand-coloured bands -
 * on the orange band it vanished into the background, and on the others it
 * fought them. An off-white keeps the button reading as a button without
 * introducing a fifth colour to the band.
 */
.section--split:not(.bg--white) .accordion__action:hover,
.section--split:not(.bg--white) .accordion__action:focus-visible,
.section--faqs:not(.bg--white) .accordion__action:hover,
.section--faqs:not(.bg--white) .accordion__action:focus-visible {
	background: var(--color-grey-bg);
	color: var(--color-dark);
}

/* ------------------------------------------------------------------ */
/* Section: Circles Marquee — two columns of circles looping           */
/* vertically in opposite directions, content on the right.            */
/* ------------------------------------------------------------------ */

.section--circles {
	background: var(--color-grey-bg);
	height: clamp(31rem, 42.7vw, 51.25rem); /* 820px at 1920 */
	padding: 0;
	overflow: hidden;
}

.section--circles__inner {
	max-width: none;
	height: 100%;
	padding-inline: var(--edge-pad) var(--edge-pad);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	/* Definite row height so the circles column can be 100% of the band
	   rather than growing to the track's intrinsic height. */
	grid-template-rows: 100%;
	gap: clamp(2rem, 4vw, 5rem);
	align-items: center;
}

.circles {
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5625rem; /* 25px between columns and circles */
}

.circles__col {
	overflow: hidden;
	height: 100%;
}

/* The track holds two identical sets; shifting by exactly half its
   height (one set + its margin) makes the loop seamless. */
.circles__set {
	display: grid;
	gap: 1.5625rem;
	margin-bottom: 1.5625rem;
}

.circles__col--down .circles__track {
	animation: circles-down 45s linear infinite;
}

.circles__col--up .circles__track {
	animation: circles-up 38s linear infinite;
}

/* Offset the second column so the two never align */
.circles__col--up .circles__track {
	animation-delay: -12s;
}

@keyframes circles-down {
	from { transform: translateY(-50%); }
	to   { transform: translateY(0); }
}

@keyframes circles-up {
	from { transform: translateY(0); }
	to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.circles__track {
		animation: none !important;
	}
}

.circle {
	aspect-ratio: 1;
	width: 100%;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
}

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

.circle__label {
	color: var(--color-white);
	font-size: var(--text-subheading-xl-size);
	font-weight: var(--text-subheading-xl-weight);
	line-height: var(--text-subheading-xl-leading);
	text-align: center;
	padding: 1rem;
}

.section--circles__content {
	text-align: center;
	display: grid;
	gap: 1.875rem;
	justify-items: center;
	max-width: 41rem;
	margin-inline: auto;
}

.section--circles__heading {
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
	margin: 0;
}

.section--circles__text p {
	margin: 0;
}

@media (max-width: 899px) {
	.section--circles {
		height: auto;
	}

	.section--circles__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		padding-block: 3rem;
	}

	.circles {
		height: 24rem;
		order: 2;
	}
}

/* ------------------------------------------------------------------ */
/* Section: Video Reveal — looping video under a coloured overlay      */
/* with a circular hole; the hole radius (--hole) is scrubbed open by  */
/* ScrollTrigger until the overlay is gone.                            */
/* ------------------------------------------------------------------ */

.section--video-reveal {
	position: relative;
	height: clamp(31rem, 42.7vw, 51.25rem); /* 820px band at 1920 */
	padding: 0;
	overflow: hidden;
}

.video-reveal__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-reveal__overlay {
	position: absolute;
	inset: 0;
	/* Circle radius at rest — 719px diameter on the 1920 design */
	--hole: clamp(10rem, 18.7vw, 22.5rem);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--hole) - 1px), #000 var(--hole));
	mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--hole) - 1px), #000 var(--hole));
}

.video-reveal__content {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1.875rem; /* 30px between elements per Figma */
	text-align: center;
	max-width: 39.25rem; /* 627px content column per Figma */
	margin-inline: auto;
	color: var(--color-white);
	padding: 1.5rem;
}

/* Headings style (48/52 Medium) per Figma node 341:760 */
.video-reveal__heading {
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
	margin: 0;
}

/* Body Copy med (20/25) per Figma node 341:761 */
.video-reveal__text {
	font-size: var(--text-body-size);
	line-height: var(--text-body-leading);
}

.video-reveal__text p {
	margin: 0;
}

.video-reveal__text p + p {
	margin-top: 1.5625rem;
}

@media (prefers-reduced-motion: reduce) {
	.video-reveal__media {
		display: none;
	}

	.section--video-reveal {
		background: var(--color-dark-navy);
	}
}

/* ------------------------------------------------------------------ */
/* Section: Carousel — intro left, cards right. Three cards fit the    */
/* content area; the rest bleed off the viewport edge (clipped, no     */
/* page scrollbar). Arrows + scroll-snap move one card at a time.      */
/* ------------------------------------------------------------------ */

.section--carousel {
	overflow-x: clip; /* the bleed must never create a page scrollbar */
	padding-block: 2.25rem 4rem;
}

.section--carousel__inner {
	display: grid;
	grid-template-columns: minmax(15rem, 21.5rem) minmax(0, 1fr);
	gap: clamp(2rem, 4.8vw, 5.8rem);
	padding-inline: var(--edge-pad);
}

.section--carousel__intro {
	align-self: center;
	display: grid;
	gap: 1.875rem;
	justify-items: start;
}

.section--carousel__heading {
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
	margin: 0;
}

.section--carousel__stage {
	position: relative;
	min-width: 0;
}

/* The track's visible box runs from the content column to the viewport
   edge (negative margin), with matching end padding so the last card
   can snap fully into view. Card widths are computed from the column
   width (the track's content box), so exactly three fit the container. */
.carousel__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin-right: calc(-1 * var(--edge-pad));
	padding-right: var(--edge-pad);
	scrollbar-width: none;
	/* No grab cursor: an open hand reads as "click me" on a card that does
	   not lead anywhere. Dragging still works, it just is not advertised. */
}

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

/* While dragging: snap released so the track follows the pointer;
   restored on release, when the script snaps to the nearest card. */
.carousel__track.is-dragging {
	scroll-snap-type: none;
}

.carousel__track img {
	-webkit-user-drag: none;
	user-select: none;
}

.carousel-card {
	flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
	scroll-snap-align: start;
	color: inherit;
	text-decoration: none;
}

.carousel-card__media {
	aspect-ratio: 415 / 630;
	border-radius: 20px;
	overflow: hidden;
}

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

.carousel-card__copy {
	margin-top: 1.5625rem;
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-leading);
}

.carousel-card__copy p {
	margin: 0;
}

a.carousel-card:hover .carousel-card__copy,
a.carousel-card:focus .carousel-card__copy {
	text-decoration: underline;
}

/* Arrows: 80px white circles, sitting on the container's right/left
   edges. Vertical position (half the image height) is set inline by
   the carousel script, since it derives from the card width. */
.carousel__arrow {
	position: absolute;
	top: 40%; /* fallback until the script positions it */
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	color: var(--color-dark);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition: opacity 0.2s ease;
	z-index: 5;
}

.carousel__arrow svg {
	width: 31px;
	height: auto;
}

.carousel__arrow svg path {
	fill: currentColor;
}

.carousel__arrow--next {
	right: 0;
	transform: translate(50%, -50%);
}

.carousel__arrow--prev {
	left: 0;
	transform: translate(-50%, -50%);
}

.carousel__arrow:hover,
.carousel__arrow:focus-visible {
	background: var(--color-dark);
	color: var(--color-white);
}

.carousel__arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 899px) {
	.section--carousel__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-right: var(--edge-pad);
	}

	.carousel__track {
		margin-right: calc(-1 * var(--edge-pad));
	}

	.carousel-card {
		flex-basis: min(70%, 20rem);
	}

	.carousel__arrow {
		width: 56px;
		height: 56px;
	}

	.carousel__arrow--next {
		transform: translate(25%, -50%);
	}

	.carousel__arrow--prev {
		transform: translate(-25%, -50%);
	}
}

/* ------------------------------------------------------------------ */
/* Section: Contact Form — centered intro over a Gravity Form styled   */
/* to the outlined-field design (72px rounded fields, placeholder      */
/* labels, black pill submit).                                         */
/* ------------------------------------------------------------------ */

.section--form__inner {
	max-width: 80.625rem; /* 1290px form column per Figma */
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.section--form__intro {
	text-align: center;
	display: grid;
	gap: 1.875rem;
	justify-items: center;
	max-width: 45.625rem;
	margin-inline: auto;
	margin-bottom: 3.75rem;
}

.section--form__heading {
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
	margin: 0;
}

.section--form__text p {
	margin: 0;
}

/* Fields: 72px outlined rounded boxes, labels hidden in favour of
   placeholders (set placeholders on the form in Gravity Forms). */
.section--form .gfield_label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.section--form .gfield--type-consent .gfield_label {
	display: none;
}

.section--form .gform_wrapper input[type="text"],
.section--form .gform_wrapper input[type="email"],
.section--form .gform_wrapper input[type="tel"],
.section--form .gform_wrapper input[type="number"],
.section--form .gform_wrapper select,
.section--form .gform_wrapper textarea {
	width: 100%;
	border: 1px solid var(--color-grey-light);
	border-radius: 20px;
	background: var(--color-white);
	color: var(--color-body);
	font-family: var(--font-base);
	font-size: var(--text-body-sm-size);
	font-weight: var(--text-body-sm-weight);
	padding: 0 1.75rem;
	height: 4.5rem;
}

.section--form .gform_wrapper textarea {
	height: auto;
	min-height: 14rem;
	padding-block: 1.5rem;
	resize: vertical;
}

/* Selects: strip native chrome, add our own chevron, keep text
   vertically centered like the inputs. */
.section--form .gform_wrapper select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7' viewBox='0 0 14 7'%3E%3Cpath d='M1 1l6 5 6-5' fill='none' stroke='%231D1D1B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.75rem center;
	padding-right: 3.5rem;
	/* With appearance:none the text obeys line-height rather than
	   self-centering like inputs — match it to the control height. */
	line-height: 4.5rem !important;
}

/* No "(Required)" suffixes in this design */
.section--form .gform_wrapper .gfield_required {
	display: none !important;
}

.section--form .gform_wrapper input:focus,
.section--form .gform_wrapper select:focus,
.section--form .gform_wrapper textarea:focus {
	outline: 2px solid var(--color-dark);
	outline-offset: -1px;
}

.section--form .gform_wrapper ::placeholder {
	color: var(--color-body);
	opacity: 1;
}

/* Consent: small print with a round checkbox */
.section--form .gfield--type-consent {
	font-size: 0.75rem;
	line-height: 1.25;
}

.section--form .gform_wrapper input[type="checkbox"] {
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--color-dark);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}

.section--form .gform_wrapper input[type="checkbox"]:checked {
	background: var(--color-dark);
	box-shadow: inset 0 0 0 3px var(--color-white);
}

/* Submit: black pill, left aligned */
.section--form .gform_footer {
	margin-top: 1.5rem;
	padding: 0;
}

.section--form .gform_footer input[type="submit"],
.section--form .gform_footer button {
	background: var(--color-dark) !important;
	color: var(--color-white) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 1rem 2.5rem !important;
	font-family: var(--font-base) !important;
	font-size: var(--text-nav-size) !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer;
}

.section--form .gform_footer input[type="submit"]:hover,
.section--form .gform_footer button:hover {
	background: var(--color-primary) !important;
}

/* ------------------------------------------------------------------ */
/* Section: Latest Posts — carousel of the newest items from a chosen  */
/* post type. Reuses the carousel track/arrow mechanics with a heading */
/* row on top and shorter (432×360) card images.                       */
/* ------------------------------------------------------------------ */

.section--latest-posts {
	background: var(--color-grey-bg);
	/* Band spacing per Figma: 138px above the heading, 122px below the titles */
	padding-block: clamp(4rem, 7.2vw, 8.625rem) clamp(3.5rem, 6.35vw, 7.625rem);
}

.section--latest-posts__inner {
	padding-inline: var(--edge-pad);
}

.section--latest-posts__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 4.25rem;
}

.section--latest-posts__heading {
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
	margin: 0;
}

.carousel-card--post .carousel-card__media {
	aspect-ratio: 432 / 360;
}

@media (max-width: 899px) {
	.section--latest-posts__head {
		flex-wrap: wrap;
		margin-bottom: 2.5rem;
	}
}

/* ------------------------------------------------------------------ */
/* Section: Page Header — full-width image band, dark navy overlay,    */
/* page title overlaid left. 1920×630 on the design.                   */
/* ------------------------------------------------------------------ */

.section--page-header {
	position: relative;
	height: clamp(18rem, 32.8vw, 39.375rem); /* 630px at 1920 */
	padding: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.page-header__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay keeping the heading legible over a photograph. Colour and
   strength are set per section in the admin, as custom properties; the
   values here are the Figma default for anything that doesn't override
   them — including single posts and archives, which have no fields. */
.section--page-header::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--page-header-overlay, #0D263A);
	opacity: var(--page-header-overlay-opacity, 0.5);
}

/* Switched off in the admin, or a plain band with no image beneath it. */
.section--page-header--no-overlay::after {
	display: none;
}

.page-header__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-inline: var(--edge-pad);
}

.page-header__heading {
	color: var(--color-white);
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
	max-width: 37rem;
	margin: 0;
}

/* Posts with no featured image: same type, alignment and edge pad, but a
   solid navy band rather than a photograph. The overlay is switched off
   since there is nothing underneath it to darken. */
.section--page-header--plain {
	height: auto;
	padding-block: 4rem;
	background: var(--color-navy);
}

.section--page-header--plain::after {
	display: none;
}

.page-header__meta {
	margin: 0.75rem 0 0;
	color: rgba(255, 255, 255, 0.75);
}

/* ------------------------------------------------------------------ */
/* Section: Hub Diagram — navy band, central circle on an orbit ring,  */
/* satellites split evenly left/right, with a spare one below the hub  */
/* when the count is odd. Geometry is % of a fixed-aspect stage taken  */
/* from the 1920×1084 Figma band, computed in datalase_hub_layout().   */
/* ------------------------------------------------------------------ */

.section--hub {
	background: var(--color-navy);
	color: var(--color-white);
	padding: 0;
	overflow: hidden;
}

.hub__stage {
	position: relative;
	aspect-ratio: 1920 / 1084;
}

/* Orbit ring: 717px circle. The offset is 0 unless the layout is an even one
   being recentred, and every absolutely positioned piece adds it so the whole
   diagram moves together. */
.hub__ring {
	position: absolute;
	left: 30.09%;
	top: calc(8.56% + var(--hub-offset, 0%));
	width: 37.34%;
	aspect-ratio: 1;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
}

/* Central filled circle: 603.5px */
.hub__centre {
	position: absolute;
	left: 33.05%;
	top: calc(13.79% + var(--hub-offset, 0%));
	width: 31.43%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-blue);
	display: grid;
	grid-template-rows: auto auto 1fr;
	justify-items: center;
	padding-top: 4.4%;
	overflow: hidden;
	text-align: center;
}

.hub__tick {
	display: block;
	width: 6.5%;
	line-height: 0;
	margin-bottom: 4%;
}

.hub__tick svg {
	width: 100%;
	height: auto;
}

.hub__heading {
	font-size: clamp(1.125rem, 1.82vw, 2.1875rem); /* ~35px at 1920 */
	font-weight: 500;
	line-height: 1.2;
	max-width: 62%;
	margin: 0;
}

.hub__centre-image {
	align-self: end;
	width: 71%;
	line-height: 0;
}

.hub__centre-image img {
	width: 100%;
	height: auto;
	/* White-background product shots blend into the circle colour */
	mix-blend-mode: multiply;
}

/* Satellite items. display:contents lets the circle/text/connector
   position against the stage while the wrapper (possibly an <a>)
   stays purely semantic. */
.hub-item {
	display: contents;
	color: inherit;
	text-decoration: none;
}

.hub-item__circle {
	position: absolute;
	width: 9.27%; /* 178px */
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-white);
}

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

.hub-item__text {
	position: absolute;
	display: block;
}

.hub-item__title {
	display: block;
	font-size: clamp(0.875rem, 1.04vw, 1.25rem); /* 20px at 1920 */
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 0.5em;
}

.hub-item__copy {
	display: block;
	font-size: clamp(0.75rem, 0.89vw, 1.0625rem); /* 17px at 1920 */
	line-height: 1.24;
}

a.hub-item:hover .hub-item__title,
a.hub-item:focus .hub-item__title {
	text-decoration: underline;
}

/* Connectors: 1px lines from each circle's edge to the orbit ring,
   coloured dot (--dot) at the ring end. Positions/angles derived from
   the Figma line + dot nodes. */
.hub-item__connector {
	position: absolute;
	height: 1px;
	background: rgba(255, 255, 255, 0.8);
	transform-origin: left center;
}

.hub-item__connector::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 50%;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--dot, var(--color-orange));
	transform: translateY(-50%);
}

/* Slot geometry. Every value below is computed per item by
   datalase_hub_layout() and arrives as a custom property on .hub-item, so the
   section places any number of items instead of exactly seven. */
.hub-item__circle {
	left: var(--hub-x);
	top: calc(var(--hub-y) + var(--hub-offset, 0%));
}

.hub-item__text {
	left: var(--hub-text-x);
	width: var(--hub-text-w);
	/* Centred on its circle rather than nudged per slot, so the alignment
	   holds however many items there are. */
	top: calc(var(--hub-cy) + var(--hub-offset, 0%));
	transform: translateY(-50%);
}

.hub-item__connector {
	left: var(--hub-line-x);
	top: calc(var(--hub-line-y) + var(--hub-offset, 0%));
	width: var(--hub-line-len);
	transform: rotate(var(--hub-angle));
}

/* Mobile: stacked list — hub circle first, items as rows */
@media (max-width: 899px) {
	.section--hub {
		padding-block: 3rem;
	}

	.hub__stage {
		aspect-ratio: auto;
		display: grid;
		gap: 1.75rem;
		padding-inline: var(--edge-pad);
	}

	.hub__ring,
	.hub-item__connector {
		display: none;
	}

	.hub__centre {
		position: static;
		width: min(100%, 22rem);
		justify-self: center;
		padding-top: 2rem;
	}

	.hub__tick { width: 2.5rem; }

	.hub-item {
		display: flex;
		align-items: center;
		gap: 1.25rem;
	}

	/* Selectors doubled up to out-rank the desktop slot geometry */
	.hub-item .hub-item__circle {
		position: static;
		width: 5.5rem;
		flex-shrink: 0;
		/* dot reappears as a marker on the circle edge */
		outline: 3px solid var(--dot, var(--color-orange));
		outline-offset: 2px;
	}

	.hub-item .hub-item__text {
		position: static;
		width: auto;
		min-width: 0;
		flex: 1;
		/* Undo the desktop centring, which would otherwise shift each row. */
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* Product finder table                                                */
/*                                                                     */
/* A matrix of ranges by product family, dropped into a Full Content    */
/* section, so it looks after its own width. Three behaviours by width: */
/* wide enough and it is a plain table; in between it scrolls sideways  */
/* in its own box; on a phone it stops being a table and stacks into    */
/* one group per family, because six columns of prose cannot usefully   */
/* be squeezed onto a handset.                                          */
/* ------------------------------------------------------------------ */

.pf-wrap {
	/* Wider than a reading measure: six columns of product codes need the
	   room. Breaks out of the text column, stopping at the site's own
	   content width. */
	width: min(90rem, 100vw - (var(--edge-pad) * 2));
	margin-inline: auto;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.pf {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* A scrollable box is a tab stop, or a keyboard cannot reach the columns
   that are off screen. */
.pf:focus-visible {
	outline: 3px solid var(--color-blue);
	outline-offset: 3px;
}

/* Only worth saying while there is in fact something off screen. */
.pf__hint {
	display: none;
	margin: 0 0 0.75rem;
	font-size: var(--text-body-sm-size);
	color: var(--color-grey);
}

.pf__table {
	width: 100%;
	min-width: 60rem;
	border-collapse: separate;
	/* The gaps between blocks are the design, not a border. */
	border-spacing: 0.3125rem;
	table-layout: fixed;
	color: var(--color-dark);
}

.pf__head,
.pf__sub {
	color: var(--color-white);
	text-align: center;
	vertical-align: middle;
	padding: 0.9rem 0.75rem;
	font-size: var(--text-body-sm-size);
	line-height: 1.25;
	font-weight: 700;
}

.pf__head--pigments  { background: var(--color-blue); }
.pf__head--coatings  { background: var(--color-orange); }
.pf__head--multilase { background: var(--color-navy); }
.pf__head--lumina    { background: var(--color-green); }
.pf__sub             { background: var(--color-grey); font-weight: 500; }

.pf__cell {
	vertical-align: top;
	padding: 0.9rem 0.85rem;
	text-align: center;
	font-size: 0.9375rem; /* 15px: six columns of prose need to be compact */
	line-height: 1.3;
	/* Long product codes must not push a column past its share. */
	overflow-wrap: anywhere;
}

/*
 * Each family tints its own cells. Held in a variable per column so the
 * zebra below stays one pair of rules rather than one per colour.
 */
.pf__cell--pigment   { --pf-tint: var(--color-blue); }
.pf__cell--coating   { --pf-tint: var(--color-grey); }
.pf__cell--multilase { --pf-tint: var(--color-navy); }
.pf__cell--lumina    { --pf-tint: var(--color-green); }

.pf__table tbody td { background: color-mix(in srgb, var(--pf-tint) 7%, #fff); }
.pf__table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--pf-tint) 14%, #fff); }

/* A column that has run out of products leaves a hole, not a blank tile. */
.pf__table tbody td.pf__cell--empty { background: none; }

.pf__name {
	display: block;
	font-weight: 700;
	margin-bottom: 0.35em;
}

.pf__note {
	display: block;
	font-weight: 500;
}

/* Between the two: still a table, but it has to scroll, so say so. */
@media (max-width: 74.9375rem) {
	.pf__hint { display: block; }
}

/*
 * Phones: stop being a table. Rows are meaningless here — each *column*
 * is a family, so the cells are reordered column-first into one stacked
 * group per family, each under its own heading. display:contents on the
 * rows is what lets order: reach across them.
 */
@media (max-width: 47.9375rem) {
	.pf-wrap {
		width: auto;
		left: auto;
		transform: none;
	}

	.pf { overflow-x: visible; }
	.pf__hint { display: none; }

	.pf__table {
		display: flex;
		flex-direction: column;
		gap: 0.3125rem;
		min-width: 0;
		border-spacing: 0;
	}

	.pf__table thead,
	.pf__table tbody,
	.pf__table tr {
		display: contents;
	}

	/* Nothing to show, and no column to keep it aligned with. */
	.pf__table td.pf__cell--empty { display: none; }

	.pf__head,
	.pf__sub,
	.pf__cell {
		text-align: left;
		padding: 0.85rem 1rem;
	}

	.pf__cell { font-size: 1rem; }

	/* Family heading, then that family's products, six times over. */
	.pf__head--pigments        { order: 1; }
	.pf__table td:nth-child(1) { order: 2; }
	.pf__head--coatings        { order: 3; }
	.pf__sub:nth-child(1)      { order: 4; }
	.pf__table td:nth-child(2) { order: 5; }
	.pf__sub:nth-child(2)      { order: 6; }
	.pf__table td:nth-child(3) { order: 7; }
	.pf__sub:nth-child(3)      { order: 8; }
	.pf__table td:nth-child(4) { order: 9; }
	.pf__head--multilase       { order: 10; }
	.pf__table td:nth-child(5) { order: 11; }
	.pf__head--lumina          { order: 12; }
	.pf__table td:nth-child(6) { order: 13; }

	/* Coatings is a group label above its three types, not a block of its own. */
	.pf__head--coatings {
		margin-top: 0.75rem;
		padding-bottom: 0.6rem;
	}
}

/* ------------------------------------------------------------------ */
/* Section: Full Content                                               */
/* ------------------------------------------------------------------ */

.section--full-content {
	color: var(--color-white);
}

.section--full-content.bg--white {
	color: var(--color-body);
}

.section--full-content__inner {
	/* Fills the 1200px content column: 75rem less its 1.5rem side padding. */
	max-width: 72rem;
}

/* Headings need air above them when they follow copy, but not at the top. */
.section--full-content :is(h2, h3, h4, h5, h6) {
	margin-top: 2.5rem;
}

.section--full-content__inner > :first-child {
	margin-top: 0;
}

.section--full-content :is(p, ul, ol) {
	margin-bottom: 1.5625rem;
}

.section--full-content :is(ul, ol) {
	padding-left: 1.25rem;
}

.section--full-content li + li {
	margin-top: 0.5rem;
}

/* On a tinted background the orange link colour has too little contrast,
   so links take the section's own text colour instead. */
.section--full-content:not(.bg--white) a {
	color: inherit;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Section: Video Hero                                                 */
/* ------------------------------------------------------------------ */

.section--video-hero {
	/* Full-width 16:9 band; object-fit below keeps the video covering
	   the section whatever its native aspect ratio. */
	aspect-ratio: 16 / 9;
	padding: 0;
	overflow: hidden;
}

.section--video-hero--fixed {
	/* Author-set band height instead of a ratio. The video still covers,
	   so it crops rather than letter-boxing. Capped against the viewport
	   so a large value can't swallow the screen on short or mobile ones. */
	aspect-ratio: auto;
	height: min( var( --video-hero-height ), 80vh );
}

.video-hero__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.video-hero__media {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Header — per Figma Nav component: logo | nav | pill CTA + icons     */
/* ------------------------------------------------------------------ */

.site-header {
	background: var(--color-white);
	padding-block: 1.75rem;
}

.site-header__inner {
	/* Full-width header: the design's 100px side padding at 1920 scales
	   with the viewport (100 / 1920 = 5.2083vw), floored at 1.5rem. */
	max-width: none;
	padding-inline: max(1.5rem, 5.2083vw);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

/* Logo, CTA and icons keep their designed size; the nav is the only
   flexible element in the row. */
.site-header__branding,
.site-header__actions {
	flex-shrink: 0;
}

.site-header__logo {
	display: block;
	line-height: 0;
}

.site-header__logo img {
	width: 240px;
	height: auto;
}

.site-header__nav {
	flex: 1 1 auto;
	min-width: 0;
}


.nav-menu {
	display: flex;
	flex-wrap: nowrap;
	/* space-between lets the browser derive the item spacing from the room
	   actually available; gap sets the floor it can never shrink below, and
	   max-width caps the spread so gaps top out around the design's 80px. */
	justify-content: space-between;
	gap: 1rem;
	max-width: 76rem;
	margin-inline: auto;
	padding: 0;
	list-style: none;
	font-size: var(--text-nav-size);
	font-weight: var(--text-nav-weight);
	line-height: var(--text-nav-leading);
	white-space: nowrap;
}

.nav-menu a {
	color: var(--color-body);
	text-decoration: none;
}

.nav-menu a:hover,
.nav-menu a:focus,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	color: var(--color-primary);
}

/* Dropdown for child pages (Industries) */
.nav-menu .menu-item-has-children {
	position: relative;
}

.nav-menu .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 0.875rem);
	/* Offset by the box's own padding so sub-items align flush with
	   the parent item's text. */
	left: -1.75rem;
	z-index: 20;
	min-width: 14rem;
	margin: 0;
	padding: 1.5rem 1.75rem;
	list-style: none;
	background: var(--color-white);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Invisible bridge across the gap so hover isn't lost travelling
   from the parent item into the dropdown. */
.nav-menu .sub-menu::before {
	content: "";
	position: absolute;
	top: -0.875rem;
	left: 0;
	right: 0;
	height: 0.875rem;
}

.nav-menu .menu-item-has-children:hover > .sub-menu,
.nav-menu .menu-item-has-children:focus-within > .sub-menu {
	display: grid;
	gap: 0.875rem;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.site-header__icon {
	display: block;
	line-height: 0;
}

.site-header__icon img {
	width: 22px;
	height: 22px;
}

/* Between these widths the nav's minimum width (items at the 1rem gap
   floor) no longer fits beside the fixed-size logo and actions, so it
   drops to its own full-width row (still a single line). */
@media (min-width: 900px) and (max-width: 1519px) {
	.site-header__inner {
		flex-wrap: wrap;
	}

	.site-header__nav {
		order: 3;
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile: burger on the main row + off-canvas nav                     */
/* ------------------------------------------------------------------ */

.site-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 8px;
	background: none;
	border: 0;
	cursor: pointer;
}

.site-header__burger-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-dark);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(2) {
	transform: translateY(7px) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(3) {
	opacity: 0;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(4) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 899px) {
	/* The nav row disappears; the burger joins the CTA and icons, which
	   stay on the main header row. */
	.site-header__nav {
		display: none;
	}

	.site-header__burger {
		display: flex;
	}

	.site-header__logo img {
		width: 180px;
	}
}

/* Tighten the row on small phones so logo, CTA, icons and burger fit. */
@media (max-width: 599px) {
	.site-header__inner {
		gap: 0.75rem;
	}

	.site-header__logo img {
		width: 120px;
	}

	.site-header__actions {
		gap: 0.5rem;
	}

	.site-header__actions .button--pill {
		padding: 0.875rem 1.25rem;
	}
}

@media (max-width: 479px) {
	.site-header__inner {
		gap: 0.5rem;
		padding-inline: 1rem;
	}

	.site-header__logo img {
		width: 100px;
	}

	.site-header__actions {
		gap: 0.375rem;
	}

	.site-header__actions .button--pill {
		padding: 0.75rem 1rem;
		font-size: 0.75rem;
	}

	.site-header__icon img {
		width: 20px;
		height: 20px;
	}

	.site-header__burger {
		width: 36px;
		padding: 6px;
	}
}

/* Sub-360px devices can't fit the full row; wrap instead of clipping. */
@media (max-width: 359px) {
	.site-header__inner {
		flex-wrap: wrap;
		justify-content: center;
	}
}

.offcanvas-backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.offcanvas-backdrop.is-open {
	opacity: 1;
}

.offcanvas {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	width: min(20rem, 85vw);
	height: 100dvh;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 4.5rem 2rem 2rem;
	overflow-y: auto;
	background: var(--color-white);
	transform: translateX(100%);
	transition: transform 0.25s ease;
}

.offcanvas.is-open {
	transform: translateX(0);
}

.offcanvas__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	width: 44px;
	height: 44px;
	font-size: 2rem;
	line-height: 1;
	color: var(--color-dark);
	background: none;
	border: 0;
	cursor: pointer;
}

.offcanvas-menu {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-nav-size);
	font-weight: var(--text-nav-weight);
}

.offcanvas-menu a {
	color: var(--color-body);
	text-decoration: none;
}

.offcanvas-menu a:hover,
.offcanvas-menu a:focus,
.offcanvas-menu .current-menu-item > a {
	color: var(--color-primary);
}

.offcanvas-menu .sub-menu {
	display: grid;
	gap: 1rem;
	margin: 1rem 0 0;
	padding: 0 0 0 1.25rem;
	list-style: none;
	border-left: 2px solid var(--color-grey-light);
}

.offcanvas__cta {
	align-self: flex-start;
}

body.nav-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.button {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	white-space: nowrap;
	font-family: var(--font-base);
	font-size: var(--text-nav-size);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	color: var(--color-white);
	background: var(--color-primary);
	border: 0;
	cursor: pointer;
}

.button:hover,
.button:focus {
	background: var(--color-navy);
	color: var(--color-white);
}

.button--secondary {
	background: var(--color-navy);
}

.button--secondary:hover,
.button--secondary:focus {
	background: var(--color-primary);
}

/* Header CTA — black pill per Figma Nav (bg #1d1d1b, radius 30px) */
.button--pill {
	background: var(--color-dark);
	border-radius: 999px;
	padding: 1rem 2.5rem;
}

.button--pill:hover,
.button--pill:focus {
	background: var(--color-primary);
}

/* White pill on coloured bands (e.g. "Get in touch" in split sections) */
.button--pill-light {
	background: var(--color-white);
	color: var(--color-dark);
	border-radius: 999px;
	padding: 1rem 1.875rem;
}

.button--pill-light:hover,
.button--pill-light:focus {
	background: var(--color-dark);
	color: var(--color-white);
}

/* ------------------------------------------------------------------ */
/* Footer — magenta band per Figma homepage footer                     */
/* ------------------------------------------------------------------ */

.site-footer {
	background: var(--color-magenta);
	color: var(--color-white);
	font-size: var(--text-body-sm-size);
	font-weight: var(--text-body-sm-weight);
	line-height: var(--text-body-sm-leading);
	padding-block: 3.5rem 3.25rem;
}

.site-footer__inner {
	/* Same full-width edge padding as the header */
	max-width: none;
	padding-inline: max(1.5rem, 5.2083vw);
}

.site-footer a {
	color: var(--color-white);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	text-decoration: underline;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 3.25fr) repeat(3, minmax(0, 1fr));
	gap: 3rem;
}

/* The design leaves ~243px between the newsletter content and Quick
   Links at 1920 (vs ~48px between the other columns): pad the wide
   first column so its content (and the email pill) stays at the
   design's 624px. Scales with the viewport, capped at 195px. */
.site-footer__newsletter {
	padding-right: clamp(0rem, 10.15vw, 12.1875rem);
}

@media (max-width: 1023px) {
	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__newsletter {
		padding-right: 0;
	}
}

@media (max-width: 599px) {
	.site-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Newsletter block — heading is the Headings style (48/52), body is
   Body Copy med (20/25), 30px and 40px gaps per Figma. */

.site-footer__heading {
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
	max-width: 32rem; /* 513px text box in the design */
	margin: 0 0 1.875rem;
}

.site-footer__newsletter > p {
	font-size: var(--text-body-size);
	line-height: var(--text-body-leading);
	margin: 0 0 2.5rem;
	max-width: 40rem;
}

/* Column headings (Sub Heading Xtra, 30/35 Medium) + link lists
   (Body Copy Footer 17/21, 25px between items) */

.site-footer__col-heading {
	font-size: var(--text-subheading-xl-size);
	font-weight: var(--text-subheading-xl-weight);
	line-height: var(--text-subheading-xl-leading);
	margin: 0 0 2.4375rem;
}

.footer-menu {
	display: grid;
	gap: 1.5625rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__address {
	font-style: normal;
	margin: 0 0 1rem;
}

.site-footer__contact-links {
	margin: 0 0 1.25rem;
}

.site-footer__social {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.site-footer__social a {
	display: block;
	line-height: 0;
}

.site-footer__social svg {
	width: auto;
	height: 15px;
}

.site-footer__social svg path {
	fill: var(--color-white);
}

.site-footer__copyright {
	/* 104px above, 17/21 like the link lists per Figma */
	margin: 6.5rem 0 0;
}

/* Newsletter form (Gravity Forms) — white outline pill with the
   submit sitting inside on the right, consent line below. */

.site-footer__form .gform_wrapper form {
	position: relative;
}

.site-footer__form .gform_wrapper input[type="email"] {
	width: 100%;
	height: 4.5rem;
	padding: 0 9rem 0 1.75rem;
	background: transparent;
	border: 1px solid var(--color-white);
	border-radius: 999px;
	color: var(--color-white);
	font-family: var(--font-base);
	font-size: var(--text-body-sm-size);
}

.site-footer__form .gform_wrapper input[type="email"]::placeholder {
	color: var(--color-white);
	opacity: 1;
}

.site-footer__form .gform_wrapper .gform_footer {
	position: absolute;
	top: 2.25rem;
	right: 1.75rem;
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
}

.site-footer__form .gform_wrapper .gform_footer input[type="submit"],
.site-footer__form .gform_wrapper .gform_footer button {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--color-white) !important;
	font-family: var(--font-base) !important;
	font-size: var(--text-body-sm-size) !important;
	font-weight: 700 !important;
	cursor: pointer;
}

.site-footer__form .gform_wrapper .gform_fields {
	row-gap: 0;
}

.site-footer__form .gform_wrapper .gfield--type-consent {
	margin-top: 1.75rem; /* 28px below the input per Figma */
	font-size: 0.875rem;
}

.site-footer__form .gform_wrapper .gfield--type-consent .gfield_consent_label {
	color: var(--color-white);
}

/* Circle checkbox per the design */
.site-footer__form .gform_wrapper input[type="checkbox"] {
	appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid var(--color-white);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}

.site-footer__form .gform_wrapper input[type="checkbox"]:checked {
	background: var(--color-white);
	box-shadow: inset 0 0 0 4px var(--color-magenta);
}

/* Hide GF's decorative extras in this context; the email field is
   labelled by its placeholder and the consent field by its tick-box
   text, per the design. */
.site-footer__form .gfield_required,
.site-footer__form .gfield--type-email .gfield_label,
.site-footer__form .gfield--type-consent > .gfield_label,
.site-footer__form legend.gfield_label,
.site-footer__form .gform_validation_container {
	display: none;
}

/* ------------------------------------------------------------------ */
/* Features carousel section                                           */
/* ------------------------------------------------------------------ */
/* Coloured band; centred head; one feature centred and fully visible,
   neighbours dimmed either side (Figma: Pharma 341:2542, items at a
   ~520px pitch, dimmed at 25% opacity, 56px tick badges and arrows). */

.section--features {
	padding: clamp(3.5rem, 5.3125vw, 6.375rem) 0 clamp(3.5rem, 5.9375vw, 7.125rem); /* 102 / 114 */
	color: var(--color-white);
	text-align: center;
}

.section--features__head {
	max-width: 50rem;
	margin: 0 auto;
	padding-inline: var(--edge-pad);
}

.section--features__heading {
	margin: 0;
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
}

.section--features__intro {
	max-width: 39rem; /* 619px in the design */
	margin: 1.875rem auto 0; /* 30px below the heading */
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-leading);
}

.features__track {
	--item-w: min(32.5rem, 78vw); /* 520px pitch */

	display: flex;
	list-style: none;
	margin: clamp(2.5rem, 3.33vw, 4rem) 0 0; /* 64px below the intro */
	padding: 0 calc(50% - var(--item-w) / 2); /* first/last items can centre */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

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

.features__track.is-dragging {
	scroll-snap-type: none;
}

.features__item {
	flex: 0 0 var(--item-w);
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0.25;
	transition: opacity 0.35s ease;
}

.features__item.is-active {
	opacity: 1;
}

/* White badge; the tick is knocked out of the SVG circle, so a dark
   disc behind it shows through as the tick itself. */
.features__tick {
	position: relative;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 1.5rem; /* 24px above the title */
	line-height: 0;
}

.features__tick::before {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background: var(--color-dark);
}

.features__tick svg {
	position: relative;
	width: 100%;
	height: 100%;
}

.features__title {
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
}

.features__nav {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	margin-top: clamp(3rem, 4.375vw, 5.25rem); /* 84px below the titles */
}

.features__arrow {
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-dark);
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.features__arrow svg {
	width: 1.375rem;
	height: auto;
}

.features__arrow svg path {
	fill: currentColor;
}

.features__arrow:hover:not([disabled]),
.features__arrow:focus-visible:not([disabled]) {
	transform: scale(1.08);
}

.features__arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

@media (max-width: 767px) {
	.features__track {
		--item-w: min(20rem, 72vw);
	}

	.features__tick {
		width: 2.75rem;
		height: 2.75rem;
		margin-bottom: 1rem;
	}
}

/* ------------------------------------------------------------------ */
/* Jump To section + section anchors                                   */
/* ------------------------------------------------------------------ */
/* White strip under the page header: green "Jump to" label + green
   pill links (Figma: Applications & Materials 341:1007-1013). Targets
   are zero-height .section-anchor markers printed by the dispatcher. */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.section-anchor {
	display: block;
	height: 0;
	scroll-margin-top: 1.5rem; /* breathing room above the target section */
}

.section--jump-to {
	background: var(--color-white);
	padding: 1.625rem var(--edge-pad); /* 26px above/below the pills */
}

.jump-to__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem 1.25rem;
}

.jump-to__list {
	justify-content: center;
}

.jump-to__label {
	color: var(--color-green);
	font-size: 0.9375rem; /* 15px */
	font-weight: 700;
	line-height: 1;
}

.jump-to__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem; /* 40px between pills */
	list-style: none;
	margin: 0;
	padding: 0;
}

.jump-to__link {
	display: inline-flex;
	align-items: center;
	padding: 1rem 1.875rem; /* 16px / 30px — 46px pill */
	border-radius: 999px;
	background: var(--color-green);
	color: var(--color-white);
	font-size: var(--text-nav-size);
	font-weight: var(--text-nav-weight);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, transform 0.2s ease;
}

.jump-to__link:hover,
.jump-to__link:focus-visible {
	background: var(--color-navy);
	transform: translateY(-2px);
}

@media (max-width: 767px) {
	.jump-to__list {
		gap: 0.75rem 1rem;
	}

	.jump-to__link {
		padding: 0.875rem 1.5rem;
	}
}

/* ------------------------------------------------------------------ */
/* Hero (Tabbed) section                                               */
/* ------------------------------------------------------------------ */
/* Centred heading over a pill tab switcher; each tab holds subheading,
   copy and a row of circle images with captions, optionally joined by
   magenta arrow discs (Figma: Coating Technologies 341:1014,
   Masterbatch Additives 341:1023). */

.section--hero-tabs {
	padding: clamp(3rem, 5.2vw, 6.25rem) var(--edge-pad);
	text-align: center;
}

.hero-tabs__inner {
	max-width: 97rem; /* the 5-circle row runs 1550px in the design */
	margin: 0 auto;
}

.hero-tabs__heading {
	margin: 0;
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
}

.hero-tabs__subheading {
	margin: 0.9375rem 0 0; /* 15px */
	font-size: var(--text-subheading-size);
	font-weight: var(--text-subheading-weight);
	line-height: var(--text-subheading-leading);
}

.hero-tabs__tablist {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 1.875rem; /* 30px */
	padding: 0.5625rem; /* 70px pill: 48px tabs + 9px + 2px border */
	border: 2px solid var(--color-dark);
	border-radius: 2.5rem;
}

.hero-tabs__tab {
	padding: 0.71875rem 1.5rem; /* 48px tall */
	border: 0;
	border-radius: 2.5rem;
	background: transparent;
	color: var(--color-dark);
	font-family: inherit;
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-leading);
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.hero-tabs__tab.is-active {
	background: var(--color-dark);
	color: var(--color-white);
}

.hero-tabs__panel:not([hidden]) {
	animation: hero-tabs-fade 0.35s ease both;
}

@keyframes hero-tabs-fade {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

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

@media (prefers-reduced-motion: reduce) {
	.hero-tabs__panel:not([hidden]) {
		animation: none;
	}
}

.hero-tabs__tab-subheading {
	margin: 1.875rem auto 0;
	font-size: var(--text-subheading-size);
	font-weight: var(--text-subheading-weight);
	line-height: var(--text-subheading-leading);
}

.hero-tabs__text {
	max-width: 58.125rem; /* 930px */
	margin: 1.25rem auto 0;
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-leading);
}

.hero-tabs__text > p {
	margin: 0;
}

.hero-tabs__text > p + p {
	margin-top: 1em;
}

.hero-tabs__images {
	/* Shared size so the arrow discs stay centred on the circles at
	   any width (12.6vw ⇒ 242px at 1920). */
	--circle: clamp(9.5rem, 12.6vw, 15.125rem);
	--gap: clamp(1.5rem, 4.4vw, 5.3125rem); /* 85px between circles */

	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: var(--gap);
	list-style: none;
	max-width: 97rem;
	margin: clamp(2rem, 2.5vw, 3rem) auto 0;
	padding: 0;
}

.hero-tabs__item {
	flex: 0 0 var(--circle);
	min-width: 0;
}

.hero-tabs__circle {
	display: block;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}

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

.hero-tabs__circle--placeholder {
	background: var(--color-grey-light);
}

.hero-tabs__caption {
	display: block;
	margin-top: 1.875rem; /* 30px */
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-leading);
}

.hero-tabs__item-title {
	display: block;
	color: var(--color-dark);
}

.hero-tabs__item-copy {
	display: block;
	color: var(--color-grey);
}

/* Magenta arrow discs between process steps, vertically centred on
   the circles. The arrow sits INSIDE the design's 85px gap: two flex
   gaps surround it (hence the halved --gap) and negative inline
   margins cancel its own width. */
.hero-tabs__images--arrows {
	gap: calc(var(--gap) / 2);
}

.hero-tabs__arrow {
	flex: 0 0 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-top: calc(var(--circle) / 2 - 1.75rem); /* circle centre */
	margin-inline: -1.75rem;
	border-radius: 50%;
	background: var(--color-magenta);
	color: var(--color-white);
}

.hero-tabs__arrow svg {
	width: 1.375rem;
	height: auto;
}

.hero-tabs__arrow svg path {
	fill: currentColor;
}

@media (max-width: 900px) {
	.hero-tabs__images {
		flex-direction: column;
		align-items: center;
	}

	.hero-tabs__item {
		flex-basis: auto;
		max-width: 17rem;
	}

	.hero-tabs__arrow {
		margin: 0;
	}

	.hero-tabs__arrow svg {
		transform: rotate(90deg);
	}
}

/* Split content: optional subheading + bullet list inside the text
   block (Sub Headings 25/32 bold, per the Pigment Technologies
   section). */
.section--split__text h3 {
	margin: 0 0 0.9375rem;
	font-size: var(--text-subheading-size);
	font-weight: var(--text-subheading-weight);
	line-height: var(--text-subheading-leading);
}

.section--split__text p + h3 {
	margin-top: 1.5625rem;
}

.section--split__text ul {
	margin: 0.5rem 0 0;
	padding-left: 1.5rem;
}

.section--split__text li + li {
	margin-top: 0.25rem;
}

/* Content following a list needs the same separation as p + p. */
.section--split__text ul + h3,
.section--split__text ul + p {
	margin-top: 1.5625rem;
}

/* ------------------------------------------------------------------ */
/* Split Content (Tabbed) — light tab variant                          */
/* ------------------------------------------------------------------ */
/* Product Families: the hero-tabs pill switcher on a coloured band —
   white outline, white labels, active tab is a white pill with dark
   text. */

.hero-tabs__tablist--light {
	border-color: var(--color-white);
}

/* Inside split content the grid gap provides the spacing. */
.section--split__content > .hero-tabs__tablist {
	margin-top: 0;
}

.hero-tabs__tablist--light .hero-tabs__tab {
	color: var(--color-white);
}

.hero-tabs__tablist--light .hero-tabs__tab.is-active {
	background: var(--color-white);
	color: var(--color-dark);
}

/* ------------------------------------------------------------------ */
/* Hero (Carousel) section                                             */
/* ------------------------------------------------------------------ */
/* Centred heading/copy over a draggable circle-image carousel with
   magenta step arrows (Figma: Materials & Substrates 341:1050). */

.section--hero-carousel {
	padding: clamp(3rem, 4.1vw, 5rem) 0;
	text-align: center;
}

.hero-carousel__head {
	max-width: 58.125rem; /* 930px */
	margin: 0 auto;
	padding-inline: var(--edge-pad);
}

.hero-carousel__heading {
	margin: 0;
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
}

.hero-carousel__text {
	margin-top: 0.9375rem;
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-leading);
}

.hero-carousel__text p {
	margin: 0;
}

.hero-carousel__text p + p,
.hero-carousel__text p + h3 {
	margin-top: 0.9375rem;
}

.hero-carousel__text h3 {
	margin: 0 0 0.9375rem;
	font-size: var(--text-subheading-size);
	font-weight: var(--text-subheading-weight);
	line-height: var(--text-subheading-leading);
}

.hero-carousel__track {
	--circle: clamp(9.5rem, 12.6vw, 15.125rem);
	--gap: clamp(1.5rem, 4.4vw, 5.3125rem);

	display: flex;
	gap: var(--gap);
	list-style: none;
	margin: clamp(2rem, 2.4vw, 2.875rem) 0 0;
	padding: 0 var(--edge-pad);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--edge-pad);
	scrollbar-width: none;
}

.hero-carousel__track::-webkit-scrollbar {
	display: none;
}

.hero-carousel__track.is-dragging {
	scroll-snap-type: none;
}

/* Centred when everything fits; scrolls when it doesn't. */
.hero-carousel__item:first-child {
	margin-left: auto;
}

.hero-carousel__item:last-child {
	margin-right: auto;
}

.hero-carousel__item {
	flex: 0 0 var(--circle);
	scroll-snap-align: start;
	min-width: 0;
}

.hero-carousel__nav {
	display: flex;
	justify-content: center;
	gap: 1.625rem; /* 26px */
	margin-top: clamp(2.5rem, 3.3vw, 4rem);
}

.hero-carousel__arrow {
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--color-magenta);
	color: var(--color-white);
	cursor: pointer;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero-carousel__arrow svg {
	width: 1.375rem;
	height: auto;
}

.hero-carousel__arrow svg path {
	fill: currentColor;
}

.hero-carousel__arrow:hover:not([disabled]),
.hero-carousel__arrow:focus-visible:not([disabled]) {
	transform: scale(1.08);
}

.hero-carousel__arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* ------------------------------------------------------------------ */
/* Testimonial section                                                 */
/* ------------------------------------------------------------------ */
/* Coloured band: quote-marks disc, large centred quote, supporting
   copy, attribution (Figma: 341:1175-1180). */

.section--testimonial {
	padding: clamp(5rem, 7.9vw, 9.5rem) var(--edge-pad) clamp(5rem, 8.5vw, 10.25rem);
	color: var(--color-white);
	text-align: center;
}

.testimonial__inner {
	max-width: 59.1875rem; /* 947px quote measure */
	margin: 0 auto;
}

.testimonial__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 6rem; /* 96px */
	height: 6rem;
	border-radius: 50%;
	background: var(--color-white);
}

.testimonial__icon svg {
	width: 3.3125rem; /* 53px */
	height: auto;
}

.testimonial__quote {
	margin: 2.9375rem 0 0; /* 47px below the icon */
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
}

.testimonial__copy {
	max-width: 43.1875rem; /* 691px */
	margin: 1.5rem auto 0; /* 24px */
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-leading);
}

.testimonial__attribution {
	margin-top: 2.9375rem; /* 47px */
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-leading);
}

/* Tabbed hero: bullet lists inside a centred panel keep their text
   left-aligned as a block (Coating Technologies / Masterbatch tabs). */
.hero-tabs__text ul {
	display: inline-block;
	margin: 0.9375rem 0 0;
	padding-left: 1.5rem;
	text-align: left;
}

.hero-tabs__text ul + p,
.hero-tabs__text ul + h3 {
	margin-top: 0.9375rem;
}

.hero-tabs__text li + li {
	margin-top: 0.25rem;
}

/* Split content: compatibility table (Product Families tab) */
.section--split__text table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-body-size);
	line-height: var(--text-body-leading);
}

.section--split__text th,
.section--split__text td {
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	text-align: center;
}

.section--split__text th:first-child,
.section--split__text td:first-child {
	text-align: left;
}

.section--split__text th {
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Search overlay                                                      */
/* ------------------------------------------------------------------ */
/* A navy circle grows out of the header search icon (clip-path with
   its origin set from the icon's position by JS) into a full-screen
   search. The brand dots float above the input and pulse in sequence
   while results load. Content stages in once the wipe lands. */

.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--color-dark-navy);
	color: var(--color-white);
	clip-path: circle(0px at var(--sx, 90%) var(--sy, 40px));
	transition: clip-path 0.65s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s 0.65s;
	visibility: hidden;
	overflow-y: auto;
}

.search-overlay.is-open {
	clip-path: circle(150% at var(--sx, 90%) var(--sy, 40px));
	transition: clip-path 0.65s cubic-bezier(0.65, 0, 0.35, 1);
	visibility: visible;
}

/* Thin ✕ matching the site's line icons, sitting exactly where the
   search icon is (the wipe's --sx/--sy origin), so the circle grows
   from and collapses back onto it. */
.search-overlay__close {
	position: fixed;
	top: var(--sy, 3.5rem);
	left: var(--sx, calc(100% - var(--edge-pad)));
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-white);
	line-height: 0;
	cursor: pointer;
	transition: transform 0.25s ease;
}

.search-overlay__close:hover,
.search-overlay__close:focus-visible {
	transform: translate(-50%, -50%) rotate(90deg);
}

.search-overlay__inner {
	max-width: 56rem;
	min-height: 100%;
	margin: 0 auto;
	padding: clamp(4rem, 12vh, 8rem) var(--edge-pad) 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Brand dots: sit in the DataLase logo formation, morph into a
   question mark and back on a loop (translate animates between the
   two per-dot coordinate sets). While loading they return to the
   logo formation and pulse in sequence. */
.search-overlay__dots {
	position: relative;
	width: 4.75rem;
	height: 7.375rem;
	margin-bottom: clamp(1.25rem, 3vh, 2.25rem);
}

.search-overlay__dot {
	position: absolute;
	top: 0;
	left: 0;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 50%;
	translate: var(--lx) var(--ly);
	animation: search-dot-morph 7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.search-overlay__dot--navy {
	background: var(--color-navy);
}

/* Logo formation (vertically centred) → question mark, per dot. */
.search-overlay__dot:nth-child(1) { --lx: 0rem;     --ly: 1.375rem; --qx: 0.4rem; --qy: 1rem; }
.search-overlay__dot:nth-child(2) { --lx: 1.75rem;  --ly: 1.375rem; --qx: 1.9rem; --qy: 0rem;   animation-delay: 0.07s; }
.search-overlay__dot:nth-child(3) { --lx: 3.5rem;   --ly: 1.375rem; --qx: 3.4rem; --qy: 1rem;   animation-delay: 0.14s; }
.search-overlay__dot:nth-child(4) { --lx: 1.75rem;  --ly: 3.125rem; --qx: 3.3rem; --qy: 2.6rem; animation-delay: 0.21s; }
.search-overlay__dot:nth-child(5) { --lx: 3.5rem;   --ly: 3.125rem; --qx: 1.9rem; --qy: 3.9rem; animation-delay: 0.28s; }
.search-overlay__dot:nth-child(6) { --lx: 3.5rem;   --ly: 4.875rem; --qx: 1.9rem; --qy: 6.25rem; animation-delay: 0.35s; }

@keyframes search-dot-morph {
	0%, 30% { translate: var(--lx) var(--ly); }
	45%, 75% { translate: var(--qx) var(--qy); }
	90%, 100% { translate: var(--lx) var(--ly); }
}

/* Loading: the morph animation is replaced, so `translate` falls back
   to the logo formation while the dots pulse. */
.search-overlay.is-loading .search-overlay__dot {
	animation: search-dot-pulse 0.9s ease-in-out infinite;
}

.search-overlay.is-loading .search-overlay__dot:nth-child(2) { animation-delay: 0.12s; }
.search-overlay.is-loading .search-overlay__dot:nth-child(3) { animation-delay: 0.24s; }
.search-overlay.is-loading .search-overlay__dot:nth-child(4) { animation-delay: 0.36s; }
.search-overlay.is-loading .search-overlay__dot:nth-child(5) { animation-delay: 0.48s; }
.search-overlay.is-loading .search-overlay__dot:nth-child(6) { animation-delay: 0.6s; }

@keyframes search-dot-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.7); opacity: 0.55; }
}

/* Staged entrances once the circle lands. */
.search-overlay__dots,
.search-overlay__form,
.search-overlay__popular {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.search-overlay.is-open .search-overlay__dots,
.search-overlay.is-open .search-overlay__form,
.search-overlay.is-open .search-overlay__popular {
	opacity: 1;
	transform: none;
}

.search-overlay.is-open .search-overlay__dots { transition-delay: 0.3s; }
.search-overlay.is-open .search-overlay__form { transition-delay: 0.42s; }
.search-overlay.is-open .search-overlay__popular { transition-delay: 0.56s; }

.search-overlay__form {
	position: relative;
	width: 100%;
}

.search-overlay__input {
	width: 100%;
	padding: 0 0 1.25rem;
	border: 0;
	background: transparent;
	color: var(--color-white);
	caret-color: var(--color-orange);
	font-family: inherit;
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
	text-align: center;
	outline: none;
	appearance: none;
}

.search-overlay__input::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.search-overlay__input::-webkit-search-cancel-button {
	display: none;
}

/* Underline draws in after the input arrives. */
.search-overlay__form::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--color-orange), var(--color-magenta));
	transform: scaleX(0);
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s;
}

.search-overlay.is-open .search-overlay__form::after {
	transform: scaleX(1);
}

.search-overlay__popular {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem 0.875rem;
	margin-top: 2.25rem;
}

.search-overlay__popular-label {
	width: 100%;
	font-size: var(--text-nav-size);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-grey);
}

.search-overlay__pill {
	padding: 0.75rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: transparent;
	color: var(--color-white);
	font-family: inherit;
	font-size: var(--text-nav-size);
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.search-overlay__pill:hover,
.search-overlay__pill:focus-visible {
	background: var(--color-orange);
	border-color: var(--color-orange);
	transform: translateY(-2px);
}

/* Live results cascade in. */
.search-overlay__results {
	width: 100%;
	margin-top: 2.5rem;
	text-align: left;
}

.search-overlay__result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 0.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: var(--color-white);
	text-decoration: none;
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-leading);
	opacity: 0;
	transform: translateY(14px);
	animation: search-result-in 0.45s ease forwards;
	transition: padding-left 0.2s ease;
}

.search-overlay__result:hover,
.search-overlay__result:focus-visible {
	padding-left: 0.75rem;
	color: var(--color-orange);
}

@keyframes search-result-in {
	to { opacity: 1; transform: none; }
}

.search-overlay__result-type {
	flex-shrink: 0;
	padding: 0.375rem 0.875rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--color-grey-light);
}

.search-overlay__status {
	padding: 1.5rem 0;
	color: var(--color-grey);
	font-size: var(--text-body-size);
	opacity: 0;
	animation: search-result-in 0.45s ease 0.1s forwards;
	text-align: center;
}

.search-overlay__all {
	display: inline-block;
	margin-top: 1.25rem;
	color: var(--color-orange);
	font-size: var(--text-body-size);
	font-weight: 700;
	text-decoration: none;
	opacity: 0;
	animation: search-result-in 0.45s ease 0.25s forwards;
}

.search-overlay__all:hover {
	text-decoration: underline;
}

/* Body lock while open */
body.search-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.search-overlay {
		transition: opacity 0.25s ease, visibility 0s 0.25s;
		clip-path: none;
		opacity: 0;
	}

	.search-overlay.is-open {
		transition: opacity 0.25s ease;
		clip-path: none;
		opacity: 1;
	}

	.search-overlay__dot,
	.search-overlay.is-loading .search-overlay__dot {
		animation: none;
	}

	.search-overlay__dots,
	.search-overlay__form,
	.search-overlay__popular,
	.search-overlay__result,
	.search-overlay__status,
	.search-overlay__all {
		transition-delay: 0s;
		animation-delay: 0s;
	}
}

/* Entrance animations translate the items inside snap containers;
   snapping is suspended until the transforms are cleared (see
   suspendSnap/restoreSnap in animations.js) so the track never
   re-snaps to the offset positions and jumps. */
.carousel__track.is-animating,
.hero-carousel__track.is-animating {
	scroll-snap-type: none;
}

/* ------------------------------------------------------------------ */
/* Hero (Tabbed) — tinted variant (coloured band, white content)       */
/* ------------------------------------------------------------------ */

.section--hero-tabs--tinted {
	color: var(--color-white);
}

.section--hero-tabs--tinted .hero-tabs__item-title {
	color: var(--color-white);
}

.section--hero-tabs--tinted .hero-tabs__item-copy {
	color: rgba(255, 255, 255, 0.75);
}

/* Split content — white background variant (dark content) */
.section--split.bg--white {
	color: var(--color-body);
}

.section--split.bg--white a:not(.button) {
	color: var(--color-body);
}

/* ------------------------------------------------------------------ */
/* FAQs section                                                        */
/* ------------------------------------------------------------------ */
/* Coloured band, 900px column, accordion of FAQ posts (Figma: About
   Us 341:1288). */

.section--faqs {
	padding: clamp(4rem, 8.4vw, 10.125rem) var(--edge-pad) clamp(4rem, 8vw, 9.625rem);
	color: var(--color-white);
}

.faqs__inner {
	max-width: 56.25rem; /* 900px */
	margin: 0 auto;
}

.faqs__heading {
	margin: 0 0 0.9375rem;
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
}

/* Optional bold title between a tab's copy and its image row
   ("We develop" in Innovation & R&D). */
.hero-tabs__images-title {
	margin: 1.875rem 0 0; /* 30px below the copy */
	font-size: var(--text-subheading-size);
	font-weight: var(--text-subheading-weight);
	line-height: var(--text-subheading-leading);
}

.hero-tabs__images-title + .hero-tabs__images {
	margin-top: 1.25rem; /* tighter once a title leads the row */
}

/* Lenis smooth scrolling: defer to Lenis for programmatic scrolls
   while it's active (it toggles these classes on <html>). */
.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Search results                                                      */
/* ------------------------------------------------------------------ */

/* Navy band in place of the photographic page header — a search page has
   no image of its own, and the header's overlay colour is already navy. */
.search-results__banner {
	padding-block: 4rem;
	background: var(--color-navy);
	color: var(--color-white);
}

/* Matches .page-header__inner — full width with the edge pad — so the title
   lines up with every other page header rather than sitting further in. */
.search-results__banner-inner {
	width: 100%;
	padding-inline: var(--edge-pad);
}

.search-results__title {
	margin: 0;
	color: var(--color-white);
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
}

.search-results__meta {
	margin: 0.75rem 0 0;
	color: rgba(255, 255, 255, 0.75);
}

.search-results__form {
	display: flex;
	gap: 0.75rem;
	max-width: 34rem;
	margin-top: 2rem;
}

.search-results__input {
	flex: 1;
	min-width: 0;
	padding: 0.875rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: transparent;
	color: var(--color-white);
	font-family: inherit;
	font-size: var(--text-body-size);
}

.search-results__input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.search-results__submit {
	padding: 0.875rem 2rem;
	border: 0;
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-navy);
	font-family: inherit;
	font-size: var(--text-nav-size);
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.search-results__submit:hover {
	background: var(--color-orange);
	color: var(--color-white);
}

/* Same measure as Full Content and the post archive: everywhere the site
   returns a single column of content sits on the one width. */
.search-results__body {
	max-width: 72rem;
}

.search-results__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.search-results__item {
	padding-block: 1.875rem;
	border-bottom: 1px solid rgba(29, 29, 27, 0.15);
}

.search-results__item:first-child {
	padding-top: 0;
}

.search-results__item-type {
	display: inline-block;
	margin-bottom: 0.5rem;
	color: var(--color-orange);
	font-size: var(--text-nav-size);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.search-results__item-title {
	margin: 0;
	font-size: var(--text-subheading-size);
	font-weight: var(--text-subheading-weight);
	line-height: var(--text-subheading-leading);
}

.search-results__item-title a {
	color: inherit;
	text-decoration: none;
}

.search-results__item-title a:hover {
	color: var(--color-orange);
	text-decoration: underline;
}

.search-results__item-excerpt {
	margin: 0.625rem 0 0;
}

/* Relevanssi wraps the matched words; colour them so the reason a result
   was returned is obvious at a glance. */
.search-results__item-excerpt strong {
	color: var(--color-orange);
	font-weight: 700;
}

.search-results__pagination,
.archive__pagination {
	margin-top: 2.5rem;
}

.search-results__pagination .nav-links,
.archive__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.search-results__pagination .page-numbers,
.archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid rgba(29, 29, 27, 0.2);
	border-radius: 999px;
	color: var(--color-body);
	text-decoration: none;
}

.search-results__pagination .page-numbers.current,
.archive__pagination .page-numbers.current {
	border-color: var(--color-navy);
	background: var(--color-navy);
	color: var(--color-white);
}

.search-results__pagination .page-numbers:hover:not(.current),
.archive__pagination .page-numbers:hover:not(.current) {
	border-color: var(--color-orange);
	color: var(--color-orange);
}

.search-results__empty-heading {
	margin-top: 0;
}

.search-results__suggestions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.search-results__pill {
	padding: 0.75rem 1.5rem;
	border: 1px solid rgba(29, 29, 27, 0.2);
	border-radius: 999px;
	color: var(--color-body);
	font-size: var(--text-nav-size);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.search-results__pill:hover {
	border-color: var(--color-navy);
	background: var(--color-navy);
	color: var(--color-white);
}

@media (max-width: 40rem) {
	.search-results__form {
		flex-direction: column;
	}
}

/* ------------------------------------------------------------------ */
/* Post archives — the News & insights page and single categories.     */
/* The search result row with a featured image added, so the two       */
/* listings read the same way.                                         */
/* ------------------------------------------------------------------ */

/* Same width as Full Content, so a listing and an article sit on the same
   measure. 60rem plus half again would be 90rem, which the 1200px content
   column can't give — 72rem is that column, and the widest this can go
   without moving every other section on the site with it. */
.archive__body {
	max-width: 72rem;
}

.archive__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2.5rem;
}

.archive__filter {
	padding: 0.625rem 1.375rem;
	border: 1px solid rgba(29, 29, 27, 0.2);
	border-radius: 999px;
	color: var(--color-body);
	font-size: var(--text-nav-size);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.archive__filter:hover {
	border-color: var(--color-navy);
	color: var(--color-navy);
}

.archive__filter.is-current {
	border-color: var(--color-navy);
	background: var(--color-navy);
	color: var(--color-white);
}

.archive__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.archive-item {
	display: grid;
	grid-template-columns: 18rem 1fr;
	gap: 2rem;
	align-items: start;
	padding-block: 2rem;
	border-bottom: 1px solid rgba(29, 29, 27, 0.15);
}

.archive-item:first-child {
	padding-top: 0;
}

/* A post with no featured image gives its column back rather than leaving
   a gap where the image would have been. */
.archive-item--no-media {
	grid-template-columns: 1fr;
}

/* The hairline matters: a fair few of the press images are product shots on
   white, which would otherwise float with no edge against the page. */
.archive-item__media {
	display: block;
	overflow: hidden;
	border: 1px solid rgba(29, 29, 27, 0.08);
	border-radius: 0.5rem;
	background: var(--color-grey-bg);
}

.archive-item__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.archive-item:hover .archive-item__image {
	transform: scale(1.04);
}

.archive-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin: 0 0 0.625rem;
}

/* Category pill. Navy is the fallback so a category added later still gets
   a sensible tag; the two in use carry a brand colour each. */
.archive-item__tag {
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	background: var(--color-navy);
	color: var(--color-white);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.archive-item__tag--news         { background: var(--color-blue); }
.archive-item__tag--insights     { background: var(--color-magenta); }
.archive-item__tag--videos       { background: var(--color-orange); }
.archive-item__tag--white-papers { background: var(--color-green); }

.archive-item__date {
	color: var(--color-grey);
	font-size: var(--text-nav-size);
}

.archive-item__title {
	margin: 0;
	font-size: var(--text-subheading-size);
	font-weight: var(--text-subheading-weight);
	line-height: var(--text-subheading-leading);
}

.archive-item__title a {
	color: inherit;
	text-decoration: none;
}

.archive-item__title a:hover {
	color: var(--color-orange);
	text-decoration: underline;
}

.archive-item__excerpt {
	margin: 0.625rem 0 0;
}

.archive__empty {
	margin: 0;
}

/* Filtering swaps the rows in place. Dimming them says "working" without a
   spinner and without collapsing the page height under the reader. */
.archive__results {
	transition: opacity 0.2s ease;
}

.archive.is-loading .archive__results {
	opacity: 0.35;
	pointer-events: none;
}

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

@media (max-width: 48rem) {
	.archive-item {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* ------------------------------------------------------------------ */
/* Language switcher — the header globe and its panel.                 */
/* Translation is GTranslate's; everything visible here is ours.       */
/* ------------------------------------------------------------------ */

.lang-switcher {
	position: relative;
}

.lang-switcher__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-body);
	cursor: pointer;
}

.lang-switcher__toggle img {
	display: block;
	transition: transform 0.35s ease;
}

/* A quarter-turn on approach — enough to feel alive, not enough to spin. */
.lang-switcher__toggle:hover img,
.lang-switcher__toggle[aria-expanded="true"] img {
	transform: rotate(90deg);
}

/* Says which language you're reading in; absent while that's English.
   Taken out of flow and hung beneath the globe, in the header's own padding:
   appearing and disappearing must not move the icons it sits beside, and the
   globe itself must not move either. */
.lang-switcher__chip {
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 50%;
	transform: translateX(-50%);
	/* Uneven by design: with line-height 1 the cap-height sits low in the box,
	   so a touch more above the letters is what makes it look centred. */
	padding: 0.175rem 0.25rem 0.165rem;
	border-radius: 0.1875rem;
	background: var(--color-orange);
	color: var(--color-white);
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
}

/* Google gives no completion callback, so the globe keeps turning until
   the page swaps under it. */
.lang-switcher.is-translating .lang-switcher__toggle img {
	animation: lang-switcher-spin 0.9s linear infinite;
}

@keyframes lang-switcher-spin {
	to {
		transform: rotate(360deg);
	}
}

.lang-switcher__panel {
	position: absolute;
	top: calc(100% + 1.125rem);
	right: 0;
	z-index: 60;
	width: 15.5rem;
	padding: 0.75rem;
	border-radius: 0.75rem;
	background: var(--color-white);
	box-shadow:
		0 1.5rem 3rem rgba(0, 47, 108, 0.16),
		0 0 0 1px rgba(29, 29, 27, 0.06);
	opacity: 0;
	transform: translateY(-0.5rem) scale(0.98);
	transform-origin: top right;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.lang-switcher__panel.is-open {
	opacity: 1;
	transform: none;
}

/* Notch tying the panel back to the globe it came from. */
.lang-switcher__panel::before {
	content: "";
	position: absolute;
	top: -0.3125rem;
	right: 0.5rem;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 0.125rem 0 0 0;
	background: var(--color-white);
	transform: rotate(45deg);
}

.lang-switcher__label {
	margin: 0.25rem 0 0.5rem;
	padding-inline: 0.625rem;
	color: var(--color-grey);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lang-switcher__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each row arrives a beat after the one above it. */
.lang-switcher__item {
	opacity: 0;
	transform: translateY(-0.25rem);
	transition: opacity 0.2s ease, transform 0.2s ease;
	transition-delay: calc(var(--i) * 25ms + 40ms);
}

.lang-switcher__panel.is-open .lang-switcher__item {
	opacity: 1;
	transform: none;
}

.lang-switcher__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.5rem 0.625rem;
	border: 0;
	border-radius: 0.5rem;
	background: none;
	color: var(--color-body);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.lang-switcher__option:hover {
	background: var(--color-grey-bg);
}

.lang-switcher__option:focus-visible {
	outline: 2px solid var(--color-navy);
	outline-offset: -2px;
}

.lang-switcher__option.is-current {
	color: var(--color-navy);
}

.lang-switcher__names {
	display: flex;
	flex-direction: column;
	gap: 0.0625rem;
	min-width: 0;
}

.lang-switcher__native {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.25;
}

.lang-switcher__english {
	color: var(--color-grey);
	font-size: 0.75rem;
	line-height: 1.25;
}

.lang-switcher__tick {
	flex-shrink: 0;
	color: var(--color-orange);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.lang-switcher__option.is-current .lang-switcher__tick {
	opacity: 1;
	transform: none;
}

.lang-switcher__note {
	margin: 0.625rem 0 0.25rem;
	padding-top: 0.625rem;
	padding-inline: 0.625rem;
	border-top: 1px solid rgba(29, 29, 27, 0.08);
	color: var(--color-grey);
	font-size: 0.6875rem;
}

/* Too narrow to hang a 15.5rem panel off the right edge — span the
   viewport instead, under the header. */
@media (max-width: 30rem) {
	.lang-switcher__panel {
		position: fixed;
		top: calc(var(--header-height, 5rem) + 0.5rem);
		right: 1rem;
		left: 1rem;
		width: auto;
		transform-origin: top center;
	}

	.lang-switcher__panel::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lang-switcher__toggle img,
	.lang-switcher__panel,
	.lang-switcher__item,
	.lang-switcher__tick {
		transition: none;
	}

	.lang-switcher__toggle:hover img,
	.lang-switcher__toggle[aria-expanded="true"] img {
		transform: none;
	}

	.lang-switcher.is-translating .lang-switcher__toggle img {
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Section: Cards Grid — linked cards for landing pages that route     */
/* onward. A grid rather than a carousel, so every destination is      */
/* visible at once.                                                    */
/* ------------------------------------------------------------------ */

.section--cards__head {
	/* Full width, to sit square with the grid below rather than stopping
	   short of it. */
	margin-bottom: 3rem;
}

.section--cards__heading {
	margin: 0;
	font-size: var(--text-subheading-size);
	font-weight: var(--text-subheading-weight);
	line-height: var(--text-subheading-leading);
}

.section--cards__intro {
	margin: 1rem 0 0;
}

.bg--navy .section--cards__intro {
	color: rgba(255, 255, 255, 0.85);
}

/*
 * Flex rather than grid, so a part-filled last row can be aligned.
 *
 * Grid items sit in their tracks, so five cards in three columns always
 * hug the left with a hole on the right and justify-content on the grid
 * cannot move them. Wrapped flex lines can be aligned individually, and
 * a full row fills the width either way, so only the short row moves.
 */
.cards-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--cards-align, flex-start);
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The same sizing the grid used: a card is a share of the row, but never
 * narrower than 17rem. Below that fewer fit per row on their own, so there
 * are no breakpoints to keep in step with the column choice made in the
 * admin. Grow is 0 deliberately - let a short row grow to fill and there
 * would be nothing left to align.
 */
.cards-grid > * {
	flex: 0 1 max(
		min(17rem, 100%),
		calc((100% - (var(--cards-columns) - 1) * 2rem) / var(--cards-columns))
	);
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 0.75rem;
	background: var(--color-white);
	box-shadow: 0 0 0 1px rgba(29, 29, 27, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bg--white .card {
	background: var(--color-grey-bg);
	box-shadow: none;
}

.card:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 1rem 2rem rgba(0, 47, 108, 0.14);
}

.card__media {
	overflow: hidden;
	background: var(--color-grey-bg);
}

.card__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.card:hover .card__image {
	transform: scale(1.04);
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
}

.card__title {
	margin: 0;
	color: var(--color-body);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

/* Stretching the title's link over the card makes the whole card one
   target, without nesting anchors or duplicating tab stops. */
.card__link {
	color: inherit;
	text-decoration: none;
}

.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

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

.card__link:focus-visible {
	outline: none;
}

.card:has(.card__link:focus-visible) {
	outline: 2px solid var(--color-navy);
	outline-offset: 3px;
}

.card__text {
	margin: 0;
	color: var(--color-body);
	font-size: 0.9375rem;
	line-height: 1.5;
}

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

	.card:hover {
		transform: none;
	}

	.card:hover .card__image {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* Resources: video and white paper on a single post                   */
/* ------------------------------------------------------------------ */

.resource-media {
	margin-bottom: 2.5rem;
}

.resource-media__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 0.75rem;
	background: var(--color-dark);
}

.resource-media__frame :is(video, iframe) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Download panel for a white paper — the reason the page exists, so it
   sits above the copy rather than under it. */
.resource-download {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 2.5rem;
	padding: 1.5rem;
	border-radius: 0.75rem;
	background: var(--color-grey-bg);
}

.resource-download__meta {
	flex: 1;
	min-width: 12rem;
}

.resource-download__label {
	display: block;
	color: var(--color-grey);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.resource-download__name {
	display: block;
	margin-top: 0.25rem;
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Resources header — Figma node 341:1327.                             */
/* Blue band, everything centred: title, standfirst, the filter search */
/* and the category pills, with the FAQs line closing it off. Every    */
/* value below is a theme token; the design's 48/52, 20/25, 14px bold  */
/* and #0086BF already match Headings, Body Copy med, Nav Bar and      */
/* 7460C exactly.                                                      */
/* ------------------------------------------------------------------ */

.section--resources-header {
	color: var(--color-white);
	/* 80px above the title and below the FAQs line at 1920. */
	padding-block: 5rem;
}

.resources-header__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 30px between title, standfirst and search. */
	gap: 1.875rem;
	text-align: center;
}

.resources-header__title {
	margin: 0;
	font-size: var(--text-heading-size);
	font-weight: var(--text-heading-weight);
	line-height: var(--text-heading-leading);
}

.resources-header__intro {
	/* Matches the search field, so the two share an edge. */
	max-width: 40.0625rem;
	margin: 0;
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-leading);
}

/* --- the filter search ------------------------------------------- */

.resources-search {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-width: 40.0625rem; /* 641px */
	min-height: 4.8125rem; /* 77px */
	padding-inline: 1.875rem 2.5rem;
	border: 1px solid var(--color-white);
	border-radius: 1.25rem; /* 20px */
	transition: background 0.2s ease;
}

.resources-search:focus-within {
	background: rgba(255, 255, 255, 0.1);
}

.resources-search__input {
	flex: 1;
	min-width: 0;
	padding-block: 1rem;
	border: 0;
	background: none;
	color: var(--color-white);
	font-family: inherit;
	font-size: var(--text-body-size);
}

.resources-search__input:focus {
	outline: none; /* the field's own border carries the focus state */
}

/* Ours sits alongside the submit; the browser's would be a second one. */
.resources-search__input::-webkit-search-cancel-button {
	display: none;
}

.resources-search__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	color: var(--color-white);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.resources-search__clear:hover {
	background: rgba(255, 255, 255, 0.35);
}

/* display:flex above would otherwise beat the UA's [hidden] rule, leaving a
   clear button sitting there with nothing to clear. */
.resources-search__clear[hidden] {
	display: none;
}

/* Plain text in the design rather than a filled button. */
.resources-search__submit {
	flex-shrink: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-white);
	font-family: inherit;
	font-size: 1.125rem; /* 18px */
	font-weight: var(--text-body-weight);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.resources-search__submit:hover {
	opacity: 0.75;
}

/* --- category pills ------------------------------------------------ */

.section--resources-header .archive__filters {
	justify-content: center;
	/* 30px between pills, 26px between the two rows. */
	gap: 1.625rem 1.875rem;
	/* 38px below the search, on top of the container's 30px. */
	margin: 0.5rem 0 0;
}

.section--resources-header .archive__filter {
	padding: 1rem 1.875rem;
	border: 0;
	border-radius: 1.875rem;
	background: var(--color-white);
	color: var(--color-dark);
	font-size: var(--text-nav-size);
	font-weight: var(--text-nav-weight);
	line-height: var(--text-nav-leading);
}

.section--resources-header .archive__filter:hover {
	background: var(--color-dark);
	color: var(--color-white);
}

.section--resources-header .archive__filter.is-current {
	background: var(--color-dark);
	color: var(--color-white);
}

.section--resources-header .archive__filter:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: 3px;
}

/* --- FAQs line ----------------------------------------------------- */

.resources-header__faq {
	/* 50px under the pills, less the container's 30px. */
	margin: 1.25rem 0 0;
	font-size: var(--text-body-size);
	font-weight: var(--text-body-weight);
	line-height: var(--text-body-leading);
}

.resources-header__faq a {
	color: var(--color-white);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.resources-header__faq a:hover {
	text-decoration-thickness: 2px;
}

@media (max-width: 48rem) {
	.section--resources-header {
		padding-block: 3rem;
	}

	.resources-search {
		min-height: 3.75rem;
		padding-inline: 1.25rem 1.5rem;
	}

	.section--resources-header .archive__filter {
		padding: 0.75rem 1.25rem;
	}
}

/* ------------------------------------------------------------------ */
/* Resource rows: white papers and videos                              */
/* Both open the thing itself rather than a page about it.             */
/* ------------------------------------------------------------------ */

/* Stand-in when there's no cover yet — the host couldn't rasterise the
   PDF, or a provider still hasn't come back. */
.archive-item__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 10;
	background:
		repeating-linear-gradient(
			-45deg,
			rgba(0, 47, 108, 0.05) 0 0.75rem,
			transparent 0.75rem 1.5rem
		),
		var(--color-grey-bg);
	color: var(--color-navy);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* A PDF cover is portrait and carries its own title — cropping it to the
   row's 16:10 leaves a meaningless band from the middle of the page. Show
   the whole page instead, sitting on white like the document it is. */
.archive-item--white-paper .archive-item__media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
}

.archive-item--white-paper .archive-item__image {
	width: auto;
	max-width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: contain;
	box-shadow: 0 0.125rem 0.5rem rgba(29, 29, 27, 0.14);
}

/* The frame keeps its height so rows stay level whatever the page ratio. */
.archive-item--white-paper .archive-item__media,
.archive-item--video .archive-item__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.archive-item--white-paper:hover .archive-item__image {
	transform: none; /* a document shouldn't zoom on hover */
}

.archive-item--video .archive-item__media {
	position: relative;
	display: block;
}

.archive-item__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	/* The icon's own optical centre sits right of the triangle's box. */
	padding-left: 0.1875rem;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: var(--color-white);
	transform: translate(-50%, -50%);
	transition: background 0.2s ease, transform 0.2s ease;
}

.archive-item--video .archive-item__media:hover .archive-item__play {
	background: var(--color-orange);
	transform: translate(-50%, -50%) scale(1.08);
}

.archive-item__actions {
	margin: 1rem 0 0;
}

.archive-item__download,
.archive-item__watch {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	cursor: pointer;
}

.archive-item__download-detail {
	font-weight: 500;
	opacity: 0.75;
}

/* ------------------------------------------------------------------ */
/* Video modal                                                         */
/* ------------------------------------------------------------------ */

.video-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--edge-pad);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.video-modal.is-open {
	opacity: 1;
}

/* display:flex above beats the UA's [hidden] rule, and a position:fixed,
   inset:0 element that never goes away swallows every click on the page.
   Any rule that gives an element a display value has to say this too. */
.video-modal[hidden] {
	display: none;
}

.video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 38, 58, 0.85);
}

.video-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 62rem;
}

.video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 0.75rem;
	background: #000;
	transform: translateY(0.75rem);
	transition: transform 0.25s ease;
}

.video-modal.is-open .video-modal__frame {
	transform: none;
}

.video-modal__frame :is(video, iframe) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-modal__title {
	margin: 0 0 0.75rem;
	padding-right: 3rem;
	color: var(--color-white);
	font-size: var(--text-subheading-size);
	font-weight: var(--text-subheading-weight);
	line-height: var(--text-subheading-leading);
}

.video-modal__close {
	position: absolute;
	right: 0;
	bottom: calc(100% + 0.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: none;
	color: var(--color-white);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.video-modal__close:hover {
	border-color: var(--color-white);
	background: rgba(255, 255, 255, 0.15);
}

@media (prefers-reduced-motion: reduce) {
	.video-modal,
	.video-modal__frame,
	.archive-item__play {
		transition: none;
	}

	.archive-item--video .archive-item__media:hover .archive-item__play {
		transform: translate(-50%, -50%);
	}
}