/**
 * AMSIS GENESIS — component styles.
 *
 * Design tokens (colour, type, spacing) live in theme.json and reach this file
 * as --wp--preset--* variables. Nothing here hard-codes a brand colour, so a
 * change in Appearance → Editor → Styles propagates everywhere.
 *
 * Sections:
 *   1. Local variables & base
 *   2. Header / navigation
 *   3. Dark sections
 *   4. Block style variations
 *   5. Section components (hero, stats, trust bar, partners)
 *   6. Content type cards (events, press, blog, use cases, testimonials)
 *   7. Utilities
 *   8. Motion & print
 */

/* ============================================================
   1. LOCAL VARIABLES & BASE
   ============================================================ */
:root {
	--amsis-radius-sm: 6px;
	--amsis-radius: 12px;
	--amsis-radius-lg: 16px;
	--amsis-border: 1px solid var(--wp--preset--color--line);
	--amsis-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	/* How tall the bar is at least. This is an input: only the header's own
	   min-height reads it. 88px rather than 76px because the header carries
	   the claim lockup, and "Confidence in every Layer" is unreadable below
	   about 56px of total logo height. */
	--amsis-header-min: 88px;

	/* How tall the bar actually turned out. This is an output: site.js
	   overwrites it with the measured height on load and on resize, and the
	   things that have to clear the header — the sticky jump bar, anchor
	   scroll offsets — read it.

	   Keep the two apart. Sizing the header from the value site.js writes back
	   makes the bar its own input: each resize measured a pixel more than the
	   last (the border is in the measurement but not in min-height) and the
	   bar walked down the page. */
	--amsis-header-height: 88px;

	--amsis-article-measure: 1200px;

	/* The page gutter. It matches the root padding theme.json gives the block
	   editor, so a section built in PHP lines up with one built from blocks.
	   Seven rules referenced this and none defined it; the two without a
	   fallback were dropping their padding declaration altogether. */
	--amsis-gutter: var(--wp--preset--spacing--40, 2rem);
}

@media (max-width: 600px) {
	:root { --amsis-gutter: var(--wp--preset--spacing--30, 1.5rem); }
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--amsis-header-height) + 16px);
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* clip, not hidden. `overflow-x: hidden` makes the body a scroll container,
	   and a sticky header inside a scroll container sticks to that container
	   rather than the viewport — which is to say, it does not stick at all.
	   `clip` prevents the same sideways overflow without that side effect. */
	overflow-x: clip;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, textarea, select):focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--orange);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Skip link — WordPress prints this automatically on block themes. */
.skip-link:focus,
.amsis-skip-link:focus {
	position: fixed;
	z-index: 100000;
	top: 12px;
	left: 12px;
	padding: 12px 20px;
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
	border-radius: var(--amsis-radius-sm);
	text-decoration: none;
}

/* ============================================================
   2. HEADER / NAVIGATION
   ============================================================ */
/* WordPress wraps a template part in an element of its own, and that wrapper is
   only as tall as the header inside it. A sticky element can travel no further
   than its parent's box, so the header had nowhere to stick. Collapsing the
   wrapper out of the box tree makes .wp-site-blocks the header's parent — the
   full height of the page. The inner <header> keeps the landmark. */
header.wp-block-template-part {
	display: contents;
}

.amsis-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--wp--preset--color--white);
	border-bottom: var(--amsis-border);
	transition: border-color var(--amsis-transition);

	/* The frosted layer is painted by ::before, which needs somewhere to sit. */
	isolation: isolate;
}

/* Once the page has moved, the bar turns frosted rather than solid: the content
   passing underneath stays faintly visible, so the header reads as floating
   over the page instead of cutting a white band across it.

   The frost lives on a pseudo-element, never on the header itself. An element
   with backdrop-filter becomes the containing block for its fixed-position
   descendants — and the mobile menu overlay is fixed. Put the filter on the
   header and the overlay is trapped inside the bar, opening as a 77px sliver
   instead of a full screen. */
.amsis-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: var(--wp--preset--color--white);
	transition: opacity var(--amsis-transition);
	pointer-events: none;
}

.amsis-header.is-scrolled::before {
	opacity: 1;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	box-shadow: 0 2px 24px rgba(0, 25, 50, 0.1);
}

/* Where a browser cannot blur, fall back to something nearly opaque — a
   translucent bar with no blur behind it is unreadable over busy content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.amsis-header.is-scrolled::before {
		background: rgba(255, 255, 255, 0.96);
	}
}

/* On a page that opens with the video hero the header is taken out of the flow
   entirely, so the footage starts at the very top of the screen and runs behind
   the bar. Pulling it up with a negative margin instead left a sliver of page
   showing above the hero — the block gap between top-level blocks ate part of
   the offset — and the logo sat in that sliver, white on white.

   The body class comes from PHP (amsis_genesis_hero_body_class), not a :has()
   selector: these rules combine with .is-scrolled, which JavaScript toggles,
   and a :has() rule combined with a runtime class change is not reliably
   re-evaluated. */
.amsis-has-hero .amsis-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
	border-bottom-color: transparent;
}

.amsis-has-hero .amsis-header:not(.is-scrolled) {
	border-bottom-color: transparent;
}

/* Taking the header out of the flow is not quite enough: it is still a DOM
   sibling, so WordPress's block gap keeps pushing the next block down and
   leaves a strip of page above the hero. Close that gap on hero pages. */
.amsis-has-hero header.wp-block-template-part + * {
	margin-block-start: 0;
}

/* The same block gap lands between the last section of a page and the
   footer template part, on every page — a stray light strip between
   whatever the page ends on (often a dark contact band) and the dark
   footer beneath it. Always close it. */
main + footer.wp-block-template-part {
	margin-block-start: 0;
}

/* And the same gap again between every pair of full-bleed sections. It is
   invisible where two light sections meet and obvious where two dark ones do
   — a 24px white seam across the page. Sections carry their own 100px of
   padding, so they are meant to butt together and the gap has nothing left to
   contribute. Closing it here rather than boundary by boundary. */
.entry-content > .alignfull {
	margin-block-start: 0;
}

/* ---- Logo and burger colour -----------------------------------------
   The same Site Logo block appears in the header and in the footer, but they
   sit on opposite backgrounds, so each gets its own rule rather than sharing
   one. Whichever logo file is uploaded — midnight, turquoise or white — these
   force the version the background needs, so the mark is never invisible.

   `brightness(0)` flattens the artwork to black whatever colour it started
   as; `invert(1)` then makes it white. Together they are a reliable "make
   this mark white" that does not care which variant was uploaded. */

/* Header, over the dark hero: white. */
.amsis-has-hero .amsis-header:not(.is-scrolled) .wp-block-site-logo img,
.amsis-has-hero .amsis-header:not(.is-scrolled) .amsis-logo {
	filter: brightness(0) invert(1);
}

/* Header, over the light frosted bar, and on every page without a hero:
   the logo's own colours. */
.amsis-header.is-scrolled .wp-block-site-logo img,
.amsis-header.is-scrolled .amsis-logo,
body:not(.amsis-has-hero) .amsis-header .wp-block-site-logo img,
body:not(.amsis-has-hero) .amsis-header .amsis-logo {
	filter: none;
}

/* Footer, always on midnight: white, regardless of the file uploaded. */
.amsis-footer .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

/* The burger follows the same logic as the logo beside it. */
.amsis-has-hero .amsis-header:not(.is-scrolled) .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--white);
}

.amsis-has-hero .amsis-header:not(.is-scrolled) .wp-block-navigation__responsive-container-open:hover {
	background: rgba(255, 255, 255, 0.12);
}

.amsis-header.is-scrolled .wp-block-navigation__responsive-container-open,
body:not(.amsis-has-hero) .amsis-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--midnight);
}

/* The logo is a link; give it a focus ring that shows on either background. */
.amsis-header .wp-block-site-logo a:focus-visible,
.amsis-footer .wp-block-site-logo a:focus-visible,
.amsis-header__logo:focus-visible {
	outline: 3px solid var(--wp--preset--color--orange);
	outline-offset: 4px;
	border-radius: 3px;
}

/* Dropdown arrow, so a submenu reads as one before it is opened. */
.amsis-header .wp-block-navigation-submenu__toggle svg,
.amsis-header .wp-block-navigation__submenu-icon svg {
	width: 10px;
	height: 10px;
	opacity: 0.5;
}

/* Footer ------------------------------------------------------------- */
.amsis-footer__grid {
	align-items: flex-start;
}

.amsis-footer__links {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.amsis-footer__links li {
	margin-bottom: 0.6rem;
}

/* Footer links stay one colour and one weight. A footer is a directory, not a
   place to draw the eye — the current-page and hover tints were making it look
   like several things were selected at once. */
.amsis-footer__links a,
.amsis-footer__links a:hover,
.amsis-footer__links a:focus,
.amsis-footer__links a:visited,
.amsis-footer__links a[aria-current] {
	color: var(--wp--preset--color--white);
	font-weight: 400;
	text-decoration: none;
}

/* Keyboard users still get a clear focus ring. */
.amsis-footer__links a:focus-visible {
	outline: 2px solid var(--wp--preset--color--turquoise);
	outline-offset: 3px;
	border-radius: 2px;
}

.amsis-footer__bottom {
	padding-top: 0.5rem;
	gap: 1rem;
}

.amsis-footer__bottom p {
	color: var(--wp--preset--color--slate);
	margin: 0;
}

.amsis-footer__bottom a {
	text-decoration: none;
	color: var(--wp--preset--color--slate-light);
}

.amsis-footer__bottom a:hover {
	color: var(--wp--preset--color--turquoise);
}

/* Six columns is a lot on a laptop — let them wrap rather than crush. */
@media (max-width: 1100px) {
	.amsis-footer__grid {
		flex-wrap: wrap !important;
	}

	.amsis-footer__grid > .wp-block-column {
		flex-basis: 30% !important;
		flex-grow: 1;
	}
}

@media (max-width: 600px) {
	.amsis-footer__grid > .wp-block-column {
		flex-basis: 100% !important;
	}

	.amsis-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}





/* ============================================================
   PAGE HERO BACKDROP & APPLICATION IMAGES
   ============================================================ */
.amsis-page-hero {
	position: relative;
	isolation: isolate;
}

.amsis-hero-backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	/* The hero is a constrained group, so WordPress caps every unaligned child
	   at the 760px content measure — absolutely positioned ones included. That
	   left the video running as a narrow strip down the middle of the band. */
	max-width: none;
	width: auto;
	margin: 0;
}

.amsis-hero-backdrop__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* The same diagonal scrim the homepage hero uses, so a headline stays
   readable over whatever footage an editor chooses. */
.amsis-hero-backdrop__scrim {
	position: absolute;
	inset: 0;
	/* Vertical rather than diagonal: the headline here is a centred column
	   spanning roughly 22%-78% of the width, so the old left-to-right ramp put
	   its darkest point (0.92) on the empty left margin and its lightest (0.38)
	   under the end of the headline. It also left only 8% of the footage
	   visible at the left edge, which is why the hero read as a flat band
	   rather than a video. */
	background:
		linear-gradient(to bottom, rgba(0, 25, 50, 0.42) 0%, rgba(0, 25, 50, 0.66) 55%, rgba(0, 25, 50, 0.78) 100%);
}

/* Local contrast for the text itself, so the scrim above it does not have to
   be heavy enough to survive the brightest frame of whatever footage an editor
   picks. A halo darkens what is directly behind the glyphs and nothing else. */
.amsis-page-hero:has(.amsis-hero-backdrop) h1,
.amsis-page-hero:has(.amsis-hero-backdrop) .is-style-amsis-lead,
.amsis-page-hero:has(.amsis-hero-backdrop) .is-style-amsis-eyebrow {
	text-shadow: 0 1px 2px rgba(0, 25, 50, 0.75), 0 2px 20px rgba(0, 25, 50, 0.6);
}

/* Once a backdrop is present the hero is dark, so the text turns out white.
   The element is there at render time, so :has() is safe here. */
.amsis-page-hero:has(.amsis-hero-backdrop) {
	background: var(--wp--preset--color--midnight) !important;
	padding-block: clamp(4rem, 10vw, 8rem);
}

.amsis-page-hero:has(.amsis-hero-backdrop) h1,
.amsis-page-hero:has(.amsis-hero-backdrop) .is-style-amsis-lead {
	color: var(--wp--preset--color--white);
}

.amsis-page-hero:has(.amsis-hero-backdrop) .is-style-amsis-eyebrow {
	color: var(--wp--preset--color--turquoise);
}

/* Reduced motion used to be display:none here, on a hero with no poster frame
   set — which left a flat navy band where the video should be, on every hero
   on the site. The video now stays put and site.js pauses it on its first
   frame, so the picture is there and nothing moves. */

/* The block's own placeholder in the editor. Never on the front end — the
   block returns nothing there — so this is purely an editing aid. */
.amsis-hero-backdrop-empty {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	max-width: 46rem;
	margin-inline: auto;
	padding: 1.25rem 1.5rem;
	border: 2px dashed var(--wp--preset--color--line);
	border-radius: var(--amsis-radius);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.amsis-hero-backdrop-empty strong {
	color: var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--medium);
}

/* The same panel once a video or image has been chosen — solid rather than
   dashed, because this one is reporting a state, not inviting one. Editor
   only: on the live page this block is the layer behind the headline. */
.amsis-hero-backdrop-set {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 46rem;
	margin-inline: auto;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--amsis-radius);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.amsis-hero-backdrop-set__thumb {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 3.25rem;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 6px;
	background: var(--wp--preset--color--mist);
}

.amsis-hero-backdrop-set__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A play triangle, for a video with no poster frame to show. */
.amsis-hero-backdrop-set__icon {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.55rem 0 0.55rem 0.95rem;
	border-color: transparent transparent transparent var(--wp--preset--color--slate);
}

.amsis-hero-backdrop-set__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.amsis-hero-backdrop-set strong {
	color: var(--wp--preset--color--midnight);
	font-size: var(--wp--preset--font-size--medium);
}

/* ---- Application image, beside the words ------------------------------- */
.amsis-application__media figure {
	margin: 0;
}

.amsis-application__media img {
	width: 100%;
	border-radius: var(--amsis-radius);
}

/* A placeholder should look like one — a slot waiting for a picture, not a
   design decision.
   
   Keyed to the placeholder file rather than to the block-style class, because
   the class stays on the figure after an editor replaces the image: the frame
   and tint have to disappear with the file, not linger around the real
   picture. */
.is-style-amsis-placeholder img[src*="placeholders/application.svg"] {
	outline: 2px dashed var(--wp--preset--color--line);
	outline-offset: -2px;
	background: var(--wp--preset--color--mist);
}

/* The instruction underneath goes with it. Keyed to the placeholders folder
   rather than to one filename, so a second placeholder (the software window
   in the "what we do" band) behaves the same way instead of silently losing
   its caption. */
.is-style-amsis-placeholder:not(:has(img[src*="/placeholders/"])) figcaption {
	display: none;
}

/* And it is addressed to whoever fills the page in, not to a visitor: the
   caption is only ever shown to someone who can act on it. */
body:not(.amsis-can-edit) .is-style-amsis-placeholder figcaption {
	display: none;
}

.amsis-application__media figcaption {
	margin-top: 0.6rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--slate);
	text-align: left;
}

@media (max-width: 781px) {
	.amsis-application {
		gap: clamp(1.5rem, 5vw, 2.5rem) !important;
	}
}

/* ============================================================
   FORM CONTROLS
   The global reset does not reach replaced elements in every
   browser, so `width: 100%` on a padded input overflowed its
   grid column and the fields overlapped each other.
   ============================================================ */
input,
select,
textarea,
button {
	box-sizing: border-box;
	max-width: 100%;
	font-family: inherit;
}

textarea {
	resize: vertical;
}


/* ============================================================
   RESOURCES — LISTING AND ARTICLE
   One listing shape and one article shape, shared by the blog
   and the use cases, because from a reader's side they are the
   same two jobs: choose something to read, then read it.
   ============================================================ */

/* ---- Listing head ------------------------------------------------------ */
.amsis-list-head {
	border-bottom: var(--amsis-border);
}

/* ---- Topic filters ----------------------------------------------------- */
.amsis-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.amsis-filters__chip {
	display: inline-block;
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--slate);
	background: var(--wp--preset--color--white);
	transition: color var(--amsis-transition), border-color var(--amsis-transition), background var(--amsis-transition);
}

.amsis-filters__chip:hover {
	color: var(--wp--preset--color--midnight);
	border-color: var(--wp--preset--color--slate-light);
}

.amsis-filters__chip.is-current {
	background: var(--wp--preset--color--midnight);
	border-color: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
}

/* ---- The featured item ------------------------------------------------- */
.amsis-feature {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	border: var(--amsis-border);
	border-radius: var(--amsis-radius);
	overflow: hidden;
	background: var(--wp--preset--color--white);
	text-decoration: none;
	color: inherit;
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
	transition: box-shadow var(--amsis-transition), transform var(--amsis-transition);
}

.amsis-feature:hover {
	box-shadow: 0 24px 60px -30px rgba(0, 25, 50, 0.4);
	transform: translateY(-3px);
}

.amsis-feature__media {
	position: relative;
	min-height: 320px;
	overflow: hidden;
}

.amsis-feature__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s;
}

.amsis-feature:hover .amsis-feature__media img {
	transform: scale(1.04);
}

.amsis-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.75rem, 3.5vw, 3rem);
}

.amsis-feature__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--midnight);
}

.amsis-feature__excerpt {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--slate);
	line-height: 1.7;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- The card grid ----------------------------------------------------- */
.amsis-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.4vw, 2rem);
}

.amsis-card {
	display: flex;
	flex-direction: column;
	border: var(--amsis-border);
	border-radius: var(--amsis-radius);
	overflow: hidden;
	background: var(--wp--preset--color--white);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--amsis-transition), transform var(--amsis-transition);
}

.amsis-card:hover {
	box-shadow: 0 20px 48px -28px rgba(0, 25, 50, 0.4);
	transform: translateY(-3px);
}

.amsis-card__media,
.amsis-feature__media {
	background: var(--wp--preset--color--mist);
}

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

.amsis-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s;
}

.amsis-card:hover .amsis-card__media img {
	transform: scale(1.05);
}

/* The stand-in when a piece has no picture yet. */
.amsis-card__placeholder {
	object-fit: cover;
	opacity: 0.7;
}

.amsis-card__tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	padding: 0.3rem 0.7rem;
	border-radius: 4px;
	background: rgba(0, 25, 50, 0.92);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.625rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.amsis-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem 1.4rem 1.6rem;
}

.amsis-card__meta,
.amsis-feature .amsis-card__meta {
	margin: 0 0 0.65rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.amsis-card__title {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.28;
	color: var(--wp--preset--color--midnight);
}

.amsis-card__excerpt {
	flex: 1;
	margin: 0 0 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	color: var(--wp--preset--color--slate);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.amsis-readmore {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--petrol-deep);
	transition: gap var(--amsis-transition);
}

.amsis-readmore::after {
	content: "\2192";
}

.amsis-card:hover .amsis-readmore,
.amsis-feature:hover .amsis-readmore {
	gap: 0.85rem;
}

@media (max-width: 900px) {
	.amsis-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.amsis-feature { grid-template-columns: 1fr; }
	/* width:100% or the ratio sizes this box from its min-height instead
	   (220 x 16/9 = 391px) and the media blows the 324px track out past the
	   viewport on a phone. With a definite width the ratio sets the height,
	   and min-height only raises it. */
	.amsis-feature__media { min-height: 220px; aspect-ratio: 16 / 9; min-width: 0; width: 100%; }
}

@media (max-width: 600px) {
	.amsis-cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   THE ARTICLE — three columns
   ===================================================================== */
/* The article head shares the grid's measure, so the breadcrumb, kicker and
   headline line up with the left rail beneath rather than floating in the
   narrower prose column. */
.amsis-article > .wp-block-group > .wp-block-group,
.amsis-article > .wp-block-group > .wp-block-post-title,
.amsis-article > .wp-block-group > .wp-block-post-terms,
.amsis-article > .wp-block-group > .wp-block-amsis-use-case-facts {
	max-width: var(--amsis-article-measure);
	margin-inline: auto;
}

.amsis-crumbs p {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--slate);
}

.amsis-crumbs a {
	color: var(--wp--preset--color--slate);
	text-decoration: none;
}

.amsis-crumbs a:hover {
	color: var(--wp--preset--color--petrol);
}

.amsis-article__title {
	max-width: 18ch;
	margin-bottom: 0.75rem;
}

.amsis-article__figure {
	margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

.amsis-article__figure img {
	border-radius: 10px;
	width: 100%;
}

/* The grid is a full-bleed block, so it centres its own content with padding
   rather than a max-width — which is what lets the head above it line up with
   the left rail instead of sitting in the narrower prose measure. */
.amsis-article__grid {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) 280px;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
}

/* Same measure and same centring as the head above it, so the two line up.
   The extra classes are needed because WordPress prints its own alignfull and
   global-padding rules after this stylesheet. */
.amsis-article .amsis-article__grid.has-global-padding {
	max-width: var(--amsis-article-measure);
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 1264px) {
	.amsis-article .amsis-article__grid.has-global-padding {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

.amsis-article__left,
.amsis-article__right {
	position: sticky;
	top: calc(var(--amsis-header-height, 76px) + 1.5rem);
}

/* ---- Case study: the left column is the spec sheet ---------------------
   Title, part data and publication details read as one block, because they
   answer the same question — what is this part, and who says so. Spreading
   them across the full width left the meta orphaned in a narrow column
   underneath a wide headline. */
.amsis-article--case .amsis-article__grid {
	grid-template-columns: 340px minmax(0, 1fr) 260px;
}

.amsis-article--case .amsis-article__left {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.amsis-article--case .amsis-article__kicker {
	margin: 0;
}

.amsis-article--case .amsis-article__title {
	max-width: none;
	margin: 0;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* The part data stacks in the rail rather than running across the page. */
.amsis-article--case .amsis-grid--2 {
	grid-template-columns: 1fr;
	gap: 0.9rem;
}

.amsis-article--case .amsis-grid--2 > div {
	padding-top: 0.9rem;
}

/* The picture belongs with the story, not above the headline. */
.amsis-article__lead-image {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.amsis-article__lead-image img {
	width: 100%;
	border-radius: 10px;
}

@media (max-width: 1080px) {
	.amsis-article--case .amsis-article__grid {
		grid-template-columns: 300px minmax(0, 1fr);
	}

	/* The rail carries the title on a case study, so it cannot be dropped the
	   way a pure meta rail can. */
	.amsis-article--case .amsis-article__left {
		display: flex;
	}
}

@media (max-width: 860px) {
	.amsis-article--case .amsis-article__grid {
		grid-template-columns: 1fr;
	}

	.amsis-article--case .amsis-article__left {
		position: static;
	}

	.amsis-article--case .amsis-grid--2 {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

/* ---- Left rail --------------------------------------------------------- */
.amsis-rail__block {
	padding-bottom: 1.1rem;
	margin-bottom: 1.1rem;
	border-bottom: var(--amsis-border);
}

.amsis-rail__block:last-child {
	border-bottom: 0;
}

.amsis-rail__label {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.625rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.amsis-rail__value {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--midnight);
}

.amsis-share {
	display: flex;
	gap: 0.6rem;
}

.amsis-share a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.15rem;
	height: 2.15rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	color: var(--wp--preset--color--midnight);
	transition: background var(--amsis-transition), color var(--amsis-transition), border-color var(--amsis-transition);
}

.amsis-share a:hover {
	background: var(--wp--preset--color--midnight);
	border-color: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
}

.amsis-share svg {
	width: 0.95rem;
	height: 0.95rem;
}

/* ---- Article body ------------------------------------------------------ */
.amsis-article__body {
	max-width: 70ch;
	font-size: 1.0625rem;
	line-height: 1.8;
}

.amsis-article__body > h2 {
	margin-top: 2.5rem;
}

.amsis-article__body > p {
	margin-bottom: 1.25rem;
}

/* ---- Right rail -------------------------------------------------------- */
.amsis-rail--related .amsis-rail__label {
	padding-bottom: 0.75rem;
	margin-bottom: 1rem;
	border-bottom: var(--amsis-border);
	font-size: 0.6875rem;
}

.amsis-rail--related .amsis-rail__label:not(:first-child) {
	margin-top: 2rem;
}

.amsis-rail__item {
	display: block;
	margin-bottom: 1.15rem;
	padding-bottom: 1.15rem;
	border-bottom: var(--amsis-border);
	text-decoration: none;
	color: inherit;
}

.amsis-rail__item:last-child {
	border-bottom: 0;
}

.amsis-rail__media {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 0.6rem;
	background: var(--wp--preset--color--mist);
}

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

.amsis-rail__tag {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.625rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--petrol-deep);
}

.amsis-rail__title {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.35;
	color: var(--wp--preset--color--midnight);
	transition: color var(--amsis-transition);
}

.amsis-rail__item:hover .amsis-rail__title {
	color: var(--wp--preset--color--petrol);
}

.amsis-rail__detail {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--slate);
}

/* ---- Article FAQ, built from core Details blocks ----------------------- */
.amsis-article-faq {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: var(--amsis-border);
}

.amsis-article-faq .wp-block-details {
	border-bottom: var(--amsis-border);
	padding: 0;
}

.amsis-article-faq summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.1rem 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	list-style: none;
}

.amsis-article-faq summary::-webkit-details-marker { display: none; }

.amsis-article-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--petrol);
	transition: transform var(--amsis-transition);
}

.amsis-article-faq .wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.amsis-article-faq .wp-block-details > :not(summary) {
	padding-bottom: 1.1rem;
	max-width: 68ch;
	color: var(--wp--preset--color--slate);
}

/* ---- Stacking ---------------------------------------------------------- */
@media (max-width: 1080px) {
	.amsis-article__grid {
		grid-template-columns: minmax(0, 1fr) 260px;
	}

	.amsis-article__left {
		display: none;
	}
}

@media (max-width: 860px) {
	.amsis-article__grid {
		grid-template-columns: 1fr;
	}

	.amsis-article__right {
		position: static;
		margin-top: 2rem;
		padding-top: 2rem;
		border-top: var(--amsis-border);
	}

	.amsis-rail--related {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.5rem;
	}

	.amsis-rail--related .amsis-rail__label {
		grid-column: 1 / -1;
		margin-top: 0 !important;
	}

	.amsis-rail__item {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

@media (max-width: 600px) {
	.amsis-rail--related {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   GATED CASE STUDIES
   ============================================================ */
.amsis-gate {
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: var(--wp--preset--color--mist);
	border: var(--amsis-border);
	border-radius: var(--amsis-radius-lg);
}

.amsis-gate--gated {
	background: linear-gradient(160deg, var(--wp--preset--color--midnight), #0a3350);
	border-color: transparent;
	color: var(--wp--preset--color--white);
}

.amsis-gate__head {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.amsis-gate__head h2 {
	margin: 0;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	letter-spacing: -0.02em;
}

.amsis-gate--gated .amsis-gate__head h2 {
	color: var(--wp--preset--color--white);
}

.amsis-gate--gated .is-style-amsis-eyebrow {
	color: var(--wp--preset--color--turquoise);
}

.amsis-gate__teaser {
	margin: 0;
	color: var(--wp--preset--color--slate);
	line-height: 1.6;
}

.amsis-gate--gated .amsis-gate__teaser {
	color: rgba(255, 255, 255, 0.78);
}

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

.amsis-gate__grid p {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
}

.amsis-gate label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.02em;
}

.amsis-gate--gated label {
	color: rgba(255, 255, 255, 0.8);
}

.amsis-gate input[type="text"],
.amsis-gate input[type="email"],
.amsis-gate select {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--amsis-radius-sm);
	background: rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
}

.amsis-gate input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.amsis-gate select option {
	color: var(--wp--preset--color--midnight);
}

.amsis-gate input:focus-visible,
.amsis-gate select:focus-visible {
	outline: 2px solid var(--wp--preset--color--turquoise);
	outline-offset: 1px;
	border-color: transparent;
}

.amsis-gate__consent {
	margin: 1.25rem 0;
}

.amsis-gate__consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
}

.amsis-gate__consent input {
	margin-top: 0.15rem;
	flex: 0 0 auto;
}

.amsis-gate__consent a {
	color: var(--wp--preset--color--turquoise);
}

.amsis-gate__button {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	border: 0;
	border-radius: var(--amsis-radius-sm);
	background: var(--wp--preset--color--turquoise);
	color: var(--wp--preset--color--midnight);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--amsis-transition), color var(--amsis-transition);
}

.amsis-gate__button:hover {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
}

.amsis-gate--open .amsis-gate__button {
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
}

.amsis-gate__error {
	margin: 0 0 1rem;
	padding: 0.7rem 1rem;
	border-radius: var(--amsis-radius-sm);
	background: rgba(255, 102, 0, 0.16);
	color: #ffd9bf;
	font-size: var(--wp--preset--font-size--small);
}

/* The honeypot is for robots, not for people or screen readers. */
.amsis-gate__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 600px) {
	.amsis-gate__grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   SOLUTION / PRODUCT / INDUSTRY PAGE BLOCKS
   ============================================================ */

/* ---- Jump bar under a page hero -------------------------------------- */
/* The block wrapper is only as tall as the bar itself, and a sticky element
   cannot travel outside its own parent — so the wrapper steps out of the way
   and `main` becomes the containing block. Same trap as the header. */
.wp-block-amsis-anchor-nav {
	display: contents;
}

.amsis-anchor-nav {
	position: sticky;
	/* Measured by site.js, not guessed — see stickyHeader(). */
	top: var(--amsis-header-height, 76px);
	z-index: 100;
	background: var(--wp--preset--color--white);
	border-bottom: var(--amsis-border);
	transition: box-shadow var(--amsis-transition);
}

/* A shadow once it has lifted off its section, so it reads as a bar rather
   than as a line of text floating over the content. */
.amsis-anchor-nav.is-stuck {
	box-shadow: 0 6px 20px -14px rgba(0, 25, 50, 0.5);
}

/* The section the bar currently sits in. */
.amsis-anchor-nav a[aria-current="true"] {
	color: var(--wp--preset--color--midnight);
	border-bottom-color: var(--wp--preset--color--turquoise);
}

.amsis-anchor-nav ul {
	display: flex;
	gap: clamp(0.5rem, 2vw, 1.75rem);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 0 var(--amsis-gutter);
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}

.amsis-anchor-nav ul::-webkit-scrollbar { display: none; }

.amsis-anchor-nav a {
	display: inline-block;
	padding: 1rem 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--wp--preset--color--slate);
	border-bottom: 2px solid transparent;
	transition: color var(--amsis-transition), border-color var(--amsis-transition);
}

.amsis-anchor-nav a:hover {
	color: var(--wp--preset--color--midnight);
	border-bottom-color: var(--wp--preset--color--turquoise);
}

/* Anchored sections must clear the header and the jump bar. */
[id] {
	scroll-margin-top: calc(var(--amsis-header-height, 76px) + 4.5rem);
}

/* ---- Points row ------------------------------------------------------- */
.amsis-point h3 {
	margin-bottom: 0.5rem;
}

.amsis-point p {
	color: var(--wp--preset--color--slate);
}

/* ---- Numbered flow line ----------------------------------------------- */
.amsis-flowline {
	gap: 0.5rem !important;
	justify-content: center;
}

.amsis-flowline__step {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.7rem 1.1rem;
	background: var(--wp--preset--color--white);
	border: var(--amsis-border);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
}

.amsis-flowline__n {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--petrol-deep);
	font-variant-numeric: tabular-nums;
}

/* ---- Link grid --------------------------------------------------------- */
.amsis-link-grid {
	display: grid;
	grid-template-columns: repeat(var(--amsis-link-cols, 3), minmax(0, 1fr));
	/* The same gutter as .amsis-grid and .amsis-cards. Product and industry
	   pages show a link grid and a card grid within a screen of each other,
	   and two card rows with different gutters read as a mistake. */
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.amsis-link-card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.4rem 1.5rem;
	background: var(--wp--preset--color--white);
	border: var(--amsis-border);
	border-radius: var(--amsis-radius);
	text-decoration: none;
	color: var(--wp--preset--color--midnight);
	transition: border-color var(--amsis-transition), transform var(--amsis-transition), box-shadow var(--amsis-transition);
}

.amsis-link-card:hover {
	border-color: var(--wp--preset--color--turquoise);
	transform: translateY(-2px);
	box-shadow: 0 18px 32px -22px rgba(0, 25, 50, 0.4);
}

.amsis-link-card__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.amsis-link-card__text {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--slate);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.amsis-link-card__arrow {
	margin-top: auto;
	padding-top: 0.5rem;
	color: var(--wp--preset--color--petrol-deep);
	transition: transform var(--amsis-transition);
}

.amsis-link-card:hover .amsis-link-card__arrow {
	transform: translateX(4px);
}

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

@media (max-width: 600px) {
	.amsis-link-grid { grid-template-columns: 1fr; }
}

/* ---- FAQ accordion ----------------------------------------------------- */
.amsis-faq__heading {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	letter-spacing: -0.02em;
}

.amsis-faq {
	max-width: 62rem;
	margin-inline: auto;
	border-top: var(--amsis-border);
}

.amsis-faq__item {
	border-bottom: var(--amsis-border);
}

.amsis-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.15rem 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
	transition: color var(--amsis-transition);
}

.amsis-faq__q::-webkit-details-marker { display: none; }

.amsis-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: 0.7rem;
	height: 0.7rem;
	margin-top: 0.4rem;
	border-right: 2px solid var(--wp--preset--color--petrol);
	border-bottom: 2px solid var(--wp--preset--color--petrol);
	transform: rotate(45deg);
	transition: transform var(--amsis-transition);
}

