/* ==========================================================================
   ISO Solution — the redesign (isoSolutions design kit, October 2026)

   Loaded after main.css and written against the theme's own markup, so it
   re-skins what is there rather than replacing it: every page, Customizer
   field and feature keeps working, and only how they look changes.

   Deep navy and corporate blue, a teal scientific accent, amber kept for
   calls to action; Space Grotesk for display over Inter for text. The
   signature devices are the atom-and-decay-curve hero, isotope tags, and the
   blue-to-teal bar that sweeps across a card on hover.
   ========================================================================== */

:root {
	/* The theme's tokens, remapped to the kit's palette: everything main.css
	   draws in brand, teal, accent or surface shifts with them. */
	--brand: #005b96;
	--brand-dark: #0a1f3c;
	--teal: #00a3a3;
	--accent: #f5a623;
	--accent-hover: #e8871e;

	--fg: #0e1726;
	--fg-muted: #44546a;
	--surface: #f4f7fa;
	--muted: #eaf1f7;
	--line: #e2e8f0;

	--radius: 10px;
	--radius-lg: 14px;

	--shadow-card: 0 1px 2px rgb(10 31 60 / 5%);
	--shadow-lift: 0 30px 60px -30px rgb(10 31 60 / 40%);

	--container: 1240px;
	--gutter: 1.75rem;

	/* The kit's own, for what main.css has no word for. */
	--navy-2: #0e2c52;
	--blue-lift: #1c78c0;
	--teal-soft: #5fc6c6;
	--mist: #6b7b91;
	--radius-xl: 22px;
	--on-accent: #3a2400;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Chinese has no glyphs in either face; the system fonts carry it. */
	--font-display: "Space Grotesk", Inter, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

@media (max-width: 560px) {
	:root {
		--gutter: 1.25rem;
	}
}

/* Type -------------------------------------------------------------------- */

body {
	color: var(--fg);
}

h1,
h2,
h3,
h4,
.section-header__title,
.hero__title {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* Highlighted words in an editable heading (written in {braces}). */
.accent {
	font-style: normal;
	color: var(--teal);
}

/* Eyebrows: sentence case in teal, led by a short rule. */
.section-header__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem;
	margin-block-end: 1.125rem;
	color: var(--teal);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
}

.section-header__eyebrow::before {
	content: "";
	width: 22px;
	height: 1.5px;
	background: currentColor;
}

.section-header__title {
	font-size: clamp(2rem, 3.6vw, 2.9rem);
	line-height: 1.08;
}

.section-header__intro {
	font-size: 1.0625rem;
}

.section {
	padding-block: clamp(4.5rem, 8vw, 6.875rem);
}

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

/* Amber carries dark text: white on it fails contrast. */
.button {
	gap: 0.625rem;
	padding: 0.8125rem 1.5rem;
	color: var(--on-accent);
	border-width: 1.5px;
	box-shadow: 0 8px 24px -8px rgb(245 166 35 / 60%);
	transition: transform 250ms var(--ease), box-shadow 250ms var(--ease), background 250ms, color 250ms, border-color 250ms;
}

.button:hover,
.button:focus {
	color: var(--on-accent);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -8px rgb(245 166 35 / 70%);
}

.button .icon {
	transition: transform 250ms var(--ease);
}

.button:hover .icon {
	transform: translateX(4px);
}

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

.button--ghost,
.button--ghost:hover,
.button--ghost:focus {
	color: #fff;
	box-shadow: none;
}

.button--ghost {
	background: transparent;
	border-color: rgb(255 255 255 / 35%);
	backdrop-filter: none;
}

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

.button--outline {
	color: var(--brand);
	background: transparent;
	border-color: var(--line);
	box-shadow: none;
}

.button--outline:hover,
.button--outline:focus {
	color: var(--brand);
	background: var(--surface);
	border-color: var(--brand);
	box-shadow: none;
}

.button--dark,
.button--dark:hover {
	color: #fff;
	box-shadow: none;
}

/* Text links are blue; amber is for buttons only. */
.link-arrow {
	color: var(--brand);
}

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

.team-card__linkedin:hover,
.partner-row__link:hover {
	color: var(--brand-dark);
}

.milestone-card__badge,
.search-form__submit,
.floating-cta,
.floating-cta:hover {
	color: var(--on-accent);
}

/* Isotope tags --------------------------------------------------------------- */

.iso-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4375rem;
	padding: 0.25rem 0.625rem 0.25rem 0.5625rem;
	color: var(--teal);
	background: rgb(0 163 163 / 6%);
	border: 1px solid rgb(0 163 163 / 35%);
	border-radius: 100px;
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
	white-space: nowrap;
}

.iso-tag sup {
	margin-inline-end: 0.05em;
	font-size: 0.66em;
	vertical-align: 0.55em;
	line-height: 0;
}

.iso-tag__name {
	font-size: 0.86em;
	opacity: 0.75;
}

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

.topbar {
	color: rgb(255 255 255 / 72%);
	background: var(--brand-dark);
	font-size: 0.82rem;
}

.topbar__search input[type="search"] {
	background: rgb(255 255 255 / 7%);
	border-color: rgb(255 255 255 / 14%);
}

/* Header ------------------------------------------------------------------------ */

.site-header {
	background: rgb(255 255 255 / 86%);
	border-block-end-color: transparent;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: border-color 300ms, box-shadow 300ms;
}

.site-header.is-stuck {
	border-block-end-color: var(--line);
	box-shadow: 0 8px 30px -14px rgb(10 31 60 / 18%);
}

