/**
 * TWYCE design system.
 *
 * Colours are never written as literals below the token block — every rule
 * refers to a --twyce-* token, and each token points at the Kadence global
 * palette. Recolouring the site is therefore done in Customizer → Colors, not
 * in this file. The hex fallbacks only apply if Kadence is unavailable.
 *
 * Layout bands (the alternating light-blue / white full-width sections) are
 * core Group blocks with a background colour, not classes in here — that is
 * what makes them editable.
 *
 * Contents
 *   1. Tokens
 *   2. Typographic utilities
 *   3. Dot links and CTA links
 *   4. Scroll reveal
 *   5. Signal hero
 *   6. Pipeline table
 *   7. Team grid
 *   8. FAQ accordion
 *   9. Info slider
 *  10. Modals
 *  11. Cards and empty states
 *  12. Kadence integration
 *  13. Science page — diagrams and publications
 *  14. Signal combination panels (homepage)
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Core palette — mirrors Customizer → Colors. Slots 4–6 are the Kadence
	   text ramp (Strong/Medium/Subtle), deliberately NOT brand accents: every
	   Kadence component that defaults to them must render as sane body copy. */
	--twyce-science-blue:  var(--global-palette1, #0d56e7);
	--twyce-deep-blue:     var(--global-palette2, #083287);
	--twyce-deep-navy:     var(--global-palette3, #031536);
	--twyce-band:          var(--global-palette7, #eef3fb);
	--twyce-light-blue:    var(--global-palette8, #edf3fd);
	--twyce-white:         var(--global-palette9, #ffffff);

	/* Brand accent constants. These are identity colours, not theme choices —
	   they match the twyce-orange/red/horizon entries in theme.json and the
	   canvas animation, and are not meant to be retuned per-site.
	   Patient Rose was withdrawn from the palette (July 2026) and replaced by
	   Vermilion Red; the orange now carries more of the accent work. */
	--twyce-signal-orange: #f75c03;
	--twyce-vermilion-red:    #E41F13;
	--twyce-horizon-blue:  #8caef8;

	/* Derived tones. color-mix keeps these following the palette instead of
	   freezing the original rgba() values. */
	--twyce-text:         color-mix(in srgb, var(--twyce-deep-navy) 66%, transparent);
	--twyce-text-strong:  var(--twyce-deep-navy);
	--twyce-text-muted:   color-mix(in srgb, var(--twyce-deep-navy) 48%, transparent);
	--twyce-text-faint:   color-mix(in srgb, var(--twyce-deep-navy) 42%, transparent);
	--twyce-line:         color-mix(in srgb, var(--twyce-deep-blue) 14%, transparent);
	--twyce-line-strong:  color-mix(in srgb, var(--twyce-deep-blue) 22%, transparent);
	--twyce-surface:      var(--twyce-band);
	--twyce-surface-hover: color-mix(in srgb, var(--twyce-deep-blue) 8%, var(--twyce-band));
	--twyce-image-bg:     color-mix(in srgb, var(--twyce-deep-blue) 14%, var(--twyce-white));

	/* On dark backgrounds. */
	--twyce-on-dark:       color-mix(in srgb, var(--twyce-light-blue) 94%, transparent);
	--twyce-on-dark-muted: color-mix(in srgb, var(--twyce-light-blue) 60%, transparent);
	--twyce-on-dark-faint: color-mix(in srgb, var(--twyce-light-blue) 42%, transparent);

	/* Type scale — matches theme.json so editor and front end agree. */
	--twyce-type-sm: clamp(14px, 1.05vw, 16px);
	--twyce-type-md: clamp(18px, 1.9vw, 22px);
	--twyce-type-lg: clamp(24px, 2.45vw, 28px);
	--twyce-type-xl: clamp(28px, 3.2vw, 46px);
	--twyce-tagline: clamp(30px, 4.4vw, 80px);

	/* Motion. */
	--twyce-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   2. Typographic utilities
   ========================================================================== */

/* Small uppercase kicker above a heading. Available in the editor as the
   "Eyebrow" style on a paragraph. */
.twyce-eyebrow {
	margin: 0 0 12px;
	color: var(--twyce-science-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
}

/* The hero variant is larger, brighter and tracked wider. */
.twyce-signal-hero .twyce-eyebrow,
.wp-block-cover .twyce-eyebrow,
.twyce-page-hero .twyce-eyebrow {
	color: var(--twyce-horizon-blue);
	font-size: clamp(11px, 0.9vw, 15px);
	letter-spacing: 0.12em;
}

/* Applied by twyce_apply_nowrap() — see inc/formatting.php for why this is a
   span rather than U+2011. */
.twyce-nowrap {
	white-space: nowrap;
}

.twyce-lead {
	max-width: 640px;
	margin-inline: 0;
	font-size: var(--twyce-type-md);
	line-height: 1.25;
}

/* Long-form legal and post bodies. The 760px measure is centred as a column,
   but its own children stay flush left inside it. */
.twyce-prose {
	max-width: 760px;
	margin-inline: auto;
}


.twyce-prose h2 {
	margin: 0 0 16px;
	color: var(--twyce-text-strong);
	font-size: var(--twyce-type-lg);
	letter-spacing: -0.01em;
}

.twyce-prose h3,
.twyce-prose h2.twyce-legal-heading {
	margin: 40px 0 14px;
	color: var(--twyce-text-strong);
	font-size: 18px;
	letter-spacing: 0;
}

.twyce-prose h3:first-of-type,
.twyce-prose h2.twyce-legal-heading:first-child {
	margin-top: 0;
}

.twyce-prose p,
.twyce-prose ul,
.twyce-prose ol {
	margin: 0 0 16px;
	color: var(--twyce-text);
	font-size: var(--twyce-type-sm);
	line-height: 1.62;
}

.twyce-prose ul,
.twyce-prose ol {
	line-height: 1.7;
}

/* A lead paragraph keeps its larger size inside the prose column. */
.twyce-prose .twyce-lead {
	font-size: var(--twyce-type-md);
	line-height: 1.4;
	color: var(--twyce-text-strong);
}

.twyce-prose address {
	font-style: normal;
}

/* Italic "last updated" footer line. */
.twyce-note {
	color: var(--twyce-text-faint);
	font-size: 12.5px;
	font-style: italic;
}

/* ==========================================================================
   3. Dot links and CTA links
   ========================================================================== */

/* The dot glows on hover only — the strong glow is reserved for interaction,
   never as a permanent "you are here" state. Applied automatically to footer
   menu items and available as the "Dot link" block style. */
.twyce-dot-link,
.twyce-dot-link > a {
	position: relative;
	padding-left: 14px;
	text-decoration: none;
}

.twyce-dot-link > a {
	display: inline-block;
}

.twyce-dot-link:not(:has(> a))::before,
.twyce-dot-link > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--twyce-dot-color, var(--twyce-horizon-blue));
	transform: translateY(-50%);
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow 220ms ease;
}

.twyce-dot-link:not(:has(> a)):hover::before,
.twyce-dot-link > a:hover::before {
	box-shadow:
		0 0 8px 2px var(--twyce-dot-color, var(--twyce-horizon-blue)),
		0 0 18px 6px color-mix(in srgb, var(--twyce-dot-color, var(--twyce-horizon-blue)) 55%, transparent);
}

.twyce-dot-link--orange {
	--twyce-dot-color: var(--twyce-signal-orange);
}

/* Standalone dot used inside pipeline rows and team cards. */
.twyce-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 9px;
	border-radius: 50%;
	background: var(--twyce-accent, var(--twyce-science-blue));
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow 220ms ease;
	flex-shrink: 0;
}

:is(.twyce-pipeline__row, .twyce-team-card):is(:hover, :focus-visible) .twyce-dot {
	box-shadow:
		0 0 8px 2px var(--twyce-accent, var(--twyce-science-blue)),
		0 0 18px 6px color-mix(in srgb, var(--twyce-accent, var(--twyce-science-blue)) 45%, transparent);
}

/* Inline text CTA with a sliding chevron. Works both as a class directly on
   an <a> (block renders) and as a paragraph block style wrapping one link. */
a.twyce-cta-link,
.twyce-cta-link > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--twyce-science-blue);
	font-size: var(--twyce-type-sm);
	font-weight: 700;
	text-decoration: none;
}

a.twyce-cta-link {
	margin-top: 10px;
}

p.twyce-cta-link {
	margin: 0;
}

a.twyce-cta-link::after,
.twyce-cta-link > a::after {
	content: "\203A";
	font-size: 1.3em;
	line-height: 1;
	transition: transform 180ms ease;
}

a.twyce-cta-link:hover,
.twyce-cta-link > a:hover {
	color: var(--twyce-deep-blue);
}

a.twyce-cta-link:hover::after,
.twyce-cta-link > a:hover::after {
	transform: translateX(3px);
}

/* Dot + chevron CTA — the demo's `.dot-link.cta-link` combination used by the
   section bands ("Explore our science ›"). One block style, since a block can
   carry only one. */
.twyce-dot-cta {
	margin: 0;
}

.twyce-dot-cta > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-left: 14px;
	color: var(--twyce-science-blue);
	font-size: var(--twyce-type-sm);
	font-weight: 700;
	text-decoration: none;
}

.twyce-dot-cta > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--twyce-dot-color, var(--twyce-horizon-blue));
	transform: translateY(-50%);
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow 220ms ease;
}

.twyce-dot-cta > a::after {
	content: "\203A";
	font-size: 1.3em;
	line-height: 1;
	transition: transform 180ms ease;
}

.twyce-dot-cta > a:hover {
	color: var(--twyce-deep-blue);
}

.twyce-dot-cta > a:hover::before {
	box-shadow:
		0 0 8px 2px var(--twyce-dot-color, var(--twyce-horizon-blue)),
		0 0 18px 6px color-mix(in srgb, var(--twyce-dot-color, var(--twyce-horizon-blue)) 55%, transparent);
}

.twyce-dot-cta > a:hover::after {
	transform: translateX(3px);
}

/* Hero variant — the demo's `.hero-link`: horizon-tinted, no dot. */
.twyce-signal-hero .twyce-cta-link > a {
	color: color-mix(in srgb, var(--twyce-horizon-blue) 72%, transparent);
}

.twyce-signal-hero .twyce-cta-link > a:hover {
	color: var(--twyce-horizon-blue);
}

/* The hero action row: buttons and the text link centre on one axis. The
   theme's content margins would otherwise nudge the paragraph off-centre. */
.twyce-signal-hero__content .wp-block-group.is-layout-flex {
	align-items: center;
}

.twyce-signal-hero__content .wp-block-group.is-layout-flex :is(.wp-block-buttons, p) {
	margin: 0;
}

/* ==========================================================================
   3b. Text/image bands
   ==========================================================================
   The demo caps the text measure (h2 460px, body 480px) and the image at
   460px wide in a 6:5 crop, pushed to the outer edge. Scoped to columns
   inside a reveal band so heading-band sections (no columns) keep their
   wider 720px measure. */

/* Vertical rhythm inside a band, matching the demo exactly: eyebrow 10px,
   h2 16px, body flush, CTA 22px above. WordPress's default block gap (24px
   between every block) is what made the demo-vs-build spacing drift — the
   layout gap rules are :where() zero-specificity, so these plain overrides
   win. Declared in CSS rather than as per-block spacing attributes so the
   markup stays minimal and can never fall out of validation. */
/* Kadence's `.single-content …` rules give every block a bottom margin of
   var(--global-md-spacing) (2rem), which stacked on top of the design's own
   paddings — that one rule was behind most of the "too far apart / too close"
   drift. Zeroing the variable inside design sections switches those rules off
   at the source, without a specificity war; the section's rhythm is then set
   explicitly below. */
.twyce-reveal,
.twyce-page-hero,
.twyce-signal-hero {
	--global-md-spacing: 0px;
}

/* Heading margins are a literal 1.5em in Kadence (not the variable), so they
   need one targeted override at .single-content strength. */
.single-content .twyce-reveal :where(h1, h2, h3, h4),
.single-content .twyce-page-hero :where(h1, h2, h3),
.entry-content .twyce-reveal :where(h1, h2, h3, h4),
.entry-content .twyce-page-hero :where(h1, h2, h3) {
	margin-block: 0;
}

.twyce-reveal :where(h1, h2, h3, p, ul, ol, figure,
	.wp-block-buttons, .wp-block-columns, .wp-block-image, .wp-block-group,
	.wp-block-query, .wp-block-kadence-advanced-form) {
	margin-block-start: 0;
	margin-block-end: 0;
}

.twyce-reveal .twyce-eyebrow {
	margin-bottom: 10px;
}

.twyce-reveal .wp-block-column h2 {
	margin-bottom: 16px;
}

.twyce-reveal .wp-block-column p + p {
	margin-top: 12px;
}

.twyce-reveal .wp-block-column :is(p.twyce-dot-cta, p.twyce-cta-link) {
	margin-top: 22px;
}

/* Button + text CTA on one line, per the demo's .content-cta-row. The
   margin-top is doubled up at column strength because the generic band reset
   otherwise swallows it. */
.twyce-cta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin-top: 22px;
}

.twyce-reveal .wp-block-column > .twyce-cta-row,
.twyce-reveal > .twyce-cta-row {
	margin-top: 22px;
}

.twyce-cta-row :is(p, .wp-block-buttons) {
	margin: 0;
}