.amsis-faq__item[open] .amsis-faq__q::after {
	transform: rotate(-135deg);
}

.amsis-faq__q:hover {
	color: var(--wp--preset--color--petrol);
}

.amsis-faq__a {
	padding: 0 0 1.25rem;
	max-width: 68ch;
}

.amsis-faq__a p {
	margin: 0;
	color: var(--wp--preset--color--slate);
	line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
	.amsis-faq__q::after,
	.amsis-link-card,
	.amsis-link-card__arrow,
	.amsis-nav__chev {
		transition: none;
	}
}

/* ============================================================
   MAIN NAVIGATION
   A horizontal mega-menu above 1060px, the same groups as a
   full-screen overlay below it. Rendered by the AMSIS Core
   plugin so it stays in step with the pages that exist.
   ============================================================ */
/* The header row is a child of a constrained group, so WordPress caps it at
   the 760px content size. That is right for prose and far too narrow for a
   logo plus a five-item mega-menu — the nav simply overflowed to the right of
   a centred 760px box, which is what made the whole site look shoved right.
   The bar gets its own, wider measure. */
.amsis-header > .wp-block-group {
	max-width: min(1560px, 100%);
	margin-inline: auto;
}

.amsis-nav {
	display: flex;
	align-items: center;
	min-width: 0;
}

/* The nav is wide, and a flex item may shrink below its content. Without this
   the logo is squeezed to zero width and simply disappears from the bar. */
.amsis-header .wp-block-site-logo {
	flex: 0 0 auto;
}

.amsis-header__actions {
	min-width: 0;
}

.amsis-nav__panel {
	display: flex;
	align-items: center;
	gap: clamp(0.5rem, 1.5vw, 1.25rem);
}

.amsis-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.25rem, 1vw, 0.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.amsis-nav__item {
	position: relative;
}

.amsis-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.6rem 0.7rem;
	border: 0;
	background: none;
	border-radius: var(--amsis-radius-sm);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--amsis-transition), background var(--amsis-transition);
}

.amsis-nav__chev {
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px);
	opacity: 0.6;
	transition: transform var(--amsis-transition);
}

.amsis-nav__trigger[aria-expanded="true"] .amsis-nav__chev {
	transform: rotate(-135deg) translate(-1px, -1px);
}

/* The dropped panel. */
.amsis-nav__mega {
	position: absolute;
	top: calc(100% + 0.75rem);
	/* The panel sits 12px below the trigger. Without a bridge across that gap
	   the pointer leaves the menu on the way down and the panel closes — which
	   is what made the menu feel like it was snatching itself away. */
	/* Aligned to the trigger's left edge, not centred on it: centring pushed
	   the first group (Lösungen) 54px off the left of the window, where the
	   first item in it could not be read or clicked. The script nudges the
	   panel back inside if a right-hand group would overflow the other way. */
	left: 0;
	z-index: 40;
	min-width: 260px;
	padding: 0.75rem;
	background: var(--wp--preset--color--white);
	border: var(--amsis-border);
	border-radius: var(--amsis-radius);
	box-shadow: 0 24px 48px -20px rgba(0, 25, 50, 0.28);
}

.amsis-nav__mega[hidden] {
	display: none;
}

/* Which group is open, marked on the trigger itself — without it a hover menu
   gives no clue where the panel came from. */
.amsis-nav__item--has-panel {
	position: relative;
}

.amsis-nav__trigger::after {
	content: "";
	position: absolute;
	left: 0.6rem;
	right: 1.4rem;
	bottom: 0.15rem;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--turquoise, #78DEE6);
	opacity: 0;
	transition: opacity var(--amsis-transition);
}

.amsis-nav__trigger[aria-expanded="true"]::after {
	opacity: 1;
}

.amsis-nav__mega::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -0.85rem;
	height: 0.85rem;
}

.amsis-nav__mega-list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.amsis-nav__mega-list a {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.6rem 0.75rem;
	border-radius: var(--amsis-radius-sm);
	text-decoration: none;
	color: var(--wp--preset--color--midnight);
	transition: background var(--amsis-transition);
}

.amsis-nav__mega-list a:hover,
.amsis-nav__mega-list a:focus-visible {
	background: var(--wp--preset--color--mist);
}

.amsis-nav__mega-list a[aria-current="page"] {
	background: var(--wp--preset--color--mist);
	font-weight: 700;
}

.amsis-nav__mega-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
}

.amsis-nav__mega-desc {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	color: var(--wp--preset--color--slate);
}

/* Products carry a description, so that panel is given two columns. */
.amsis-nav__mega-list:has(.amsis-nav__mega-desc) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	min-width: 520px;
}

.amsis-nav__tail {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.amsis-nav__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.25rem;
	border-radius: var(--amsis-radius-sm);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--amsis-transition), color var(--amsis-transition);
}

.amsis-nav__toggle {
	display: none;
	padding: 8px;
	border: 0;
	background: none;
	border-radius: var(--amsis-radius-sm);
	color: inherit;
	cursor: pointer;
}

.amsis-nav__burger,
.amsis-nav__burger::before,
.amsis-nav__burger::after {
	display: block;
	width: 26px;
	height: 2px;
	background: currentColor;
	transition: transform var(--amsis-transition), opacity var(--amsis-transition);
}

.amsis-nav__burger::before,
.amsis-nav__burger::after {
	content: "";
	position: relative;
}

.amsis-nav__burger::before { top: -8px; }
.amsis-nav__burger::after  { top: 6px; }

/* The panel is fixed at z-index 500 and covers the whole screen, including
   the header. Without a stacking context of its own the toggle ends up
   underneath it: the burger visibly becomes an X and nothing happens when you
   press it, which is the "no way out of the mobile menu" bug. */
.amsis-nav.is-open .amsis-nav__toggle {
	position: relative;
	z-index: 501;
}

.amsis-nav.is-open .amsis-nav__burger { background: transparent; }
.amsis-nav.is-open .amsis-nav__burger::before { transform: translateY(8px) rotate(45deg); }
.amsis-nav.is-open .amsis-nav__burger::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---- Colour: the nav follows the background like the logo does -------- */
.amsis-has-hero .amsis-header:not(.is-scrolled) .amsis-nav__link,
.amsis-has-hero .amsis-header:not(.is-scrolled) .amsis-nav__toggle {
	color: var(--wp--preset--color--white);
}

.amsis-has-hero .amsis-header:not(.is-scrolled) .amsis-nav__link:hover {
	background: rgba(255, 255, 255, 0.12);
}

.amsis-has-hero .amsis-header:not(.is-scrolled) .amsis-nav__cta {
	background: transparent;
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.amsis-has-hero .amsis-header:not(.is-scrolled) .amsis-nav__cta:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--midnight);
}

.amsis-header.is-scrolled .amsis-nav__link,
.amsis-header.is-scrolled .amsis-nav__toggle,
body:not(.amsis-has-hero) .amsis-header .amsis-nav__link,
body:not(.amsis-has-hero) .amsis-header .amsis-nav__toggle {
	color: var(--wp--preset--color--midnight);
}

.amsis-header.is-scrolled .amsis-nav__link:hover,
body:not(.amsis-has-hero) .amsis-header .amsis-nav__link:hover {
	background: var(--wp--preset--color--mist);
}

.amsis-header.is-scrolled .amsis-nav__cta,
body:not(.amsis-has-hero) .amsis-header .amsis-nav__cta {
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
}

.amsis-header.is-scrolled .amsis-nav__cta:hover,
body:not(.amsis-has-hero) .amsis-header .amsis-nav__cta:hover {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
}

/* ---- Below 1060px: the whole thing becomes one overlay ---------------- */
@media (max-width: 1059px) {
	.amsis-nav__toggle {
		display: block;
	}

	.amsis-nav__panel {
		position: fixed;
		inset: 0;
		z-index: 500;
		display: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 96px clamp(1.25rem, 6vw, 3rem) 3rem;
		overflow-y: auto;
		background: var(--wp--preset--color--midnight);
		color: var(--wp--preset--color--white);
	}

	.amsis-nav.is-open .amsis-nav__panel {
		display: flex;
	}

	.amsis-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: min(560px, 100%);
		margin-inline: auto;
	}

	.amsis-nav__item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.amsis-nav__link {
		width: 100%;
		justify-content: space-between;
		padding: 1rem 0;
		font-size: clamp(1.15rem, 3vw, 1.4rem);
		font-weight: 700;
		color: var(--wp--preset--color--white);
	}

	.amsis-header .amsis-nav__link,
	.amsis-header.is-scrolled .amsis-nav__link,
	body:not(.amsis-has-hero) .amsis-header .amsis-nav__link {
		color: var(--wp--preset--color--white);
	}

	.amsis-nav__link:hover {
		background: transparent;
		color: var(--wp--preset--color--turquoise);
	}

	.amsis-nav__mega {
		position: static;
		transform: none;
		min-width: 0;
		padding: 0 0 1rem;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.amsis-nav__mega-list,
	.amsis-nav__mega-list:has(.amsis-nav__mega-desc) {
		grid-template-columns: 1fr;
		min-width: 0;
	}

	.amsis-nav__mega-list a,
	.amsis-nav__mega-list a:hover,
	.amsis-nav__mega-list a[aria-current="page"] {
		padding: 0.5rem 0 0.5rem 1rem;
		background: transparent;
		color: rgba(255, 255, 255, 0.82);
	}

	.amsis-nav__mega-list a[aria-current="page"] {
		color: var(--wp--preset--color--white);
		font-weight: 700;
	}

	.amsis-nav__mega-desc {
		color: rgba(255, 255, 255, 0.55);
	}

	.amsis-nav__tail {
		width: min(560px, 100%);
		margin: 2rem auto 0;
		justify-content: space-between;
	}

	.amsis-nav__cta,
	.amsis-header.is-scrolled .amsis-nav__cta,
	body:not(.amsis-has-hero) .amsis-header .amsis-nav__cta {
		background: var(--wp--preset--color--turquoise);
		color: var(--wp--preset--color--midnight);
		box-shadow: none;
		padding: 0.8rem 1.6rem;
		font-size: var(--wp--preset--font-size--small);
	}

	.amsis-nav__panel .amsis-header__lang a,
	.amsis-nav__panel .amsis-header__lang-current {
		color: rgba(255, 255, 255, 0.75);
	}

	.amsis-nav__panel .amsis-header__lang-current {
		color: var(--wp--preset--color--white);
	}
}

/* The page must not scroll behind the open overlay. */
body.amsis-nav-open {
	overflow: hidden;
}

/* ---- Hamburger, at every width ---------------------------------------
   The menu is deliberately always an overlay: a metal-AM audience arrives
   with a specific question, and a full-screen menu answers "where can I go"
   better than a row of nine links squeezed into a bar. */
.amsis-header__actions {
	gap: 0.5rem;
}

/* ---- Contact and language, in the bar itself --------------------------
   Both used to sit at the foot of the open menu, which put the primary
   action one click behind a hamburger. In the bar they are always visible,
   and like the logo beside them they take their colour from whatever is
   behind them rather than from a single fixed rule. */
.amsis-header__lang {
	gap: 0;
	align-items: center;
}

.amsis-header__lang a,
.amsis-header__lang-current {
	display: inline-block;
	padding: 0.35rem 0.45rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--amsis-radius-sm);
	transition: color var(--amsis-transition), background var(--amsis-transition);
}

/* A hairline between DE and EN, so the pair reads as one control. */
.amsis-header__lang > * + *::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.75em;
	background: currentColor;
	opacity: 0.3;
	vertical-align: -0.02em;
}

/* The language you are already reading is stated, not offered — the switcher
   block renders it as a span, so there is nothing to click in the first
   place. */
.amsis-header__lang-current {
	font-weight: 700;
}

/* The Kontakt button is small enough to sit in a 77px bar. */
.amsis-header__cta .wp-block-button__link {
	padding: 0.6rem 1.25rem;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.02em;
}

/* Over the hero: white text, white outline. */
.amsis-has-hero .amsis-header:not(.is-scrolled) .amsis-header__lang a {
	color: rgba(255, 255, 255, 0.75);
}

.amsis-has-hero .amsis-header:not(.is-scrolled) .amsis-header__lang a:hover,
.amsis-has-hero .amsis-header:not(.is-scrolled) .amsis-header__lang-current {
	color: var(--wp--preset--color--white);
}

.amsis-has-hero .amsis-header:not(.is-scrolled) .amsis-header__cta .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.amsis-has-hero .amsis-header:not(.is-scrolled) .amsis-header__cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--midnight);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--white);
}

/* Scrolled, and on every page without a hero: the solid brand button. */
.amsis-header.is-scrolled .amsis-header__lang a,
body:not(.amsis-has-hero) .amsis-header .amsis-header__lang a {
	color: var(--wp--preset--color--slate);
}

.amsis-header.is-scrolled .amsis-header__lang a:hover,
body:not(.amsis-has-hero) .amsis-header .amsis-header__lang a:hover,
.amsis-header.is-scrolled .amsis-header__lang-current,
body:not(.amsis-has-hero) .amsis-header .amsis-header__lang-current {
	color: var(--wp--preset--color--midnight);
}

.amsis-header.is-scrolled .amsis-header__cta .wp-block-button__link,
body:not(.amsis-has-hero) .amsis-header .amsis-header__cta .wp-block-button__link {
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
	box-shadow: none;
}

.amsis-header.is-scrolled .amsis-header__cta .wp-block-button__link:hover,
body:not(.amsis-has-hero) .amsis-header .amsis-header__cta .wp-block-button__link:hover {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
}

/* Nothing in the bar may be squeezed: WordPress lays the row out with flex,
   and without this the Kontakt button collapses to a column of single
   letters on a narrow screen rather than pushing the logo down a size. */
.amsis-header__actions,
.amsis-header__lang,
.amsis-header__cta,
.amsis-header .wp-block-navigation {
	flex-shrink: 0;
}

.amsis-header__cta .wp-block-button__link,
.amsis-header__lang a,
.amsis-header__lang-current {
	white-space: nowrap;
}

/* On a phone the logo gives up the width instead, so contact and language
   both survive — which is the whole point of moving them into the bar. */
@media (max-width: 600px) {
	.amsis-header .wp-block-site-logo {
		width: 112px;
	}

	.amsis-header .wp-block-site-logo img {
		width: 100%;
		height: auto;
	}

	/* Below this width header.php serves the bare wordmark instead of the
	   lockup — the claim cannot be set small enough to fit a phone bar and
	   still be read. The bar comes back down with it: 88px of fixed chrome
	   over an 844px screen is a tenth of the page spent on the logo. */
	:root {
		--amsis-header-min: 64px;
		--amsis-header-height: 64px;
	}

	.amsis-header .amsis-logo {
		height: 34px;
		max-width: 122px;
	}

	.amsis-header__actions {
		gap: 0.25rem;
	}

	.amsis-header .amsis-header__cta .wp-block-button__link {
		padding: 0.5rem 0.85rem;
	}

	.amsis-header .amsis-header__lang a,
	.amsis-header .amsis-header__lang-current {
		padding: 0.35rem 0.3rem;
	}

	.amsis-header .wp-block-navigation__responsive-container-open {
		padding: 6px;
	}
}

/* The language pair used to be hidden on a narrow bar for want of room. It now
   lives inside the full-screen menu, where there is plenty — so hide it only
   where it is still competing for space in the bar itself. */
@media (max-width: 380px) {
	.amsis-header__actions > .amsis-header__lang {
		display: none;
	}
}

.amsis-header .wp-block-navigation__responsive-container-open {
	padding: 10px;
	border-radius: var(--amsis-radius-sm);
	color: var(--wp--preset--color--midnight);
	transition: background var(--amsis-transition);
}

.amsis-header .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--mist);
}

.amsis-header .wp-block-navigation__responsive-container-open svg,
.amsis-header .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* The open overlay. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(2rem, 6vw, 4rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	justify-content: center;
	gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: min(560px, 100%);
	margin-inline: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.85rem 0;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--white);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--turquoise);
	background: transparent;
}

/* ---- Solution cards keep their link at the bottom ---------------------- */
.amsis-solution {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.amsis-solution .wp-block-buttons {
	margin-top: auto;
}

/* Mobile overlay. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--midnight) !important;
	color: var(--wp--preset--color--white);
	padding: 32px 24px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--large);
}

/* ============================================================
   3. DARK SECTIONS
   Add the CSS class "amsis-on-dark" to any group placed on a dark
   background so headings, text and links invert correctly.
   ============================================================ */
.amsis-on-dark,
.amsis-on-dark p,
.amsis-on-dark li,
.amsis-on-dark h1,
.amsis-on-dark h2,
.amsis-on-dark h3,
.amsis-on-dark h4,
.amsis-on-dark h5 {
	color: var(--wp--preset--color--white);
}

.amsis-on-dark :where(p, li):not(.is-style-amsis-eyebrow):not([class*="has-"]) {
	color: var(--wp--preset--color--slate-light);
}

/* On a dark band the links are turquoise, so a turquoise eyebrow read as a
   link that would not respond. The accent colour says "look here" without
   promising anything. */
.amsis-on-dark h6,
.amsis-on-dark .is-style-amsis-eyebrow {
	color: var(--wp--preset--color--orange);
}

.amsis-on-dark a:not(.wp-block-button__link):not(.wp-element-button) {
	color: var(--wp--preset--color--turquoise);
}

.amsis-on-dark a:not(.wp-block-button__link):not(.wp-element-button):hover {
	color: var(--wp--preset--color--orange);
}

/* A hero with a film behind it turns dark without the amsis-on-dark marker,
   so it is named here too — "See it costed" was dark text on a dark film. */
.amsis-on-dark .is-style-amsis-ghost .wp-block-button__link,
.amsis-on-dark .wp-block-button.is-style-amsis-ghost > .wp-element-button,
.amsis-page-hero:has(.amsis-hero-backdrop) .is-style-amsis-ghost .wp-block-button__link {
	color: var(--wp--preset--color--white);
	border-color: rgba(255, 255, 255, 0.28);
}

.amsis-page-hero:has(.amsis-hero-backdrop) .is-style-amsis-ghost .wp-block-button__link { border-color: rgba(255, 255, 255, 0.55); }

.amsis-on-dark .is-style-amsis-ghost .wp-block-button__link:hover,
.amsis-page-hero:has(.amsis-hero-backdrop) .is-style-amsis-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--turquoise);
	background: rgba(120, 222, 230, 0.08);
	color: var(--wp--preset--color--white);
}

/* ---- Hero cover -----------------------------------------------------
   The video is the background of the whole section. Cover already handles
   the object-fit; what is added here is the brand scrim and the layout of
   the words on top of it. */
