/*
Theme Name: Talos Project
Author: Crowdpolicy
Description: Custom block theme for the Talos Project.
Requires at least: 6.7
Requires PHP: 7.4
Version: 1.0.91
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: talos
*/

/* Eyebrow / label font (Figma "Chakra Petch Regular") */
@font-face {
	font-family: "Chakra Petch";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/chakra-petch/chakra-petch-latin-400-normal.woff2") format("woff2");
}

/* Footer — values from Figma "10 · Footer" (node 345:5052) */
.talos-footer {
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--white);
}

.talos-footer__inner {
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 40px 80px 20px;
}

.talos-footer__inner > * {
	max-width: 1280px;
}

/* WordPress adds margin-block-start to every block after the first
   (block gap). Spacing in the footer comes from flex gaps instead. */
.talos-footer .talos-footer__inner > *,
.talos-footer .talos-footer__top > *,
.talos-footer .talos-footer__nav > *,
.talos-footer .talos-footer__col > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.talos-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px;
}

/* Identity: logo + partners */
.talos-footer__identity {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Figma "Logo" frame is 221 × 76.55, the artwork is cropped to it */
.talos-footer__brand {
	display: block;
}

.talos-footer__brand img {
	width: 221px;
	height: 76.55px;
	object-fit: cover;
}

.talos-footer__identity img {
	display: block;
	height: auto;
}

.talos-footer__partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}

.talos-footer__divider {
	width: 1px;
	height: 52px;
	background: var(--wp--preset--color--navy);
}

/* Navigation columns */
.talos-footer__nav {
	display: flex;
	gap: 120px;
}

.talos-footer__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.talos-footer__col > * {
	margin: 0;
}

.talos-footer__heading {
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-deep);
}