.twyce-reveal .wp-block-column .twyce-cta-row :is(p.twyce-dot-cta, p.twyce-cta-link) {
	margin-top: 0;
}

/* A heading placed directly in the band (home, news grid) carries the same gap
   down to the content it introduces as a heading group's padding-bottom, so the
   rhythm does not change with how the band happens to be built. Needs to
   out-rank the `.entry-content .twyce-reveal :where(h1,h2,h3,h4){margin-block:0}`
   reset above, which otherwise flattens it to nothing. */
.twyce-reveal > h2,
.entry-content .twyce-reveal > h2,
.single-content .twyce-reveal > h2 {
	margin-bottom: clamp(28px, 5vh, 48px);
}

.twyce-reveal > p.twyce-dot-cta {
	margin-top: 28px;
}

/* A run of body copy below a heading group. Flow layout, so core's constrained
   layout does not centre the capped children — same reason as the heading
   group itself. */
.twyce-copy-group > * {
	max-width: 680px;
	margin-inline: 0;
}

/* Carries one class more than the .twyce-reveal :where(…) margin reset above,
   which otherwise flattens the gap between paragraphs. */
.twyce-reveal .twyce-copy-group > * + * {
	margin-top: clamp(20px, 2.6vh, 28px);
}

.twyce-reveal .twyce-copy-group > * + .twyce-lead {
	margin-top: clamp(24px, 3.5vh, 36px);
}

/* Run-in subheadings inside a run of copy: a step more room above, and the
   paragraph they introduce sits close beneath. */
.twyce-reveal .twyce-copy-group > * + .twyce-copy-group__heading {
	margin-top: clamp(28px, 4vh, 40px);
}

.twyce-reveal .twyce-copy-group > .twyce-copy-group__heading + * {
	margin-top: 10px;
}

.twyce-reveal > .wp-block-group h2 {
	max-width: 720px;
	margin-inline: 0;
	margin-bottom: 16px;
}

.twyce-reveal > .wp-block-group p:not(.twyce-eyebrow) {
	max-width: 680px;
	margin-inline: 0;
}

/* The heading group is a rail-width band above the content it introduces. */
.twyce-heading-group {
	padding-bottom: clamp(28px, 5vh, 48px);
}

.twyce-heading-group > * {
	margin-inline: 0;
}

/* One gap between a heading group and what follows it: the group's padding.
   Its last child adds nothing on top (it used to add 16px more). */
.twyce-reveal .twyce-heading-group > :last-child {
	margin-bottom: 0;
}

/* An intro paragraph belongs to the heading above it, so it sits close; the
   cards or diagrams after that paragraph get the full section gap instead. */
.twyce-heading-group:has(+ .twyce-copy-group) {
	padding-bottom: 0;
}

.twyce-reveal .twyce-heading-group + .twyce-copy-group {
	margin-block-start: 18px;
}

/* A closing call to action sits at the usual paragraph-to-button distance. */
.twyce-heading-group:has(+ .wp-block-buttons) {
	padding-bottom: 28px;
}

.twyce-reveal.twyce-band-opener .twyce-heading-group + .twyce-copy-group {
	margin-block-start: clamp(28px, 4vh, 40px);
}

.twyce-reveal .twyce-copy-group + .wp-block-columns {
	margin-top: clamp(32px, 4.5vh, 48px);
}

/* Bands themselves keep the design's vertical rhythm — and butt directly
   against the hero, each other and the footer, with no white slivers from
   content-area or per-block margins in between. */
/* Kadence sets `.entry-content .wp-block-group.has-background { padding: 20px
   30px }` at three classes, which quietly out-ranks a plain .twyce-reveal rule
   and squashes every coloured band to 20px of vertical air. Matching its
   weight and adding one class restores the intended rhythm; the 30px inline
   padding is left alone, since it is what gives the bands their gutter once
   the viewport drops below the content rail. */
.twyce-reveal,
.entry-content .wp-block-group.twyce-reveal.has-background,
.single-content .wp-block-group.twyce-reveal.has-background {
	padding-block: clamp(48px, 8vh, 96px);
}

.twyce-reveal > .wp-block-columns {
	padding-block: clamp(8px, 1vh, 12px);
}

/* The single and listing templates give their wrapper id="main" (the target of
   Kadence's skip link), and Kadence spaces #main as a boxed content area. Here
   the Page Hero has to start at the very top, under the transparent header. */
#main.twyce-single,
#main.twyce-listing {
	margin-block: 0;
}

/* Listing pages: pagination under the cards, search field in the hero. */
.twyce-listing .twyce-pagination {
	margin-top: 40px;
	gap: 18px;
	font-weight: 700;
}

.twyce-page-hero .twyce-hero-search {
	max-width: 560px;
	margin: 26px 0 22px;
}

.twyce-page-hero .twyce-hero-search .wp-block-search__input {
	min-height: 46px;
	padding: 0 16px;
	border: 1px solid color-mix(in srgb, var(--twyce-light-blue) 40%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--twyce-white) 10%, transparent);
	color: var(--twyce-white);
}

.twyce-page-hero .twyce-hero-search .wp-block-search__input::placeholder {
	color: var(--twyce-on-dark-muted);
}

.twyce-page-hero .twyce-hero-search .wp-block-search__button {
	margin-left: 10px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--twyce-horizon-blue);
	color: var(--twyce-white);
	font-weight: 700;
}

.page .content-area {
	margin-block: 0;
}

.entry-content > .alignfull {
	margin-block: 0;
}

/* The content that follows a heading group starts right below it. */
.twyce-heading-group + * {
	margin-block-start: 0;
}

/* Every max-width below is paired with margin-inline: 0 — core's constrained
   layout adds auto margins to capped children, which would centre them. */
.twyce-reveal .wp-block-columns h2 {
	max-width: 460px;
	margin-inline: 0;
}

.twyce-reveal .wp-block-columns p:not(.twyce-eyebrow):not(.twyce-dot-cta):not(.twyce-cta-link) {
	max-width: 480px;
	margin-inline: 0;
}

.twyce-reveal .wp-block-columns .wp-block-column > .wp-block-image {
	max-width: 460px;
	overflow: hidden;
	background: var(--twyce-image-bg);
}

/* Image sits at the outer edge: right when it's the second column, left when
   the band is reversed and it comes first. */
.twyce-reveal .wp-block-columns .wp-block-column:last-child > .wp-block-image {
	margin-left: auto;
}

.twyce-reveal .wp-block-columns .wp-block-column:first-child > .wp-block-image {
	margin-right: auto;
}

.twyce-reveal .wp-block-columns .wp-block-column > .wp-block-image img {
	display: block;
	width: 100%;
	transition: transform 500ms ease;
}

.twyce-reveal .wp-block-columns .wp-block-column > .wp-block-image:hover img {
	transform: scale(1.035);
}

@media (max-width: 860px) {
	.twyce-reveal .wp-block-columns .wp-block-column > .wp-block-image {
		max-width: 480px;
		margin-right: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.twyce-reveal .wp-block-columns .wp-block-column > .wp-block-image img { transition: none; }
}

/* ==========================================================================
   4. Scroll reveal
   ========================================================================== */

/* The hidden state is only applied once JS adds .is-armed, so content is never
   invisible to a visitor whose JavaScript failed. */
.twyce-reveal.is-armed {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms ease, transform 700ms var(--twyce-ease);
}

.twyce-reveal.is-armed.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   5. Signal hero
   ========================================================================== */

.twyce-signal-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	isolation: isolate;
	background: var(--twyce-deep-navy);
	color: var(--twyce-on-dark);
}

.twyce-signal-hero__canvas {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	display: block;
	background: var(--twyce-deep-navy);
	opacity: 0;
	transition: opacity 1400ms ease;
}

.twyce-signal-hero__canvas.is-ready {
	opacity: 1;
}

.twyce-signal-hero__vignette {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(to bottom,
			color-mix(in srgb, var(--twyce-deep-navy) 48%, transparent),
			color-mix(in srgb, var(--twyce-deep-navy) 4%, transparent) 45%,
			color-mix(in srgb, var(--twyce-deep-navy) 10%, transparent)),
		linear-gradient(to right,
			color-mix(in srgb, var(--twyce-deep-navy) 35%, transparent),
			transparent 46%);
}

.twyce-signal-hero__content {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: min(1280px, calc(100% - 56px));
	margin: 0 auto;
	padding: clamp(112px, 8vh, 148px) 0 clamp(24px, 6vh, 96px);
}

.twyce-signal-hero__content h1 {
	max-width: 880px;
	margin: 0;
	color: var(--twyce-white);
	font-size: var(--twyce-tagline);
	line-height: 1.14;
	letter-spacing: -0.025em;
	font-weight: 400;
}

.twyce-signal-hero__content .twyce-lead {
	margin: 18px 0 28px;
}

/* One-time staggered entrance. `backwards` holds the from-state during the
   delay so nothing flashes before its turn. */
.twyce-signal-hero__content > * {
	animation: twyce-rise 800ms var(--twyce-ease) backwards;
}

.twyce-signal-hero__content > :nth-child(1) { animation-delay: 350ms; }
.twyce-signal-hero__content > :nth-child(2) { animation-delay: 480ms; }
.twyce-signal-hero__content > :nth-child(3) { animation-delay: 620ms; }
.twyce-signal-hero__content > :nth-child(4) { animation-delay: 760ms; }

@keyframes twyce-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Cover-block heroes on the inner pages get the same entrance. */
.twyce-page-hero .wp-block-cover__inner-container > * {
	animation: twyce-rise 800ms var(--twyce-ease) backwards;
}

.twyce-page-hero .wp-block-cover__inner-container > :nth-child(1) { animation-delay: 260ms; }
.twyce-page-hero .wp-block-cover__inner-container > :nth-child(2) { animation-delay: 380ms; }
.twyce-page-hero .wp-block-cover__inner-container > :nth-child(3) { animation-delay: 520ms; }
.twyce-page-hero .wp-block-cover__inner-container > :nth-child(4) { animation-delay: 660ms; }

/* Inner-page heroes use the wider 1280px rail and sit left, like the homepage.
   Core's constrained layout centres any child that has a max-width, so every
   capped element below needs margin-inline reset — otherwise the whole hero
   reads as centred. */
/* Kadence also caps the cover's inner container at the 1160px content width;
   the hero uses the wider 1280px rail. */
.twyce-page-hero > .wp-block-cover__inner-container {
	width: min(1280px, calc(100% - 56px));
	max-width: none;
	margin-inline: auto;
	padding: clamp(120px, 12vh, 156px) 0 clamp(64px, 10vh, 120px);
}

.twyce-page-hero .wp-block-cover__inner-container > * {
	margin-inline: 0;
}

/* Kadence's global styles give h1 a 1.5em top margin, which floated the
   eyebrow ~70px above the headline. All hero spacing is explicit. */
.twyce-page-hero :where(h1, h2, p, .wp-block-buttons) {
	margin-block: 0;
}

.twyce-page-hero .twyce-eyebrow {
	margin-bottom: clamp(10px, 1.6vh, 18px);
}

.twyce-page-hero h1 {
	max-width: 760px;
	margin-inline: 0;
	font-size: var(--twyce-type-xl);
	line-height: 1.14;
	letter-spacing: -0.025em;
	font-weight: 400;
}

.twyce-page-hero .twyce-lead {
	margin-block: 18px 28px;
}

/* ==========================================================================
   5b. Page heroes — coded gradients + drifting T-cells
   ==========================================================================
   Inner-page heroes are composed entirely in CSS: a layered gradient (two
   radial "glows" over a linear base) plus three decorative T-cells. Each
   variant routes through the palette differently so consecutive pages read
   distinctly, and nothing has to be re-exported when the palette moves. */

.twyce-page-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	overflow: hidden;
	isolation: isolate;
	color: var(--twyce-on-dark);
	background-color: var(--twyce-deep-navy);
}

/* Each variant is a different *composition*, not just a different angle: some
   are a linear base lit by a couple of glows, others are built almost entirely
   from overlapping radiation points with no dominant direction at all. The
   deep navy base colour on .twyce-page-hero shows through wherever the layers
   fall away, so every variant stays anchored in the same family. */

/* Variant 1 — Deep: several radiation points with no linear direction, reading
   as a dark blue field lit from a few sides at once. The sources are wide,
   overlapping ellipses with long falloffs — `closest-side circle` stops gave
   each one a visible edge and the whole thing looked spotty. */
