/* ==========================================================================
   ISO Solution — front-end styles
   Tokens mirror the approved design (converted from its oklch source values).
   ========================================================================== */

:root {
	--brand: #125d90;
	--brand-dark: #01385c;
	--teal: #2f9d9b;
	--accent: #f17b22;
	--accent-hover: #d96a15;

	--fg: #292929;
	--fg-muted: #676c73;
	--surface: #f7f8fa;
	--muted: #f0f2f4;
	--line: #dee2e7;
	--base: #fff;

	--radius: 0.625rem;
	--radius-lg: 1rem;
	--radius-pill: 999px;

	--shadow-card: 0 1px 2px rgb(41 41 41 / 6%), 0 6px 20px rgb(18 93 144 / 7%);
	--shadow-lift: 0 2px 6px rgb(41 41 41 / 6%), 0 18px 40px rgb(18 93 144 / 16%);

	--container: 1280px;
	--gutter: 1.5rem;
	--topbar-h: 40px;
	--header-h: 76px;
	--transition: 160ms ease;
}

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

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

/* The header is sticky, so an in-page link would otherwise land with its
   target underneath it — #news, #apply and #open-positions all did. */
html {
	scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
	margin: 0;
	color: var(--fg);
	background: var(--base);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

/*
 * `hidden` has to win. The browser's own [hidden] { display: none } is the
 * weakest rule there is, so any class that sets display quietly out-ranks it
 * and the element stays on screen after the script hides it. That shipped
 * more than once — a Load More button that never went away was one — and was
 * patched element by element. This ends it for every element at once.
 */
[hidden] {
	display: none !important;
}

.icon {
	flex: none;
}

a {
	color: var(--brand);
	text-underline-offset: 2px;
	transition: color var(--transition);
}

a:hover,
a:focus {
	color: var(--brand-dark);
}

:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 2px;
	border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.75rem;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
}

p, ul, ol {
	margin: 0 0 1rem;
}

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

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

.skip-link:focus {
	position: fixed;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 999;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	background: var(--base);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
}

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

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.6875rem 1.25rem;
	color: var(--base);
	background: var(--accent);
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.button:hover,
.button:focus {
	color: var(--base);
	background: var(--accent-hover);
}

.button--lg {
	padding: 0.9375rem 1.75rem;
	font-size: 1rem;
}

.button--sm {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

.button--ghost {
	background: rgb(255 255 255 / 8%);
	border-color: rgb(255 255 255 / 55%);
	backdrop-filter: blur(4px);
}

.button--ghost:hover,
.button--ghost:focus {
	background: rgb(255 255 255 / 18%);
	border-color: #fff;
}

.button--outline {
	color: var(--fg);
	background: var(--base);
	border-color: var(--line);
}

.button--outline:hover,
.button--outline:focus {
	color: var(--brand);
	background: var(--base);
	border-color: var(--brand);
}

/* Arrow link (View Details / Read more) */

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--accent);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.link-arrow .icon {
	transition: transform var(--transition);
}

.link-arrow:hover {
	color: var(--accent-hover);
}

.link-arrow:hover .icon {
	transform: translateX(3px);
}

/* Pills and avatars ------------------------------------------------------- */

.pill {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	border-radius: var(--radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.5;
}

.pill--teal {
	color: #1f7a78;
	background: rgb(47 157 155 / 12%);
}

.avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.avatar--brand {
	color: #fff;
	background: var(--brand);
}

.avatar--teal {
	color: #1f7a78;
	background: rgb(47 157 155 / 15%);
}

/* Top utility bar --------------------------------------------------------- */

.topbar {
	position: relative;
	z-index: 120;
	color: rgb(255 255 255 / 82%);
	background: var(--brand-dark);
	font-size: 0.8125rem;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--topbar-h);
}

.topbar__right {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-inline-start: auto;
}

.topbar__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: inherit;
	text-decoration: none;
}

.topbar__phone:hover {
	color: #fff;
}

.topbar__search {
	position: relative;
	display: flex;
	align-items: center;
}

.topbar__search .icon {
	position: absolute;
	inset-inline-start: 0.625rem;
	color: rgb(255 255 255 / 60%);
	pointer-events: none;
}

/* Specificity here must beat the generic `input[type="search"]` rule further
   down the sheet, hence the attribute selector. */
.topbar__search input[type="search"] {
	width: 240px;
	padding: 0.3125rem 0.75rem 0.3125rem 2rem;
	color: #fff;
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: var(--radius);
	font: inherit;
	font-size: 0.8125rem;
}

.topbar__search input[type="search"]::placeholder {
	color: rgb(255 255 255 / 60%);
}

.topbar__search input[type="search"]:focus {
	background: rgb(255 255 255 / 16%);
	outline: none;
	border-color: rgb(255 255 255 / 45%);
	box-shadow: none;
}

/* Language switcher */

.lang-switch {
	position: relative;
}

.lang-switch__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0;
	color: inherit;
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.8125rem;
	cursor: pointer;
}

.lang-switch__toggle:hover {
	color: #fff;
}

.lang-switch__chevron {
	transition: transform var(--transition);
}

.lang-switch__toggle[aria-expanded="true"] .lang-switch__chevron {
	transform: rotate(180deg);
}

.lang-switch__list {
	position: absolute;
	inset-block-start: calc(100% + 6px);
	inset-inline-start: 0;
	z-index: 10;
	display: none;
	min-width: 150px;
	margin: 0;
	padding: 0.375rem;
	list-style: none;
	background: var(--base);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lift);
}

.lang-switch.is-open .lang-switch__list {
	display: block;
}

.lang-switch__list a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	color: var(--fg);
	font-size: 0.875rem;
	text-decoration: none;
}

.lang-switch__list a:hover,
.lang-switch__list a[aria-current="true"] {
	color: var(--brand);
	background: var(--muted);
}

/* Site header ------------------------------------------------------------- */

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 110;
	background: var(--base);
	border-block-end: 1px solid var(--line);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--header-h);
}

/* Brand logo (official SVG artwork: colour on light, reversed on dark) */

.site-logo {
	display: inline-flex;
	align-items: center;
}

.site-logo__img {
	display: block;
	width: auto;
	height: 36px;
}

.custom-logo {
	display: block;
	max-height: 48px;
	width: auto;
}

/* Primary navigation ------------------------------------------------------ */

.main-navigation {
	margin-inline: auto;
}

.main-navigation > ul {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation > ul > li {
	position: relative;
}

.main-navigation > ul > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius);
	color: var(--fg);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.main-navigation > ul > li > a:hover,
.main-navigation > ul > li.is-open > a,
.main-navigation > ul > li.current-menu-item > a,
.main-navigation > ul > li.current-menu-ancestor > a {
	color: var(--brand);
	background: var(--muted);
}

.menu-item__chevron {
	transition: transform var(--transition);
}

.main-navigation li.is-open > a .menu-item__chevron {
	transform: rotate(180deg);
}

/* Dropdown panel */

.main-navigation .sub-menu {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline-start: 0;
	z-index: 20;
	min-width: 266px;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.main-navigation li.is-open > .sub-menu,
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-navigation .sub-menu a {
	display: block;
	padding: 0.625rem 0.75rem;
	border-radius: 6px;
	color: var(--fg);
	font-size: 0.9375rem;
	text-decoration: none;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus {
	color: var(--brand);
	background: var(--surface);
}

.main-navigation__cta {
	display: none;
}

.site-header__cta {
	margin-inline-start: auto;
}

/* Mobile nav toggle */

.site-logo__img--white {
	display: none;
}

.main-navigation__search,
.main-navigation__foot {
	display: none;
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-inline-start: auto;
	padding: 0;
	color: var(--fg);
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
}

.nav-toggle__close {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
	display: block;
}

@media (max-width: 1099px) {

	/* Only one lockup shows at a time; the white one takes over when the header
	   sits on the open panel. */
	.site-logo__img--white {
		display: none;
	}

	.site-header.is-open .site-logo__img {
		display: none;
	}

	.site-header.is-open .site-logo__img--white {
		display: block;
	}

	/* The desktop rule paints a pale pill for hover, the open state and the
	   current page alike. On the navy panel that reads as a white block — and
	   a tap leaves :hover stuck on the row afterwards. Matched at the same
	   specificity as the rule it replaces so the background is dropped in
	   every one of those states. */
	.main-navigation > ul > li > a:hover,
	.main-navigation > ul > li > a:focus,
	.main-navigation > ul > li.is-open > a,
	.main-navigation > ul > li.current-menu-item > a,
	.main-navigation > ul > li.current-menu-ancestor > a {
		color: #fff;
		background: none;
	}

	/* Only an open row is tinted, as the design has it. */
	.main-navigation > ul > li.is-open > a,
	.main-navigation > ul > li.is-open > a:hover {
		color: #8fc4e8;
	}

	/* Full-width rows, so the plus sits hard against the right edge. */
	.main-navigation > ul > li > a {
		display: flex;
		width: 100%;
	}

	/* The panel's field is dark; the global form styling is not. */
	.main-navigation__search input[type="search"] {
		background: none;
		border: 0;
		border-radius: 0;
	}

	/* The utility bar's contents move into the panel at this width, so the
	   header is just the logo and the button. */
	.topbar {
		display: none;
	}

	.nav-toggle {
		display: inline-flex;
		order: 3;
		width: 46px;
		height: 46px;
		color: #fff;
		background: var(--brand-dark);
		border-color: var(--brand-dark);
	}

	.site-header__cta {
		display: none;
	}

	/* Open: the header joins the panel, so the button lifts off the navy. */
	.site-header.is-open {
		background: var(--brand-dark);
	}

	.site-header.is-open .nav-toggle {
		background: rgb(255 255 255 / 12%);
		border-color: transparent;
	}

	/* Full-height panel below the header. */
	.main-navigation {
		position: fixed;
		inset-block-start: var(--header-h);
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 100;
		display: none;
		flex-direction: column;
		margin: 0;
		padding: 1.25rem var(--gutter) 1.5rem;
		overflow-y: auto;
		color: #fff;
		background: var(--brand-dark);
		border: 0;
		box-shadow: none;
	}

	.main-navigation::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(to right, rgb(255 255 255 / 4%) 1px, transparent 1px),
			linear-gradient(to bottom, rgb(255 255 255 / 4%) 1px, transparent 1px);
		background-size: 64px 64px;
		pointer-events: none;
	}

	.main-navigation.is-open {
		display: flex;
	}

	.main-navigation > * {
		position: relative;
		z-index: 1;
	}

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

	.main-navigation__search {
		display: flex;
		align-items: center;
		gap: 0.625rem;
		margin-block-end: 1.25rem;
		padding: 0.875rem 1rem;
		color: rgb(255 255 255 / 55%);
		background: rgb(255 255 255 / 8%);
		border: 1px solid rgb(255 255 255 / 12%);
		border-radius: var(--radius);
	}

	.main-navigation__search input {
		width: 100%;
		padding: 0;
		color: #fff;
		font: inherit;
		font-size: 1rem;
		background: none;
		border: 0;
	}

	.main-navigation__search input::placeholder {
		color: rgb(255 255 255 / 55%);
	}

	.main-navigation__search input:focus {
		outline: none;
	}

	/* Menu --------------------------------------------------------------- */

	.main-navigation > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.main-navigation > ul > li {
		border-block-end: 1px solid rgb(255 255 255 / 12%);
	}

	.main-navigation > ul > li > a {
		justify-content: space-between;
		padding: 1.0625rem 0.25rem;
		color: #fff;
		font-size: 1.375rem;
		font-weight: 600;
	}

	.main-navigation > ul > li.is-open > a {
		color: #8fc4e8;
	}

	/* The chevron reads as a plus/minus at this size: a horizontal bar, with a
	   vertical one that disappears when the panel opens. */
	.main-navigation .menu-item__chevron {
		display: none;
	}

	.main-navigation .has-dropdown > a::after {
		content: '';
		flex: 0 0 auto;
		width: 16px;
		height: 16px;
		background:
			linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
			linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	}

	.main-navigation .has-dropdown.is-open > a::after {
		background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
	}

	/* Sub-menu ------------------------------------------------------------ */

	.main-navigation .sub-menu {
		position: static;
		display: none;
		min-width: 0;
		margin: 0 0 1rem;
		padding: 0.5rem 0 0.5rem 1.125rem;
		background: rgb(255 255 255 / 6%);
		border: 0;
		border-inline-start: 2px solid rgb(255 255 255 / 25%);
		border-radius: 0 var(--radius) var(--radius) 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* Opened only by tapping the row. `is-open` sits on the li, so this is the
	   one rule that reveals the panel. */
	.main-navigation li.is-open > .sub-menu {
		display: block;
	}

	.main-navigation .sub-menu a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.6875rem 0.875rem 0.6875rem 0;
		color: rgb(255 255 255 / 88%);
		font-size: 1.0625rem;
	}

	.main-navigation .sub-menu a:hover,
	.main-navigation .sub-menu a:focus {
		color: #fff;
		background: none;
	}

	/* Foot ---------------------------------------------------------------- */

	.main-navigation__cta {
		display: block;
		margin-block-start: 1.5rem;
	}

	.main-navigation__cta .button {
		width: 100%;
	}

	.main-navigation__foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-block-start: 1rem;
		padding-block-start: 0.25rem;
	}

	.main-navigation__phone {
		color: #fff;
		font-size: 1rem;
		font-weight: 600;
		text-decoration: none;
	}

	/* The switcher sits at the foot of a scrolling panel, so its list has to
	   open upward — downward it would fall outside the panel and be clipped. */
	.main-navigation__foot .lang-switch__list {
		inset-block-start: auto;
		inset-block-end: calc(100% + 8px);
		inset-inline-start: auto;
		inset-inline-end: 0;
	}

	/* Its desktop padding is 0.25rem 0, which sat invisibly inside the utility
	   bar but leaves the text hard against the edges once it has a background. */
	.main-navigation__foot .lang-switch__toggle {
		gap: 0.5rem;
		padding: 0.5625rem 0.875rem;
		color: #fff;
		font-size: 0.9375rem;
		background: rgb(255 255 255 / 12%);
		border: 0;
		border-radius: var(--radius);
	}
}