.talos-footer ul.talos-footer__links,
.talos-footer ul.talos-footer__legal,
.talos-footer ul.talos-footer__social {
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-footer ul.talos-footer__links {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.talos-footer__links li,
.talos-footer__legal li {
	margin: 0;
}

.talos-footer__links a,
.talos-footer__legal a {
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Figma "Nav link" State=Hover */
.talos-footer__links a:hover,
.talos-footer__links a:focus-visible,
.talos-footer__legal a:hover,
.talos-footer__legal a:focus-visible {
	color: var(--wp--preset--color--sky-strong);
}

/* Social icons */
.talos-footer ul.talos-footer__social {
	display: flex;
	gap: 10px;
}

.talos-footer__social a {
	display: block;
	transition: filter 0.2s ease;
}

/* Hover (Figma): a soft navy shadow under the circle */
.talos-footer__social a:hover,
.talos-footer__social a:focus-visible {
	filter: drop-shadow(0 6px 7px rgba(21, 45, 121, 0.25));
}

.talos-footer__social a:active {
	filter: none;
}

.talos-footer__social img,
.talos-footer__social svg {
	display: block;
}

/* Bottom row: 20px gap above the line, 20px below (Figma) */
.talos-footer .talos-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px 40px;
	margin-block-start: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.talos-footer__copy {
	margin: 0;
	font-size: 14px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-footer ul.talos-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 28px;
}

/*
 * Tablet — Figma 768 "10 · Footer": 32px at the sides, the logos and the two link columns stacked (24px,
 * 80px between the columns), the copyright on the left and the legal links on the right.
 */
@media (max-width: 1100px) {
	.talos-footer__inner {
		padding: 40px 32px 20px;
	}

	.talos-footer__top {
		flex-direction: column;
		gap: 24px;
	}

	.talos-footer__nav {
		gap: 80px;
	}
}

/*
 * Tablet from 721px up: the logos and the link columns share one line, so the right half is not left empty.
 * The partner logos are one SVG that shrinks to the space the link columns leave.
 */
@media (min-width: 721px) and (max-width: 1100px) {
	.talos-footer__top {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 32px;
	}

	.talos-footer__identity {
		flex: 1 1 0;
		min-width: 0;
	}

	.talos-footer__nav {
		flex: none;
		gap: 40px;
	}
}

@media (min-width: 961px) and (max-width: 1100px) {
	.talos-footer__nav {
		gap: 64px;
	}
}

/* Phone — Figma 390: 20px at the sides, 48px between the columns, the copyright above the legal links (24px) */
@media (max-width: 640px) {
	.talos-footer__inner {
		padding: 40px 20px 20px;
	}

	.talos-footer__nav {
		gap: 48px;
	}

	.talos-footer .talos-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}
}

/* Header — values from Figma "Header" (node 345:3965) */
.talos-header {
	position: relative;
	z-index: 100;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: 1312px;
	margin: 20px auto 0;
	padding: 12px 14px 12px 24px;
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 10px 30px -18px rgba(21, 45, 121, 0.35);
}

/* :where() = zero specificity, so component styles below always win */
:where(.talos-header) button {
	font: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* Logo: same files as the footer, scaled to 168px wide */
.talos-header__brand {
	display: block;
	flex-shrink: 0;
}

.talos-header__brand img {
	display: block;
	width: 168px;
	height: 63px;
}

.talos-header__menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 1;
	gap: 24px;
}

/* Primary navigation */
.talos-header__nav {
	margin: 0 auto;
}

.talos-header__list,
.talos-header__dropdown {
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-header__list {
	display: flex;
	gap: 30px;
}

.talos-header__item {
	position: relative;
}

.talos-header__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: color 0.2s ease;
}

.talos-header__link:hover,
.talos-header__link:focus-visible,
.talos-header__item--has-dropdown:hover .talos-header__trigger,
.talos-header__trigger[aria-expanded="true"] {
	color: var(--wp--preset--color--sky-strong);
}

.talos-header__chevron {
	transition: transform 0.2s ease;
}

.talos-header__item--has-dropdown:hover .talos-header__chevron,
.talos-header__trigger[aria-expanded="true"] .talos-header__chevron {
	transform: rotate(180deg);
}

/*
 * Dropdown panel (Figma "Nav dropdown"): it starts at the left edge of its menu item, 20px below it.
 * White card, 1px border, 8px padding, 2px between the items; each item is 240 x 40, radius 10.
 * --talos-dropdown-shift is set by header.js when the panel would leave the screen.
 */
.talos-header__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	translate: var(--talos-dropdown-shift, 0px) 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 258px; /* every dropdown has the same width: 240px items + 8px padding on both sides + the border */
	margin-top: 20px;
	padding: 8px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 16px 36px -8px rgba(21, 45, 121, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Invisible bridge so the panel stays open while the mouse moves down to it */
.talos-header__dropdown::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 21px;
}

.talos-header__item--has-dropdown:hover .talos-header__dropdown,
.talos-header__trigger[aria-expanded="true"] + .talos-header__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.talos-header__dropdown a {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 40px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 400;
	line-height: normal;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

/* The arrow at the right shows on hover (Figma "Item" has an Arrow layer) */
.talos-header__arrow {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--wp--preset--color--sky-strong);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

/* Hover: very light blue and medium weight. Pressed: light blue, the arrow in blue */
.talos-header__dropdown a:hover,
.talos-header__dropdown a:focus-visible {
	background: #EEF7FC;
	font-weight: 500;
}

.talos-header__dropdown a:active {
	background: var(--wp--preset--color--sky-soft);
}

.talos-header__dropdown a:hover .talos-header__arrow,
.talos-header__dropdown a:focus-visible .talos-header__arrow {
	opacity: 1;
	transform: translateX(0);
}

.talos-header__dropdown a:active .talos-header__arrow {
	color: var(--wp--preset--color--blue);
}

/* Search + Get Involved */
.talos-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.talos-header__search {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(21, 45, 121, 0.15);
	border-radius: 23px;
	background: rgba(255, 255, 255, 0.7);
	color: var(--wp--preset--color--navy);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.talos-header__search:hover,
.talos-header__search:focus-visible {
	border-color: var(--wp--preset--color--sky-strong);
	color: var(--wp--preset--color--sky-strong);
}

.talos-header__cta {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	box-sizing: border-box;
	padding: 0 23px;
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.talos-header__cta:hover,
.talos-header__cta:focus-visible {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* Mobile toggle (hamburger) — hidden on desktop */
.talos-header__toggle {
	display: none;
}

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

/*
 * Tablet & mobile — Figma "Landing — Tablet" (768) and "Landing — Mobile" (390): the bar runs edge to edge,
 * 16px from the top, solid white like on desktop; the menu button is a round outlined button like the search button.
 * The menu panel itself (stacked, opens under the bar) is ours: Figma only draws the closed bar.
 */
@media (max-width: 1100px) {
	.talos-header {
		flex-wrap: wrap;
		gap: 10px;
		max-width: none;
		margin: 16px 0 0;
		padding: 14px 24px;
	}

	.talos-header__toggle {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border: 1px solid rgba(21, 45, 121, 0.15);
		border-radius: 23px;
		background: rgba(255, 255, 255, 0.7);
		color: var(--wp--preset--color--navy);
	}

	.talos-header__toggle-bar,
	.talos-header__toggle-bar::before,
	.talos-header__toggle-bar::after {
		display: block;
		width: 20px;
		height: 2px;
		border-radius: 1px;
		background: currentColor;
		transition: transform 0.2s ease, background-color 0.2s ease;
	}

	.talos-header__toggle-bar {
		position: relative;
	}

	.talos-header__toggle-bar::before,
	.talos-header__toggle-bar::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.talos-header__toggle-bar::before {
		top: -6px;
	}

	.talos-header__toggle-bar::after {
		top: 6px;
	}

	.talos-header__toggle[aria-expanded="true"] .talos-header__toggle-bar {
		background: transparent;
	}

	.talos-header__toggle[aria-expanded="true"] .talos-header__toggle-bar::before {
		transform: translateY(6px) rotate(45deg);
	}

	.talos-header__toggle[aria-expanded="true"] .talos-header__toggle-bar::after {
		transform: translateY(-6px) rotate(-45deg);
	}

	.talos-header__menu {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 12px 0 8px;
	}

	.talos-header.is-open .talos-header__menu {
		display: flex;
	}

	.talos-header__nav {
		margin: 0;
	}

	.talos-header__list {
		flex-direction: column;
		gap: 16px;
	}

	/* Dropdowns open inline on mobile, only by tapping */
	.talos-header__dropdown {
		position: static;
		translate: none;
		width: auto;
		min-width: 0;
		display: none;
		margin-top: 12px;
		padding: 0 0 0 16px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: none;
		gap: 12px;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.talos-header__dropdown::before {
		display: none;
	}

	.talos-header__dropdown a {
		width: auto;
		height: auto;
		padding: 0;
		border-radius: 0;
	}

	.talos-header__dropdown a:hover,
	.talos-header__dropdown a:focus-visible {
		background: none;
	}

	.talos-header__trigger[aria-expanded="true"] + .talos-header__dropdown {
		display: flex;
	}

	.talos-header__item--has-dropdown:hover .talos-header__chevron {
		transform: none;
	}

	.talos-header__trigger[aria-expanded="true"] .talos-header__chevron {
		transform: rotate(180deg);
	}

	.talos-header__arrow {
		display: none;
	}
}

/*
 * Side space of the inner pages (not the home page, which has its own Figma values): the same 32px on tablet and
 * 20px on phones as the home page News section, the header and the footer.
 */
:root {
	--talos-gutter: 80px;
}

@media (max-width: 1100px) {
	:root {
		--talos-gutter: 32px;
	}
}

@media (max-width: 640px) {
	:root {
		--talos-gutter: 20px;
	}
}

/* Hero — values from Figma "00 · Header + Hero" */
:root {
	--talos-header-offset: 107px; /* header margin 20 + height 87: the hero starts underneath it */
}

/* The hero overlaps the header on purpose */
main > .talos-hero {
	margin-block-start: calc(-1 * var(--talos-header-offset));
}

.talos-hero {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	padding: var(--talos-header-offset) 0 40px;
	/* Fitted to pixels measured on the Figma frame: blue top-right, lime bottom-left, light blue base below the middle */
	background:
		radial-gradient(42% 49% at 100% 0%, rgba(58, 166, 220, 0.88) 0%, rgba(58, 166, 220, 0) 100%),
		radial-gradient(44% 48% at 0% 100%, rgba(209, 223, 131, 0.8) 0%, rgba(209, 223, 131, 0) 100%),
		linear-gradient(180deg, #fff 45%, #EEF7FC 100%);
}

.talos-hero__inner {
	position: relative;
	box-sizing: border-box;
	max-width: 1440px;
	min-height: 600px;
	margin: 0 auto;
	padding: 72px 80px 56px;
}

.talos-hero__copy {
	position: relative;
	z-index: 1;
	max-width: 640px;
}

.talos-hero__title {
	margin: 0;
	max-width: 600px;
	font-size: 72px;
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--navy);
}

/*
 * In Figma one blue → green gradient runs across the whole title width.
 * "real" sits at the right end of line 2 and "innovations" at the left of
 * line 3, so each word gets its own slice of that gradient.
 */
.talos-hero__accent {
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.talos-hero__accent--green {
	background-image: linear-gradient(90deg, #73B77E 0%, #89BD5A 100%);
}

.talos-hero__accent--gradient {
	background-image: linear-gradient(90deg, #3AA6DC 0%, #7DBA6D 100%);
}

.talos-hero__lead {
	max-width: 560px;
	margin: 28px 0 0;
	font-size: 21px;
	line-height: 1.5;
	color: var(--wp--preset--color--text-secondary);
}

.talos-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 32px;
}

/* Buttons */
.talos-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 56px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.talos-button--primary {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.talos-button--primary:hover,
.talos-button--primary:focus-visible {
	background: var(--wp--preset--color--navy-deep);
}

.talos-button--secondary {
	border-color: rgba(21, 45, 121, 0.15);
	background: rgba(255, 255, 255, 0.7);
	color: var(--wp--preset--color--navy);
}

.talos-button--secondary:hover,
.talos-button--secondary:focus-visible {
	border-color: var(--wp--preset--color--navy);
}

/* Animated spiral: five copies of one strand, stacked and animated separately */
.talos-hero__spiral {
	position: absolute;
	top: 90px;
	right: 94px;
	width: 578px;
	height: 521px;
	pointer-events: none;
}

.talos-hero__strand {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform-origin: center;
	will-change: transform;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.talos-hero__strand--1 {
	opacity: 1;
	animation-name: talos-strand-1;
}

.talos-hero__strand--2 {
	opacity: 0.5;
	animation-name: talos-strand-2;
}

.talos-hero__strand--3 {
	opacity: 0.38;
	animation-name: talos-strand-3;
}

.talos-hero__strand--4 {
	opacity: 0.28;
	animation-name: talos-strand-4;
}

.talos-hero__strand--5 {
	opacity: 0.2;
	animation-name: talos-strand-5;
}

@keyframes talos-strand-1 {
	0% { rotate: 0.0rad; translate: 0 0px; scale: 1 1; }
	5% { rotate: -0.022rad; translate: 0 4.702px; scale: 0.997 1.024; }
	10% { rotate: -0.041rad; translate: 0 7.609px; scale: 0.987 1.028; }
	15% { rotate: -0.057rad; translate: 0 7.609px; scale: 0.971 1.009; }
	20% { rotate: -0.067rad; translate: 0 4.702px; scale: 0.952 0.982; }
	25% { rotate: -0.07rad; translate: 0 0px; scale: 0.93 0.97; }
	30% { rotate: -0.067rad; translate: 0 -4.702px; scale: 0.908 0.982; }
	35% { rotate: -0.057rad; translate: 0 -7.609px; scale: 0.889 1.009; }
	40% { rotate: -0.041rad; translate: 0 -7.609px; scale: 0.873 1.028; }
	45% { rotate: -0.022rad; translate: 0 -4.702px; scale: 0.863 1.024; }
	50% { rotate: 0.0rad; translate: 0 0px; scale: 0.86 1; }
	55% { rotate: 0.021rad; translate: 0 4.702px; scale: 0.863 0.976; }
	60% { rotate: 0.041rad; translate: 0 7.609px; scale: 0.873 0.972; }
	65% { rotate: 0.056rad; translate: 0 7.609px; scale: 0.889 0.991; }
	70% { rotate: 0.066rad; translate: 0 4.702px; scale: 0.908 1.018; }
	75% { rotate: 0.069rad; translate: 0 0px; scale: 0.93 1.03; }
	80% { rotate: 0.066rad; translate: 0 -4.702px; scale: 0.952 1.018; }
	85% { rotate: 0.056rad; translate: 0 -7.609px; scale: 0.971 0.991; }
	90% { rotate: 0.041rad; translate: 0 -7.609px; scale: 0.987 0.972; }
	95% { rotate: 0.021rad; translate: 0 -4.702px; scale: 0.997 0.976; }
	100% { rotate: 0.0rad; translate: 0 0px; scale: 1 1; }
}

@keyframes talos-strand-2 {
	0% { rotate: 0.116rad; translate: 0 11.413px; scale: 0.751 1.028; }
	5% { rotate: 0.122rad; translate: 0 11.413px; scale: 0.64 1.024; }
	10% { rotate: 0.116rad; translate: 0 7.053px; scale: 0.529 1; }
	15% { rotate: 0.098rad; translate: 0 0px; scale: 0.428 0.976; }
	20% { rotate: 0.071rad; translate: 0 -7.053px; scale: 0.349 0.972; }
	25% { rotate: 0.037rad; translate: 0 -11.413px; scale: 0.298 0.991; }
	30% { rotate: 0.0rad; translate: 0 -11.413px; scale: 0.28 1.018; }
	35% { rotate: -0.038rad; translate: 0 -7.053px; scale: 0.298 1.03; }
	40% { rotate: -0.072rad; translate: 0 0px; scale: 0.349 1.018; }
	45% { rotate: -0.099rad; translate: 0 7.053px; scale: 0.428 0.991; }
	50% { rotate: -0.117rad; translate: 0 11.413px; scale: 0.529 0.972; }
	55% { rotate: -0.123rad; translate: 0 11.413px; scale: 0.64 0.976; }
	60% { rotate: -0.117rad; translate: 0 7.053px; scale: 0.751 1; }
	65% { rotate: -0.099rad; translate: 0 0px; scale: 0.852 1.024; }
	70% { rotate: -0.072rad; translate: 0 -7.053px; scale: 0.931 1.028; }
	75% { rotate: -0.038rad; translate: 0 -11.413px; scale: 0.982 1.009; }
	80% { rotate: 0.0rad; translate: 0 -11.413px; scale: 1 0.982; }
	85% { rotate: 0.037rad; translate: 0 -7.053px; scale: 0.982 0.97; }
	90% { rotate: 0.071rad; translate: 0 0px; scale: 0.931 0.982; }
	95% { rotate: 0.098rad; translate: 0 7.053px; scale: 0.852 1.009; }
	100% { rotate: 0.116rad; translate: 0 11.413px; scale: 0.751 1.028; }
}

@keyframes talos-strand-3 {
	0% { rotate: -0.072rad; translate: 0 7.053px; scale: 0.349 1.018; }
	5% { rotate: -0.038rad; translate: 0 0px; scale: 0.298 0.991; }
	10% { rotate: 0.0rad; translate: 0 -7.053px; scale: 0.28 0.972; }
	15% { rotate: 0.037rad; translate: 0 -11.413px; scale: 0.298 0.976; }
	20% { rotate: 0.071rad; translate: 0 -11.413px; scale: 0.349 1; }
	25% { rotate: 0.098rad; translate: 0 -7.053px; scale: 0.428 1.024; }
	30% { rotate: 0.116rad; translate: 0 0px; scale: 0.529 1.028; }
	35% { rotate: 0.122rad; translate: 0 7.053px; scale: 0.64 1.009; }
	40% { rotate: 0.116rad; translate: 0 11.413px; scale: 0.751 0.982; }
	45% { rotate: 0.098rad; translate: 0 11.413px; scale: 0.852 0.97; }
	50% { rotate: 0.071rad; translate: 0 7.053px; scale: 0.931 0.982; }
	55% { rotate: 0.037rad; translate: 0 0px; scale: 0.982 1.009; }
	60% { rotate: 0.0rad; translate: 0 -7.053px; scale: 1 1.028; }
	65% { rotate: -0.038rad; translate: 0 -11.413px; scale: 0.982 1.024; }
	70% { rotate: -0.072rad; translate: 0 -11.413px; scale: 0.931 1; }
	75% { rotate: -0.099rad; translate: 0 -7.053px; scale: 0.852 0.976; }
	80% { rotate: -0.117rad; translate: 0 0px; scale: 0.751 0.972; }
	85% { rotate: -0.123rad; translate: 0 7.053px; scale: 0.64 0.991; }
	90% { rotate: -0.117rad; translate: 0 11.413px; scale: 0.529 1.018; }
	95% { rotate: -0.099rad; translate: 0 11.413px; scale: 0.428 1.03; }
	100% { rotate: -0.072rad; translate: 0 7.053px; scale: 0.349 1.018; }
}

@keyframes talos-strand-4 {
	0% { rotate: -0.072rad; translate: 0 -7.053px; scale: 0.349 0.982; }
	5% { rotate: -0.099rad; translate: 0 -11.413px; scale: 0.428 0.97; }
	10% { rotate: -0.117rad; translate: 0 -11.413px; scale: 0.529 0.982; }
	15% { rotate: -0.123rad; translate: 0 -7.053px; scale: 0.64 1.009; }
	20% { rotate: -0.117rad; translate: 0 0px; scale: 0.751 1.028; }
	25% { rotate: -0.099rad; translate: 0 7.053px; scale: 0.852 1.024; }
	30% { rotate: -0.072rad; translate: 0 11.413px; scale: 0.931 1; }
	35% { rotate: -0.038rad; translate: 0 11.413px; scale: 0.982 0.976; }
	40% { rotate: 0.0rad; translate: 0 7.053px; scale: 1 0.972; }
	45% { rotate: 0.037rad; translate: 0 0px; scale: 0.982 0.991; }
	50% { rotate: 0.071rad; translate: 0 -7.053px; scale: 0.931 1.018; }
	55% { rotate: 0.098rad; translate: 0 -11.413px; scale: 0.852 1.03; }
	60% { rotate: 0.116rad; translate: 0 -11.413px; scale: 0.751 1.018; }
	65% { rotate: 0.122rad; translate: 0 -7.053px; scale: 0.64 0.991; }
	70% { rotate: 0.116rad; translate: 0 0px; scale: 0.529 0.972; }
	75% { rotate: 0.098rad; translate: 0 7.053px; scale: 0.428 0.976; }
	80% { rotate: 0.071rad; translate: 0 11.413px; scale: 0.349 1; }
	85% { rotate: 0.037rad; translate: 0 11.413px; scale: 0.298 1.024; }
	90% { rotate: 0.0rad; translate: 0 7.053px; scale: 0.28 1.028; }
	95% { rotate: -0.038rad; translate: 0 0px; scale: 0.298 1.009; }
	100% { rotate: -0.072rad; translate: 0 -7.053px; scale: 0.349 0.982; }
}

@keyframes talos-strand-5 {
	0% { rotate: 0.116rad; translate: 0 -11.413px; scale: 0.751 0.972; }
	5% { rotate: 0.098rad; translate: 0 -7.053px; scale: 0.852 0.991; }
	10% { rotate: 0.071rad; translate: 0 0px; scale: 0.931 1.018; }
	15% { rotate: 0.037rad; translate: 0 7.053px; scale: 0.982 1.03; }
	20% { rotate: 0.0rad; translate: 0 11.413px; scale: 1 1.018; }
	25% { rotate: -0.038rad; translate: 0 11.413px; scale: 0.982 0.991; }
	30% { rotate: -0.072rad; translate: 0 7.053px; scale: 0.931 0.972; }
	35% { rotate: -0.099rad; translate: 0 0px; scale: 0.852 0.976; }
	40% { rotate: -0.117rad; translate: 0 -7.053px; scale: 0.751 1; }
	45% { rotate: -0.123rad; translate: 0 -11.413px; scale: 0.64 1.024; }
	50% { rotate: -0.117rad; translate: 0 -11.413px; scale: 0.529 1.028; }
	55% { rotate: -0.099rad; translate: 0 -7.053px; scale: 0.428 1.009; }
	60% { rotate: -0.072rad; translate: 0 0px; scale: 0.349 0.982; }
	65% { rotate: -0.038rad; translate: 0 7.053px; scale: 0.298 0.97; }
	70% { rotate: 0.0rad; translate: 0 11.413px; scale: 0.28 0.982; }
	75% { rotate: 0.037rad; translate: 0 11.413px; scale: 0.298 1.009; }
	80% { rotate: 0.071rad; translate: 0 7.053px; scale: 0.349 1.028; }
	85% { rotate: 0.098rad; translate: 0 0px; scale: 0.428 1.024; }
	90% { rotate: 0.116rad; translate: 0 -7.053px; scale: 0.529 1; }
	95% { rotate: 0.122rad; translate: 0 -11.413px; scale: 0.64 0.976; }
	100% { rotate: 0.116rad; translate: 0 -11.413px; scale: 0.751 0.972; }
}

/* Steps strip */
.talos-hero__strip {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 19px 25px;
	border: 1px solid rgba(21, 45, 121, 0.06); /* navy at ~6%, read from the Figma screenshot pixels */
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.8);
}

.talos-hero__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Chakra Petch", "Inter", sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

.talos-hero__partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
}

.talos-hero__partners img {
	display: block;
	height: auto;
}

.talos-hero__divider {
	width: 1px;
	height: 52px;
	background: var(--wp--preset--color--blue);
}

@media (prefers-reduced-motion: reduce) {
	.talos-hero__strand {
		animation: none;
	}
}

/*
 * Tablet — Figma "Landing — Tablet" (768) "00 · Header + Hero". The hero still starts under the header
 * (16px + 91px bar = the 107px offset), then 20px, then the copy 55px lower; copy, spiral and strip are stacked.
 * The two glows are the ellipses of the frame: blue at the top right, lime at the bottom left.
 */
@media (max-width: 1100px) {
	.talos-hero {
		padding: calc(var(--talos-header-offset) + 20px) 0 40px;
		background:
			radial-gradient(461px 961px at 100% 0, #4FB1E3 0%, rgba(114, 195, 237, 0.55) 35%, rgba(114, 195, 237, 0) 70%),
			radial-gradient(422px 824px at 0 100%, #E3EC9A 0%, rgba(209, 223, 131, 0.5) 35%, rgba(209, 223, 131, 0) 70%),
			linear-gradient(180deg, #fff 0%, #EEF7FC 100%);
	}

	.talos-hero__inner {
		min-height: 0;
		padding: 55px 32px 20px;
	}

	.talos-hero__copy {
		max-width: none;
	}

	.talos-hero__title {
		max-width: 556px;
		font-size: 56px;
		font-weight: 700;
		line-height: 55px;
		letter-spacing: -0.05em;
	}

	.talos-hero__lead {
		max-width: 549px;
		font-size: 18px;
		line-height: 28px;
	}

	.talos-hero__actions {
		align-items: flex-start;
		gap: 12px;
		margin-top: 32px;
	}

	.talos-hero .talos-button {
		font-size: 16px;
		border-radius: 14px;
	}

	.talos-hero .talos-button--primary {
		min-height: 58px;
		padding: 0 28px;
	}

	.talos-hero .talos-button--secondary {
		min-height: 60px;
		padding: 0 29px;
		border-color: rgba(21, 45, 121, 0.3);
		background: rgba(255, 255, 255, 0.6);
	}

	.talos-hero__spiral {
		position: relative;
		top: auto;
		right: auto;
		/* Figma: a 593px high box 32px under the buttons, with the 565px strand centred in it, 65px from its top */
		width: min(100%, 565px);
		height: auto;
		aspect-ratio: 578 / 521;
		margin: 97px auto 0;
	}

	.talos-hero__strip {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 24px;
		width: calc(100% - 38px);
		padding: 19px 32px;
	}

	.talos-hero__partners img {
		max-width: 100%;
	}
}

/* Phone — Figma "Landing — Mobile" (390): 91px bar offset, 20px sides, 40px title, buttons and labels stacked */
@media (max-width: 640px) {
	:root {
		--talos-header-offset: 91px; /* margin 16 + bar 75 */
	}

	.talos-hero {
		background:
			radial-gradient(234px 892px at 100% 0, #4FB1E3 0%, rgba(114, 195, 237, 0.55) 35%, rgba(114, 195, 237, 0) 70%),
			radial-gradient(214px 764px at 0 100%, #E3EC9A 0%, rgba(209, 223, 131, 0.5) 35%, rgba(209, 223, 131, 0) 70%),
			linear-gradient(180deg, #fff 0%, #EEF7FC 100%);
	}

	.talos-hero__inner {
		padding: 55px 20px 20px;
	}

	.talos-hero__title {
		font-size: 40px;
		line-height: 39px;
		letter-spacing: -0.05em;
	}

	.talos-hero__actions {
		flex-direction: column;
	}

	/* Figma: the 350px box sits 24px under the buttons, the 292px strand is centred in it, 34px from its top */
	.talos-hero__spiral {
		width: min(100%, 292px);
		margin-top: 58px;
	}

	.talos-hero__strip {
		width: calc(100% - 30px);
		padding: 19px 20px;
	}

	.talos-hero__steps {
		flex-direction: column;
		gap: 22px;
	}

	.talos-hero__partners {
		width: 100%;
	}

	.talos-hero__partners img {
		width: 100%;
	}
}

/*
 * Coming soon screen (the hero without the home page's tall layout): long titles and long words wrap instead of
 * overflowing, the spiral sits closer to the buttons and the buttons share the width on small screens.
 */
.talos-hero--soon .talos-hero__title,
.talos-hero--soon .talos-hero__lead {
	overflow-wrap: anywhere;
	hyphens: auto;
}

@media (max-width: 1100px) {
	.talos-hero--soon .talos-hero__title {
		max-width: none;
	}

	.talos-hero--soon .talos-hero__spiral {
		width: min(100%, 420px);
		margin-top: 56px;
	}
}

@media (max-width: 640px) {
	.talos-hero--soon .talos-hero__title {
		font-size: clamp(30px, 10.5vw, 40px);
		line-height: 1.05;
	}

	.talos-hero--soon .talos-hero__actions {
		align-items: stretch;
	}

	.talos-hero--soon .talos-button {
		justify-content: center;
		width: 100%;
		min-height: 54px;
		text-align: center;
	}

	.talos-hero--soon .talos-hero__spiral {
		width: min(100%, 240px);
		margin-top: 40px;
	}
}

/* Eyebrow: small uppercase label above section titles (ABOUT, NEWS, ...) */
.talos-eyebrow {
	margin: 0;
	font-family: "Chakra Petch", "Inter", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sky-strong);
}

/* Arrow link with a sky underline */
.talos-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 10px 0 12px; /* Figma button: 41px high, the 2px line sits inside the bottom padding */
	font-size: 16px;
	font-weight: 600;
	line-height: 19px;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: color 0.2s ease;
}

/* The underline is a pseudo-element so it can grow with the arrow */
.talos-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--sky);
	transition: right 0.2s ease, background-color 0.2s ease;
}

.talos-link svg {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

/* Hover: text turns blue, the arrow nudges right and the line grows with it */
.talos-link:hover,
.talos-link:focus-visible {
	color: var(--wp--preset--color--sky-strong);
}

.talos-link:hover::after,
.talos-link:focus-visible::after {
	right: -3px;
	background: var(--wp--preset--color--navy);
}

.talos-link:hover svg,
.talos-link:focus-visible svg {
	transform: translateX(3px);
}

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

/* About — values from Figma: columns 411 + 48 + 821 = 1280 */
.talos-about {
	background: var(--wp--preset--color--page);
}

.talos-about__inner {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 411fr 821fr;
	column-gap: 48px;
	align-items: start;
	max-width: 1360px; /* 1280 content + 2 × 40 side padding */
	margin: 0 auto;
	padding: 80px 40px 100px;
}

.talos-about__intro .talos-eyebrow {
	margin-bottom: 14px;
}

.talos-about__title,
.talos-section-title {
	margin: 0;
	font-size: 50px;
	font-weight: 700;
	line-height: 50px;
	letter-spacing: -0.045em;
	color: var(--wp--preset--color--navy);
}

.talos-about__lead {
	max-width: 612px; /* Figma frame is 618; 612 makes the lines wrap exactly as in the design */
	margin: 0;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--navy);
}

.talos-about__highlight {
	color: var(--wp--preset--color--sky-strong);
}

.talos-about__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 32px;
}

.talos-about__badge {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 17px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-about__badge img {
	display: block;
	width: 44.81px;
	height: 44px;
}

/*
 * Tablet — Figma 768 "01 · About": one column, 64px at the sides (32 around the frame + 32 inside the
 * section), 56px above and below, 32px between the heading and the text. The h2 size below is the one
 * every section title (.talos-section-title) takes on tablet and phone.
 */
@media (max-width: 1100px) {
	.talos-about__inner {
		grid-template-columns: 1fr;
		row-gap: 32px;
		padding: 56px 64px;
	}

	.talos-about__title,
	.talos-section-title {
		font-size: 40px;
		line-height: 40px;
	}

	.talos-about__lead {
		max-width: 618px;
		font-size: 26px;
		line-height: 36px;
		letter-spacing: -0.4px;
	}
}

/* Phone — Figma 390: 40px at the sides, 40px above and below, 24px between the heading and the text, the badge text under its logo */
@media (max-width: 640px) {
	.talos-about__inner {
		row-gap: 24px;
		padding: 40px;
	}

	.talos-about__title,
	.talos-section-title {
		font-size: 32px;
		line-height: 32px;
		letter-spacing: -1.4px;
	}

	.talos-about__lead {
		font-size: 24px;
		line-height: 34px;
	}

	.talos-about__more {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.talos-about__badge {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Link that stretches to fill the row; its underline runs to the far edge */
.talos-link--fill {
	flex: 1;
	min-width: 0;
}

/* Consortium — "Who's behind TALOS?" (Figma: 1440 × 331.86, content 144px from the edge) */
.talos-consortium {
	background: var(--wp--preset--color--white);
}

.talos-consortium__inner {
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding: 64px;
}

/* Two equal columns (576 + 576 in Figma): the link starts at the middle and its line fills the right half */
.talos-consortium__header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
}

.talos-consortium__intro .talos-eyebrow {
	margin-bottom: 14px;
}

/* Logo row: clipped at the edges, the track scrolls left (Figma "Logo track", 30s loop) */
.talos-consortium__logos {
	overflow: hidden;
	min-height: 53.86px; /* 331.86 − 64 − 80 − 70 − 64 */
	margin-top: 70px;
}

.talos-consortium__track {
	display: flex;
	align-items: center;
	gap: 56px;
	width: max-content;
	margin: 0;
	padding: 0 56px 0 0; /* trailing gap, so two copies of the list are exactly 2 × one loop */
	list-style: none;
	animation: talos-logo-track 27.5s linear infinite; /* 52.4px/s (Figma: 30s per 1571px) over one 1439px loop */
}

.talos-consortium__track li {
	flex: none;
}

.talos-consortium__track img {
	display: block;
	width: auto;
	height: auto;
	max-width: 180px;
	max-height: 40px;
}

/* The list is printed twice: moving it by half its width loops without a jump */
@keyframes talos-logo-track {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.talos-consortium__track {
		animation: none;
	}
}

/* Tablet — Figma 768 "02 · Who we are": 64px at the sides, 56px above and below, the link under the heading, 70px to the logos */
@media (max-width: 1100px) {
	.talos-consortium__inner {
		padding: 56px 64px;
	}

	.talos-consortium__header {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 24px;
	}

	.talos-consortium__logos {
		margin-top: 70px;
	}
}

/* Phone — Figma 390: 40px at the sides and above and below */
@media (max-width: 640px) {
	.talos-consortium__inner {
		padding: 40px;
	}
}

/* Eyebrow in navy (The Vision · 2030) */
.talos-eyebrow--navy {
	color: var(--wp--preset--color--navy);
}

/* Vision — Figma: card 1392 wide with 80px side padding (1232 content), heading 931 × 214, button 204 × 41 */
.talos-home-vision {
	box-sizing: border-box;
	padding: 50px 24px;
	background: var(--wp--preset--color--page);
}

.talos-home-vision__card {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	max-width: 1392px;
	margin: 0 auto;
	padding: 100px 80px;
	border-radius: 40px;
	/* Colours read from pixels of the Figma frame: very light blue, blue top-right, lime bottom-left */
	background:
		radial-gradient(ellipse 560px 320px at 100% 0%, rgba(114, 195, 237, 0.72) 0%, rgba(114, 195, 237, 0) 100%),
		radial-gradient(ellipse 480px 280px at 0% 100%, rgba(228, 237, 160, 0.98) 0%, rgba(228, 237, 160, 0.8) 20%, rgba(228, 237, 160, 0.45) 50%, rgba(228, 237, 160, 0) 100%),
		#F4FAFD;
}

.talos-home-vision__art {
	position: absolute;
	top: 0;
	right: 0;
	width: 551px;
	height: 543px;
	pointer-events: none;
}

.talos-home-vision__art img {
	display: block;
	width: 100%;
	height: 100%;
}

.talos-home-vision__content {
	position: relative;
	z-index: 1;
}

.talos-home-vision__title {
	max-width: 931px;
	margin: 35.3px 0 36px;
	font-size: 64px;
	font-weight: 400;
	line-height: 71.5px;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--navy);
}

/* One blue → green gradient across the whole 931px heading; the last line shows 0 → 83% of it */
.talos-home-vision__accent {
	background-image: linear-gradient(90deg, #3AA6DC 0, #95C146 931px);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/*
 * Tablet — Figma 768 "03 · The Vision 2030": the card keeps the 24px / 50px frame, 56px / 32px inside, radius 40.
 * The title is 48/52; the blue → green runs over the 656px of the text column. The line art is the desktop
 * file, left as it is and pushed out of the card on the right and the top, so the card clips it.
 */
@media (max-width: 1100px) {
	.talos-home-vision__card {
		padding: 56px 32px;
	}

	.talos-home-vision__title {
		margin: 35.3px 0 36px;
		font-size: 48px;
		line-height: 52px;
		letter-spacing: -1.4px;
	}

	.talos-home-vision__accent {
		background-image: linear-gradient(90deg, #3AA6DC 0, #95C146 656px);
	}

	/* The glows are smaller on the narrower card (the desktop ones were sized for 1392px) */
	.talos-home-vision__card {
		background:
			radial-gradient(ellipse 300px 180px at 100% 0%, rgba(114, 195, 237, 0.72) 0%, rgba(114, 195, 237, 0) 100%),
			radial-gradient(ellipse 270px 250px at 0% 100%, rgba(228, 237, 160, 0.98) 0%, rgba(228, 237, 160, 0.8) 20%, rgba(228, 237, 160, 0.45) 50%, rgba(228, 237, 160, 0) 100%),
			#F4FAFD;
	}

	/* Figma squeezes the art a little (496 × 610 frame, turned 86°), so it is not scaled evenly here */
	.talos-home-vision__art {
		top: -17px;
		right: -100px;
		width: 518px;
		height: 456px;
	}

	.talos-home-vision__art img {
		object-fit: fill;
	}
}

/* Phone — Figma 390: 20px / 40px inside the card, title 34/37, the art at 60% */
@media (max-width: 640px) {
	.talos-home-vision__card {
		padding: 40px 20px;
	}

	.talos-home-vision__title {
		font-size: 34px;
		line-height: 37px;
		letter-spacing: -1px;
	}

	.talos-home-vision__accent {
		background-image: linear-gradient(90deg, #3AA6DC 0, #95C146 302px);
	}

	.talos-home-vision__card {
		background:
			radial-gradient(ellipse 190px 170px at 100% 0%, rgba(114, 195, 237, 0.72) 0%, rgba(114, 195, 237, 0) 100%),
			radial-gradient(ellipse 170px 230px at 0% 100%, rgba(228, 237, 160, 0.98) 0%, rgba(228, 237, 160, 0.8) 20%, rgba(228, 237, 160, 0.45) 50%, rgba(228, 237, 160, 0) 100%),
			#F4FAFD;
	}

	.talos-home-vision__art {
		top: 24px;
		right: -112px;
		width: 330px;
		height: 326px;
	}
}

/* Generic pages and posts (page.php, single.php, index.php): title + the editor content */
.talos-default-page {
	box-sizing: border-box;
	padding: 64px 40px 100px;
}

.talos-default-page__title {
	margin: 0 0 32px;
	font-size: 48px;
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--navy);
}

/* Title and content sit in a 720px column, centred (theme.json contentSize) */
.talos-default-page > .talos-default-page__title,
.talos-default-page > .entry-content,
.talos-default-page > article {
	max-width: 720px;
	margin-right: auto;
	margin-left: auto;
}

/* Browsers give blockquote and figure a 40px side margin; the block editor content expects none (:where keeps the specificity at zero) */
:where(.talos-default-page .entry-content) :is(blockquote, figure) {
	margin-right: 0;
	margin-left: 0;
}

.talos-default-page .entry-content {
	font-size: 18px;
	line-height: 1.65;
	color: var(--wp--preset--color--navy);
}

@media (max-width: 1100px) {
	.talos-default-page {
		padding: 40px var(--talos-gutter) 64px;
	}

	.talos-default-page__title {
		font-size: 36px;
	}
}

@media (max-width: 640px) {
	.talos-default-page__title {
		font-size: 32px;
	}
}

/* About page — values from Figma "About & Who we are" (node 2132:615) */

/* Like the front-page hero, the page hero starts underneath the header */
.talos-page {
	margin-block-start: calc(-1 * var(--talos-header-offset));
}

/* Eyebrow on this page: 12px, sky-strong (the home page uses 11px sky) */
.talos-page .talos-eyebrow {
	font-size: 12px;
	line-height: normal;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--sky-strong);
}

.talos-page-title {
	margin: 0;
	font-size: 50px;
	font-weight: 700;
	line-height: 50px;
	letter-spacing: -0.045em;
	color: var(--wp--preset--color--navy);
}

.talos-page-lead {
	margin: 0;
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--text-secondary);
}

/* Light button for dark cards ("Button / On dark") */
/* Hover: lime fill and a soft shadow (both read from the pixels of the Figma hover: #D1DF83, shadow about 12% black) */
.talos-button--light {
	min-height: 50px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy-deep);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.talos-button--light:hover,
.talos-button--light:focus-visible {
	background: var(--wp--preset--color--lime);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Page hero: header sits on top of it, so the top padding includes the header offset */
.talos-page-hero {
	box-sizing: border-box;
	padding: calc(var(--talos-header-offset) + 44px) 0 48px;
	/* Blue glow top-right, lime glow bottom-left, white to light blue underneath (Figma radial gradients) */
	background:
		radial-gradient(ellipse 864px 278px at 100% 0%, #4FB1E3 0%, rgba(114, 195, 237, 0.55) 35%, rgba(114, 195, 237, 0) 70%),
		radial-gradient(ellipse 792px 238px at 0% 100%, #E3EC9A 0%, rgba(209, 223, 131, 0.5) 35%, rgba(209, 223, 131, 0) 70%),
		linear-gradient(180deg, #fff 0%, #EEF7FC 100%);
}

.talos-page-hero__inner {
	box-sizing: border-box;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 80px;
}

.talos-breadcrumb ol {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: normal;
	color: var(--wp--preset--color--navy);
}

.talos-breadcrumb li + li::before {
	content: "/";
	margin-right: 10px;
	color: var(--wp--preset--color--text-tertiary);
}

.talos-breadcrumb a {
	color: var(--wp--preset--color--text-tertiary);
	text-decoration: none;
	transition: color 0.2s ease;
}

.talos-breadcrumb a:hover,
.talos-breadcrumb a:focus-visible {
	color: var(--wp--preset--color--navy);
}

.talos-page-hero__title {
	max-width: 1063px;
	margin: 16px 0 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -0.045em;
	color: var(--wp--preset--color--navy);
}

.talos-page-hero__lead {
	max-width: 847px;
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--astronaut);
}

/* 01 · The Project */
.talos-project {
	padding: 80px;
}

.talos-project__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 56px;
	max-width: 1280px;
	margin: 0 auto;
}

.talos-project__row {
	display: flex;
	align-items: flex-start;
	gap: 80px;
}

.talos-project__aside {
	display: flex;
	flex: 0 0 420px;
	flex-direction: column;
	gap: 28px;
}

.talos-project__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.talos-project__image {
	height: 300px;
	border-radius: 24px;
	overflow: hidden;
}

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

.talos-project__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.talos-project__lead {
	margin: 0;
	font-size: 30px;
	line-height: 42px;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--navy);
}

.talos-project__para {
	margin: 0;
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--text-secondary);
}

/* Key facts: four glass cards on a dark panel with two blurred glows */
.talos-facts {
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	padding: 16px;
	overflow: hidden;
	border-radius: 28px;
	background: var(--wp--preset--color--astronaut);
}

.talos-facts__glow,
.talos-vision__glow,
.talos-join__glow {
	position: absolute;
	max-width: none;
	pointer-events: none;
}

.talos-facts__glow--1 {
	top: -340px;
	left: -260px;
	width: 700px;
	height: 700px;
}

.talos-facts__glow--2 {
	top: -100px;
	right: -240px;
	width: 660px;
	height: 660px;
}

.talos-facts__item {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 28px;
	border: 1px solid rgba(114, 195, 237, 0.3);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.09);
}

.talos-facts__item p {
	margin: 0;
}

.talos-facts__value {
	font-size: 60px;
	font-weight: 700;
	line-height: 58.8px;
	letter-spacing: -0.045em;
	color: var(--wp--preset--color--white);
}

.talos-facts__label {
	font-size: 18px;
	font-weight: 600;
	line-height: 23.4px;
	color: var(--wp--preset--color--white);
}

.talos-facts__caption {
	font-size: 12px;
	line-height: normal;
	color: var(--wp--preset--color--lime);
}

/* 02 · Our Vision */
.talos-vision {
	padding: 24px 80px;
}

.talos-vision__block {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 56px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 60px 80px;
	overflow: hidden;
	border-radius: 32px;
	background: var(--wp--preset--color--navy-deep);
}

.talos-vision__glow--1 {
	top: -340px;
	right: -320px;
	width: 920px;
	height: 920px;
}

.talos-vision__glow--2 {
	top: 100px;
	right: -300px;
	width: 740px;
	height: 740px;
}

.talos-vision__text {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.talos-page .talos-vision .talos-eyebrow {
	color: var(--wp--preset--color--lime);
}

.talos-vision__title {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -0.045em;
	color: var(--wp--preset--color--white);
}

.talos-vision__body {
	margin: 0;
	font-size: 20px;
	line-height: 31px;
	color: var(--wp--preset--color--white);
}

.talos-vision__art {
	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 402.119px;
	height: 335.724px;
}

/* The spiral artwork is 338.5 wide but its frame is 310, so it overhangs to the right before the rotation */
.talos-vision__spiral {
	position: relative;
	flex: none;
	width: 310px;
	height: 381.531px;
	transform: rotate(86.02deg);
}

.talos-vision__spiral img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 338.462px;
	height: 381.531px;
	max-width: none;
}

/* 03 · Principles */
.talos-principles {
	padding: 60px 80px;
}

.talos-principles__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 1280px;
	margin: 0 auto;
}

.talos-principles__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	padding: 32px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
}

.talos-principles__card img {
	display: block;
}

.talos-principles__title,
.talos-partner__name {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--navy);
}

.talos-principles__text {
	margin: 0;
	font-size: 16px;
	line-height: 25px;
	color: var(--wp--preset--color--text-secondary);
}

/* 04 · The Consortium */
.talos-partners {
	padding: 80px;
	background: var(--wp--preset--color--white);
}

.talos-partners__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 72px;
	max-width: 1280px;
	margin: 0 auto;
}

.talos-partners__divider {
	display: flex;
	align-items: center;
	gap: 24px;
}

.talos-partners__line {
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--border-strong);
}

.talos-partners__pill {
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--wp--preset--color--navy);
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

.talos-partners__body {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.talos-partners__head,
.talos-associated__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.talos-partners__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

/*
 * Partner card (Figma 300 × 360): the front (logo, name, country) on the page colour with a soft green glow in the
 * bottom right corner, and the back, a navy to sky gradient with the description and "Visit website". On hover (also
 * with the keyboard) the card flips around its vertical axis like a real card and shows the back.
 */
.talos-partner {
	position: relative;
	height: 360px; /* every card has the same fixed height, as in the design */
	perspective: 1400px;
}

.talos-partner__flip {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.talos-partner:not(.talos-partner--static):hover .talos-partner__flip,
.talos-partner:not(.talos-partner--static):focus-within .talos-partner__flip {
	transform: rotateY(180deg);
}

.talos-partner__face,
.talos-partner__back {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	border-radius: 24px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.talos-partner__face {
	padding: 27px; /* + 1px border = 28px to the logo, as in the design */
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--page);
}

/* The glow: a 240px circle of #95C146 at 45%, blurred 45px, partly outside the corner (clipped by the card) */
.talos-partner__glow {
	position: absolute;
	right: -109px;
	bottom: -133px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	opacity: 0.45;
	filter: blur(45px);
	pointer-events: none;
}

.talos-partner__front {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* The back faces the other way until the card is turned */
.talos-partner__back {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
	background: linear-gradient(130.27deg, #152D79 14.286%, #034EA2 57.143%, #3AA6DC 85.714%);
	box-shadow: 0 18px 36px -10px rgba(21, 45, 121, 0.22); /* Figma, State=Hover */
	color: var(--wp--preset--color--white);
	transform: rotateY(180deg);
}

/* Pressed (Figma, State=Pressed): navy-deep to navy, no shadow. A layer fades in over the gradient, which cannot be animated itself. */
.talos-partner__back::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
	background: linear-gradient(130.27deg, #031241 14.286%, #152D79 85.714%);
	opacity: 0;
	transition: opacity 0.1s ease;
}

.talos-partner:active .talos-partner__back::before {
	opacity: 1;
}

.talos-partner:active .talos-partner__back {
	box-shadow: none;
}

.talos-partner__back > * {
	position: relative; /* above the pressed layer */
}

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

.talos-partner__logo {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 132px;
	height: 72px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
}

.talos-partner__logo img {
	display: block;
	max-width: 112px;
	max-height: 52px;
	object-fit: contain;
}

.talos-partner__country {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: normal;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-tertiary);
}

.talos-partner__country img {
	display: block;
	flex-shrink: 0;
}

/*
 * The description takes the room between the country and the link; assets/js/partners.js sets how many lines fit
 * and the rest ends with "...". Without JavaScript it shows 4 lines.
 */
.talos-partner__text {
	display: -webkit-box;
	flex: 1 1 0;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 10;
	max-height: 195px; /* 10 lines, until partners.js fits the lines to the room */
	font-size: 13px;
	line-height: 19.5px;
	color: var(--wp--preset--color--white);
}

/* margin-top:auto pushes the link to the bottom, whatever the name length */
.talos-partner__link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: auto;
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--sky-strong);
	text-decoration: none;
	transition: color 0.2s ease;
}

/* The arrow is a mask, so it takes the colour of the link (sky, and navy on hover) */
.talos-partner__external {
	display: block;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--talos-icon) center / contain no-repeat;
	mask: var(--talos-icon) center / contain no-repeat;
}

.talos-partner__link:hover,
.talos-partner__link:focus-visible {
	color: var(--wp--preset--color--navy);
}

/* On the back the link is white (14px semi bold) and stays white */
.talos-partner__back .talos-partner__link,
.talos-partner__back .talos-partner__link:hover,
.talos-partner__back .talos-partner__link:focus-visible {
	color: var(--wp--preset--color--white);
}

/* 05 · Associated Partners */
.talos-associated {
	padding: 60px 80px 90px;
}

.talos-associated__row {
	display: flex;
	align-items: flex-start;
	gap: 56px;
	max-width: 1280px;
	margin: 0 auto;
}

.talos-associated__col {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.talos-associated__logos {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.talos-associated__logo {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 84px;
	border: 1px dashed var(--wp--preset--color--border-strong);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-tertiary);
}

.talos-join {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex: 0 0 633px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding: 30px 40px;
	overflow: hidden;
	border-radius: 28px;
	background: var(--wp--preset--color--astronaut);
}

.talos-join__glow {
	top: -240px;
	left: 100px;
	width: 560px;
	height: 560px;
}

.talos-join > :not(.talos-join__glow) {
	position: relative;
}

.talos-page .talos-join .talos-eyebrow {
	color: var(--wp--preset--color--lime);
}

.talos-join__title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--white);
}

.talos-join__steps {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-join__steps li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.talos-join__number {
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--lime);
}

.talos-join__text {
	flex: 1;
	min-width: 0;
	font-size: 15px;
	line-height: 23.25px;
	color: var(--wp--preset--color--white);
}

/* Tablet & mobile: no Figma values yet, sections stack and the grids lose columns */
@media (max-width: 1100px) {
	/* The hero still starts under the header bar here (margin 16 + bar 75 = 91px), so there is no strip above it */
	.talos-page {
		margin-block-start: -91px;
	}

	.talos-page-hero {
		padding-top: calc(91px + 32px);
	}

	.talos-page-hero__inner {
		padding: 0 var(--talos-gutter);
	}

	.talos-page-hero__title,
	.talos-page-title {
		font-size: 36px;
		line-height: 1.1;
	}

	.talos-project,
	.talos-partners {
		padding: 56px var(--talos-gutter);
	}

	.talos-project__row {
		flex-direction: column;
		gap: 32px;
	}

	.talos-project__aside {
		flex-basis: auto;
		width: 100%;
	}

	.talos-project__lead {
		font-size: 24px;
		line-height: 1.4;
	}

	.talos-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.talos-vision {
		padding: 24px var(--talos-gutter);
	}

	.talos-vision__block {
		flex-direction: column;
		align-items: flex-start;
		padding: 40px 28px;
	}

	.talos-vision__title {
		font-size: 32px;
		line-height: 1.1;
	}

	.talos-vision__body {
		font-size: 18px;
		line-height: 1.55;
	}

	/* Stacked: the spiral gets a smaller slot, so there is no big empty band between the text and the artwork */
	.talos-vision__block {
		gap: 16px;
	}

	.talos-vision__art {
		align-self: center;
		max-width: 100%;
		height: 280px;
	}

	.talos-vision__spiral {
		transform: rotate(86.02deg) scale(0.8);
	}

	.talos-principles {
		padding: 24px var(--talos-gutter);
	}

	.talos-principles__list {
		grid-template-columns: 1fr;
	}

	.talos-partners__inner {
		gap: 48px;
	}

	.talos-partners__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.talos-associated {
		padding: 40px var(--talos-gutter) 56px;
	}

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

	.talos-join {
		flex-basis: auto;
		padding: 28px 24px;
	}
}

/* Wide tablet: there is room for the desktop layout (text left, spiral right), only smaller */
@media (min-width: 901px) and (max-width: 1100px) {
	.talos-vision__block {
		flex-direction: row;
		align-items: center;
		gap: 32px;
		padding: 48px 40px;
	}

	.talos-vision__title {
		font-size: 38px;
		line-height: 1.1;
	}

	.talos-vision__art {
		align-self: auto;
		flex: none;
		width: 322px;
		height: 270px;
	}
}

@media (max-width: 640px) {
	/* Page titles follow the 40px → 32px step of the home page section titles */
	.talos-page-hero__title,
	.talos-page-title {
		font-size: 32px;
	}

	.talos-facts,
	.talos-partners__grid {
		grid-template-columns: 1fr;
	}

	.talos-vision__art {
		width: 100%;
		height: 260px;
	}

	.talos-vision__spiral {
		transform: rotate(86.02deg) scale(0.75);
	}
}

/* A logo uploaded in WordPress can have any proportions: show it whole instead of cropping it */
.talos-header__brand img.is-custom-logo,
.talos-footer__brand img.is-custom-logo {
	object-fit: contain;
	object-position: left center;
}

/* Menu item that is a link and also opens a dropdown (a URL is set in Theme Settings): name + arrow button */
.talos-header__item--split {
	display: flex;
	align-items: center;
	gap: 6px;
}

.talos-header__item--has-dropdown:hover > .talos-header__link {
	color: var(--wp--preset--color--sky-strong);
}

/* Larger hit area for the arrow without moving it (padding and negative margin cancel out) */
.talos-header__trigger--icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: -6px;
	padding: 6px;
	color: var(--wp--preset--color--navy);
	transition: color 0.2s ease;
}

.talos-header__trigger--icon:focus-visible {
	outline: 2px solid var(--wp--preset--color--sky-strong);
	outline-offset: 0;
	border-radius: 6px;
}

@media (max-width: 1100px) {
	/* On mobile the dropdown opens inline, under the link and arrow */
	.talos-header__item--split {
		flex-wrap: wrap;
	}

	.talos-header__item--split .talos-header__dropdown {
		flex-basis: 100%;
	}

	/* Finger friendly: every tappable row is at least 44px tall and as wide as the menu, the arrow button 44 x 44 */
	.talos-header__list {
		gap: 4px;
	}

	.talos-header__link {
		box-sizing: border-box;
		width: 100%;
		min-height: 44px;
		justify-content: space-between;
	}

	.talos-header__item--split {
		gap: 0;
	}

	.talos-header__item--split > .talos-header__link {
		flex: 1;
		width: auto;
	}

	.talos-header__trigger--icon {
		flex: none;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		justify-content: center;
	}

	/* The arrow of a plain row sits where the centre of this 44px button is (16px padding + half the 12px arrow) */
	.talos-header__item:not(.talos-header__item--split) > .talos-header__link {
		padding-right: 16px;
	}

	/* Pressed feedback on every row, and no grey flash from the browser */
	.talos-header a,
	.talos-header button {
		-webkit-tap-highlight-color: transparent;
	}

	.talos-header__link:active,
	.talos-header__trigger--icon:active,
	.talos-header__dropdown a:active {
		background: rgba(21, 45, 121, 0.08);
		border-radius: 10px;
	}

	.talos-header__dropdown {
		gap: 0;
		margin-top: 4px;
	}

	.talos-header__dropdown a {
		min-height: 44px;
	}
}

/*
 * Impact Areas — Figma "04 · Impact Areas" (1440 × 608): 60px above, 100px below,
 * header row 80px, 48px gap, five 244.8 × 320 cards with 14px between them.
 */
.talos-impact {
	box-sizing: border-box;
	padding: 0 40px;
	background: var(--wp--preset--color--page);
}

.talos-impact__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 48px;
	max-width: 1360px;
	margin: 0 auto;
	padding: 60px 40px 100px;
}

.talos-impact__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 0;
}

.talos-impact__intro {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 14px;
	min-width: 300px;
}

/* The paragraph is 2 lines tall (54.4px) and sits a little lower than the heading, as in the design */
.talos-impact__lead {
	position: relative;
	flex: 1 1 0;
	min-width: 300px;
	max-width: 400px;
	height: 54.38px;
}

.talos-impact__lead p {
	position: absolute;
	top: 12.1px;
	left: 0;
	width: 370px;
	max-width: 100%;
	margin: 0;
	font-size: 17px;
	line-height: 27.2px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-impact__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-impact__grid > li {
	flex: 1 1 196px;
	min-width: 196px;
	margin: 0;
}

.talos-impact__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 22px;
	height: 320px;
	padding: 28px; /* + 1px border = 29px, as measured in the design */
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent; /* no blue box over the card when it is tapped on a phone */
	transition: border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover: a 2px blue outline (the 1px border + a 1px ring, so the card does not change size) and a soft shadow.
   Only where there is a real pointer: on a touch screen the hover would stay on the card after a tap. */
@media (hover: hover) {
	.talos-impact__card:hover {
		border-color: var(--wp--preset--color--sky);
		box-shadow: 0 0 0 1px var(--wp--preset--color--sky), 0 8px 24px rgba(0, 0, 0, 0.06);
	}
}

.talos-impact__card:focus-visible {
	border-color: var(--wp--preset--color--sky);
	box-shadow: 0 0 0 1px var(--wp--preset--color--sky), 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Pressed: the soft shadow goes away, the blue outline stays */
.talos-impact__card:active {
	box-shadow: 0 0 0 1px var(--wp--preset--color--sky);
	transition-duration: 0.08s; /* quick, so the shadow is gone the moment it is pressed */
}

.talos-impact__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.talos-impact__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 18px;
	background: var(--wp--preset--color--sky-soft);
}

.talos-impact__icon--lime {
	background: var(--wp--preset--color--lime-soft);
}

/* 26px box; each icon is placed inside it with the offsets copied from Figma */
.talos-impact__glyph {
	position: relative;
	display: block;
	flex: none;
	width: 26px;
	height: 26px;
	overflow: hidden;
}

.talos-impact__glyph img {
	position: absolute;
	inset: var(--talos-inset, 0);
	display: block;
	width: auto;
	height: auto;
	max-width: none;
}

.talos-impact__go {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: 42px;
	height: 42px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 20px;
}

.talos-impact__go img {
	display: block;
	width: 16px;
	height: 16px;
}

/* label + heading sit at the bottom of a 91.25px box, so every card lines up */
.talos-impact__name {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	height: 91.25px;
	min-height: 59px;
}

.talos-impact__num {
	font-family: "Chakra Petch", "Inter", sans-serif;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-tertiary);
}

.talos-impact__title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--navy);
}

.talos-impact__text {
	display: block;
	max-width: 189px;
	font-size: 15px;
	line-height: 23.25px;
	color: var(--wp--preset--color--text-secondary);
}

/*
 * Tablet — Figma 768 "04 · Impact Areas": 32px around the frame + 32px inside = 64px at the sides, 56px above
 * and below, 48px between the header and the cards. The text goes under the heading (24px), the cards are two
 * to a row (313px, 14px apart) and the fifth one takes the whole row. Cards keep the 320px height; the
 * bottom padding is 56px (55 + the border) and the text uses the full card width.
 */
@media (max-width: 1100px) {
	.talos-impact {
		padding: 0 32px;
	}

	.talos-impact__inner {
		gap: 48px;
		padding: 56px 32px;
	}

	/* Scoped to the section: Get Involved reuses these classes for its own header row */
	.talos-impact .talos-impact__header {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.talos-impact .talos-impact__intro {
		flex: none;
		min-width: 0;
	}

	.talos-impact .talos-impact__lead {
		flex: none;
		min-width: 0;
		height: auto;
		max-width: none;
	}

	.talos-impact .talos-impact__lead p {
		position: static;
		width: auto;
	}

	.talos-impact__grid > li {
		flex: 1 1 calc(50% - 7px);
		min-width: 0;
	}

	.talos-impact__grid > li:last-child:nth-child(odd) {
		flex-basis: 100%;
	}

	.talos-impact__card {
		padding-bottom: 55px;
	}

	.talos-impact__text {
		max-width: none;
	}
}

/* Phone — Figma 390: 40px at the sides, 40px above and below, one card per row with 40px below the text, text 16/26 */
@media (max-width: 640px) {
	.talos-impact {
		padding: 0 20px;
	}

	.talos-impact__inner {
		padding: 40px 20px;
	}

	.talos-impact .talos-impact__lead p {
		font-size: 16px;
		line-height: 26px;
	}

	.talos-impact__grid > li {
		flex-basis: 100%;
	}

	.talos-impact__card {
		padding-bottom: 39px;
	}
}

/*
 * Digital Tools — Figma "05 · Digital Tools + AI Assistant" (1440 × 620).
 * Left: intro (400px). Right: three photo columns, 840 × 500: one open (540px), two collapsed (136px), 14px apart.
 * The "TALOS AI Assistant" card of the design is hidden in Figma, so it is not built.
 */
.talos-tools {
	box-sizing: border-box;
	padding: 0 40px;
	background: var(--wp--preset--color--page);
}

.talos-tools__inner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 40px;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 40px 120px;
}

.talos-tools__intro {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 28px;
	min-width: 320px;
	max-width: 420px;
	padding-bottom: 75px;
}

/* "Display/76 Bold": Inter 700, 76px, line-height 90px, tracking -2.25px */
.talos-tools__title {
	display: block;
	width: fit-content;
	margin: 0;
	font-size: 76px;
	font-weight: 700;
	line-height: 90px;
	letter-spacing: -2.25px;
	color: var(--wp--preset--color--navy);
}

.talos-tools__line {
	display: block;
	white-space: nowrap;
}

/* Blue → green across the width of the heading, one gradient per line (as in Figma) */
.talos-tools__line--accent {
	background-image: linear-gradient(90deg, #3AA6DC 0%, #95C146 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.talos-tools__lead {
	margin: 0;
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-tools__cols {
	display: flex;
	flex: none;
	align-items: flex-start;
	gap: 14px;
	/*
	 * Fixed: 540 + 136 + 136 + 2 × 14. While one column grows and another shrinks (and a new hover changes
	 * the target half way), their widths do not add up for a moment; without a fixed width the intro next to
	 * them would be resized and re-wrapped with every hover.
	 */
	width: 840px;
}

.talos-tools__col {
	position: relative;
	flex: none;
	width: 136px;
	height: 500px;
	overflow: hidden;
	border-radius: 28px;
	background: var(--wp--preset--color--page);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keyboard focus: a ring in the brand colour instead of the browser's black one */
.talos-tools__col:focus-visible {
	outline: 2px solid var(--wp--preset--color--sky-strong);
	outline-offset: 3px;
}

/*
 * OPEN state: the column with the class .is-open. The page marks one as open to start with, and
 * assets/js/tools.js moves the class to the column that is hovered, tapped or reached with the keyboard.
 * It stays on that column when the mouse leaves, so the section never jumps back by itself.
 */
.talos-tools__col.is-open {
	width: 540px;
}

.talos-tools__photo {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 540px; /* the size of an open column: the photo never resizes, the column only uncovers more of it */
	max-width: none;
	height: 500px;
	object-fit: cover;
	/*
	 * The photo fades to nothing towards the bottom, over the white of the column, so the text on top can be
	 * read. It is done on the photo itself (not with a white layer on top of it): a second layer left a thin
	 * grey line in the rounded bottom corners. These steps are the Figma white fade, turned around.
	 */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.22) 60%, rgba(0, 0, 0, 0.07) 78%, transparent 92%);
	mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.22) 60%, rgba(0, 0, 0, 0.07) 78%, transparent 92%);
}