.twyce-page-hero--deep {
	background-image:
		radial-gradient(85% 75% at 16% 22%, color-mix(in srgb, var(--twyce-science-blue) 34%, transparent), transparent 82%),
		radial-gradient(95% 85% at 78% 10%, color-mix(in srgb, var(--twyce-deep-blue) 62%, transparent), transparent 80%),
		radial-gradient(90% 80% at 92% 74%, color-mix(in srgb, var(--twyce-science-blue) 26%, transparent), transparent 84%),
		radial-gradient(110% 70% at 38% 104%, color-mix(in srgb, var(--twyce-deep-blue) 52%, transparent), transparent 78%),
		linear-gradient(170deg, var(--twyce-deep-navy) 0%, #06204b 60%, #072654 100%);
}

/* Variant 2 — Science: one bright, tight source high right with a long
   falloff, and a cool counter-light bottom left. The most electric of the
   blue-only variants. */
.twyce-page-hero--science {
	background-image:
		radial-gradient(38% 52% at 82% 18%, color-mix(in srgb, var(--twyce-science-blue) 88%, transparent), transparent 100%),
		radial-gradient(70% 90% at 88% 26%, color-mix(in srgb, var(--twyce-science-blue) 40%, transparent), transparent 70%),
		radial-gradient(90% 70% at 4% 92%, color-mix(in srgb, var(--twyce-deep-blue) 72%, transparent), transparent 68%),
		linear-gradient(155deg, var(--twyce-deep-navy) 0%, #0a2565 60%, #10357f 100%);
}

/* Variant 3 — Signal: the homepage's signature. Blue field, Signal Orange
   rising out of the bottom-right corner and nothing else warm. */
.twyce-page-hero--signal {
	background-image:
		radial-gradient(58% 62% at 100% 100%, color-mix(in srgb, var(--twyce-signal-orange) 92%, transparent), transparent 72%),
		radial-gradient(46% 50% at 84% 86%, color-mix(in srgb, var(--twyce-signal-orange) 40%, transparent), transparent 100%),
		radial-gradient(80% 70% at 10% 16%, color-mix(in srgb, var(--twyce-science-blue) 40%, transparent), transparent 70%),
		linear-gradient(150deg, var(--twyce-deep-navy) 0%, #06214f 40%, var(--twyce-deep-blue) 100%);
}

/* Variant 4 — Horizon: the lightest. A wide band of horizon blue across the
   upper third rather than a corner-to-corner sweep, and it lifts upward
   instead of falling — the only variant that gets brighter toward the top. */
.twyce-page-hero--horizon {
	background-image:
		radial-gradient(120% 44% at 50% 6%, color-mix(in srgb, var(--twyce-horizon-blue) 52%, transparent), transparent 78%),
		radial-gradient(closest-side circle at 16% 40%, color-mix(in srgb, var(--twyce-science-blue) 52%, transparent), transparent 100%),
		radial-gradient(closest-side circle at 86% 52%, color-mix(in srgb, var(--twyce-science-blue) 40%, transparent), transparent 100%),
		linear-gradient(200deg, #12408f 0%, var(--twyce-deep-blue) 42%, var(--twyce-deep-navy) 100%);
}

/* Variant 5 — Spectrum: the full brand arc. Science blue top left meeting
   Vermilion Red bottom right across a diagonal, orange bridging them. */
.twyce-page-hero--spectrum {
	background-image:
		radial-gradient(46% 56% at 12% 14%, color-mix(in srgb, var(--twyce-science-blue) 66%, transparent), transparent 100%),
		radial-gradient(40% 46% at 88% 84%, color-mix(in srgb, var(--twyce-vermilion-red) 72%, transparent), transparent 100%),
		radial-gradient(70% 60% at 70% 62%, color-mix(in srgb, var(--twyce-signal-orange) 26%, transparent), transparent 84%),
		linear-gradient(128deg, var(--twyce-deep-navy) 0%, #0a2358 38%, #4a2c5e 72%, #7d3340 100%);
}

/* Variant 6 — Ember: warm from the left edge instead of the right, and low
   rather than diagonal. Gives the legal and utility pages a distinct feel
   without repeating any other variant's composition. */
.twyce-page-hero--ember {
	background-image:
		radial-gradient(64% 80% at -6% 92%, color-mix(in srgb, var(--twyce-vermilion-red) 40%, transparent), transparent 78%),
		radial-gradient(38% 42% at 2% 100%, color-mix(in srgb, var(--twyce-signal-orange) 44%, transparent), transparent 90%),
		radial-gradient(76% 64% at 92% 8%, color-mix(in srgb, var(--twyce-deep-blue) 82%, transparent), transparent 70%),
		linear-gradient(20deg, #2a1f4a 0%, #08204f 46%, var(--twyce-deep-navy) 100%);
}

/* Variant 8 — Dawn: the mirror of the homepage. Blue field with Signal Orange
   coming out of the TOP-LEFT corner instead of the bottom-right. The warm
   source is kept compact and high so it sits behind the logo and nav and fades
   out well above the copy — an orange wash behind the headline would cost too
   much contrast. */
.twyce-page-hero--dawn {
	background-image:
		/* Warm core, hard into the corner. */
		radial-gradient(40% 30% at -4% -6%, color-mix(in srgb, var(--twyce-signal-orange) 96%, transparent), transparent 70%),
		/* Wider haze so the corner reads as an area rather than a dot, still
		   fading out above the eyebrow. */
		radial-gradient(72% 46% at -2% -10%, color-mix(in srgb, var(--twyce-signal-orange) 52%, transparent), transparent 74%),
		/* A last breath of warmth to soften the meeting point with the blue. */
		radial-gradient(96% 62% at 4% -14%, color-mix(in srgb, var(--twyce-vermilion-red) 26%, transparent), transparent 76%),
		radial-gradient(90% 80% at 90% 34%, color-mix(in srgb, var(--twyce-science-blue) 32%, transparent), transparent 82%),
		radial-gradient(100% 78% at 66% 100%, color-mix(in srgb, var(--twyce-deep-blue) 62%, transparent), transparent 80%),
		linear-gradient(160deg, #0a2352 0%, var(--twyce-deep-navy) 48%, #06204b 100%);
}

/* Variant 7 — Abyss: almost no light at all, a single faint source dead centre.
   For pages where the copy should carry everything. */
.twyce-page-hero--abyss {
	background-image:
		radial-gradient(60% 70% at 50% 46%, color-mix(in srgb, var(--twyce-deep-blue) 62%, transparent), transparent 82%),
		radial-gradient(40% 44% at 50% 42%, color-mix(in srgb, var(--twyce-science-blue) 26%, transparent), transparent 100%),
		linear-gradient(180deg, #020f27 0%, var(--twyce-deep-navy) 55%, #041a3f 100%);
}

/* ---- Decorative T-cells ---- */

.twyce-hero-cells {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* Three closely-related sizes rather than a wide spread — the cells should
   read as the same object at slightly different depths, not as big-and-small. */
.twyce-hero-cells {
	--twyce-cell-lg: clamp(165px, 19vw, 270px);
	--twyce-cell-md: clamp(150px, 17vw, 235px);
	--twyce-cell-sm: clamp(135px, 15vw, 205px);
}

.twyce-hero-cell {
	position: absolute;
	display: block;
	width: var(--twyce-cell-md);
	/* No entrance animation by design — the cells are simply present. Only
	   `transform` changes, written by the scroll handler in twyce.js. */
	will-change: transform;
}

/* The artwork ships in the brand blue, so nothing recolours it — the image is
   drawn as-is and only held back in opacity so it reads as background. */
.twyce-hero-cell img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.62;
}

/* Placement — four cells per hero.
   The copy sits left-of-centre and vertically centred, so the band between
   roughly 20% and 80% on the LEFT half must stay empty. Everything to the
   right of the rail is fair game, and on the left the top and bottom margins
   are: every variant uses at least one of them, so no page leans right. */

.twyce-page-hero--deep     .twyce-hero-cell--a { top: -3%;   right: 24%; width: var(--twyce-cell-lg); }
.twyce-page-hero--deep     .twyce-hero-cell--b { bottom: 2%;  right: 7%; }
.twyce-page-hero--deep     .twyce-hero-cell--c { top: 44%;    right: -3%; width: var(--twyce-cell-sm); }
.twyce-page-hero--deep     .twyce-hero-cell--d { bottom: -3%; left: 6%;  width: var(--twyce-cell-md); }

.twyce-page-hero--science  .twyce-hero-cell--a { top: 4%;     right: 8%;  width: var(--twyce-cell-lg); }
.twyce-page-hero--science  .twyce-hero-cell--b { bottom: -4%; right: 32%; }
.twyce-page-hero--science  .twyce-hero-cell--c { top: 46%;    right: 19%; width: var(--twyce-cell-sm); }
.twyce-page-hero--science  .twyce-hero-cell--d { top: -5%;    left: 4%;   width: var(--twyce-cell-md); }

.twyce-page-hero--signal   .twyce-hero-cell--a { top: -2%;    right: 13%; width: var(--twyce-cell-lg); }
.twyce-page-hero--signal   .twyce-hero-cell--b { bottom: 5%;  right: 4%; }
.twyce-page-hero--signal   .twyce-hero-cell--c { bottom: -2%; left: 32%;  width: var(--twyce-cell-sm); }
.twyce-page-hero--signal   .twyce-hero-cell--d { top: 2%;     left: 7%;   width: var(--twyce-cell-md); }

.twyce-page-hero--horizon  .twyce-hero-cell--a { top: 3%;     right: 17%; width: var(--twyce-cell-lg); }
.twyce-page-hero--horizon  .twyce-hero-cell--b { bottom: 3%;  right: 11%; }
.twyce-page-hero--horizon  .twyce-hero-cell--c { top: -4%;    left: 31%;  width: var(--twyce-cell-sm); }
.twyce-page-hero--horizon  .twyce-hero-cell--d { bottom: -6%; left: 3%;   width: var(--twyce-cell-md); }

.twyce-page-hero--spectrum .twyce-hero-cell--a { top: -4%;    right: 28%; width: var(--twyce-cell-lg); }
.twyce-page-hero--spectrum .twyce-hero-cell--b { bottom: 0%;  right: 6%; }
.twyce-page-hero--spectrum .twyce-hero-cell--c { top: 41%;    right: -2%; width: var(--twyce-cell-sm); }
.twyce-page-hero--spectrum .twyce-hero-cell--d { top: -2%;    left: 9%;   width: var(--twyce-cell-md); }

.twyce-page-hero--ember    .twyce-hero-cell--a { bottom: -4%; left: 5%;   width: var(--twyce-cell-lg); }
.twyce-page-hero--ember    .twyce-hero-cell--b { top: 5%;     right: 9%; }
.twyce-page-hero--ember    .twyce-hero-cell--c { bottom: 6%;  right: 24%; width: var(--twyce-cell-sm); }
.twyce-page-hero--ember    .twyce-hero-cell--d { top: -3%;    left: 30%;  width: var(--twyce-cell-md); }

.twyce-page-hero--abyss    .twyce-hero-cell--a { top: 2%;     left: 8%;   width: var(--twyce-cell-lg); }
.twyce-page-hero--abyss    .twyce-hero-cell--b { bottom: 4%;  right: 8%; }
.twyce-page-hero--abyss    .twyce-hero-cell--c { top: 38%;    right: 4%;  width: var(--twyce-cell-sm); }
.twyce-page-hero--abyss    .twyce-hero-cell--d { bottom: -5%; left: 33%;  width: var(--twyce-cell-md); }

.twyce-page-hero--dawn     .twyce-hero-cell--a { top: 6%;     right: 12%; width: var(--twyce-cell-lg); }
.twyce-page-hero--dawn     .twyce-hero-cell--b { bottom: 2%;  right: 30%; }
.twyce-page-hero--dawn     .twyce-hero-cell--c { top: 46%;    right: -2%; width: var(--twyce-cell-sm); }
.twyce-page-hero--dawn     .twyce-hero-cell--d { bottom: -4%; left: 5%;   width: var(--twyce-cell-md); }

/* Narrow screens: the copy spans the full rail, so only the top and bottom
   margins stay clear — two cells, one in each. */
@media (max-width: 900px) {
	.twyce-hero-cells {
		--twyce-cell-lg: clamp(140px, 30vw, 230px);
		--twyce-cell-md: clamp(125px, 26vw, 200px);
	}
	.twyce-page-hero .twyce-hero-cell--a { top: 2%; right: 4%; left: auto; bottom: auto; width: var(--twyce-cell-lg); }
	.twyce-page-hero .twyce-hero-cell--b { bottom: 3%; left: 4%; right: auto; top: auto; width: var(--twyce-cell-md); }
	.twyce-page-hero .twyce-hero-cell--c,
	.twyce-page-hero .twyce-hero-cell--d { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.twyce-hero-cell { transform: none !important; will-change: auto; }
}

.twyce-page-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	width: min(1280px, calc(100% - 56px));
	margin-inline: auto;
	padding: clamp(120px, 12vh, 156px) 0 clamp(64px, 10vh, 120px);
}

.twyce-page-hero__inner h1 {
	color: var(--twyce-white);
}

.twyce-post-meta {
	margin: 18px 0 0;
	color: var(--twyce-on-dark-muted);
	font-size: 13.5px;
}

.twyce-single-body {
	background: var(--twyce-white);
}

.twyce-single-back {
	margin: 0 0 28px;
}

.twyce-single-back .twyce-dot-link {
	color: var(--twyce-science-blue);
	font-size: var(--twyce-type-sm);
	font-weight: 700;
}

.twyce-single-action {
	margin: 0 0 28px;
}

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

.twyce-prose blockquote {
	margin: 24px 0;
	padding-left: 20px;
	border-left: 3px solid var(--twyce-horizon-blue);
	color: var(--twyce-text-strong);
}

.twyce-prose blockquote p {
	font-size: var(--twyce-type-md);
	line-height: 1.4;
}

.twyce-prose blockquote cite {
	display: block;
	margin-top: 8px;
	color: var(--twyce-text-muted);
	font-size: 12.5px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* On small screens the copy sits higher, reserving the bottom-right of the
   hero for the captioned T-cell. */
@media (max-width: 700px) {
	.twyce-signal-hero__content {
		padding-bottom: min(320px, 40vh);
	}
}

@media (prefers-reduced-motion: reduce) {
	.twyce-signal-hero__canvas { opacity: 1; transition: none; }
	.twyce-signal-hero__content > *,
	.twyce-page-hero .wp-block-cover__inner-container > * { animation: none; }
}

/* ==========================================================================
   6. Pipeline table
   ==========================================================================
   Bar COLOUR encodes the signal (Signal 1 / Signal 2 / both, striped /
   future outlook); bar LENGTH encodes the development stage against one
   segment per stage label (--twyce-stages, set by the block). Those are two
   independent dimensions on purpose — see the legend. */

.twyce-pipeline__legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 34px;
	margin-bottom: 28px;
}

.twyce-pipeline .twyce-pipeline__legend-keys {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.twyce-pipeline__legend-key {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--twyce-text-strong);
	font-size: 13.5px;
}

/* The swatch is a miniature of the bar it describes, hatching included. */
.twyce-pipeline__swatch {
	flex-shrink: 0;
	width: 30px;
	height: 11px;
	border-radius: 999px;
	background: var(--twyce-accent, var(--twyce-deep-blue));
}

.twyce-pipeline__legend-key--s1      { --twyce-accent: var(--twyce-horizon-blue); }
.twyce-pipeline__legend-key--s2      { --twyce-accent: var(--twyce-deep-blue); }
.twyce-pipeline__legend-key--combo   { --twyce-accent: var(--twyce-deep-blue); }
.twyce-pipeline__legend-key--nextgen { --twyce-accent: var(--twyce-signal-orange); }

/* Combinations are both signals at once: stripes of the two signal colours,
   on the bar and on its legend swatch. */
.twyce-pipeline__legend-key--combo .twyce-pipeline__swatch,
.twyce-pipeline__row--combo .twyce-pipeline__bar {
	background-image: repeating-linear-gradient(
		-45deg,
		var(--twyce-deep-blue) 0 5px,
		var(--twyce-horizon-blue) 5px 10px
	);
}

.twyce-pipeline__legend-note {
	margin: 0;
	margin-left: auto;
	color: var(--twyce-text-muted);
	font-size: 12.5px;
	font-style: italic;
}

.twyce-pipeline__table {
	display: flex;
	flex-direction: column;
}

.twyce-pipeline__head,
.twyce-pipeline__row {
	display: grid;
	grid-template-columns: 1fr 1.25fr 1.6fr;
	gap: 22px;
	align-items: start;
}

/* The column headings travel with the table: sticky under the fixed site
   header (82px; the WordPress toolbar adds to it when logged in), on a solid
   ground so rows scroll beneath them, with a shadow once they are stuck. The
   transparent left border matches the rows' accent border, so the heading
   columns sit exactly over the row columns. */
.twyce-pipeline {
	--twyce-pipeline-sticky: 82px;
	/* Very soft vertical rules at the start of every stage run down the whole
	   table, so a bar's end reads against the stage it has reached. */
	--twyce-stage-line: color-mix(in srgb, var(--twyce-deep-blue) 13%, transparent);
	/* Bars start a little right of the first rule rather than touching it. */
	--twyce-bar-inset: 8px;
}

.admin-bar .twyce-pipeline { --twyce-pipeline-sticky: 114px; }

@media (max-width: 782px) {
	.admin-bar .twyce-pipeline { --twyce-pipeline-sticky: 128px; }
}

.twyce-pipeline__head {
	position: sticky;
	top: var(--twyce-pipeline-sticky);
	z-index: 5;
	isolation: isolate;
	padding: 18px 20px 14px;
	border-left: 3px solid transparent;
	border-bottom: 2px solid color-mix(in srgb, var(--twyce-deep-blue) 28%, transparent);
	background: var(--twyce-white);
	transition: box-shadow 200ms ease;
}

.twyce-pipeline__head.is-stuck {
	box-shadow: 0 12px 22px -16px color-mix(in srgb, var(--twyce-deep-navy) 45%, transparent);
}

.twyce-pipeline__head .twyce-pipeline__col {
	color: var(--twyce-text-strong);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.twyce-pipeline__stage-axis {
	display: grid;
	grid-template-columns: repeat(var(--twyce-stages, 5), 1fr);
	margin-top: 10px;
	color: var(--twyce-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: none;
}

/* The stage rules: a hairline at the start of each stage, across the stage
   column of the heading and of every row. Drawn behind the cell and stretched
   over the row's own padding, so the rules run unbroken down the table. */
.twyce-pipeline__stage-axis,
.twyce-pipeline__col--stage {
	position: relative;
}

/* The stage cell fills its row's full height, so the band does too, however
   tall the program or modality cell beside it is. */
.twyce-pipeline__col--stage {
	align-self: stretch;
}

/* In the heading the rules sit beside the stage scale only (down to the
   heading's rule), leaving the "Development stage" label clear. */
.twyce-pipeline__stage-axis::before,
.twyce-pipeline__col--stage::before {
	content: "";
	position: absolute;
	inset: -6px 0 -14px;
	z-index: -1;
	background-image: linear-gradient( to right, var(--twyce-stage-line) 0 1px, transparent 1px );
	background-size: calc(100% / var(--twyce-stages, 5)) 100%;
	background-repeat: repeat-x;
	pointer-events: none;
}

.twyce-pipeline__col--stage::before {
	inset: -22px 0;
}

.twyce-pipeline__row {
	position: relative;
	isolation: isolate;
	padding: 22px 20px;
	border-bottom: 1px solid var(--twyce-line);
	border-left: 3px solid var(--twyce-accent, var(--twyce-deep-blue));
	text-align: left;
	transition: background 180ms ease;
}

.twyce-pipeline__row.is-clickable {
	cursor: pointer;
}

.twyce-pipeline__row.is-clickable:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--twyce-deep-blue) 4%, transparent);
}

.twyce-pipeline__row:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--twyce-science-blue) 55%, transparent);
	outline-offset: -2px;
}

/* Splits the table into two groups — set per program in the editor. */
.twyce-pipeline__section-break {
	height: 34px;
}

.twyce-pipeline__col {
	min-width: 0;
}

.twyce-pipeline__col--program strong {
	display: block;
	color: var(--twyce-text-strong);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* A clickable program says so by its underlined name (the whole row opens the
   details, as before). */
.twyce-pipeline__row.is-clickable .twyce-pipeline__name {
	width: fit-content;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--twyce-science-blue) 45%, transparent);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 5px;
	transition: color 180ms ease, text-decoration-color 180ms ease;
}

.twyce-pipeline__row.is-clickable:is(:hover, :focus-visible) .twyce-pipeline__name {
	color: var(--twyce-science-blue);
	text-decoration-color: currentColor;
}

.twyce-pipeline__col--program span {
	display: block;
	margin-top: 6px;
	color: var(--twyce-text);
	font-size: 12.5px;
}

/* ---- Modality column ---- */

.twyce-pipeline__signal {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 7px;
	color: var(--twyce-text-strong);
	font-size: 13px;
	line-height: 1.45;
}

.twyce-pipeline__badge {
	flex-shrink: 0;
	min-width: 26px;
	padding: 2px 7px;
	border-radius: 3px;
	background: color-mix(in srgb, var(--twyce-accent, var(--twyce-deep-blue)) 20%, transparent);
	color: var(--twyce-accent-ink, var(--twyce-accent, var(--twyce-deep-blue)));
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
}

.twyce-pipeline__descriptor {
	margin: 10px 0 0;
	color: var(--twyce-text-muted);
	font-size: 12px;
	font-style: italic;
	line-height: 1.5;
}

/* ---- Stage column ---- */

.twyce-pipeline__stage-label {
	display: block;
	margin-bottom: 10px;
	padding-left: var(--twyce-bar-inset);
	color: var(--twyce-accent-ink, var(--twyce-accent, var(--twyce-deep-blue)));
	font-size: 12.5px;
	font-weight: 700;
}

/* The bar's end reads against the stage rules running down from the scale in
   the heading (see the stage rules above). The track keeps the full stage
   width, so --twyce-fill still lands on the scale exactly, and is clipped to
   start a little right of the first rule instead of touching it. */
.twyce-pipeline__bar-track {
	position: relative;
	height: 11px;
	clip-path: inset(0 0 0 var(--twyce-bar-inset) round 999px);
	background-color: color-mix(in srgb, var(--twyce-deep-blue) 8%, transparent);
}

.twyce-pipeline__bar {
	position: absolute;
	inset: 0;
	width: 0;
	border-radius: 999px;
	background-color: var(--twyce-accent, var(--twyce-deep-blue));
	transition: width 1100ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.twyce-pipeline__row.is-visible .twyce-pipeline__bar {
	width: var(--twyce-fill, 0%);
}

/* Signal.
   --twyce-accent is the bar/border/badge colour; --twyce-accent-ink is the
   colour its label is set in. They differ where the bar colour fails text
   contrast on white: Horizon Blue (2.20:1) and Signal Orange.
   Deep Blue against Horizon Blue measures 5.24:1, so Signal 1 and Signal 2
   stay distinct in greyscale and for colour-vision deficiency. */
.twyce-pipeline__row--s1 {
	--twyce-accent: var(--twyce-horizon-blue);
	--twyce-accent-ink: var(--twyce-science-blue);
}

/* "mono" is the pre-October value, kept so older entries still render. */
.twyce-pipeline__row--s2,
.twyce-pipeline__row--mono {
	--twyce-accent: var(--twyce-deep-blue);
	--twyce-accent-ink: var(--twyce-deep-blue);
}

.twyce-pipeline__row--combo {
	--twyce-accent: var(--twyce-deep-blue);
	--twyce-accent-ink: var(--twyce-deep-blue);
}

.twyce-pipeline__row--nextgen {
	--twyce-accent: var(--twyce-signal-orange);
	--twyce-accent-ink: color-mix(in srgb, var(--twyce-signal-orange) 78%, var(--twyce-deep-navy));
}

/* A program that is no longer TWYCE's own (CC-2): shown, but stepped back. */
.twyce-pipeline__row.is-faded > .twyce-pipeline__col:not(.twyce-pipeline__col--stage),
.twyce-pipeline__row.is-faded > .twyce-pipeline__col--stage > * {
	opacity: 0.45;
}

.twyce-pipeline__row.is-faded > .twyce-pipeline__col--program {
	opacity: 1;
}

.twyce-pipeline__row.is-faded > .twyce-pipeline__col--program strong,
.twyce-pipeline__row.is-faded > .twyce-pipeline__col--program > span:not(.twyce-pipeline__stamp) {
	opacity: 0.45;
}

.twyce-pipeline__row.is-faded {
	border-left-color: color-mix(in srgb, var(--twyce-accent) 45%, transparent);
}

/* Status stamp next to the program name, e.g. "Licensed to Cullinan". */
.twyce-pipeline__col--program .twyce-pipeline__stamp {
	display: inline-block;
	margin-top: 10px;
	padding: 3px 8px;
	border: 1.5px solid var(--twyce-vermilion-red);
	border-radius: 3px;
	color: var(--twyce-vermilion-red);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

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

.twyce-pipeline__footer {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px 40px;
	margin-top: 26px;
	padding-top: 18px;
}

.twyce-pipeline__footer-title {
	color: var(--twyce-text-strong);
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.twyce-pipeline__footer-text {
	color: var(--twyce-science-blue);
	font-size: 13.5px;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.twyce-pipeline__bar { transition: none; width: var(--twyce-fill, 0%); }
}

/* Phones and small tablets: a compact two-column table. Program and modality
   sit side by side with the stage bar across the full width beneath them; the
   sticky heading mirrors that, so its labels still name the columns, and its
   stage scale lines up with every bar. */
@media (max-width: 860px) {
	.twyce-pipeline__head,
	.twyce-pipeline__row {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: 10px 14px;
	}

	.twyce-pipeline__head .twyce-pipeline__col:last-child,
	.twyce-pipeline__col--stage {
		grid-column: 1 / -1;
	}

	.twyce-pipeline__head {
		padding: 12px 12px 8px;
	}

	.twyce-pipeline__head .twyce-pipeline__col {
		font-size: 10.5px;
		letter-spacing: 0.06em;
	}

	.twyce-pipeline__head .twyce-pipeline__col:last-child {
		padding-top: 4px;
	}

	.twyce-pipeline__stage-axis {
		margin-top: 6px;
		font-size: 9.5px;
		letter-spacing: 0;
	}

	.twyce-pipeline__stage-axis::before {
		inset: -4px 0 -8px;
	}

	.twyce-pipeline__row {
		padding: 16px 12px 18px;
	}

	.twyce-pipeline__col--stage::before {
		inset: -6px 0 -18px;
	}

	.twyce-pipeline__col--program strong {
		font-size: 15.5px;
	}

	.twyce-pipeline__col--program span {
		font-size: 12px;
	}

	.twyce-pipeline__signal {
		gap: 7px;
		font-size: 12.5px;
	}

	.twyce-pipeline__descriptor {
		font-size: 11.5px;
	}

	.twyce-pipeline__stage-label {
		font-size: 12px;
	}

	.twyce-pipeline__legend-note { margin-left: 0; }
}

/* ==========================================================================
   7. Team grid
   ========================================================================== */

.twyce-team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--twyce-card-min, 200px), 1fr));
	gap: 28px;
	margin-top: 8px;
}

/* Clickable cards render as <button>, so every inherited button style —
   Kadence's 999px pill radius above all — has to be pinned back to card
   geometry, or the white background rounds into an oval behind the photo. */
.twyce-team-card {
	--twyce-card-bg: var(--twyce-white);
	/* Flex column, not block: buttons vertically centre their content, which
	   pushed photos down by different amounts in equal-height grid cells. */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	padding: 0 0 20px;
	border: 0;
	border-radius: 0;
	appearance: none;
	font: inherit;
	letter-spacing: normal;
	text-align: left;
	overflow: hidden;
	background: var(--twyce-white);
	transition: background 180ms ease;
}

.twyce-team-card.is-clickable {
	cursor: pointer;
}

.twyce-team-card.is-clickable:is(:hover, :focus-visible) {
	background: color-mix(in srgb, var(--twyce-deep-blue) 4%, var(--twyce-white));
}

.twyce-team-card:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--twyce-science-blue) 50%, transparent);
	outline-offset: -2px;
}