@media (max-width: 767px) {
	/* Must match the specificity of the base rule above, which is raised to
	   beat the generic input styling further down the sheet. */
	.topbar__search input[type="search"] {
		width: min(190px, 42vw);
	}

	.topbar__phone span {
		display: none;
	}
}

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

/* The banner image is uploaded in the admin panel (Customizer → Homepage Hero)
   and sits underneath a fixed brand gradient, matching the design:
   `bg-gradient-to-r from-brand-dark/95 via-brand/85 to-teal/60`. */

.hero {
	position: relative;
	padding-block: 7rem;
	overflow: hidden;
	color: #fff;
	background: var(--brand-dark);
	isolation: isolate;
}

@media (min-width: 768px) {
	.hero {
		padding-block: 9rem;
	}
}

.hero__media,
.hero__overlay {
	position: absolute;
	inset: 0;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Slides stack on top of each other and cross-fade. A hero with one image —
   or the bundled fallback — is simply a stack of one, so the still hero and
   the slider share exactly the same markup and styles. */
.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 900ms ease;
}

.hero__slide.is-current {
	opacity: 1;
}

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

/* Sits with the hero copy rather than over the image: the media layer is
   aria-hidden, so a control inside it could never be reached. */
.hero__dots {
	display: flex;
	gap: 0.5rem;
	margin-block-start: 2.5rem;
}

.hero__dot {
	position: relative;
	width: 2.5rem;
	/* Taller than the bar it draws, so the tap target is a usable size. */
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.hero__dot::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline: 0;
	height: 0.25rem;
	transform: translateY(-50%);
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 35%);
	transition: background var(--transition);
}

.hero__dot:hover::before {
	background: rgb(255 255 255 / 60%);
}

.hero__dot.is-current::before {
	background: var(--accent);
}

.hero__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: var(--radius);
}

/* The gradient "filter" laid over the uploaded banner. */
.hero__overlay {
	background: linear-gradient(
		to right,
		rgb(1 56 92 / 95%) 0%,
		rgb(18 93 144 / 85%) 50%,
		rgb(47 157 155 / 60%) 100%
	);
}

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

.hero__content {
	max-width: 48rem;
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0.25rem 0.75rem;
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: var(--radius-pill);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.025em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
}

.hero__title {
	margin: 0 0 1.5rem;
	font-size: clamp(2.25rem, 4.6vw, 3.75rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.hero__text {
	max-width: 42rem;
	margin: 0 0 2.25rem;
	color: rgb(255 255 255 / 85%);
	font-size: 1.125rem;
	line-height: 1.6;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Stats bar --------------------------------------------------------------- */

.stats {
	background: var(--base);
	border-block-end: 1px solid var(--line);
}

/* Two up on small screens, four from the medium breakpoint — as per design. */
.stats__grid {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: var(--line);
}

@media (min-width: 768px) {
	.stats__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* 1px grid gaps over the border colour draw the dividers, so they stay correct
   whether the grid is 2 or 4 across (design: `gap-px bg-border`). */
.stats__item {
	padding: 2.5rem 1rem;
	text-align: center;
	background: var(--base);
}

.stats__value {
	margin: 0 0 0.25rem;
	color: var(--brand);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.stats__label {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.9375rem;
}

/* Sections ---------------------------------------------------------------- */

.section {
	padding-block: 5.5rem;
}

.section--surface {
	background: var(--surface);
}

.section--tight {
	padding-block: 3.5rem;
}

.section-header {
	max-width: 46rem;
	margin-block-end: 3rem;
}

.section-header--center {
	margin-inline: auto;
	text-align: center;
}

.section-header__eyebrow {
	margin: 0 0 0.75rem;
	color: var(--teal);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.section-header__title {
	margin: 0 0 1rem;
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.035em;
}

.section-header__intro {
	margin: 0;
	color: var(--fg-muted);
	font-size: 1.0625rem;
}

/* Product cards ----------------------------------------------------------- */

.product-grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

.product-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 2rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	transition: transform var(--transition), box-shadow var(--transition);
}

.product-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
}

.product-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-block-end: 1.5rem;
	color: var(--brand);
	background: rgb(18 93 144 / 10%);
	border-radius: var(--radius);
	transition: color var(--transition), background var(--transition);
}

.product-card:hover .product-card__icon {
	color: #fff;
	background: var(--brand);
}

.product-card__title {
	margin: 0 0 1.25rem;
	font-size: 1.3125rem;
	font-weight: 700;
}

.product-card__text {
	margin: 0 0 1.75rem;
	color: var(--fg-muted);
	font-size: 0.9375rem;
}

.product-card .link-arrow {
	margin-block-start: auto;
}

/* Theranostics ------------------------------------------------------------ */

.theranostics {
	display: grid;
	gap: 3.5rem;
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
	.theranostics {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 4.5rem;
	}
}

.theranostics__title {
	margin: 0 0 1.25rem;
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	font-weight: 800;
	letter-spacing: -0.035em;
}

.theranostics__title span {
	display: block;
	color: var(--brand);
}

.theranostics__intro {
	margin: 0 0 2rem;
	color: var(--fg-muted);
	font-size: 1.0625rem;
}

.feature-list {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.feature-list__item {
	display: flex;
	gap: 0.875rem;
}

.feature-list__icon {
	color: var(--teal);
	line-height: 1;
	padding-block-start: 2px;
}

.feature-list__title {
	margin: 0 0 0.25rem;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.feature-list__text {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.9375rem;
}

/* Milestone card */

.milestone-card {
	padding: 2.5rem;
	color: #fff;
	background: linear-gradient(150deg, #17527f 0%, var(--brand-dark) 100%);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lift);
}

.milestone-card__badge {
	display: inline-block;
	margin: 0 0 1.25rem;
	padding: 0.3125rem 0.875rem;
	background: var(--accent);
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
}

.milestone-card__title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
}

.milestone-card__text {
	margin: 0 0 2rem;
	color: rgb(255 255 255 / 82%);
	font-size: 0.9375rem;
}

.milestone-card__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: rgb(255 255 255 / 8%);
	border-radius: var(--radius);
	overflow: hidden;
}

.milestone-card__stat {
	padding: 1.25rem;
}

.milestone-card__stat + .milestone-card__stat {
	border-inline-start: 1px solid rgb(255 255 255 / 14%);
}

.milestone-card__stat-value {
	margin: 0 0 0.125rem;
	font-size: 1.25rem;
	font-weight: 700;
}

.milestone-card__stat-label {
	margin: 0;
	color: rgb(255 255 255 / 70%);
	font-size: 0.8125rem;
}

/* Value cards ------------------------------------------------------------- */

.value-grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

.value-card {
	padding: 1.75rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	transition: transform var(--transition), box-shadow var(--transition);
}

.value-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
}

.value-card__icon {
	display: block;
	margin-block-end: 1.5rem;
	color: var(--teal);
	line-height: 1;
}

.value-card__title {
	margin: 0 0 0.625rem;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.value-card__text {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.9375rem;
}

/* Quote card -------------------------------------------------------------- */

/* White on the grey section, mirroring how the value and product cards sit. */
.quote-card {
	max-width: 56rem;
	margin: 0 auto;
	padding: 3rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.quote-card__mark {
	display: block;
	margin-block-end: 1.5rem;
	color: var(--teal);
	line-height: 1;
}

.quote-card__text {
	margin: 0 0 2rem;
	font-size: clamp(1.125rem, 1.9vw, 1.5rem);
	font-weight: 500;
	line-height: 1.55;
	letter-spacing: -0.015em;
}

.quote-card__text p {
	margin: 0;
}

.quote-card__author {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-block-start: 1.75rem;
	border-block-start: 1px solid var(--line);
}

.quote-card__name {
	display: block;
	font-weight: 700;
}

.quote-card__role {
	display: block;
	color: var(--fg-muted);
	font-size: 0.875rem;
}

/* Region tabs and contacts ------------------------------------------------ */

.region-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-block-end: 2.5rem;
}

.region-tabs__tab {
	padding: 0.625rem 1.375rem;
	color: var(--fg);
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
	transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.region-tabs__tab:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.region-tabs__tab.is-active {
	color: #fff;
	background: var(--brand-dark);
	border-color: var(--brand-dark);
}

.region-panel[hidden] {
	display: none;
}

.region-panel__empty {
	max-width: 46rem;
	margin: 0 auto;
	color: var(--fg-muted);
	text-align: center;
}

/* auto-FILL, not auto-fit: a region with a single contact must keep the same
   card width as a region with two. auto-fit collapses the empty track and
   stretches the lone card across the full row. */
.contact-grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	max-width: 900px;
	margin-inline: auto;
}

.contact-card {
	padding: 1.75rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.contact-card__header {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-block-end: 1.25rem;
}

.contact-card__name {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
}

.contact-card__role {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.875rem;
}

.contact-card__details {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.contact-card__details li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-block-end: 0.5rem;
	color: var(--brand);
	font-size: 0.9375rem;
}

.contact-card__details a {
	color: var(--fg);
	text-decoration: none;
}

.contact-card__details a:hover {
	color: var(--brand);
}

.contact-card__actions {
	display: flex;
	gap: 0.625rem;
}

/* News cards -------------------------------------------------------------- */

.news-grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

/* Image sits flush to the card edge, so the padding lives on the body. */
.news-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: transform var(--transition), box-shadow var(--transition);
}

.news-card__media {
	display: block;
	background: var(--muted);
}

.news-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform var(--transition);
}

.news-card:hover .news-card__media img {
	transform: scale(1.03);
}

.news-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.75rem;
}

.news-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lift);
}

.news-card__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-block-end: 1rem;
}

.news-card__year {
	color: var(--fg-muted);
	font-size: 0.8125rem;
}

.news-card__title {
	margin: 0 0 0.75rem;
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.35;
}

.news-card__text {
	margin: 0 0 1.5rem;
	color: var(--fg-muted);
	font-size: 0.9375rem;
}

.news-card .link-arrow {
	margin-block-start: auto;
}

/* Partners ---------------------------------------------------------------- */

.partners__label {
	margin: 0 0 2rem;
	color: var(--fg-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
}

/* The strip and its two arrows. Positioned relative so the buttons can sit at
   the edges; they are pulled just outside the scroller (-0.75rem) so they clear
   the tiles, which stays inside .container's 1.5rem padding and therefore
   cannot push the page into horizontal scroll. */
.partners__strip {
	position: relative;
}

.partners__nav {
	position: absolute;
	inset-block-start: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--base);
	color: var(--brand);
	cursor: pointer;
	box-shadow: var(--shadow-card);
	transition: color var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
}

/* `display: flex` above out-ranks the browser's own [hidden] { display: none },
   which is a class-versus-attribute specificity trap: without this the arrows
   render on a strip that does not scroll, however correctly the script hides
   them. */
.partners__nav[hidden] {
	display: none;
}

.partners__nav--prev {
	inset-inline-start: -0.75rem;
}

.partners__nav--next {
	inset-inline-end: -0.75rem;
}

.partners__nav:hover:not([disabled]) {
	color: var(--teal);
	border-color: var(--teal);
	box-shadow: var(--shadow-lift);
}

/* Kept in place rather than removed at the ends of the strip: a button that
   disappears shifts nothing, but one that vanishes and returns as you scroll
   is a distraction. */
.partners__nav[disabled] {
	opacity: 0.3;
	cursor: default;
	box-shadow: none;
}

/* One row, never wrapping: five tiles are visible and the rest are reached by
   scrolling sideways. Five is a count, not a width, so the tile basis is
   derived from that count and the tiles grow with the container instead of
   leaving a ragged gap at the end of the row.

   Nothing decides when to scroll: five or fewer tiles fit and the row simply
   centres itself; a sixth makes it overflow and become scrollable. The same
   holds at the narrower breakpoints, where fewer tiles are visible. */