/* Open column: name + text on the left, big index on the right, 32px from the corner */
.talos-tools__expanded {
	position: absolute;
	bottom: 32px;
	left: 32px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease, visibility 0s linear 0.12s;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 476px;
}

.talos-tools__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.talos-tools__name {
	margin: 0;
	white-space: nowrap; /* the title only breaks where the markup has a <br>, never while the column grows */
	font-size: 36px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -0.54px;
	color: var(--wp--preset--color--navy);
}

.talos-tools__desc {
	width: 290px;
	margin: 0;
	font-size: 15px;
	line-height: normal;
	color: var(--wp--preset--color--text-secondary);
}

.talos-tools__index {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.talos-tools__num {
	font-size: 76px;
	font-weight: 300;
	line-height: 76px;
	letter-spacing: -2.28px;
	color: var(--wp--preset--color--navy);
}

.talos-tools__unit {
	font-family: "Chakra Petch", "Inter", sans-serif;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
}

.talos-tools__badge {
	position: absolute;
	top: 28px;
	left: 512px; /* 28px from the right edge of an open (540px) column; moved back by its own width below */
	white-space: nowrap;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-family: "Chakra Petch", "Inter", sans-serif;
	font-size: 10px;
	line-height: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-deep);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}

/* Collapsed column: a navy tab 78 × 230 with the index on top and the name written upwards */
.talos-tools__collapsed {
	position: absolute;
	bottom: 48px;
	left: 0;
	width: 78px;
	height: 230px;
	background: var(--wp--preset--color--astronaut);
	/* closing: the tab appears once the column has nearly finished narrowing */
	transition: opacity 0.2s ease 0.3s;
}

/*
 * The column grows frame by frame while the text sits inside it. Giving the text its own layer keeps it
 * from being redrawn (and looking like it changes size or shakes) while the width animates.
 */
.talos-tools__expanded,
.talos-tools__badge,
.talos-tools__collapsed {
	will-change: opacity, transform;
	transform: translateZ(0);
}

.talos-tools__badge {
	transform: translate3d(-100%, 0, 0);
}

/*
 * Cross-fade. Opening: the tab goes first, the open face fades in once the column is almost at full width
 * (0.3s of the 0.5s growth), so the text is never squeezed or clipped by a narrow column.
 * Closing: the open face goes first (above), then the tab fades in when the column is narrow again.
 */
.talos-tools__col.is-open .talos-tools__expanded,
.talos-tools__col.is-open .talos-tools__badge {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease 0.3s, visibility 0s linear 0.3s;
}

.talos-tools__col.is-open .talos-tools__collapsed {
	opacity: 0;
	transition: opacity 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
	.talos-tools__col,
	.talos-tools__expanded,
	.talos-tools__badge,
	.talos-tools__collapsed {
		transition: none;
	}
}

.talos-tools__no {
	position: absolute;
	top: 14px;
	left: 31.5px;
	font-family: "Chakra Petch", "Inter", sans-serif;
	font-size: 12px;
	line-height: normal;
	color: var(--wp--preset--color--lime);
}

.talos-tools__label {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 26px;
	font-weight: 500;
	line-height: normal;
	white-space: nowrap;
	color: var(--wp--preset--color--white);
	transform: translate(-50%, -50%) rotate(-90deg);
}

/*
 * Between 1101 and 1359px the intro (320px at least) and the 840px accordion no longer fit side by side
 * (they need a 1200px row). The intro goes above, and the accordion takes the full width: the two closed
 * columns stay 136px, the open one takes the rest. 100cqw is the width of .talos-tools__cols, so the photo,
 * the text and the badge follow the open column.
 */
@media (min-width: 1101px) and (max-width: 1359px) {
	.talos-tools__inner {
		align-items: stretch;
	}

	.talos-tools__intro {
		flex: 1 1 100%;
		max-width: none;
		padding-bottom: 0;
	}

	.talos-tools__cols {
		width: 100%;
		container-type: inline-size;
	}

	.talos-tools__col.is-open,
	.talos-tools__photo {
		width: calc(100cqw - 300px); /* 2 × 136 closed + 2 × 14 gap */
	}

	.talos-tools__expanded {
		width: calc(100cqw - 364px); /* the open column minus 32px on each side */
	}

	.talos-tools__badge {
		left: calc(100cqw - 328px); /* 28px from the right edge of the open column */
	}
}

/*
 * Tablet — Figma 768 "05 · Digital Tools": the accordion becomes three open cards (no hover), the first two
 * side by side (313px, 14px apart) and the third as wide as the section. 64px at the sides (32 + 32), 56px
 * below the section; 56px under the intro text plus 32px to the cards. The title is "Display/56": 56/55/-2.8.
 */