/* Portrait crop. The supplied headshots are square, so `cover` fills the
   height and trims the left and right edges — which is the intended framing. */
.twyce-team-card__photo {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--twyce-image-bg);
	margin-bottom: 16px;
}

.twyce-team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.twyce-team-card__monogram {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--twyce-science-blue), var(--twyce-deep-blue));
	color: var(--twyce-white);
	font-size: 42px;
	font-weight: 700;
}

/* The info block fills the rest of the card so the "More" link can pin to the
   bottom edge — every card's link sits on the same line across the row. */
.twyce-team-card__info {
	display: flex;
	flex-direction: column;
	flex: 1;
	/* Top padding: the photo rule below drops the photo's own bottom margin. */
	padding: 16px 18px 0;
}

/* The white card needs its portrait to bleed to the card edges. */
.twyce-team-card__photo {
	margin: 0;
}

/* Two lines reserved for every name, so the role labels line up across a row
   even where a longer name ("PD Dr. med. Jonas Heitmann, M.Sc.") wraps. */
.twyce-team-card__name {
	min-height: 2.6em;
	margin: 0;
	color: var(--twyce-text-strong);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.twyce-team-card__role {
	margin: 4px 0 10px;
	color: var(--twyce-science-blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.twyce-team-card__bio {
	margin: 0 0 14px;
	color: var(--twyce-text);
	font-size: 13px;
	line-height: 1.55;
}

/* The "More" affordance at the card foot: dot + label + chevron, matching the
   site's dot CTAs. A span, since the whole card is the button; margin-top auto
   pins it to the bottom edge, and both the glow and the chevron slide respond
   to hovering anywhere on the card. */
.twyce-team-card__more {
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: auto;
	padding-left: 14px;
	color: var(--twyce-science-blue);
	font-size: 13px;
	font-weight: 700;
}

.twyce-team-card__more::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--twyce-horizon-blue);
	transform: translateY(-50%);
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow 220ms ease;
}

.twyce-team-card__more::after {
	content: "\203A";
	font-size: 1.3em;
	line-height: 1;
	transition: transform 180ms ease;
}

.twyce-team-card.is-clickable:is(:hover, :focus-visible) .twyce-team-card__more {
	color: var(--twyce-deep-blue);
}

.twyce-team-card.is-clickable:is(:hover, :focus-visible) .twyce-team-card__more::before {
	box-shadow:
		0 0 8px 2px var(--twyce-horizon-blue),
		0 0 18px 6px color-mix(in srgb, var(--twyce-horizon-blue) 55%, transparent);
}

.twyce-team-card.is-clickable:is(:hover, :focus-visible) .twyce-team-card__more::after {
	transform: translateX(3px);
}

@media (max-width: 640px) {
	.twyce-team-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 20px;
	}
}