.menu-item__chevron {
	opacity: 0.6;
}

@media (min-width: 1100px) {

	/* Desktop only: on the navy mobile panel main.css keeps these plain. */
	.main-navigation > ul > li > a {
		padding: 0.625rem 0.9375rem;
		border-radius: 9px;
		font-size: 0.95rem;
	}

	.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(--surface);
	}

	/* Dropdowns: a floating panel centred under its item, each entry with an
	   icon chip that fills blue on hover. */
	.main-navigation .sub-menu {
		inset-inline-start: 50%;
		min-width: 270px;
		padding: 1rem;
		border-radius: var(--radius-lg);
		box-shadow: 0 30px 70px -24px rgb(10 31 60 / 35%);
		transform: translateX(-50%) translateY(10px);
		transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms;
	}

	.main-navigation li.is-open > .sub-menu,
	.main-navigation li:hover > .sub-menu,
	.main-navigation li:focus-within > .sub-menu {
		transform: translateX(-50%) translateY(0);
	}

	/* Products: ten categories, two columns. */
	.main-navigation .has-mega > .sub-menu {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.25rem 0.625rem;
		width: 560px;
	}

	.main-navigation .sub-menu a {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.6875rem 0.75rem;
		border-radius: var(--radius);
		font-size: 0.92rem;
		font-weight: 600;
		transition: background 180ms;
	}

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

	.menu-item__icon {
		display: grid;
		flex: none;
		place-items: center;
		width: 34px;
		height: 34px;
		color: var(--brand);
		background: var(--muted);
		border-radius: 9px;
		transition: background 180ms, color 180ms;
	}

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