.amsis-hero {
	position: relative;

	/* A still behind the video. Core stacks the video above the element's own
	   background, so this is invisible when the video plays and becomes the
	   hero when it does not — a missing or blocked file leaves a picture
	   rather than an empty scrim. Set in CSS, not inline, so the Cover block's
	   saved markup stays exactly what WordPress expects. */
	background-image: url("../images/parts/impeller.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* A flat dim is muddy over moving footage — a diagonal gradient keeps the
   left side (where the words are) dark and lets the video breathe on the
   right, the way the mockup's split hero read. */
.amsis-hero .wp-block-cover__background {
	background: linear-gradient(
		100deg,
		rgba(0, 25, 50, 0.94) 0%,
		rgba(0, 25, 50, 0.82) 38%,
		rgba(0, 25, 50, 0.55) 70%,
		rgba(0, 30, 60, 0.45) 100%
	) !important;
	opacity: 1 !important;
}

.amsis-hero .wp-block-cover__inner-container {
	width: 100%;
}

/* Cover lays its inner container out at the content measure, which left the
   words starting 340px in from the left of a 1440px screen — left-aligned
   inside a centred column reads as neither. The hero uses the wide measure
   instead, so the claim starts on the same line as the logo above it. */
.amsis-hero .wp-block-cover__inner-container {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* Words sit left, at a readable measure, not centred over the footage. */
.amsis-hero__content {
	max-width: 700px;
	margin-right: auto;
	margin-left: 0;
}

/* The claim gets the one type size above Display. WordPress prints its preset
   font-size classes with !important, so a size set on the saved heading can
   only be answered in kind — scoped to the hero so no other H1 is touched. */
.amsis-hero__content h1,
.amsis-hero__content h1.has-display-font-size,
.amsis-page-hero:has(.amsis-hero-backdrop) h1.has-display-font-size {
	font-size: var(--wp--preset--font-size--hero) !important;
	line-height: 1.04;
	letter-spacing: -0.025em;
}

.amsis-hero__content .is-style-amsis-lead {
	max-width: 34em;
}

/* Cover centres its inner container by default; the hero reads better with
   the content sitting slightly below centre on tall screens. */
.amsis-hero.wp-block-cover {
	align-items: center;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
}

@media (max-width: 781px) {
	.amsis-hero.wp-block-cover {
		min-height: 68vh !important;
	}

	.amsis-hero .wp-block-cover__background {
		background: linear-gradient(
			180deg,
			rgba(0, 25, 50, 0.9) 0%,
			rgba(0, 25, 50, 0.8) 60%,
			rgba(0, 25, 50, 0.92) 100%
		) !important;
	}
}

/* Someone who asked for less motion should not be served a looping video. */
@media (prefers-reduced-motion: reduce) {
	/* Left visible on purpose — paused on its first frame by site.js. See the
	   note by .amsis-hero-backdrop__scrim. */
}

/* Hero video — ambient product footage in the same frame the screenshot uses.
   Muted, looped and inline, so it never demands attention or sound. */
.amsis-hero-video {
	margin: 0;
	position: relative;
	border-radius: var(--amsis-radius);
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: var(--wp--preset--shadow--deep);
	background: var(--wp--preset--color--midnight-tint);
}

/* The frame owns the proportions; the video fills it however it was shot —
   the GENESIS footage is square, other clips may not be.
   !important is needed because WordPress writes width/height/aspect-ratio
   straight onto the <video> element as an inline style. */
.amsis-hero-video {
	aspect-ratio: 16 / 10;
}

.amsis-hero-video video {
	display: block;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
}

/* A quiet turquoise edge, so the frame reads as part of the brand rather than
   a browser default. */
.amsis-hero-video::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(120, 222, 230, 0.14);
	background: linear-gradient(135deg, rgba(120, 222, 230, 0.06) 0%, transparent 55%);
}

/* Someone who has asked for less motion gets the poster frame, not the loop. */
@media (prefers-reduced-motion: reduce) {
	/* Paused on its first frame rather than removed. */

	.amsis-hero-video {
		aspect-ratio: 16 / 10;
		background-image: var(--amsis-hero-poster);
		background-size: cover;
		background-position: center;
	}
}

/* Soft turquoise glow used on hero and CTA sections. */
.amsis-glow {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.amsis-glow::after {
	content: "";
	position: absolute;
	top: -45%;
	right: -18%;
	width: min(820px, 90vw);
	aspect-ratio: 1;
	background: radial-gradient(circle, rgba(120, 222, 230, 0.14) 0%, transparent 70%);
	pointer-events: none;
	z-index: -1;
}

.amsis-glow.amsis-glow--bottom::after {
	top: auto;
	bottom: -55%;
	right: auto;
	left: 50%;
	transform: translateX(-50%);
}

/* ============================================================
   4. BLOCK STYLE VARIATIONS
   Registered in inc/block-styles.php.
   ============================================================ */

/* Eyebrow label above a section heading. */
.is-style-amsis-eyebrow {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--petrol-deep);
	margin-bottom: 0.75rem;
	line-height: 1.4;
}

/* Larger intro paragraph. */
.is-style-amsis-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.65;
	color: var(--wp--preset--color--slate);
	max-width: 62ch;
}

/* Heading with a turquoise <em> or <strong> highlight. */
.is-style-amsis-accent em,
.is-style-amsis-accent strong {
	color: var(--wp--preset--color--petrol);
	font-style: normal;
	font-weight: inherit;
}

.amsis-on-dark .is-style-amsis-accent em,
.amsis-on-dark .is-style-amsis-accent strong {
	color: var(--wp--preset--color--turquoise);
}

/* Card. */
.is-style-amsis-card {
	background: var(--wp--preset--color--white);
	border: var(--amsis-border);
	border-radius: var(--amsis-radius-lg);
	padding: clamp(1.75rem, 4vw, 3rem);
	height: 100%;
}

.is-style-amsis-card-hover {
	background: var(--wp--preset--color--white);
	border: var(--amsis-border);
	border-radius: var(--amsis-radius-lg);
	padding: clamp(1.75rem, 4vw, 3rem);
	height: 100%;
	transition: box-shadow var(--amsis-transition), border-color var(--amsis-transition), transform var(--amsis-transition);
}

.is-style-amsis-card-hover:hover {
	border-color: var(--wp--preset--color--turquoise);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

/* Group with the orange/turquoise accent rule on top — used for fact lists. */
.is-style-amsis-rule-top {
	border-top: 2px solid var(--wp--preset--color--turquoise);
	padding-top: 1rem;
}

/* Columns separated by hairlines. */
.is-style-amsis-divided > .wp-block-column + .wp-block-column {
	border-left: var(--amsis-border);
	padding-left: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.is-style-amsis-divided > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: var(--amsis-border);
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--30);
	}
}

/* Ghost button. */
.wp-block-button.is-style-amsis-ghost > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--midnight);
	border: 1px solid var(--wp--preset--color--line);
	font-weight: 600;
}

.wp-block-button.is-style-amsis-ghost > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--petrol-deep);
	background: transparent;
}

/* The same two states for a plain anchor written by a PHP template, which has
   no .wp-block-button wrapper to hang the style on. */
a.wp-element-button.is-style-amsis-ghost {
	background: transparent;
	color: var(--wp--preset--color--midnight);
	border: 1px solid var(--wp--preset--color--line);
	font-weight: 600;
}

a.wp-element-button.is-style-amsis-ghost:hover {
	border-color: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--petrol-deep);
	background: transparent;
}

.amsis-on-dark a.wp-element-button.is-style-amsis-ghost {
	color: var(--wp--preset--color--white);
	border-color: rgba(255, 255, 255, 0.28);
}

.amsis-on-dark a.wp-element-button.is-style-amsis-ghost:hover {
	border-color: var(--wp--preset--color--turquoise);
	background: rgba(120, 222, 230, 0.08);
	color: var(--wp--preset--color--white);
}

/* Arrow link — reads as a link, animates on hover. */
.wp-block-button.is-style-amsis-arrow > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--petrol-deep);
	padding: 0;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wp-block-button.is-style-amsis-arrow > .wp-block-button__link::after {
	content: "→";
	transition: transform var(--amsis-transition);
}

.wp-block-button.is-style-amsis-arrow > .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--orange);
}

.wp-block-button.is-style-amsis-arrow > .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

.amsis-on-dark .wp-block-button.is-style-amsis-arrow > .wp-block-button__link {
	color: var(--wp--preset--color--turquoise);
}

/* Framed screenshot / UI capture. */
.wp-block-image.is-style-amsis-framed img {
	border-radius: var(--amsis-radius);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: var(--wp--preset--shadow--deep);
	background: var(--wp--preset--color--midnight-tint);
}

/* Logo wall image. */
.wp-block-image.is-style-amsis-logo-wall img {
	max-height: 40px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.45;
	transition: opacity var(--amsis-transition), filter var(--amsis-transition);
}

.wp-block-image.is-style-amsis-logo-wall:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* Check list. */
.wp-block-list.is-style-amsis-check {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-amsis-check li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.75rem;
}

.wp-block-list.is-style-amsis-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 1.1rem;
	height: 0.6rem;
	border-left: 2px solid var(--wp--preset--color--petrol);
	border-bottom: 2px solid var(--wp--preset--color--petrol);
	transform: rotate(-45deg);
}

.amsis-on-dark .wp-block-list.is-style-amsis-check li::before {
	border-color: var(--wp--preset--color--turquoise);
}

/* Short accent bar instead of a full-width rule. */
.wp-block-separator.is-style-amsis-accent-bar {
	width: 64px;
	height: 3px;
	border: 0;
	background: var(--wp--preset--color--orange);
	opacity: 1;
	margin-left: 0;
}

.wp-block-separator.is-style-amsis-accent-bar.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   5. SECTION COMPONENTS
   ============================================================ */

.amsis-logo-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.amsis-logo-row > * {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--midnight);
	opacity: 0.4;
	transition: opacity var(--amsis-transition);
	margin: 0;
}

.amsis-logo-row > *:hover {
	opacity: 0.85;
}

/* Stat item. */
.amsis-stat {
	text-align: center;
}

.amsis-stat__number {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: clamp(2.25rem, 5vw, 3rem);
	line-height: 1;
	color: var(--wp--preset--color--turquoise);
	margin: 0 0 0.5rem;
}

.amsis-stat__label {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--slate-light);
	margin: 0;
}

/* The stats band built from core columns, matched to the figures block. */
.amsis-stat .amsis-stat__number {
	font-size: clamp(2.75rem, 6vw, 4rem);
	line-height: 0.95;
}

.amsis-on-dark .amsis-stat .amsis-stat__label {
	color: var(--wp--preset--color--white);
	opacity: 0.88;
}

/* Feature icon tile. */
.amsis-icon-tile {
	width: 56px;
	height: 56px;
	border-radius: var(--amsis-radius);
	background: linear-gradient(135deg, var(--wp--preset--color--turquoise), var(--wp--preset--color--petrol));
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.amsis-icon-tile img,
.amsis-icon-tile svg {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

/* Partner / compatible systems grid. */
.amsis-partner-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 0;
	background: var(--wp--preset--color--white);
	border: var(--amsis-border);
	border-radius: var(--amsis-radius);
	overflow: hidden;
}

/* Cell separators are drawn by each item rather than by a gap over a coloured
   container, so a partly filled last row stays white instead of showing
   grey blocks where there is no system. */
.amsis-partner-grid__item {
	background: var(--wp--preset--color--white);
	box-shadow: inset -1px -1px 0 var(--wp--preset--color--line);
	min-height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--slate);
	text-decoration: none;
	transition: background var(--amsis-transition), color var(--amsis-transition);
}

.amsis-partner-grid__item:hover {
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--petrol-deep);
}

/* An explicit height rather than max-height: SVG logos often carry no intrinsic
   dimensions, and with width:auto alone they collapse to nothing. */
.amsis-partner-grid__item img {
	height: 40px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.72;
	transition: opacity var(--amsis-transition), filter var(--amsis-transition);
}

/* Colour on hover, so the wall reads as one system at rest but the individual
   brand is still there when someone looks for it. */
.amsis-partner-grid__item:hover img {
	filter: grayscale(0);
	opacity: 1;
}

.amsis-partner-grid__item:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* ============================================================
   6. CONTENT TYPE CARDS
   Rendered by the AMSIS Core plugin blocks and by the archive
   templates, so the markup stays identical in both places.
   ============================================================ */
.amsis-grid {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.amsis-grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.amsis-grid--3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.amsis-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Shared card shell. */
.amsis-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--white);
	border: var(--amsis-border);
	border-radius: var(--amsis-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--amsis-transition), border-color var(--amsis-transition), transform var(--amsis-transition);
}

.amsis-card:hover {
	box-shadow: var(--wp--preset--shadow--card);
	border-color: var(--wp--preset--color--turquoise);
	transform: translateY(-2px);
}

.amsis-card__media {
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--midnight);
	overflow: hidden;
}

.amsis-card__media--portrait { aspect-ratio: 4 / 3; }

/* No image yet — show a subtle brand-tinted placeholder rather than a flat
   dark box, so a half-finished page still looks deliberate. */
.amsis-card__media:empty {
	background:
		radial-gradient(circle at 30% 30%, rgba(120, 222, 230, 0.16) 0%, transparent 60%),
		var(--wp--preset--color--midnight);
	position: relative;
}

.amsis-card__media:empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.05) 0 1px,
		transparent 1px 10px
	);
}

.amsis-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

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

.amsis-card__body {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.6rem;
}

.amsis-card__title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	letter-spacing: -0.01em;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	color: var(--wp--preset--color--midnight);
	margin: 0;
}

.amsis-card__excerpt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
	margin: 0;
	flex: 1 1 auto;
}

.amsis-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--slate);
	margin: 0;
}

.amsis-card__more {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--petrol-deep);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
}

.amsis-card:hover .amsis-card__more {
	color: var(--wp--preset--color--orange);
}

.amsis-card__more::after {
	content: "→";
	transition: transform var(--amsis-transition);
}

.amsis-card:hover .amsis-card__more::after {
	transform: translateX(4px);
}

/* Several cards are rendered as <a> with <span> children so the whole card is
   one link — make those spans behave like blocks. */
.amsis-card span.amsis-card__media,
.amsis-card span.amsis-card__body,
.amsis-card span.amsis-card__title,
.amsis-card span.amsis-card__excerpt,
.amsis-card span.amsis-card__meta,
.amsis-press-item__date,
.amsis-press-item__content,
.amsis-press-item span.amsis-press-item__title,
.amsis-press-item span.amsis-press-item__excerpt,
.amsis-press-item__day,
.amsis-press-item__month {
	display: block;
}

.amsis-card span.amsis-card__body {
	display: flex;
}

/* Links inside cards inherit the card's typography — the whole card already
   reads as clickable, so an underline would be noise. */
.amsis-card a,
.amsis-press-item a,
.amsis-testimonial a {
	text-decoration: none;
	color: inherit;
}

.amsis-card__title a {
	color: var(--wp--preset--color--midnight);
	transition: color var(--amsis-transition);
}

.amsis-card:hover .amsis-card__title a,
.amsis-card__title a:hover {
	color: var(--wp--preset--color--petrol-deep);
}

.amsis-card__more,
.amsis-card a.amsis-card__more {
	color: var(--wp--preset--color--petrol-deep);
}

/* Tag / term chip. */
.amsis-chip {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 4px;
	background: rgba(0, 132, 164, 0.1);
	color: var(--wp--preset--color--petrol-deep);
}

/* Event card — coloured type bar at the top. */
.amsis-event__type {
	padding: 10px 20px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--midnight);
}

.amsis-event__type--tradeshow { background: var(--wp--preset--color--midnight); }
.amsis-event__type--webinar   { background: var(--wp--preset--color--petrol); }
.amsis-event__type--training  { background: var(--wp--preset--color--petrol-deep); }
.amsis-event__type--openhouse { background: var(--wp--preset--color--orange); }
.amsis-event__type--conference{ background: var(--wp--preset--color--midnight-tint); }

.amsis-event__date {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--petrol-deep);
	margin: 0;
}

.amsis-event__location {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--slate);
}

.amsis-event__location svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.amsis-event--past { opacity: 0.6; }

/* Press release list. */
.amsis-press-list {
	max-width: 900px;
	margin-inline: auto;
	border-top: var(--amsis-border);
}

.amsis-press-item {
	display: grid;
	grid-template-columns: 110px 1fr 24px;
	gap: clamp(1rem, 3vw, 2rem);
	align-items: center;
	padding: 1.75rem 0;
	border-bottom: var(--amsis-border);
	text-decoration: none;
	color: inherit;
	transition: background var(--amsis-transition), padding var(--amsis-transition);
}

.amsis-press-item:hover {
	background: var(--wp--preset--color--mist);
	padding-inline: 1.25rem;
	border-radius: var(--amsis-radius-sm);
}

.amsis-press-item__day {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 800;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--wp--preset--color--midnight);
}

.amsis-press-item__month {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.amsis-press-item__title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--wp--preset--color--midnight);
	margin: 0 0 4px;
}

.amsis-press-item__excerpt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
	margin: 0;
}

.amsis-press-item__arrow {
	color: var(--wp--preset--color--line);
	font-size: 1.25rem;
	transition: color var(--amsis-transition), transform var(--amsis-transition);
}

.amsis-press-item:hover .amsis-press-item__arrow {
	color: var(--wp--preset--color--orange);
	transform: translateX(4px);
}

@media (max-width: 600px) {
	.amsis-press-item { grid-template-columns: 70px 1fr; }
	.amsis-press-item__arrow { display: none; }
}

/* Testimonial. */
.amsis-testimonial {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--mist);
	border-radius: var(--amsis-radius-lg);
	padding: clamp(1.75rem, 4vw, 3rem);
	height: 100%;
}

.amsis-testimonial__quote {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.75;
	color: var(--wp--preset--color--midnight);
	flex: 1 1 auto;
	margin: 0 0 2rem;
}

.amsis-testimonial__quote::before {
	content: "\201C";
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 3rem;
	line-height: 0.8;
	color: var(--wp--preset--color--turquoise);
	margin-bottom: 0.75rem;
}

.amsis-testimonial__author {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.amsis-testimonial__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wp--preset--color--midnight);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--turquoise);
	font-family: var(--wp--preset--font-family--body);
	flex: 0 0 auto;
}

.amsis-testimonial__name {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--midnight);
	margin: 0;
}

.amsis-testimonial__role {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--slate);
	margin: 0;
}

.amsis-on-dark .amsis-testimonial {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.amsis-on-dark .amsis-testimonial__quote,
.amsis-on-dark .amsis-testimonial__name {
	color: var(--wp--preset--color--white);
}

/* ============================================================
   5b. WORKFLOW STEPS, MODULE CARDS
   ============================================================ */
/* The .amsis-compare__* rules that used to sit here styled a two-column
   absolute-€ "Standard software vs. GENESIS" comparison. That markup was
   removed with the pricing content it displayed (see home-builder.php and
   patterns/cost-comparison.php in the theme) — the non-monetary equivalent
   lives in .amsis-figures instead. */

/* Build-preparation steps. */
.amsis-steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}

.amsis-steps__item {
	margin: 0;
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--midnight);
	position: relative;
}

/* A thin connector between steps reads as a sequence without numbering it. */
.amsis-steps__item + .amsis-steps__item::before {
	content: "";
	position: absolute;
	left: -0.6rem;
	top: 50%;
	width: 0.6rem;
	height: 1px;
	background: var(--wp--preset--color--line);
}

.amsis-steps__item--accent {
	background: var(--wp--preset--color--midnight);
	border-color: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--turquoise);
}

@media (max-width: 600px) {
	.amsis-steps { flex-direction: column; align-items: stretch; }
	.amsis-steps__item { text-align: center; }
	.amsis-steps__item + .amsis-steps__item::before { display: none; }
}

/* Module card on the dark band. */
.amsis-module-card {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--amsis-radius-lg);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	height: 100%;
}

/* ============================================================
   5c. HOMEPAGE STORY BLOCKS
   The rolling trust band, the industry slider and the figures.
   ============================================================ */

/* ---- Rolling trust band --------------------------------------------- */
.amsis-marquee-wrap {
	border-block: var(--amsis-border);
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
	overflow: hidden;
}

.amsis-marquee__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
	text-align: center;
	margin: 0 0 1.25rem;
}

.amsis-marquee {
	--amsis-marquee-speed: 45s;
	overflow: hidden;
	/* Fade the band into the page rather than cutting it off at the edge. */
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.amsis-marquee__track {
	display: flex;
	width: max-content;
	animation: amsis-marquee var(--amsis-marquee-speed) linear infinite;
}

.amsis-marquee__copy {
	display: flex;
}

.amsis-marquee:hover .amsis-marquee__track {
	animation-play-state: paused;
}

.amsis-marquee__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: clamp(1.5rem, 4vw, 3rem);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--slate);
	white-space: nowrap;
}

.amsis-marquee__item img {
	height: 34px;
	width: auto;
	max-width: none;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.65;
	transition: opacity var(--amsis-transition), filter var(--amsis-transition);
}

.amsis-marquee__item:hover img {
	filter: grayscale(0);
	opacity: 1;
}

@keyframes amsis-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* A band that never stops moving is hostile to some readers. */
@media (prefers-reduced-motion: reduce) {
	.amsis-marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		gap: 0.5rem;
	}

	.amsis-marquee__copy { display: none; }
	.amsis-marquee { mask-image: none; -webkit-mask-image: none; }
}

/* ---- Industry slider ------------------------------------------------- */
.amsis-slider {
	position: relative;
}

.amsis-slider__track {
	display: flex;
	gap: clamp(1rem, 2vw, 1.5rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 1rem;
	/* Room for the lift on hover, which would otherwise be clipped. */
	padding-top: 4px;
	scrollbar-width: thin;
}

.amsis-industry {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	flex: 0 0 clamp(320px, 74vw, 620px);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: linear-gradient(150deg, #FFFFFF 0%, #EFF6FA 100%);
	border: var(--amsis-border);
	border-radius: var(--amsis-radius-lg);
	scroll-snap-align: center;
	transition: box-shadow var(--amsis-transition), border-color var(--amsis-transition);
}

.amsis-industry:hover {
	border-color: var(--wp--preset--color--turquoise);
	box-shadow: 0 26px 44px -30px rgba(0, 25, 50, 0.45);
}

.amsis-industry__name {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--midnight);
}

/* Words left, the rendered part right — the part is what makes the claim
   concrete, so it is given real room rather than a thumbnail. */
.amsis-industry__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
	gap: clamp(1rem, 3vw, 2rem);
	align-items: center;
}

.amsis-industry__body {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	min-width: 0;
}

.amsis-industry__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	color: var(--wp--preset--color--midnight);
	text-wrap: pretty;
}

.amsis-industry__author {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
	color: var(--wp--preset--color--slate);
}

.amsis-industry__part {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.6rem;
	align-items: baseline;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.amsis-industry__part a {
	color: var(--wp--preset--color--petrol-deep);
	text-decoration: none;
}

.amsis-industry__part a:hover {
	color: var(--wp--preset--color--petrol-deep);
	text-decoration: underline;
}

.amsis-industry__facts {
	font-weight: 400;
	color: var(--wp--preset--color--slate);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* The circled arrow from the reference. */
.amsis-industry__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-top: 0.25rem;
	border: 1px solid var(--line, #DCE5EB);
	border-radius: 50%;
	color: var(--wp--preset--color--midnight);
	text-decoration: none;
	transition: background var(--amsis-transition), color var(--amsis-transition), transform var(--amsis-transition);
}

.amsis-industry__more:hover {
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
	transform: translateX(2px);
}

.amsis-industry__media {
	min-width: 0;
}

.amsis-industry__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	border-radius: var(--amsis-radius);
	display: block;
}

/* The stand-in until an editor sets a featured image on the use case. This one
   is only ever output when there is no image at all, so the frame is safe. */
.amsis-industry__placeholder {
	object-fit: cover;
	outline: 2px dashed var(--wp--preset--color--line);
	outline-offset: -2px;
	opacity: 0.85;
}

@media (max-width: 680px) {
	.amsis-industry__inner {
		grid-template-columns: 1fr;
	}

	.amsis-industry__media {
		order: -1;
	}
}

/* ---- The Solutions bands on the homepage ------------------------------- */
.amsis-solution-band {
	margin-block: clamp(3rem, 7vw, 5.5rem);
}

.amsis-solution-band:first-of-type {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.amsis-solution-band .is-style-amsis-eyebrow {
	margin-bottom: 0.5rem;
}

.amsis-solution-band h2 {
	margin-top: 0;
	margin-bottom: 0.75rem;
	text-wrap: balance;
}

/* Eyebrow, heading, subhead (.is-style-amsis-lead) and description stack the
   way Oqton lays out a hero: each tier a little smaller and a little closer
   to the one above it, rather than one big gap-per-block rhythm. */
.amsis-solution-band .is-style-amsis-lead {
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.amsis-solution-band__desc {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--slate);
	max-width: 56ch;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.amsis-solution-band__media figure {
	margin: 0;
}

.amsis-solution-band__media img {
	width: 100%;
	border-radius: var(--amsis-radius);
}

.amsis-solution-band__media figcaption {
	margin-top: 0.6rem;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--slate);
	text-align: left;
}

/* ---- The two product bands on the Products page ------------------------ */
/* Same rhythm as the Solutions bands above — eyebrow, heading, subhead,
   description — just its own class, since a product page is a different
   section of the site and a change to one should not silently reach the
   other. */
.amsis-product-band {
	margin-block: clamp(3rem, 7vw, 5.5rem);
}

.amsis-product-band:first-of-type {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.amsis-product-band .is-style-amsis-eyebrow {
	margin-bottom: 0.5rem;
}

.amsis-product-band h2 {
	margin-top: 0;
	margin-bottom: 0.75rem;
	text-wrap: balance;
}

.amsis-product-band .is-style-amsis-lead {
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.amsis-product-band__desc {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--slate);
	max-width: 56ch;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.amsis-product-band__media figure {
	margin: 0;
}

.amsis-product-band__media img {
	width: 100%;
	border-radius: var(--amsis-radius);
}

/* The GENESIS mark, not a screenshot — contained and centred in a tinted
   panel rather than cropped to fill it the way a photo is. */
.amsis-product-band__logo {
	/* A <figure> now, so its default margin has to go. */
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	border-radius: var(--amsis-radius);
	background: var(--wp--preset--color--mist);
	border: var(--amsis-border);
	padding: 3rem;
}

.amsis-product-band__logo img {
	width: 100%;
	max-width: 220px;
	height: auto;
}

.amsis-slider__controls {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-top: 0.5rem;
}

.amsis-slider__btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--midnight);
	font-size: 1rem;
	cursor: pointer;
	transition: border-color var(--amsis-transition), color var(--amsis-transition), background var(--amsis-transition);
}

.amsis-slider__btn:hover:not([disabled]) {
	border-color: var(--wp--preset--color--turquoise);
	color: var(--wp--preset--color--petrol-deep);
}

.amsis-slider__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* ---- Figures band ---------------------------------------------------- */
.amsis-figures__heading {
	max-width: 24ch;
	margin: 0 auto clamp(3rem, 6vw, 5rem);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* The answer to the question, on its own line and in a lighter weight, so the
   pair reads as a turn rather than as one sentence wrapping three times. */
.amsis-figures__answer {
	display: block;
	margin-top: 0.35em;
	font-weight: 400;
	opacity: 0.92;
}

/* Three figures, read as a set of measurements rather than three loose
   headlines: a bright rule over each one, a hairline between them, and the
   label sitting under the number on a shared baseline. */
.amsis-figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	max-width: 62rem;
	margin-inline: auto;
	text-align: left;
}

.amsis-figures__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.75rem clamp(1.25rem, 3vw, 2.5rem) 0.5rem;
	text-align: left;
}

/* The hairline that separates one measurement from the next. */
.amsis-figures__item + .amsis-figures__item::after {
	content: "";
	position: absolute;
	left: 0;
	top: 1.75rem;
	bottom: 0.5rem;
	width: 1px;
	background: currentColor;
	opacity: 0.14;
}

.amsis-figures__item:first-child {
	padding-left: 0;
}

.amsis-figures__item:last-child {
	padding-right: 0;
}

/* The rule above each figure — the one bright mark in the band.
   Orange, not turquoise: turquoise is what the buttons and links are painted
   with, so a turquoise mark reads as something to click. The accent marks are
   orange and the interactive colour is turquoise, which is the only division
   that keeps either of them meaning anything. */
.amsis-figures__rule {
	display: block;
	width: 2.5rem;
	height: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--orange);
}