/* ==========================================================================
   8. FAQ accordion
   ========================================================================== */

.twyce-faq {
	width: min(820px, 100%);
	margin-inline: auto;
}

.twyce-faq__item {
	border-bottom: 1px solid var(--twyce-line);
}

.twyce-faq__question {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	color: var(--twyce-text-strong);
	font-size: 16px;
	font-weight: 700;
}

.twyce-faq__question::-webkit-details-marker {
	display: none;
}

.twyce-faq__question::after {
	content: "+";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 400;
	color: var(--twyce-science-blue);
	transition: transform 200ms ease;
}

.twyce-faq__item[open] .twyce-faq__question::after {
	transform: rotate(45deg);
}

.twyce-faq__answer {
	margin-bottom: 24px;
	padding-right: 44px;
	color: color-mix(in srgb, var(--twyce-deep-navy) 68%, transparent);
	font-size: var(--twyce-type-sm);
	line-height: 1.62;
}

.twyce-faq__answer > :first-child { margin-top: 0; }
.twyce-faq__answer > :last-child  { margin-bottom: 0; }

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

/* ==========================================================================
   9. Info slider
   ========================================================================== */

.twyce-slider__slides {
	position: relative;
}

/* The slider is one wide card that flips through its slides. The controls sit
   in the outer grid's text column — under the copy rather than under the whole
   card — which is what lets the image column take the larger share. Both grids
   use the same template so the two line up. */
.twyce-slider {
	--twyce-slider-cols: minmax(0, 1.3fr) minmax(0, 1fr);
	--twyce-slider-gap: clamp(28px, 4vw, 60px);
	display: grid;
	grid-template-columns: var(--twyce-slider-cols);
	column-gap: var(--twyce-slider-gap);
	align-items: start;
	padding: 28px;
	background: var(--twyce-card-bg, var(--twyce-white));
	border-top: 3px solid var(--twyce-science-blue);
}

.twyce-reveal.has-theme-palette-9-background-color .twyce-slider {
	--twyce-card-bg: var(--twyce-band);
}

.twyce-slider__slides {
	grid-column: 1 / -1;
	grid-row: 1;
}

.twyce-slide {
	display: grid;
	grid-template-columns: var(--twyce-slider-cols);
	column-gap: var(--twyce-slider-gap);
	align-items: center;
}

.twyce-slide__content {
	padding-bottom: 56px;
}

.twyce-slider--media-right .twyce-slide__media {
	order: 2;
}

/* Before the script runs every slide is in normal flow and readable. Once
   .is-enhanced lands they stack and cross-fade. */
/* Inactive slides are taken out of the accessibility tree and made
   non-interactive as well as transparent — opacity alone would leave their
   text selectable and their links tabbable underneath the active slide. */
.twyce-slider.is-enhanced .twyce-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 320ms ease, visibility 0s linear 320ms;
}

.twyce-slider.is-enhanced .twyce-slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 320ms ease;
}

.twyce-slider.is-swapping .twyce-slide.is-active {
	opacity: 0;
	transform: translateY(8px);
}

.twyce-slide__media {
	position: relative;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: var(--twyce-image-bg);
}

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

.twyce-slide__content h3 {
	margin: 0 0 14px;
	color: var(--twyce-text-strong);
	font-size: var(--twyce-type-lg);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.01em;
}

.twyce-slide__content p {
	margin: 0;
	color: var(--twyce-text);
	font-size: var(--twyce-type-sm);
	line-height: 1.62;
}

/* In the text column and on the image's bottom edge, so the control row closes
   the card rather than hanging in space below a tall image. */
/* The controls share the slides' grid cell. The active slide is positioned
   (position: relative), and positioned boxes paint above static ones, so
   without its own stacking the controls sat underneath the slide and never
   received a click. */
.twyce-slider__controls {
	position: relative;
	z-index: 2;
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	display: flex;
	align-items: center;
	gap: 16px;
}

.twyce-slider__arrow {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--twyce-line-strong);
	background: transparent;
	color: var(--twyce-text-strong);
	font-size: 16px;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease;
}

.twyce-slider__arrow:hover {
	background: color-mix(in srgb, var(--twyce-deep-blue) 6%, transparent);
	border-color: color-mix(in srgb, var(--twyce-deep-blue) 32%, transparent);
}

.twyce-slider__dots {
	display: flex;
	gap: 14px;
}

.twyce-slider__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid var(--twyce-science-blue);
	border-radius: 50%;
	background: transparent;
	box-shadow: 0 0 0 0 transparent;
	cursor: pointer;
	transition: background 160ms ease, transform 160ms ease, box-shadow 220ms ease;
}

.twyce-slider__dot.is-active {
	background: var(--twyce-science-blue);
	box-shadow:
		0 0 8px 2px var(--twyce-science-blue),
		0 0 18px 6px color-mix(in srgb, var(--twyce-science-blue) 45%, transparent);
	transform: scale(1.3);
}

@media (max-width: 860px) {
	.twyce-slide { grid-template-columns: 1fr; }
	.twyce-slider--media-right .twyce-slide__media { order: 0; }

	.twyce-slider {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px;
	}

	.twyce-slider__controls {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		margin-top: 4px;
	}

	.twyce-slide__content {
		padding-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.twyce-slider.is-enhanced .twyce-slide { transition: none; }
}

/* ==========================================================================
   10. Modals
   ========================================================================== */

.twyce-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: color-mix(in srgb, var(--twyce-deep-navy) 55%, transparent);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 220ms ease;
}

.twyce-modal-overlay[hidden] {
	display: none;
}

.twyce-modal-overlay.is-open {
	opacity: 1;
}

.twyce-modal {
	position: relative;
	width: min(560px, 100%);
	max-height: 85vh;
	overflow-y: auto;
	padding: 40px;
	background: var(--twyce-white);
	transform: translateY(14px);
	transition: transform 260ms var(--twyce-ease);
}

.twyce-modal-overlay.is-open .twyce-modal {
	transform: translateY(0);
}

/* An even circle with the × dead-centre. Kadence's global button styling
   (pill radius, padding) was deforming it, so every box property is pinned. */
.twyce-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-width: 0;
	padding: 0;
	border: 1px solid var(--twyce-line-strong);
	border-radius: 50%;
	background: transparent;
	color: var(--twyce-text-strong);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background 160ms ease, border-color 160ms ease;
}

.twyce-modal__close:hover {
	background: color-mix(in srgb, var(--twyce-deep-blue) 6%, transparent);
	border-color: color-mix(in srgb, var(--twyce-deep-blue) 32%, transparent);
}
/* Portrait inside a dialog. Floated so a long bio wraps around it rather than
   starting below a full-width image the reader has to scroll past. */
.twyce-modal__figure {
	float: right;
	width: clamp(120px, 26%, 190px);
	margin: 0 0 18px 24px;
	overflow: hidden;
}

.twyce-modal__figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (max-width: 600px) {
	.twyce-modal__figure {
		float: none;
		width: 150px;
		margin: 0 0 16px;
	}
}


.twyce-modal__eyebrow {
	margin-bottom: 8px;
}

.twyce-modal__title {
	margin: 0 0 18px;
	color: var(--twyce-text-strong);
	font-size: var(--twyce-type-lg);
	font-weight: 700;
}

.twyce-modal__title:has(+ .twyce-modal__role) {
	margin-bottom: 6px;
}

.twyce-modal__role {
	margin: 0 0 22px;
	color: var(--twyce-text-muted);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.twyce-modal__body {
	color: color-mix(in srgb, var(--twyce-deep-navy) 68%, transparent);
	font-size: var(--twyce-type-sm);
	line-height: 1.62;
}

.twyce-modal__body > :first-child { margin-top: 0; }
.twyce-modal__body > :last-child  { margin-bottom: 0; }

/* A core List or Table inside the dialog becomes the "key facts" block. */
.twyce-modal__body :is(ul, ol) {
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--twyce-line);
	list-style: none;
}

.twyce-modal__body li {
	margin-bottom: 12px;
	color: var(--twyce-text-strong);
	font-size: 13.5px;
	line-height: 1.5;
}