.partners__scroller {
	--partners-gap: 1rem;
	--partners-visible: 5;

	overflow-x: auto;
	/* Explicitly hidden, not left to default: a box with one axis `auto` and
	   the other `visible` computes the visible one to `auto` too, which made
	   the tiles nudge up and down inside the strip. Nothing here is ever taller
	   than the row, so there is nothing to clip. */
	overflow-y: hidden;
	/* A sideways flick inside the strip must not also drag the page. */
	overscroll-behavior-x: contain;
	/* Hidden by request. Note that this leaves no visual cue that the row
	   continues past the fifth tile — a trackpad swipe, shift+wheel or tabbing
	   to a logo link all still scroll it, but a plain mouse has no target. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

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

.partners__grid {
	display: flex;
	flex-wrap: nowrap;
	/* `safe center` centres a short strip but falls back to flex-start once the
	   tiles overflow — plain `center` would push the first tile off the left
	   edge, where it can never be scrolled back into view. */
	justify-content: flex-start;
	justify-content: safe center;
	gap: var(--partners-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.partners__item {
	flex: 0 0 calc((100% - (var(--partners-visible) - 1) * var(--partners-gap)) / var(--partners-visible));
	/* The tile's original 160x78 proportion, kept as the tile grows. */
	aspect-ratio: 160 / 78;
	/* Containing block for the "(opens in a new tab)" text, which is
	   `position: absolute`. Without this it resolves against an ancestor
	   outside the scroller, escapes the scroller's clipping, and sits at its
	   static position far along the row — dragging the whole page into
	   horizontal scroll. Harmless while the grid wrapped; not once the row
	   runs off sideways. */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--fg-muted);
	font-size: 0.9375rem;
	font-weight: 500;
	text-align: center;
	transition: color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.partners__item:hover {
	color: var(--brand);
	border-color: var(--teal);
	box-shadow: var(--shadow-card);
}

/* The link fills the tile, so the whole box is the hit area. Only a tile with
   a URL gets the pointer — an unlinked tile keeps the default cursor. */
.partners__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.partners__item--linked {
	cursor: pointer;
}

/* The logo fills whatever the tile's padding leaves, keeping its own aspect
   ratio. Sized in percentages rather than a fixed 46px so it grows with the
   tile instead of sitting small in the middle of a larger box. */
.partners__logo {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Fewer tiles at a time on narrower screens: five across a phone would render
   each logo unreadably small. */
@media (max-width: 1023px) {
	.partners__scroller {
		--partners-visible: 3;
	}
}

@media (max-width: 599px) {
	.partners__scroller {
		--partners-visible: 2;
	}
}

/* A category page's header carries its own background image when one is set.
   The container needs stacking context of its own so the copy sits above the
   image and gradient. */
.catalog-head--media {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.catalog-head__media,
.catalog-head__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.catalog-head__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.catalog-head__overlay {
	background: linear-gradient(
		to right,
		rgb(1 56 92 / 95%) 0%,
		rgb(18 93 144 / 85%) 50%,
		rgb(47 157 155 / 55%) 100%
	);
}

/* A category page with nothing in it yet. Centred and generously spaced so the
   page reads as deliberately empty rather than as content that failed to load. */
.catalog-none__inner {
	max-width: 36rem;
	margin-inline: auto;
	padding-block: 2rem;
	text-align: center;
}

.catalog-none__text {
	margin: 0 0 2rem;
	color: var(--fg-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
	padding-block: 4rem 2rem;
	color: rgb(255 255 255 / 76%);
	background: var(--brand-dark);
	font-size: 0.9375rem;
}

.site-footer a {
	color: rgb(255 255 255 / 76%);
	text-decoration: none;
}

.site-footer a:hover {
	color: #fff;
}

.site-footer__columns {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	margin-block-end: 3rem;
}

.site-logo--footer .site-logo__img {
	height: 34px;
}

.site-footer__about {
	margin: 1rem 0 0;
	max-width: 34ch;
	color: rgb(255 255 255 / 64%);
	font-size: 0.9375rem;
}

.site-footer__heading {
	margin: 0 0 1.125rem;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

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

.site-footer__menu li {
	margin-block-end: 0.625rem;
}

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

.site-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-block-end: 0.75rem;
}

.site-footer__contact .icon {
	margin-block-start: 4px;
	color: rgb(255 255 255 / 55%);
}

/* Working hours can run to several lines under one icon. */
.site-footer__hours {
	display: grid;
	gap: 0.125rem;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block-start: 1.75rem;
	border-block-start: 1px solid rgb(255 255 255 / 12%);
	font-size: 0.875rem;
}

/*
 * The chat launcher and the quote button are fixed to the bottom-right, which
 * is exactly where this row's links end once the page is scrolled to its end.
 * Rather than leave an empty band below the row, the row stops short of them
 * on the right, so the buttons float over footer ground rather than over a link
 * nobody can click. 15rem is a button (about 11.5rem) plus its 1.5rem inset and
 * some air, less the room the centred container already leaves at the side: on
 * wide screens the buttons sit clear of the container and nothing changes.
 */
body:has(.iso-chat) .site-footer__bottom,
body:has(.floating-cta) .site-footer__bottom {
	padding-inline-end: max(0px, calc(15rem - (100vw - 100%) / 2));
}

/* Phones: stopping that far short would squeeze the row to a sliver, so the
   clearance goes below it instead. Both buttons present: they stack, so the
   clearance has to cover the taller pair. */
@media (max-width: 600px) {
	body:has(.iso-chat) .site-footer__bottom,
	body:has(.floating-cta) .site-footer__bottom {
		padding-inline-end: 0;
		padding-block-end: 4rem;
	}

	body:has(.iso-chat):has(.floating-cta) .site-footer__bottom {
		padding-block-end: 7.5rem;
	}
}

.site-footer__copyright {
	margin: 0;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__disclaimer {
	margin: 1.25rem 0 0;
	color: rgb(255 255 255 / 45%);
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* Floating CTA ------------------------------------------------------------ */

.floating-cta {
	position: fixed;
	inset-block-end: 1.5rem;
	inset-inline-end: 1.5rem;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.875rem 1.375rem;
	color: #fff;
	background: var(--accent);
	border-radius: var(--radius-pill);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 6px 24px rgb(241 123 34 / 40%);
	transition: background var(--transition), transform var(--transition);
}

.floating-cta:hover {
	color: #fff;
	background: var(--accent-hover);
	transform: translateY(-2px);
}

@media (max-width: 600px) {
	.floating-cta {
		inset-block-end: 1rem;
		inset-inline-end: 1rem;
		padding: 0.75rem;
	}

	.floating-cta span {
		display: none;
	}
}

/* Interior pages ---------------------------------------------------------- */

.site-main {
	min-height: 40vh;
}

.page-hero {
	padding-block: 3.5rem;
	color: #fff;
	background: linear-gradient(120deg, var(--brand-dark), var(--brand));
}

.page-hero__title {
	margin: 0;
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.page-hero__intro {
	margin: 0.75rem 0 0;
	max-width: 60ch;
	color: rgb(255 255 255 / 82%);
}

.content-area {
	display: grid;
	gap: 3rem;
	padding-block: 4rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
	body:not(.no-sidebar) .content-area {
		grid-template-columns: minmax(0, 1fr) 320px;
	}
}

.post-list {
	display: grid;
	gap: 2.5rem;
}

.entry--summary {
	display: grid;
	gap: 1.5rem;
	padding-block-end: 2.5rem;
	border-block-end: 1px solid var(--line);
}

@media (min-width: 640px) {
	.entry--summary:has(.entry__thumbnail) {
		grid-template-columns: 280px minmax(0, 1fr);
		align-items: start;
	}
}

.entry__thumbnail img {
	display: block;
	width: 100%;
	border-radius: var(--radius-lg);
}

.entry__title {
	margin-block-end: 0.5rem;
	font-size: 1.5rem;
}

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

.entry__title a:hover {
	color: var(--brand);
}

.entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-block-end: 1rem;
	color: var(--fg-muted);
	font-size: 0.875rem;
}

.entry--single .entry__title,
.entry--page .entry__title {
	font-size: clamp(1.875rem, 3.4vw, 2.5rem);
}

.entry-content > * {
	margin-block-end: 1rem;
}

.entry-content blockquote {
	margin-inline: 0;
	padding-inline-start: 1.25rem;
	border-inline-start: 3px solid var(--teal);
	color: var(--fg-muted);
}

.entry__footer {
	margin-block-start: 2rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--line);
	font-size: 0.875rem;
}

/* Forms ------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select {
	width: 100%;
	padding: 0.65rem 0.85rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font: inherit;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgb(18 93 144 / 12%);
}

.search-form {
	display: flex;
	gap: 0.5rem;
}

.search-form__submit {
	padding: 0.65rem 1.25rem;
	color: #fff;
	background: var(--accent);
	border: 0;
	border-radius: var(--radius);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* Widgets ----------------------------------------------------------------- */

.widget {
	margin-block-end: 2rem;
	padding: 1.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.widget__title {
	font-size: 0.9375rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

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

.widget li + li {
	margin-block-start: 0.5rem;
}

/* Pagination -------------------------------------------------------------- */

.pagination .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 2.5rem;
}

.post-navigation .nav-links {
	justify-content: space-between;
	gap: 1rem;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-decoration: none;
}

.pagination .page-numbers.current {
	color: #fff;
	background: var(--brand);
	border-color: var(--brand);
}

.nav-subtitle {
	display: block;
	color: var(--fg-muted);
	font-size: 0.8125rem;
	text-transform: uppercase;
}

/* Comments ---------------------------------------------------------------- */

.comments-area {
	margin-block-start: 3rem;
	padding-block-start: 2rem;
	border-block-start: 1px solid var(--line);
}

.comment-list,
.comment-list .children {
	padding: 0;
	list-style: none;
}

.comment-list .children {
	padding-inline-start: 2rem;
}

.comment-body {
	padding-block: 1rem;
	border-block-end: 1px solid var(--line);
}

/* Block alignment --------------------------------------------------------- */

.alignwide {
	width: min(100%, var(--container));
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.alignleft {
	float: left;
	margin: 0 1rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0 0 1rem 1rem;
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Single product category ------------------------------------------------- */

.product-single__icon {
	margin-inline: auto;
}

.product-single__back {
	margin: 0;
	text-align: center;
}

/* Infographics ------------------------------------------------------------ */

.iso-infographic {
	max-width: 1100px;
	margin: 3rem auto 0;
}

/* The supply-chain diagram carries a lot of small type. Below its natural width
   it is panned rather than shrunk, which would make it unreadable. */
.iso-infographic__scroll {
	overflow-x: auto;
}

.iso-infographic img {
	display: block;
	width: 100%;
	min-width: 680px;
	height: auto;
}

.iso-infographic__caption {
	margin-block-start: 1rem;
	color: var(--fg-muted);
	font-size: 0.9375rem;
	text-align: center;
}

/* Page content constrained to a comfortable measure ------------------------ */

/* Wider than a pure reading measure: these pages sit above a full-width photo
   or graphic, and a narrow column left the text looking stranded beside it. */
.entry-content--narrow {
	max-width: 58rem;
	margin-inline: auto;
}

/* Company Overview runs the text to the same width as the photograph below it,
   so the two line up rather than the text floating inside the image's edges. */
.page-template-template-about-who-we-are .entry-content--narrow {
	max-width: var(--container);
}

/* Timeline ---------------------------------------------------------------- */

/* The year rail. Hidden until script turns the list into tabs, so it never
   appears as a row of buttons that do nothing. */
.timeline__rail {
	--rail-fade: 3rem;

	display: flex;
	gap: 1.25rem;
	margin-block-end: 0;
	padding-block-end: 0.5rem;
	/* Twenty years do not fit on one line at most widths, so the rail scrolls
	   and the script keeps the selected year in view. */
	overflow-x: auto;
	scrollbar-width: none;
	border-block-end: 2px solid var(--fg);
}

/*
 * The scrollbar is hidden, so an edge fades out instead — otherwise nothing
 * says the rail continues past that edge. Which edges fade is set by the
 * script from the scroll position: a fade that was always on washed out the
 * first and last years even once there was nothing left to scroll to.
 */
.timeline__rail[data-overflow="end"] {
	mask-image: linear-gradient(to right, #000 calc(100% - var(--rail-fade)), transparent 100%);
}

.timeline__rail[data-overflow="start"] {
	mask-image: linear-gradient(to left, #000 calc(100% - var(--rail-fade)), transparent 100%);
}

.timeline__rail[data-overflow="both"] {
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--rail-fade),
		#000 calc(100% - var(--rail-fade)),
		transparent 100%
	);
}

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

.timeline__year-btn {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fg-muted);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: color var(--transition);
}

.timeline__year-btn:hover {
	color: var(--brand);
}

.timeline__year-label {
	padding: 0.4rem 1rem;
	border-radius: var(--radius-pill);
	transition: background var(--transition), color var(--transition);
}

.timeline__year-btn.is-current .timeline__year-label {
	color: #fff;
	background: var(--brand);
}

/* The tick sits on the rule, marking the year's place along the line. */
.timeline__tick {
	width: 2px;
	height: 0.75rem;
	background: currentcolor;
	opacity: 0.55;
}

.timeline__year-btn.is-current .timeline__tick {
	opacity: 1;
	background: var(--brand);
}

@media (prefers-reduced-motion: reduce) {
	.timeline__year-btn,
	.timeline__year-label {
		transition: none;
	}
}

/* Interactive mode: the rail replaces the per-row year and marker, and only
   the selected year's card is shown. */
/* The vertical timeline is capped to a reading width and centred; with the
   rail above it that left the card floating out of line with the years, so in
   this mode the list spans the rail and the card keeps its own measure. */
.timeline-wrap.is-interactive .timeline {
	max-width: none;
	margin-block-start: 2.5rem;
	margin-inline: 0;
}

.timeline-wrap.is-interactive .timeline__card {
	max-width: 46rem;
}

.timeline-wrap.is-interactive .timeline__row {
	display: block;
	padding: 0;
}

.timeline-wrap.is-interactive .timeline__row + .timeline__row {
	margin-block-start: 0;
}

.timeline-wrap.is-interactive .timeline__year,
.timeline-wrap.is-interactive .timeline__marker {
	display: none;
}

.timeline-wrap.is-interactive .timeline__row[hidden] {
	display: none;
}

.timeline {
	/* Vertical offset of the marker dot from the top of its row. The connector
	   line and the year label are both aligned to it. */
	--tl-dot: 1.75rem;

	max-width: 60rem;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.timeline__row {
	display: grid;
	grid-template-columns: minmax(3.5rem, 5rem) 2.5rem 1fr;
	align-items: start;
}

.timeline__row + .timeline__row {
	margin-block-start: 0.75rem;
}

.timeline__year {
	padding-block-start: calc(var(--tl-dot) - 0.85em);
	color: var(--brand);
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	text-align: end;
}

/* The marker column stretches to the full row height so its connector can be
   drawn edge to edge; the dot is placed on top of it. */
.timeline__marker {
	position: relative;
	align-self: stretch;
}

.timeline__marker::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	width: 2px;
	margin-inline-start: -1px;
	background: rgb(18 93 144 / 30%);
}

.timeline__marker::after {
	content: "";
	position: absolute;
	inset-block-start: var(--tl-dot);
	inset-inline-start: 50%;
	width: 14px;
	height: 14px;
	background: var(--brand);
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--base), 0 0 0 6px rgb(18 93 144 / 30%);
	transform: translate(-50%, -50%);
}

/* The connector starts and stops at the outermost dots rather than running
   past them into empty space. */
.timeline__row:first-child .timeline__marker::before {
	inset-block-start: var(--tl-dot);
}

.timeline__row:last-child .timeline__marker::before {
	inset-block-end: auto;
	height: var(--tl-dot);
}

.timeline__row:first-child:last-child .timeline__marker::before {
	display: none;
}

.timeline__card {
	padding: 1.25rem 1.5rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.timeline__event + .timeline__event {
	margin-block-start: 1rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--line);
}

/* A milestone is body copy, not a headline — the year is the heading here. */
.timeline__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
}

.timeline__text {
	margin-block-start: 0.5rem;
	color: var(--fg-muted);
	font-size: 0.9375rem;
}

.timeline__text > :last-child {
	margin-block-end: 0;
}

.timeline__empty {
	color: var(--fg-muted);
	text-align: center;
}

@media (max-width: 639px) {
	.timeline__row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.timeline__row + .timeline__row {
		margin-block-start: 1.75rem;
	}

	.timeline__marker {
		display: none;
	}

	.timeline__year {
		padding-block-start: 0;
		text-align: start;
	}
}

/* Who We Are — mission ---------------------------------------------------- */

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

@media (min-width: 768px) {
	.mission {
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem;
	}
}

/* Audience cards are 10-14 word labels, so they stay compact. */
.audience-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.value-card,
.audience-card {
	padding: 1.75rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.value-card__icon,
.audience-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-block-end: 1.25rem;
	color: var(--brand);
	background: rgb(18 93 144 / 10%);
	border-radius: var(--radius);
}

.value-card__title,
.audience-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
}

.value-card__text,
.audience-card__text {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.9375rem;
}

/* Who We Are — founder's word --------------------------------------------- */

.founder {
	max-width: 56rem;
	margin: 0 auto;
	padding: 2.5rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.founder__mark {
	display: block;
	margin-block-end: 0.75rem;
	color: var(--brand);
	opacity: 0.35;
}

.founder__quote {
	margin: 0;
	font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
	line-height: 1.6;
}

.founder__quote p {
	margin: 0;
}

.founder__attribution {
	display: flex;
	flex-direction: column;
	margin-block-start: 1.5rem;
}

.founder__name {
	font-weight: 700;
}

.founder__role {
	color: var(--fg-muted);
	font-size: 0.9375rem;
}

.founder__portrait img {
	display: block;
	width: 100%;
	border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
	.founder--with-portrait {
		display: grid;
		gap: 2.5rem;
		grid-template-columns: 15rem 1fr;
		align-items: center;
	}
}

/* Who We Are — global network --------------------------------------------- */

/* The heading and intro, then the map beneath them at full width. */
.network__intro {
	max-width: 46rem;
	margin-block-end: 2.5rem;
}

.network__title {
	margin: 0 0 1rem;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}

.network__text {
	margin: 0;
	color: var(--fg-muted);
	font-size: 1.0625rem;
}

/* Global network map ------------------------------------------------------ */

.global-map {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 900px) {
	.global-map {
		grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr);
		gap: 0;
	}

	/* The rule between map and people, as on the previous site. */
	.global-map__people {
		align-self: stretch;
		padding-inline-start: 2.5rem;
		border-inline-start: 1px solid var(--line);
	}
}

.global-map__svg {
	display: block;
	width: 100%;
	height: auto;
}

.global-map__land path {
	fill: #d3d8de;
	stroke: #c3c9d0;
	stroke-width: 1;
}

.global-map__dots path {
	fill: #bcc3cb;
}

/*
 * A region's shapes are its hover target even while transparent — that is
 * what makes pointing at a continent work. The label is drawn over other
 * regions, so it ignores the pointer, or an invisible label could take a hover
 * meant for the region beneath it.
 */
.global-map__region {
	cursor: pointer;
	outline: none;
}

/* A lighter, brighter blue than the brand's, as on the previous site's map:
   the brand blue at partial strength over the grey land turned muddy. It is
   the redesign kit's "blue-lift", so it carries over when that design lands. */
.global-map__area path {
	fill: rgb(28 120 192 / 50%);
	stroke: #1c78c0;
	stroke-width: 1.5;
}

.global-map__area,
.global-map__label {
	opacity: 0;
	transition: opacity 200ms ease;
}

.global-map__label {
	pointer-events: none;
}

.global-map__label rect {
	fill: var(--brand);
}

.global-map__label text {
	fill: #fff;
	font: 500 15px Inter, system-ui, sans-serif;
}

.global-map__region.is-active .global-map__area,
.global-map__region.is-active .global-map__label {
	opacity: 1;
}

/* Keyboard focus already shows the region's people; mark the region too. */
.global-map__region:focus-visible .global-map__area path {
	stroke-width: 3;
}

.global-map__pin-ring {
	fill: none;
	stroke: #1c78c0;
	stroke-width: 1.5;
}

.global-map__pin-core {
	fill: #fff;
}

.global-map__pin-dot {
	fill: var(--brand-dark);
}

/* The people ------------------------------------------------------------- */

.global-map__region-name {
	margin: 0 0 1.25rem;
	color: var(--brand-dark);
	font-size: 1.25rem;
}

.global-map__list {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.global-map__person {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.global-map__photo {
	flex: none;
	width: 72px;
	height: 90px;
	object-fit: cover;
	/* Headshots frame the face high in the crop. */
	object-position: center top;
	border-radius: var(--radius);
	background: var(--surface);
}

/* No photo: the person's initials hold the same place. */
.global-map__photo--initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--brand);
	font-size: 1.25rem;
	font-weight: 700;
	background: rgb(18 93 144 / 8%);
}

.global-map__name {
	margin: 0;
	color: var(--brand);
	font-size: 1.0625rem;
	font-weight: 600;
}

.global-map__role {
	margin: 0.25rem 0 0;
	color: var(--fg-muted);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.global-map__none {
	margin: 0;
	color: var(--fg-muted);
}

@media (prefers-reduced-motion: reduce) {
	.global-map__area,
	.global-map__label {
		transition: none;
	}
}

/* Who We Are — company photo ---------------------------------------------- */

/* -------------------------------------------------------------------------
 * Team directory
 * ---------------------------------------------------------------------- */

/* Two across: lead bios run 80-160 words, and at three across the measure
   drops under 40 characters. Two gives roughly 65. */
.team-grid--lead {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 820px) {
	.team-grid--lead {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Compact profiles carry no bio, so they stay narrow. auto-fill (not auto-fit)
   keeps a lone card at one column's width instead of stretching it. */
.team-grid--staff {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	margin-block-start: 1.75rem;
}

.team-card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.team-card__head {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	margin-block-end: 1.25rem;
}

.team-card__photo {
	flex: 0 0 auto;
	width: 128px;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--surface);
}

.team-card__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* Headshots frame the face high in the crop. */
	object-position: center top;
}

.team-card__identity {
	min-width: 0;
}

.team-card__name {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.team-card__role {
	margin: 0.25rem 0 0;
	color: var(--fg-muted);
	font-size: 0.875rem;
}

.team-card__bio {
	margin-block-end: 1.25rem;
	color: var(--fg-muted);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.team-card__bio p {
	margin: 0 0 0.75rem;
}

.team-card__bio p:last-child {
	margin-block-end: 0;
}

/* Pushed to the card foot so the fact rows line up across a row of cards. */
.team-card__facts {
	display: grid;
	gap: 0.75rem 1.5rem;
	margin-block-start: auto;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--line);
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

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

.team-fact__value {
	display: block;
	margin-block-start: 0.125rem;
	color: var(--fg);
	font-size: 0.875rem;
	text-decoration: none;
}

a.team-fact__value:hover {
	color: var(--brand);
}

.team-card__linkedin {
	display: inline-flex;
	align-items: center;
	margin-block-start: 0.625rem;
	color: var(--brand);
}

.team-card__linkedin:hover {
	color: var(--accent);
}

/* Compact cards put the photo beside a single text column, so the shared
   `__facts` rules are narrowed rather than duplicated. */
.team-card--compact {
	flex-direction: row;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem;
}

.team-card--compact .team-card__photo {
	width: 92px;
}

.team-card--compact .team-card__name {
	font-size: 0.9375rem;
}

.team-card--compact .team-card__facts {
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin-block-start: 0.75rem;
	padding-block-start: 0.75rem;
}

.team__empty {
	color: var(--fg-muted);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Careers
 * ---------------------------------------------------------------------- */

.container--narrow {
	max-width: 46rem;
}

/* Careers landing ---------------------------------------------------------- */

.careers-hero__inner {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 900px) {
	.careers-hero--split .careers-hero__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	}
}

/* The hero heading already sits at the top of the page, so it needs no extra
   space below it when the copy is the only column. */
.careers-hero .section-header {
	margin-block-end: 0;
}

.careers-hero__media {
	margin: 0;
}

.careers-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.careers-cards {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.careers-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 2rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.careers-card__icon,
.pillar__icon,
.jobs-panel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	color: #fff;
	background: var(--brand);
	border-radius: var(--radius-pill);
}

.careers-card__title {
	margin: 1.25rem 0 0;
	font-size: 1.25rem;
}

.careers-card__desc {
	margin: 0.625rem 0 1.5rem;
	color: var(--fg-muted);
}

/* The button sits on the card floor so a row of cards lines up. */
.careers-card .button {
	margin-block-start: auto;
}

/* Culture pillars ---------------------------------------------------------- */

/* Tighter than a standard section: the design reads these as compact bands
   rather than full-height sections. */
.pillar {
	padding-block: 3.5rem;
}

.pillar__inner {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 900px) {
	.pillar__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

.pillar__lead {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.pillar__title {
	margin: 0;
	color: var(--brand);
	font-size: 1.5rem;
}

.pillar__desc {
	margin-block-start: 0.75rem;
	color: var(--fg-muted);
}

.pillar__desc p {
	margin: 0 0 0.5rem;
}

.pillar__desc p:last-child {
	margin-block-end: 0;
}

.pillar__features {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
	.pillar__features {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.pillar__feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding-inline: 1rem;
	color: var(--brand);
	text-align: center;
}

/* Hairline separators between the highlights, as in the design. The first in
   each row goes without, so no rule ever hangs at the left edge. */
.pillar__feature + .pillar__feature {
	border-inline-start: 1px solid var(--line);
}

@media (min-width: 700px) {
	.pillar__feature:nth-child(4n + 1) {
		border-inline-start: 0;
	}
}

@media (max-width: 699px) {
	.pillar__feature:nth-child(odd) {
		border-inline-start: 0;
	}
}

.pillar__feature span {
	color: var(--fg);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Life photo strip --------------------------------------------------------- */

/* Without a heading of its own the strip needs less room above the images than
   a full section would give it. */
.life-gallery-section {
	padding-block: 3.5rem 4rem;
}

.life-gallery__heading {
	margin: 0 0 2rem;
	color: var(--brand);
	font-size: 1.75rem;
	text-align: center;
}

.life-gallery {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.life-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
}

.life-gallery__caption {
	margin: 2rem 0 0;
	color: var(--fg-muted);
	text-align: center;
}

/* Open positions ----------------------------------------------------------- */

.jobs-panel {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 2rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.jobs-panel__copy {
	flex: 1 1 16rem;
}

.jobs-panel__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.jobs-panel__copy p {
	margin: 0;
	color: var(--fg-muted);
}

.apply__title {
	margin: 0 0 0.75rem;
	font-size: 1.75rem;
}

.apply__intro {
	margin: 0 0 2rem;
	color: var(--fg-muted);
}

.apply__notice {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-inline-start: 4px solid;
	border-radius: var(--radius);
}

.apply__notice--success {
	color: #11603a;
	background: #e8f6ee;
	border-color: #1a8a55;
}

.apply__notice--error {
	color: #8a1f1f;
	background: #fdecec;
	border-color: #c53030;
}

.apply-form {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
	.apply-form {
		grid-template-columns: minmax(0, 1fr);
	}
}

.apply-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin: 0;
}

.apply-form__row--wide,
.apply-form__consent,
.apply-form__actions {
	grid-column: 1 / -1;
}

.apply-form label {
	font-size: 0.875rem;
	font-weight: 600;
}

.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="tel"],
.apply-form input[type="file"],
.apply-form textarea {
	width: 100%;
	padding: 0.75rem 0.875rem;
	color: var(--fg);
	font: inherit;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.apply-form input:focus-visible,
.apply-form textarea:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 1px;
}

.apply-form__hint,
.apply-form__consent {
	color: var(--fg-muted);
	font-size: 0.8125rem;
}

.apply-form__consent {
	margin: 0;
}

.apply-form__actions {
	margin: 0;
}

/* The honeypot must be reachable by a bot parsing the markup but never seen or
   focused by a person, so it is moved off-screen rather than display:none. */
.apply-form__trap {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * News & Events
 * ---------------------------------------------------------------------- */

/* Both bands sit under the page heading and read as one continuous page, so
   they carry far less padding than a standalone section would. */
.events-section {
	padding-block: 1.5rem 3rem;
}

.news-section {
	padding-block: 2rem 5rem;
}

/* A section title with a right-aligned note and a rule beneath, as the
   reference layout uses for both "Upcoming Events" and "Latest News". */
.section-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-block-end: 1.25rem;
	margin-block-end: 2rem;
	border-block-end: 1px solid var(--line);
}

.section-bar__title {
	margin: 0;
	font-size: 1.75rem;
}

.section-bar__meta {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* The heading is the whole of this band, so it needs no trailing gap of its
   own on top of the section's padding. */
.events__intro,
.news__intro {
	max-width: 46rem;
	margin: -0.75rem 0 2rem;
	color: var(--fg-muted);
}

.events__empty {
	max-width: 46rem;
	color: var(--fg-muted);
}

/* Calendar ----------------------------------------------------------------- */

.events-layout {
	display: grid;
	gap: 1.75rem;
	align-items: start;
}

@media (min-width: 900px) {
	.events-layout {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

.calendar {
	padding: 1.75rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.calendar__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1.25rem;
}

.calendar__month {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
}

.calendar__nav {
	display: flex;
	gap: 0.5rem;
}

.calendar__step {
	width: 2.25rem;
	height: 2.25rem;
	color: var(--fg);
	font: inherit;
	font-size: 1.125rem;
	line-height: 1;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	transition: color var(--transition), border-color var(--transition);
}

.calendar__step:hover {
	color: var(--brand);
	border-color: var(--brand);
}

.calendar__grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.calendar__grid th {
	padding-block-end: 0.75rem;
	color: var(--fg-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.calendar__grid th abbr {
	text-decoration: none;
}

.calendar__grid td {
	padding: 0.1875rem;
	text-align: center;
}

.calendar__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1875rem;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	color: var(--fg-muted);
	font: inherit;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	background: none;
	border: 0;
	border-radius: var(--radius);
}

/* A day carrying an event is a button; the rest are inert text. */
.calendar__day--event {
	color: var(--fg);
	font-weight: 600;
	cursor: pointer;
	transition: color var(--transition), background var(--transition);
}

.calendar__day--event:hover {
	color: var(--brand);
	background: var(--surface);
}

.calendar__day--event.is-selected {
	color: #fff;
	background: var(--brand-dark);
}

.calendar__legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin: 1.25rem 0 0;
	padding: 1.25rem 0 0;
	border-block-start: 1px solid var(--line);
	color: var(--fg-muted);
	font-size: 0.875rem;
	list-style: none;
}

.calendar__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* The dots sit under the date, so they are laid out in a row of their own
   rather than beside the number. */
.calendar__dots {
	display: flex;
	justify-content: center;
	gap: 3px;
	min-height: 5px;
}

/* The dot marks a day that carries an event, so it has to stay legible both on
   the plain cell and on the navy tile of the selected day. */
.calendar__dot {
	flex: 0 0 auto;
	width: 5px;
	height: 5px;
	border-radius: var(--radius-pill);
	background: var(--brand);
}

/*
 * Event-type colours. Darker than a plain hue would be: these are 5px dots on
 * white, where a light red reads as pink and stops carrying meaning. Each one
 * clears 3:1 against the page so the colour itself is the signal.
 */
.calendar__dot--blue {
	background: #125d90;
}

.calendar__dot--red {
	background: #c7352b;
}

.calendar__dot--amber {
	background: #b7791f;
}

.calendar__dot--green {
	background: #2f855a;
}

.calendar__dot--violet {
	background: #6b46c1;
}

/*
 * On the selected day the tile turns navy, and a navy or violet dot would
 * disappear into it. Colour is never the only cue — the event panel beside the
 * calendar names the type in full — so the dots go white rather than fighting
 * the tile for contrast.
 */
.calendar__day--event.is-selected .calendar__dot {
	background: #fff;
}

/* Office status notice ----------------------------------------------------- */

/*
 * A card on the events band's grey, matching the calendar and event cards
 * beside it. The accent is carried by the icon's tinted disc rather than a
 * slab of colour down one edge, which fought the cards it sits above.
 */
.office-status {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--base);
	box-shadow: var(--shadow-card);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.office-status__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-pill);
}

/* Closed is the one state worth a strong colour: it is the only one that
   changes what a visitor should do today. */
.office-status--closed .office-status__icon {
	color: #c7352b;
	background: rgb(199 53 43 / 10%);
}

.office-status--upcoming .office-status__icon {
	color: #b7791f;
	background: rgb(183 121 31 / 12%);
}

.office-status--open .office-status__icon {
	color: #2f855a;
	background: rgb(47 133 90 / 12%);
}

/* The name of the holiday is the part worth reading twice. */
.office-status strong {
	font-weight: 600;
}

@media (max-width: 560px) {
	.office-status {
		align-items: flex-start;
		padding: 0.875rem 1rem;
	}
}

/* Featured event ----------------------------------------------------------- */

.event-panel {
	display: flex;
	overflow: hidden;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.event-panel[hidden] {
	display: none;
}

/* The dark rail carries the dates, which frees the card body to stay white and
   keeps the event's "when" readable at a glance beside the calendar. */
.event-panel__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 6.5rem;
	gap: 0.125rem;
	margin: 0;
	padding: 2rem 1rem;
	color: #fff;
	line-height: 1.1;
	text-align: center;
	background: var(--brand-dark);
}

.event-panel__rail-month {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.75;
}

.event-panel__rail-day {
	font-size: 2.5rem;
	font-weight: 700;
}

.event-panel__rail-end {
	font-size: 1.0625rem;
	font-weight: 600;
	opacity: 0.75;
}

.event-panel__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 2rem 2.25rem;
}

.event-panel__badge {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.3125rem 0.75rem;
	color: var(--brand);
	background: rgb(18 93 144 / 8%);
	border-radius: var(--radius);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.event-panel__name {
	margin: 0;
	font-size: 1.75rem;
	line-height: 1.25;
	color: var(--fg);
}

.event-panel__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0.75rem 0 0;
	color: var(--brand);
	font-size: 0.9375rem;
	font-weight: 500;
}

.event-panel__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
}

.event-panel__summary {
	margin-block-start: 1.125rem;
	color: var(--fg-muted);
	line-height: 1.7;
}

.event-panel__summary p {
	margin: 0 0 0.75rem;
}

.event-panel__summary p:last-child {
	margin-block-end: 0;
}

.event-panel__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: 1.5rem;
	color: var(--brand);
	font-weight: 600;
	text-decoration: none;
}

.event-panel__link:hover {
	color: var(--brand-dark);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

@media (max-width: 40em) {
	.event-panel {
		flex-direction: column;
	}

	.event-panel__rail {
		flex-direction: row;
		align-items: baseline;
		gap: 0.5rem;
		flex-basis: auto;
		padding: 1rem 1.5rem;
	}

	.event-panel__rail-day {
		font-size: 1.5rem;
	}

	.event-panel__body {
		padding: 1.75rem 1.5rem;
	}
}

/* News tabs ---------------------------------------------------------------- */

/* A segmented pill control that sits beside the section heading, so switching
   between Company and Industry news reads as a filter rather than as a second
   level of page navigation. */
.news-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	padding: 0.25rem;
	background: var(--muted);
	border-radius: var(--radius-pill);
}

.news-tabs__tab {
	padding: 0.5625rem 1.25rem;
	color: var(--fg-muted);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	background: none;
	border: 0;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: color var(--transition), background-color var(--transition);
}

.news-tabs__tab:hover {
	color: var(--fg);
}

.news-tabs__tab.is-active {
	color: #fff;
	background: var(--brand-dark);
}

.news-panel[hidden] {
	display: none;
}

.news-panel__empty {
	max-width: 46rem;
	color: var(--fg-muted);
}

:is(.news-section, .related-news) .news-grid {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

:is(.news-section, .related-news) .news-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

:is(.news-section, .related-news) .news-card[hidden] {
	display: none;
}

:is(.news-section, .related-news) .news-card__media {
	display: block;
	background: var(--surface);
}

:is(.news-section, .related-news) .news-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

:is(.news-section, .related-news) .news-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	color: var(--line);
}

:is(.news-section, .related-news) .news-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem;
}

:is(.news-section, .related-news) .news-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 0.75rem;
	color: var(--fg-muted);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

:is(.news-section, .related-news) .news-card__section {
	color: var(--brand);
	font-weight: 700;
}

/* A hairline divider between the section and the date, as in the reference. */
:is(.news-section, .related-news) .news-card__section::after {
	content: '';
	display: inline-block;
	width: 1px;
	height: 0.75em;
	margin-inline-start: 0.625rem;
	vertical-align: -0.05em;
	background: var(--line);
}

:is(.news-section, .related-news) .news-card__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.4;
}

:is(.news-section, .related-news) .news-card__title a {
	color: var(--fg);
	text-decoration: none;
}

:is(.news-section, .related-news) .news-card__title a:hover {
	color: var(--brand);
}

:is(.news-section, .related-news) .news-card__excerpt {
	margin: 0.625rem 0 1.25rem;
	color: var(--fg-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* Pinned to the card floor so the links align across a row. */
:is(.news-section, .related-news) .news-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: auto;
	align-self: flex-start;
	color: var(--fg);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

:is(.news-section, .related-news) .news-card__more:hover {
	color: var(--brand);
}

.news-more {
	margin: 2.5rem 0 0;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Contact
 * ---------------------------------------------------------------------- */

/* The heading is the whole of its band, so it carries no trailing gap of its
   own on top of the section padding. */
.contact-header .section-header {
	margin-block-end: 0;
}

/* Sits directly under the masthead, so it opens with a full section gap. */
.contact-section {
	padding-block: 4rem 5rem;
}

.contact-layout {
	display: grid;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 900px) {
	.contact-layout {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	}
}

.contact-details {
	display: grid;
	gap: 1.25rem;
}

.contact-detail {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.5rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.contact-detail__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	color: var(--brand);
	/* A tint of the brand rather than a solid fill, as the reference shows. */
	background: rgb(18 93 144 / 10%);
	border-radius: var(--radius-pill);
}

.contact-detail__title {
	margin: 0;
	color: var(--brand-dark);
	font-size: 1.0625rem;
}

.contact-detail__text {
	margin: 0.375rem 0 0;
	color: var(--fg-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.contact-detail__email {
	display: inline-block;
	color: var(--brand);
	font-weight: 600;
	word-break: break-word;
}

/* Browsers set <address> in italics; here it is plain copy like its neighbours. */
address.contact-detail__text {
	font-style: normal;
}

/* Phone and fax each on a row of their own, under the address. */
.contact-detail__numbers span {
	display: block;
}

.contact-detail__note {
	font-size: 0.875rem;
}

.contact-form-panel {
	padding: 2.25rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.contact-form-panel__title {
	margin: 0;
	color: var(--brand-dark);
	font-size: 1.5rem;
}

/* The short rule under the heading, as in the reference layout. */
.contact-form-panel__title::after {
	content: '';
	display: block;
	width: 2.75rem;
	height: 3px;
	margin-block-start: 0.875rem;
	background: var(--brand);
}

.contact-form-panel__intro {
	margin: 1.25rem 0 1.75rem;
	color: var(--fg-muted);
}

.contact-form {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
	.contact-form {
		grid-template-columns: minmax(0, 1fr);
	}
}

.contact-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.4375rem;
	margin: 0;
}

.contact-form__row--wide,
.contact-form__consent,
.contact-form__actions {
	grid-column: 1 / -1;
}

.contact-form label {
	font-size: 0.9375rem;
	font-weight: 600;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	width: 100%;
	padding: 0.75rem 0.875rem;
	color: var(--fg);
	font: inherit;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: var(--fg-muted);
	opacity: 0.75;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 1px;
}

.contact-form__consent {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.8125rem;
}

.contact-form__actions {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Founder & Mentor
 * ---------------------------------------------------------------------- */

/* These pages open with a heading band of their own, so it carries no trailing
   gap on top of the following section's padding. */
.founder-profile-section .section-header,
.partner-page-section .section-header {
	margin-block-end: 0;
}

.founder-profile-section {
	padding-block: 4rem 3.5rem;
}

.founder-profile {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 820px) {
	.founder-profile--with-portrait {
		grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	}
}

.founder-profile__portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.founder-profile__name {
	margin: 0;
	font-size: 1.75rem;
}

.founder-profile__role {
	margin: 0.375rem 0 0;
	color: var(--brand);
	font-weight: 600;
}

.founder-profile__bio {
	margin-block-start: 1.25rem;
	color: var(--fg-muted);
	line-height: 1.75;
	/* Long-form prose, so the measure is capped rather than filling the grid. */
	max-width: 42rem;
}

.founder-profile__bio p {
	margin: 0 0 1rem;
}

.founder-profile__bio p:last-child {
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------
 * Our Partners
 * ---------------------------------------------------------------------- */

.partner-page-section {
	padding-block: 4rem 5rem;
}

.partner-list {
	display: grid;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.partner-row {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 1.75rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

@media (max-width: 640px) {
	.partner-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
}

/* A fixed box so logos of different proportions line up down the page. */
.partner-row__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 11rem;
	height: 5.5rem;
	padding: 0.75rem;
	background: var(--surface);
	border-radius: var(--radius);
}

.partner-row__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.partner-row__wordmark {
	color: var(--brand-dark);
	font-size: 0.9375rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
}

.partner-row__body {
	min-width: 0;
}

.partner-row__name {
	margin: 0;
	font-size: 1.1875rem;
}

.partner-row__intro {
	margin: 0.5rem 0 0;
	color: var(--fg-muted);
	line-height: 1.65;
	max-width: 46rem;
}

.partner-row__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-block-start: 0.75rem;
	color: var(--brand);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.partner-row__link:hover {
	color: var(--accent);
}

.partner-list__empty {
	color: var(--fg-muted);
}

/* -------------------------------------------------------------------------
 * Products within a category
 * ---------------------------------------------------------------------- */

.product-items {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 60rem;
	margin-inline: auto;
}

.product-item__link {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1rem 1.25rem;
	color: var(--fg);
	text-decoration: none;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.product-item__link:hover {
	color: var(--fg);
	border-color: var(--brand);
	box-shadow: var(--shadow-card);
}

.product-item__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
}

.product-item__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.product-item__body {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
	flex: 1;
	min-width: 0;
}

.product-item__name {
	font-weight: 600;
}

.product-item__regions {
	color: var(--fg-muted);
	font-size: 0.8125rem;
}

.product-item__status {
	flex: 0 0 auto;
	padding: 0.25rem 0.75rem;
	color: var(--fg-muted);
	background: var(--surface);
	border-radius: var(--radius-pill);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Stock states worth spotting at a glance; anything else keeps the neutral
   treatment above. */
.product-item__status--weekly,
.product-item__status--available,
.product-item__status--monthly {
	color: #11603a;
	background: #e8f6ee;
}

@media (max-width: 560px) {
	.product-item__link {
		flex-wrap: wrap;
		gap: 0.75rem 1rem;
	}
}

/* These used to sit under a centred header; they now open a left-aligned page,
   so they run along the top of the content instead. */
.product-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	margin-block-start: 0;
}

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

.product-fact__value {
	display: block;
	margin-block-start: 0.25rem;
	font-size: 0.9375rem;
}

/* Product specifications ---------------------------------------------------- */

.entry-content--product {
	max-width: 46rem;
	margin-inline: auto;
}

.product-specs__heading {
	max-width: 46rem;
	margin: 0 auto 1.25rem;
	font-size: 1.25rem;
}

.product-specs {
	display: grid;
	gap: 0;
	max-width: 46rem;
	margin: 0 auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.product-spec {
	display: grid;
	gap: 0.25rem 1.5rem;
	padding: 0.875rem 1.25rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
	.product-spec {
		grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
		align-items: baseline;
	}
}

/* Zebra striping rather than rules, so a long spec value stays easy to track
   back to its label. */
.product-spec:nth-child(odd) {
	background: var(--surface);
}

.product-spec dt {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.product-spec dd {
	margin: 0;
	font-size: 0.9375rem;
}

.product-specs__note {
	max-width: 46rem;
	margin: 1rem auto 0;
	color: var(--fg-muted);
	font-size: 0.875rem;
	font-style: italic;
}

/* -------------------------------------------------------------------------
 * Supporting Orbiton
 * ---------------------------------------------------------------------- */

.orbiton-section {
	padding-block: 4rem;
	background: var(--surface);
}

.orbiton {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 820px) {
	.orbiton--with-logo {
		grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	}
}

.orbiton__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

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

.orbiton__title {
	margin: 0.5rem 0 0;
	font-size: 1.75rem;
	line-height: 1.25;
}

.orbiton__text {
	margin-block-start: 1rem;
	color: var(--fg-muted);
	line-height: 1.75;
	/* Two paragraphs of prose, so the measure is capped rather than running the
	   full container width. */
	max-width: 44rem;
}

.orbiton__text p {
	margin: 0 0 0.875rem;
}

.orbiton__text p:last-child {
	margin-block-end: 0;
}

.orbiton__body .button {
	margin-block-start: 1.5rem;
}

/* Communities -------------------------------------------------------------- */

/* Shares the partners tile treatment; only the ground differs, so the two
   bands stacked on the homepage do not merge into one. */
.communities-section {
	padding-block-start: 2.5rem;
}

/* -------------------------------------------------------------------------
 * Section leads
 * ---------------------------------------------------------------------- */

/* A band holding nothing but a section header. Its own bottom padding, the
   header's 3rem margin and the following section's top padding stacked into
   roughly ten rems of empty space — most visible on the Careers page, where
   two of these sit between the hero and the content. */
.section-lead {
	/* A little room below so the next band's background does not start hard
	   against the last line of the intro. */
	padding-block: 3.5rem 1.75rem;
}

.section-lead .section-header {
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------
 * Careers page
 * ---------------------------------------------------------------------- */

/* Both halves of the page open with a lead; give each a little more room above
   than a mid-page section so the two read as distinct chapters. */
.page-template-template-careers .section-lead {
	padding-block-start: 4.5rem;
}

/* Company Overview — Principles / Values ----------------------------------- */

/* Sits higher in its band than a standard section would: the label introduces
   everything below it, so it should meet the eye near the top. */
.wwa-principles {
	padding-block-start: 3.25rem;
}

/* Promoted from a small eyebrow to a section label in its own right. Kept
   uppercase and in the brand teal so it still reads as the same element, but
   with the tracking eased off — 0.14em is far too loose at this size. */
/* -------------------------------------------------------------------------
 * Open Positions — the LinkedIn link, ahead of the expandable panel
 * ---------------------------------------------------------------------- */

/* Tight to the panel below: the two read as one block about joining, not as
   two sections that happen to follow each other. */
.open-positions-section {
	padding-block: 3.5rem 2rem;
}

.open-positions__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.open-positions__intro {
	max-width: 46rem;
	margin: 0 0 1.75rem;
	color: var(--fg-muted);
}

/* -------------------------------------------------------------------------
 * Job openings — the list and a single role
 * ---------------------------------------------------------------------- */

.job-list {
	display: grid;
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.job-card {
	padding: 1.75rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.job-card:hover,
.job-card:focus-within {
	border-color: var(--brand);
	box-shadow: var(--shadow-lift);
}

.job-card__title {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
}

.job-card__title a {
	color: inherit;
	text-decoration: none;
}

.job-card__title a:hover,
.job-card__title a:focus-visible {
	color: var(--brand);
}

/* Shared by the card and the single-role header, which differ only in colour. */
.job-card__meta,
.job-head__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.job-card__tag,
.job-head__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.job-card__tag {
	color: var(--fg-muted);
}

.job-card__excerpt {
	margin: 0 0 1.25rem;
	color: var(--fg-muted);
}

.job-card__actions,
.job-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
}

.job-card__closes {
	color: var(--fg-muted);
	font-size: 0.875rem;
}

/* Single role ------------------------------------------------------------- */

.job-head__meta {
	margin-block: 1rem 1.25rem;
	color: rgb(255 255 255 / 80%);
}

.job-head__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-block-start: 1.75rem;
}

.job-head__closes {
	color: rgb(255 255 255 / 80%);
	font-size: 0.9375rem;
}

/* A closed role keeps its URL, so the page says so rather than showing an
   Apply button that leads nowhere. */
.job-closed {
	margin: 0 0 1.75rem;
	padding: 1rem 1.25rem;
	border-inline-start: 3px solid var(--brand);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--fg-muted);
}

.job-foot {
	margin-block-start: 2.5rem;
}

@media (max-width: 560px) {
	.job-card {
		padding: 1.25rem;
	}

	/* Side by side these wrap to two cramped columns at this width. */
	.job-card__actions .button,
	.job-foot .button {
		width: 100%;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
 * Current Openings — expandable panel
 * ---------------------------------------------------------------------- */

.openings-section {
	padding-block: 0 5rem;
}

/* No top padding on either when they pair up, so the gap between them is set
   once, by the section above. */
.open-positions-section + .openings-section {
	padding-block-start: 0;
}

.openings {
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.openings__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem 2rem;
	cursor: pointer;
	/* Suppress the native disclosure triangle; the chevron replaces it. */
	list-style: none;
}

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

.openings__summary:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: -2px;
	border-radius: var(--radius-lg);
}

.openings__title {
	margin: 0;
	font-size: clamp(1.25rem, 2.2vw, 1.625rem);
}

.openings__chevron {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--brand);
	transition: transform var(--transition);
}

.openings[open] .openings__chevron {
	transform: rotate(180deg);
}

.openings__body {
	padding: 0 2rem 2rem;
}

.openings__intro {
	max-width: 46rem;
	margin: 0 0 1.5rem;
	color: var(--fg-muted);
}

.openings-block + .openings-block {
	margin-block-start: 2rem;
}

.openings .apply__title {
	font-size: 1.25rem;
}

@media (max-width: 560px) {
	.openings__summary {
		padding: 1.25rem;
	}

	.openings__body {
		padding: 0 1.25rem 1.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Inner page headers
 * ---------------------------------------------------------------------- */

/* Internal pages all opened on flat white, which made them read as unfinished
   beside the homepage. A soft brand wash with a faint bloom behind the heading
   gives them a top edge without competing with the content below. */
.page-head {
	position: relative;
	background:
		radial-gradient(60rem 26rem at 18% -30%, rgb(18 93 144 / 13%), transparent 68%),
		linear-gradient(180deg, rgb(18 93 144 / 7%) 0%, rgb(18 93 144 / 0%) 100%);
	isolation: isolate;
}

/* A hairline where the wash meets the page, so the fade has a defined end. */
.page-head::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

.page-head > .container {
	position: relative;
	z-index: 1;
}

/* A page with no template of its own, e.g. Services and its children. */
.page-figure {
	margin: 0;
	max-width: var(--container);
}

.page-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.page-empty {
	color: var(--fg-muted);
	font-style: italic;
}

/* -------------------------------------------------------------------------
 * Dark page masthead
 *
 * Shared by News, a news article, the product catalogue, Careers and Contact,
 * so every inner page that opens on a banner opens on the same one. Each page
 * sets only its own padding; everything else lives here.
 * ---------------------------------------------------------------------- */

.hero-dark {
	position: relative;
	/* One band height for every inner page, matching the News page. */
	padding-block: 4.5rem 4rem;
	color: #fff;
	background: var(--brand-dark);
	isolation: isolate;
}

.hero-dark::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgb(255 255 255 / 5%) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(255 255 255 / 5%) 1px, transparent 1px);
	background-size: 72px 72px;
	/* Fades out to the right so the grid never competes with the heading. */
	mask-image: linear-gradient(105deg, transparent 30%, #000 100%);
}

.hero-dark > .container {
	position: relative;
	z-index: 1;
}

/* The shared section header renders on these bands too, so it has to invert. */
.hero-dark .section-header {
	margin-block-end: 0;
	text-align: left;
}

.hero-dark .section-header__eyebrow {
	color: #8fc4e8;
}

.hero-dark .section-header__title {
	color: #fff;
}

.hero-dark .section-header__intro {
	max-width: 52ch;
	margin-inline: 0;
	color: rgb(255 255 255 / 78%);
}

/* -------------------------------------------------------------------------
 * News & Events hero
 * ---------------------------------------------------------------------- */

/* A dark band rather than the light wash the other inner pages use: this page
   opens on the brand colour, with a faint grid to give the flat navy some
   texture without drawing attention. */
.news-hero .section-header {
	margin-block-end: 0;
	max-width: 44rem;
}

.news-hero .section-header__intro {
	color: rgb(255 255 255 / 78%);
}

/* -------------------------------------------------------------------------
 * News & Events page overrides
 * ---------------------------------------------------------------------- */

/* The events count reads as a quiet caption beside the heading, not as another
   letterspaced label competing with it. */
.events-section .section-bar {
	border-block-end: 0;
	padding-block-end: 0;
}

.events-section .section-bar__meta {
	font-size: 0.9375rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* The events band sits on grey so the white calendar and event cards read as
   cards rather than as more page. */
.news-events .events-section {
	background: var(--surface);
}

/* The heading row carries the tab control on the right, so it needs room to
   wrap on narrow screens rather than squeezing the title. */
.news-section .section-bar {
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
}

.news-section .section-bar .news-tabs {
	margin-inline-start: auto;
}

/* The design tints the card date and the read-more link in the brand blue, so
   each card carries a little colour without needing another accent. */
:is(.news-section, .related-news) .news-card__meta {
	color: var(--brand);
	font-weight: 600;
}

:is(.news-section, .related-news) .news-card__more {
	color: var(--brand);
}

:is(.news-section, .related-news) .news-card__more:hover {
	color: var(--brand-dark);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* -------------------------------------------------------------------------
 * Single news article
 * ---------------------------------------------------------------------- */

/* The masthead repeats the News page's dark band, and carries extra bottom
   padding so the article card can sit up into it. */
/* Deeper than the others only because the article card overlaps upward into
   it; the top edge still matches every other masthead. */
.article-head {
	padding-block-end: 8.5rem;
}

.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-block-end: 1.5rem;
	color: rgb(255 255 255 / 65%);
	font-size: 0.875rem;
}

.crumbs a {
	color: rgb(255 255 255 / 80%);
	text-decoration: none;
}

.crumbs a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.crumbs__sep {
	color: rgb(255 255 255 / 35%);
}

.article-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem 1rem;
	margin: 0 0 1rem;
}

.article-head__badge {
	padding: 0.3125rem 0.75rem;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: rgb(255 255 255 / 14%);
	border-radius: var(--radius);
}

.article-head__date {
	color: rgb(255 255 255 / 70%);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.article-head__title {
	max-width: 22ch;
	margin: 0;
	color: #fff;
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
	line-height: 1.12;
}

.article-head__standfirst {
	max-width: 52ch;
	margin: 1.25rem 0 0;
	color: rgb(255 255 255 / 78%);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* The card overlaps the band above it, so the page reads as one masthead
   rather than as a navy strip followed by a separate article. */
.article-body {
	padding-block: 0 4.5rem;
	background: var(--surface);
}

.article-card {
	position: relative;
	z-index: 1;
	margin-block-start: -6rem;
	overflow: hidden;
	background: var(--base);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lift);
}

/* Article images are whatever the newsroom had -- 16:9 banners, 4:3 photos and
   square posters -- so the slot caps their height and centres them on a tint
   rather than cropping. Most of them are logo artwork that a crop would cut
   into. */
.article-card__media {
	display: flex;
	justify-content: center;
	margin: 0;
	background: var(--surface);
	border-block-end: 1px solid var(--line);
}

.article-card__media img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 26rem;
}

.article-card__inner {
	padding: 3rem clamp(1.5rem, 4vw, 4rem);
}

/* The card runs the full width now that there is no sidebar, but the prose
   inside it stays at a readable measure. */
.article-prose {
	max-width: 68ch;
	margin-inline: auto;
}

.article-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	max-width: 68ch;
	margin: 2.5rem auto 0;
	padding-block-start: 1.75rem;
	border-block-start: 1px solid var(--line);
}

.article-share__label {
	margin-inline-end: 0.25rem;
	color: var(--fg-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.article-share__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.4375rem 0.875rem;
	color: var(--brand);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	background: var(--muted);
	border-radius: var(--radius);
	transition: color var(--transition), background var(--transition);
}

.article-share__link:hover {
	color: #fff;
	background: var(--brand);
}

/* Related strip ------------------------------------------------------------ */

.related-news {
	padding-block: 4.5rem 5.5rem;
	background: var(--surface);
	border-block-start: 1px solid var(--line);
}

.related-news__all {
	color: var(--brand);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.related-news__all:hover {
	color: var(--brand-dark);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

@media (max-width: 48em) {
	.article-head {
		padding-block: 2rem 6.5rem;
	}

	.article-card {
		margin-block-start: -4.5rem;
	}

	.article-card__inner {
		padding: 2rem 1.5rem;
	}
}

/* -------------------------------------------------------------------------
 * Product catalogue
 * ---------------------------------------------------------------------- */

/* The same dark masthead the News pages use, so the catalogue and the
   newsroom read as one site. */
.catalog-head__eyebrow {
	margin: 0 0 0.5rem;
	color: #8fc4e8;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.catalog-head__title {
	margin: 0;
	color: #fff;
	font-size: clamp(2.25rem, 1.4rem + 2.8vw, 3.5rem);
	line-height: 1.1;
}

.catalog-head__intro {
	max-width: 60ch;
	margin: 1rem 0 0;
	color: rgb(255 255 255 / 78%);
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* Filter bar --------------------------------------------------------------- */

.catalog-bar {
	padding-block: 1rem;
	background: var(--surface);
	border-block-end: 1px solid var(--line);
}

.catalog-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
}

.catalog-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.catalog-pill {
	padding: 0.5625rem 1.125rem;
	color: var(--fg-muted);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
	transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.catalog-pill:hover {
	color: var(--fg);
	border-color: var(--brand);
}

.catalog-pill.is-active {
	color: #fff;
	background: var(--brand-dark);
	border-color: var(--brand-dark);
}

.catalog-selects {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
}

.catalog-select {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.9375rem;
}

.catalog-select select {
	padding: 0.5rem 0.75rem;
	color: var(--fg);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
}

/* Product tiles ------------------------------------------------------------ */

.catalog-body {
	padding-block: 3rem 3.5rem;
}

.catalog-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.product-tile {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.product-tile[hidden] {
	display: none;
}

.product-tile:hover {
	border-color: rgb(18 93 144 / 35%);
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
}

.product-tile__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1.25rem;
}

/* The element symbol, set as a periodic-table tile. */
.product-tile__symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	color: #fff;
	font-size: 1.375rem;
	font-weight: 700;
	background: var(--brand-dark);
	border-radius: var(--radius);
}

/* Equipment carries no element, so the tile holds its category icon instead. */
.product-tile__symbol--icon {
	color: var(--brand);
	background: rgb(18 93 144 / 8%);
}

.product-tile__status {
	padding: 0.25rem 0.625rem;
	color: var(--fg-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	background: var(--muted);
	border-radius: var(--radius);
}

.product-tile__status--weekly,
.product-tile__status--available {
	color: #1c6b5a;
	background: rgb(47 157 155 / 14%);
}

.product-tile__name {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.35;
}

.product-tile__name a {
	color: var(--fg);
	text-decoration: none;
}

.product-tile__name a:hover {
	color: var(--brand);
}

.product-tile__regions {
	margin: 0.5rem 0 0;
	color: var(--fg-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.product-tile__more {
	margin-block-start: auto;
	padding-block-start: 1.25rem;
	color: var(--brand);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.product-tile__more:hover {
	color: var(--brand-dark);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.catalog-empty {
	margin: 0;
	color: var(--fg-muted);
}

/* Product groups -----------------------------------------------------------
 * A category whose products are in Product Groups lists them under headings:
 * an element among the stable isotopes, a system within waste management. */

.catalog-jump {
	margin-block-end: 2.5rem;
}

.catalog-jump__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sized as a touch target, not as the one or two letters inside. */
.catalog-jump__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.625rem;
	color: var(--brand-dark);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.catalog-jump__link:hover,
.catalog-jump__link:focus-visible {
	color: #fff;
	background: var(--brand-dark);
	border-color: var(--brand-dark);
}

.catalog-group + .catalog-group {
	margin-block-start: 3rem;
}

.catalog-group__head {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	margin-block-end: 1.25rem;
	padding-block-end: 0.875rem;
	border-block-end: 1px solid var(--line);
}

.catalog-group__symbol {
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.125rem;
}

.catalog-group__title {
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	line-height: 1.25;
}

.catalog-group__intro {
	display: grid;
	gap: 1.5rem;
	margin-block-end: 1.75rem;
}

@media (min-width: 900px) {
	.catalog-group__intro--media {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: 2.5rem;
		align-items: start;
	}
}

.catalog-group__text {
	max-width: 72ch;
	color: var(--fg-muted);
}

.catalog-group__text p {
	margin: 0 0 1em;
}

.catalog-group__text > :last-child {
	margin-block-end: 0;
}

/* Above the introduction on a phone, where it would otherwise follow several
 * screens of text; beside it from 900px. */
.catalog-group__media {
	order: -1;
	margin: 0;
	overflow: hidden;
	background: var(--muted);
	border-radius: var(--radius-lg);
}

@media (min-width: 900px) {
	.catalog-group__media {
		order: 0;
	}
}

.catalog-group__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 720 / 460;
	object-fit: cover;
}

/* Compact tiles: an element group, whose symbol is on the heading above. */
.catalog-grid--compact {
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
}

/* Content sits at the top, so a taller neighbour in the row stretches the
 * tile without pushing its availability to the bottom edge. */
.product-tile--compact {
	position: relative;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: center;
	justify-content: space-between;
	gap: 0.375rem 0.5rem;
	padding: 0.875rem 1rem;
	border-radius: var(--radius);
}

.product-tile--compact .product-tile__name {
	font-size: 1rem;
}

/* The whole tile answers the click, not just the few letters of "Li-7". */
.product-tile--compact .product-tile__name a::after {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	content: "";
}

.product-tile--compact .product-tile__regions {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.8125rem;
}

/* Closing call to action --------------------------------------------------- */

.catalog-cta {
	padding-block: 3.5rem;
	background: var(--surface);
	border-block-start: 1px solid var(--line);
}

.catalog-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
}

.catalog-cta__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.catalog-cta__text {
	max-width: 56ch;
	margin: 0.625rem 0 0;
	color: var(--fg-muted);
}

@media (max-width: 40em) {
	.catalog-bar__inner,
	.catalog-selects {
		align-items: stretch;
		flex-direction: column;
	}

	/* A shared label column, so the two dropdowns line up with each other
	   rather than starting wherever their label happens to end. */
	.catalog-select label {
		flex: 0 0 5rem;
	}

	.catalog-select select {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* Careers and Contact mastheads -------------------------------------------- */

/* The Careers hero can carry a photo beside the copy; on the dark band it
   reads as an inset rather than as part of the page. */
.careers-hero__media img {
	border: 1px solid rgb(255 255 255 / 15%);
}

/* The facts run above the product copy, at the same measure, and close up
   against it rather than sitting in a band of their own. */
.product-facts-section {
	padding-block: 3rem 0;
}


/* -------------------------------------------------------------------------
 * Company Overview
 * ---------------------------------------------------------------------- */

.page-hero__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
}

.page-hero__copy {
	flex: 1 1 32rem;
	min-width: 0;
}

.page-hero__cta {
	flex: 0 0 auto;
}

/* The headline figures sit along the foot of the band, divided by hairlines
   rather than boxed, so they read as a caption to the heading above. */
/* Explicit column counts rather than auto-fit, because the dividers between
   the figures have to know which of them start a row. */
.page-hero__stats {
	display: grid;
	grid-template-columns: 1fr;
	margin: 3rem 0 0;
	padding-block-start: 2rem;
	border-block-start: 1px solid rgb(255 255 255 / 18%);
}

/* Stacked: a rule between each pair, and no indent. */
.page-hero__stat + .page-hero__stat {
	margin-block-start: 1.25rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid rgb(255 255 255 / 18%);
}

@media (min-width: 40em) {
	.page-hero__stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.page-hero__stat + .page-hero__stat {
		margin-block-start: 0;
		padding-block-start: 0;
		border-block-start: 0;
	}

	.page-hero__stat {
		padding-inline: 1.75rem;
		border-inline-start: 1px solid rgb(255 255 255 / 18%);
	}

	/* Rows two deep need a gap, and the left column starts each row. */
	.page-hero__stat:nth-child(n + 3) {
		margin-block-start: 1.75rem;
	}

	.page-hero__stat:nth-child(odd) {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}

@media (min-width: 62em) {
	.page-hero__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.page-hero__stat:nth-child(n + 3) {
		margin-block-start: 0;
	}

	.page-hero__stat:nth-child(odd) {
		padding-inline-start: 1.75rem;
		border-inline-start: 1px solid rgb(255 255 255 / 18%);
	}

	.page-hero__stat:first-child {
		padding-inline-start: 0;
		border-inline-start: 0;
	}
}

.page-hero__figure {
	margin: 0;
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1.1;
}

.page-hero__label {
	margin: 0.375rem 0 0;
	color: rgb(255 255 255 / 65%);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Who we are --------------------------------------------------------------- */

/* Stacked: the copy reads first, then the team photo beneath it. */
.wwa-who__inner {
	display: grid;
	gap: 3rem;
}

/* The copy runs the full container width, matching the photo beneath it. */
.wwa-who__copy {
	max-width: none;
}

.wwa-who__title {
	margin: 0.5rem 0 1.5rem;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
	line-height: 1.2;
}

.wwa-who__text {
	max-width: none;
	color: var(--fg-muted);
}

/* The team photo runs at its own proportions -- it is a group shot, so a crop
   would cut people out of it. */
.wwa-who__media {
	margin: 0;
}

.wwa-who__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

.wwa-facts {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.wwa-fact {
	padding: 1rem 1.125rem;
	background: var(--surface);
	border-radius: var(--radius);
}

.wwa-fact__name {
	display: block;
	font-weight: 700;
	font-size: 0.9375rem;
}

.wwa-fact__note {
	display: block;
	margin-block-start: 0.1875rem;
	color: var(--fg-muted);
	font-size: 0.8125rem;
}

/* Mission & vision --------------------------------------------------------- */

/* A full-width dark band, split down the middle, so the two statements carry
   the same weight as each other. */
/* Two tones: mission on the darker half, vision on the lighter one. Stacked on
   narrow screens, each block carries its own colour. */
.wwa-mission {
	padding-block: 0;
	color: #fff;
	background: var(--brand-dark);
}

.wwa-mission__block + .wwa-mission__block {
	background: var(--brand);
}

.wwa-mission__inner {
	display: grid;
}

@media (min-width: 800px) {
	/* Painted on the band itself so the split runs the full width, rather than
	   stopping at the container's edges. */
	.wwa-mission {
		background: linear-gradient(90deg, var(--brand-dark) 0 50%, var(--brand) 50%);
	}

	.wwa-mission__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wwa-mission__block + .wwa-mission__block {
		background: none;
	}
}

/* Stacked, the two panels each carry their own colour, so they have to break
   out of the container's gutter or they read as floating cards. */
.wwa-mission__block {
	margin-inline: calc(var(--gutter) * -1);
	padding: 3rem var(--gutter);
}

@media (min-width: 800px) {
	.wwa-mission__block {
		margin-inline: 0;
		padding: 3.5rem clamp(1.5rem, 3vw, 3rem);
	}

	.wwa-mission__block:first-child {
		padding-inline-start: 0;
	}
}

.wwa-mission__label {
	margin: 0 0 1rem;
	color: #a8d3ef;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wwa-mission__text {
	max-width: 46ch;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
}

/* Principles --------------------------------------------------------------- */

.wwa-principles__title {
	margin: 0.5rem 0 0.75rem;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
}

.wwa-principles__intro {
	max-width: 62ch;
	margin: 0 0 2.5rem;
	color: var(--fg-muted);
}

.principles-grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 800px) {
	.principles-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The coloured edge is the whole of the card's decoration -- no icon, so the
   title carries the meaning. */
.principle {
	padding: 1.5rem 1.75rem;
	background: var(--base);
	border-radius: var(--radius);
	border-inline-start: 3px solid var(--brand);
}

.principle--accent {
	border-inline-start-color: var(--accent);
}

.principle__title {
	margin: 0 0 0.625rem;
	font-size: 1.125rem;
}

.principle__text {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.9375rem;
	line-height: 1.65;
}

/* Global network ----------------------------------------------------------- */

.button--dark {
	color: #fff;
	background: var(--brand-dark);
}

.button--dark:hover {
	color: #fff;
	background: var(--brand);
}

/* The page behind the mobile menu should not scroll while it is open. */
body.nav-locked {
	overflow: hidden;
}

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

.search-head {
	padding-block-end: 3rem;
}

.search-hero__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: 1.75rem;
	max-width: 56rem;
}

.search-hero__field {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex: 1 1 22rem;
	min-width: 0;
	padding: 0.75rem 1rem;
	color: rgb(255 255 255 / 55%);
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 15%);
	border-radius: var(--radius);
}

.search-hero__field input[type="search"] {
	width: 100%;
	padding: 0;
	color: #fff;
	font: inherit;
	font-size: 1rem;
	background: none;
	border: 0;
	border-radius: 0;
}

.search-hero__field input::placeholder {
	color: rgb(255 255 255 / 50%);
}

.search-hero__field input:focus {
	outline: none;
}

.search-hero__clear {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex: 0 0 auto;
	color: rgb(255 255 255 / 70%);
	font-size: 0.875rem;
	text-decoration: none;
	white-space: nowrap;
}

.search-hero__clear:hover {
	color: #fff;
}

.search-hero__tries {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	color: rgb(255 255 255 / 65%);
	font-size: 0.875rem;
}

.search-hero__tries-label {
	margin-inline-end: 0.125rem;
}

.search-hero__try {
	padding: 0.3125rem 0.75rem;
	color: #fff;
	font-size: 0.875rem;
	text-decoration: none;
	background: rgb(255 255 255 / 12%);
	border-radius: var(--radius-pill);
	transition: background var(--transition);
}

.search-hero__try:hover {
	color: #fff;
	background: rgb(255 255 255 / 22%);
}

/* Filter bar --------------------------------------------------------------- */

/* The pills are links here rather than buttons, so they need the anchor reset. */
a.catalog-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.catalog-pill__count {
	color: var(--fg-muted);
	font-size: 0.8125rem;
	font-weight: 600;
}

.catalog-pill.is-active .catalog-pill__count {
	color: rgb(255 255 255 / 70%);
}

/* Results ------------------------------------------------------------------ */

.search-body {
	padding-block: 3rem 4rem;
}

.search-group + .search-group {
	margin-block-start: 3rem;
}

.search-group__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-block-end: 0.75rem;
	margin-block-end: 1.5rem;
	border-block-end: 2px solid var(--brand-dark);
}

.search-group__title {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.search-group__count {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.875rem;
}

.search-products {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.search-product {
	display: flex;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--base);
	border: 1px solid var(--line);
	/* The brand edge marks these as catalogue entries rather than articles. */
	border-inline-start: 3px solid var(--brand-dark);
	border-radius: var(--radius);
}

.search-product__body {
	min-width: 0;
}

.search-product .product-tile__symbol {
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.125rem;
}

.search-product__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 1.0625rem;
}

.search-product__name a {
	color: var(--fg);
	text-decoration: none;
}

.search-product__name a:hover {
	color: var(--brand);
}

.search-product__meta {
	margin: 0.25rem 0 0;
	color: var(--fg-muted);
	font-size: 0.8125rem;
}

.search-results {
	display: grid;
	gap: 0;
}

.search-result {
	display: flex;
	gap: 1rem;
	padding-block: 1.375rem;
	border-block-end: 1px solid var(--line);
}

.search-result:last-child {
	border-block-end: 0;
}

.search-result__kind {
	flex: 0 0 auto;
	align-self: flex-start;
	padding: 0.25rem 0.5rem;
	color: var(--brand);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: rgb(18 93 144 / 8%);
	border-radius: 4px;
}

.search-result__body {
	min-width: 0;
}

.search-result__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.35;
}

.search-result__title a {
	color: var(--fg);
	text-decoration: none;
}

.search-result__title a:hover {
	color: var(--brand);
}

.search-result__excerpt {
	margin: 0.5rem 0 0;
	color: var(--fg-muted);
	line-height: 1.6;
}

.search-result__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin: 0.625rem 0 0;
	color: var(--fg-muted);
	font-size: 0.875rem;
}

.search-result__more {
	color: var(--brand);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.search-result__more:hover {
	color: var(--brand-dark);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.search-product .search-result__more {
	display: inline-block;
	margin-block-start: 0.75rem;
}

/* The matched words, in both titles and excerpts. */
.search-body mark,
.search-head mark {
	padding: 0 0.125rem;
	color: inherit;
	background: rgb(241 123 34 / 22%);
	border-radius: 3px;
}

.search-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-start: 2.5rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--line);
}

.search-foot__summary {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.9375rem;
}

.search-empty {
	max-width: 46rem;
}

.search-empty__title {
	margin: 0 0 0.75rem;
}

.search-empty__text {
	margin: 0;
	color: var(--fg-muted);
}

/* -------------------------------------------------------------------------
 * Product page
 * ---------------------------------------------------------------------- */

.product-head__top {
	display: flex;
	align-items: flex-start;
	gap: 1.5rem;
}

/* The element tile, set as a periodic-table cell with its mass number. */
.product-head__symbol {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 5.25rem;
	height: 5.25rem;
	color: #fff;
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: var(--radius);
}

.product-head__el {
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 1;
}

.product-head__mass {
	margin-block-start: 0.25rem;
	color: rgb(255 255 255 / 60%);
	font-size: 0.75rem;
	font-weight: 600;
}

.product-head__copy {
	min-width: 0;
}

.product-head__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0;
}

.product-head__chip {
	padding: 0.375rem 0.75rem;
	color: rgb(255 255 255 / 85%);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: var(--radius);
}

/* Body --------------------------------------------------------------------- */

.product-main {
	padding-block: 3.5rem 4rem;
}

.product-main__inner {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 62em) {
	.product-main__inner {
		grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
		gap: 3rem;
	}
}

.product-main__tagline {
	margin: 0.5rem 0 1.25rem;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	line-height: 1.2;
}

.product-main__text {
	max-width: none;
	color: var(--fg-muted);
}

/* Product data ------------------------------------------------------------- */

.product-data {
	margin-block-start: 2.5rem;
	overflow: hidden;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.product-data__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding: 1rem 1.25rem;
	color: #fff;
	background: var(--brand-dark);
}

.product-data__title {
	margin: 0;
	font-size: 1.0625rem;
}

.product-data__count {
	margin: 0;
	color: rgb(255 255 255 / 65%);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Hairlines drawn by the gap, so rows never end on a stray edge. */
.product-data__grid {
	display: grid;
	gap: 1px;
	margin: 0;
	background: var(--line);
}

@media (min-width: 34em) {
	.product-data__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.product-data__row--wide {
		grid-column: 1 / -1;
	}
}

.product-data__row {
	padding: 0.9375rem 1.25rem;
	background: var(--base);
}

.product-data__row dt {
	margin: 0 0 0.25rem;
	color: var(--brand);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.product-data__row dd {
	margin: 0;
	font-weight: 600;
}

.product-data__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--surface);
	border-block-start: 1px solid var(--line);
}

.product-data__pending {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.875rem;
}

.product-data__pending-label {
	margin-inline-end: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.product-data__ask {
	color: var(--brand);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.product-data__ask:hover {
	color: var(--brand-dark);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* A product listed by name only: where to ask, in place of the data panel. */
.product-data--brief {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-block-start: 0;
	padding: 1.25rem;
	background: var(--surface);
}

.product-data__brief {
	margin: 0;
	color: var(--fg-muted);
}

/* Decay calculator --------------------------------------------------------- */

.decay {
	padding: 1.5rem;
	color: #fff;
	background: var(--brand-dark);
	border-radius: var(--radius-lg);
}

.decay__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1.25rem;
}

.decay__title {
	margin: 0;
	font-size: 1.125rem;
}

/* Not uppercased: "t½" and "d" are unit symbols, and capitals misread them. */
.decay__halflife {
	margin: 0;
	color: rgb(255 255 255 / 60%);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.decay__field {
	margin: 0 0 1rem;
}

.decay__field label {
	display: block;
	margin-block-end: 0.4375rem;
	color: rgb(255 255 255 / 65%);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.decay__field input {
	width: 100%;
	padding: 0.6875rem 0.875rem;
	color: #fff;
	font: inherit;
	font-size: 1rem;
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: var(--radius);
}

.decay__field input:focus {
	outline: 2px solid rgb(143 196 232 / 60%);
	outline-offset: 1px;
}

.decay__result {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 1rem 1.125rem;
	background: rgb(255 255 255 / 10%);
	border-radius: var(--radius);
}

.decay__result-label {
	color: rgb(255 255 255 / 70%);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.decay__result-value {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
}

.decay__unit {
	font-size: 0.875rem;
	font-weight: 600;
	opacity: 0.7;
}

.decay__note {
	margin: 1rem 0 0;
	color: rgb(255 255 255 / 55%);
	font-size: 0.75rem;
	line-height: 1.6;
}

/* Availability ------------------------------------------------------------- */

.avail {
	margin-block-start: 1.25rem;
	padding: 1.25rem 1.375rem;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.avail__title {
	margin: 0 0 0.875rem;
	font-size: 1.0625rem;
}

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

.avail__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.6875rem;
	border-block-start: 1px solid var(--line);
}

.avail__status {
	color: var(--brand);
	font-size: 0.9375rem;
	font-weight: 600;
}

.avail__note {
	margin: 1rem 0 0;
	color: var(--fg-muted);
	font-size: 0.875rem;
	line-height: 1.6;
}

.product-main__media {
	margin: 1.25rem 0 0;
}

.product-main__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

/* Service cards & related -------------------------------------------------- */

.product-foot {
	padding-block: 3.5rem 4rem;
}

.promises {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	margin-block-end: 3rem;
}

.promise {
	padding: 1.5rem;
	background: var(--base);
	border: 1px solid var(--line);
	border-block-start: 3px solid var(--brand);
	border-radius: var(--radius);
}

.promise:nth-child(2) {
	border-block-start-color: var(--teal);
}

.promise:nth-child(3) {
	border-block-start-color: var(--accent);
}

.promise__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-block-end: 1rem;
	color: var(--brand);
	font-size: 0.8125rem;
	font-weight: 700;
	background: rgb(18 93 144 / 8%);
	border-radius: var(--radius);
}

.promise__title {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
}

.promise__text {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.product-related {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.product-related__item {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.9375rem 1rem;
	text-decoration: none;
	background: var(--base);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.product-related__item:hover {
	border-color: rgb(18 93 144 / 35%);
	box-shadow: var(--shadow-card);
}

.product-related__item .product-tile__symbol {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1rem;
}

.product-related__name {
	display: block;
	color: var(--fg);
	font-weight: 600;
}

.product-related__status {
	display: block;
	margin-block-start: 0.125rem;
	color: var(--brand);
	font-size: 0.8125rem;
}

.product-related__bar {
	align-items: center;
}