@media (max-width: 1100px) {
	.talos-tools {
		padding: 0 32px;
	}

	.talos-tools__inner {
		gap: 32px;
		padding: 0 32px 56px;
	}

	.talos-tools__intro {
		flex-basis: 100%;
		max-width: none;
		padding-bottom: 56px;
	}

	.talos-tools__title {
		font-size: 56px;
		line-height: 55px;
		letter-spacing: -2.8px;
	}

	.talos-tools__cols {
		flex-wrap: wrap;
		width: 100%;
	}

	.talos-tools__col,
	.talos-tools__col.is-open {
		width: calc(50% - 7px);
		height: 420px;
	}

	.talos-tools__col:last-child:nth-child(odd) {
		width: 100%;
	}

	/* The text takes what the big number leaves; the third card is wide, so its text stops at 416px */
	.talos-tools__text {
		flex: 1;
		min-width: 0;
	}

	.talos-tools__desc {
		width: auto;
		max-width: 416px;
	}

	.talos-tools__expanded,
	.talos-tools__badge {
		opacity: 1;
		visibility: visible;
	}

	/* Columns are full width here, so the photo and the badge follow the width again */
	.talos-tools__photo {
		width: 100%;
		height: 100%;
	}

	.talos-tools__badge {
		right: 28px;
		left: auto;
		transform: none;
	}

	.talos-tools__collapsed {
		display: none;
	}

	.talos-tools__expanded {
		right: 32px;
		left: 32px;
		width: auto;
	}
}

/* Phone — Figma 390: 40px at the sides and below, 24px under the intro, the title is 40/39/-2, cards 380px high, one per row */
@media (max-width: 640px) {
	.talos-tools {
		padding: 0 20px;
	}

	.talos-tools__inner {
		gap: 24px;
		padding: 0 20px 40px;
	}

	/* The intro has a 320px minimum on desktop: on a 320px screen the column is only 240px, so it must be allowed to shrink */
	.talos-tools__intro {
		min-width: 0;
		padding-bottom: 40px;
	}

	.talos-tools__title {
		font-size: 40px;
		line-height: 39px;
		letter-spacing: -2px;
	}

	.talos-tools__lead {
		font-size: 16px;
		line-height: 25px;
	}

	.talos-tools__col,
	.talos-tools__col.is-open {
		width: 100%;
		height: 380px;
	}
}

/*
 * Small phones (a card is 240-340px wide): the 76px index next to the text leaves it about 80px, and the 36px title
 * (it never wraps) is wider than the card. So the index goes on top of the text, in one line with "TOOL", and
 * the name and the description take the full width of the card.
 */
@media (max-width: 380px) {
	.talos-tools__expanded {
		right: 20px;
		left: 20px;
		bottom: 24px;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 12px;
	}

	.talos-tools__index {
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
		order: -1;
	}

	.talos-tools__num {
		font-size: 44px;
		line-height: 44px;
		letter-spacing: -1.3px;
	}

	.talos-tools__text {
		width: 100%;
		gap: 8px;
	}

	.talos-tools__name {
		font-size: 28px;
		line-height: 32px;
		letter-spacing: -0.4px;
	}

	.talos-tools__desc {
		max-width: none;
		font-size: 14px;
		line-height: 1.4;
	}

	.talos-tools__badge {
		right: 20px;
	}
}

@media (max-width: 340px) {
	.talos-tools__name {
		font-size: 25px;
		line-height: 29px;
	}
}

/*
 * Success Stories — Figma "06 · Success Stories" (1440 × 720).
 * A rounded card (1312 wide, 64px from the edges, 40px radius) with the header row, a scrolling track of
 * 390 × 420 story cards 20px apart, and four bars below.
 */
.talos-stories {
	box-sizing: border-box;
	padding: 0 64px;
	background: var(--wp--preset--color--page);
}

.talos-stories__card {
	box-sizing: border-box;
	max-width: 1312px;
	margin: 0 auto;
	padding: 50px 12px 50px 60px;
	overflow: hidden;
	border-radius: 40px;
	background: #E9F2F4;
}

.talos-stories__stack {
	display: flex;
	flex-direction: column;
	gap: 44px;
	max-width: 1240px;
}

.talos-stories__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.talos-stories__heading {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.talos-stories__heading .talos-eyebrow,
.talos-stories__heading .talos-section-title {
	margin: 0;
}

.talos-stories__controls {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-right: 10px; /* the Figma row is 218px wide: the link ends 10px before the right edge */
}

.talos-stories__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	padding: 0;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.talos-stories__btn--next {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.talos-stories__btn--prev:hover,
.talos-stories__btn--prev:focus-visible {
	border-color: var(--wp--preset--color--navy);
}

.talos-stories__btn--next:hover,
.talos-stories__btn--next:focus-visible {
	border-color: var(--wp--preset--color--blue);
	background: var(--wp--preset--color--blue);
}

/* "All stories": text link with a 2px sky underline, 14px to the right of the buttons */
.talos-stories__all {
	margin-left: 14px;
	padding: 10px 0 12px;
	border-bottom: 2px solid var(--wp--preset--color--sky);
	font-size: 16px;
	font-weight: 600;
	line-height: 17px;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.talos-stories__all:hover,
.talos-stories__all:focus-visible {
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--sky-strong);
}

/* The track scrolls sideways; 448px = 420px cards + room for the scroll bar */
.talos-stories__track {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	min-height: 448px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	/* An overflow box clips the hover shadow: make room for it (below, left and right, so the last card's shadow isn't cut with a hard edge at the end of the track) and pull the room back with negative margins, so nothing moves. */
	padding: 0 30px 60px 30px;
	margin: 0 -30px -60px -30px;
	scroll-padding-left: 30px;
}

.talos-stories__track::-webkit-scrollbar {
	display: none;
}

.talos-stories__item {
	display: flex;
	flex: 0 0 390px;
	flex-direction: column;
	box-sizing: border-box;
	height: 420px;
	/* No overflow clip on the card: the hover border is drawn on top of it, and a rounded clip would eat half of that line on the curves (visible at 125% / 150% screen scaling). The photo rounds its own top corners instead. */
	border-radius: 28px;
	background: var(--wp--preset--color--white);
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	scroll-snap-align: start;
}

.talos-stories__photo {
	position: relative;
	display: flex;
	flex: 0 0 280px;
	align-items: flex-end;
	box-sizing: border-box;
	padding: 18px;
	overflow: hidden;
	border-radius: 28px 28px 0 0;
}

.talos-stories__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.talos-stories__tag {
	position: relative;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	font-family: "Chakra Petch", sans-serif;
	font-size: 10px;
	line-height: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

.talos-stories__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
	padding: 23.25px 26px 28px;
}

/* Two lines, then "…" (the Figma cards cut long titles the same way) */
.talos-stories__title {
	display: -webkit-box;
	overflow: hidden;
	padding-bottom: 0.75px;
	font-size: 22px;
	font-weight: 600;
	line-height: 27.5px;
	letter-spacing: -0.33px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

/* The title width of each card in Figma (it decides where the lines break) */
.talos-stories__item:nth-child(1) .talos-stories__title { max-width: 319px; }
.talos-stories__item:nth-child(2) .talos-stories__title { max-width: 297px; }
.talos-stories__item:nth-child(3) .talos-stories__title { max-width: 266px; }
.talos-stories__item:nth-child(4) .talos-stories__title { max-width: 335px; }

.talos-stories__more {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--sky-strong);
}

.talos-stories__arrow {
	flex: none;
	transition: transform 0.2s ease;
}

.talos-stories__item:hover .talos-stories__arrow,
.talos-stories__item:focus-visible .talos-stories__arrow {
	transform: translateX(3px);
}

.talos-stories__dots {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.talos-stories__dot {
	width: 16px;
	height: 4px;
	border-radius: 2px;
	background: var(--wp--preset--color--border-strong);
	transition: width 0.3s ease, background-color 0.3s ease;
}

.talos-stories__dot.is-active {
	width: 32px;
	background: var(--wp--preset--color--navy);
}

@media (prefers-reduced-motion: reduce) {
	.talos-stories__photo img,
	.talos-stories__arrow,
	.talos-stories__dot {
		transition: none;
	}
}

/*
 * Tablet — Figma 768 "06 · Success Stories": the card is 32px from the screen, 32px inside on the left and
 * 12px on the right, 56px above and below, radius 40. The heading and the buttons are stacked (24px apart,
 * 32px free at the right), the 390px cards keep scrolling and the next one peeks in at the right edge.
 */
@media (max-width: 1100px) {
	.talos-stories {
		padding: 0 32px;
	}

	.talos-stories__card {
		padding: 56px 12px 56px 32px;
	}

	.talos-stories__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
		padding-right: 32px;
	}
}

/* Phone — Figma 390: card 20px from the screen, 40px above and below, cards 290px wide, 20px free at the right of the header */
@media (max-width: 640px) {
	.talos-stories {
		padding: 0 20px;
	}

	.talos-stories__card {
		padding: 40px 12px 40px 20px;
	}

	.talos-stories__header {
		padding-right: 20px;
	}

	.talos-stories__item {
		flex-basis: 290px;
	}
}

/*
 * TALOS in Numbers — Figma "07 · TALOS in Numbers" (1440 × 642): 72px above and below, a 1280px navy card
 * (56px padding, 32px radius) with the heading on the left and four stat cards (2 × 2) on the right.
 */
.talos-numbers {
	box-sizing: border-box;
	padding: 72px 40px;
	background: var(--wp--preset--color--page);
}

.talos-numbers__card {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px 48px;
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	padding: 56px;
	overflow: hidden;
	border-radius: 32px;
	background: var(--wp--preset--color--astronaut);
}

/* Two soft colour glows behind the content: sky blue in the middle right, green in the bottom right corner */
.talos-numbers__card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: -248px;
	left: 0;
	background:
		radial-gradient(576px 671.4px at calc(100% - 281.6px) 373px, rgba(114, 195, 237, 0.28) 0%, rgba(114, 195, 237, 0) 70%),
		radial-gradient(384px 522.2px at calc(100% - 64px) 746px, rgba(149, 193, 70, 0.25) 0%, rgba(149, 193, 70, 0) 70%);
	pointer-events: none;
}

.talos-numbers__intro {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 18px;
	min-width: 300px;
	max-width: 520px;
}

.talos-numbers__intro > * {
	margin: 0;
}

/* Chakra Petch 11px, letters spaced 0.12em, text filled with a sky → lime gradient */
.talos-numbers__eyebrow {
	align-self: flex-start;
	font-family: "Chakra Petch", sans-serif;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	background: linear-gradient(90deg, var(--wp--preset--color--sky), var(--wp--preset--color--lime));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.talos-numbers__title {
	max-width: 377px;
	font-size: 60px;
	font-weight: 700;
	line-height: 58.8px;
	letter-spacing: -2.7px;
	color: var(--wp--preset--color--white);
}

.talos-numbers__lead {
	max-width: 404px;
	font-size: 17px;
	line-height: 27.2px;
	color: rgba(255, 255, 255, 0.72);
}

.talos-numbers__stats {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-wrap: wrap;
	gap: 14px;
	min-width: 480px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-numbers__stat {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 10px;
	box-sizing: border-box;
	min-width: 240px;
	padding: 28px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--sky);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.05);
}

/* The glow in the top right corner of the 2nd (green) and 4th (blue) card: a blurred circle, 160px wide */
.talos-numbers__stat:nth-child(even)::before {
	content: "";
	position: absolute;
	top: -61px;
	right: -59px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	filter: blur(20px);
	pointer-events: none;
}

.talos-numbers__stat:nth-child(4n)::before {
	background: var(--wp--preset--color--sky);
}

.talos-numbers__value,
.talos-numbers__label,
.talos-numbers__note {
	position: relative;
}

.talos-numbers__value {
	font-size: 72px;
	font-weight: 300;
	line-height: 76px;
	letter-spacing: -2.16px;
	color: var(--wp--preset--color--white);
}

.talos-numbers__label {
	font-size: 16px;
	font-weight: 500;
	line-height: normal;
	white-space: nowrap; /* as in Figma: a long text runs into the card padding instead of wrapping */
	color: var(--wp--preset--color--white);
}

.talos-numbers__note {
	font-family: "Chakra Petch", sans-serif;
	font-size: 10px;
	line-height: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
}

/*
 * Tablet — Figma 768 "07 · TALOS in Numbers": 64px at the sides and 56px above and below; the card keeps its
 * 32px radius with 56px / 40px inside; the heading, the 2 × 2 stat cards (14px apart) and the stat figures
 * (72/76, -3px) are stacked with 32px between them. The long label wraps inside the card.
 */
@media (max-width: 1100px) {
	.talos-numbers {
		padding: 56px 64px;
	}

	.talos-numbers__card {
		gap: 32px;
		padding: 56px 40px;
	}

	.talos-numbers__intro {
		flex: 1 1 100%;
		min-width: 0;
		max-width: none;
	}

	.talos-numbers__stats {
		min-width: 0;
		flex-basis: 100%;
	}

	.talos-numbers__stat {
		flex: 1 1 calc(50% - 7px);
		min-width: 0;
	}

	.talos-numbers__label {
		white-space: normal;
	}

	.talos-numbers__value {
		letter-spacing: -3px;
	}
}

/* Phone — Figma 390: 40px at the sides and above and below, 40px / 24px inside the card, one stat card per row with 20px / 16px inside and a 40px figure */
@media (max-width: 640px) {
	.talos-numbers {
		padding: 40px;
	}

	.talos-numbers__card {
		padding: 40px 24px;
	}

	.talos-numbers__stat {
		flex-basis: 100%;
		padding: 20px 16px;
	}

	.talos-numbers__value {
		font-size: 40px;
		line-height: 44px;
	}
}

/*
 * News & Events — Figma "08 · News & Events" (1440 × 765): 60px above, 150px below, 80px at the sides.
 * Left: three news cards 359px high and a link. Right (max 421px): next event, a link, the latest podcast, a link.
 */
.talos-news {
	box-sizing: border-box;
	padding: 60px 80px 150px;
	background: var(--wp--preset--color--white);
}

.talos-news__stack {
	display: flex;
	flex-direction: column;
	gap: 44px;
	max-width: 1280px;
	margin: 0 auto;
}

.talos-news__heading {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.talos-news__heading .talos-eyebrow,
.talos-news__heading .talos-section-title {
	margin: 0;
}

.talos-news__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px 20px;
}

.talos-news__main {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 16px;
	min-width: 1px;
}

.talos-news__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	min-width: 280px;
}

.talos-news__item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	box-sizing: border-box;
	height: 359px;
	min-width: 215px;
	overflow: hidden;
	border-radius: 24px;
	background: var(--wp--preset--color--page);
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

.talos-news__photo {
	position: relative;
	display: block;
	flex: 0 0 212px;
	overflow: hidden;
}

.talos-news__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.talos-news__body {
	display: flex;
	flex-direction: column;
	gap: 10.845px;
	box-sizing: border-box;
	padding: 22px 22px 26px;
}

.talos-news__meta {
	display: flex;
	gap: 12px;
}

.talos-news__date,
.talos-news__tag,
.talos-news__label,
.talos-news__day-month,
.talos-news__podcast .talos-news__label {
	font-family: "Chakra Petch", sans-serif;
	font-size: 10px;
	line-height: normal;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.talos-news__date {
	color: var(--wp--preset--color--text-tertiary);
}

.talos-news__tag,
.talos-news__label,
.talos-news__day-month {
	color: var(--wp--preset--color--sky-strong);
}

/* Three lines, then "…" */
.talos-news__title {
	display: -webkit-box;
	overflow: hidden;
	padding-bottom: 0.535px;
	font-size: 19px;
	font-weight: 600;
	line-height: 24.7px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* "All news", "All events", "All episodes": the same link as elsewhere, but 180px wide at least */
.talos-news__link {
	box-sizing: border-box;
	align-self: flex-start;
	min-width: 180px;
}

.talos-news__side {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 16px;
	min-width: 280px;
	max-width: 421px;
}

/* Next event */
.talos-news__event {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	box-sizing: border-box;
	padding: 26px;
	border-radius: 24px;
	background: #EEF7FC;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

.talos-news__day {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 84px;
	min-height: 96px;
	border-radius: 18px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 8px 24px -14px rgba(21, 45, 121, 0.35);
}

.talos-news__day-number {
	font-size: 34px;
	font-weight: 700;
	line-height: 34px;
	text-align: center;
	color: var(--wp--preset--color--navy);
}

.talos-news__event-text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 7px;
	min-width: 1px;
	min-height: 96px;
}

.talos-news__event-title {
	padding-bottom: 0.69px;
	font-size: 19px;
	font-weight: 600;
	line-height: 24.7px;
	color: var(--wp--preset--color--navy);
}

.talos-news__event-meta {
	font-size: 14px;
	line-height: normal;
	color: var(--wp--preset--color--text-secondary);
}

/* Latest podcast */
.talos-news__podcast {
	display: flex;
	flex-direction: column;
	gap: 18px;
	box-sizing: border-box;
	padding: 26px;
	border-radius: 24px;
	background: linear-gradient(135.25deg, rgb(238, 245, 210) 0%, rgb(216, 238, 250) 100%);
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

.talos-news__podcast-top {
	display: flex;
	align-items: center;
	gap: 16px;
}

.talos-news__play {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 26px;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	transition: background-color 0.2s ease;
}

.talos-news__podcast:hover .talos-news__play,
.talos-news__podcast:focus-visible .talos-news__play {
	background: var(--wp--preset--color--blue);
}

.talos-news__podcast-text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 4px;
	min-width: 1px;
}

.talos-news__label--green {
	color: var(--wp--preset--color--green-deep);
}

.talos-news__podcast-title {
	font-size: 18px;
	font-weight: 600;
	line-height: 23.4px;
	color: var(--wp--preset--color--navy);
}

/* Sound wave: 3px bars 3px apart; the dark ones are the part that has been played */
.talos-news__wave {
	display: flex;
	align-items: center;
	gap: 3px;
}

.talos-news__bar {
	flex: none;
	width: 3px;
	border-radius: 2px;
	background: rgba(21, 45, 121, 0.3);
}

.talos-news__bar.is-played {
	background: var(--wp--preset--color--navy);
}

@media (prefers-reduced-motion: reduce) {
	.talos-news__photo img,
	.talos-news__play {
		transition: none;
	}
}

/*
 * Tablet — Figma 768 "08 · News & Events": 32px at the sides, 56px above and below. The news cards are two to
 * a row (the third as wide as the section), then the event and the podcast, each under its own link, all
 * the full width of the section.
 */
@media (max-width: 1100px) {
	.talos-news {
		padding: 56px 32px;
	}

	.talos-news__main {
		flex-basis: 100%;
	}

	.talos-news__side {
		flex-basis: 100%;
		max-width: none;
	}

	.talos-news__item {
		min-width: 240px;
	}
}

/* Phone — Figma 390: 20px at the sides, 40px above and below, one news card per row */
@media (max-width: 640px) {
	.talos-news {
		padding: 40px 20px;
	}
}

/*
 * Hover of the story cards, the news cards and the next event card: the same light blue border and soft shadow as the Impact Areas cards
 * (border = sky at 75%, shadow = navy at 13%, 18px down, 36px blur). The border is a layer on top of the card, so it
 * shows over the photo and nothing moves by 1px when it appears.
 */
.talos-stories__item,
.talos-news__item,
.talos-news__event {
	position: relative;
	transition: box-shadow 0.2s ease;
}

.talos-stories__item::after,
.talos-news__item::after,
.talos-news__event::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid transparent;
	border-radius: inherit;
	pointer-events: none;
	transition: border-color 0.2s ease;
}

.talos-stories__item:hover,
.talos-stories__item:focus-visible,
.talos-news__item:hover,
.talos-news__event:hover,
.talos-news__item:focus-visible,
.talos-news__event:focus-visible {
	box-shadow: 0 18px 36px rgba(21, 45, 121, 0.13);
}

.talos-stories__item:hover::after,
.talos-stories__item:focus-visible::after,
.talos-news__item:hover::after,
.talos-news__event:hover::after,
.talos-news__item:focus-visible::after,
.talos-news__event:focus-visible::after {
	border-color: rgba(114, 195, 237, 0.75);
}

.talos-stories__item:focus-visible,
.talos-news__item:focus-visible,
.talos-news__event:focus-visible {
	outline: 2px solid var(--wp--preset--color--sky-strong);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.talos-stories__item,
	.talos-news__item,
	.talos-news__event,
	.talos-stories__item::after,
	.talos-news__item::after,
	.talos-news__event::after {
		transition: none;
	}
}

/*
 * Get Involved + Newsletter — Figma "09 · Get Involved + Newsletter" (1440 × 1305): 60px above, 136px below,
 * header row 80px, 48px gaps, the audience row 591px (circle graphic 580 × 560 + list of five), the newsletter card 342px.
 */
.talos-involved {
	box-sizing: border-box;
	padding: 0 40px;
	background: var(--wp--preset--color--page);
}

.talos-involved__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 48px;
	max-width: 1360px;
	margin: 0 auto;
	padding: 60px 40px 136px;
}

/* The header row is the one of Impact Areas (.talos-impact__header); here the text is 315px wide */
.talos-involved__lead p {
	width: 315px;
}

/* Figma: on a wide screen the sentence is one line, level with the bottom of the heading (below 1101px it wraps again) */
@media (min-width: 1101px) {
	.talos-involved .talos-impact__lead {
		flex: none;
		min-width: 0;
		max-width: none;
		height: auto;
	}

	.talos-involved .talos-involved__lead p {
		position: static;
		width: auto;
		white-space: nowrap;
	}
}

.talos-involved__audience {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start; /* Figma: the first line of the list starts level with the top of the circle card */
	gap: 40px 56px;
}

/* ---- Circle graphic: 580 × 560, everything is placed from its centre ---- */
.talos-involved__graphic {
	position: relative;
	flex: 1 0 0;
	min-width: 320px;
	max-width: 580px;
	height: 560px;
	overflow: hidden;
	border-radius: 32px;
	background: radial-gradient(322.22px 311.11px at 50% 50%, #fff 0%, rgb(219, 242, 255) 55%, rgb(204, 235, 201) 85%, rgb(214, 237, 173) 100%);
}

/* A photo of pins and threads, very blurred and faint, so the background is not flat */
.talos-involved__texture {
	position: absolute;
	top: -40px;
	right: -40px;
	bottom: -40px;
	left: -40px;
	width: calc(100% + 80px);
	height: calc(100% + 80px);
	max-width: none;
	object-fit: cover;
	opacity: 0.22;
	filter: blur(13px);
}

/* Soft colour spots: white in the middle, sky blue top left and top right, lime and green at the bottom */
.talos-involved__wash {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(208.8px 201.6px at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.2975) 50%, rgba(255, 255, 255, 0) 100%),
		radial-gradient(174px 156.8px at 5% 15%, rgba(183, 230, 255, 0.6) 0%, rgba(183, 230, 255, 0.21) 55%, rgba(183, 230, 255, 0) 100%),
		radial-gradient(185.6px 168px at 98% 90%, rgba(149, 193, 70, 0.45) 0%, rgba(149, 193, 70, 0.1575) 55%, rgba(149, 193, 70, 0) 100%),
		radial-gradient(348px 308px at 6% 98%, rgba(209, 223, 131, 0.9) 0%, rgba(209, 223, 131, 0.315) 55%, rgba(209, 223, 131, 0) 100%),
		radial-gradient(319px 280px at 92% 4%, rgba(114, 195, 237, 0.75) 0%, rgba(114, 195, 237, 0.2625) 55%, rgba(114, 195, 237, 0) 100%),
		linear-gradient(136deg, rgba(238, 248, 253, 0.55) 14.286%, rgba(247, 251, 255, 0.35) 53.571%, rgba(238, 245, 220, 0.6) 85.714%);
}