.twyce-modal__body a {
	color: var(--twyce-science-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.twyce-modal__body a:hover {
	color: var(--twyce-deep-blue);
}

.twyce-modal__note {
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 1px dashed var(--twyce-line-strong);
	color: var(--twyce-text-faint);
	font-size: 11.5px;
	font-style: italic;
	line-height: 1.5;
}

/* Stop the page scrolling behind an open dialog. */
body.twyce-modal-open {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.twyce-modal-overlay,
	.twyce-modal { transition: none; }
}

/* ==========================================================================
   11. Cards and empty states
   ========================================================================== */

/* Applied to a core Group or a Query Loop post template to get the demo's
   teaser card. Available in the editor as the "TWYCE card" block style.
   Cards are white so they read as cards on the light-blue bands. */
.twyce-card {
	--twyce-card-bg: var(--twyce-white);
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 28px;
	background: var(--twyce-white);
	color: inherit;
	text-decoration: none;
	transition: background 180ms ease;
}

/* A card takes the opposite tone to the band it sits on, so it reads as a
   surface either way round: white cards lift off a tinted band, tinted cards
   off a white one. Without this, a card on a white band is invisible. */
.twyce-reveal.has-theme-palette-9-background-color .twyce-card {
	--twyce-card-bg: var(--twyce-band);
	background: var(--twyce-card-bg);
}

.twyce-reveal.has-theme-palette-9-background-color .twyce-card:hover {
	background: color-mix(in srgb, var(--twyce-deep-blue) 6%, var(--twyce-band));
}

/* The team and event cards are <button> elements, so they can open a dialog
   with the keyboard as well as the mouse. That also puts them inside Kadence's
   global button styling, whose :hover/:focus/:active background paints the card
   deep blue — and because closing a dialog returns focus to the card that
   opened it, the card stayed looking selected long after the dialog was gone.
   Re-asserting the card's own surface here, at more weight than `button:focus`,
   is what stops that. */
.twyce-reveal :is(.twyce-team-card, .twyce-event-card):is(:hover, :focus, :active) {
	background-color: var(--twyce-card-bg, var(--twyce-white));
	color: inherit;
	box-shadow: none;
}

/* The deliberate hover/keyboard-focus tint, restated so it still wins. */
.twyce-reveal .twyce-team-card.is-clickable:is(:hover, :focus-visible),
.twyce-reveal .twyce-event-card.is-clickable:is(:hover, :focus-visible) {
	background-color: color-mix(in srgb, var(--twyce-deep-blue) 5%, var(--twyce-card-bg, var(--twyce-white)));
}

/* Every card carries the same accent cap — it is what marks a card as a card
   across the site, so it cannot belong to one page's rows only. */
.twyce-card {
	border-top: 3px solid var(--twyce-science-blue);
}

.twyce-card:hover {
	background: color-mix(in srgb, var(--twyce-deep-blue) 4%, var(--twyce-white));
}

/* Internal rhythm, per the demo's nav-card: tag 10px, title 10px, copy 18px. */
.twyce-card > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.twyce-card :is(h2, h3, .wp-block-post-title) {
	margin-bottom: 10px;
}

.twyce-card:focus-within {
	outline: 2px solid color-mix(in srgb, var(--twyce-science-blue) 50%, transparent);
	outline-offset: -2px;
}

/* Let a featured image bleed to the card's edges. The .single-content variants
   out-rank Kadence's `figure.wp-block-image` margin reset (0,2,2). */
.twyce-card .wp-block-post-featured-image,
.twyce-card .twyce-card__image,
.single-content .twyce-card .wp-block-post-featured-image,
.single-content .twyce-card figure.twyce-card__image {
	margin: -28px -28px 20px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--twyce-image-bg);
}

.twyce-card .wp-block-post-featured-image img,
.twyce-card .twyce-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.twyce-card :is(h2, h3, .wp-block-post-title) {
	margin: 0 0 10px;
	color: var(--twyce-text-strong);
	font-size: 17px;
	font-weight: 700;
}

.twyce-card :is(h2, h3, .wp-block-post-title) a {
	color: inherit;
	text-decoration: none;
}

.twyce-card :is(p, .wp-block-post-excerpt) {
	margin: 0 0 18px;
	color: var(--twyce-text);
	font-size: 13.5px;
	line-height: 1.55;
}

/* Only the body copy grows — tags and CTA links keep their natural height, so
   in an equal-height row every card's link sits on the same baseline. */
.twyce-card p:not(.twyce-tag):not(.twyce-cta-link):not(.twyce-dot-cta),
.twyce-card .wp-block-post-excerpt {
	flex: 1;
}

.twyce-card :is(a.twyce-cta-link, p.twyce-cta-link) {
	margin-top: auto;
	margin-bottom: 0;
}

/* Cards in a columns row all take the row's full height. */
.wp-block-column > .twyce-card {
	height: 100%;
}

/* Category chip above a card title. */
.twyce-tag,
.twyce-card .wp-block-post-terms {
	display: inline-block;
	margin-bottom: 10px;
	color: var(--twyce-signal-orange);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.twyce-card .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}

.twyce-card .wp-block-post-date {
	margin: -8px 0 12px;
	color: var(--twyce-text-muted);
	font-size: 12px;
}

/* ---- Events grid ---- */

.twyce-events-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

/* Clickable event cards are <button>s — pin inherited button styling back to
   card geometry, as with the team cards. */
.twyce-event-card {
	appearance: none;
	width: 100%;
	/* Not `border: 0` — that would take the card's accent cap with it. */
	border-inline: 0;
	border-block-end: 0;
	border-radius: 0;
	font: inherit;
	letter-spacing: normal;
	text-align: left;
}

.twyce-event-card.is-clickable {
	cursor: pointer;
}

.twyce-event-card:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--twyce-science-blue) 50%, transparent);
	outline-offset: -2px;
}

.twyce-card .twyce-event-card__meta {
	color: var(--twyce-text-muted);
	font-size: 12.5px;
	font-weight: 700;
}

/* "More information" — dot + label + chevron pinned to the card foot, glowing
   on card hover, exactly like the team cards' More. */
.twyce-card__more {
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: auto;
	padding-left: 14px;
	color: var(--twyce-science-blue);
	font-size: 13px;
	font-weight: 700;
}

.twyce-card__more::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--twyce-horizon-blue);
	transform: translateY(-50%);
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow 220ms ease;
}

.twyce-card__more::after {
	content: "\203A";
	font-size: 1.3em;
	line-height: 1;
	transition: transform 180ms ease;
}

.twyce-event-card.is-clickable:is(:hover, :focus-visible) .twyce-card__more {
	color: var(--twyce-deep-blue);
}

.twyce-event-card.is-clickable:is(:hover, :focus-visible) .twyce-card__more::before {
	box-shadow:
		0 0 8px 2px var(--twyce-horizon-blue),
		0 0 18px 6px color-mix(in srgb, var(--twyce-horizon-blue) 55%, transparent);
}

.twyce-event-card.is-clickable:is(:hover, :focus-visible) .twyce-card__more::after {
	transform: translateX(3px);
}

/* Dashed empty state, shown in the editor when a block has no content yet. */
.twyce-placeholder-card {
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	border: 1px dashed var(--twyce-line-strong);
	text-align: center;
	color: var(--twyce-text-faint);
	font-size: 13px;
	font-style: italic;
}

/* ==========================================================================
   11b. Contact form (Kadence Advanced Form)
   ========================================================================== */

/* The demo's form is a 560px column, flush left under its heading. The
   !important is forced: core's constrained layout centres every capped child
   with `margin-inline: auto !important`, so only an !important can keep the
   form on the left edge. */
.twyce-reveal .wp-block-kadence-advanced-form {
	max-width: 560px;
	margin-inline: 0 !important;
}

.twyce-reveal .kb-adv-form-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--twyce-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.twyce-reveal .kb-advanced-form input:not([type="submit"]):not([type="hidden"]),
.twyce-reveal .kb-advanced-form select,
.twyce-reveal .kb-advanced-form textarea {
	border: 1px solid color-mix(in srgb, var(--twyce-deep-blue) 20%, transparent);
	border-radius: 0;
	background: var(--twyce-white);
	padding: 12px 14px;
	font: inherit;
	font-size: 14px;
	color: var(--twyce-text-strong);
	box-shadow: none;
	transition: border-color 160ms ease;
}

.twyce-reveal .kb-advanced-form input:focus,
.twyce-reveal .kb-advanced-form select:focus,
.twyce-reveal .kb-advanced-form textarea:focus {
	outline: none;
	border-color: var(--twyce-science-blue);
}

.twyce-reveal .kb-advanced-form textarea {
	resize: vertical;
	min-height: 120px;
}

/* Under the form: the email-program hint, and the note shown after sending. */
.twyce-rail .twyce-form-hint,
.twyce-rail .twyce-mailto-note {
	margin: 14px 0 0;
	color: var(--twyce-text-muted);
	font-size: 13px;
	line-height: 1.55;
}

.twyce-rail .twyce-mailto-note {
	padding: 12px 16px;
	border-left: 3px solid var(--twyce-science-blue);
	background: color-mix(in srgb, var(--twyce-science-blue) 6%, transparent);
	color: var(--twyce-text-strong);
}

/* Submit matches the site's science-blue pill buttons. */
.twyce-reveal .kb-adv-form-submit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 134px;
	height: 36px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--twyce-science-blue);
	color: var(--twyce-white);
	font-size: var(--twyce-type-sm);
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: transform 180ms ease, background-color 180ms ease;
}

.twyce-reveal .kb-adv-form-submit-button:hover {
	background: var(--twyce-deep-blue);
	color: var(--twyce-white);
	transform: translateY(-1px);
}

/* ==========================================================================
   12. Kadence integration
   ========================================================================== */

/* Pill buttons, matching the demo. Kadence's own button settings cover colour;
   only the geometry needs stating. */
.wp-block-button__link,
.kb-button {
	border-radius: 999px;
	min-width: 134px;
	padding: 0 28px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--twyce-type-sm);
	font-weight: 400;
	line-height: 1;
	transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.wp-block-button__link:hover,
.kb-button:hover {
	transform: translateY(-1px);
}

/* Outline buttons sit on the dark heroes, so they need a light border. */
.twyce-signal-hero .is-style-outline .wp-block-button__link,
.twyce-page-hero .is-style-outline .wp-block-button__link {
	color: var(--twyce-white);
	background: transparent;
	border: 1px solid var(--twyce-on-dark-muted);
}

/* Dark footer. Kadence renders the footer columns; this only recolours them. */
.site-footer,
.site-middle-footer-wrap {
	background: var(--twyce-deep-navy);
	color: var(--twyce-on-dark-muted);
}