/* On the navy mobile panel the chips are just quieter icons. */
@media (max-width: 1099px) {
	.menu-item__icon {
		display: inline-grid;
		margin-inline-end: 0.625rem;
		color: var(--teal-soft);
		vertical-align: -0.2em;
	}

	/* No frosted glass here: a backdrop-filter makes the header the containing
	   block for the fixed menu panel inside it, which then collapses to the
	   header's own height instead of filling the screen. */
	.site-header {
		background: #fff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

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

.hero {
	display: flex;
	align-items: center;
	min-height: clamp(600px, 88vh, 860px);
	padding-block: 3rem;
	background: radial-gradient(130% 120% at 85% 10%, #124a82 0%, #083765 42%, #0a1f3c 100%);
}

.hero__fx {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* An optional photo, kept faint so the atom still leads. */
.hero__media {
	position: absolute;
	inset: 0;
	opacity: 0.18;
	mix-blend-mode: luminosity;
}

.hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(90% 90% at 78% 30%, #000 10%, transparent 72%);
	-webkit-mask-image: radial-gradient(90% 90% at 78% 30%, #000 10%, transparent 72%);
}

/* The decay curve draws itself in once, on load. */
.hero__decay {
	position: absolute;
	inset-inline-end: -2%;
	inset-block-end: 0;
	width: 62%;
	height: 78%;
	opacity: 0.5;
}

.hero__decay-curve {
	fill: none;
	stroke: url(#hero-decay-gradient);
	stroke-width: 2.5;
	stroke-dasharray: 1400;
	stroke-dashoffset: 1400;
	animation: hero-draw 2.6s var(--ease) 0.5s forwards;
}

.hero__decay-guide {
	stroke: rgb(255 255 255 / 20%);
	stroke-width: 1;
	stroke-dasharray: 4 6;
}

@keyframes hero-draw {
	to {
		stroke-dashoffset: 0;
	}
}

.hero__atom {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 7%;
	width: min(440px, 42vw);
	height: min(440px, 42vw);
	transform: translateY(-50%);
}

.hero__ring,
.hero__orbit {
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

.hero__ring {
	border: 1.5px solid rgb(95 198 198 / 40%);
}

.hero__ring--2 {
	inset: 12%;
	border-color: rgb(255 255 255 / 18%);
}

.hero__ring--3 {
	inset: 26%;
	border-color: rgb(95 198 198 / 28%);
}

.hero__orbit {
	animation: hero-spin 18s linear infinite;
}

.hero__orbit--2 {
	inset: 12%;
	animation-duration: 12s;
	animation-direction: reverse;
}

.hero__orbit--3 {
	inset: 26%;
	animation-duration: 26s;
}

.hero__electron {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-start: 50%;
	width: 13px;
	height: 13px;
	margin-inline-start: -6px;
	background: var(--teal-soft);
	border-radius: 50%;
	box-shadow: 0 0 16px rgb(0 163 163 / 55%), 0 0 30px rgb(0 163 163 / 55%);
}

.hero__orbit--2 .hero__electron {
	background: #fff;
	box-shadow: 0 0 14px rgb(255 255 255 / 80%);
}

.hero__nucleus {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	background: radial-gradient(circle at 36% 30%, #3fd4d4, #00a3a3 60%, #007878);
	border-radius: 50%;
	box-shadow: 0 0 50px rgb(0 163 163 / 55%), 0 0 90px rgb(0 163 163 / 35%);
	animation: hero-pulse 4s ease-in-out infinite;
}

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

@keyframes hero-pulse {
	50% {
		box-shadow: 0 0 70px rgb(0 163 163 / 55%), 0 0 130px rgb(0 163 163 / 50%);
	}
}

.hero__inner {
	z-index: 3;
	width: 100%;
}

.hero__content {
	max-width: 680px;
}

.hero__badge {
	gap: 0.5625rem;
	margin-block-end: 1.625rem;
	padding: 0.5rem 1rem 0.5rem 0.8125rem;
	background: rgb(255 255 255 / 8%);
	border-color: rgb(255 255 255 / 18%);
	font-size: 0.82rem;
	letter-spacing: 0;
	text-transform: none;
	backdrop-filter: blur(6px);
}

.hero__pin {
	width: 8px;
	height: 8px;
	background: var(--teal);
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgb(0 163 163 / 25%);
}

.hero__title {
	margin-block-end: 1.5rem;
	font-size: clamp(2.4rem, 5vw, 4rem);
	line-height: 1.06;
	letter-spacing: -0.03em;
}

.hero__title .accent {
	color: transparent;
	background: linear-gradient(100deg, #5fc6c6, #7fe0e0);
	-webkit-background-clip: text;
	background-clip: text;
}

.hero__text {
	max-width: 540px;
	margin-block-end: 2.125rem;
	color: rgb(230 240 250 / 82%);
	font-size: 1.18rem;
}

.hero__actions {
	gap: 0.875rem;
	margin-block-end: 2.875rem;
}

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

.hero__isotopes-label {
	margin-inline-end: 0.25rem;
	color: rgb(255 255 255 / 55%);
	font-size: 0.8rem;
}

.hero .iso-tag {
	color: var(--teal-soft);
	background: rgb(0 163 163 / 10%);
	border-color: rgb(95 198 198 / 40%);
}

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

@media (max-width: 1024px) {
	.hero__atom {
		inset-inline-end: -10%;
		opacity: 0.4;
	}
}

@media (max-width: 820px) {
	.hero__decay {
		display: none;
	}
}

@media (max-width: 560px) {
	.hero__title {
		font-size: 2.3rem;
	}
}

/* Statistics strip ----------------------------------------------------------------- */

.stats {
	position: relative;
	z-index: 3;
	background: var(--navy-2);
	border-block: 1px solid rgb(255 255 255 / 8%) 0;
}

.stats__grid {
	gap: 0;
	background: none;
}

.stats__item {
	padding: 1.875rem 0.625rem;
	background: none;
	border-inline-end: 1px solid rgb(255 255 255 / 8%);
}

.stats__item:last-child {
	border-inline-end: 0;
}

@media (max-width: 767px) {
	.stats__item {
		border-block-end: 1px solid rgb(255 255 255 / 8%);
	}

	.stats__item:nth-child(2n) {
		border-inline-end: 0;
	}
}

.stats__value {
	margin-block-end: 0.5625rem;
	color: #fff;
	font-family: var(--font-display);
	font-size: 2.3rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
}

.stats__unit {
	color: var(--teal-soft);
}

.stats__label {
	color: rgb(255 255 255 / 60%);
	font-size: 0.82rem;
	letter-spacing: 0.01em;
}

/* Product categories ------------------------------------------------------------- */

#products.section--surface {
	background: #fff;
}

#products .section-header {
	margin-inline: auto;
	margin-block-end: 3.375rem;
	text-align: center;
}

.product-grid {
	gap: 1.25rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

@media (max-width: 820px) {
	.product-grid {
		grid-template-columns: 1fr;
	}
}

/* A blue-to-teal bar sweeps across the top of a card on hover. */
.product-card {
	position: relative;
	padding: 1.75rem;
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: none;
	transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color 350ms;
}

.product-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--brand), var(--teal));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 400ms var(--ease);
}

.product-card:hover {
	border-color: transparent;
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -30px rgb(10 31 60 / 40%);
}

.product-card:hover::before {
	transform: scaleX(1);
}

.product-card__icon {
	width: 52px;
	height: 52px;
	margin-block-end: 1.375rem;
	color: var(--brand);
	background: var(--muted);
	border-radius: 13px;
	transition: background 350ms var(--ease), color 350ms var(--ease), transform 350ms var(--ease);
}

.product-card:hover .product-card__icon {
	color: var(--teal-soft);
	background: var(--brand-dark);
	transform: rotate(-6deg);
}

.product-card__title {
	margin-block-end: 0.5625rem;
	font-size: 1.28rem;
}

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

.product-card .link-arrow {
	margin-block-start: auto;
	font-size: 0.9rem;
}

.product-grid__foot {
	display: flex;
	justify-content: center;
	margin: 2.375rem 0 0;
}

/* Why isoSolutions: navy, with the reasons in one ruled panel ---------------------- */

.why-section {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(180deg, #0a1f3c, #0c2748);
}

.why-section::before,
.why-section::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.why-section::after {
	inset-block-start: -120px;
	inset-inline-end: -120px;
	width: 480px;
	height: 480px;
	border: 1px solid rgb(95 198 198 / 14%);
}

.why-section::before {
	inset-block-start: 30px;
	inset-inline-end: 30px;
	width: 320px;
	height: 320px;
	border: 1px solid rgb(95 198 198 / 10%);
}

.why-section > .container {
	position: relative;
	z-index: 1;
}

.why-section__head {
	display: grid;
	gap: 1.25rem 3rem;
	align-items: end;
	margin-block-end: 3.625rem;
}

@media (min-width: 1025px) {
	.why-section__head {
		grid-template-columns: 1.15fr 0.85fr;
	}
}

.why-section .section-header__eyebrow {
	color: var(--teal-soft);
}

.why-section__title {
	margin: 0;
	color: #fff;
	font-size: clamp(2rem, 4vw, 3.1rem);
	line-height: 1.08;
}

.why-section__title .accent {
	color: var(--teal-soft);
}

.why-section__intro {
	margin: 0;
	color: rgb(230 240 250 / 70%);
	font-size: 1.1rem;
}

.why-section .value-grid {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	overflow: hidden;
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 10%);
	border-radius: var(--radius-lg);
}

@media (max-width: 1024px) {
	.why-section .value-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.why-section .value-grid {
		grid-template-columns: 1fr;
	}
}

.why-section .value-card {
	padding: 2.125rem 1.75rem;
	color: inherit;
	background: #0b2342;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-align: start;
	transition: background 300ms;
}

.why-section .value-card:hover {
	background: var(--navy-2);
	transform: none;
}

.why-section .value-card__icon {
	width: 44px;
	height: 44px;
	margin: 0 0 1.25rem;
	color: var(--teal-soft);
	background: rgb(0 163 163 / 14%);
	border-radius: 11px;
}

.why-section .value-card__title {
	margin-block-end: 0.625rem;
	color: #fff;
	font-size: 1.18rem;
}

.why-section .value-card__text {
	color: rgb(230 240 250 / 62%);
	font-size: 0.9rem;
}

/* Founder ----------------------------------------------------------------------------- */

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

@media (min-width: 1025px) {
	.founder-quote__inner {
		grid-template-columns: 0.9fr 1.1fr;
		gap: 3.75rem;
	}

	.founder-quote__inner--solo {
		grid-template-columns: 1fr;
		max-width: 900px;
	}
}

.founder-quote__portrait {
	position: relative;
	max-width: 460px;
}

.founder-quote__frame {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: linear-gradient(160deg, var(--brand-dark), var(--brand));
	border-radius: var(--radius-xl);
	box-shadow: 0 40px 80px -40px rgb(10 31 60 / 50%);
}

.founder-quote__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.founder-quote__initials {
	color: rgb(255 255 255 / 14%);
	font-family: var(--font-display);
	font-size: 5rem;
	font-weight: 700;
}

.founder-quote__rings {
	position: absolute;
	inset-block-end: -40px;
	inset-inline-end: -40px;
	width: 200px;
	height: 200px;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 50%;
}

.founder-quote__rings::after {
	content: "";
	position: absolute;
	inset: 34px;
	border: 1px solid rgb(95 198 198 / 30%);
	border-radius: 50%;
}

.founder-quote__badge {
	position: absolute;
	inset-block-end: 2.5rem;
	inset-inline-start: -1.625rem;
	margin: 0;
	padding: 1.125rem 1.375rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 50px -24px rgb(10 31 60 / 40%);
}

@media (max-width: 560px) {
	.founder-quote__badge {
		inset-inline-start: 0.625rem;
	}
}

.founder-quote__badge-name {
	display: block;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
}

.founder-quote__badge-role {
	color: var(--mist);
	font-size: 0.8rem;
}

.founder-quote__body {
	margin: 0;
}

.founder-quote__mark {
	display: block;
	margin-block-end: 0.625rem;
	color: var(--teal);
	font-family: var(--font-display);
	font-size: 4rem;
	line-height: 0.6;
}

.founder-quote__text {
	margin: 0 0 1.625rem;
	padding: 0;
	border: 0;
}

.founder-quote__text p {
	margin: 0;
	color: var(--fg);
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2.3vw, 1.85rem);
	font-weight: 500;
	line-height: 1.34;
	letter-spacing: -0.02em;
}

.founder-quote__cite {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.founder-quote__rule {
	width: 36px;
	height: 1.5px;
	background: var(--teal);
}

.founder-quote__name {
	display: block;
	font-family: var(--font-display);
	font-weight: 600;
}

.founder-quote__role {
	color: var(--mist);
	font-size: 0.9rem;
}

/* Global presence ----------------------------------------------------------------------- */

.global-section {
	position: relative;
	overflow: hidden;
	color: #fff;
	background: var(--brand-dark);
}

.global-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 80% at 15% 20%, rgb(0 163 163 / 18%), transparent 60%);
	pointer-events: none;
}

.global-section__inner {
	position: relative;
	display: grid;
	gap: 2.5rem 3.75rem;
	align-items: center;
}

@media (min-width: 1025px) {
	.global-section__inner {
		grid-template-columns: 1fr 1fr;
	}
}

.global-section .section-header__eyebrow {
	color: var(--teal-soft);
}

.global-section__title {
	margin: 0 0 1.125rem;
	color: #fff;
	font-size: clamp(2rem, 3.6vw, 2.8rem);
	line-height: 1.08;
}

.global-section__text {
	margin: 0 0 1.875rem;
	color: rgb(230 240 250 / 72%);
	font-size: 1.08rem;
}

.global-section__regions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0 0 1.75rem;
	padding: 0;
	list-style: none;
}

.global-section__regions li {
	padding: 0.5625rem 1rem;
	background: rgb(255 255 255 / 7%);
	border: 1px solid rgb(255 255 255 / 14%);
	border-radius: 100px;
	font-size: 0.86rem;
}

.global-section__link,
.global-section__link:hover {
	color: var(--teal-soft);
}

.global-section__figures {
	margin: 0;
	padding: 0.875rem 2.375rem;
	background: rgb(255 255 255 / 4%);
	border: 1px solid rgb(255 255 255 / 12%);
	border-radius: var(--radius-xl);
}

.global-section__figure {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.125rem;
	border-block-end: 1px solid rgb(255 255 255 / 10%);
}

.global-section__figure:last-child {
	border-block-end: 0;
}

.global-section__figure dt {
	display: flex;
	align-items: center;
	gap: 0.8125rem;
	color: rgb(255 255 255 / 85%);
	font-size: 0.95rem;
}

.global-section__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 38px;
	height: 38px;
	color: var(--teal-soft);
	background: rgb(0 163 163 / 14%);
	border-radius: var(--radius);
}

.global-section__figure dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 600;
}

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

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