.talos-involved__orbit {
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	max-width: none;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.talos-involved__orbit--110 {
	width: 220px;
	height: 220px;
	border: 1.2px solid rgba(114, 195, 237, 0.9);
}

.talos-involved__orbit--190 {
	width: 380px;
	height: 380px;
	border-radius: 0;
}

.talos-involved__orbit--262 {
	width: 524px;
	height: 524px;
	border: 1.2px solid rgba(114, 195, 237, 0.5);
}

.talos-involved__core {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	background: var(--wp--preset--color--astronaut);
	box-shadow: 0 18px 40px -8px rgba(21, 45, 121, 0.3);
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.talos-involved__core-name {
	font-size: 22px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 1.76px;
	color: var(--wp--preset--color--white);
}

.talos-involved__core-line {
	font-family: "Chakra Petch", sans-serif;
	font-size: 9px;
	line-height: normal;
	letter-spacing: 1px;
	color: var(--wp--preset--color--lime);
}

/* A chip is placed by --talos-x / --talos-y: its distance from the centre of the graphic */
.talos-involved__chip {
	position: absolute;
	top: calc(50% + var(--talos-y));
	left: calc(50% + var(--talos-x));
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 10px 16px 10px 12px;
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 8px 20px -4px rgba(21, 45, 121, 0.12);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	white-space: nowrap;
	color: var(--wp--preset--color--navy);
	transform: translate(-50%, -50%);
}

.talos-involved__chip::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--sky);
}

.talos-involved__chip--green::before {
	background: var(--wp--preset--color--green);
}

/* ---- List of the five audiences ---- */
.talos-involved__list {
	flex: 1 0 0;
	min-width: 340px;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.talos-involved__list > li {
	margin: 0;
}

/* A row is an accordion: title, one line, and a longer text of two lines that the round arrow button opens (assets/js/involved.js) */
.talos-involved__row {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	box-sizing: border-box;
	padding: 28px 20px;
	border-top: 1px solid var(--wp--preset--color--border);
	cursor: pointer;
	color: var(--wp--preset--color--navy);
	-webkit-tap-highlight-color: transparent; /* no blue box on a tap (phones); the children inherit it */
	transition: background-color 0.25s ease-out, padding-left 0.25s ease-out;
}

.talos-involved__row-text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 1px;
}

.talos-involved__row-title {
	font-size: 28px;
	font-weight: 700;
	line-height: 34px;
	letter-spacing: -0.28px;
	color: var(--wp--preset--color--navy);
	transition: color 0.25s ease-out;
}

.talos-involved__row-desc {
	font-size: 16px;
	line-height: 19px;
	color: var(--wp--preset--color--text-secondary);
}

/*
 * The longer text: two lines with an ellipsis, all of it when it is open. The clamp itself cannot be animated, so
 * assets/js/involved.js animates the height (this transition) and adds .is-expanded to take the clamp off while
 * the text is open or opening.
 */
.talos-involved__row-more {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	font-size: 16px;
	line-height: 19px;
	color: var(--wp--preset--color--text-secondary);
	transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.talos-involved__row-more.is-expanded {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
}

/* "Get started" and the round arrow button */
.talos-involved__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 20px;
}

.talos-involved__toggle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 0;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	transition: border-color 0.25s ease-out, background-color 0.25s ease-out;
}

.talos-involved__toggle svg {
	display: block;
	transition: transform 0.25s ease-out;
}

.talos-involved__row.is-open .talos-involved__toggle svg {
	transform: rotate(180deg);
}

.talos-involved__toggle:hover,
.talos-involved__toggle:focus-visible {
	border-color: var(--wp--preset--color--navy);
}

.talos-involved__toggle,
.talos-involved__go {
	-webkit-tap-highlight-color: transparent;
}

/* Pressed, and while the row is open: the round button turns navy #152D79 with a white arrow */
.talos-involved__toggle:active,
.talos-involved__toggle[aria-expanded="true"] {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.talos-involved__toggle:focus-visible,
.talos-involved__go:focus-visible {
	outline: 2px solid var(--wp--preset--color--sky-strong);
	outline-offset: 2px;
}

/* "Get started": 15px, a 1.5px sky line under it, 6px below the text */
.talos-involved__go {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	padding-bottom: 6px;
	border-bottom: 1.5px solid var(--wp--preset--color--sky);
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	white-space: nowrap;
	color: var(--wp--preset--color--navy);
	transition: gap 0.25s ease-out, border-color 0.25s ease-out;
}

/*
 * The states of a row, from the Figma component "Audience row" (Default, Hover, Pressed).
 * Hover (also with the keyboard) is animated over 0.25s, ease-out:
 *  - the row gets a light blue background and its content moves 12px to the right (left padding 20 to 32),
 *  - the title turns bright blue,
 *  - "Get started": the line under it turns navy and grows 6px to the left (the gap to the arrow goes from 8px to 14px);
 *    the arrow stays where it is.
 * Pressed is the same, reached in 0.1s, with a stronger background and a deep blue title.
 */
/* Only where there is a real hover: on a touch screen a tap would leave the row stuck in its hover state */
@media (hover: hover) {
	.talos-involved__row:hover {
		padding-left: 32px;
		background: #F2F8FC;
	}

	.talos-involved__row:hover .talos-involved__row-title {
		color: var(--wp--preset--color--sky-strong);
	}

	.talos-involved__row:hover .talos-involved__go {
		gap: 14px;
		border-bottom-color: var(--wp--preset--color--navy);
	}
}

@media (hover: hover) {
	.talos-involved__row:active {
		padding-left: 32px;
		background: var(--wp--preset--color--sky-soft);
		transition-duration: 0.1s;
	}

	.talos-involved__row:active .talos-involved__row-title {
		color: var(--wp--preset--color--blue);
		transition-duration: 0.1s;
	}

	.talos-involved__row:active .talos-involved__go {
		gap: 14px;
		border-bottom-color: var(--wp--preset--color--navy);
		transition-duration: 0.1s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.talos-involved__row,
	.talos-involved__row-title,
	.talos-involved__go,
	.talos-involved__toggle,
	.talos-involved__toggle svg,
	.talos-involved__row-more {
		transition: none;
	}
}

/* ---- Newsletter card ---- */
.talos-involved__newsletter {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
	box-sizing: border-box;
	padding: 56px;
	overflow: hidden;
	border-radius: 36px;
	background:
		radial-gradient(640px 376.28px at 100% 0, rgba(114, 195, 237, 0.35) 0%, rgba(114, 195, 237, 0) 70%),
		radial-gradient(512px 342.07px at 0 100%, rgba(149, 193, 70, 0.28) 0%, rgba(149, 193, 70, 0) 70%),
		var(--wp--preset--color--navy-deep);
}

/* The spiral line drawing in the bottom right corner */
.talos-involved__spiral {
	position: absolute;
	right: -40px;
	bottom: -119.93px;
	width: 360px;
	height: 443.06px;
	max-width: none;
	pointer-events: none;
}

.talos-involved__news-text {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
	min-width: 300px;
	max-width: 530px;
}

.talos-involved__news-head {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.talos-involved__news-head > * {
	margin: 0;
}

.talos-involved__news-eyebrow {
	font-family: "Chakra Petch", sans-serif;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 1.32px;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
}

.talos-involved__news-title {
	max-width: 332px;
	font-size: 48px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -2.16px;
	color: var(--wp--preset--color--white);
}

.talos-involved__news-lead {
	max-width: 441px;
	font-size: 17px;
	line-height: 27.2px;
	color: rgba(255, 255, 255, 0.75);
}

.talos-involved__follow {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.talos-involved__follow-label {
	margin: 0;
	font-size: 16px;
	line-height: 25px;
	color: var(--wp--preset--color--white);
}

.talos-involved__social {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-involved__social > li {
	margin: 0;
}

.talos-involved__social a {
	display: block;
	line-height: 0;
	transition: opacity 0.2s ease;
}

.talos-involved__social a:hover,
.talos-involved__social a:focus-visible {
	opacity: 0.7;
}

/* ---- The form ---- */
.talos-involved__form {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 14px;
	box-sizing: border-box;
	min-width: 300px;
	padding: 28px;
	border: 1px solid rgba(114, 195, 237, 0.25);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.1);
}

.talos-involved__form-label {
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--white);
}

.talos-involved__form-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px;
}

.talos-involved__input {
	flex: 1 1 0;
	box-sizing: border-box;
	min-width: 1px;
	height: 55px;
	padding: 18px 21px;
	border: 1px solid #CFD8E8;
	border-radius: 27px;
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: 16px;
	color: var(--wp--preset--color--navy);
}

.talos-involved__input::placeholder {
	color: #757575;
	opacity: 1;
}

.talos-involved__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--sky);
	outline-offset: 2px;
}

.talos-involved__submit {
	box-sizing: border-box;
	min-height: 54px;
	padding: 0 26px;
	cursor: pointer;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--lime);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--navy-deep);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover: white, with a soft shadow (read from the Figma hover: #FFFFFF, about 20% dark underneath) */
.talos-involved__submit:hover,
.talos-involved__submit:focus-visible {
	background: var(--wp--preset--color--white);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.talos-involved__consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

/* A 20px white box with a thin grey border, as in the design; a tick shows when it is checked */
.talos-involved__check {
	position: relative;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid #767676;
	border-radius: 2.5px;
	background: var(--wp--preset--color--white);
}

.talos-involved__check:checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 6px;
	width: 5px;
	height: 10px;
	border: solid var(--wp--preset--color--navy);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.talos-involved__check:focus-visible {
	outline: 2px solid var(--wp--preset--color--sky);
	outline-offset: 2px;
}

.talos-involved__consent label {
	font-size: 13px;
	line-height: 19.5px;
	color: rgba(255, 255, 255, 0.75);
}

.talos-involved__consent a {
	color: var(--wp--preset--color--sky);
	text-decoration: none;
}

.talos-involved__consent a:hover,
.talos-involved__consent a:focus-visible {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.talos-involved__row,
	.talos-involved__row-title,
	.talos-involved__go svg,
	.talos-involved__social a,
	.talos-involved__submit {
		transition: none;
	}
}

/*
 * Tablet — Figma 768 "09 · Get Involved + Newsletter": 64px at the sides (32 + 32), 56px above and below, 48px
 * between the blocks. The header row stays side by side. The circle graphic (580 × 560) is centred above the
 * list (32px), the rows keep their 28px / 20px padding, and the newsletter card is stacked: text, then the form
 * (48px / 40px inside, 32px apart), the title is 40/40, the subscribe button sits under the field.
 */
@media (max-width: 1100px) {
	.talos-involved {
		padding: 0 32px;
	}

	.talos-involved__inner {
		padding: 56px 32px;
	}

	.talos-involved__audience {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.talos-involved__graphic {
		flex: none;
		align-self: center;
		width: 580px;
		max-width: 100%;
		min-width: 0;
	}

	.talos-involved__list {
		flex: none;
		min-width: 0;
	}

	.talos-involved__row-title {
		letter-spacing: -1px;
	}

	.talos-involved__newsletter {
		gap: 32px;
		padding: 48px 40px;
	}

	.talos-involved__news-text,
	.talos-involved__form {
		flex-basis: 100%;
		max-width: none;
		min-width: 0;
	}

	.talos-involved__news-title {
		max-width: none;
		font-size: 40px;
		line-height: 40px;
		letter-spacing: -1.8px;
	}

	.talos-involved__form {
		padding: 28px;
	}

	/* One flex line (no wrap), so the field and the button are as wide as the form and never wider */
	.talos-involved__form-row {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 24px;
	}

	.talos-involved__input {
		flex: none;
		align-self: stretch;
	}
}

/*
 * Phone — Figma 390: 40px at the sides and above and below, the header row stacked (24px), the whole circle
 * graphic scaled to 310px (zoom 0.5345: chips and rings shrink with it; a bit smaller on the narrowest
 * phones), rows with 4px at the sides and 16px between text and link, the card 32px / 20px inside with the
 * 32/32 title, the field and the button each the full width of the form, and the spiral moved left.
 */
@media (max-width: 640px) {
	.talos-involved {
		padding: 0 20px;
	}

	.talos-involved__inner {
		padding: 40px 20px;
	}

	.talos-involved .talos-impact__header {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.talos-involved .talos-impact__intro {
		flex: none;
		min-width: 0;
	}

	.talos-involved .talos-impact__lead {
		flex: none;
		min-width: 0;
		height: auto;
		max-width: none;
	}

	.talos-involved__lead p {
		position: static;
		width: auto;
		font-size: 16px;
		line-height: 26px;
	}

	.talos-involved__audience {
		gap: 24px;
	}

	.talos-involved__graphic {
		align-self: center;
		width: 580px;
		max-width: none;
		zoom: 0.5345;
	}

	/* The text on the left and the round arrow button on the right, level with the title (top right of the row) */
	.talos-involved__row {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
		padding: 28px 4px;
	}

	.talos-involved__row-text {
		flex: 1 1 0;
		min-width: 1px;
	}

	.talos-involved__actions {
		flex: none;
		justify-content: flex-end;
		width: auto;
	}

	.talos-involved__newsletter {
		gap: 24px;
		padding: 32px 20px;
	}

	.talos-involved__spiral {
		right: -55px;
	}

	.talos-involved__news-title {
		font-size: 32px;
		line-height: 32px;
		letter-spacing: -1.44px;
	}

	.talos-involved__news-lead {
		font-size: 16px;
		line-height: 26px;
	}

	.talos-involved__form-row {
		align-items: stretch;
		gap: 12px;
	}
}

/*
 * The graphic's rings and chips are placed in px from its centre, so it can only scale as a whole (zoom). At 390 the
 * design shows it 310px wide (zoom 0.5345); the other widths get one zoom per band, picked so it never exceeds the
 * column and stays centred. Column width = screen minus 80 on a phone (20 + 20 each side), minus 128 on a tablet (32 + 32).
 */
@media (max-width: 339px) {
	.talos-involved__graphic {
		zoom: 0.41;
	}
}

@media (min-width: 340px) and (max-width: 359px) {
	.talos-involved__graphic {
		zoom: 0.445;
	}
}

@media (min-width: 360px) and (max-width: 389px) {
	.talos-involved__graphic {
		zoom: 0.48;
	}
}

@media (min-width: 440px) and (max-width: 489px) {
	.talos-involved__graphic {
		zoom: 0.62;
	}
}

@media (min-width: 490px) and (max-width: 539px) {
	.talos-involved__graphic {
		zoom: 0.7;
	}
}

@media (min-width: 540px) and (max-width: 589px) {
	.talos-involved__graphic {
		zoom: 0.79;
	}
}

@media (min-width: 590px) and (max-width: 640px) {
	.talos-involved__graphic {
		zoom: 0.88;
	}
}

@media (min-width: 641px) and (max-width: 667px) {
	.talos-involved__graphic {
		max-width: none;
		zoom: 0.88;
	}
}

@media (min-width: 668px) and (max-width: 707px) {
	.talos-involved__graphic {
		max-width: none;
		zoom: 0.93;
	}
}

/* The narrowest phones: the card and its form lose some padding so the e-mail field keeps a readable width */
@media (max-width: 340px) {
	.talos-involved__newsletter {
		padding: 28px 16px;
	}

	.talos-involved__form {
		padding: 20px 16px;
	}
}

/*
 * News page — Figma "News — Archive" (1440 × 3593). The hero is the page hero of the About page.
 * Filters 82px, featured article 573px, list of articles, subscribe band 372px.
 */

/* ---- Filters: a white pill with a navy border: category chips on the left, search and sort on the right ---- */
.talos-news-filters {
	box-sizing: border-box;
	padding: 8px 80px 0;
}

.talos-news-filters__bar {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
}

.talos-news-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-news-filters__chips > li {
	margin: 0;
}

.talos-news-filters__chip {
	display: block;
	box-sizing: border-box;
	padding: 9px 16px;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	color: var(--wp--preset--color--navy);
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* No hover colour (the design has none); only a ring for keyboard focus */
.talos-news-filters__chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--sky-strong);
	outline-offset: 2px;
}

.talos-news-filters__chip.is-active,
.talos-news-filters__chip.is-active:hover {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.talos-news-filters__tools {
	display: flex;
	margin: 0;
	align-items: center;
	gap: 10px;
}

.talos-news-filters__search {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.talos-news-filters__search {
	gap: 10px;
	height: 44px;
	padding: 11px 18px;
}

.talos-news-filters__search svg {
	flex: none;
}

.talos-news-filters__search input {
	box-sizing: border-box;
	width: 113px;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	line-height: normal;
	color: var(--wp--preset--color--navy);
}

.talos-news-filters__search input::placeholder {
	color: var(--wp--preset--color--text-tertiary);
	opacity: 1;
}

.talos-news-filters__search input:focus {
	outline: none;
}

.talos-news-filters__search:focus-within {
	border-color: var(--wp--preset--color--sky-strong);
}

/* Sort: a pill that opens a small menu (a native list could not be styled to match the site) */
.talos-news-filters__sort {
	position: relative;
}

.talos-news-filters__sort > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 11px 18px;
	cursor: pointer;
	list-style: none;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	white-space: nowrap;
	color: var(--wp--preset--color--navy);
	transition: border-color 0.2s ease;
}

.talos-news-filters__sort > summary::-webkit-details-marker {
	display: none;
}

.talos-news-filters__sort > summary svg {
	flex: none;
	transition: transform 0.2s ease;
}

.talos-news-filters__sort > summary:hover {
	border-color: var(--wp--preset--color--navy);
}

.talos-news-filters__sort > summary:active {
	background: var(--wp--preset--color--sky-soft);
	border-color: var(--wp--preset--color--navy);
}

/* Open: a 2px sky border (the padding is 1px less so the button does not grow) */
.talos-news-filters__sort[open] > summary {
	padding: 10px 17px;
	border-width: 2px;
	border-color: var(--wp--preset--color--sky-strong);
}

.talos-news-filters__sort[open] > summary svg {
	transform: rotate(180deg);
}

.talos-news-filters__sort > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--sky-strong);
	outline-offset: 2px;
}

.talos-news-filters__menu {
	position: absolute;
	top: calc(100% + 8px);
	left: -2px;
	translate: var(--talos-menu-shift, 0px) 0; /* set by news-filters.js when the menu would leave the screen */
	z-index: 5;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 234px; /* the options are 220px wide, plus the 6px padding on both sides and the border */
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
	filter: drop-shadow(0 14px 16px rgba(21, 45, 121, 0.14));
}

.talos-news-filters__menu > li {
	margin: 0;
}

/* Figma: the item under the pointer and the current one sit on light blue; the current one has a check mark */
.talos-news-filters__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	white-space: nowrap;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.talos-news-filters__menu a:hover,
.talos-news-filters__menu a:focus-visible {
	background: var(--wp--preset--color--sky-soft);
}

.talos-news-filters__menu a:active {
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.22);
}

.talos-news-filters__menu a.is-current {
	background: var(--wp--preset--color--sky-soft);
	color: var(--wp--preset--color--blue);
}

.talos-news-filters__menu a.is-current::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.5l3 3 6-7' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7.5l3 3 6-7' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Featured article ---- */
.talos-news-featured {
	box-sizing: border-box;
	padding: 48px 80px;
}

.talos-news-featured__card {
	display: flex;
	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 28px;
	background: var(--wp--preset--color--white);
}

.talos-news-featured__image {
	position: relative;
	flex: none;
	align-self: stretch;
	width: 680px;
}

.talos-news-featured__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.talos-news-featured__content {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	justify-content: center;
	box-sizing: border-box;
	min-width: 1px;
	padding: 36px 48px;
}

.talos-news-featured__content > * {
	margin: 0;
}

.talos-news-featured__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.talos-news-featured__tag {
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--navy);
	font-family: "Chakra Petch", sans-serif;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--white);
}

.talos-news-featured__date {
	font-size: 12px;
	line-height: normal;
	white-space: nowrap;
	color: var(--wp--preset--color--text-tertiary);
}

.talos-news-featured__title {
	font-size: 36px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -0.54px;
	color: var(--wp--preset--color--navy);
}

.talos-news-featured__lead {
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-news-featured__author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.talos-news-featured__avatar {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--sky-soft);
}

.talos-news-featured__author-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	white-space: nowrap;
}

.talos-news-featured__author-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--navy);
}

.talos-news-featured__author-role {
	font-size: 12px;
	line-height: normal;
	color: var(--wp--preset--color--text-tertiary);
}

/* The primary button, 58px high with a 14px radius, left aligned */
.talos-news-featured__button {
	align-self: flex-start;
	gap: 12px;
	min-height: 58px;
	padding: 0 28px;
	border-radius: 14px;
	font-size: 16px;
}

/* ---- List of articles ---- */
.talos-news-list {
	box-sizing: border-box;
	padding: 24px 80px;
}

.talos-news-list__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
}

.talos-news-list__results {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
}

.talos-news-list__results > * {
	margin: 0;
}

.talos-news-list__title {
	font-size: 32px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -1.28px;
	color: var(--wp--preset--color--navy);
}

.talos-news-list__count {
	font-size: 14px;
	line-height: normal;
	color: var(--wp--preset--color--text-tertiary);
}

.talos-news-list__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-news-list__grid > li {
	display: flex;
	margin: 0;
}

.talos-article {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	box-sizing: border-box;
	height: 520px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover: the same light blue border and soft shadow as the other cards of the site */
.talos-article:hover,
.talos-article:focus-visible {
	border-color: rgba(114, 195, 237, 0.75);
	box-shadow: 0 18px 36px rgba(21, 45, 121, 0.13);
}

.talos-article:focus-visible {
	outline: 2px solid var(--wp--preset--color--sky-strong);
	outline-offset: 3px;
}

.talos-article__photo {
	position: relative;
	display: block;
	flex: none;
	height: 240px;
	overflow: hidden;
}

.talos-article__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.talos-article__body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 12px;
	box-sizing: border-box;
	min-height: 1px;
	padding: 24px;
}

.talos-article__meta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.talos-article__tag {
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--sky-soft);
	font-family: "Chakra Petch", sans-serif;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--blue);
}

.talos-article__date {
	font-size: 12px;
	line-height: normal;
	white-space: nowrap;
	color: var(--wp--preset--color--text-tertiary);
}

/* Two lines for the title and three for the summary, then "…" */
.talos-article__title,
.talos-article__summary {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
}

.talos-article__title {
	font-size: 22px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 1.76px;
	color: var(--wp--preset--color--navy);
	-webkit-line-clamp: 2;
}

.talos-article__summary {
	font-size: 15px;
	line-height: 23.25px;
	color: var(--wp--preset--color--text-secondary);
	-webkit-line-clamp: 3;
}

.talos-article__more {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--sky-strong);
}

.talos-article__more svg {
	flex: none;
	transition: transform 0.2s ease;
}

.talos-article:hover .talos-article__more svg,
.talos-article:focus-visible .talos-article__more svg {
	transform: translateX(3px);
}