.site-footer .widget-title,
.site-footer h2,
.site-footer h4 {
	color: var(--twyce-on-dark-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.site-footer a {
	color: color-mix(in srgb, var(--twyce-light-blue) 82%, transparent);
	font-size: 13.5px;
	text-decoration: none;
	transition: color 180ms ease;
}

.site-footer a:hover {
	color: var(--twyce-white);
}

/* Tighter than the 12px it was: these are short link labels, and the extra air
   made each column read as a list of unrelated items rather than one group. */
.site-footer .menu {
	display: flex;
	flex-direction: column;
	gap: 7px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .widget-title,
.site-footer .widget h2,
.site-footer .widget h4 {
	margin-bottom: 12px;
}

.site-footer .widget {
	margin-bottom: 0;
}

/* The row height, not the gap, was what made these columns feel loose: each
   link carried Kadence's default link padding and leading. */
.site-footer .menu li,
.site-footer .menu li a {
	padding-block: 0;
	line-height: 1.45;
}

.site-footer .menu li {
	display: flex;
	align-items: center;
}

/* The footer dot sits on the light-on-dark palette, not the science blue. */
.site-footer .twyce-dot-link {
	--twyce-dot-color: var(--twyce-horizon-blue);
}

.twyce-footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

/* Follow block, bottom-right of the footer: label over icon, right-aligned in
   the bottom row's second section. */
.twyce-follow {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.twyce-follow__label {
	color: var(--twyce-on-dark-faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* The bottom row holds the copyright and the follow block; keep them on one
   line with the copyright left and the follow block hard right. */
.site-bottom-footer-inner-wrap {
	align-items: center;
}

.site-bottom-footer-inner-wrap .site-footer-section:last-child {
	justify-content: flex-end;
}

.site-bottom-footer-inner-wrap .widget {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.twyce-follow {
		align-items: center;
	}
}

/* Social button: a conventional round icon. */
.site-footer a.twyce-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid color-mix(in srgb, var(--twyce-light-blue) 34%, transparent);
	border-radius: 50%;
	color: var(--twyce-light-blue);
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.site-footer a.twyce-social:hover {
	background: var(--twyce-science-blue);
	border-color: var(--twyce-science-blue);
	color: var(--twyce-white);
}

.site-footer a.twyce-social:focus-visible {
	outline: 2px solid var(--twyce-horizon-blue);
	outline-offset: 2px;
}

.twyce-footer-logo {
	width: 130px;
	height: auto;
}

.twyce-footer-tagline {
	margin: 0;
	max-width: 260px;
	color: var(--twyce-on-dark-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

.site-footer .site-info,
.site-footer .footer-html {
	color: var(--twyce-on-dark-faint);
	font-size: 12px;
}

/* The header and footer rails are 1280px in the design; the content rail is
   1160px. Kadence has no separate header-width option, so this is the one
   place the container width is set outside the Customizer. */
#masthead .site-container,
#colophon .site-container {
	max-width: 1280px;
}

/* Primary nav: every item carries the dot marker, exactly as in the demo.
   The dot flows inline before the label so Customizer spacing changes never
   break its position. */
.main-navigation .primary-menu-container > ul > li.menu-item > a::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--twyce-horizon-blue);
	vertical-align: middle;
	box-shadow: 0 0 0 0 transparent;
	transition: box-shadow 220ms ease;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover::before {
	box-shadow:
		0 0 8px 2px var(--twyce-horizon-blue),
		0 0 18px 6px color-mix(in srgb, var(--twyce-horizon-blue) 55%, transparent);
}

/* Current page: underlined, per the demo — the glow stays hover-only. */
.main-navigation .primary-menu-container > ul > li.current-menu-item > a,
.main-navigation .primary-menu-container > ul > li.current_page_item > a {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

/* Transparent header over the hero, frosted once stuck. Kadence's sticky
   applies a solid background on the inner wrap, so the frost has to out-rank
   its inline style. */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start),
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
	background: color-mix(in srgb, var(--twyce-deep-navy) 62%, transparent) !important;
	border-bottom: 1px solid color-mix(in srgb, var(--twyce-light-blue) 10%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* Nav on the frosted bar stays light. */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .header-menu-container > ul > li.menu-item > a {
	color: var(--twyce-light-blue);
}

/* In-page anchor targets must clear the fixed header. */
:target,
.wp-block-group[id] {
	scroll-margin-top: 96px;
}

/* Focus ring, matching the demo's. */
a:focus-visible,
button:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--twyce-light-blue) 85%, transparent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Editor-only affordances. */
.is-editor-preview .twyce-slide {
	position: relative;
	opacity: 1;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px dashed var(--twyce-line);
}

.twyce-slide__media-button {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: block;
	width: 100%;
}

/* ==========================================================================
   13. Science page — diagrams and publications
   ========================================================================== */

/* Schematics, not photographs: they carry labels, so they are sized to fit
   inside a tinted tile rather than cropped to a ratio. */
.twyce-diagram {
	margin: 0 0 20px;
	padding: 18px;
	background: var(--twyce-band);
	overflow: visible;
	aspect-ratio: auto;
}

.twyce-diagram img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* The diagram cards sit on the tinted band and stay white to lift off it — the
   tile keeps that white so each card reads as one surface with the schematic
   at its head, rather than an image floating on the band. The tile is a fixed
   square: the three source schematics range from landscape to portrait, and
   without it each card's heading would start at a different height. */
/* Every row of cards sits the same distance below the copy that introduces it,
   whichever band it is in. */
.twyce-science > .wp-block-columns {
	margin-top: clamp(24px, 3.5vh, 36px);
}

/* Flex items default to min-width:auto, so a schematic's intrinsic width would
   push its column wider than its siblings and break the row's rhythm. */
.twyce-diagram-row > .wp-block-column,
.twyce-signal-trio > .wp-block-column {
	min-width: 0;
}

.twyce-diagram-card {
	height: 100%;
}

.twyce-diagram-card figure.wp-block-image.twyce-diagram,
.twyce-diagram-card .wp-block-group.twyce-diagram-blinker,
.twyce-signal-step figure.wp-block-image.twyce-diagram {
	/* .twyce-card aligns its children to flex-start, and aspect-ratio would then
	   transfer each schematic's own height back into a width — so the tile is
	   sized explicitly instead: the card's content box plus the 28px padding it
	   bleeds over on each side. The selector carries one class more than
	   Kadence's figure.wp-block-image margin reset so the gap below survives.
	   Transparent rather than a fixed white, so the tile always matches whatever
	   surface the card takes from its band. */
	position: relative;
	width: calc(100% + 56px);
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: -28px -28px 22px;
	padding: 22px 22px 4px;
	background: transparent;
}

/* The only difference between the two rows: the platform schematics range from
   landscape to portrait and need a square to sit in, the signal ones are all
   the same landscape crop. */
.twyce-diagram-card figure.wp-block-image.twyce-diagram,
.twyce-diagram-card .wp-block-group.twyce-diagram-blinker {
	aspect-ratio: 1 / 1;
}

.twyce-signal-step figure.wp-block-image.twyce-diagram {
	aspect-ratio: 7 / 6;
}

.twyce-diagram-card .twyce-diagram img,
.twyce-signal-step .twyce-diagram img {
	min-width: 0;
	min-height: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.twyce-diagram-card :is(h2, h3) {
	margin-bottom: 10px;
}

/* ---- Signal 1 / Signal 2 / Signal 1 + 2 ---- */

/* These are the same card as the two rows above it — surface, accent cap,
   padding and title size all come from .twyce-card and the shared tile rule.
   The only thing particular to this row is the equation drawn between the
   panels. */
.twyce-signal-trio > .wp-block-column {
	min-width: 0;
}

.twyce-signal-step {
	height: 100%;
}

/* The equation reading across the row: Signal 1 + Signal 2 = both. Anchored to
   the tile rather than the column so it sits on the artwork's centre line, and
   drawn in the gutter between the cards. */
.twyce-signal-trio > .wp-block-column + .wp-block-column .twyce-diagram::before {
	position: absolute;
	left: -16px;
	top: 50%;
	transform: translate(-50%, -50%);
	color: var(--twyce-science-blue);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.twyce-signal-trio > .wp-block-column:nth-child(2) .twyce-diagram::before {
	content: "+";
}

.twyce-signal-trio > .wp-block-column:nth-child(3) .twyce-diagram::before {
	content: "=";
}

/* Stacked, the equation reads down the column instead of across the row. */
@media (max-width: 781px) {
	.twyce-signal-trio > .wp-block-column + .wp-block-column .twyce-diagram::before {
		left: 50%;
		top: -18px;
	}
}

/* ---- Science opener: heading, full-measure copy, principle cards ---- */

/* The client asked for the long paragraphs to run the full rail rather than
   stopping two-thirds across. A 1100px measure only reads well if the type
   grows with it, so the copy in these bands steps up a size and opens out its
   leading to match. */
.twyce-science .twyce-copy-group > *,
.twyce-science > .wp-block-group p:not(.twyce-eyebrow) {
	max-width: none;
}

/* Sized against the viewport like every other preset on the site, rather than
   pinned: a fixed 16.5px kept the full-rail measure readable on a desktop but
   left this page's copy larger than its own card titles on a phone. */
.twyce-science .twyce-copy-group > p:not(.twyce-lead) {
	font-size: clamp(15px, 1.15vw, 16.5px);
	line-height: 1.72;
}

.twyce-science > .wp-block-group h2 {
	max-width: none;
}

/* The opener heading carries the page on its own now — no eyebrow, no rule. */
/* Display size for the page's opening statement. Everything else about it —
   tracking, and the gap down to the copy — matches the section headings, so the
   only thing that changes between bands is the size. */
.twyce-reveal .twyce-opener-heading {
	max-width: 24ch;
	line-height: 1.12;
}

/* The line that hands off to the three cards. */
.twyce-band-opener .twyce-lead {
	max-width: none;
	padding-top: clamp(22px, 3vh, 32px);
	border-top: 1px solid var(--twyce-line);
	color: var(--twyce-text-strong);
}

/* ---- Principle cards ---- */

/* These sit on the white band, so unlike the diagram cards they take the tint
   — otherwise they are white on white and the row reads as loose paragraphs
   rather than three things. */
.twyce-principle-row > .wp-block-column {
	min-width: 0;
}

.twyce-principle {
	height: 100%;
	padding: 28px;
}

.twyce-principle::before {
	content: "";
	display: block;
	width: 46px;
	height: 46px;
	margin-bottom: 16px;
	background-color: var(--twyce-science-blue);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

.twyce-principle :is(h2, h3) {
	margin-bottom: 10px;
}

.twyce-principle--sustainability::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.14 5.87 A8 8 0 1 1 9.26 4.48'/%3E%3Cpath d='M10.39 4.07 L7.84 7.02 L6.54 3.44 Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.14 5.87 A8 8 0 1 1 9.26 4.48'/%3E%3Cpath d='M10.39 4.07 L7.84 7.02 L6.54 3.44 Z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.twyce-principle--accessibility::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6' stroke-dasharray='3 3.1'/%3E%3Cpath d='M3.6 20.4 L8.2 15.8'/%3E%3Cpath d='M10.25 13.75 L9.11 17.43 L6.57 14.89 Z' fill='%23000' stroke='none'/%3E%3Ccircle cx='12.7' cy='11.3' r='2.7' fill='%23000' stroke='none'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6' stroke-dasharray='3 3.1'/%3E%3Cpath d='M3.6 20.4 L8.2 15.8'/%3E%3Cpath d='M10.25 13.75 L9.11 17.43 L6.57 14.89 Z' fill='%23000' stroke='none'/%3E%3Ccircle cx='12.7' cy='11.3' r='2.7' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

.twyce-principle--safety::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 L19.8 5.9 V12.1 C19.8 16.4 16.6 20 12 21.3 C7.4 20 4.2 16.4 4.2 12.1 V5.9 Z'/%3E%3Cpolyline points='8.9,12.2 11,14.3 15.1,10.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 L19.8 5.9 V12.1 C19.8 16.4 16.6 20 12 21.3 C7.4 20 4.2 16.4 4.2 12.1 V5.9 Z'/%3E%3Cpolyline points='8.9,12.2 11,14.3 15.1,10.2'/%3E%3C/svg%3E");
}

/* Drawn artwork in a text/image band. Transparent PNGs, so no photo backdrop
   and no crop — the illustration is shown whole against the band. */
.twyce-reveal .wp-block-columns .wp-block-column > figure.wp-block-image.twyce-band-artwork {
	background: transparent;
	aspect-ratio: auto;
	overflow: visible;
}

.twyce-reveal .wp-block-columns .wp-block-column > figure.wp-block-image.twyce-band-artwork img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* ---- Publications ---- */

/* Standing note before the first paper is added. Quiet, but deliberate — the
   section is part of the page, not a placeholder waiting to be filled. */
.twyce-publications__pending {
	margin: 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--twyce-line);
	color: var(--twyce-text-muted);
	font-size: 15px;
}


.twyce-publications,
.entry-content ul.twyce-publications,
.single-content ul.twyce-publications {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--twyce-line);
}

.twyce-publications__item,
.entry-content .twyce-publications > .twyce-publications__item {
	/* The theme's prose list indent would set the rows in from the heading. */
	margin: 0;
	border-bottom: 1px solid var(--twyce-line);
}

.twyce-publications__link {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 20px 4px;
	color: inherit;
	text-decoration: none;
	transition: background 160ms ease;
}

a.twyce-publications__link:hover {
	background: color-mix(in srgb, var(--twyce-deep-blue) 4%, transparent);
}

a.twyce-publications__link:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--twyce-science-blue) 55%, transparent);
	outline-offset: -2px;
}

/* Type chip, coloured like the pipeline badges so the two read as one family. */
.twyce-publications__kind {
	flex-shrink: 0;
	min-width: 82px;
	padding: 3px 9px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.twyce-publications__kind--publication {
	background: color-mix(in srgb, var(--twyce-deep-blue) 14%, transparent);
	color: var(--twyce-deep-blue);
}

.twyce-publications__kind--poster {
	background: color-mix(in srgb, var(--twyce-signal-orange) 16%, transparent);
	color: #9c3a02;
}

.twyce-publications__body {
	display: block;
	min-width: 0;
}

.twyce-publications__title {
	display: block;
	color: var(--twyce-text-strong);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
}

a.twyce-publications__link:hover .twyce-publications__title {
	color: var(--twyce-science-blue);
}

/* Optional explainer under a citation — a sentence on why the paper matters,
   set apart from the citation line above it. */
.twyce-publications__summary {
	display: block;
	max-width: 78ch;
	margin-top: 8px;
	color: var(--twyce-text);
	font-size: 14px;
	line-height: 1.6;
}

.twyce-publications__meta {
	display: block;
	margin-top: 5px;
	color: var(--twyce-text);
	font-size: 13px;
	line-height: 1.5;
}

@media (max-width: 640px) {
	.twyce-publications__link {
		flex-direction: column;
		gap: 10px;
	}
}

/* ==========================================================================
   14. Signal combination panels (homepage)
   ========================================================================== */

/* Two panels reading as an equation. The constant Signal 2 panel carries the
   hero's Signal Orange; the cycling Signal 1 panel moves through the same three
   blues the hero activates its cells with, so the section echoes the animation
   above it without repeating it. */
.twyce-combo {
	--twyce-combo-halo: var(--twyce-signal-orange);
}

.twyce-combo__stage {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: clamp(10px, 1.6vw, 22px);
}

/* The plus sits on the panels' centre line rather than being stretched by the
   grid alongside them. */
.twyce-combo__stage > .twyce-combo__plus {
	align-self: center;
}

/* Signal 1 + Signal 2 = Result */
.twyce-combo--with-result .twyce-combo__stage {
	grid-template-columns: 1fr auto 1fr auto 1fr;
}

.twyce-combo__panel--result {
	--twyce-combo-halo: var(--twyce-deep-blue);
}

.twyce-combo__panel--result .twyce-combo__frame {
	background:
		radial-gradient(120% 80% at 50% 100%, color-mix(in srgb, var(--twyce-science-blue) 34%, transparent), transparent 70%),
		var(--twyce-deep-navy);
}

.twyce-combo__panel--result .twyce-combo__frame::after {
	content: "";
	display: block;
	height: 21px;
}

.twyce-combo__panel--result .twyce-combo__title {
	color: var(--twyce-horizon-blue);
}

.twyce-combo__panel--result .twyce-combo__role {
	color: var(--twyce-white);
	font-weight: 700;
}

.twyce-combo__panel--result .twyce-combo__caption {
	color: var(--twyce-on-dark);
}

/* The result's outcomes take the place the artwork has in the two signal
   panels, centred in the remaining height of the card. */
.twyce-combo .twyce-combo__outcomes {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.twyce-combo .twyce-combo__outcomes li {
	position: relative;
	margin: 0;
	padding: 11px 0 11px 18px;
	color: var(--twyce-white);
	font-size: 14px;
	line-height: 1.4;
}

.twyce-combo__outcomes li + li {
	border-top: 1px solid color-mix(in srgb, var(--twyce-light-blue) 18%, transparent);
}

.twyce-combo__outcomes li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(11px + 0.7em - 3.5px);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--twyce-horizon-blue);
	box-shadow: 0 0 8px 1px color-mix(in srgb, var(--twyce-horizon-blue) 60%, transparent);
}

/* Only one panel has an option indicator; the other reserves the same space so
   the two artworks stay on the same baseline. */
.twyce-combo__panel--constant .twyce-combo__frame::after {
	content: "";
	display: block;
	height: 21px;
}

.twyce-combo__panel {
	position: relative;
	display: flex;
	isolation: isolate;
}

.twyce-combo__panel--halo-light   { --twyce-combo-halo: var(--twyce-horizon-blue); }
.twyce-combo__panel--halo-horizon { --twyce-combo-halo: var(--twyce-science-blue); }
.twyce-combo__panel--halo-science { --twyce-combo-halo: var(--twyce-deep-blue); }

/* The halo sits behind the panel and spills past its corners, the way the
   hero's corner glow spills into frame. */
.twyce-combo__halo {
	position: absolute;
	inset: -26%;
	z-index: -1;
	border-radius: 50%;
	/* The frame covers the middle of this box, so the gradient peaks out where
	   the panel's edge falls — otherwise the glow is invisible behind the card. */
	background: radial-gradient(
		circle at 50% 50%,
		color-mix(in srgb, var(--twyce-combo-halo) 40%, transparent) 26%,
		color-mix(in srgb, var(--twyce-combo-halo) 27%, transparent) 48%,
		color-mix(in srgb, var(--twyce-combo-halo) 8%, transparent) 68%,
		transparent 86%
	);
	filter: blur(22px);
	transition: background 900ms var(--twyce-ease);
}

.twyce-combo__frame {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: clamp(16px, 1.7vw, 24px);
	background: var(--twyce-white);
	border-radius: 18px;
	box-shadow: 0 2px 18px color-mix(in srgb, var(--twyce-deep-navy) 8%, transparent);
}

.twyce-combo__title {
	margin: 0 0 4px;
	color: var(--twyce-science-blue);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* What the signal does, under its label: "Ignition by tumor targeting". */
.twyce-combo__role {
	margin: -2px 0 4px;
	color: var(--global-palette5);
	font-size: 13px;
	line-height: 1.35;
}

/* The slides are stacked so the panel keeps one height while they cross-fade. */
.twyce-combo__slides {
	display: grid;
	flex: 1;
}

.twyce-combo__slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 620ms var(--twyce-ease), visibility 620ms;
}

.twyce-combo__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.twyce-combo__art {
	flex: 1;
	width: 100%;
	min-height: 0;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.twyce-combo__caption {
	margin-top: 8px;
	color: var(--twyce-text);
	font-size: 12.5px;
	line-height: 1.4;
	text-align: center;
}

.twyce-combo__plus {
	color: var(--twyce-science-blue);
	font-size: clamp(20px, 2.2vw, 30px);
	font-weight: 700;
	line-height: 1;
}

/* ---- Option indicator ---- */

.twyce-combo__dots {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 12px;
}

.twyce-combo__dot {
	appearance: none;
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid var(--twyce-combo-halo);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background 300ms ease, border-color 900ms var(--twyce-ease);
}

.twyce-combo__dot.is-active {
	background: var(--twyce-combo-halo);
}

.twyce-combo__dot:focus-visible {
	outline: 2px solid var(--twyce-science-blue);
	outline-offset: 2px;
}

/* The panels are the point of the section, so they stay side by side and simply
   get smaller — stacking them would break the equation they spell out. */
@media (max-width: 600px) {
	.twyce-combo__stage {
		gap: 6px;
	}

	/* Three panels are too narrow side by side on a phone: the result drops
	   to its own row under the two signals. */
	.twyce-combo--with-result .twyce-combo__stage {
		grid-template-columns: 1fr auto 1fr;
		row-gap: 10px;
	}

	.twyce-combo--with-result .twyce-combo__equals,
	.twyce-combo--with-result .twyce-combo__panel--result {
		grid-column: 1 / -1;
		justify-self: center;
	}

	.twyce-combo--with-result .twyce-combo__panel--result {
		width: min(62%, 240px);
	}

	.twyce-combo__frame {
		padding: 12px;
		border-radius: 14px;
	}

	.twyce-combo__caption {
		font-size: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.twyce-combo__slide,
	.twyce-combo__halo {
		transition: none;
	}
}

/* Lead-in term, then the sentence it introduces. */
/* The theme's prose rule (`.single-content ul { padding-left: 2em }`) carries
   more weight than a single class, and this list is not prose — it sits flush
   with the paragraph above it. */
.twyce-point-list,
.single-content .twyce-point-list,
.entry-content .twyce-point-list {
	margin: 18px 0 0;
	padding-left: 0;
	list-style: none;
}

/* No hanging indent: the points sit flush with the paragraph above them, and
   the bold lead-in does the work a bullet would. */
.twyce-point-list li {
	margin: 0 0 14px;
	padding-left: 0;
	color: var(--twyce-text);
	font-size: 14.5px;
	line-height: 1.6;
}

.twyce-point-list strong {
	display: block;
	color: var(--twyce-text-strong);
	font-weight: 700;
}

/* ---- Home: Science & platform, stacked ----
   Headline and intro, the three panels across the width, then the three
   points as columns, then the calls to action — one reading line down. */

/* A little less vertical air than the other bands, so the whole section —
   intro, panels and copy — fits one screen on a laptop. Same weight as the
   band rhythm rule (section 2) plus one class. */
.entry-content .wp-block-group.twyce-reveal.has-background.twyce-platform-band--stacked,
.entry-content .wp-block-group.is-style-twyce-reveal.has-background.twyce-platform-band--stacked {
	padding-block: clamp(40px, 4.8vh, 56px);
}

/* Full content width, like every other band: headline, then the intro under
   it, left-aligned. The intro keeps a reading measure rather than the full rail. */
.twyce-platform-band--stacked .twyce-platform-intro h2 {
	margin: 0 0 12px;
}

/* Out-ranks the band's 680px paragraph measure (.twyce-reveal > .wp-block-group p),
   which broke the intro after a few words on wide screens. */
.twyce-reveal.twyce-platform-band--stacked > .twyce-platform-intro p,
.is-style-twyce-reveal.twyce-platform-band--stacked > .twyce-platform-intro p {
	max-width: 900px;
	margin: 0;
	font-size: var(--twyce-type-sm);
	line-height: 1.6;
	text-wrap: balance;
}

.twyce-platform-band--stacked .twyce-platform-combo {
	margin-top: clamp(24px, 2.4vw, 32px);
	margin-bottom: clamp(24px, 2.4vw, 32px);
}

.twyce-platform-band--stacked .twyce-platform-copy {
	padding-top: clamp(28px, 3vw, 36px);
	border-top: 1px solid var(--twyce-line-strong);
}

.twyce-platform-band--stacked .twyce-platform-copy__lead h3 {
	margin: 0 0 12px;
	font-size: var(--twyce-type-md);
}

.twyce-platform-band--stacked .twyce-platform-copy__lead-text {
	margin: 0;
	color: var(--twyce-text);
	font-size: 16.5px;
	line-height: 1.6;
}

.twyce-platform-band--stacked .twyce-platform-copy__lead .twyce-cta-row {
	margin-top: 28px;
}

.twyce-platform-band--stacked .twyce-point-list--stacked {
	margin: 0;
}

.twyce-platform-band--stacked .twyce-point-list--stacked li {
	margin: 0;
	padding: 2px 0 13px;
	line-height: 1.55;
}

.twyce-platform-band--stacked .twyce-point-list--stacked li + li {
	padding-top: 13px;
	border-top: 1px solid var(--twyce-line);
}

.twyce-platform-band--stacked .twyce-point-list--stacked strong {
	margin-bottom: 4px;
	font-size: 16px;
	line-height: 1.35;
}

/* A point whose title is a link (Partnering) reads as a heading with the
   site's arrow, not as an underlined body link. */
.twyce-point-list strong a {
	color: var(--twyce-science-blue);
	text-decoration: none;
}

.twyce-point-list strong a::after {
	content: " \203A";
}

.twyce-point-list strong a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Short laptop screens (around 800px tall): tighten so the section still
   fits one screen. */
@media (min-width: 782px) and (max-height: 860px) {
	.entry-content .wp-block-group.twyce-reveal.has-background.twyce-platform-band--stacked,
	.entry-content .wp-block-group.is-style-twyce-reveal.has-background.twyce-platform-band--stacked {
		padding-block: 28px;
	}

	.twyce-platform-band--stacked .twyce-combo__art {
		height: 96px;
	}

	.twyce-platform-band--stacked .twyce-platform-combo {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.twyce-platform-band--stacked .twyce-platform-copy {
		padding-top: 24px;
	}
}

/* Once the columns stack, the calls to action move to the end of the
   section instead of sitting between the lead and the two points. */
@media (max-width: 781px) {
	.twyce-platform-band--stacked .twyce-platform-copy {
		display: flex;
		flex-direction: column;
	}

	.twyce-platform-band--stacked .twyce-platform-copy__lead {
		display: contents;
	}

	.twyce-platform-band--stacked .twyce-platform-copy__lead .twyce-cta-row {
		order: 3;
		margin-top: 4px;
	}

	.twyce-platform-band--stacked .twyce-platform-copy > .wp-block-column:not(.twyce-platform-copy__lead) {
		order: 2;
	}

	.twyce-platform-band--stacked .twyce-platform-copy__lead h3 {
		margin-bottom: -20px;
	}
}

/* Full-width panels are larger than the side-by-side ones, so their type
   steps up with them. */
@media (min-width: 601px) {
	.twyce-platform-band--stacked .twyce-combo__art {
		flex: none;
		height: clamp(104px, 8.6vw, 128px);
		aspect-ratio: auto;
	}
	.twyce-platform-band--stacked .twyce-combo__title { font-size: 12.5px; }
	.twyce-platform-band--stacked .twyce-combo__role { font-size: 15px; }
	.twyce-platform-band--stacked .twyce-combo__caption { font-size: 14px; }
}

@media (max-width: 600px) {
	.twyce-platform-band--stacked .twyce-combo--with-result .twyce-combo__panel--result {
		width: min(100%, 320px);
	}
}

/* ---- Science: the blinker in a diagram card's tile ----
   "One BiCo, multiple combinations" keeps its card; the Signal 1 + Signal 2
   logic of the homepage blinker takes the tile the static G05 graphic had.
   Compact: no panel boxes and no glows. Instead one thin frame drawn like the
   schematics beside it (same Horizon-tint line, same corners, same landscape
   proportion), so the artwork gets the room. Tile geometry comes from the
   shared .twyce-diagram-card tile rule. */
.twyce-diagram-blinker .twyce-combo {
	width: 100%;
	aspect-ratio: 946 / 878;
	display: flex;
	align-items: stretch;
	border: 2px solid #c5d6fb;
	border-radius: 8px;
}

/* Every level gives up its minimum content height, so in a fixed frame the
   artwork shrinks to fit rather than pushing the dots out of it. */
.twyce-diagram-blinker .twyce-combo__stage {
	flex: 1;
	min-height: 0;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: minmax(0, 1fr);
	gap: 4px;
	padding: 16px 14px 12px;
}

.twyce-diagram-blinker .twyce-combo__panel,
.twyce-diagram-blinker .twyce-combo__frame,
.twyce-diagram-blinker .twyce-combo__slides,
.twyce-diagram-blinker .twyce-combo__slide {
	min-height: 0;
}


.twyce-diagram-blinker .twyce-combo__slides {
	grid-template-rows: minmax(0, 1fr);
}

.twyce-diagram-blinker .twyce-combo__halo,
.twyce-diagram-blinker .twyce-combo__panel--constant .twyce-combo__frame::after {
	display: none;
}

.twyce-diagram-blinker .twyce-combo__frame {
	padding: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
}

/* Inside a card the panel labels are paragraphs within .wp-block-columns, so
   the band's paragraph margins, measure and the card's flex-grow would apply;
   pinned back to the panel's own spacing. */
.twyce-reveal .twyce-diagram-card .twyce-diagram-blinker p.twyce-combo__title,
.twyce-reveal .twyce-diagram-card .twyce-diagram-blinker p.twyce-combo__role {
	flex: none;
	max-width: none;
	margin: 0;
	text-align: center;
}

.twyce-reveal .twyce-diagram-card .twyce-diagram-blinker p.twyce-combo__title {
	font-size: 10.5px;
	line-height: 1.3;
}

.twyce-reveal .twyce-diagram-card .twyce-diagram-blinker p.twyce-combo__role {
	min-height: 2.7em; /* two lines in both columns, so the artwork lines up */
	margin-top: 2px;
	font-size: 11.5px;
	line-height: 1.35;
}

.twyce-diagram-blinker .twyce-combo__slide {
	justify-content: center;
}

.twyce-diagram-blinker .twyce-combo__art {
	flex: 1;
	min-height: 0;
	height: auto;
	max-height: 170px;
	aspect-ratio: auto;
	margin: 6px 0 0;
}

.twyce-diagram-blinker .twyce-combo__caption {
	min-height: 2.8em;
	margin-top: 6px;
	font-size: 11.5px;
	line-height: 1.4;
	text-wrap: balance;
}

.twyce-diagram-blinker .twyce-combo__dots {
	margin-top: 4px;
}

.twyce-diagram-blinker .twyce-combo__plus {
	font-size: 22px;
}

/* The constant column reserves the dots' row too, so both captions sit level. */
.twyce-diagram-blinker .twyce-combo__panel--constant .twyce-combo__frame {
	padding-bottom: 13px;
}

.twyce-nowrap {
	white-space: nowrap;
}