/* `.amsis-on-dark p` is more specific than `.amsis-stat__number`, so on a dark
   band the numbers were being repainted white — the reason they read as grey
   rather than as the brand turquoise. */
.amsis-figures .amsis-stat__number,
.amsis-on-dark .amsis-figures .amsis-stat__number,
.amsis-on-dark .amsis-stat__number {
	color: var(--wp--preset--color--white);
	font-size: clamp(2.75rem, 6vw, 4.25rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 0.25rem 0 0;
	font-variant-numeric: tabular-nums;
}

.amsis-figures .amsis-stat__label,
.amsis-on-dark .amsis-figures .amsis-stat__label {
	max-width: 22ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--wp--preset--color--turquoise);
}

/* More than three figures: same design, one size down, so a longer value
   like "under 1 month" is not squeezed into a third of the width it needs. */
.amsis-figures--wide {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	max-width: 72rem;
}

/* Matching the three-class selector above, or the dark-band rule wins and
   these stay at the full 80px. */
.amsis-figures--wide .amsis-stat__number,
.amsis-on-dark .amsis-figures--wide .amsis-stat__number {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.amsis-figures--wide .amsis-stat__label,
.amsis-on-dark .amsis-figures--wide .amsis-stat__label {
	max-width: 16ch;
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
}

.amsis-figures--wide .amsis-figures__item {
	padding-inline: clamp(0.75rem, 2vw, 1.5rem);
}

.amsis-figures--wide .amsis-figures__rule {
	width: 1.75rem;
	height: 2px;
}

@media (max-width: 1080px) {
	.amsis-figures--wide {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.amsis-figures {
		grid-template-columns: 1fr 1fr;
		gap: clamp(1.75rem, 5vw, 2.5rem);
	}

	.amsis-figures--wide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.amsis-figures {
		grid-template-columns: 1fr;
	}

	.amsis-figures .amsis-stat__label {
		max-width: none;
	}

	.amsis-figures__item,
	.amsis-figures__item:first-child,
	.amsis-figures__item:last-child {
		padding-inline: 0;
	}

	/* Vertical rules make no sense in a single column. */
	.amsis-figures__item + .amsis-figures__item::after {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	/* 24ch of a 32px heading is four lines on a phone. Let it run wider and
	   set it a size smaller so the question still reads as one thought. */
	.amsis-figures__heading {
		max-width: none;
		font-size: 1.75rem;
	}
}

.amsis-figures__cta {
	display: flex;
	justify-content: center;
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* Where the numbers came from. Quiet, but never absent — a claim this size
   without its basis is the first thing a sceptical engineer discounts. */
.amsis-figures__note {
	max-width: 66ch;
	margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	text-align: center;
	text-wrap: pretty;
	opacity: 0.62;
}

/* ============================================================
   6b. CONTACT FORM
   Rendered by the AMSIS Core plugin. The native form is styled
   here; the Pipedrive embed can only be framed, not restyled.
   ============================================================ */
.amsis-form-card {
	background: var(--wp--preset--color--mist);
	border: var(--amsis-border);
	border-radius: var(--amsis-radius-lg);
	padding: clamp(1.5rem, 4vw, 2.75rem);
}

.amsis-form-card__title {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--midnight);
	margin: 0 0 1.25rem;
}

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

.amsis-form__field {
	grid-column: 1 / -1;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.amsis-form__field--half { grid-column: span 1; }

@media (max-width: 600px) {
	.amsis-form__field--half { grid-column: 1 / -1; }
}

.amsis-form label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--midnight);
}

.amsis-form__required { color: var(--wp--preset--color--orange); }

.amsis-form input[type="text"],
.amsis-form input[type="email"],
.amsis-form input[type="tel"],
.amsis-form textarea {
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--midnight);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--amsis-radius-sm);
	padding: 0.7rem 0.9rem;
	transition: border-color var(--amsis-transition), box-shadow var(--amsis-transition);
}

.amsis-form input:focus,
.amsis-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--petrol);
	box-shadow: 0 0 0 3px rgba(0, 132, 164, 0.14);
}

.amsis-form input:focus-visible,
.amsis-form textarea:focus-visible { outline: none; }

.amsis-form textarea { resize: vertical; min-height: 8rem; }

.amsis-form ::placeholder { color: var(--wp--preset--color--slate); opacity: 0.7; }

/* Consent row. */
.amsis-form__consent {
	grid-column: 1 / -1;
	margin: 0;
}

.amsis-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.6;
	color: var(--wp--preset--color--slate);
}

.amsis-form__consent input { margin-top: 0.25rem; flex: 0 0 auto; accent-color: var(--wp--preset--color--petrol); }

.amsis-form__actions { margin: 1.5rem 0 0; }

.amsis-form button[type="submit"] { cursor: pointer; border: 0; }

/* The honeypot must be reachable by bots and invisible to everyone else. */
.amsis-form__pot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Result banners. */
.amsis-form__notice {
	border-radius: var(--amsis-radius-sm);
	padding: 0.9rem 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 1.25rem;
	border-left: 3px solid;
}

.amsis-form__notice--success {
	background: rgba(0, 132, 164, 0.08);
	border-left-color: var(--wp--preset--color--petrol);
	color: var(--wp--preset--color--petrol-deep);
}

.amsis-form__notice--error {
	background: rgba(255, 102, 0, 0.08);
	border-left-color: var(--wp--preset--color--orange);
	color: #b34700;
}

.amsis-form__hint {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--slate);
	margin: 0.75rem 0 0;
}

/* Consent gate in front of the Pipedrive embed. */
.amsis-consent-gate {
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--amsis-radius);
	background: var(--wp--preset--color--white);
	padding: 2rem;
	text-align: center;
}

.amsis-consent-gate__text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
	max-width: 46ch;
	margin: 0 auto 1.25rem;
}

.amsis-consent-gate__button { cursor: pointer; border: 0; }

/* Pipedrive renders into an iframe — all that can be controlled is the frame.
   Transparent, not white: the form's own document paints nothing, so whatever
   is behind the frame is what the visitor reads the labels against. Forcing it
   white put this form's white labels on white, and left a card with six dark
   boxes in it and no words. */
.pipedriveWebForms iframe {
	width: 100% !important;
	border: 0;
	border-radius: var(--amsis-radius);
	background: transparent;
}

/* The card that holds somebody else's form.
   Always midnight, whatever section it is dropped into. How the form itself is
   styled is decided inside Pipedrive and cannot be reached from here; this one
   is built for a dark ground, so the ground is guaranteed rather than
   inherited. Restyle the form in Pipedrive to a light theme and this is the
   rule to revisit. */
/* Both selectors on purpose: `.amsis-on-dark .amsis-form-card` is more
   specific than a single class, so on a dark section it would win and on a
   light one it would not — the embed would be dark in the one place it did
   not need to be and white in the one place it did. */
.amsis-form-card.amsis-form-card--embed,
.amsis-on-dark .amsis-form-card.amsis-form-card--embed {
	background: var(--wp--preset--color--midnight);
	border-color: rgba(255, 255, 255, 0.12);
}

.amsis-form-card--embed .amsis-form-card__title {
	color: var(--wp--preset--color--white);
}

/* The Pipedrive notice, inside the card's border rather than in front of it. */
.amsis-form__hint--embed {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--slate-light);
}

.amsis-form-card--embed .amsis-form__hint--embed a {
	color: var(--wp--preset--color--turquoise);
}

/* The gate is off by default now, but a block can still switch it on — and it
   was the one thing on this card that never inverted. */
.amsis-on-dark .amsis-consent-gate,
.amsis-form-card--embed .amsis-consent-gate {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.18);
}

.amsis-on-dark .amsis-consent-gate__text,
.amsis-form-card--embed .amsis-consent-gate__text {
	color: var(--wp--preset--color--slate-light);
}

/* On a dark section the card inverts. */
.amsis-on-dark .amsis-form-card {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
}

.amsis-on-dark .amsis-form-card__title,
.amsis-on-dark .amsis-form label { color: var(--wp--preset--color--white); }

.amsis-on-dark .amsis-form__consent label { color: var(--wp--preset--color--slate-light); }

/* Empty-state notice shown by the plugin blocks in the editor. */
.amsis-empty {
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--amsis-radius);
	padding: 2rem;
	text-align: center;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
}

/* A visitor gets the marker with no message in it, so there is nothing to
   frame — and the events band it sits in has a heading and a "see all dates"
   button that would otherwise stand over an empty strip. Drop both. */
.amsis-empty:empty {
	display: none;
}

.amsis-section--events:has(.amsis-empty:empty) {
	display: none;
}

/* ============================================================
   7. UTILITIES
   ============================================================ */
.amsis-measure { max-width: 62ch; }
.amsis-measure-narrow { max-width: 48ch; }
.amsis-center { margin-inline: auto; text-align: center; }
.amsis-center .is-style-amsis-lead { margin-inline: auto; }

.amsis-section-header { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

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

/* Pagination. */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-query-pagination .page-numbers {
	padding: 8px 14px;
	border-radius: var(--amsis-radius-sm);
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
}

/* ============================================================
   8. MOTION & PRINT
   ============================================================ */
.amsis-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.amsis-reveal.is-visible {
	opacity: 1;
	transform: none;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	.amsis-reveal { opacity: 1; transform: none; }
}

@media print {
	.amsis-header,
	.wp-block-navigation,
	.amsis-glow::after { display: none !important; }

	body { color: #000; background: #fff; }
}

/* ============================================================
   MOBILE MENU OVERRIDES — last on purpose
   Inside the full-screen menu everything sits on midnight, so
   the bar's light-background colours would paint midnight text
   on a midnight ground. These rules are last in the file and
   scoped to the panel so they win that tie without !important.
   ============================================================ */
@media (max-width: 1059px) {
	.amsis-header .amsis-nav__panel .amsis-header__lang a,
	.amsis-header .amsis-nav__panel .amsis-header__lang-current,
	.amsis-header.is-scrolled .amsis-nav__panel .amsis-header__lang a,
	.amsis-header.is-scrolled .amsis-nav__panel .amsis-header__lang-current,
	body:not(.amsis-has-hero) .amsis-header .amsis-nav__panel .amsis-header__lang a,
	body:not(.amsis-has-hero) .amsis-header .amsis-nav__panel .amsis-header__lang-current {
		color: rgba(255, 255, 255, 0.72);
	}

	.amsis-header .amsis-nav__panel .amsis-header__lang-current,
	.amsis-header.is-scrolled .amsis-nav__panel .amsis-header__lang-current,
	body:not(.amsis-has-hero) .amsis-header .amsis-nav__panel .amsis-header__lang-current {
		color: var(--wp--preset--color--white);
	}

	.amsis-header .amsis-nav__panel .amsis-header__lang a:hover,
	body:not(.amsis-has-hero) .amsis-header .amsis-nav__panel .amsis-header__lang a:hover {
		color: var(--wp--preset--color--turquoise);
		background: transparent;
	}
}

/* ============================================================
   TYPE SCALE — the homepage hero keeps its own size
   The page scale is calibrated to Oqton (H1 35px, H2 29px), but
   a hero is a different job from a page heading: it is the one
   place the claim should be big.
   ============================================================ */
.amsis-hero h1,
.amsis-hero .wp-block-heading {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	line-height: 1.06;
	font-weight: 800;
}

/* Last word on footer links: .amsis-on-dark a repaints every link on a dark
   band, and the footer is one of those bands. Scoped here so the footer keeps
   one colour without touching links anywhere else. */
.amsis-footer .amsis-footer__links a,
.amsis-on-dark.amsis-footer .amsis-footer__links a,
.amsis-on-dark .amsis-footer__links a:not(.wp-block-button__link):not(.wp-element-button),
.amsis-on-dark .amsis-footer__links a:not(.wp-block-button__link):not(.wp-element-button):hover {
	color: var(--wp--preset--color--white);
	font-weight: 400;
}

/* Postal address, email and phone beside the contact form. */
.amsis-contact-details {
	margin: 1.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
}

.amsis-contact-details a {
	color: var(--wp--preset--color--turquoise);
	text-decoration: none;
}

.amsis-contact-details a:hover {
	text-decoration: underline;
}

/* ---- Hero: compatible systems ------------------------------------------
   A short row of machine logos in the hero, knocked out to white. */
.amsis-hero-partners {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.amsis-hero-partners__label {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--turquoise);
}

.amsis-hero-partners__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(1.1rem, 2.4vw, 2.1rem);
	width: max-content;
	max-width: 100%;
}

/* Straight onto the hero, no panel. The plugin ships each of these marks
   already keyed out to white, so nothing here has to fake it — a CSS blend
   would shimmer frame to frame over the playing video and disappear
   wherever the footage is bright. */
.amsis-hero-partners__row img {
	height: 26px;
	width: auto;
	max-width: 130px;
	flex: 0 0 auto;
	object-fit: contain;
	opacity: 0.88;
	transition: opacity var(--amsis-transition);
}

/* A partner someone added themselves, with no cut-out to use. Almost every
   logo file is a dark mark on white, and this turns one into a light mark
   on black that `screen` then drops against the hero. Not as clean as a real
   cut-out, but never worse than the raw logo. */
.amsis-hero-partners__row img.is-unkeyed {
	filter: grayscale(1) invert(1) brightness(1.5) contrast(1.1);
	mix-blend-mode: screen;
}

.amsis-hero-partners__row:hover img {
	opacity: 1;
}

.amsis-hero-partners__name {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	color: var(--wp--preset--color--white);
}

@media (max-width: 782px) {
	.amsis-hero-partners__row {
		gap: 1.25rem;
		/* Never squeeze the logos to nothing: let the row scroll instead. */
		overflow-x: auto;
		width: 100%;
		scrollbar-width: none;
	}

	.amsis-hero-partners__row::-webkit-scrollbar { display: none; }
	.amsis-hero-partners__row img { height: 21px; }
}

/* ---- "What we do": the words beside the software ------------------------ */
.amsis-showcase .amsis-hero-media {
	margin: 0;
}

.amsis-showcase .amsis-hero-video video,
.amsis-showcase .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--amsis-radius);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: var(--wp--preset--shadow--deep);
}

/* The empty slot. Contained, not cropped: it is a drawing of a window, and
   cropping it would cut the window's own edges off. */
.amsis-showcase .amsis-media-placeholder img {
	object-fit: contain;
	background: rgba(0, 25, 50, 0.55);
	border-style: dashed;
	border-color: rgba(120, 222, 230, 0.4);
	box-shadow: none;
}

.amsis-showcase .amsis-media-placeholder figcaption {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
	color: var(--wp--preset--color--slate-light);
	text-align: left;
}

@media (max-width: 781px) {
	/* Words first on a phone: the claim has to land before the picture. */
	.amsis-showcase { flex-direction: column; }
}

/* ============================================================
   TECHNOLOGY PAGE
   The master deck's technical treatment: dark bands with a
   faint grid, a connected pipeline you can open, stat cards,
   and the two ways of working set against each other.
   ============================================================ */

.amsis-tech { position: relative; overflow: hidden; }

/* These are cards and buttons with their own padding sitting in a grid or a
   flex track. Without border-box, width:100% plus padding overflows the
   track — which is what the roadmap cards were doing on a phone. */
.amsis-pipe__step,
.amsis-caps__card,
.amsis-next__item,
.amsis-stats__item,
.amsis-materials__item,
.amsis-vs__item,
.amsis-seemore,
.amsis-evidence {
	box-sizing: border-box;
}

/* The deck's grid, faded off toward the edges so it reads as depth
   rather than as graph paper. */
.amsis-tech--grid::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.06;
	background-image:
		linear-gradient(rgba(120, 222, 230, 0.5) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 222, 230, 0.5) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse at 30% 25%, #000 0%, transparent 70%);
	mask-image: radial-gradient(ellipse at 30% 25%, #000 0%, transparent 70%);
}

.amsis-tech > * { position: relative; z-index: 1; }

/* ---- The connected pipeline -------------------------------------------- */
.amsis-pipe {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin-block: clamp(2rem, 4vw, 3rem) 0;
	position: relative;
}

/* The line the steps sit on. */
.amsis-pipe::before {
	content: "";
	position: absolute;
	left: 2%;
	right: 2%;
	top: 50%;
	height: 2px;
	opacity: 0.5;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--petrol) 12%, var(--wp--preset--color--turquoise) 88%, transparent);
}

.amsis-pipe__step {
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	text-align: center;
	padding: 1.35rem 0.9rem 1.15rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	background: linear-gradient(175deg, rgba(0, 41, 79, 0.95), rgba(0, 25, 50, 0.95));
	font: inherit;
	color: inherit;
	transition: transform var(--amsis-transition), border-color var(--amsis-transition), box-shadow var(--amsis-transition);
}

button.amsis-pipe__step { cursor: pointer; }

button.amsis-pipe__step:hover,
button.amsis-pipe__step:focus-visible {
	transform: translateY(-6px);
	border-color: rgba(120, 222, 230, 0.5);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.amsis-pipe__n {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--turquoise);
}

.amsis-pipe__title {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.875rem;
	line-height: 1.25;
	color: var(--wp--preset--color--white);
}

.amsis-pipe__detail {
	display: block;
	font-size: 0.6875rem;
	line-height: 1.45;
	color: var(--wp--preset--color--slate-light);
}

/* Where the money goes, and where GENESIS earns it. */
.amsis-pipe__step.is-costly { border-color: rgba(255, 122, 77, 0.4); }
.amsis-pipe__step.is-costly .amsis-pipe__n { color: var(--wp--preset--color--orange); }

.amsis-pipe__step.is-genesis {
	border-color: rgba(120, 222, 230, 0.4);
	background: linear-gradient(175deg, rgba(0, 132, 164, 0.24), rgba(0, 25, 50, 0.95));
}

.amsis-pipe__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 26px;
	z-index: 1;
	font-size: 1rem;
	color: var(--wp--preset--color--turquoise);
	opacity: 0.6;
}

/* ---- The "+" that says there is more behind this ----------------------- */
.amsis-drill__more {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(120, 222, 230, 0.35);
	background: rgba(0, 25, 50, 0.5);
	color: var(--wp--preset--color--turquoise);
	font-size: 0.8125rem;
	line-height: 1;
}

.amsis-loop__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 1.1rem 0 0;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--orange);
}

.amsis-loop__note svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---- Stat cards -------------------------------------------------------- */
.amsis-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1.15rem;
	margin-block: clamp(2rem, 4vw, 2.75rem) 0;
}

.amsis-stats__item {
	text-align: center;
	padding: 1.6rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	background: rgba(3, 34, 63, 0.5);
	transition: transform var(--amsis-transition), border-color var(--amsis-transition);
}

.amsis-stats__item:hover {
	transform: translateY(-4px);
	border-color: rgba(120, 222, 230, 0.4);
}

.amsis-stats__item b {
	display: block;
	margin-bottom: 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	line-height: 1;
	color: var(--wp--preset--color--turquoise);
	text-shadow: 0 0 34px rgba(120, 222, 230, 0.35);
}

.amsis-stats__item span {
	display: block;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--wp--preset--color--slate-light);
}

/* ---- Two ways of working ----------------------------------------------- */
.amsis-vs {
	display: grid;
	grid-template-columns: 1fr 56px 1fr;
	gap: 0 0.5rem;
	align-items: stretch;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	max-width: 980px;
}

.amsis-vs__col { display: flex; flex-direction: column; gap: 0.6rem; }

.amsis-vs__head {
	margin: 0 0 0.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.amsis-vs__col--old .amsis-vs__head { color: var(--wp--preset--color--slate-light); }
.amsis-vs__col--new .amsis-vs__head { color: var(--wp--preset--color--turquoise); }

.amsis-vs__item {
	margin: 0;
	padding: 0.7rem 0.95rem;
	border-radius: 10px;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.amsis-vs__col--old .amsis-vs__item {
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--wp--preset--color--slate-light);
}

.amsis-vs__col--new .amsis-vs__item {
	background: rgba(120, 222, 230, 0.08);
	border: 1px solid rgba(120, 222, 230, 0.25);
	border-left: 3px solid var(--wp--preset--color--turquoise);
	color: var(--wp--preset--color--white);
}

.amsis-vs__mid {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	color: var(--wp--preset--color--turquoise);
	opacity: 0.55;
}

/* ---- The sentence a section rests on ----------------------------------- */
.amsis-claim__text {
	max-width: 62ch;
	margin: clamp(2rem, 4vw, 2.75rem) auto 0;
	padding-top: clamp(1.4rem, 3vw, 2rem);
	border-top: 2px solid rgba(120, 222, 230, 0.45);
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.05rem, 2vw, 1.4rem);
	line-height: 1.45;
	color: var(--wp--preset--color--white);
}

.amsis-footnote {
	max-width: 68ch;
	margin: clamp(1.5rem, 3vw, 2rem) auto 0;
	text-align: center;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--wp--preset--color--slate-light);
}

/* ---- Capability cards -------------------------------------------------- */
.amsis-caps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-block: clamp(2rem, 4vw, 3rem) 0;
}

.amsis-caps__card {
	position: relative;
	display: block;
	width: 100%;
	text-align: left;
	padding: clamp(1.4rem, 2.4vw, 1.9rem);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	background: linear-gradient(175deg, rgba(0, 41, 79, 0.9), rgba(0, 25, 50, 0.9));
	font: inherit;
	color: inherit;
	transition: transform var(--amsis-transition), border-color var(--amsis-transition), box-shadow var(--amsis-transition);
}

button.amsis-caps__card { cursor: pointer; }

button.amsis-caps__card:hover,
button.amsis-caps__card:focus-visible {
	transform: translateY(-5px);
	border-color: rgba(120, 222, 230, 0.45);
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.amsis-caps__icon { display: block; width: 34px; height: auto; margin-bottom: 1.1rem; }

.amsis-caps__kind {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--turquoise);
}

.amsis-caps__title {
	display: block;
	margin-bottom: 0.6rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	color: var(--wp--preset--color--white);
}

.amsis-caps__text {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--slate-light);
}

/* ---- Per-material evidence --------------------------------------------- */
.amsis-materials {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.9rem, 1.8vw, 1.25rem);
	margin-block: clamp(2rem, 4vw, 3rem) 0;
}

.amsis-materials__item {
	padding: 1.35rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	background: rgba(3, 34, 63, 0.5);
	text-align: center;
}

.amsis-materials__item b {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	line-height: 1;
	color: var(--wp--preset--color--turquoise);
	text-shadow: 0 0 30px rgba(120, 222, 230, 0.3);
}

.amsis-materials__name {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 700;
	color: var(--wp--preset--color--white);
}

.amsis-materials__detail {
	display: block;
	font-size: 0.6875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--slate-light);
}

/* ---- What's next ------------------------------------------------------- */
.amsis-next {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-block: clamp(2rem, 4vw, 3rem) 0;
}

.amsis-next__item {
	position: relative;
	display: block;
	width: 100%;
	text-align: left;
	padding: clamp(1.3rem, 2.2vw, 1.7rem);
	border: var(--amsis-border);
	border-radius: var(--amsis-radius);
	background: var(--wp--preset--color--white);
	font: inherit;
	color: inherit;
	transition: transform var(--amsis-transition), border-color var(--amsis-transition), box-shadow var(--amsis-transition);
}

button.amsis-next__item { cursor: pointer; }

button.amsis-next__item:hover,
button.amsis-next__item:focus-visible {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--petrol);
	box-shadow: 0 18px 44px -28px rgba(0, 25, 50, 0.45);
}

.amsis-next__item .amsis-drill__more {
	border-color: rgba(0, 99, 118, 0.35);
	background: rgba(0, 99, 118, 0.07);
	color: var(--wp--preset--color--petrol-deep);
}

.amsis-next__title {
	display: block;
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--midnight);
}

.amsis-next__text {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--slate);
}

/* ---- "See the evidence" ------------------------------------------------ */
.amsis-seemore,
.amsis-evidence {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.25rem;
	padding: 0.7rem 1.1rem;
	border: 1px solid rgba(0, 99, 118, 0.35);
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--petrol-deep);
	cursor: pointer;
	transition: background var(--amsis-transition), border-color var(--amsis-transition);
}

.amsis-seemore .amsis-drill__more,
.amsis-evidence .amsis-drill__more {
	position: static;
	width: 20px;
	height: 20px;
	border-color: currentColor;
	background: transparent;
	color: inherit;
}

.amsis-seemore:hover { background: rgba(0, 99, 118, 0.07); }

.amsis-seemore--centred { display: flex; margin: 1.75rem auto 0; }

.amsis-on-dark .amsis-seemore,
.amsis-evidence {
	border-color: rgba(120, 222, 230, 0.4);
	color: var(--wp--preset--color--turquoise);
}

.amsis-on-dark .amsis-seemore:hover,
.amsis-evidence:hover { background: rgba(120, 222, 230, 0.1); }

.amsis-evidence {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.35rem 0.85rem;
	max-width: 760px;
	margin: clamp(1.75rem, 3vw, 2.25rem) auto 0;
	padding: 1.25rem 1.5rem;
	border-radius: var(--amsis-radius);
	text-align: left;
}

.amsis-evidence .amsis-drill__more { align-self: start; margin-top: 0.15rem; }
.amsis-evidence__label { font-weight: 700; color: var(--wp--preset--color--white); }
.amsis-evidence__text { grid-column: 2; font-size: var(--wp--preset--font-size--small); line-height: 1.6; color: var(--wp--preset--color--slate-light); }

/* ---- The dialog -------------------------------------------------------- */
body.amsis-drill-open { overflow: hidden; }

.amsis-drill {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
}

.amsis-drill[hidden] { display: none; }

.amsis-drill__veil {
	position: absolute;
	inset: 0;
	background: rgba(0, 10, 22, 0.85);
	backdrop-filter: blur(10px);
}

.amsis-drill__box {
	position: relative;
	/* border-box: without it the padding was added on top of the full width,
	   and on a laptop the box ran 88px past the right edge of the screen. */
	box-sizing: border-box;
	width: 100%;
	max-width: 880px;
	max-height: 88vh;
	overflow-y: auto;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid rgba(120, 222, 230, 0.3);
	border-radius: 18px;
	background: linear-gradient(165deg, var(--wp--preset--color--midnight-tint), var(--wp--preset--color--midnight));
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7);
}

.amsis-drill__close {
	position: absolute;
	top: 1.1rem;
	right: 1.1rem;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(120, 222, 230, 0.4);
	background: rgba(120, 222, 230, 0.08);
	color: var(--wp--preset--color--turquoise);
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--amsis-transition), color var(--amsis-transition);
}

.amsis-drill__close:hover {
	background: var(--wp--preset--color--turquoise);
	color: var(--wp--preset--color--midnight);
}

.amsis-drill__eyebrow {
	margin: 0 0 0.6rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--turquoise);
}