/* ---- Page numbers ---- */
.talos-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.talos-pagination__arrow,
.talos-pagination__page,
.talos-pagination__gap {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.talos-pagination__arrow {
	width: 48px;
	height: 48px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.talos-pagination__arrow--next {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.talos-pagination__arrow:hover,
.talos-pagination__arrow:focus-visible {
	border-color: var(--wp--preset--color--navy);
}

.talos-pagination__arrow--next:hover,
.talos-pagination__arrow--next:focus-visible {
	background: var(--wp--preset--color--blue);
	border-color: var(--wp--preset--color--blue);
}

.talos-pagination__page,
.talos-pagination__gap {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--navy);
}

.talos-pagination__page {
	border: 1px solid var(--wp--preset--color--border);
	transition: border-color 0.2s ease;
}

.talos-pagination__page:hover,
.talos-pagination__page:focus-visible {
	border-color: var(--wp--preset--color--navy);
}

.talos-pagination__page.is-current {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* ---- Subscribe band ---- */
.talos-news-subscribe {
	box-sizing: border-box;
	padding: 91px 80px;
}

.talos-news-subscribe__band {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 56px;
	overflow: hidden;
	border-radius: 28px;
	background: var(--wp--preset--color--astronaut);
}

.talos-news-subscribe__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 10px;
	min-width: 280px;
}

.talos-news-subscribe__text > * {
	margin: 0;
}

.talos-news-subscribe__eyebrow {
	font-family: "Chakra Petch", sans-serif;
	font-size: 12px;
	line-height: normal;
	letter-spacing: 1.44px;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
}

.talos-news-subscribe__title {
	font-size: 32px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -1.28px;
	color: var(--wp--preset--color--white);
}

.talos-news-subscribe__lead {
	font-size: 16px;
	line-height: normal;
	color: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: reduce) {
	.talos-article,
	.talos-article__photo img,
	.talos-article__more svg {
		transition: none;
	}
}

/* No mobile design in Figma yet: less padding, the featured article stacks, the grid gets fewer columns */
@media (max-width: 1100px) {
	.talos-news-filters,
	.talos-news-featured,
	.talos-news-list {
		padding-right: var(--talos-gutter);
		padding-left: var(--talos-gutter);
	}

	.talos-news-subscribe {
		padding: 64px var(--talos-gutter);
	}

	.talos-news-filters__bar {
		border-radius: 28px;
	}

	.talos-news-featured__card {
		flex-direction: column;
	}

	.talos-news-featured__image {
		width: 100%;
		height: 320px;
	}

	.talos-news-featured__content {
		padding: 28px 24px;
	}

	.talos-news-featured__title {
		font-size: 28px;
		line-height: 32px;
	}

	.talos-news-list__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.talos-news-subscribe__band {
		padding: 32px 24px;
	}
}

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

	/* Search (113px field) and the sort pill are wider than a 320px bar: they wrap, the search takes what is left */
	.talos-news-filters__tools {
		flex-wrap: wrap;
		width: 100%;
	}

	.talos-news-filters__search {
		flex: 1 1 150px;
		min-width: 0;
	}

	.talos-news-filters__search input {
		width: 100%;
		min-width: 0;
	}
}

/* Empty states and missing pictures */
.talos-news-list__empty {
	margin: 0;
	padding: 40px 0;
	text-align: center;
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-news-list__empty a {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.talos-pagination__arrow.is-disabled {
	opacity: 0.4;
	pointer-events: none;
}

.talos-stories__photo,
.talos-news__photo,
.talos-article__photo,
.talos-news-featured__image {
	background: var(--wp--preset--color--sky-soft);
}

/*
 * News article — Figma "News — Article" (1440 × 3810). The hero is the page hero of the About page, with the
 * author and the share buttons added. Then the cover image (560px), the text (880px) with a sticky side column
 * (320px), and the related articles.
 */

/* ---- Hero: author on the left, share buttons on the right ---- */
.talos-article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	max-width: 1280px;
	margin-top: 16px;
	padding-top: 8px;
}

.talos-article-meta__author {
	display: flex;
	align-items: center;
	gap: 14px;
}

.talos-article-meta__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	white-space: nowrap;
}

.talos-article-meta__name {
	font-size: 15px;
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--navy);
}

.talos-article-meta__date {
	font-size: 13px;
	line-height: normal;
	color: var(--wp--preset--color--text-tertiary);
}

/* The round picture of an author: the first letters of the name */
.talos-avatar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--sky-soft);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--navy);
}

.talos-avatar--large {
	width: 64px;
	height: 64px;
	font-size: 20px;
}

/* ---- Share buttons ---- */
.talos-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.talos-share__label {
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-share__btn {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Hover: navy circle, white icon. Pressed: navy-deep with a soft inner shadow (Figma) */
.talos-share__btn:hover,
.talos-share__btn:focus-visible {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.talos-share__btn:active {
	border-color: var(--wp--preset--color--navy-deep);
	background: var(--wp--preset--color--navy-deep);
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.22);
}

.talos-share__btn.is-copied {
	border-color: var(--wp--preset--color--green);
	background: var(--wp--preset--color--lime-soft);
}

.talos-share--card {
	box-sizing: border-box;
	padding: 18px 24px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
}

.talos-share__label--caps {
	font-family: "Chakra Petch", sans-serif;
	font-size: 11px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-tertiary);
}

.talos-share__spacer {
	flex: 1 1 0;
	min-width: 1px;
}

/* ---- Cover image ---- */
.talos-article-cover {
	box-sizing: border-box;
	padding: 0 80px;
}

.talos-article-cover__figure {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 1280px;
	margin: 0 auto;
}

.talos-article-cover__image {
	display: block;
	width: 100%;
	height: 560px;
	object-fit: cover;
	border-radius: 28px;
}

.talos-article-cover__caption {
	font-size: 12px;
	line-height: normal;
	color: var(--wp--preset--color--text-tertiary);
}

/* ---- Text and side column ---- */
.talos-article-body {
	box-sizing: border-box;
	padding: 72px 80px;
}

.talos-article-body__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px 80px;
	max-width: 1280px;
	margin: 0 auto;
}

.talos-article-body__main {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 24px;
	min-width: 300px;
	max-width: 880px;
}

/* Stays in view while the text scrolls */
.talos-article-body__aside {
	position: sticky;
	top: calc(var(--talos-header-offset) + 16px); /* below the sticky header */
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 16px;
	width: 320px;
}

/* The text of the article: the first paragraph is the large lead, the rest is body text */
.talos-article-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.talos-article-content > * {
	margin: 0;
}

.talos-article-content p {
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-article-content > p:first-child {
	font-size: 20px;
	line-height: 31px;
	color: var(--wp--preset--color--navy);
}

.talos-article-content h2 {
	font-size: 32px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -1.28px;
	color: var(--wp--preset--color--navy);
}

.talos-article-content h3 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.5px;
	color: var(--wp--preset--color--navy);
}

.talos-article-content h4 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--navy);
}

.talos-article-content a {
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.talos-article-content a:hover,
.talos-article-content a:focus-visible {
	color: var(--wp--preset--color--sky-strong);
}

/* Lists: a small green dot in front of each item */
.talos-article-content ul,
.talos-article-content ol {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	list-style: none;
}

.talos-article-content li {
	position: relative;
	padding-left: 20px;
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-article-content ul > li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
}

.talos-article-content ol {
	padding-left: 24px;
	list-style: decimal;
}

.talos-article-content ol > li {
	padding-left: 8px;
}

/* A quote: a light blue card with a green bar */
.talos-article-content blockquote {
	position: relative;
	box-sizing: border-box;
	padding: 32px 32px 32px 60px;
	border: 0;
	border-radius: 24px;
	background: var(--wp--preset--color--sky-soft);
}

.talos-article-content blockquote::before {
	content: "";
	position: absolute;
	top: 32px;
	bottom: 32px;
	left: 32px;
	width: 4px;
	border-radius: 2px;
	background: var(--wp--preset--color--green);
}

.talos-article-content blockquote p {
	margin: 0;
	font-size: 26px;
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--navy);
}

.talos-article-content blockquote cite {
	display: block;
	margin-top: 12px;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--text-secondary);
}

/* Pictures inside the text */
.talos-article-content figure {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.talos-article-content img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 20px;
}

.talos-article-content figcaption {
	font-size: 12px;
	line-height: normal;
	color: var(--wp--preset--color--text-tertiary);
}

.talos-article-content hr {
	height: 1px;
	border: 0;
	background: var(--wp--preset--color--border);
}

/* Author box under the text */
.talos-author-box {
	display: flex;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
	padding: 28px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
}

.talos-author-box__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 4px;
	min-width: 1px;
}

.talos-author-box__text > * {
	margin: 0;
}

.talos-author-box__name {
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	color: var(--wp--preset--color--navy);
}

.talos-author-box__bio {
	font-size: 15px;
	line-height: 23.25px;
	color: var(--wp--preset--color--text-secondary);
}

/* Side card: the impact area of the article */
.talos-impact-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	box-sizing: border-box;
	padding: 28px;
	border-radius: 24px;
	background: var(--wp--preset--color--astronaut);
}

.talos-impact-card > * {
	margin: 0;
}

.talos-impact-card__eyebrow {
	font-family: "Chakra Petch", sans-serif;
	font-size: 12px;
	line-height: normal;
	letter-spacing: 1.44px;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
}

.talos-impact-card__title {
	font-size: 22px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 1.76px;
	color: var(--wp--preset--color--white);
}

.talos-impact-card__text {
	font-size: 15px;
	line-height: 23.25px;
	color: var(--wp--preset--color--white);
}

/* ---- Related articles: a white band, 3 cards 497px high ---- */
.talos-related {
	box-sizing: border-box;
	padding: 96px 80px;
	background: var(--wp--preset--color--white);
}

.talos-related__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
}

.talos-related__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.talos-related__heading {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.talos-related__heading > * {
	margin: 0;
}

.talos-article--related {
	height: 497px;
}

@media (prefers-reduced-motion: reduce) {
	.talos-share__btn,
	.talos-player__disc,
	.talos-episode,
	.talos-podcast-list__button {
		transition: none;
	}
}

/* No mobile design in Figma yet: less padding, the side column goes below the text, a shorter cover image */
@media (max-width: 1100px) {
	.talos-article-cover,
	.talos-article-body,
	.talos-related {
		padding-right: var(--talos-gutter);
		padding-left: var(--talos-gutter);
	}

	.talos-article-cover__image {
		height: 320px;
	}

	.talos-article-body {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.talos-article-body__main {
		flex-basis: 100%;
		max-width: none;
		min-width: 0; /* the 300px minimum is for the desktop row: on a 320px screen the column is 280px */
	}

	.talos-article-body__aside {
		position: static;
		width: 100%;
	}

	.talos-related {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.talos-article-content h2 {
		font-size: 26px;
	}

	.talos-article-content blockquote p {
		font-size: 21px;
	}
}

/*
 * Podcasts — Figma "Podcasts" (1440 × 2671). The hero is the page hero of the About page, with the "Listen on"
 * buttons. Then the newest episode on a dark card (480px band), the list of episodes, and a subscribe band.
 */

/* ---- "Listen on" buttons in the hero ---- */
.talos-listen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.talos-listen__label {
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-listen__chip {
	box-sizing: border-box;
	padding: 9px 16px;
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 500;
	line-height: 17px;
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

.talos-listen__chip:focus-visible {
	outline: 2px solid var(--wp--preset--color--sky-strong);
	outline-offset: 2px;
}

/* ---- Cover of an episode: the picture (or a navy background), TALOS PODCAST and EP. 04 ---- */
.talos-episode-cover {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	overflow: hidden;
	background: linear-gradient(135deg, var(--wp--preset--color--astronaut), var(--wp--preset--color--navy-deep));
	color: var(--wp--preset--color--white);
}

.talos-episode-cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.talos-episode-cover__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(3, 18, 65, 0) 0%, rgba(3, 18, 65, 0.15) 40%, rgba(3, 18, 65, 0.92) 100%);
}

.talos-episode-cover__label,
.talos-episode-cover__number {
	position: relative;
	white-space: nowrap;
}

.talos-episode-cover__label {
	font-family: "Chakra Petch", sans-serif;
	line-height: normal;
	text-transform: uppercase;
}

.talos-episode-cover--large {
	width: 340px;
	height: 340px;
	padding: 31px;
	border-radius: 24px;
}

.talos-episode-cover--large .talos-episode-cover__label {
	font-size: 12px;
	letter-spacing: 1.44px;
}

.talos-episode-cover--large .talos-episode-cover__number {
	font-size: 60px;
	font-weight: 700;
	line-height: 58.8px;
	letter-spacing: -2.7px;
}

.talos-episode-cover--small {
	width: 112px;
	height: 112px;
	padding: 10px;
	border-radius: 18px;
}

.talos-episode-cover--small .talos-episode-cover__label {
	font-size: 9px;
	letter-spacing: 1px;
}

.talos-episode-cover--small .talos-episode-cover__number {
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
}

/* ---- The player: round button, time, bar, length, speed ---- */
.talos-player {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 12px 14px;
	border-radius: 999px;
}

.talos-player__play {
	display: block;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	cursor: pointer;
	border: 0;
	background: none;
	text-decoration: none;
}

.talos-player__play svg {
	display: block;
	width: 100%;
	height: 100%;
}

.talos-player__disc {
	fill: var(--talos-play-bg);
	transition: fill 0.2s ease;
}

.talos-player__glyph {
	fill: var(--talos-play-fg);
}

.talos-player__glyph--pause,
.talos-player.is-playing .talos-player__glyph--play {
	display: none;
}

.talos-player.is-playing .talos-player__glyph--pause {
	display: block;
}

.talos-player__play:focus-visible,
.talos-player__speed:focus-visible,
.talos-player__bar:focus-visible {
	outline: 2px solid var(--wp--preset--color--sky-strong);
	outline-offset: 2px;
}

.talos-player__time,
.talos-player__total,
.talos-player__speed,
.talos-player__label {
	font-size: 12px;
	line-height: normal;
	white-space: nowrap;
}

.talos-player__time,
.talos-player__speed {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.talos-player__speed {
	padding: 0;
	cursor: pointer;
	border: 0;
	background: none;
	font-family: inherit;
}

.talos-player__bar {
	position: relative;
	flex: 1 1 0;
	min-width: 40px;
	height: 6px;
	cursor: pointer;
	border-radius: 999px;
}

/* A taller invisible area, so the thin bar is easy to click */
.talos-player__bar::before {
	content: "";
	position: absolute;
	inset: -10px 0;
}

.talos-player__played {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	min-width: 4px;
	height: 6px;
	border-radius: 999px;
}

/* Without an audio file the bar and the speed are only drawn, they do not react */
.talos-player--link .talos-player__bar,
.talos-player--link .talos-player__speed {
	pointer-events: none;
}

/*
 * Big player on the dark card: a see-through pill (white at 8% on the navy), white text and a lime round button.
 * Values read from the pixels of the approved version: pill #172550 on #031241, bar #D1DF83, glow about 30%.
 */
.talos-player--feature {
	gap: 16px;
	border: 1px solid rgba(114, 195, 237, 0.4);
	background: rgba(255, 255, 255, 0.08);
	--talos-play-bg: var(--wp--preset--color--lime);
	--talos-play-fg: var(--wp--preset--color--navy-deep);
}

.talos-player--feature .talos-player__play {
	width: 44px;
	height: 44px;
}

.talos-player--feature .talos-player__time,
.talos-player--feature .talos-player__total,
.talos-player--feature .talos-player__speed {
	color: var(--wp--preset--color--white);
}

.talos-player--feature .talos-player__bar {
	background: rgba(255, 255, 255, 0.18);
}

.talos-player--feature .talos-player__played {
	background: var(--wp--preset--color--lime);
}

/* Hover: the round button turns sky blue (the pill stays as it is) */
.talos-player--feature:hover {
	--talos-play-bg: var(--wp--preset--color--sky);
}

/* Player in a row of the list: grey pill, navy button */
.talos-player--row {
	gap: 12px;
	width: 100%;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--page);
	--talos-play-bg: var(--wp--preset--color--navy);
	--talos-play-fg: var(--wp--preset--color--white);
}

.talos-player--row .talos-player__bar {
	background: var(--wp--preset--color--border-strong);
}

.talos-player--row .talos-player__played {
	background: var(--wp--preset--color--sky-strong);
}

.talos-player--row .talos-player__total {
	color: var(--wp--preset--color--text-tertiary);
}

/* ---- Newest episode: a dark card on a white band, with a soft blue glow in the corner ---- */
.talos-podcast-latest {
	box-sizing: border-box;
	padding: 24px 80px;
	background: var(--wp--preset--color--white);
}

.talos-podcast-latest__card {
	position: relative;
	display: flex;
	align-items: center;
	gap: 48px;
	box-sizing: border-box;
	max-width: 1280px;
	min-height: 432px;
	margin: 0 auto;
	padding: 40px;
	overflow: hidden;
	border-radius: 32px;
	background: var(--wp--preset--color--navy-deep);
}

.talos-podcast-latest__card.is-focused {
	scroll-margin-top: 120px;
	outline: 3px solid rgba(114, 195, 237, 0.75);
	outline-offset: 4px;
}

.talos-podcast-latest__card::before {
	content: "";
	position: absolute;
	top: -200px;
	right: 0;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: var(--wp--preset--color--sky);
	filter: blur(85px);
	opacity: 0.3;
	pointer-events: none;
}

.talos-podcast-latest__card > * {
	position: relative;
}

.talos-podcast-latest__content {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 18px;
	min-width: 1px;
}

.talos-podcast-latest__content > * {
	margin: 0;
}

.talos-podcast-latest__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.talos-podcast-latest__tag {
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--lime);
	font-family: "Chakra Petch", sans-serif;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--navy-deep);
}

.talos-podcast-latest__date {
	font-size: 12px;
	line-height: normal;
	color: var(--wp--preset--color--white);
}

.talos-podcast-latest__title {
	font-size: 36px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -0.54px;
	color: var(--wp--preset--color--white);
}

.talos-podcast-latest__title a {
	text-decoration: none;
	color: inherit;
}

.talos-podcast-latest__guests {
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--sky);
}

.talos-podcast-latest__summary {
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--white);
}

/* ---- List of the other episodes ---- */
.talos-podcast-list {
	box-sizing: border-box;
	padding: 70px 80px;
}

.talos-podcast-list__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 1280px;
	margin: 0 auto;
}

.talos-podcast-list__title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -1.28px;
	color: var(--wp--preset--color--navy);
}

.talos-podcast-list__empty {
	margin: 0;
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-episode {
	scroll-margin-top: 120px; /* the sticky header does not cover an episode opened from a link */
	display: flex;
	align-items: center;
	gap: 28px;
	box-sizing: border-box;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover of a row: the light blue border and soft shadow of the other cards, and the round button turns blue */
.talos-episode:hover,
.talos-episode:focus-within,
.talos-episode.is-focused {
	border-color: rgba(114, 195, 237, 0.75);
	box-shadow: 0 18px 36px rgba(21, 45, 121, 0.13);
}

.talos-episode:hover .talos-player--row,
.talos-episode:focus-within .talos-player--row,
.talos-episode.is-focused .talos-player--row {
	--talos-play-bg: var(--wp--preset--color--sky-strong);
}

.talos-episode__content {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 1px;
}

.talos-episode__content > * {
	margin: 0;
}

.talos-episode__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.talos-episode__tag {
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--wp--preset--color--sky-soft);
	font-family: "Chakra Petch", sans-serif;
	font-size: 11px;
	line-height: normal;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--wp--preset--color--blue);
}

.talos-episode__date {
	font-size: 12px;
	line-height: normal;
	white-space: nowrap;
	color: var(--wp--preset--color--text-tertiary);
}

.talos-episode__title {
	overflow: hidden;
	font-size: 22px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 1.76px;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--wp--preset--color--navy);
}

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

.talos-episode__guests {
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--wp--preset--color--text-secondary);
}

.talos-episode__summary {
	font-size: 15px;
	line-height: 23.25px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-episode__side {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	width: 380px;
}

.talos-episode__links {
	display: flex;
	gap: 16px;
}

.talos-episode__links a {
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	white-space: nowrap;
	text-decoration: none;
	color: var(--wp--preset--color--sky-strong);
	transition: color 0.2s ease;
}

.talos-episode__links a:hover,
.talos-episode__links a:focus-visible {
	color: var(--wp--preset--color--navy);
}

/* "Load more episodes": the secondary button, a little larger */
.talos-podcast-list__more {
	display: flex;
	justify-content: center;
}

.talos-podcast-list__button {
	min-height: 60px;
	padding: 0 29px;
	border-color: rgba(21, 45, 121, 0.3);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.6);
	font-size: 16px;
	color: var(--wp--preset--color--navy);
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover: white, a navy border and a soft shadow (read from the Figma hover) */
.talos-podcast-list__button:hover,
.talos-podcast-list__button:focus-visible {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
	box-shadow: 0 18px 36px rgba(21, 45, 121, 0.13);
}

/* No more episodes to load: the button stays but is greyed out and does nothing */
.talos-podcast-list__button.is-disabled {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

/* ---- Subscribe band (the same as on the News page, with 72px above and below) ---- */
.talos-podcast-subscribe {
	padding-top: 72px;
	padding-bottom: 72px;
}

/* No mobile design in Figma yet: less padding, the cards stack */
@media (max-width: 1100px) {
	.talos-podcast-latest,
	.talos-podcast-list {
		padding-right: var(--talos-gutter);
		padding-left: var(--talos-gutter);
	}

	.talos-podcast-latest__card {
		flex-direction: column;
		align-items: flex-start;
		padding: 28px;
	}

	.talos-podcast-latest__title {
		font-size: 28px;
		line-height: 32px;
	}

	.talos-podcast-latest__card .talos-player {
		width: 100%;
	}

	.talos-episode {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.talos-episode__side {
		align-items: stretch;
		width: 100%;
	}

	.talos-episode__title {
		white-space: normal;
	}

	.talos-podcast-subscribe {
		padding-right: var(--talos-gutter);
		padding-left: var(--talos-gutter);
	}
}

/* Phone: the cover goes on its own line, so the title and the summary get the whole width of the card instead of one word per line */
@media (max-width: 640px) {
	.talos-episode {
		gap: 16px;
		padding: 20px;
	}

	.talos-episode__content {
		flex-basis: 100%;
	}

	.talos-episode-cover {
		max-width: 100%;
	}
}

/* Media kit page (template page-media-kit.php) */
.talos-mk-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 16px;
}

.talos-mk-button {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	min-height: 58px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 14px;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.talos-mk-button--primary {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.talos-mk-button--primary:hover,
.talos-mk-button--primary:focus-visible {
	background: var(--wp--preset--color--navy-deep);
}

.talos-mk-button--secondary {
	min-height: 60px;
	padding: 0 29px;
	border-color: rgba(21, 45, 121, 0.3);
	background: rgba(255, 255, 255, 0.6);
	color: var(--wp--preset--color--navy);
}

.talos-mk-button--secondary:hover,
.talos-mk-button--secondary:focus-visible {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
}

.talos-mk-icon {
	flex: none;
	display: block;
	width: 16px;
	height: 16px;
}

.talos-mk-icon--arrow {
	width: 18px;
	height: 18px;
}

.talos-mk-icon--no {
	width: 22px;
	height: 22px;
}

/* Sections */
.talos-mk-section {
	box-sizing: border-box;
	padding: 60px 80px 90px;
	background: var(--wp--preset--color--page);
}

.talos-mk-section--white {
	background: var(--wp--preset--color--white);
}

.talos-mk-section--templates {
	padding-top: 0;
}

.talos-mk-boilerplate,
.talos-mk-press {
	padding-bottom: 96px;
}

.talos-mk-section__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
}

.talos-mk-press .talos-mk-section__inner {
	gap: 32px;
}

.talos-mk-header {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.talos-mk-header__eyebrow {
	margin: 0;
	font-family: "Chakra Petch", sans-serif;
	font-size: 12px;
	line-height: normal;
	letter-spacing: 1.44px;
	text-transform: uppercase;
	color: var(--wp--preset--color--sky-strong);
}

.talos-mk-header__title {
	margin: 0;
	font-size: 50px;
	font-weight: 700;
	line-height: 50px;
	letter-spacing: -2.25px;
	color: var(--wp--preset--color--navy);
}

.talos-mk-header__lead {
	margin: 0;
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-mk-subtitle {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 1.76px;
	color: var(--wp--preset--color--navy);
}

.talos-mk-empty {
	margin: 0;
	padding: 40px 0;
	font-size: 17px;
	line-height: 27px;
	color: var(--wp--preset--color--text-secondary);
}

/* A title with a button at the right (photos) */
.talos-mk-split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.talos-mk-split .talos-mk-header {
	flex: 1;
}

/* Format chips (SVG, PNG, PDF, Google Fonts) */
.talos-mk-formats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.talos-mk-format {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	padding: 6px 10px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--page);
	font-size: 12px;
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.talos-mk-format .talos-mk-icon {
	color: var(--wp--preset--color--sky-strong);
	transition: color 0.2s ease;
}

.talos-mk-format:hover,
.talos-mk-format:focus-visible {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--white);
}

.talos-mk-format:hover .talos-mk-icon,
.talos-mk-format:focus-visible .talos-mk-icon {
	color: var(--wp--preset--color--navy);
}

/* "Download" text link */
.talos-mk-download {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--sky-strong);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.talos-mk-download:hover,
.talos-mk-download:focus-visible {
	color: var(--wp--preset--color--navy);
}

/* Cards */
.talos-mk-card__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 1.76px;
	color: var(--wp--preset--color--navy);
}

.talos-mk-card__text {
	margin: 0;
	font-size: 15px;
	line-height: 23.25px;
	color: var(--wp--preset--color--text-secondary);
}

/* 01 · Logo */
.talos-mk-logo-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.talos-mk-logo-tile {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 28px;
	background: var(--wp--preset--color--white);
}

.talos-mk-logo-tile--wide {
	flex: 1 1 calc(50% - 10px);
	min-width: 0;
}

.talos-mk-logo-tile--small {
	flex: 1 1 calc(33.333% - 14px);
	min-width: 0;
}

.talos-mk-logo-tile__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--white);
}

.talos-mk-logo-tile--wide .talos-mk-logo-tile__stage {
	height: 280px;
}

.talos-mk-logo-tile--small .talos-mk-logo-tile__stage {
	height: 220px;
}

.talos-mk-logo-tile__stage--navy {
	background: var(--wp--preset--color--navy-deep);
}

.talos-mk-logo-tile__stage--black {
	background: #121212;
}

.talos-mk-logo-tile__logo {
	display: block;
	max-width: 80%;
	height: auto;
}

.talos-mk-logo-tile--wide .talos-mk-logo-tile__logo {
	width: 256px;
}

.talos-mk-logo-tile--small .talos-mk-logo-tile__logo {
	width: 192px;
}

.talos-mk-logo-tile .talos-mk-logo-tile__logo--symbol {
	width: 99px;
	height: 110px;
}

.talos-mk-logo-tile__meta {
	display: flex;
	flex: 1;
	box-sizing: border-box;
	padding: 20px;
}

.talos-mk-logo-tile--wide .talos-mk-logo-tile__meta {
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 76px;
}

.talos-mk-logo-tile--small .talos-mk-logo-tile__meta {
	flex-direction: column;
	gap: 12px;
}

.talos-mk-logo-tile__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 19px;
	color: var(--wp--preset--color--navy);
}