.news-grid {
	gap: 1.5rem;
}

.news-card {
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: none;
	transition: transform 350ms var(--ease), box-shadow 350ms var(--ease);
}

.news-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -30px rgb(10 31 60 / 35%);
}

.news-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

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

/* No photo: the brand gradient, with the year set large. */
.news-card__media--plain {
	background: linear-gradient(140deg, #005b96, #00a3a3);
}

.news-card:nth-child(3n + 2) .news-card__media--plain {
	background: linear-gradient(140deg, #0a1f3c, #005b96);
}

.news-card:nth-child(3n + 3) .news-card__media--plain {
	background: linear-gradient(140deg, #0e2c52, #008e8e);
}

.news-card__watermark {
	position: absolute;
	inset-block-end: 0.875rem;
	inset-inline-end: 1rem;
	color: rgb(255 255 255 / 22%);
	font-family: var(--font-display);
	font-size: 2.6rem;
	font-weight: 700;
}

.news-card__title {
	font-size: 1.1rem;
	line-height: 1.28;
}

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

.news-card .pill--teal {
	color: var(--brand);
	background: var(--muted);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Partners and communities ------------------------------------------------------------------ */

#partners.section--surface {
	border-block-start: 1px solid var(--line);
}

.partners__label {
	color: var(--mist);
	font-family: var(--font-display);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.06em;
}

.partners__item {
	border-radius: var(--radius);
	transition: border-color 250ms, box-shadow 250ms;
}

.partners__item--linked:hover {
	border-color: var(--brand);
	box-shadow: 0 14px 30px -18px rgb(10 31 60 / 40%);
}

.partners__name {
	color: var(--mist);
	font-family: var(--font-display);
	font-weight: 600;
}

.communities-section {
	background: var(--surface);
	padding-block-start: 0;
}

/* Closing call to action ------------------------------------------------------------------------ */

.closer {
	padding-block: 0 clamp(4.5rem, 8vw, 6.875rem);
	background: var(--surface);
}

.closer__box {
	position: relative;
	display: grid;
	gap: 2rem 2.875rem;
	align-items: center;
	padding: clamp(2.75rem, 5vw, 4.375rem) clamp(1.875rem, 5vw, 3.75rem);
	overflow: hidden;
	color: #fff;
	background: linear-gradient(130deg, #005b96, #0a1f3c);
	border-radius: var(--radius-xl);
}

@media (min-width: 821px) {
	.closer__box {
		grid-template-columns: 1.3fr auto;
	}
}

.closer__box::before,
.closer__box::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.closer__box::after {
	inset-block-start: -60px;
	inset-inline-end: -60px;
	width: 300px;
	height: 300px;
	border: 1.5px solid rgb(95 198 198 / 22%);
}

.closer__box::before {
	inset-block-end: -110px;
	inset-inline-end: 60px;
	width: 240px;
	height: 240px;
	border: 1.5px solid rgb(255 255 255 / 12%);
}

.closer__copy,
.closer__actions {
	position: relative;
	z-index: 1;
}

.closer__title {
	margin: 0 0 1rem;
	color: #fff;
	font-size: clamp(1.9rem, 3.2vw, 2.7rem);
	line-height: 1.08;
}

.closer__text {
	max-width: 540px;
	margin: 0;
	color: rgb(230 240 250 / 82%);
	font-size: 1.08rem;
}

.closer__actions {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	min-width: 220px;
}

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

.site-footer {
	padding-block-start: 4.5rem;
	background: var(--brand-dark);
}

.site-footer__about {
	max-width: 300px;
	color: rgb(230 240 250 / 60%);
	font-size: 0.92rem;
}

.site-footer__isotopes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.375rem 0 0;
}

.site-footer .iso-tag {
	color: var(--teal-soft);
	background: rgb(0 163 163 / 10%);
	border-color: rgb(95 198 198 / 35%);
}

.site-footer__heading {
	color: var(--teal-soft);
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.site-footer__menu a,
.site-footer__contact a,
.site-footer__contact span {
	color: rgb(230 240 250 / 68%);
	font-size: 0.92rem;
}

.site-footer__menu a:hover,
.site-footer__contact a:hover {
	color: #fff;
}

.site-footer__contact .icon {
	color: var(--teal-soft);
}

.site-footer__bottom {
	border-block-start-color: rgb(255 255 255 / 10%);
}

.site-footer__copyright,
.site-footer__legal a {
	color: rgb(255 255 255 / 50%);
	font-size: 0.84rem;
}

.site-footer__social {
	display: flex;
	gap: 0.625rem;
	margin: 0;
}

.site-footer__social a {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	color: rgb(255 255 255 / 70%);
	background: rgb(255 255 255 / 7%);
	border-radius: var(--radius);
	transition: background 200ms, color 200ms;
}

.site-footer__social a:hover {
	color: #06302f;
	background: var(--teal);
}

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

/* Every inner page opens on this band: the hero's navy, lit from the top right,
   with one ring of the atom showing at the corner. */
.hero-dark {
	overflow: hidden;
	background: radial-gradient(120% 140% at 85% 0%, #124a82, #0a1f3c 70%);
}

/* The kit's band has no grid; the ring is its one ornament. */
.hero-dark::before {
	display: none;
}

.hero-dark::after {
	content: "";
	position: absolute;
	inset-block-start: -80px;
	inset-inline-end: -80px;
	z-index: 0;
	width: 360px;
	height: 360px;
	border: 1px solid rgb(95 198 198 / 16%);
	border-radius: 50%;
	pointer-events: none;
}

/* Compact, as the kit's inner pages: breadcrumb, title, one line of intro. */
.hero-dark {
	padding-block: 3.5rem 3.75rem;
}

.hero-dark .section-header__eyebrow,
.catalog-head__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5625rem;
	margin-block-end: 1rem;
	color: var(--teal-soft);
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
}

.catalog-head__eyebrow::before {
	content: "";
	width: 22px;
	height: 1.5px;
	background: currentColor;
}

.hero-dark .section-header__title,
.catalog-head__title,
.article-head__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.hero-dark .section-header__intro,
.catalog-head__intro {
	color: rgb(230 240 250 / 78%);
	font-size: 1.1rem;
}

/* The page you are on, in the breadcrumb trail. */
.hero-dark [aria-current="page"] {
	color: var(--teal-soft);
}

/* Category pages: filter sidebar beside the grid ----------------------------------------------------------- */

.catalog-body {
	padding-block: 4.375rem 6.875rem;
}

.catalog-layout {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 1025px) {
	.catalog-layout {
		grid-template-columns: 270px minmax(0, 1fr);
	}
}

.catalog-filters {
	position: sticky;
	inset-block-start: calc(var(--header-h) + 1.5rem);
	padding: 1.625rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

/* Phones and tablets: folded away behind the Filters button. */
@media (max-width: 1024px) {
	.catalog-filters {
		position: static;
		display: none;
	}

	.catalog-filters.is-open {
		display: block;
	}
}

.catalog-filters__title {
	margin: 0 0 1.25rem;
	font-size: 1.05rem;
}

.catalog-filters__group {
	min-width: 0;
	margin: 0;
	padding: 1.125rem 0;
	border: 0;
	border-block-start: 1px solid var(--line);
}

.catalog-filters__group:first-of-type {
	padding-block-start: 0;
	border-block-start: 0;
}

/* Floated, so it sits below the group's top rule rather than on it. */
.catalog-filters__legend {
	float: left;
	width: 100%;
	margin-block-end: 0.875rem;
	padding: 0;
	color: var(--fg-muted);
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.catalog-filters__legend + .catalog-option {
	clear: both;
}

.catalog-option {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-block-end: 0.6875rem;
	font-size: 0.9rem;
	cursor: pointer;
	user-select: none;
}

.catalog-option input {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	background: #fff;
	border: 1.5px solid #c9d3df;
	border-radius: 5px;
	cursor: pointer;
	appearance: none;
	transition: background 150ms, border-color 150ms;
}

.catalog-option input:checked {
	background: var(--brand);
	border-color: var(--brand);
}

.catalog-option input:checked::after {
	content: "";
	position: absolute;
	inset-block-start: 1.5px;
	inset-inline-start: 5px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.catalog-option__count {
	margin-inline-start: auto;
	padding: 0.125rem 0.5rem;
	color: var(--mist);
	background: var(--surface);
	border-radius: 100px;
	font-size: 0.76rem;
}

.catalog-filters__clear {
	margin-block-start: 0.875rem;
	padding: 0;
	color: var(--brand);
	background: none;
	border: 0;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.catalog-filters__clear:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.catalog-main {
	min-width: 0;
}

.catalog-main__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.875rem;
	margin-block-end: 1.5rem;
}

.catalog-main__count {
	margin: 0;
	color: var(--fg-muted);
	font-size: 0.92rem;
}

.catalog-main__count b {
	color: var(--fg);
	font-family: var(--font-display);
}

.catalog-filters__toggle {
	display: none;
	justify-self: start;
	padding: 0.5rem 1rem;
}

.catalog-filters__toggle .icon {
	transition: transform 200ms;
}

.catalog-filters__toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

@media (max-width: 1024px) {
	.catalog-layout {
		gap: 1rem;
	}

	.catalog-filters__toggle {
		display: inline-flex;
	}
}

.catalog-grid {
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

/* Product cards: the homepage's cards, with the element in the icon tile. */
.product-tile {
	position: relative;
	padding: 1.75rem;
	overflow: hidden;
	border-radius: var(--radius-lg);
	transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color 350ms;
}

.product-tile:not(.product-tile--compact)::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--brand), var(--teal));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 400ms var(--ease);
}

.product-tile:hover {
	border-color: transparent;
	transform: translateY(-6px);
	box-shadow: 0 30px 60px -30px rgb(10 31 60 / 40%);
}

.product-tile:hover::before {
	transform: scaleX(1);
}

.product-tile--compact:hover {
	border-color: var(--brand);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -18px rgb(10 31 60 / 35%);
}

.product-tile__symbol,
.product-tile__symbol--icon {
	width: 52px;
	height: 52px;
	color: var(--brand);
	background: var(--muted);
	border-radius: 13px;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	transition: background 350ms var(--ease), color 350ms var(--ease), transform 350ms var(--ease);
}

.product-tile:hover .product-tile__symbol {
	color: var(--teal-soft);
	background: var(--brand-dark);
	transform: rotate(-6deg);
}

/* The element group's heading tile stays solid: it labels, it is not a card. */
.catalog-group__symbol,
.catalog-group__symbol:hover {
	color: #fff;
	background: var(--brand-dark);
	transform: none;
}

.product-tile__name {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 600;
}

.product-tile--compact .product-tile__name {
	font-size: 1rem;
}

.product-tile__status {
	border-radius: 100px;
}

/* The catalogue's closing prompt, as the homepage's closing panel. */
.catalog-cta {
	padding-block: 0 clamp(4.5rem, 8vw, 6.875rem);
	background: none;
	border: 0;
}

.catalog-cta__inner {
	position: relative;
	padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1.875rem, 5vw, 3.75rem);
	overflow: hidden;
	color: #fff;
	background: linear-gradient(130deg, #005b96, #0a1f3c);
	border-radius: var(--radius-xl);
}

.catalog-cta__inner::after {
	content: "";
	position: absolute;
	inset-block-start: -60px;
	inset-inline-end: -60px;
	width: 300px;
	height: 300px;
	border: 1.5px solid rgb(95 198 198 / 22%);
	border-radius: 50%;
	pointer-events: none;
}

.catalog-cta__inner > * {
	position: relative;
	z-index: 1;
}

.catalog-cta__title {
	color: #fff;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.catalog-cta__text {
	color: rgb(230 240 250 / 82%);
}

/* The assistant's launcher: the kit's amber pill ------------------------------------------------------ */

.iso-chat .iso-chat__launch {
	color: var(--on-accent);
	box-shadow: 0 16px 40px -12px rgb(245 166 35 / 60%);
}

/* Focus and motion ------------------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.hero__orbit,
	.hero__nucleus,
	.hero__decay-curve {
		animation: none;
	}

	.hero__decay-curve {
		stroke-dashoffset: 0;
	}

	.product-card,
	.news-card,
	.button {
		transition: none;
	}
}

/* Category cards: the footer line, and /products/ ------------------------------------------------------- */

.product-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	width: 100%;
	margin: auto 0 0;
}

.product-card__count {
	color: var(--mist);
	font-size: 0.82rem;
}

.product-card__count b {
	color: var(--fg-muted);
	font-family: var(--font-display);
}

.catalog-index {
	padding-block: 4.375rem 6.875rem;
}

/* Product page -------------------------------------------------------------------------------------------- */

/* Just the breadcrumb on the band: the product's own heading is below. */
.product-crumbs {
	padding-block: 2.25rem 2.5rem;
}

.product-crumbs .crumbs {
	margin: 0;
}

.product-detail {
	padding-block: 3.75rem 5rem;
}

.product-detail__top {
	display: grid;
	gap: 2.125rem;
	margin-block-end: 3.75rem;
}

@media (min-width: 1025px) {
	.product-detail__top {
		grid-template-columns: 1fr 1fr;
		gap: 3.125rem;
		align-items: start;
	}

	.product-detail__media {
		position: sticky;
		inset-block-start: calc(var(--header-h) + 2rem);
	}
}

.product-detail__photo {
	display: block;
	width: 100%;
	height: auto;
	background: var(--muted);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.product-detail__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	color: var(--brand);
	background: linear-gradient(150deg, var(--muted), #d7e6f2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.product-detail__placeholder .icon {
	opacity: 0.45;
}

/* The element as a periodic-table cell. */
.product-detail__tile {
	display: grid;
	place-items: center;
	align-content: center;
	width: 9.5rem;
	height: 9.5rem;
	color: #fff;
	background: linear-gradient(160deg, var(--brand-dark), var(--brand));
	border-radius: var(--radius-lg);
	box-shadow: 0 30px 60px -30px rgb(10 31 60 / 50%);
	font-family: var(--font-display);
	line-height: 1;
}

.product-detail__mass {
	color: var(--teal-soft);
	font-size: 1.125rem;
	font-weight: 500;
}

.product-detail__el {
	margin-block-start: 0.375rem;
	font-size: 3.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.product-detail__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

.product-detail__category {
	display: inline-block;
	margin-block-end: 1.25rem;
	color: var(--teal);
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
}

.product-detail__category:hover {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.product-detail__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	line-height: 1.1;
}

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

.product-detail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0 1.75rem;
}

.product-detail__facts {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--line);
}

@media (max-width: 560px) {
	.product-detail__facts {
		grid-template-columns: 1fr;
	}
}

.product-detail__fact--wide {
	grid-column: 1 / -1;
}

.product-detail__fact dt {
	margin-block-end: 0.25rem;
	color: var(--mist);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.product-detail__fact dd {
	margin: 0;
	font-size: 0.95rem;
}

.product-detail__brief {
	margin: 0;
	color: var(--fg-muted);
}

/* Tabs */
.product-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-block-end: 2.125rem;
	border-block-end: 1px solid var(--line);
}

.product-tabs__tab {
	margin-block-end: -1px;
	padding: 0.875rem 1.375rem;
	color: var(--fg-muted);
	background: none;
	border: 0;
	border-block-end: 2.5px solid transparent;
	font-family: var(--font-display);
	font-size: 0.98rem;
	font-weight: 500;
	cursor: pointer;
	transition: color 200ms, border-color 200ms;
}

.product-tabs__tab:hover,
.product-tabs__tab.is-active {
	color: var(--brand);
}

.product-tabs__tab.is-active {
	border-block-end-color: var(--brand);
}

.product-panel {
	max-width: 760px;
}

.product-panel:focus-visible {
	outline-offset: 8px;
}

.product-panel__title {
	margin: 0 0 1rem;
	font-size: 1.3rem;
}

.product-panel .product-data {
	margin-block-start: 0;
}

.product-panel .decay,
.product-panel .avail {
	max-width: 480px;
}

/* Related products and the service cards ------------------------------------------------------------------- */

.product-foot {
	border-block-start: 1px solid var(--line);
}

.promise {
	border-radius: var(--radius-lg);
}

.product-related {
	gap: 1.25rem;
}

.product-related__item {
	position: relative;
	padding: 1.25rem 1.375rem;
	overflow: hidden;
	border-radius: var(--radius-lg);
	transition: transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color 350ms;
}

.product-related__item:hover {
	border-color: transparent;
	transform: translateY(-4px);
	box-shadow: 0 30px 60px -30px rgb(10 31 60 / 40%);
}

.product-related__item .product-tile__symbol {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 11px;
}

.product-related__name {
	font-family: var(--font-display);
}

.product-detail__graphic {
	width: auto;
	max-width: 70%;
	border-radius: var(--radius);
	box-shadow: 0 24px 50px -28px rgb(10 31 60 / 45%);
}

/* Company Overview -------------------------------------------------------------------------------------------- */

/* The kit's reading measure for running text; the team photo below keeps the
   full width. */
.wwa-who__copy,
.wwa-who__text {
	max-width: 760px;
}

.wwa-who__text {
	font-size: 1.05rem;
}

.wwa-who__title {
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem);
}

/* Fact tiles and principles: the kit's white cards on a hairline. */
.wwa-fact,
.principle {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.wwa-fact__name {
	font-family: var(--font-display);
	font-weight: 600;
}

.principle {
	padding: 1.625rem;
}

.principle__title {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 600;
}

.principle__text {
	color: var(--fg-muted);
	font-size: 0.95rem;
}

.wwa-mission__label {
	color: var(--teal-soft);
	font-family: var(--font-display);
	letter-spacing: 0.06em;
}

.wwa-mission__text {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	line-height: 1.45;
}

/* News: section tabs as chips --------------------------------------------------------------------------------- */

.news-tabs {
	gap: 0.625rem;
	padding: 0;
	background: none;
	border-radius: 0;
}

.news-tabs__tab {
	padding: 0.5625rem 1.125rem;
	color: var(--fg-muted);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 100px;
	font-size: 0.88rem;
	font-weight: 500;
	transition: background 200ms, color 200ms, border-color 200ms;
}

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

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

/* The details as the kit's rows: an icon chip and the text, no card. */
.contact-detail {
	gap: 0.875rem;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.contact-details {
	gap: 1.5rem;
}

.contact-detail__icon {
	width: 44px;
	height: 44px;
	background: var(--muted);
	border-radius: 11px;
}

.contact-detail__title {
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
}

.contact-detail__text,
.contact-detail__text a {
	color: var(--fg-muted);
	font-size: 0.92rem;
}

.contact-detail__text a {
	text-decoration: none;
}

.contact-detail__text a:hover {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.contact-form-panel {
	padding: clamp(1.75rem, 3vw, 2.375rem);
	border-radius: var(--radius-xl);
	box-shadow: 0 30px 60px -40px rgb(10 31 60 / 30%);
}

.contact-form-panel__title {
	color: var(--fg);
	font-size: 1.6rem;
}

.contact-form-panel__title::after {
	background: var(--teal);
}

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

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	padding: 0.8125rem 0.9375rem;
	font-size: 0.95rem;
	transition: border-color 200ms, box-shadow 200ms;
}

.contact-form input:focus,
.contact-form textarea:focus {
	border-color: var(--brand);
	outline: none;
	box-shadow: 0 0 0 3px rgb(0 91 150 / 12%);
}

.contact-form__actions .button {
	justify-content: center;
	width: 100%;
	padding-block: 0.9375rem;
	font-size: 0.98rem;
}

/* The hours note is a whole-sentence link; without its underline it read as plain text. */
.contact-detail__note a {
	color: var(--brand);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* 404 ------------------------------------------------------------------------------------------------------------- */

.not-found {
	padding-block: clamp(4rem, 9vw, 7rem);
}

.not-found__inner {
	display: grid;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 900px) {
	.not-found__inner {
		grid-template-columns: 1.2fr 0.8fr;
	}
}

.not-found__title {
	margin: 0 0 1rem;
	color: #fff;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.08;
}

.not-found__text {
	max-width: 46ch;
	margin: 0 0 2rem;
	color: rgb(230 240 250 / 78%);
	font-size: 1.1rem;
}

.not-found__search {
	display: flex;
	gap: 0.625rem;
	max-width: 520px;
	margin-block-end: 1.25rem;
}

.not-found__search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.8125rem 1rem;
	color: #fff;
	background: rgb(255 255 255 / 8%);
	border: 1px solid rgb(255 255 255 / 20%);
	border-radius: var(--radius);
	font: inherit;
}

.not-found__search input[type="search"]::placeholder {
	color: rgb(255 255 255 / 55%);
}

.not-found__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

/* The hero's atom, standing in its column rather than floating over the band. */
.not-found__atom.hero__atom {
	position: relative;
	inset: auto;
	justify-self: center;
	width: min(320px, 70vw);
	height: min(320px, 70vw);
	transform: none;
}

@media (max-width: 899px) {
	.not-found__atom.hero__atom {
		display: none;
	}
}