.amsis-drill__title {
	margin: 0 0 0.7rem;
	padding-right: 3rem;
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	color: var(--wp--preset--color--white);
}

.amsis-drill__text {
	max-width: 68ch;
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--slate-light);
}

.amsis-drill__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 1.75rem;
	margin-bottom: 1.25rem;
}

.amsis-drill__facts b {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.15rem;
	color: var(--wp--preset--color--turquoise);
}

.amsis-drill__facts span { font-size: 0.6875rem; color: var(--wp--preset--color--slate-light); }

.amsis-drill__media { display: grid; gap: 1rem; }
.amsis-drill__media.is-pair { grid-template-columns: 1fr 1fr; }

.amsis-drill__item {
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	overflow: hidden;
	background: rgba(0, 25, 50, 0.6);
	text-align: center;
}

.amsis-drill__item img,
.amsis-drill__item video {
	display: block;
	width: 100%;
	height: auto;
	/* The picture shares the screen with the words above it; together they
	   should fit without scrolling on a laptop. */
	max-height: min(38vh, 440px);
	object-fit: contain;
	background: rgba(0, 15, 30, 0.5);
}

.amsis-drill__item figcaption {
	padding: 0.7rem 0.9rem;
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	line-height: 1.45;
	color: var(--wp--preset--color--slate-light);
}

@media (max-width: 900px) {
	.amsis-pipe { flex-direction: column; }
	.amsis-pipe::before { display: none; }
	.amsis-pipe__arrow { transform: rotate(90deg); padding: 0.25rem 0; }
	.amsis-vs { grid-template-columns: 1fr; }
	.amsis-vs__mid { transform: rotate(90deg); padding: 0.4rem 0; }
	.amsis-caps { grid-template-columns: 1fr; }
	.amsis-next { grid-template-columns: 1fr; }
	.amsis-materials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.amsis-drill__media.is-pair { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	.amsis-materials { grid-template-columns: 1fr; }
}

/* ---- Speed: the simulation, playing ------------------------------------ */
.amsis-simvideo {
	position: relative;
	margin: 0;
	border: 1px solid rgba(120, 222, 230, 0.22);
	border-radius: var(--amsis-radius);
	overflow: hidden;
	background: rgba(0, 15, 30, 0.6);
	box-shadow: var(--wp--preset--shadow--deep);
}

.amsis-simvideo video {
	display: block;
	width: 100%;
	height: auto;
	/* The simulation is recorded 1496 × 696. Forced into 16:9 it lost the
	   ends of the impeller and stood taller than it needed to. */
	aspect-ratio: 1496 / 696;
	object-fit: cover;
	background: rgba(0, 15, 30, 0.8);
}

.amsis-simvideo figcaption {
	padding: 0.8rem 1rem;
	font-size: 0.75rem;
	line-height: 1.5;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--slate-light);
	background: rgba(0, 25, 50, 0.75);
}

/* The whole frame opens it full size; the marker says so. */
.amsis-simvideo__open {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.amsis-simvideo__open .amsis-drill__more {
	top: 0.75rem;
	right: 0.75rem;
	width: 30px;
	height: 30px;
	font-size: 1rem;
	background: rgba(0, 25, 50, 0.72);
	transition: background var(--amsis-transition), color var(--amsis-transition);
}

.amsis-simvideo__open:hover .amsis-drill__more,
.amsis-simvideo__open:focus-visible .amsis-drill__more {
	background: var(--wp--preset--color--turquoise);
	color: var(--wp--preset--color--midnight);
}

/* Same rule the hero follows: no ambient motion for anyone who has asked for
   less of it — the poster frame carries the same information. */
@media (prefers-reduced-motion: reduce) {
	.amsis-simvideo video {
		display: none;
	}

	.amsis-simvideo {
		aspect-ratio: 1496 / 696;
		background-image: var(--amsis-simvideo-poster);
		background-size: cover;
		background-position: center;
	}
}

/* ---- How far apart the two approaches are ------------------------------ */
.amsis-bars {
	display: grid;
	gap: 1.1rem;
	margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.amsis-bars__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.4rem 1rem;
}

.amsis-bars__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--white);
}

.amsis-bars__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--orange);
	text-align: right;
}

.amsis-bars__row.is-fast .amsis-bars__value { color: var(--wp--preset--color--turquoise); }

.amsis-bars__track {
	grid-column: 1 / -1;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.amsis-bars__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wp--preset--color--orange), rgba(255, 102, 0, 0.55));
}

.amsis-bars__row.is-fast .amsis-bars__fill {
	background: linear-gradient(90deg, var(--wp--preset--color--turquoise), var(--wp--preset--color--petrol));
}

.amsis-footnote--left { margin-left: 0; margin-right: 0; text-align: left; }

/* The stat cards sit in a narrower column here than they do full width. */
.amsis-speed .amsis-stats {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block: clamp(1.5rem, 3vw, 2rem) 0;
}

@media (max-width: 781px) {
	/* Words first: the claim has to land before the picture. */
	.amsis-speed { flex-direction: column; }
	.amsis-speed .amsis-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ---- "Whole picture (no crop)" ----------------------------------------
   The two-column bands crop what you put in them to a 4:3 frame, which is
   right for a photograph and wrong for a part shot on a transparent
   background: a portrait cut-out loses a third of itself, and a small file
   gets stretched to fill a frame it cannot fill sharply.

   This style shows the whole picture instead. It sits on a tinted panel so a
   cut-out does not float, is centred, and is never drawn larger than the file
   actually is — so uploading a bigger version genuinely shows more, rather
   than only changing how soft it looks. */
.wp-block-image.is-style-amsis-whole {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 2.5vw, 2rem);
	border-radius: var(--amsis-radius);
	background: var(--wp--preset--color--mist);
}

.wp-block-image.is-style-amsis-whole img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 0;
}