.talos-mk-logo-tile__note {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 15px;
	color: var(--wp--preset--color--text-tertiary);
}

.talos-mk-rules {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.talos-mk-rules .talos-mk-card {
	display: flex;
	flex: 1 1 calc(50% - 10px);
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
	min-width: 0;
	padding: 28px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 28px;
	background: var(--wp--preset--color--white);
}

.talos-mk-clearspace {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 178px;
	border-radius: 20px;
	background: var(--wp--preset--color--page);
}

.talos-mk-clearspace__image {
	display: block;
	max-width: 100%;
	height: auto;
}

.talos-mk-misuse {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-mk-misuse__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.talos-mk-misuse__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 120px;
	max-width: 100%;
	height: 110px;
	border-radius: 16px;
	background: var(--wp--preset--color--page);
}

.talos-mk-misuse__stage img {
	display: block;
	width: 80px;
	height: 30px;
	object-fit: fill;
}

.talos-mk-misuse__stage .talos-mk-icon {
	position: absolute;
	top: 8px;
	left: 8px;
}

.talos-mk-misuse__stage--stretched img {
	width: 108px;
	height: 19.5px;
}

.talos-mk-misuse__stage--recoloured img {
	filter: hue-rotate(118deg) saturate(2.4) brightness(1.15);
}

.talos-mk-misuse__stage--wordmark img {
	width: 56px;
	height: auto;
	object-fit: contain;
}

.talos-mk-misuse__stage--background {
	background: #D92640;
}

.talos-mk-misuse__label {
	font-size: 13px;
	font-weight: 600;
	line-height: 15px;
	text-align: center;
	color: var(--wp--preset--color--text-secondary);
}

.talos-mk-funding {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	box-sizing: border-box;
	padding: 32px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 28px;
	background: var(--wp--preset--color--white);
}

.talos-mk-funding__text {
	display: flex;
	flex: 0 1 540px;
	flex-direction: column;
	gap: 8px;
}

.talos-mk-funding__logos {
	display: flex;
	align-items: center;
	gap: 28px;
}

.talos-mk-funding__logos img {
	display: block;
	width: auto;
}

.talos-mk-funding__eit {
	height: 44px;
}

.talos-mk-funding__eu {
	height: 40px;
}

.talos-mk-funding__hei {
	height: 56px;
}

.talos-mk-funding__divider {
	width: 1px;
	height: 52px;
	background: var(--wp--preset--color--navy-deep);
}

/* 02 · Colours */
.talos-mk-swatches {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-mk-swatch {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
}

.talos-mk-swatch__colour {
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	padding: 20px;
}

.talos-mk-swatches--brand .talos-mk-swatch__colour {
	height: 200px;
}

.talos-mk-swatches--ui .talos-mk-swatch__colour {
	height: 120px;
}

.talos-mk-swatch__name {
	font-size: 18px;
	font-weight: 600;
	line-height: 23.4px;
	white-space: nowrap;
}

.talos-mk-swatch__colour--light .talos-mk-swatch__name {
	color: var(--wp--preset--color--white);
}

.talos-mk-swatch__colour--dark .talos-mk-swatch__name {
	color: var(--wp--preset--color--navy);
}

.talos-mk-swatch__values {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	font-size: 13px;
	line-height: normal;
	color: var(--wp--preset--color--text-secondary);
}

.talos-mk-swatch__hex {
	font-weight: 600;
	letter-spacing: 1.3px;
	white-space: pre;
	color: var(--wp--preset--color--navy);
}

.talos-mk-swatch__value {
	white-space: pre;
}

.talos-mk-swatch__token {
	font-family: "Chakra Petch", sans-serif;
	font-size: 11px;
	letter-spacing: 1.5px;
	color: var(--wp--preset--color--text-tertiary);
}

/* 03 · Typography */
.talos-mk-fonts {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.talos-mk-font {
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
	padding: 36px;
	border-radius: 28px;
}

.talos-mk-font--primary {
	background: var(--wp--preset--color--navy-deep);
}

.talos-mk-font__eyebrow {
	margin: 0;
	font-family: "Chakra Petch", sans-serif;
	font-size: 12px;
	line-height: normal;
	letter-spacing: 1.44px;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

.talos-mk-font__eyebrow--dark {
	color: var(--wp--preset--color--navy);
}

.talos-mk-font__content {
	display: flex;
	align-items: center;
	gap: 72px;
}

.talos-mk-font__wordmark {
	display: block;
	flex: none;
	width: 482.8px;
	max-width: 50%;
	height: auto;
}

.talos-mk-font__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.talos-mk-font__name {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -1.28px;
	color: var(--wp--preset--color--white);
}

.talos-mk-font__name--dark {
	color: var(--wp--preset--color--navy);
}

.talos-mk-font__role {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--sky);
}

.talos-mk-font__role--sky {
	color: var(--wp--preset--color--sky-strong);
}

.talos-mk-font__about {
	margin: 0;
	font-size: 18px;
	line-height: 28px;
	color: var(--wp--preset--color--white);
}

.talos-mk-font__use {
	margin: 0;
	font-size: 12px;
	line-height: normal;
	color: var(--wp--preset--color--white);
}

.talos-mk-fonts__row {
	display: flex;
	gap: 24px;
}

.talos-mk-font--card {
	flex: 1 1 0;
	min-width: 0;
	min-height: 490px;
	align-items: flex-start;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--white);
}

.talos-mk-font__aa {
	margin: 0;
	font-size: 120px;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--navy);
}

.talos-mk-font--chakra .talos-mk-font__aa {
	font-family: "Chakra Petch", sans-serif;
}

.talos-mk-font__alphabet {
	margin: 0;
	overflow-wrap: anywhere; /* the alphabet is one long word: it must wrap on a narrow card */
	font-size: 18px;
	line-height: 28px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-mk-font--chakra .talos-mk-font__alphabet {
	font-family: "Chakra Petch", sans-serif;
	line-height: 1.5;
}

.talos-mk-font__credit {
	margin: 0;
	font-size: 12px;
	line-height: normal;
	color: var(--wp--preset--color--text-tertiary);
}

/* 04 · Templates */
.talos-mk-templates__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.talos-mk-template {
	display: flex;
	flex: 0 0 304px;
	flex-direction: column;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
}

.talos-mk-template__preview {
	height: 200px;
	background: var(--wp--preset--color--sky-soft);
}

.talos-mk-template__preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.talos-mk-template__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 24px;
}

.talos-mk-template__title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 23.4px;
	color: var(--wp--preset--color--navy);
}

.talos-mk-template__note {
	margin: 0;
	font-size: 13px;
	line-height: normal;
	color: var(--wp--preset--color--text-tertiary);
}

/* 05 · Boilerplate */
.talos-mk-boilerplate__row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: stretch;
}

.talos-mk-text {
	display: flex;
	flex: 1 1 calc(50% - 10px);
	flex-direction: column;
	gap: 16px;
	box-sizing: border-box;
	min-width: 0;
	padding: 32px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--page);
}

.talos-mk-text__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.talos-mk-text__titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.talos-mk-text__words {
	margin: 0;
	font-size: 12px;
	line-height: normal;
	color: var(--wp--preset--color--text-tertiary);
}

.talos-mk-text__body {
	margin: 0;
	font-size: 16px;
	line-height: 25px;
	color: var(--wp--preset--color--text-secondary);
}

.talos-mk-copy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.talos-mk-copy .talos-mk-icon {
	color: var(--wp--preset--color--sky-strong);
	transition: color 0.2s ease;
}

.talos-mk-copy:hover,
.talos-mk-copy:focus-visible,
.talos-mk-copy.is-copied {
	border-color: var(--wp--preset--color--navy);
}

.talos-mk-copy:hover .talos-mk-icon,
.talos-mk-copy:focus-visible .talos-mk-icon,
.talos-mk-copy.is-copied .talos-mk-icon {
	color: var(--wp--preset--color--navy);
}

/* 06 · Photos */
.talos-mk-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-mk-photo {
	position: relative;
	display: flex;
	flex: 0 0 310px;
	align-items: flex-end;
	justify-content: flex-end;
	box-sizing: border-box;
	min-width: 300px;
	height: 220px;
	padding: 12px;
	overflow: hidden;
	border-radius: 20px;
	background: var(--wp--preset--color--sky-soft);
}

.talos-mk-photo__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.talos-mk-photo__download {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.talos-mk-photo__download:hover,
.talos-mk-photo__download:focus-visible {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* 07 · Posters */
.talos-mk-poster-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-mk-poster {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.talos-mk-poster__art {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 400px;
	aspect-ratio: 400 / 540;
	padding: 28px;
	overflow: hidden;
	border-radius: 28px;
	background:
		radial-gradient(ellipse 125% 100% at 0% 0%, rgba(114, 195, 237, 0.8) 0%, rgba(114, 195, 237, 0.25) 38%, rgba(114, 195, 237, 0) 62%),
		radial-gradient(ellipse 125% 88% at 100% 100%, rgba(120, 170, 60, 0.85) 0%, rgba(120, 170, 60, 0.32) 50%, rgba(120, 170, 60, 0) 78%),
		var(--wp--preset--color--navy-deep);
}

.talos-mk-poster__logo {
	display: block;
	width: 107px;
	height: auto;
}

.talos-mk-poster__text {
	position: absolute;
	right: 28px;
	bottom: 28px;
	left: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.talos-mk-poster__kind {
	margin: 0;
	font-family: "Chakra Petch", sans-serif;
	font-size: 11px;
	line-height: 14px;
	letter-spacing: 1.65px;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
}

.talos-mk-poster__title {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

.talos-mk-poster__url {
	margin: 0;
	font-size: 14px;
	line-height: 16px;
	color: var(--wp--preset--color--white);
}

.talos-mk-poster__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 413px;
}

.talos-mk-poster__label {
	font-size: 14px;
	font-weight: 600;
	line-height: 19px;
	color: var(--wp--preset--color--navy);
}

/* 08 · Press releases */
.talos-mk-press__list {
	margin: 0;
	padding: 0;
	overflow: hidden;
	list-style: none;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
}

.talos-mk-release {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 24px 32px;
}

.talos-mk-release + .talos-mk-release {
	border-top: 1px solid var(--wp--preset--color--border);
}

.talos-mk-release__date {
	flex: none;
	width: 110px;
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--sky-strong);
}

.talos-mk-release__title {
	flex: 1;
	min-width: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 23.4px;
	color: var(--wp--preset--color--navy);
}

.talos-mk-release__info {
	flex: none;
	font-size: 12px;
	line-height: normal;
	white-space: nowrap;
	color: var(--wp--preset--color--text-tertiary);
}

/* Tablet and phone */
@media (max-width: 1100px) {
	.talos-mk-section {
		padding-right: var(--talos-gutter);
		padding-left: var(--talos-gutter);
	}

	.talos-mk-swatches {
		flex-wrap: wrap;
	}

	.talos-mk-swatch {
		flex: 1 1 calc(33.333% - 16px);
	}

	.talos-mk-logo-tile--small {
		flex-basis: calc(50% - 10px);
	}

	.talos-mk-funding {
		flex-wrap: wrap;
	}

	.talos-mk-font__content {
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
	}

	.talos-mk-font__wordmark {
		max-width: 100%;
	}

	.talos-mk-poster-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.talos-mk-section {
		padding: 40px var(--talos-gutter) 56px;
	}

	.talos-mk-section--templates {
		padding-top: 0;
	}

	.talos-mk-header__title {
		font-size: 36px;
		line-height: 38px;
		letter-spacing: -1.4px;
	}

	.talos-mk-split {
		flex-direction: column;
		align-items: flex-start;
	}

	.talos-mk-actions .talos-mk-button {
		white-space: normal;
	}

	.talos-mk-logo-tile--wide,
	.talos-mk-logo-tile--small,
	.talos-mk-rules .talos-mk-card,
	.talos-mk-text {
		flex-basis: 100%;
	}

	.talos-mk-logo-tile--wide .talos-mk-logo-tile__meta {
		flex-direction: column;
		align-items: flex-start;
	}

	.talos-mk-misuse {
		grid-template-columns: repeat(2, 1fr);
	}

	.talos-mk-funding__logos {
		flex-wrap: wrap;
		gap: 20px;
	}

	.talos-mk-swatch {
		flex-basis: calc(50% - 16px);
	}

	.talos-mk-fonts__row {
		flex-direction: column;
	}

	.talos-mk-font {
		padding: 24px;
	}

	.talos-mk-template {
		flex-basis: 100%;
	}

	.talos-mk-photo {
		flex-basis: 100%;
		min-width: 0;
	}

	.talos-mk-poster-grid {
		grid-template-columns: 1fr;
	}

	.talos-mk-release {
		flex-wrap: wrap;
		gap: 8px 16px;
		padding: 20px;
	}

	.talos-mk-release__date {
		width: auto;
	}

	.talos-mk-release__title {
		flex-basis: 100%;
		order: 3;
	}
}

/* A link to #get-involved (the header button, the hero) scrolls smoothly to the section */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.talos-involved,
.talos-tools,
.talos-partners,
.talos-project,
.talos-vision {
	scroll-margin-top: 24px;
}

/*
 * Sticky header: the bar stays at the top of the screen while the page scrolls under it.
 * The wrapper is transparent and lets clicks through; only the bar itself takes them.
 * display: flow-root keeps the 20px above the bar inside the wrapper, so the bar keeps its 20px gap when stuck.
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flow-root;
	pointer-events: none;
}

.site-header .talos-header {
	pointer-events: auto;
}

/* Logged-in admins have the WordPress toolbar on top */
.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

/* Links to a section (#register, #get-involved...) must not stop under the sticky header */
html {
	scroll-padding-top: 96px;
}

/* No blue box over what is tapped on a phone. On every element, not only on html, because some browsers set their own colour on the links and buttons themselves. */
* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Tablet and phone: an open menu taller than the screen scrolls inside the sticky bar */
@media (max-width: 1100px) {
	.site-header .talos-header {
		max-height: calc(100vh - 24px);
		overflow-y: auto;
	}

	/* The wrapper keeps the closed bar's height (margin 16 + bar 75), so an open menu covers the page instead of pushing it down */
	.site-header {
		height: 91px;
	}
}

/*
 * Header search: the round search button opens a small box to its left on hover or focus.
 * The form is the round outline; the box inside it grows from nothing, so the menu keeps its place.
 */
.talos-header__search-form {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	height: 46px;
	border: 1px solid rgba(21, 45, 121, 0.15);
	border-radius: 23px;
	background: rgba(255, 255, 255, 0.7);
	transition: border-color 0.2s ease;
}

.talos-header__search-form:hover,
.talos-header__search-form:focus-within {
	border-color: var(--wp--preset--color--navy);
}

.talos-header__search-form .talos-header__search {
	flex: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: transparent;
}

.talos-header__search-input {
	width: 0;
	min-width: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--navy);
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
}

.talos-header__search-input::placeholder {
	color: var(--wp--preset--color--text-tertiary);
	opacity: 1;
}

.talos-header__search-input::-webkit-search-cancel-button {
	display: none;
}

.talos-header__search-form:hover .talos-header__search-input,
.talos-header__search-form:focus-within .talos-header__search-input,
.talos-header__search-input:not(:placeholder-shown) {
	width: 190px;
	padding-left: 18px;
	opacity: 1;
}

/* Room for the box: the menu links come a little closer while it is open (and step aside on narrower screens) */
.talos-header:has(.talos-header__search-form:hover, .talos-header__search-form:focus-within) .talos-header__list {
	gap: 18px;
}

@media (max-width: 1439px) {
	.talos-header:has(.talos-header__search-form:hover, .talos-header__search-form:focus-within) .talos-header__nav {
		display: none;
	}

	/* With the menu out of the way, the buttons stay at the right */
	.talos-header__actions {
		margin-left: auto;
	}
}

/* Tablet and phone: the box is always open, in the menu */
@media (max-width: 1100px) {
	.talos-header__search-form {
		flex: 1;
	}

	.talos-header__search-input {
		flex: 1;
		width: auto;
		padding-left: 16px;
		opacity: 1;
	}

	.talos-header:has(.talos-header__search-form:hover, .talos-header__search-form:focus-within) .talos-header__nav {
		display: block;
	}
}

/*
 * Tablet (Figma 768): the bar shows the logo, the search, "Get Involved" and the menu button. Only the links
 * wait in the menu. The menu wrapper becomes display: contents so the buttons can sit in the bar while the
 * links open on their own row underneath; the search box opens on hover again, like on desktop.
 */
@media (min-width: 641px) and (max-width: 1100px) {
	.talos-header .talos-header__menu,
	.talos-header.is-open .talos-header__menu {
		display: contents;
	}

	.talos-header__brand {
		order: 1;
	}

	.talos-header__actions {
		order: 2;
		margin-left: auto;
	}

	.talos-header__toggle {
		order: 3;
	}

	.talos-header__nav {
		display: none;
		order: 4;
		flex-basis: 100%;
		padding: 12px 0 8px;
	}

	.talos-header.is-open .talos-header__nav {
		display: block;
	}

	.talos-header__search-form {
		flex: none;
	}

	.talos-header__search-input {
		flex: none;
		width: 0;
		padding-left: 0;
		opacity: 0;
	}

	/* The search box opening must not pop the links open */
	.talos-header:not(.is-open):has(.talos-header__search-form:hover, .talos-header__search-form:focus-within) .talos-header__nav {
		display: none;
	}
}

/* Phone (Figma 390): smaller logo, less side padding; the search and the button wait in the menu */
@media (max-width: 640px) {
	.talos-header {
		padding: 14px 16px;
	}

	.talos-header__brand img {
		width: 126px;
		height: 47.25px;
	}

	/* In the open menu the search takes what the button leaves, so the button never wraps or leaves the bar */
	.talos-header__menu {
		min-width: 0;
	}

	.talos-header__actions {
		width: 100%;
	}

	.talos-header__search-form {
		min-width: 0;
	}

	.talos-header__cta {
		flex: none;
		white-space: nowrap;
	}
}

/* Success story page (single-story.php): Key facts card, "Reuse this story", related */
.talos-story-facts {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border-radius: 24px;
	background: var(--wp--preset--color--astronaut);
	color: var(--wp--preset--color--white);
}

.talos-story-facts__eyebrow {
	margin: 0;
	font-family: "Chakra Petch", sans-serif;
	font-size: 12px;
	line-height: normal;
	letter-spacing: 1.44px;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
}

.talos-story-facts__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}

.talos-story-facts__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--wp--preset--color--white);
}

.talos-story-facts__item:last-child {
	border-bottom: 0;
}

.talos-story-facts__item dt {
	margin: 0;
	font-family: "Chakra Petch", sans-serif;
	font-size: 12px;
	line-height: normal;
	letter-spacing: 1.44px;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
	opacity: 0.85;
}

.talos-story-facts__item dd {
	margin: 0;
	font-size: 15px;
	line-height: 23.25px;
	color: var(--wp--preset--color--white);
}

.talos-story-facts__button {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 24px;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--navy-deep);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.talos-story-facts__button:hover,
.talos-story-facts__button:focus-visible {
	background: var(--wp--preset--color--lime);
}

.talos-story-reuse {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 28px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
}

.talos-story-reuse__title {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -1.28px;
	color: var(--wp--preset--color--navy);
}

.talos-story-reuse__downloads {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.talos-story-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 10px 16px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: border-color 0.2s ease;
}

.talos-story-pill svg {
	flex: none;
	color: var(--wp--preset--color--sky-strong);
	transition: color 0.2s ease;
}

.talos-story-pill:hover,
.talos-story-pill:focus-visible {
	border-color: var(--wp--preset--color--navy);
}

.talos-story-pill:hover svg,
.talos-story-pill:focus-visible svg {
	color: var(--wp--preset--color--navy);
}

.talos-story-reuse__licence {
	margin: 0;
	font-size: 20px;
	line-height: 31px;
	color: var(--wp--preset--color--navy);
}

/* Related: two news cards and a column with the next event and the latest podcast */
.talos-story-related__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.talos-story-related__stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

@media (max-width: 1100px) {
	.talos-story-related__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.talos-story-related__grid {
		grid-template-columns: 1fr;
	}

	.talos-story-reuse__title {
		font-size: 26px;
	}

	.talos-story-reuse__licence {
		font-size: 17px;
		line-height: 27px;
	}
}

/* Success Stories page (archive-story.php) */
.talos-stories-refine {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	max-width: 1280px;
	margin: 16px auto 0;
}

.talos-stories-refine__label {
	font-size: 13px;
	line-height: normal;
	color: var(--wp--preset--color--text-secondary);
}


.talos-stories-refine__menu.is-active > summary {
	border-color: var(--wp--preset--color--navy);
	font-weight: 600;
}

.talos-stories-refine__clear {
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--sky-strong);
	text-decoration: none;
	transition: color 0.2s ease;
}

.talos-stories-refine__clear:hover,
.talos-stories-refine__clear:focus-visible {
	color: var(--wp--preset--color--navy);
}

.talos-stories-note {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 20px 14px 42px;
	border: 1px solid var(--wp--preset--color--sky);
	border-radius: 16px;
	background: var(--wp--preset--color--sky-soft);
	font-size: 14px;
	line-height: normal;
	color: var(--wp--preset--color--navy);
}

.talos-stories-note::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 21px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--sky-strong);
	transform: translateY(-50%);
}

.talos-stories-share {
	box-sizing: border-box;
	padding: 91px 80px;
}