/* On a dark band the panel has to be light-on-dark instead. */
.amsis-on-dark .wp-block-image.is-style-amsis-whole {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Inside a band the panel keeps the band's own proportions, so the two
   columns still line up whatever shape the picture is. */
.amsis-application__media .is-style-amsis-whole,
.amsis-solution-band__media .is-style-amsis-whole,
.amsis-product-band__media .is-style-amsis-whole,
.amsis-showcase .is-style-amsis-whole {
	aspect-ratio: 4 / 3;
}

/* ---------------------------------------------------------------------------
   Applications slider
   Parts printed with Genesis. A horizontal rail rather than a wrapping grid:
   a dozen parts stacked four-by-three fills a screen with pictures and buries
   the section below it, and the point of the row is that it keeps going.
   A card opens where it stands, so the build data lands next to the part it
   belongs to — and because the card height is fixed, opening one never moves
   anything else on the page.
   --------------------------------------------------------------------------- */

.amsis-apps-wrap {
	position: relative;
}

.amsis-apps {
	display: flex;
	gap: var(--wp--preset--spacing--30, 1.25rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Room for the card shadow, which a scroll container would otherwise clip. */
	padding-block: 0.5rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.amsis-apps::-webkit-scrollbar {
	display: none;
}

.amsis-app {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 calc(
		(100% - (var(--amsis-app-columns, 4) - 1) * var(--wp--preset--spacing--30, 1.25rem))
		/ var(--amsis-app-columns, 4)
	);
	/* Fixed, so an open card cannot push the rail around. */
	height: 25rem;
	scroll-snap-align: start;
	border-radius: 14px;
	background: var(--wp--preset--color--white, #FFFFFF);
	box-shadow: 0 1px 3px rgba(0, 25, 50, 0.08);
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.amsis-app:hover {
	box-shadow: 0 12px 32px rgba(0, 25, 50, 0.12);
}

.amsis-app.is-open {
	background: var(--wp--preset--color--midnight, #001932);
	box-shadow: 0 18px 44px rgba(0, 25, 50, 0.24);
}

.amsis-app__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Shrinks as the build data appears, which is what keeps the card the
	   same height in both states. */
	flex: 1 1 auto;
	min-height: 0;
	padding: clamp(1.25rem, 2.5vw, 2rem);
	cursor: pointer;
}

/* The accent disc the part sits on. Only under a cut-out: behind a rectangular
   photograph it would be covered up, which reads as a bug. */
.amsis-app--cutout .amsis-app__media::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(60%, 10rem);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--wp--preset--color--turquoise, #78DEE6);
}

/* Sized to the part, not to the card, and never taller than the space it has
   — a tall spiral and a wide bracket both arrive whole. */
.amsis-app__media img {
	position: relative;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	transition: transform 0.3s ease;
}

.amsis-app:hover .amsis-app__media img {
	transform: scale(1.04);
}

.amsis-app__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	background: var(--wp--preset--color--mist, #F2F6F8);
}

.amsis-app__body {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	padding: 0 clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 1.75rem);
	/* The toggle lives in this strip, so nothing is written underneath it. */
	padding-inline-end: 4.25rem;
}

.amsis-app__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium, 1.125rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--midnight, #001932);
}

.amsis-app.is-open .amsis-app__title {
	margin-bottom: 0.6rem;
	color: var(--wp--preset--color--white, #FFFFFF);
}

/* display:none rather than leaning on the hidden attribute: a display rule
   from a class beats the browser's own [hidden] rule, which is how every
   closed card ended up showing its data in white on a pale background. */
.amsis-app__data {
	display: none;
	margin: 0;
	overflow-y: auto;
	scrollbar-width: thin;
}

.amsis-app.is-open .amsis-app__data {
	display: grid;
	gap: 0.25rem;
}

.amsis-app__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	font-size: 0.875rem;
	line-height: 1.35;
}

/* Scoped to the open card: these are the colours for the midnight panel, and
   unscoped they painted white values onto a white card. */
.amsis-app.is-open .amsis-app__row dt {
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--turquoise, #78DEE6);
}

.amsis-app.is-open .amsis-app__row dd {
	margin: 0;
	color: var(--wp--preset--color--white, #FFFFFF);
}

.amsis-app__toggle {
	position: absolute;
	inset-block-end: clamp(1.25rem, 2.5vw, 1.75rem);
	inset-inline-end: clamp(1.25rem, 2.5vw, 1.75rem);
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--white, #FFFFFF);
	box-shadow: 0 2px 10px rgba(0, 25, 50, 0.16);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.amsis-app__toggle:hover {
	transform: scale(1.08);
}

.amsis-app__toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--petrol, #0084A4);
	outline-offset: 3px;
}

.amsis-app.is-open .amsis-app__toggle:focus-visible {
	outline-color: var(--wp--preset--color--turquoise, #78DEE6);
}

/* A plus that becomes a cross, rather than two glyphs swapped over — the
   rotation is what tells you the two states are the same control. */
.amsis-app__sign {
	position: relative;
	width: 0.9rem;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--midnight, #001932);
	transition: transform 0.25s ease;
}

.amsis-app__sign::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: inherit;
	transform: rotate(90deg);
}

.amsis-app.is-open .amsis-app__sign {
	transform: rotate(45deg);
}

/* --- The rail's own controls ---------------------------------------------- */

.amsis-apps-head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.amsis-apps-nav {
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line, #DCE5EB);
	border-radius: 50%;
	background: var(--wp--preset--color--white, #FFFFFF);
	color: var(--wp--preset--color--midnight, #001932);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.amsis-apps-nav:hover:not(:disabled) {
	background: var(--wp--preset--color--midnight, #001932);
	border-color: var(--wp--preset--color--midnight, #001932);
	color: var(--wp--preset--color--white, #FFFFFF);
}

.amsis-apps-nav:focus-visible {
	outline: 3px solid var(--wp--preset--color--petrol, #0084A4);
	outline-offset: 2px;
}

/* Kept in place rather than removed: a control that disappears at the end of
   the rail makes the other one jump sideways under the cursor. */
.amsis-apps-nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.amsis-apps-nav svg {
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Nothing to scroll: the rail fits, so the arrows would do nothing. */
.amsis-apps-wrap:not(.is-scrollable) .amsis-apps-head {
	display: none;
}

@media (max-width: 1080px) {
	.amsis-app {
		flex-basis: calc((100% - var(--wp--preset--spacing--30, 1.25rem)) / 2);
	}
}

@media (max-width: 600px) {
	.amsis-app {
		flex-basis: 82%;
		height: 23rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.amsis-app,
	.amsis-app__media img,
	.amsis-app__toggle,
	.amsis-app__sign,
	.amsis-apps-nav {
		transition: none;
	}

	.amsis-app:hover .amsis-app__media img,
	.amsis-app__toggle:hover {
		transform: none;
	}
}

/* Success story tiles: the customer's name above the headline, and a quiet note
   when the full study sits behind the form — so a gated card is recognisable
   before it is clicked, not after. */
.amsis-card__customer {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--petrol, #0084A4);
}

.amsis-card__lock {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.75rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--slate, #4F6A7D);
}

.amsis-card__lock::before {
	content: "";
	width: 0.7rem;
	height: 0.85rem;
	background: currentColor;
	-webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 17"><path d="M3 7V4.5a4 4 0 1 1 8 0V7h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1Zm2 0h4V4.5a2 2 0 1 0-4 0V7Z"/></svg>');
	mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 17"><path d="M3 7V4.5a4 4 0 1 1 8 0V7h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1Zm2 0h4V4.5a2 2 0 1 0-4 0V7Z"/></svg>');
}

/* ---------------------------------------------------------------------------
   Technology — the business case
   One part, costed twice. The two columns are stacked figures rather than a
   table: the numbers are the argument, and a table makes them look like
   reference data instead.
   --------------------------------------------------------------------------- */

.amsis-bizcase {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
	margin-top: var(--wp--preset--spacing--50, 2rem);
}

.amsis-bizcase__cols {
	display: grid;
	gap: 1.25rem;
}

.amsis-bizcase__col {
	padding: 1.5rem 1.75rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* The GENESIS column is the answer, so it is the one that is lit. */
.amsis-bizcase__col--after {
	background: rgba(120, 222, 230, 0.1);
	border-color: var(--wp--preset--color--turquoise, #78DEE6);
}

.amsis-bizcase__label {
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate-light, #B9CAD5);
}

.amsis-bizcase__col--after .amsis-bizcase__label {
	color: var(--wp--preset--color--turquoise, #78DEE6);
}

.amsis-bizcase__row {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.35rem 0;
}

.amsis-bizcase__value {
	min-width: 5.5ch;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--white, #FFFFFF);
}

.amsis-bizcase__unit {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--slate-light, #B9CAD5);
}

.amsis-bizcase__media {
	margin: 0;
}

.amsis-bizcase__media img {
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.amsis-bizcase__media figcaption {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--slate-light, #B9CAD5);
}

.amsis-bizcase__deltas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 3vw, 2.5rem);
	margin-top: var(--wp--preset--spacing--50, 2rem);
	padding-top: var(--wp--preset--spacing--40, 1.5rem);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.amsis-bizcase__deltanum {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.05;
	color: var(--wp--preset--color--turquoise, #78DEE6);
}

.amsis-bizcase__deltalabel {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--slate-light, #B9CAD5);
}

.amsis-bizcase__note {
	margin-top: var(--wp--preset--spacing--30, 1.25rem);
	font-size: 0.875rem;
	color: var(--wp--preset--color--slate-light, #B9CAD5);
}

@media (max-width: 860px) {
	.amsis-bizcase {
		grid-template-columns: 1fr;
	}

	.amsis-bizcase__deltas {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

/* ---------------------------------------------------------------------------
   Footer navigation
   The same groups as the header, so a page taken out of the menu leaves the
   footer too. Its own grid inside one footer column, rather than five columns
   of hand-written links that drifted out of step with the menu above.
   --------------------------------------------------------------------------- */

.amsis-footer-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

.amsis-footer-nav__title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white, #FFFFFF);
}

.amsis-footer-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.amsis-footer-nav__list li {
	margin: 0 0 0.4rem;
}

@media (max-width: 600px) {
	.amsis-footer-nav {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   The GENESIS story
   The impeller builds from the plate upward as the bar moves. Everything is
   sized against the viewport height, so the headline, the part, the steps, the
   transport and both buttons land inside one screen — nothing that explains
   the animation sits below the fold while the animation is playing.
   --------------------------------------------------------------------------- */

.amsis-story{
	position: relative;
	overflow: hidden;
	display: grid;
	align-content: center;
	min-height: calc(100svh - var(--amsis-header-height, 76px));
	padding-block: clamp(1.25rem, 3vh, 2.75rem);
	background: radial-gradient(125% 95% at 50% 6%, #012f5a 0%, var(--wp--preset--color--midnight) 64%);
}

.amsis-story__inner{ max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding-inline: var(--amsis-gutter); width: 100%; }
.amsis-story__head{ text-align: center; }
.amsis-story__logo{ height: clamp(30px, 4.6vh, 54px); width: auto; }
.amsis-story__claim{
	margin: clamp(.55rem, 1.4vh, 1.1rem) auto 0;
	max-width: 34ch;
	font-size: clamp(.98rem, 2vh, 1.4rem);
	line-height: 1.45;
	color: var(--wp--preset--color--slate-light);
}

/* A landscape box, because the part is landscape — a square one spent a third
   of its height on empty air above and below the impeller. */
.amsis-story__stage{
	position: relative;
	height: min(52vh, 470px);
	aspect-ratio: 1.62 / 1;
	width: auto;
	max-width: 94vw;
	margin: clamp(.5rem, 2vh, 1.5rem) auto 0;
	display: grid;
	place-items: center;
}

.amsis-story__ring{ position: absolute; inset: 0; pointer-events: none; }
/* Aspect deliberately not preserved: an orbit around a part seen from ~35°
   above is an ellipse, so filling the landscape box is both truer than a
   circle and stops the ring being clipped to the shorter side. */
.amsis-story__ring svg{ width: 100%; height: 100%; display: block; }
.amsis-story__ringspin{ transform-origin: 200px 200px; }

.amsis-story__plate{
	position: absolute; left: 16%; right: 16%; bottom: 6%; height: 16%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(120,222,230,.3), rgba(120,222,230,0) 70%);
	filter: blur(10px);
}

.amsis-story__part{ position: relative; width: 86%; }
.amsis-story__part img{ width: 100%; display: block; }
.amsis-story__ghost{ position: absolute; inset: 0; opacity: .12; filter: grayscale(1) brightness(1.7); }
.amsis-story__built{ position: relative; clip-path: inset(var(--amsis-unbuilt, 100%) 0 0 0); }
.amsis-story__scan{
	position: absolute; left: -3%; right: -3%; height: 2px;
	top: var(--amsis-scan, 100%);
	background: var(--wp--preset--color--turquoise);
	box-shadow: 0 0 18px 4px rgba(120,222,230,.9);
	opacity: 0; transition: opacity .2s;
}
.amsis-story__scan.is-on{ opacity: 1; }

/* Only the step whose stage is running is lit. */
.amsis-story__steps{
	list-style: none; margin: clamp(.75rem, 2.2vh, 1.9rem) auto 0; padding: 0;
	display: flex; justify-content: center; flex-wrap: wrap;
	gap: clamp(1.5rem, 5vw, 4.5rem);
}
.amsis-story__step{
	display: flex; align-items: baseline; gap: .6rem;
	opacity: .22; transform: translateY(4px);
	transition: opacity .45s ease, transform .45s ease;
}
.amsis-story__n{
	font-family: var(--wp--preset--font-family--display);
	font-size: .72rem; letter-spacing: .14em;
	color: var(--wp--preset--color--slate-light);
}
.amsis-story__t{
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(.95rem, 2.1vh, 1.35rem);
	color: var(--wp--preset--color--white);
	white-space: nowrap;
}
.amsis-story__step.is-on{ opacity: 1; transform: none; }
.amsis-story__step.is-on .amsis-story__n,
.amsis-story__step.is-on .amsis-story__t{ color: var(--wp--preset--color--turquoise); }

.amsis-story__ctrl{ max-width: min(760px, 88vw); margin: clamp(.75rem, 1.9vh, 1.6rem) auto 0; }
.amsis-story__row{ display: flex; align-items: center; gap: 1rem; }
.amsis-story__play{
	width: clamp(38px, 4.6vh, 46px); height: clamp(38px, 4.6vh, 46px);
	flex: none; border: 0; border-radius: 50%; cursor: pointer;
	background: var(--wp--preset--color--turquoise);
	display: grid; place-items: center;
}
.amsis-story__play:hover{ background: var(--wp--preset--color--white); }
.amsis-story__play::before{
	content: ""; width: 0; height: 0;
	border-style: solid; border-width: .42rem 0 .42rem .68rem;
	border-color: transparent transparent transparent var(--wp--preset--color--midnight);
	margin-left: .12rem;
}
.amsis-story__play.is-playing::before{
	width: .62rem; height: .68rem; border: 0; margin: 0;
	background: linear-gradient(to right,
		var(--wp--preset--color--midnight) 0 36%, transparent 36% 64%,
		var(--wp--preset--color--midnight) 64% 100%);
}
.amsis-story__play.is-replay::before{
	width: .7rem; height: .7rem; border: 0; margin: 0;
	background: var(--wp--preset--color--midnight);
	-webkit-mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 2a6 6 0 1 0 6 6h-2a4 4 0 1 1-4-4v2.5L11.5 3 8 -0.5Z"/></svg>');
	mask: no-repeat center / contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 2a6 6 0 1 0 6 6h-2a4 4 0 1 1-4-4v2.5L11.5 3 8 -0.5Z"/></svg>');
}
.amsis-story__layer{
	font-family: var(--wp--preset--font-family--display);
	font-size: .82rem; letter-spacing: .06em; white-space: nowrap;
	min-width: 7ch; text-align: right;
	color: var(--wp--preset--color--slate-light);
}

.amsis-story__scrub{
	-webkit-appearance: none; appearance: none;
	flex: 1; height: 8px; border-radius: 999px; outline: none; cursor: pointer;
	background: linear-gradient(90deg,#2b3f8f 0%,#1b9ad6 18%,#3ec9a7 38%,#c8de3a 58%,#f7a825 76%,#e8442b 100%);
}
.amsis-story__scrub::-webkit-slider-thumb{
	-webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
	background: #fff; border: 3px solid var(--wp--preset--color--midnight);
	cursor: grab; box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.amsis-story__scrub::-moz-range-thumb{
	width: 22px; height: 22px; border-radius: 50%;
	background: #fff; border: 3px solid var(--wp--preset--color--midnight);
}
.amsis-story__scrub:focus-visible{ outline: 3px solid var(--wp--preset--color--turquoise); outline-offset: 4px; }

.amsis-story__close{
	display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap;
	margin-top: clamp(1rem, 2.6vh, 2rem);
}

@media (max-width: 782px){
	/* Three step names will not sit on one line on a phone, so they stack —
	   and the stage gives back the height that costs. */
	.amsis-story__steps{ gap: .35rem; flex-direction: column; align-items: center; }
	.amsis-story__stage{ height: min(38vh, 340px); }
	.amsis-story__claim{ font-size: 1rem; }
}

/* ---- The story inside another section --------------------------------
   With its logo and buttons switched off the block is no longer a section but
   a piece of media, and it sits in the right-hand column of "What we do". It
   has to stop behaving like a screen: no viewport height, no ground of its own
   (the section it sits in already has one), and a stage measured by the width
   of the column rather than the height of the window. */
.amsis-story--embed{
	min-height: 0;
	padding-block: 0;
	background: none;
	overflow: visible;
}

.amsis-story--embed .amsis-story__inner{
	max-width: none;
	padding-inline: 0;
}

.amsis-story--embed .amsis-story__stage{
	height: auto;
	width: 100%;
	max-width: none;
	aspect-ratio: 1.62 / 1;
	margin-top: 0;
}

/* Three step names in a column, not across a page. */
.amsis-story--embed .amsis-story__steps{
	margin-top: clamp(.9rem, 2vw, 1.4rem);
	gap: clamp(.75rem, 2.5vw, 1.75rem);
}

.amsis-story--embed .amsis-story__ctrl{
	margin-top: clamp(.6rem, 1.6vw, 1rem);
}

/* Narrow enough and the three names stack, as they do on a phone. */
@media (max-width: 1100px){
	.amsis-story--embed .amsis-story__steps{
		flex-direction: column;
		align-items: center;
		gap: .35rem;
	}
}

@media (prefers-reduced-motion: reduce){
	.amsis-story__step, .amsis-story__scan{ transition: none; }
}

/* ---------------------------------------------------------------------------
   The run below the story
   Routes, figures and quotes stay in the story's language so the homepage
   reads as one piece rather than snapping back to cards on grey.
   --------------------------------------------------------------------------- */

/* The rows are the content of this band, so they take the wide measure. As a
   plain child of a constrained layout the group was capped at the 760px
   reading measure, which left the list in the middle third of the screen while
   every other section ran to 1200px. The dynamic blocks get there through
   their align support; this one is core-block markup, so it is set here —
   which also repairs pages built before the builder started saying so. */
.amsis-routes-section .amsis-routes{
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin: clamp(1.5rem, 3vh, 2.5rem) auto 0;
}

.amsis-route{
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.1rem, 2.4vh, 1.9rem) 0;
	border-top: 1px solid rgba(255,255,255,.12);
	transition: color var(--amsis-transition);
}

.amsis-route:last-child{ border-bottom: 1px solid rgba(255,255,255,.12); }

/* Each row and each column is a core block, and WordPress's flow layout gives
   every block a top margin. The grid owns the spacing here, so take it back —
   otherwise the rows drift apart and the title sits off its own baseline.

   .wp-block-group is carried for the weight, not the styling: WordPress prints
   its layout rules after this stylesheet, and .wp-block-group-is-layout-flow > *
   would otherwise win the tie on source order. */
.amsis-routes.wp-block-group > *,
.amsis-route.wp-block-group > *,
.amsis-route__main.wp-block-group > *{ margin-block: 0; }
.amsis-route__n{
	font-family: var(--wp--preset--font-family--display);
	font-size: .72rem; letter-spacing: .14em;
	color: var(--wp--preset--color--orange);
	transition: color var(--amsis-transition);
}
.amsis-route__title{
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 3vw, 2.1rem);
	font-weight: 400;
	line-height: 1.15;
	color: var(--wp--preset--color--white);
	transition: color var(--amsis-transition);
}

.amsis-route__desc{
	margin-top: .35rem !important;
	font-size: .94rem; max-width: 52ch;
	color: var(--wp--preset--color--slate-light);
}

.amsis-route__go a{
	display: flex; align-items: center; gap: .5rem;
	font-weight: 700; font-size: .92rem; white-space: nowrap;
	color: var(--wp--preset--color--turquoise);
	text-decoration: none;
}

/* The whole row is clickable, but only one real link carries it — so the
   picture and the title stay out of the tab order and a screen reader hears
   one destination per row rather than four. */
.amsis-route__go a::after{
	content: "";
	position: absolute;
	inset: 0;
}
.amsis-route__arw{ transition: transform var(--amsis-transition); }

/* The destination, shown on the way to it. */
.amsis-route__thumb{
	margin: 0;
	position: absolute; right: clamp(9rem, 16vw, 15rem); top: 50%;
	width: clamp(110px, 12vw, 168px); aspect-ratio: 16 / 10;
	transform: translateY(-50%) scale(.9);
	border-radius: 10px; overflow: hidden;
	opacity: 0; pointer-events: none;
	transition: opacity var(--amsis-transition), transform var(--amsis-transition);
}
.amsis-route__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.amsis-route:hover .amsis-route__thumb,
.amsis-route:focus-within .amsis-route__thumb{ opacity: 1; transform: translateY(-50%) scale(1); }
.amsis-route:hover .amsis-route__title,
.amsis-route:focus-within .amsis-route__title,
.amsis-route:hover .amsis-route__n{ color: var(--wp--preset--color--turquoise); }
.amsis-route:hover .amsis-route__arw{ transform: translateX(5px); }
.amsis-route__go a:focus-visible{ outline: 3px solid var(--wp--preset--color--turquoise); outline-offset: 4px; }

/* Figures: the payoff of the story, as numerals. */
.amsis-figures__item .amsis-stat__number{
	font-size: clamp(2.1rem, 5.2vw, 3.6rem);
	line-height: 1;
}

/* Quotes: one light breath after the dark run, in the same minimal language. */
.amsis-testimonial{ border: 0; background: none; padding: 0; }
.amsis-testimonial__quote{
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 1.9vw, 1.5rem);
	line-height: 1.4;
	color: var(--wp--preset--color--midnight);
}
.amsis-on-dark .amsis-testimonial__quote{ color: var(--wp--preset--color--white); }

@media (max-width: 860px){
	.amsis-route{ grid-template-columns: auto 1fr; row-gap: .6rem; }
	.amsis-route__go{ grid-column: 2; }
	.amsis-route__thumb{ display: none; }
}

@media (prefers-reduced-motion: reduce){
	.amsis-route, .amsis-route__thumb, .amsis-route__arw{ transition: none; }
}

/* ---------------------------------------------------------------------------
   Solution pages: the two interactive pieces
   --------------------------------------------------------------------------- */

.amsis-compare{
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--amsis-radius);
	overflow: hidden;
	background: var(--wp--preset--color--midnight);
	cursor: ew-resize;
	user-select: none;
	touch-action: pan-y;
}
.amsis-compare img{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.amsis-compare__after{ clip-path: inset(0 0 0 var(--amsis-split, 50%)); }
.amsis-compare__handle{
	position: absolute; top: 0; bottom: 0;
	left: var(--amsis-split, 50%);
	width: 3px;
	background: var(--wp--preset--color--turquoise);
	pointer-events: none;
}
.amsis-compare__handle::after{
	content: "";
	position: absolute; top: 50%; left: 50%;
	width: 2.6rem; height: 2.6rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--wp--preset--color--turquoise);
	box-shadow: 0 2px 12px rgba(0, 25, 50, .45);
}
.amsis-compare__tag{
	position: absolute; top: 1rem;
	padding: .4rem .8rem;
	border-radius: 999px;
	background: rgba(0, 25, 50, .82);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--display);
	font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
	pointer-events: none;
}
.amsis-compare__tag--l{ left: 1rem; }
.amsis-compare__tag--r{ right: 1rem; color: var(--wp--preset--color--turquoise); }
.amsis-compare:focus-visible{ outline: 3px solid var(--wp--preset--color--petrol); outline-offset: 3px; }

/* --- overhang angles --- */
.amsis-angles{
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	margin-top: var(--wp--preset--spacing--50, 2rem);
}
.amsis-angles__mats{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.amsis-angles__mat{
	padding: .55rem 1rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .25);
	background: transparent;
	color: var(--wp--preset--color--white);
	font-family: inherit; font-weight: 600; font-size: .88rem;
	cursor: pointer;
	transition: background-color var(--amsis-transition), border-color var(--amsis-transition), color var(--amsis-transition);
}
.amsis-angles__mat:hover{ border-color: var(--wp--preset--color--turquoise); }
.amsis-angles__mat[aria-pressed="true"]{
	background: var(--wp--preset--color--turquoise);
	border-color: var(--wp--preset--color--turquoise);
	color: var(--wp--preset--color--midnight);
}
.amsis-angles__mat:focus-visible{ outline: 3px solid var(--wp--preset--color--turquoise); outline-offset: 2px; }
.amsis-angles__value{
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 7vw, 4.6rem);
	line-height: 1;
	color: var(--wp--preset--color--turquoise);
}
.amsis-angles__desc{ margin: .4rem 0 0; color: var(--wp--preset--color--slate-light); }
.amsis-angles__vs{ margin-top: 1.2rem; font-size: .95rem; color: var(--wp--preset--color--slate-light); }
.amsis-angles__vs b{ color: var(--wp--preset--color--white); }
.amsis-angles__gauge{
	background: rgba(255, 255, 255, .04);
	border-radius: var(--amsis-radius);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.amsis-angles__gauge svg{ width: 100%; height: 100%; display: block; }
.amsis-angles__ray, .amsis-angles__raylbl{ transition: all var(--amsis-transition); }

@media (max-width: 860px){
	.amsis-angles{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
	.amsis-angles__ray, .amsis-angles__raylbl, .amsis-angles__mat{ transition: none; }
}

/* ---------------------------------------------------------------------------
   Solution pages: hero figures, and the figures beside a comparison
   --------------------------------------------------------------------------- */

.amsis-herostats{
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.amsis-herostat b{
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.1;
	color: var(--wp--preset--color--petrol);
}
.amsis-herostat span{
	display: block;
	margin-top: .25rem;
	font-size: .85rem;
	color: var(--wp--preset--color--slate);
}
/* Against a hero video the band is dark, so the figures turn out. */
.amsis-page-hero:has(.amsis-hero-backdrop) .amsis-herostat b{ color: var(--wp--preset--color--turquoise); }
.amsis-page-hero:has(.amsis-hero-backdrop) .amsis-herostat span{ color: var(--wp--preset--color--slate-light); }

/* Beside the before / after: a rule, the number, what it measures. */
.amsis-cmpstat{
	border-left: 3px solid var(--wp--preset--color--turquoise);
	padding-left: 1rem;
	margin-bottom: 1.4rem;
}
.amsis-cmpstat b{
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 2.6vw, 1.9rem);
	line-height: 1.1;
	color: var(--wp--preset--color--midnight);
}
.amsis-cmpstat span{ display: block; font-size: .9rem; color: var(--wp--preset--color--slate); }
.amsis-cmpnote{ margin-top: 1.2rem; font-size: .93rem; color: var(--wp--preset--color--slate); }
.amsis-on-dark .amsis-cmpstat b{ color: var(--wp--preset--color--white); }
.amsis-on-dark .amsis-cmpstat span,
.amsis-on-dark .amsis-cmpnote{ color: var(--wp--preset--color--slate-light); }

@media (max-width: 781px){
	.amsis-herostats{ gap: 1.25rem; }
}

/* ===========================================================================
   Classic-theme layout
   The block theme's wrappers (wp-block-group, alignfull, the constrained
   layout) came from block markup. These templates are plain PHP, so the same
   measures and rhythm are set here instead.
   =========================================================================== */

/* A block theme gets body { margin: 0 } from the layout styles WordPress
   prints around .wp-site-blocks. A classic theme does not, so without this the
   browser's own 8px body margin frames every page in white: a strip above the
   hero, and an 8px inset down both sides of every full-bleed section. */
body{ margin: 0; }

.amsis-main{ display: block; }

.amsis-header__inner,
.amsis-footer__inner,
.amsis-footer__bottom,
.amsis-section__inner,
.amsis-list-head__inner,
.amsis-cta__inner,
.amsis-eventhero__inner{
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--amsis-gutter, 2rem);
}

.amsis-header__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: var(--amsis-header-min, 76px);
}
.amsis-header__logo{ display: inline-flex; flex: none; }
.amsis-logo{
	height: 60px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	object-position: left center;
	display: block;
}

/* The footer prints the bare wordmark, which needs none of that height. */
.amsis-footer .amsis-logo{
	height: 44px;
	max-width: 170px;
}

.amsis-section{
	padding-block: var(--wp--preset--spacing--60, 4rem);
	padding-inline: var(--amsis-gutter, 2rem);
}

.amsis-section > *{
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* Templates that state the wrapper themselves already carry the gutter; the
   band supplies it now, so the wrapper must not add a second one. */
.amsis-section > .amsis-section__inner{ padding-inline: 0; }
.amsis-section--mist{ background: var(--wp--preset--color--mist); }
.amsis-section__inner{ width: 100%; }

.amsis-list-head{
	background: var(--wp--preset--color--mist);
	padding-block: var(--wp--preset--spacing--60, 4rem);
	padding-inline: var(--amsis-gutter, 2rem);
}

.amsis-list-head > *{
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* Templates that state the wrapper themselves already centre and measure; the
   band supplies the gutter now, so the wrapper must not add a second one. */
.amsis-list-head > .amsis-list-head__inner{ padding-inline: 0; }
/* German titles run to single words wider than a phone at display size —
   "Datenschutzerklärung". Words are never split: site.js sizes the title
   down until its longest word fits (see "Statement headlines"). */
.amsis-list-head h1{ margin: 0; }
.amsis-list-head .is-style-amsis-lead{ margin-top: 1rem; max-width: 58ch; }

/* Prose inside a PHP template gets the measure the block editor used to give it. */
.amsis-prose > *{ max-width: var(--wp--style--global--content-size, 760px); margin-inline: auto; }
.amsis-prose > .alignwide{ max-width: var(--wp--style--global--wide-size, 1200px); }
.amsis-prose > .alignfull{ max-width: none; }

.amsis-cta{
	padding-block: var(--wp--preset--spacing--70, 6rem);
	text-align: center;
	background: var(--wp--preset--gradient--midnight-depth, linear-gradient(170deg, #001932 0%, #003A5C 100%));
	color: var(--wp--preset--color--white);
}
.amsis-cta h2{ margin: .5rem 0 0; }
.amsis-cta .is-style-amsis-lead{ margin: 1rem auto 0; max-width: 56ch; }
.amsis-cta__buttons{ display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

.amsis-footer{
	padding-block: var(--wp--preset--spacing--60, 4rem) var(--wp--preset--spacing--40, 2rem);
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
}

/* The two dark sections meet edge to edge; no seam between them. */
.amsis-cta + .amsis-footer{ margin-block-start: 0; }
.amsis-footer__inner{ display: grid; grid-template-columns: 28% 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
/* Typography and colour both come from .is-style-amsis-eyebrow, which the
   markup carries; only the spacing is the footer's own. */
.amsis-footer__claim{ margin: 1rem 0 0; }
.amsis-footer__contact{ margin-top: 1rem; font-size: .9rem; }
.amsis-footer__contact a{ color: var(--wp--preset--color--slate-light); text-decoration: none; }
.amsis-footer__contact a:hover{ color: var(--wp--preset--color--turquoise); }
.amsis-footer__bottom{ display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	margin-top: var(--wp--preset--spacing--40, 2rem); padding-top: var(--wp--preset--spacing--30, 1.5rem);
	border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; }
.amsis-footer__legal a{ color: var(--wp--preset--color--slate-light); text-decoration: none; }
.amsis-footer__legal a:hover{ color: var(--wp--preset--color--turquoise); }

/* --- an article ---------------------------------------------------------- */
.amsis-article__head{ background: var(--wp--preset--color--mist); padding-block: var(--wp--preset--spacing--60, 4rem); }
.amsis-article__headinner{ max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; padding-inline: var(--amsis-gutter, 2rem); }
.amsis-article__headinner h1{ margin: 0; max-width: 24ch; }
.amsis-article__headinner .is-style-amsis-lead{ margin-top: 1rem; max-width: 62ch; }

.amsis-article__grid{
	display: grid; grid-template-columns: 200px minmax(0, 1fr) 260px;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto; padding: var(--wp--preset--spacing--60, 4rem) var(--amsis-gutter, 2rem);
	align-items: start;
}
.amsis-article__rail, .amsis-article__aside{ position: sticky; top: calc(var(--amsis-header-height, 76px) + 1.5rem); font-size: .9rem; }
.amsis-article__label{ font-family: var(--wp--preset--font-family--display); font-size: .7rem; letter-spacing: .14em;
	text-transform: uppercase; color: var(--wp--preset--color--slate); margin: 1.4rem 0 .3rem; }
.amsis-article__rail > .amsis-article__label:first-child{ margin-top: 0; }
.amsis-article__value{ margin: 0; font-weight: 600; }
.amsis-article__body > *{ margin-block: 1.1rem; }
.amsis-article__lead-image{ margin: 0 0 1.75rem; }
.amsis-article__lead-image img{ width: 100%; height: auto; border-radius: var(--amsis-radius, 16px); display: block; }

.amsis-related{ list-style: none; margin: 0; padding: 0; }
.amsis-related li + li{ margin-top: 1.1rem; }
.amsis-related a{ text-decoration: none; color: inherit; display: block; }
.amsis-related img{ width: 100%; height: auto; border-radius: 8px; margin-bottom: .5rem; display: block; }
.amsis-related__title{ display: block; font-weight: 700; line-height: 1.3; }
.amsis-related__date{ display: block; margin-top: .2rem; font-size: .82rem; color: var(--wp--preset--color--slate); }
.amsis-related a:hover .amsis-related__title{ color: var(--wp--preset--color--petrol); }

/* --- a video beside an article ------------------------------------------- */
.amsis-videoembed{ margin: 0 0 1.75rem; }
.amsis-videoembed__frame{ position: relative; aspect-ratio: 16 / 9; border-radius: var(--amsis-radius, 16px);
	overflow: hidden; background: var(--wp--preset--color--midnight); }
.amsis-videoembed__frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.amsis-videoembed figcaption{ margin-top: .7rem; font-size: .85rem; color: var(--wp--preset--color--slate); }

/* A card that leads to a video says so. */
.amsis-card__play{ position: absolute; left: 1rem; bottom: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
	background: rgba(0,25,50,.82); display: grid; place-items: center; }
.amsis-card__play::before{ content: ""; width: 0; height: 0; margin-left: .18rem;
	border-style: solid; border-width: .38rem 0 .38rem .6rem;
	border-color: transparent transparent transparent #fff; }

/* --- events -------------------------------------------------------------- */
.amsis-events__heading{ margin: 0 0 1.75rem; font-size: clamp(1.4rem, 2.6vw, 2rem); }
.amsis-eventgrid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }
.amsis-eventgrid--past{ opacity: .85; }

.amsis-eventcard{ display: flex; flex-direction: column; border-radius: var(--amsis-radius, 16px);
	overflow: hidden; background: #fff; border: 1px solid var(--wp--preset--color--line); transition: box-shadow .25s ease, transform .25s ease; }
.amsis-eventcard:hover{ transform: translateY(-3px); box-shadow: 0 18px 44px -28px rgba(0,25,50,.5); }
.amsis-eventcard__banner{ position: relative; display: block; aspect-ratio: 16 / 9; background: var(--wp--preset--color--midnight); overflow: hidden; }
.amsis-eventcard__banner img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.amsis-eventcard__fallback{ position: absolute; inset: 0; display: grid; align-content: center; gap: .4rem;
	padding: 1.5rem; color: #fff; }
.amsis-eventcard__fallback b{ font-family: var(--wp--preset--font-family--display); font-size: 1.4rem; font-weight: 400; line-height: 1.15; }
.amsis-eventcard__fallback span{ font-size: .85rem; color: var(--wp--preset--color--turquoise); }
.amsis-eventcard__kind{ position: absolute; left: 1rem; top: 1rem; padding: .35rem .75rem; border-radius: 999px;
	background: var(--wp--preset--color--turquoise); color: var(--wp--preset--color--midnight);
	font-family: var(--wp--preset--font-family--display); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.amsis-eventcard__body{ padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.amsis-eventcard__when{ margin: 0; font-family: var(--wp--preset--font-family--display); font-size: .8rem;
	letter-spacing: .06em; color: var(--wp--preset--color--petrol); }
.amsis-eventcard__title{ margin: 0; font-size: 1.2rem; }
.amsis-eventcard__title a{ color: inherit; text-decoration: none; }
.amsis-eventcard__title a:hover{ color: var(--wp--preset--color--petrol); }
.amsis-eventcard__where{ margin: 0; font-size: .88rem; color: var(--wp--preset--color--slate); }
.amsis-eventcard__excerpt{ margin: 0; font-size: .9rem; color: var(--wp--preset--color--slate); }
.amsis-eventcard__cta{ margin: auto 0 0; padding-top: .6rem; }
.amsis-eventcard__more{ font-weight: 700; color: var(--wp--preset--color--petrol); text-decoration: none; }

.amsis-eventhero{ background: var(--wp--preset--color--midnight); padding-block: var(--wp--preset--spacing--60, 4rem); }
.amsis-eventhero h1{ margin: .4rem 0 1rem; }
.amsis-eventhero__when{ margin: 0; font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--turquoise); }
.amsis-eventhero__where{ margin: .3rem 0 1.5rem; color: var(--wp--preset--color--slate-light); }

.amsis-404-links{ list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; flex-wrap: wrap;
	max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; padding-inline: var(--amsis-gutter, 2rem); }
.amsis-404-links a{ font-weight: 700; color: var(--wp--preset--color--petrol); text-decoration: none; }

@media (max-width: 1024px){
	.amsis-article__grid{ grid-template-columns: 1fr; }
	.amsis-article__rail, .amsis-article__aside{ position: static; }
	.amsis-footer__inner{ grid-template-columns: 1fr; }
}

/* ===========================================================================
   The GENESIS landing page
   Two sections that exist only on /genesis/, which reproduces the homepage
   still live on amsis.de. Everything else on that page is the site's own.
   =========================================================================== */

/* The claim under the hero, and the five words it stands on. */
.amsis-keywords{
	list-style: none;
	margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem clamp(.6rem, 1.6vw, 1rem);
}

.amsis-keyword{
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small, .875rem);
	letter-spacing: .04em;
	color: var(--wp--preset--color--petrol-deep);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: .45rem 1rem;
	white-space: nowrap;
}

.amsis-on-dark .amsis-keyword{
	color: var(--wp--preset--color--turquoise);
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.18);
}

/* Standard software against GENESIS: the same three measures, priced twice. */
.amsis-costs__title{
	margin-top: clamp(1rem, 2.4vw, 1.75rem);
	font-size: var(--wp--preset--font-size--small, .875rem);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.amsis-costs{
	width: 100%;
	max-width: 46rem;
	margin: clamp(1.25rem, 3vw, 2rem) auto 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.amsis-costs th{
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small, .875rem);
	font-weight: 700;
	text-align: left;
	padding: .75rem 1rem;
	border-bottom: 2px solid var(--wp--preset--color--line);
}

/* The GENESIS column is the point of the table, so it is the one that is
   coloured — the comparison reads itself without a legend. */
.amsis-costs th:last-child{ color: var(--wp--preset--color--petrol); }

.amsis-costs td{
	padding: .85rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: clamp(.95rem, 1.6vw, 1.1rem);
}

.amsis-costs__a{ color: var(--wp--preset--color--slate); }

.amsis-costs__b{
	font-weight: 700;
	color: var(--wp--preset--color--midnight);
}

.amsis-on-dark .amsis-costs th{ border-bottom-color: rgba(255,255,255,.22); }
.amsis-on-dark .amsis-costs td{ border-bottom-color: rgba(255,255,255,.12); }
.amsis-on-dark .amsis-costs__a{ color: var(--wp--preset--color--slate-light); }
.amsis-on-dark .amsis-costs__b{ color: var(--wp--preset--color--white); }

@media (max-width: 600px){
	.amsis-costs th, .amsis-costs td{ padding: .6rem .5rem; }
	.amsis-keyword{ white-space: normal; }
}

/* ---- The GENESIS landing page ----------------------------------------
   The captured amsis.de one-pager sits in a frame, full-bleed, with its own
   header and footer hidden by the script so the site's are the only ones. The
   frame is given the height of the page inside it, so the window scrolls once
   rather than the frame scrolling within the page. */
.amsis-legacy{
	width: 100%;
	line-height: 0;          /* no descender gap under the frame */
}

.amsis-legacy__frame{
	display: block;
	border: 0;

	/* The 1px width with a 100% floor is the long-standing iOS workaround: on
	   iOS an iframe is sized to its content regardless of the width given, and
	   this is what makes it respect the column instead. */
	width: 1px;
	min-width: 100%;

	/* Deliberately not overflow:hidden with scrolling="no". The script sizes
	   the frame to its content so there is nothing to scroll — but if it ever
	   fails to run, hiding the overflow would leave a dead window onto a
	   14,000px page with no way to reach the rest of it. */
}

.amsis-legacy--missing{
	padding: var(--wp--preset--spacing--60, 4rem) var(--amsis-gutter, 2rem);
	text-align: center;
	color: var(--wp--preset--color--slate);
}

/* ===========================================================================
   AMSIS Insight
   One band for events, success stories, articles and press releases. It
   replaced two sections that each carried a heading, a lead and a button of
   their own — so the chrome here is deliberately thin: one head row, one row
   of cards, one button, and nothing between the cards but air.
   =========================================================================== */

/* The head row: words left, button right, on one line. The button belongs
   beside the heading rather than under the cards, where it reads as a footnote
   to the last card instead of as the way out of the section. */
.amsis-insight-head{
	margin-block-end: clamp(2rem, 4vw, 3rem);
	gap: clamp(1.5rem, 4vw, 3rem);
}

.amsis-insight-head .wp-block-column:last-child .wp-block-buttons{
	justify-content: flex-end;
	margin-top: 0;
}

.amsis-insight-head .is-style-amsis-lead{
	max-width: 52ch;
}

@media (max-width: 781px){
	.amsis-insight-head .wp-block-column:last-child .wp-block-buttons{
		justify-content: flex-start;
	}
}

/* The cards. auto-fit rather than a fixed count so a section holding four
   entries and a page holding twenty-four use the same rule. */
.amsis-insight-grid{
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

.amsis-insight-grid--2{ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.amsis-insight-grid--3{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.amsis-insight-grid--4{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* No card shell — no border, no panel, no shadow. The picture is the card, and
   the three lines under it are caption rather than content. A box around each
   one turned a row of four different kinds of thing into a row of four
   competing panels. */
.amsis-insight-card{
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	text-decoration: none;
	color: inherit;
}

.amsis-insight-card__media{
	display: block;
	overflow: hidden;
	border-radius: var(--amsis-radius-lg, 16px);
	background: var(--wp--preset--color--mist);
	aspect-ratio: 16 / 9;
	margin-block-end: 0.45rem;
}

.amsis-insight-card__media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--amsis-transition);
}

.amsis-insight-card:hover .amsis-insight-card__media img,
.amsis-insight-card:focus-visible .amsis-insight-card__media img{
	transform: scale(1.03);
}

/* A part photo on a transparent placeholder would be cropped to nothing by
   object-fit: cover, so the stand-in sits inside the frame instead. */
.amsis-insight-card__media .amsis-card__placeholder{
	object-fit: contain;
	padding: 12%;
}

/* What kind of thing this is, marked with the accent dot. */
.amsis-insight-card__kind{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--petrol-deep);
}

.amsis-insight-card__kind::before{
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
}

.amsis-insight-card__title{
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--midnight);
	transition: color var(--amsis-transition);
}

.amsis-insight-card:hover .amsis-insight-card__title,
.amsis-insight-card:focus-visible .amsis-insight-card__title{
	color: var(--wp--preset--color--petrol);
}

.amsis-insight-card__date{
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}

.amsis-insight-card:focus-visible{
	outline: 3px solid var(--wp--preset--color--turquoise);
	outline-offset: 6px;
	border-radius: 4px;
}

/* On midnight, the same card inverted. */
.amsis-on-dark .amsis-insight-card__kind{ color: var(--wp--preset--color--turquoise); }
.amsis-on-dark .amsis-insight-card__title{ color: var(--wp--preset--color--white); }
.amsis-on-dark .amsis-insight-card__date{ color: var(--wp--preset--color--slate-light); }

@media (prefers-reduced-motion: reduce){
	.amsis-insight-card__media img{ transition: none; }
	.amsis-insight-card:hover .amsis-insight-card__media img{ transform: none; }
}

/* ===========================================================================
   Customer quotes, one at a time
   Two quotes side by side meant the section could only ever show two of the
   nine there are, and the second was always the shorter one because the pair
   had to balance. One at a time, full measure, with the rest a click away.
   =========================================================================== */

.amsis-quotes{
	--amsis-quotes-interval: 8s;
	max-width: 64rem;
	margin-inline: auto;
}

/* The scroller. This is the slider: the buttons only scroll it, so a swipe on
   a phone and a click on a button are the same gesture as far as the page is
   concerned, and every quote is reachable with the script missing. */
.amsis-quotes__viewport{
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	border-radius: var(--amsis-radius-lg, 16px);
}

.amsis-quotes__viewport::-webkit-scrollbar{ display: none; }

.amsis-quotes__viewport:focus-visible{
	outline: 3px solid var(--wp--preset--color--turquoise);
	outline-offset: 4px;
}

.amsis-quotes__track{
	display: flex;
	/* No gap: each slide is exactly one viewport wide, and a gap would leave a
	   sliver of the next quote showing at every snap point. */
	gap: 0;
}

/* The slide is the box that stretches to the tallest quote; the card fills it
   by being a flex child of it. The card must not do that with height: 100%
   — a percentage height is a fixed box, and anything the box cannot hold is
   then clipped by the viewport's overflow with no way to reach it. That is
   what hid the name and company: they were below the card's bottom edge, and
   dragging a selection was the only thing that would scroll them into view. */
.amsis-quotes__slide{
	display: flex;
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* The card comes back inside the slider.
   Two quotes side by side were deliberately given no card — "one light breath
   after the dark run" — and at half width each that reads. One quote across
   the full measure with no card behind it is a paragraph that has lost its
   section, so the slider puts the panel back, and only here. */
.amsis-quotes__slide .amsis-testimonial{
	width: 100%;
	height: auto;
	margin: 0;
	background: var(--wp--preset--color--mist);
	border-radius: var(--amsis-radius-lg, 16px);
	padding: clamp(2rem, 4.5vw, 3.5rem);
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Long lines are the cost of one quote at full width. The text keeps a
   reading measure while the card keeps the section's width.
   flex: 0 0 auto, because the shared rule lets a quote grow to fill the card:
   on every slide but the longest that stretched the quote's own box and left
   a canyon of white between the words and the person who said them. */
.amsis-quotes__slide .amsis-testimonial__quote{
	flex: 0 0 auto;
	max-width: 58ch;
	margin: 0;
	line-height: 1.5;
}

.amsis-quotes__slide .amsis-testimonial__quote::before{
	font-size: clamp(3.5rem, 7vw, 5rem);
	line-height: 0.7;
	color: var(--wp--preset--color--line);
	margin-bottom: 1rem;
}

.amsis-on-dark .amsis-quotes__slide .amsis-testimonial{
	background: rgba(255, 255, 255, 0.06);
}

.amsis-on-dark .amsis-quotes__slide .amsis-testimonial__quote::before{
	color: rgba(255, 255, 255, 0.25);
}

/* ---- Controls ---------------------------------------------------------- */
.amsis-quotes__controls{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-block-start: clamp(1.25rem, 3vw, 2rem);
}

.amsis-quotes__count{
	margin: 0 0.35rem;
	min-width: 3.5rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--slate);
}

.amsis-quotes__nav{
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	transition: background var(--amsis-transition), color var(--amsis-transition);
}

.amsis-quotes__nav svg:not(.amsis-quotes__ring){
	width: 20px;
	height: 20px;
}

.amsis-quotes__nav:hover{
	background: var(--wp--preset--color--turquoise);
}

.amsis-quotes__nav:focus-visible{
	outline: 3px solid var(--wp--preset--color--turquoise);
	outline-offset: 3px;
}

/* ---- The timer ---------------------------------------------------------
   The ring around the next button is the clock. It runs one lap per quote,
   and the slide changes on the lap boundary — so what the ring shows and what
   the slider is about to do cannot drift apart. */
.amsis-quotes__ring{
	position: absolute;
	inset: 0;
	transform: rotate(-90deg);
	pointer-events: none;
	overflow: visible;
}

.amsis-quotes__ring circle{
	fill: none;
	stroke-width: 2;
}

.amsis-quotes__ring-track{ stroke: transparent; }

.amsis-quotes__ring-run{
	stroke: var(--wp--preset--color--orange);
	stroke-linecap: round;
	/* 2 * pi * r, r = 20. */
	stroke-dasharray: 125.66;
	stroke-dashoffset: 125.66;
}

.amsis-quotes__ring-run.is-running{
	animation: amsis-quotes-lap var(--amsis-quotes-interval, 8s) linear infinite;
}

.amsis-quotes.is-held .amsis-quotes__ring-run{
	animation-play-state: paused;
}

@keyframes amsis-quotes-lap{
	from{ stroke-dashoffset: 125.66; }
	to{ stroke-dashoffset: 0; }
}

/* ---- On a dark band ---------------------------------------------------- */
.amsis-on-dark .amsis-quotes__nav{
	background: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--white);
}

.amsis-on-dark .amsis-quotes__nav:hover{
	background: var(--wp--preset--color--turquoise);
	color: var(--wp--preset--color--midnight);
}

.amsis-on-dark .amsis-quotes__count{ color: var(--wp--preset--color--slate-light); }

/* Nothing advances on its own when the visitor has asked for less movement,
   so the ring has nothing to show. */
@media (prefers-reduced-motion: reduce){
	.amsis-quotes__ring{ display: none; }
	.amsis-quotes__viewport{ scroll-behavior: auto; }
}

/* ===========================================================================
   THEMIS — the launch page
   A teaser, not a product page: one screen of film, the wordmark, the claim,
   the clock, and a way to be told. Everything here is scoped to the page so
   none of it can leak into the rest of the site when the launch is over.
   =========================================================================== */

.amsis-themis-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* svh, not vh: on a phone, vh is the tallest the viewport ever gets, so a
	   full-height hero sits partly under the browser's own chrome until the
	   address bar retracts — and the clock is the part that goes missing. */
	min-height: calc(100svh - var(--amsis-header-height, 88px));
	padding-block: clamp(3rem, 8vh, 6rem);
	overflow: hidden;
	background: var(--wp--preset--color--midnight);
	isolation: isolate;
}

/* Two selectors, because the layout reaches this element even though it is
   taken out of the flow: a constrained group caps every child at the content
   measure and centres it with auto margins, and an absolutely positioned box
   with inset: 0 still obeys max-width. The film was a 760px strip down the
   middle of a 1440px hero with the plain background either side of it — the
   gap on the right was visible, the one on the left only hidden because the
   scrim's dark end matched what was behind it. */
.amsis-themis-hero__media,
.amsis-themis-hero > .amsis-themis-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none;
	background-size: cover;
	background-position: center;
}

.amsis-themis-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* The film is a user interface: legible enough to read as software, dark
   enough that white type sits on it. A flat dim does neither, so the scrim is
   heavier on the left where the words are and clears to the right. */
.amsis-themis-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(95deg,
			rgba(0, 25, 50, 0.93) 0%,
			rgba(0, 25, 50, 0.9) 36%,
			rgba(0, 25, 50, 0.55) 56%,
			rgba(0, 25, 50, 0.22) 76%,
			rgba(0, 25, 50, 0.14) 100%),
		linear-gradient(to top, rgba(0, 25, 50, 0.7) 0%, rgba(0, 25, 50, 0) 38%);
}

.amsis-themis-hero > :not(.amsis-themis-hero__media) {
	position: relative;
	z-index: 1;
}

/* Cover-style: the inner container takes the wide measure so the words start
   at the page gutter rather than 340px inside it, and the content block sits
   left within that. */
.amsis-themis-hero > .amsis-themis-hero__content {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	width: 100%;
}

/* The constrained layout centres every child with !important, which is why
   this answers in kind: the block is centred at the wide measure, the words
   inside it start at its left edge. */
.amsis-themis-hero__content > * {
	max-width: 44rem;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.amsis-themis__when {
	color: var(--wp--preset--color--orange) !important;
}

/* The wordmark, letterspaced the way the film sets it. */
.amsis-themis__mark {
	margin-block: 0.25em 0.35em !important;
	letter-spacing: 0.22em;
	text-indent: 0.22em;
	font-weight: 400;
	color: var(--wp--preset--color--white);
}

/* The thermal scale, as a rule under the wordmark — the same blue-to-red the
   simulation paints a part in, and the film closes on. */
.amsis-themis__mark::after {
	content: "";
	display: block;
	width: min(22rem, 70%);
	height: 3px;
	margin-top: 0.5em;
	border-radius: 2px;
	background: linear-gradient(90deg, #0084A4 0%, #78DEE6 22%, #86D46B 45%, #F5C842 68%, #FF6600 88%, #E23B1F 100%);
}

.amsis-themis__claim {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	line-height: 1.3;
	color: var(--wp--preset--color--white);
	margin-block: 0 0.75rem;
}

.amsis-themis-hero .is-style-amsis-lead {
	max-width: 46ch;
}

/* ---- The clock --------------------------------------------------------- */
.amsis-countdown {
	margin-block: clamp(2rem, 5vh, 3rem) clamp(1.5rem, 4vh, 2.5rem);
}

.amsis-countdown__units {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 3vw, 2.5rem);
}

.amsis-countdown__unit {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 3.5rem;
}

/* Colour is inherited, not set. Naming a colour here meant naming the one for
   a light band too, and the test for which band it was in looked at the
   countdown's parent — on the launch page that is the hero's inner group,
   which carries no amsis-on-dark, so the figures came out midnight on
   midnight and the clock was invisible. Whatever the band paints its text,
   the clock is that. */
.amsis-countdown__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 0.95;
	/* The figures change every second, and proportional digits make the whole
	   row jitter as they do. */
	font-variant-numeric: tabular-nums;
	color: inherit;
}

.amsis-countdown__label {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
}

.amsis-countdown__done {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	color: inherit;
	margin: 0;
}

.amsis-countdown.is-done .amsis-countdown__units { display: none; }

/* Four units wrap 3 + 1 on a phone, which reads as a mistake. Two and two. */
@media (max-width: 520px) {
	.amsis-countdown__units {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem 1rem;
		max-width: 20rem;
	}
}

/* ---- The three points -------------------------------------------------- */
.amsis-themis-points {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.amsis-themis-points .wp-block-column {
	border-top: 2px solid var(--wp--preset--color--orange);
	padding-top: 1.25rem;
}

.amsis-themis-points h3 {
	margin-block: 0 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	/* A film that plays itself is exactly what this asks to be spared. The
	   poster is painted on the media layer behind it, so hiding the video
	   leaves a still hero rather than a hole. */
	.amsis-themis-hero__video { display: none; }
}

/* ===========================================================================
   One event
   Facts on the left, held in view; artwork and description on the right;
   related entries underneath.
   =========================================================================== */

.amsis-event-page {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding: clamp(1.5rem, 3vw, 2.5rem) var(--amsis-gutter, 2rem) clamp(4rem, 8vw, 6rem);
}

.amsis-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--slate);
}

.amsis-crumbs a {
	color: var(--wp--preset--color--slate);
	text-decoration: none;
}

.amsis-crumbs a:hover { color: var(--wp--preset--color--petrol-deep); }

.amsis-crumbs [aria-current] { color: var(--wp--preset--color--midnight); }

.amsis-event-page__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

/* The facts stay put while the description scrolls past them. */
.amsis-event-page__facts {
	position: sticky;
	top: calc(var(--amsis-header-height, 88px) + 1.5rem);
}

/* The kind of event, with the accent dot the Insight cards use — the same
   marker for the same information, wherever it appears. */
.amsis-event-page__kind {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--petrol-deep);
}

.amsis-event-page__kind::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
}

.amsis-event-page__title {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.1;
}

/* Date, place and stand as a grid of labelled values, not a paragraph. */
.amsis-event-page__dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1.5rem;
	margin: 0 0 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.amsis-event-page__dl div { min-width: 0; }

.amsis-event-page__dl dt,
.amsis-event-page__label {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.amsis-event-page__dl dd {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--midnight);
}

.amsis-event-page__desc {
	margin: 0 0 1.5rem;
	color: var(--wp--preset--color--slate);
	line-height: 1.6;
}

.amsis-event-page__cta { margin: 0 0 2rem; }

.amsis-event-page__over {
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	border-radius: var(--amsis-radius, 12px);
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
}

.amsis-event-page__over a { display: block; margin-top: 0.35rem; }

.amsis-event-page__share {
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

/* ---- The artwork --------------------------------------------------------- */
.amsis-event-page__art {
	margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
	border-radius: var(--amsis-radius-lg, 16px);
	overflow: hidden;
}

.amsis-event-page__art img {
	display: block;
	width: 100%;
	height: auto;
}

/* The poster set from the event's own fields when nobody has made one. */
/* No overflow: hidden. An aspect-ratio box with hidden overflow resolves its
   minimum height to zero, so when the name wraps on a phone the box stays
   16:9 and the top of the poster is cut off — the lead line vanished and the
   name ran into the colour mark. With overflow visible the box grows to fit
   its words, and the background still follows the rounded corners. The top
   padding keeps the words clear of the mark whatever size they wrap to. */
.amsis-event-banner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 16 / 9;
	margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
	padding: calc(clamp(1.5rem, 4vw, 3rem) + 2rem) clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
	border-radius: var(--amsis-radius-lg, 16px);
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(0, 132, 164, 0.45) 0%, rgba(0, 25, 50, 0) 60%),
		var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
}

/* The thermal scale again, as the poster's one mark of colour. */
.amsis-event-banner::before {
	content: "";
	position: absolute;
	top: clamp(1.5rem, 4vw, 3rem);
	left: clamp(1.5rem, 4vw, 3rem);
	width: 4.5rem;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, #0084A4 0%, #78DEE6 22%, #86D46B 45%, #F5C842 68%, #FF6600 88%, #E23B1F 100%);
}

.amsis-event-banner__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1rem, 2vw, 1.4rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

.amsis-event-banner__name {
	margin: 0.15em 0 0.5em;
	font-size: clamp(2.5rem, 6vw, 4.75rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--white);
}

.amsis-event-banner__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
}

.amsis-event-page__content > :first-child { margin-top: 0; }

/* ---- Related ------------------------------------------------------------- */
.amsis-event-page__related {
	margin-top: clamp(3.5rem, 7vw, 5.5rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--wp--preset--color--line);
}

.amsis-event-page__related h2 { margin: 0 0 clamp(1.5rem, 3vw, 2rem); }

@media (max-width: 900px) {
	.amsis-event-page__grid { grid-template-columns: minmax(0, 1fr); }
	/* One column: the facts come first and scroll away normally. */
	.amsis-event-page__facts { position: static; }
}

/* The poster an event card shows when nobody has uploaded artwork — the same
   thing the event page's own banner does, at card size. */
.amsis-poster {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.35rem;
	width: 100%;
	height: 100%;
	padding: 1.25rem 1.4rem;
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(0, 132, 164, 0.45) 0%, rgba(0, 25, 50, 0) 60%),
		var(--wp--preset--color--midnight);
}

.amsis-poster::before {
	content: "";
	position: absolute;
	top: 1.25rem;
	left: 1.4rem;
	width: 2.75rem;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, #0084A4 0%, #78DEE6 22%, #86D46B 45%, #F5C842 68%, #FF6600 88%, #E23B1F 100%);
}

.amsis-poster__name {
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--white);
}

.amsis-poster__when {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
}

/* Past events: still there to read about, visibly not something to go to. */
.amsis-insight-grid--past .amsis-insight-card__media { opacity: 0.72; }
.amsis-insight-grid--past .amsis-insight-card:hover .amsis-insight-card__media { opacity: 1; }

/* ===========================================================================
   Page headers, on the THEMIS pattern
   Eyebrow, title, the thermal accent rule, then the description — the order
   the THEMIS launch page set, applied to every page that opens on a title.
   The rule is the same blue-to-red scale the simulation paints a part in,
   so the one mark of colour on a plain header is the thing AMSIS does.

   Covers the page header the builder writes (marked amsis-page-head), the
   Solution, Industry and Product heroes, and the archive heads. The last
   selector reaches pages built before the marker existed: their header is
   the mist band that opens the page, and nothing else opens that way.
   =========================================================================== */
.amsis-page-head h1,
.amsis-page-hero h1,
.amsis-list-head h1,
.amsis-main > .wp-block-group.has-mist-background-color:first-child h1.has-display-font-size {
	margin-bottom: 0;
}

.amsis-page-head h1::after,
.amsis-page-hero h1::after,
.amsis-list-head h1::after,
.amsis-main > .wp-block-group.has-mist-background-color:first-child h1.has-display-font-size::after {
	content: "";
	display: block;
	width: min(9rem, 40%);
	height: 3px;
	margin: 0.45em 0 0.7em;
	border-radius: 2px;
	background: linear-gradient(90deg, #0084A4 0%, #78DEE6 22%, #86D46B 45%, #F5C842 68%, #FF6600 88%, #E23B1F 100%);
}

/* A centred header centres its rule with it. */
.has-text-align-center.amsis-page-head h1::after,
.amsis-page-head .has-text-align-center::after,
.amsis-list-head.amsis-center h1::after {
	margin-inline: auto;
}

/* ===========================================================================
   The products quad
   Four tiles of equal weight, edge to edge with narrow gutters: a name, one
   line, one button, and the thing itself filling the foot of the tile.
   Light and dark alternate on the diagonal, so no two neighbours share a
   ground and the grid reads as four objects rather than one block.
   =========================================================================== */

.amsis-quad {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding: 12px;
	background: var(--wp--preset--color--white);
}

/* The constrained layout would cap each tile at the reading measure and
   centre it; these are the full width of their column. */
.amsis-quad > .amsis-quad__tile {
	max-width: none !important;
	margin: 0 !important;
}

.amsis-quad__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-height: clamp(560px, 46vw, 740px);
	padding: clamp(2.75rem, 4.5vw, 4rem) clamp(1.5rem, 3vw, 3rem) 0;
	overflow: hidden;
	isolation: isolate;
}

.amsis-quad__tile > * { margin-block: 0; }

.amsis-quad__tile--light { background: var(--wp--preset--color--mist); color: var(--wp--preset--color--midnight); }
.amsis-quad__tile--dark  { background: var(--wp--preset--color--midnight); color: var(--wp--preset--color--white); }
.amsis-quad__tile--themis { background: #04101f; }

/* ---- The name ------------------------------------------------------------ */
.amsis-quad__lockup {
	gap: 0.55rem !important;
	align-items: center;
	margin-bottom: 0.6rem !important;
}

.amsis-quad__logo { margin: 0 !important; }

.amsis-quad__logo img {
	display: block;
	height: clamp(2rem, 3.2vw, 2.85rem);
	width: auto;
}

.amsis-quad__name {
	margin: 0 !important;
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: inherit;
}

/* All four names are set as the site's headings are — Montserrat 700, drawn
   in — so the tiles read as one range, not four typefaces. */
.amsis-quad__name--plain { margin-bottom: 0.6rem !important; }

.amsis-quad__line {
	max-width: 30ch;
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	line-height: 1.35;
	color: inherit;
}

.amsis-quad__tile--dark .amsis-quad__line { color: rgba(255, 255, 255, 0.86); }

.amsis-quad__tile .wp-block-buttons {
	justify-content: center;
	margin-top: 1.4rem !important;
}

/* ---- The picture --------------------------------------------------------- */
.amsis-quad__media {
	margin: auto 0 0 !important;
	width: 100%;
}

.amsis-quad__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* The interface, as a screen standing on the tile. */
.amsis-quad__media--screen {
	width: min(92%, 42rem);
	margin-top: auto !important;
	transform: translateY(12%);
}

.amsis-quad__media--screen img {
	border-radius: 12px;
	box-shadow: 0 30px 60px -20px rgba(0, 25, 50, 0.45), 0 0 0 1px rgba(0, 25, 50, 0.08);
}

/* A photograph filling the foot of a dark tile, fading up into the ground so
   the words above never sit on a busy picture. */
.amsis-quad__media--bleed {
	position: absolute;
	inset: auto 0 0 0;
	z-index: -1;
	height: 68%;
	width: 100%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
	        mask-image: linear-gradient(to bottom, transparent 0%, #000 34%);
}

.amsis-quad__media--bleed img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}

/* ---- THEMIS -------------------------------------------------------------- */
.amsis-themis-status {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.amsis-themis-status__status {
	margin: 0 0 0.9rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
}

/* Launched: the date gives way to one word, in a pill, like a store's "New". */
.amsis-themis-status__status.is-live {
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
	letter-spacing: 0.1em;
}

.amsis-themis-status__mark {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--wp--preset--color--white);
}

/* The thermal scale under the name — the same mark as the launch page. */
.amsis-themis-status__mark::after {
	content: "";
	display: block;
	width: 7rem;
	height: 3px;
	margin: 0.6em auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, #0084A4 0%, #78DEE6 22%, #86D46B 45%, #F5C842 68%, #FF6600 88%, #E23B1F 100%);
}

/* ---- Runs on ------------------------------------------------------------- */
.amsis-quad__partners {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: center;
	justify-items: center;
	gap: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
	width: min(100%, 34rem);
	margin: auto 0 !important;
	padding: clamp(2rem, 4vw, 3rem) 0;
}

.amsis-quad__partner { margin: 0 !important; }

/* The white set, turned to a single dark ink: one logo wall rather than five
   brand colours competing, and every mark the same weight. */
.amsis-quad__partner img {
	display: block;
	height: clamp(1.6rem, 2.4vw, 2.1rem);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	filter: brightness(0);
	opacity: 0.72;
	transition: opacity var(--amsis-transition);
}

.amsis-quad__partner img:hover { opacity: 1; }

/* ---- One column on a phone ---------------------------------------------- */
@media (max-width: 781px) {
	.amsis-quad {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 10px;
	}

	.amsis-quad__tile { min-height: 520px; }
	.amsis-quad__partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- The hero's mark ----------------------------------------------------- */
/* Only the bottom margin: the layout centres the block with auto side
   margins, and a margin shorthand here took those away and pinned the mark
   to the left edge of the hero, a column away from the title under it. */
.amsis-page-hero__logo {
	margin-top: 0 !important;
	margin-bottom: 1.25rem !important;
}

.amsis-page-hero__logo img {
	display: block;
	height: clamp(2.25rem, 3.6vw, 3rem);
	width: auto;
}

/* Over a backdrop the hero turns dark, and the mark turns white with it. */
.amsis-page-hero:has(.amsis-hero-backdrop) .amsis-page-hero__logo img {
	filter: brightness(0) invert(1);
}

/* ===========================================================================
   The Technology page, bite-sized
   A product page rather than the deck: a headline, one sentence, and a
   picture or a number per chapter, with a bar that carries "Book a demo"
   the whole way down. Everything cut from the page is behind a "+".
   =========================================================================== */

/* ---- The bar: the page's name, the chapters, one button ------------------ */
.amsis-anchor-nav--bar .amsis-anchor-nav__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 0 var(--amsis-gutter);
}

.amsis-anchor-nav--bar ul {
	flex: 1;
	justify-content: center;
	max-width: none;
	margin: 0;
	padding: 0;
}

.amsis-anchor-nav__title {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: var(--wp--preset--color--midnight);
}

.amsis-anchor-nav .amsis-anchor-nav__cta {
	flex: none;
	padding: 0.5rem 1.1rem;
	border: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--midnight);
}

/* A phone keeps the name and the button; the chapters are a scroll away. */
@media (max-width: 900px) {
	.amsis-anchor-nav--bar ul { display: none; }
	.amsis-anchor-nav--bar .amsis-anchor-nav__inner {
		justify-content: space-between;
		gap: 0.75rem;
		padding-block: 0.6rem;
	}

	/* The name gives way before the button does: "Demo vereinbaren" beside
	   "GENESIS Technologie" is wider than a phone. */
	.amsis-anchor-nav__title {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.95rem;
	}

	.amsis-anchor-nav .amsis-anchor-nav__cta { padding: 0.45rem 0.85rem; }
}

/* ---- Chapter headers, with the thermal rule the THEMIS page set ---------- */
.amsis-brief .amsis-section-header h2::after,
.amsis-highlights__title::after {
	content: "";
	display: block;
	width: min(7rem, 30%);
	height: 3px;
	margin: 0.55em auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, #0084A4 0%, #78DEE6 22%, #86D46B 45%, #F5C842 68%, #FF6600 88%, #E23B1F 100%);
}

.amsis-highlights__title::after { margin-left: 0; }

.amsis-brief .amsis-section-header .is-style-amsis-lead {
	max-width: 40ch;
	margin-inline: auto;
}

/* ---- Get the highlights ------------------------------------------------- */
.amsis-highlights__title {
	margin: 0 0 2rem !important;
}

.amsis-highlights__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.amsis-highlights__track::-webkit-scrollbar { display: none; }

.amsis-highlight {
	position: relative;
	flex: 0 0 clamp(270px, 30%, 380px);
	display: flex;
	flex-direction: column;
	min-height: 480px;
	margin: 0 !important;
	padding: 2rem 2rem 0;
	border-radius: 24px;
	overflow: hidden;
	background: var(--wp--preset--color--mist);
	scroll-snap-align: start;
}

.amsis-highlight > * { margin-block: 0; }

.amsis-highlight .amsis-highlight__text {
	font-size: clamp(1.2rem, 1.7vw, 1.45rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--midnight);
}

.amsis-highlight__text strong { font-weight: 700; }

.amsis-highlight__media {
	flex: 1;
	display: flex;
	align-items: center;
	margin: 1rem -2rem 0 !important;
}

.amsis-highlight__media img {
	display: block;
	width: 100%;
	height: 300px;
	padding: 0 1.5rem 1.5rem;
	object-fit: contain;
	/* The renders sit on white; multiplied, the white becomes the card. */
	mix-blend-mode: multiply;
}

.amsis-highlight--dark { background: #111418; }
.amsis-highlight--dark .amsis-highlight__text { color: var(--wp--preset--color--white); }
.amsis-highlight--dark .amsis-highlight__media { align-items: flex-end; }

.amsis-highlight--dark .amsis-highlight__media img {
	height: 320px;
	padding: 0;
	object-fit: cover;
	mix-blend-mode: normal;
}

.amsis-highlights__paddles {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.amsis-highlights__paddles[hidden] { display: none; }

.amsis-highlights__paddle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--mist);
	color: var(--wp--preset--color--midnight);
	cursor: pointer;
	transition: background var(--amsis-transition), opacity var(--amsis-transition);
}

.amsis-highlights__paddle svg { width: 20px; height: 20px; }
.amsis-highlights__paddle:hover:not(:disabled) { background: #dfe7ec; }
.amsis-highlights__paddle:disabled { opacity: 0.35; cursor: default; }

/* ---- Physics: the photograph pair --------------------------------------- */
.amsis-brief .amsis-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 980px !important;
	margin-top: 3rem !important;
}

.amsis-pair__item { margin: 0 !important; }

.amsis-pair__item img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 20px;
}

.amsis-pair__item figcaption {
	margin-top: 0.9rem;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--midnight);
}

.amsis-pair__item figcaption::before {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-right: 0.5em;
	border-radius: 50%;
	vertical-align: 0.05em;
	background: #E23B1F;
}

.amsis-pair__item--after figcaption::before { background: #0084A4; }

/* ---- The film ------------------------------------------------------------ */
.amsis-brief .amsis-brief__film {
	max-width: min(860px, 100%) !important;
	margin-top: 3rem !important;
}

/* ---- Big numbers --------------------------------------------------------- */
.amsis-brief .amsis-figures {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	max-width: 960px !important;
	margin-top: 3.5rem !important;
	text-align: center;
}

.amsis-figure { margin: 0 !important; }

.amsis-brief .amsis-figure p.amsis-figure__value {
	margin: 0;
	font-size: clamp(2.6rem, 5vw, 4.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: var(--wp--preset--color--midnight);
}

.amsis-brief.amsis-on-dark .amsis-figure p.amsis-figure__value { color: var(--wp--preset--color--white); }

.amsis-brief .amsis-figure p.amsis-figure__label {
	max-width: 22ch;
	margin: 0.75rem auto 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.amsis-brief .amsis-brief__note {
	margin-top: 2rem !important;
	text-align: center;
	font-size: var(--wp--preset--font-size--x-small);
	opacity: 0.8;
}

.amsis-brief .amsis-brief__more {
	margin-top: 2rem !important;
	text-align: center;
}

.amsis-brief__more .amsis-seemore { margin-top: 0; }

/* ---- Take a closer look -------------------------------------------------- */
.amsis-brief .amsis-closer {
	max-width: 1080px !important;
	margin-top: 2.5rem !important;
}

.amsis-closer__tabs {
	display: flex;
	gap: 0.25rem;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 2.25rem;
	padding: 0.3rem;
	overflow-x: auto;
	border-radius: 999px;
	background: var(--wp--preset--color--mist);
	scrollbar-width: none;
}

.amsis-closer__tab {
	padding: 0.65rem 1.3rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
	color: var(--wp--preset--color--slate);
	cursor: pointer;
	transition: background var(--amsis-transition), color var(--amsis-transition), box-shadow var(--amsis-transition);
}

.amsis-closer__tab:hover { color: var(--wp--preset--color--midnight); }

.amsis-closer__tab[aria-selected="true"] {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--midnight);
	box-shadow: 0 2px 10px -2px rgba(0, 25, 50, 0.18);
}

.amsis-closer__panel {
	margin: 0 !important;
	text-align: center;
}

.amsis-closer__panel + .amsis-closer__panel { margin-top: 4rem !important; }
.amsis-closer__panel[hidden] { display: none !important; }
.amsis-closer.is-tabbed .amsis-closer__panel { margin-top: 0 !important; animation: amsis-closer-in 0.35s ease both; }

@keyframes amsis-closer-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.amsis-closer.is-tabbed .amsis-closer__panel { animation: none; }
}

.amsis-closer__name {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--large);
}

/* The tab carries the name once the panels are tabs. */
.amsis-closer.is-tabbed .amsis-closer__name {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.amsis-closer__media { margin: 0 !important; }

.amsis-closer__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 30px 60px -28px rgba(0, 25, 50, 0.45), 0 0 0 1px rgba(0, 25, 50, 0.08);
}

.amsis-closer .amsis-closer__text {
	max-width: 46ch;
	margin: 1.75rem auto 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--slate);
}

.amsis-closer .amsis-brief__more { margin-top: 1.25rem !important; }

/* ---- For OEMs: the machines, by name ------------------------------------- */
.amsis-brief .amsis-brief__partners {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.5rem 3rem;
	margin-top: 3.5rem !important;
}

.amsis-brief__partner { margin: 0 !important; }

/* Each mark in the same box, so a wide wordmark and a stacked one read at
   the same weight rather than at the same height. */
.amsis-brief__partner img {
	display: block;
	width: clamp(96px, 10vw, 128px);
	height: 34px;
	object-fit: contain;
	filter: brightness(0);
	opacity: 0.6;
}

/* ---- A phone ------------------------------------------------------------- */
@media (max-width: 781px) {
	.amsis-highlight { flex-basis: 82%; min-height: 440px; padding: 1.6rem 1.6rem 0; }
	.amsis-highlight__media { margin-inline: -1.6rem !important; }
	.amsis-highlight__media img { height: 260px; }
	.amsis-brief .amsis-pair { gap: 12px; }
	.amsis-pair__item img { border-radius: 14px; }
	.amsis-brief .amsis-figures { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
	/* Three tabs across a phone: the bar takes the full width and the tabs
	   share it; narrower than 390px it scrolls rather than wraps. */
	.amsis-closer__tabs { width: 100%; justify-content: space-between; gap: 0; padding: 0.25rem; }
	.amsis-closer__tab { flex: 1 1 auto; padding: 0.55rem 0.45rem; font-size: 0.74rem; }
}

/* ===========================================================================
   Product pages, on the flagship pattern
   The name as a GENESIS lockup, a tagline set large, one line, the product
   itself. Then highlights, one chapter, three points, and "which one".
   =========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.amsis-product-hero .amsis-product-hero__name {
	margin: 0 auto 0.9rem;
	font-size: clamp(1.35rem, 2.2vw, 1.85rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* The GENESIS mark set inline with the product word — one heading, read as
   "GENESIS Print Suite". */
.amsis-product-hero__mark {
	display: inline-block;
	height: 0.95em;
	width: auto;
	margin-right: 0.2em;
	vertical-align: -0.12em;
}

.amsis-product-hero .amsis-product-hero__tagline {
	max-width: 16ch;
	margin: 0 auto;
	font-size: clamp(2.6rem, 6vw, 4.75rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--midnight);
}

.amsis-product-hero__tagline::after {
	content: "";
	display: block;
	width: min(9rem, 40%);
	height: 3px;
	margin: 0.4em auto 0;
	border-radius: 2px;
	background: linear-gradient(90deg, #0084A4 0%, #78DEE6 22%, #86D46B 45%, #F5C842 68%, #FF6600 88%, #E23B1F 100%);
}

.amsis-product-hero .amsis-product-hero__line {
	max-width: 40ch;
	margin: 1.25rem auto 0;
}

.amsis-brief .amsis-product-hero__media {
	max-width: 1080px !important;
	margin-top: 3.5rem !important;
}

.amsis-product-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 40px 80px -36px rgba(0, 25, 50, 0.5), 0 0 0 1px rgba(0, 25, 50, 0.06);
}

/* ---- Before and after, for renders on white ----------------------------- */
.amsis-pair--wide .amsis-pair__item img {
	aspect-ratio: 2 / 1;
	padding: 1rem;
	object-fit: contain;
	background: var(--wp--preset--color--white);
}

.amsis-on-dark .amsis-pair__item figcaption { color: var(--wp--preset--color--white); }

/* ---- The pipeline, drawn large ------------------------------------------ */
.amsis-brief .amsis-pipeline {
	display: flex;
	justify-content: center;
	max-width: 1080px !important;
	margin-top: 3rem !important;
}

.amsis-brief .amsis-pipeline p.amsis-pipeline__step {
	position: relative;
	flex: 1 1 0;
	margin: 0;
	padding: 1.5rem 1rem;
	border: 1px solid rgba(120, 222, 230, 0.25);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	text-align: center;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--white);
}

.amsis-brief .amsis-pipeline p.amsis-pipeline__step:last-child {
	border-color: var(--wp--preset--color--turquoise);
	background: rgba(120, 222, 230, 0.12);
}

.amsis-brief .amsis-pipeline p.amsis-pipeline__step + p.amsis-pipeline__step { margin-left: 2.25rem; }

.amsis-pipeline .amsis-pipeline__step + .amsis-pipeline__step::before {
	content: "›";
	position: absolute;
	top: 50%;
	left: -1.55rem;
	transform: translateY(-50%);
	font-size: 1.5rem;
	color: var(--wp--preset--color--turquoise);
}

.amsis-pipeline__n {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--turquoise);
}

/* ---- Three points, the claim in bold ------------------------------------- */
.amsis-brief .amsis-keypoints {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	max-width: 1080px !important;
	margin-top: 2.5rem !important;
}

.amsis-brief .amsis-keypoints .amsis-keypoint {
	margin: 0;
	padding: 2rem;
	border-radius: 20px;
	background: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--slate);
}

.amsis-keypoint strong { color: var(--wp--preset--color--midnight); }

/* A card is the other grey from the band it sits on. */
.has-mist-background-color .amsis-keypoints .amsis-keypoint,
.has-mist-background-color .amsis-lineup__col,
.has-mist-background-color .amsis-lineup__module a {
	background: var(--wp--preset--color--white);
}

/* ---- Which GENESIS is right for you -------------------------------------- */
.amsis-brief .amsis-lineup {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 980px !important;
	margin-top: 2.5rem !important;
}

.amsis-lineup__col {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: 2.5rem 2rem 2rem;
	border-radius: 24px;
	background: var(--wp--preset--color--mist);
	text-align: center;
}

.amsis-lineup__col.is-current { box-shadow: inset 0 0 0 2px var(--wp--preset--color--turquoise); }

.amsis-lineup__col > * { margin-block: 0; }

.amsis-lineup .amsis-lineup__name {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.amsis-lineup .amsis-lineup__for {
	margin-top: 0.6rem;
	color: var(--wp--preset--color--slate);
}

.amsis-lineup .amsis-lineup__list {
	flex: 1;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.amsis-lineup__list li {
	padding: 0.8rem 0;
	border-top: 1px solid rgba(0, 25, 50, 0.1);
	color: var(--wp--preset--color--midnight);
}

.amsis-lineup__col .wp-block-buttons { margin-top: 1.5rem !important; }

.amsis-brief .amsis-lineup__label {
	margin-top: 3.5rem !important;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.amsis-brief .amsis-lineup__modules {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	max-width: 980px !important;
	margin-top: 1rem !important;
}

.amsis-lineup__module { margin: 0 !important; }

.amsis-lineup__module a {
	display: block;
	height: 100%;
	padding: 1.25rem 1.4rem;
	border-radius: 16px;
	background: var(--wp--preset--color--mist);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	text-decoration: none;
	color: var(--wp--preset--color--slate);
	transition: box-shadow var(--amsis-transition);
}

.amsis-lineup__module a:hover { box-shadow: inset 0 0 0 1px rgba(0, 99, 118, 0.35); }
.amsis-lineup__module.is-current a { box-shadow: inset 0 0 0 2px var(--wp--preset--color--turquoise); }

.amsis-lineup__module strong {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--midnight);
}

/* ---- A phone ------------------------------------------------------------- */
@media (max-width: 781px) {
	.amsis-brief .amsis-pipeline { flex-direction: column; align-items: stretch; }
	.amsis-brief .amsis-pipeline p.amsis-pipeline__step + p.amsis-pipeline__step { margin-left: 0; margin-top: 2rem; }
	.amsis-pipeline .amsis-pipeline__step + .amsis-pipeline__step::before { top: -1.7rem; left: 50%; transform: translateX(-50%) rotate(90deg); }
	.amsis-brief .amsis-keypoints,
	.amsis-brief .amsis-lineup,
	.amsis-brief .amsis-lineup__modules { grid-template-columns: minmax(0, 1fr); }
	.amsis-brief .amsis-product-hero__media { margin-top: 2.5rem !important; }

	/* German runs to words like "Entscheidungen" that are wider than a phone
	   at the desktop size: scale with the screen, and break if it must. */
	.amsis-product-hero .amsis-product-hero__tagline {
		font-size: clamp(1.9rem, 8.4vw, 2.6rem);
	}
}

/* ===========================================================================
   Running text on a plain page — the Imprint, the Privacy Policy
   A column lined up under the page title, at a length a line can be read
   in, with headings spaced so a 5,000-word policy can be scanned.
   =========================================================================== */
/* The gutter sits outside the column, as it does around the title band, so
   the text starts exactly under the title. */
.amsis-page-body {
	width: min(var(--wp--style--global--wide-size, 1200px), 100% - 2 * var(--amsis-gutter));
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--60, 4rem) var(--wp--preset--spacing--70, 6rem);
	color: var(--wp--preset--color--midnight);
}

.amsis-page-body > * {
	max-width: 72ch;
	margin-block: 0;
}

.amsis-page-body > * + * { margin-top: 1rem; }

.amsis-page-body p,
.amsis-page-body li {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	color: var(--wp--preset--color--slate);
	/* The policies quote long URLs in the text; a phone must still fit them. */
	overflow-wrap: anywhere;
}

.amsis-page-body strong { color: var(--wp--preset--color--midnight); }

.amsis-page-body h2 {
	margin-top: 3.5rem;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
}

.amsis-page-body h3 {
	margin-top: 2.25rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.amsis-page-body h4 {
	margin-top: 1.75rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
}

.amsis-page-body > :first-child { margin-top: 0; }

.amsis-page-body ul,
.amsis-page-body ol { padding-left: 1.25rem; }

.amsis-page-body li + li { margin-top: 0.35rem; }

.amsis-page-body a {
	color: var(--wp--preset--color--petrol-deep);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.amsis-page-body a:hover { color: var(--wp--preset--color--midnight); }

/* ---- Homepage headings, with the rule the new pages carry ---------------- */
/* Technology and the product pages put the thermal rule under every section
   heading; the homepage's five now match. Centred headings centre it. */
#genesis-value h2.has-xx-large-font-size::after,
#usecases .amsis-section-header h2::after,
.amsis-quotes-band .amsis-section-header h2::after,
#insight h2.has-xx-large-font-size::after,
#kontakt h2.has-xx-large-font-size::after {
	content: "";
	display: block;
	width: min(7rem, 30%);
	height: 3px;
	margin: 0.55em 0 0;
	border-radius: 2px;
	background: linear-gradient(90deg, #0084A4 0%, #78DEE6 22%, #86D46B 45%, #F5C842 68%, #FF6600 88%, #E23B1F 100%);
}

#usecases .amsis-section-header h2::after,
.amsis-quotes-band .amsis-section-header h2::after {
	margin-inline: auto;
}

/* ---- Product hero: two renders, before and after --------------------------
   For products whose best picture only exists small. Each render is shown at
   no more than its own width, so it stays sharp, and the pair tells the
   story a single enlarged picture could not: what the simulation predicts,
   then what the product does about it. */
.amsis-brief .amsis-product-hero__pair {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 56px;
	max-width: 1080px !important;
	margin-top: 3.5rem !important;
}

.amsis-product-hero__cell {
	margin: 0 !important;
	padding: 1.25rem 1.25rem 0;
	border-radius: 20px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 30px 60px -32px rgba(0, 25, 50, 0.35), 0 0 0 1px rgba(0, 25, 50, 0.05);
	text-align: center;
}

.amsis-product-hero__cell img {
	display: block;
	width: 100%;
	max-width: 592px;
	height: auto;
	margin-inline: auto;
}

.amsis-product-hero__cell figcaption {
	margin: 0;
	padding: 0.9rem 0 1.1rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--midnight);
}

.amsis-product-hero__cell figcaption::before {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-right: 0.5em;
	border-radius: 50%;
	vertical-align: 0.05em;
	background: #E23B1F;
}

.amsis-product-hero__cell--after figcaption::before { background: #0084A4; }

/* The step from one to the other. */
.amsis-product-hero__cell--after::before {
	content: "›";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2rem;
	line-height: 1;
	color: var(--wp--preset--color--turquoise);
}

@media (max-width: 781px) {
	.amsis-brief .amsis-product-hero__pair { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.amsis-product-hero__cell--after::before { transform: translate(-50%, -50%) rotate(90deg); }
}

/* ===========================================================================
   The products range before THEMIS is revealed — three tiles
   GENESIS Print Suite across the full width, the software on a screen below
   its name; GENESIS API and the machines it runs on side by side under it.
   The same tiles as the quad, one of them wider.
   =========================================================================== */
.amsis-quad--trio > .amsis-quad__tile--wide {
	grid-column: 1 / -1;
	min-height: clamp(600px, 52vw, 800px);
}

/* A full-width tile has room for its line on one row. */
.amsis-quad__tile--wide .amsis-quad__line { max-width: 52ch; }

/* The screen, wider than in a half tile, standing on the tile's foot. */
.amsis-quad__media--screen.amsis-quad__media--wide {
	width: min(88%, 60rem);
	transform: translateY(10%);
}

/* Two buttons — learn more, then the action — as the reference range sets
   them. */
.amsis-quad--trio .amsis-quad__tile .wp-block-buttons {
	gap: 0.75rem;
}

@media (max-width: 781px) {
	.amsis-quad--trio > .amsis-quad__tile--wide { min-height: 540px; }
	.amsis-quad__media--screen.amsis-quad__media--wide { width: 100%; transform: translateY(14%); }
}

/* ---- A dark hero with no film behind it — the Products page ---------------
   The same band a video hero makes, without the video: midnight, the claim at
   hero size, the text in white. */
.amsis-page-hero.amsis-page-hero--dark {
	padding-block: clamp(4rem, 10vw, 8rem) !important;
}

.amsis-page-hero--dark h1.has-display-font-size {
	font-size: var(--wp--preset--font-size--hero) !important;
	line-height: 1.04;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--white);
}

.amsis-page-hero--dark .is-style-amsis-lead {
	color: var(--wp--preset--color--white) !important;
}

/* Before/after frames for photographs, which are near-square: the wide frame
   cut off the top and the base of the part. */
.amsis-compare.amsis-compare--photo { aspect-ratio: 5 / 4; }
.amsis-compare.amsis-compare--square { aspect-ratio: 1 / 1; }

/* ===========================================================================
   Brand refresh (October 2026)
   Seven changes approved from the proposal page, numbered as there:
   01 statement headlines · 02 powder on dark bands · 03 isotherms on light
   bands · 04 closing band with three ways in · 05 the machines under the
   product name · 06 parts on a dark stage · 07 covers for articles.
   The two surfaces are made for AMSIS: a generated powder bed (tiles, one
   image for every dark band) and isotherm lines (a 25 KB drawing).
   =========================================================================== */

/* ---- 01 Statement headlines --------------------------------------------
   Every section headline and page title on the site, in heavy capitals —
   the storytelling voice. Body copy, labels and buttons stay in sentence
   case so the capitals stay rare. The homepage hero takes the same voice at
   its own, larger size, and "Layer" keeps its turquoise.

   No hyphenation: a word is never cut in the middle. A line breaks only
   between words (or at a hyphen the word already has, as in "support-free").
   Where a single word is wider than its line — German makes them — site.js
   steps the headline down until it fits. */
.amsis-statement,
.amsis-hero__content h1,
.amsis-main h1.has-display-font-size:not(.amsis-hero__content h1),
.amsis-main h2.has-xx-large-font-size,
.amsis-section-header h2,
.amsis-highlights__title,
.amsis-product-hero .amsis-product-hero__tagline,
.amsis-list-head h1,
.amsis-page-cta__title {
	text-transform: uppercase;
	font-weight: 800 !important;
	letter-spacing: 0.005em !important;
	line-height: 0.98 !important;
	hyphens: manual !important;
	-webkit-hyphens: manual !important;
	overflow-wrap: normal !important;
	word-break: normal !important;
}

.amsis-product-hero .amsis-product-hero__tagline {
	max-width: 24ch;
	font-size: clamp(2.1rem, 5.2vw, 4.4rem);
}

/* Capitals run wider than sentence case. Section headlines get room to stay
   on the lines they were written as, and page titles span the hero rather
   than the reading column, the way a statement does. */
.amsis-main h2.has-xx-large-font-size,
.amsis-section-header h2 { font-size: clamp(1.8rem, 3.9vw, 3.4rem) !important; }

.amsis-brief > .amsis-section-header,
.amsis-section-header > h2 { max-width: 1080px !important; }

.amsis-main h1.has-display-font-size:not(.amsis-hero__content h1),
.amsis-page-hero:has(.amsis-hero-backdrop) h1.has-display-font-size,
.amsis-list-head h1 {
	max-width: 1080px !important;
	font-size: clamp(2.3rem, 5vw, 4.4rem) !important;
}

/* In a hero the title starts where the label and the lead start — the left
   edge of the reading column — and runs wider to the right only, so the
   page keeps one left edge. */
.amsis-page-hero > h1.has-display-font-size {
	max-width: none !important;
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 760px)) / 2)) !important;
	margin-right: 0 !important;
}

/* ---- 02 Powder on the dark bands ---------------------------------------
   Every dark band rests on the powder bed: it rises from the bottom and
   fades out before it reaches the words. Bands with a film or a photograph
   behind them keep their picture. */
.amsis-brief.amsis-on-dark,
.amsis-page-hero--dark,
.amsis-main > .wp-block-group.alignfull.amsis-on-dark:not(.amsis-page-hero):not(:has(video)):not(:has(.wp-block-cover)),
.amsis-main > .wp-block-group.alignfull.has-midnight-background-color:not(:has(video)),
.amsis-main > .wp-block-group.alignfull.has-midnight-depth-gradient-background:not(:has(video)) {
	background-color: #000b16 !important;
	background-image:
		linear-gradient(to bottom, #000b16 0%, rgba(0, 11, 22, 0.94) 38%, rgba(0, 11, 22, 0.55) 72%, rgba(0, 11, 22, 0.25) 100%),
		url(../images/brand/powder.jpg) !important;
	background-size: auto, 640px !important;
	background-position: 0 0, center bottom !important;
	background-repeat: no-repeat, repeat !important;
}

/* ---- 03 Isotherms on the light bands -----------------------------------
   Where a page opens on a light band — product heroes, page headers, the
   listings — and where every page closes. The middle of a page stays calm. */
.amsis-product-hero,
.amsis-page-cta--ways,
.amsis-cta--ways,
.amsis-page-hero:not(.amsis-page-hero--dark):not(:has(.amsis-hero-backdrop)),
.amsis-page-head,
.amsis-list-head {
	background-image: url(../images/brand/isotherms.svg) !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.amsis-product-hero,
.amsis-page-hero:not(.amsis-page-hero--dark):not(:has(.amsis-hero-backdrop)),
.amsis-page-head,
.amsis-list-head { background-color: var(--wp--preset--color--mist) !important; }

.amsis-page-cta--ways,
.amsis-cta--ways { background-color: var(--wp--preset--color--white) !important; }

/* ---- 04 The closing band, with three ways in --------------------------- */
.amsis-page-cta--ways { color: var(--wp--preset--color--midnight); text-align: center; }

.amsis-page-cta--ways .amsis-page-cta__inner { max-width: 1040px !important; }

/* The inner group is constrained, which would hold the button row to the
   reading measure and push the third button onto a line of its own. */
.amsis-page-cta--ways .amsis-page-cta__inner > * { max-width: none !important; }

.amsis-page-cta--ways .amsis-page-cta__eyebrow {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #E5531A;
}

.amsis-page-cta--ways .amsis-page-cta__title {
	margin: 0 0 2.25rem;
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	color: var(--wp--preset--color--midnight);
}

.amsis-page-cta--ways .wp-block-buttons { gap: 0.9rem; }

/* The two ways in that are not the demo: solid midnight, so the demo is the
   one turquoise button among them. */
.amsis-page-cta--ways .is-style-amsis-ghost > .wp-block-button__link {
	border-color: var(--wp--preset--color--midnight);
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
}

.amsis-page-cta--ways .is-style-amsis-ghost > .wp-block-button__link:hover {
	background: var(--wp--preset--color--midnight-tint, #0b2a44);
}

/* The theme's closing band on articles, events and the listings. */
.amsis-cta.amsis-cta--ways {
	padding-block: var(--wp--preset--spacing--70, 6rem);
	color: var(--wp--preset--color--midnight);
	text-align: center;
}

.amsis-cta--ways .amsis-cta__inner { max-width: 1040px; margin-inline: auto; padding-inline: var(--amsis-gutter); }

.amsis-cta--ways .amsis-page-cta__eyebrow {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #E5531A;
}

.amsis-cta--ways .amsis-page-cta__title {
	margin: 0 0 2.25rem;
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	color: var(--wp--preset--color--midnight);
}

.amsis-cta--ways .amsis-cta__buttons { gap: 0.9rem; margin-top: 0; }

.amsis-cta--ways .amsis-cta__way {
	background: var(--wp--preset--color--midnight);
	color: var(--wp--preset--color--white);
}

/* ---- 05 The machines, under the product name --------------------------- */
.amsis-runs-on {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.25rem 2.75rem;
	margin-top: 2.5rem !important;
}

.amsis-runs-on > * { margin: 0 !important; }

.amsis-runs-on .amsis-runs-on__label {
	width: 100%;
	text-align: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--slate);
}

.amsis-runs-on img {
	display: block;
	width: 112px;
	height: 30px;
	object-fit: contain;
	filter: brightness(0);
	opacity: 0.5;
}

/* On the dark Products hero: white marks, lined up with the words. */
.amsis-page-hero--dark .amsis-runs-on { justify-content: flex-start; }
.amsis-page-hero--dark .amsis-runs-on .amsis-runs-on__label { text-align: left; color: rgba(255, 255, 255, 0.6); }
.amsis-page-hero--dark .amsis-runs-on img { filter: brightness(0) invert(1); opacity: 0.62; }

/* ---- 06 Parts on a dark stage ------------------------------------------
   The application cut-outs were photographed on different days in different
   light. On the powder, under one light, with the colour casts evened out,
   they read as one range. An opened card was already midnight; now it only
   changes what it shows. */
.amsis-app {
	background: #000b16;
	box-shadow: 0 1px 3px rgba(0, 25, 50, 0.2);
}

.amsis-app__media {
	border-radius: 14px 14px 0 0;
	background:
		radial-gradient(ellipse 70% 55% at 50% 38%, rgba(140, 170, 190, 0.28), transparent 70%),
		linear-gradient(to bottom, #000b16 0%, rgba(0, 11, 22, 0.7) 55%, rgba(0, 11, 22, 0.25) 100%),
		url(../images/brand/powder.jpg) center bottom / 300px;
}

/* The spotlight replaces the turquoise disc the part used to sit on. */
.amsis-app--cutout .amsis-app__media::before { display: none; }

.amsis-app--cutout .amsis-app__media img {
	filter: saturate(0.3) contrast(1.1) brightness(1.06) drop-shadow(0 16px 18px rgba(0, 0, 0, 0.6));
}

.amsis-app__title { color: var(--wp--preset--color--white); }

/* A rectangular photograph, rather than a cut-out, sits on the stage as a
   print would. */
.amsis-app:not(.amsis-app--cutout) .amsis-app__media img { border-radius: 8px; }

/* ---- 07 Covers for articles --------------------------------------------
   The headline in capitals on the powder, with the GENESIS mark — as the
   event cards already set their own poster. */
.amsis-cover {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 1.75rem;
	text-align: center;
	background:
		linear-gradient(to bottom, #000b16 0%, rgba(0, 11, 22, 0.85) 45%, rgba(0, 11, 22, 0.3) 100%),
		url(../images/brand/powder.jpg) center bottom / 420px;
}

.amsis-cover__title {
	font-size: clamp(0.95rem, 1.4vw, 1.15rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	hyphens: manual;
	overflow-wrap: normal;
}

/* Scoped past the card rules that size every image in a card to fill it. */
.amsis-cover .amsis-cover__mark {
	position: static !important;
	width: 92px !important;
	height: auto !important;
	object-fit: contain !important;
	opacity: 0.85;
}

.amsis-insight-card__media:has(.amsis-cover),
.amsis-card__media:has(.amsis-cover) { position: relative; }

/* ---- Products range: the names and the Print Suite object --------------
   The tile names take the statement voice the rest of the site speaks in;
   the line under each stays in sentence case. */
.amsis-quad .amsis-quad__name,
.amsis-quad .amsis-quad__name--plain {
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 0.005em;
	line-height: 1;
}

/* The full-width Print Suite tile is a stage: one light from above, the
   powder bed under the object. */
.amsis-quad--trio > .amsis-quad__tile--wide {
	background:
		radial-gradient(ellipse 55% 45% at 50% 70%, rgba(120, 170, 200, 0.22), transparent 70%),
		linear-gradient(to bottom, #000b16 0%, rgba(0, 11, 22, 0.92) 45%, rgba(0, 11, 22, 0.45) 100%),
		url(../images/brand/powder.jpg) center bottom / 640px;
}

.amsis-quad__media--object {
	width: min(64%, 42rem);
	margin: auto auto clamp(1.5rem, 3vw, 2.75rem) !important;
}

.amsis-quad__media--object img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.65));
}

@media (max-width: 781px) {
	.amsis-quad__media--object { width: 92%; }
}

/* The API's LPBF machine, standing at the foot of a light tile. The
   photograph's edges are faded into the mist already, so it is set a little
   wider than the tile and the overflow clips with no seam. */
.amsis-quad__media--machine {
	width: 116%;
	max-width: none;
	margin: auto 0 0 !important;
}

.amsis-quad__media--machine img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 781px) {
	.amsis-quad__media--machine { width: 124%; }
}

/* A photograph in a product hero — the API's machine — sits on the band
   unframed: no window corners, no shadow. */
/* Its edges are faded out as well, so the band's isotherms run on behind it
   rather than stopping at a rectangle. */
.amsis-product-hero__media--photo img {
	border-radius: 0;
	box-shadow: none;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 90%, transparent);
	-webkit-mask-composite: source-in;
	        mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 90%, transparent);
	        mask-composite: intersect;
}