.talos-stories-share__band {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 56px;
	border-radius: 28px;
	background: var(--wp--preset--color--astronaut);
}

.talos-stories-share__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.talos-stories-share__text > * {
	margin: 0;
}

.talos-stories-share__eyebrow {
	font-family: "Chakra Petch", sans-serif;
	font-size: 12px;
	line-height: normal;
	letter-spacing: 1.44px;
	text-transform: uppercase;
	color: var(--wp--preset--color--lime);
}

.talos-stories-share__title {
	font-size: 32px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -1.28px;
	color: var(--wp--preset--color--white);
}

.talos-stories-share__lead {
	max-width: 1014px;
	font-size: 16px;
	line-height: normal;
	color: var(--wp--preset--color--white);
}

.talos-stories-share__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--lime);
	text-decoration: none;
	transition: color 0.2s ease;
}

.talos-stories-share__link:hover,
.talos-stories-share__link:focus-visible {
	color: var(--wp--preset--color--white);
}

.talos-stories-share__button {
	box-sizing: border-box;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 24px;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--navy-deep);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.talos-stories-share__button:hover,
.talos-stories-share__button:focus-visible {
	background: var(--wp--preset--color--lime);
}

@media (max-width: 1100px) {
	.talos-stories-share {
		padding: 56px var(--talos-gutter);
	}

	.talos-stories-share__band {
		flex-direction: column;
		align-items: flex-start;
		padding: 36px 28px;
	}
}

/* "Search stories..." is a little longer than "Search articles..." */
.talos-stories-filters .talos-news-filters__search input {
	width: 118px;
}

.talos-stories-refine__none {
	display: block;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 17px;
	white-space: nowrap;
	color: var(--wp--preset--color--text-tertiary);
}

/*
 * Filters on tablet and phone (Figma "Success Stories — Archive" tablet and mobile, used by News, Events, Search and
 * Success Stories): no frame around the bar, search and sort in the first row, the chips in one row that scrolls
 * sideways. Success Stories has more: the four menus as a 2 x 2 grid on tablet, and on a phone a Filters button that
 * opens a sheet.
 */
.talos-stories-filters__open {
	display: none;
}

.talos-filter-tags {
	display: none;
}

.talos-news-list__count-short {
	display: none;
}

@media (max-width: 1100px) {
	.talos-news-filters {
		padding-top: 24px;
	}

	.talos-news-filters__bar {
		flex-wrap: nowrap;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	.talos-news-filters__tools {
		order: 1;
		width: 100%;
	}

	.talos-news-filters .talos-news-filters__search {
		flex: 1 1 0;
		min-width: 0;
	}

	.talos-news-filters .talos-news-filters__search input {
		width: 100%;
		min-width: 0;
	}

	.talos-news-filters__chips {
		order: 2;
		flex-wrap: nowrap;
		margin: -3px;
		padding: 3px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.talos-news-filters__chips::-webkit-scrollbar {
		display: none;
	}

	.talos-news-filters__chips > li {
		flex: none;
	}

	.talos-stories-refine {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-top: 12px;
	}

	.talos-stories-refine__label {
		display: none;
	}

	.talos-stories-refine__menu > summary {
		width: 100%;
	}

	.talos-stories-refine__clear {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

@media (max-width: 640px) {
	.talos-news-filters {
		padding-top: 20px;
	}

	/* Search and sort side by side; when the search gets focus it takes the whole row and the sort folds away */
	.talos-news-filters__tools {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.talos-news-filters__sort {
		flex: none;
		max-width: 240px;
		transition: max-width 0.25s ease, margin 0.25s ease, opacity 0.2s ease;
	}

	.talos-news-filters__sort > summary {
		min-height: 48px;
	}

	.talos-news-filters:not(.talos-stories-filters) .talos-news-filters__tools:has(.talos-news-filters__search:focus-within) .talos-news-filters__sort {
		max-width: 0;
		margin-left: -12px;
		overflow: hidden;
		opacity: 0;
		pointer-events: none;
	}

	/* Success Stories has the Filters button too: the search keeps a row of its own above them */
	.talos-stories-filters .talos-news-filters__tools {
		flex-wrap: wrap;
	}

	.talos-stories-filters .talos-news-filters__search {
		flex: 1 1 100%;
	}

	/* Success Stories: the chips and the four menus live in the sheet */
	.talos-stories-filters .talos-news-filters__chips,
	.talos-stories-refine {
		display: none;
	}

	.talos-stories-filters__open:not([hidden]) {
		display: inline-flex;
		flex: 1 1 0;
		justify-content: center;
		min-width: 0;
		min-height: 60px;
		padding: 1px 16px;
		border-color: rgba(21, 45, 121, 0.3);
		border-radius: 14px;
		background: rgba(255, 255, 255, 0.6);
		font-size: 16px;
		white-space: nowrap;
		cursor: pointer;
	}

	.talos-filter-tags {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		margin-top: 12px;
	}

	.talos-news-list__count-full {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.talos-news-list__count-short {
		display: inline;
		font-size: 12px;
	}
}

/* A filter that is on, as a tag you can remove */
.talos-filter-tag {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 8px 10px 8px 14px;
	border-radius: 999px;
	background: var(--wp--preset--color--sky-soft);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: box-shadow 0.2s ease;
}

.talos-filter-tag svg {
	flex: none;
}

.talos-filter-tag:hover,
.talos-filter-tag:focus-visible {
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--sky);
}

.talos-filter-tags__clear {
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--sky-strong);
	text-decoration: none;
	transition: color 0.2s ease;
}

.talos-filter-tags__clear:hover,
.talos-filter-tags__clear:focus-visible {
	color: var(--wp--preset--color--navy);
}

/* Filters sheet (Figma "Success Stories — Filters sheet · Mobile"): a dialog that slides up from the bottom */
html.talos-sheet-open {
	overflow: hidden;
}

.talos-sheet {
	position: fixed;
	inset: auto 0 0 0;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	max-height: 90vh;
	max-height: 90dvh;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 24px 24px 0 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	overflow: hidden;
}

.talos-sheet[open] {
	display: flex;
	flex-direction: column;
	animation: talos-sheet-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.talos-sheet[open]::backdrop {
	background: rgba(3, 18, 65, 0.6);
	animation: talos-sheet-fade 0.3s ease;
}

.talos-sheet.is-closing {
	animation: talos-sheet-out 0.22s ease-in forwards;
}

.talos-sheet.is-closing::backdrop {
	animation: talos-sheet-fade 0.22s ease reverse forwards;
}

@keyframes talos-sheet-in {
	from {
		transform: translateY(100%);
	}
}

@keyframes talos-sheet-out {
	to {
		transform: translateY(100%);
	}
}

@keyframes talos-sheet-fade {
	from {
		opacity: 0;
	}
}

.talos-sheet__form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.talos-sheet__handle {
	display: block;
	flex: none;
	width: 40px;
	height: 4px;
	margin: 10px auto 4px;
	border-radius: 4px;
	background: var(--wp--preset--color--border-strong);
}

.talos-sheet__header {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	padding: 12px 20px;
}

.talos-sheet__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 1.44px;
	color: var(--wp--preset--color--navy);
}

.talos-sheet__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	cursor: pointer;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--page);
	color: var(--wp--preset--color--navy);
	transition: background-color 0.2s ease;
}

.talos-sheet__close:hover,
.talos-sheet__close:focus-visible {
	background: var(--wp--preset--color--sky-soft);
}

.talos-sheet__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 20px;
	min-height: 0;
	padding: 8px 20px 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.talos-sheet__group {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.talos-sheet__group legend,
.talos-sheet__field label {
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--navy);
}

.talos-sheet__group legend {
	margin-bottom: 10px;
}

.talos-sheet__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.talos-sheet__chip {
	position: relative;
	display: block;
}

.talos-sheet__chip input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.talos-sheet__chip span {
	display: block;
	box-sizing: border-box;
	padding: 9px 16px;
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-size: 14px;
	font-weight: 500;
	line-height: normal;
	color: var(--wp--preset--color--navy);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.talos-sheet__chip input:checked + span {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.talos-sheet__chip input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--sky-strong);
	outline-offset: 2px;
}

.talos-sheet__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.talos-sheet__field select {
	box-sizing: border-box;
	width: 100%;
	padding: 15px 44px 15px 18px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 14px;
	background: var(--wp--preset--color--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23152d79' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center;
	font: inherit;
	font-size: 15px;
	line-height: 23.25px;
	color: var(--wp--preset--color--navy);
	text-overflow: ellipsis;
	appearance: none;
	cursor: pointer;
}

.talos-sheet__field select.is-empty {
	color: var(--wp--preset--color--text-tertiary);
}

.talos-sheet__field select:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--sky-strong);
}

.talos-sheet__footer {
	display: flex;
	flex: none;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-top: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--white);
}

.talos-sheet__clear {
	font-size: 14px;
	font-weight: 600;
	line-height: 18.9px;
	color: var(--wp--preset--color--sky-strong);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.talos-sheet__clear:hover,
.talos-sheet__clear:focus-visible {
	color: var(--wp--preset--color--navy);
}

.talos-sheet__submit {
	flex: 1 1 0;
	justify-content: center;
	gap: 12px;
	min-width: 0;
	min-height: 58px;
	padding: 0 28px;
	border-radius: 14px;
	font-size: 16px;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.talos-sheet[open],
	.talos-sheet[open]::backdrop {
		animation: none;
	}
}

/* The play button of an episode without audio and without a listen link is not a link: no hand cursor */
span.talos-player__play {
	cursor: default;
}

/*
 * Search results page: the cards of the home page Success Stories in a grid of three (9 to a page).
 * The hero, the chips, the order menu, the page numbers and the empty line are the ones of the News page.
 */
.talos-search__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.talos-search__grid > li {
	display: flex;
	margin: 0;
}

.talos-search__grid .talos-stories__item {
	flex: 1 1 auto;
	min-width: 0;
}

/* The home cards fix the width of each title for the Figma line breaks; here the card decides */
.talos-search__grid .talos-stories__item .talos-stories__title {
	max-width: none;
}

/* A result without a picture (a page) keeps the same light block as the News cards */
.talos-search__grid .talos-stories__photo {
	background: var(--wp--preset--color--sky-soft);
}

/* The words that were searched */
.talos-search__mark {
	padding: 0 2px;
	border-radius: 4px;
	background: var(--wp--preset--color--lime);
	color: inherit;
}

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

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

/* A result without a picture: the gradient of the hero with the spiral strand */
.talos-search__grid .talos-search__photo--none {
	background:
		radial-gradient(ellipse 80% 70% at 100% 0%, rgba(58, 166, 220, 0.55) 0%, rgba(58, 166, 220, 0) 100%),
		radial-gradient(ellipse 80% 70% at 0% 100%, rgba(209, 223, 131, 0.7) 0%, rgba(209, 223, 131, 0) 100%),
		linear-gradient(180deg, #fff 0%, #EEF7FC 100%);
}

.talos-search__photo--none::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("assets/images/hero/spiral-strand.svg") no-repeat 50% 40% / auto 120%;
	opacity: 0.9;
}

/* Contact page — values from Figma "Contact" (node 2181:3664) */

/* The hero of this page is a little taller and bigger than the one of the other pages */
.talos-contact .talos-page-hero {
	padding: calc(var(--talos-header-offset) + 72px) 0 72px;
}

/* Figma: on this page the breadcrumb is darker (text/secondary) than on the other pages */
.talos-contact .talos-breadcrumb a,
.talos-contact .talos-breadcrumb li + li::before {
	color: var(--wp--preset--color--text-secondary);
}

.talos-contact .talos-breadcrumb a:hover,
.talos-contact .talos-breadcrumb a:focus-visible {
	color: var(--wp--preset--color--navy);
}

.talos-contact .talos-page-hero__title {
	margin-top: 20px;
	font-size: 60px;
	line-height: 58.8px;
}

.talos-contact .talos-page-hero__lead {
	max-width: 760px;
	margin-top: 20px;
	font-size: 20px;
	line-height: 31px;
}

.talos-contact-body {
	box-sizing: border-box;
	padding: 80px var(--talos-gutter);
}

.talos-contact-body__inner {
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 32px;
	max-width: 1280px;
	margin: 0 auto;
}

.talos-contact-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 24px;
	background: var(--wp--preset--color--white);
}

.talos-contact-card--dark {
	border-color: var(--wp--preset--color--astronaut);
	background: var(--wp--preset--color--astronaut);
	color: var(--wp--preset--color--white);
}

.talos-page .talos-contact-card--dark .talos-eyebrow {
	color: var(--wp--preset--color--lime);
}

.talos-contact-card .talos-eyebrow,
.talos-contact-form .talos-eyebrow {
	margin: 0;
}

.talos-contact-card__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--navy);
}

.talos-contact-card--dark .talos-contact-card__title {
	color: var(--wp--preset--color--white);
}

.talos-contact-card__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.2;
	color: var(--wp--preset--color--text-secondary);
}

.talos-contact-card--dark .talos-contact-card__text {
	color: var(--wp--preset--color--white);
}

.talos-contact-card__email,
.talos-contact-mail {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: color 0.2s ease;
}

.talos-contact-card__email {
	margin-top: 0;
	color: var(--wp--preset--color--navy);
}

.talos-contact-mail {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	margin-top: 4px;
	color: var(--wp--preset--color--white);
}

.talos-contact-mail svg {
	flex: none;
	color: var(--wp--preset--color--lime);
}

.talos-contact-card__email:hover,
.talos-contact-card__email:focus-visible {
	color: var(--wp--preset--color--sky-strong);
}

.talos-contact-mail:hover,
.talos-contact-mail:focus-visible {
	color: var(--wp--preset--color--lime);
}

/* "Open the Media kit": a text link with a sky underline (Figma "Link / Media kit") */
.talos-contact-link {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 10px;
	margin-top: 4px;
	padding: 10px 0 12px;
	border-bottom: 2px solid var(--wp--preset--color--sky);
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.talos-contact-link .talos-mk-icon--arrow {
	color: currentColor;
}

.talos-contact-link:hover,
.talos-contact-link:focus-visible {
	border-color: var(--wp--preset--color--navy);
}

.talos-contact .talos-contact-social {
	display: flex;
	gap: 12px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

/* The form card */
.talos-contact-form {
	flex: 1 1 0;
	min-width: 0;
	gap: 28px;
	padding: 40px;
	border-radius: 28px;
}

.talos-contact-form__header {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.talos-contact-form__title {
	margin: 0;
	font-size: 48px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: -0.045em;
	color: var(--wp--preset--color--navy);
}

.talos-contact-form__form {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.talos-contact-form__fields {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.talos-contact-form__row {
	display: flex;
	gap: 20px;
}

.talos-contact-form__field {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.talos-contact-form__field > span {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--navy);
}

.talos-contact-form__field input,
.talos-contact-form__field textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 15px 18px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 14px;
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: 16px;
	line-height: normal;
	color: var(--wp--preset--color--navy);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.talos-contact-form__field textarea {
	min-height: 160px;
	resize: vertical;
}

.talos-contact-form__field input::placeholder,
.talos-contact-form__field textarea::placeholder {
	color: var(--wp--preset--color--text-secondary);
	opacity: 1;
}

.talos-contact-form__field input:hover,
.talos-contact-form__field textarea:hover {
	border-color: var(--wp--preset--color--navy);
}

/* Focus (Figma): a sky border and a soft 4px ring */
.talos-contact-form__field input:focus,
.talos-contact-form__field textarea:focus {
	border-color: var(--wp--preset--color--sky-strong);
	outline: 0;
	box-shadow: 0 0 0 1px var(--wp--preset--color--sky-strong), 0 0 0 4px rgba(58, 166, 220, 0.25);
}

.talos-contact-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.2;
	color: var(--wp--preset--color--text-secondary);
}

.talos-contact-form__consent input {
	flex: none;
	appearance: none;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1.5px solid var(--wp--preset--color--border-strong);
	border-radius: 6px;
	background: var(--wp--preset--color--white) center / 12px no-repeat;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.talos-contact-form__consent input:hover {
	border-color: var(--wp--preset--color--navy);
}

.talos-contact-form__consent input:checked {
	border-color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--navy);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m2.5 6.2 2.4 2.4 4.6-5' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.talos-contact-form__consent input:focus-visible {
	outline: 3px solid rgba(58, 166, 220, 0.4);
	outline-offset: 2px;
}

.talos-contact-form__consent a {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
}

.talos-contact-form__actions button {
	font-family: inherit;
}

/* The field only robots fill in */
.talos-contact-form__trap,
.talos-involved__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.talos-contact-notice {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 18px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	font-size: 14px;
	line-height: 1.4;
}

.talos-contact-notice strong {
	font-weight: 600;
}

.talos-contact-notice--ok {
	border-color: var(--wp--preset--color--green);
	background: var(--wp--preset--color--lime-soft);
	color: var(--wp--preset--color--green-deep);
}

.talos-contact-notice--error {
	border-color: #E5484D;
	background: #FDEEEE;
	color: #A12A2E;
}

.talos-contact-side {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 20px;
	width: 400px;
}

/* Tablet: the cards go under the form, side by side */
@media (max-width: 1100px) {
	.talos-contact .talos-page-hero {
		padding-bottom: 48px;
	}

	.talos-contact-body {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.talos-contact-body__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.talos-contact-form {
		flex: none;
	}

	.talos-contact-side {
		flex-direction: row;
		flex-wrap: wrap;
		width: auto;
	}

	.talos-contact-side .talos-contact-card {
		flex: 1 1 280px;
	}
}

/* Phone */
@media (max-width: 640px) {
	.talos-contact .talos-page-hero {
		padding-top: calc(var(--talos-header-offset) + 40px);
		padding-bottom: 40px;
	}

	.talos-contact .talos-page-hero__title {
		font-size: 40px;
		line-height: 39px;
	}

	.talos-contact .talos-page-hero__lead {
		font-size: 17px;
		line-height: 27px;
	}

	.talos-contact-body {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.talos-contact-form {
		padding: 24px 20px;
		border-radius: 24px;
	}

	.talos-contact-form__title {
		font-size: 34px;
		line-height: 36px;
	}

	.talos-contact-form__row {
		flex-direction: column;
	}

	.talos-contact-form__actions button {
		width: 100%;
	}

	.talos-contact-side {
		flex-direction: column;
	}

	.talos-contact-side .talos-contact-card {
		flex: none;
	}
}

/* Contact form: the character counter in the corner of the message field. */
.talos-contact-form__count {
	align-self: flex-end;
	margin-top: -2px;
	font-size: 13px;
	line-height: 1.2;
	color: var(--wp--preset--color--text-secondary);
	font-variant-numeric: tabular-nums;
}

.talos-contact-form__count.is-near {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

/* 404 page (404.php) */
.talos-404__hero {
	padding: calc(var(--talos-header-offset) + 16px) 0;
	/* Figma: the same glows as the other heroes, but taller because this hero is taller (blue 864 x 391, lime 792 x 335) */
	background:
		radial-gradient(ellipse 864px 391px at 100% 0%, #4FB1E3 0%, rgba(114, 195, 237, 0.55) 35%, rgba(114, 195, 237, 0) 70%),
		radial-gradient(ellipse 792px 335px at 0% 100%, #E3EC9A 0%, rgba(209, 223, 131, 0.5) 35%, rgba(209, 223, 131, 0) 70%),
		linear-gradient(180deg, #fff 0%, #EEF7FC 100%);
}

.talos-404__row {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 64px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--talos-gutter);
}

.talos-404__text {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	min-width: 0;
}

.talos-404__text > * {
	margin: 0;
}

.talos-404__eyebrow {
	font-family: "Chakra Petch", sans-serif;
	font-size: 12px;
	line-height: normal;
	letter-spacing: 1.44px;
	text-transform: uppercase;
	color: var(--wp--preset--color--sky-strong);
}

.talos-404__title {
	font-size: 60px;
	font-weight: 700;
	line-height: 58.8px;
	letter-spacing: -2.7px;
	color: var(--wp--preset--color--navy);
}

.talos-404__lead {
	font-size: 20px;
	line-height: 31px;
	color: var(--wp--preset--color--astronaut);
}

.talos-404__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* The symbol with a big 404 over it */
.talos-404__graphic {
	position: relative;
	flex: none;
	width: 480px;
	height: 420px;
}

.talos-404__symbol {
	position: absolute;
	top: 4.52%;
	right: 14.25%;
	bottom: 4.75%;
	left: 14.17%;
	width: 71.58%;
	height: 90.73%;
}

.talos-404__number {
	position: absolute;
	top: 171.5px;
	left: 82.5px;
	font-size: 160px;
	font-weight: 700;
	line-height: 76.44px;
	letter-spacing: -6.4px;
	white-space: nowrap;
	color: var(--wp--preset--color--navy);
}

@media (max-width: 1100px) {
	.talos-404__hero {
		padding: 40px 0 56px;
	}

	.talos-404__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
	}

	.talos-404__title {
		font-size: 44px;
		line-height: 1.05;
		letter-spacing: -1.8px;
	}

	.talos-404__graphic {
		align-self: center;
	}
}

@media (max-width: 560px) {
	.talos-404__graphic {
		width: 300px;
		height: 262px;
	}

	.talos-404__number {
		top: 107px;
		left: 51px;
		font-size: 100px;
		line-height: 48px;
		letter-spacing: -4px;
	}
}

/*
 * Newsletter pages (page-newsletter.php): the screens of the Newsletter plugin (your details, unsubscribe,
 * unsubscribed, reactivate, confirmed...) in a card under the page hero. The plugin's own form markup (.tnp-*) is
 * styled here like the Contact form.
 */
.talos-nl__inner {
	align-items: center;
	justify-content: center;
}

.talos-nl-card {
	width: 100%;
	max-width: 640px;
	gap: 20px;
	padding: 40px;
	border-radius: 28px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
}

.talos-nl-card p {
	margin: 0;
}

.talos-nl-card a {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.talos-nl-card .tnp-form,
.talos-nl-card .tnp-form form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.talos-nl-card .tnp-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.talos-nl-card .tnp-field label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--navy);
}

.talos-nl-card .tnp-field input[type="text"],
.talos-nl-card .tnp-field input[type="email"],
.talos-nl-card .tnp-field select {
	box-sizing: border-box;
	width: 100%;
	padding: 15px 18px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 14px;
	background: var(--wp--preset--color--white);
	font: inherit;
	font-size: 16px;
	line-height: normal;
	color: var(--wp--preset--color--navy);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.talos-nl-card .tnp-field input:hover,
.talos-nl-card .tnp-field select:hover {
	border-color: var(--wp--preset--color--navy);
}

.talos-nl-card .tnp-field input:focus,
.talos-nl-card .tnp-field select:focus {
	border-color: var(--wp--preset--color--sky-strong);
	outline: 0;
	box-shadow: 0 0 0 1px var(--wp--preset--color--sky-strong), 0 0 0 4px rgba(58, 166, 220, 0.25);
}

/* The buttons of the plugin: Save, Unsubscribe, Subscribe again... */
.talos-nl-card .tnp-submit,
.talos-nl-card .tnp-button-form button {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 58px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 14px;
	background: var(--wp--preset--color--navy);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: normal;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.talos-nl-card .tnp-submit:hover,
.talos-nl-card .tnp-submit:focus-visible,
.talos-nl-card .tnp-button-form button:hover,
.talos-nl-card .tnp-button-form button:focus-visible {
	background: var(--wp--preset--color--navy-deep);
}

.talos-nl-card .tnp-field-button {
	align-items: flex-start;
}

/* The box for administrators ("Edit this content") keeps its own look, only narrower than the card. */
.talos-nl-card > fieldset {
	box-sizing: border-box;
	width: 100%;
	max-width: 100% !important;
	margin: 0;
}

@media (max-width: 640px) {
	.talos-nl-card {
		padding: 28px 24px;
		border-radius: 24px;
	}
}