/* Navinci — bespoke visual details that go beyond core block supports
   (blur, glow, image overlays, custom grid layouts). Colors, fonts and
   spacing that CAN be edited from the block editor live in theme.json
   and the block attributes instead of here. */

/* Split across two elements on purpose: WebKit/Safari has a long-standing
   bug where position:sticky silently stops working on an element that also
   has backdrop-filter on it. The outer <header> (tagName wrapper from the
   template-part block) gets the sticky positioning; the inner group here
   keeps the blur/background/border. Confirmed broken when combined on one
   element, fixed once split — the two properties no longer share a box. */
.navinci-header-wrap {
	position: sticky;
	top: 0;
	z-index: 50;
}

.navinci-header {
	min-height: 80px;
	backdrop-filter: blur(6px);
	background-color: rgba(5, 7, 10, 0.9) !important;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.navinci-cta-glow .wp-block-button__link {
	box-shadow: 0 0 25px -3px rgba(235, 90, 40, 0.35);
}

/* In hamburger mode (≤799px), the header's default justify-content:
   space-between spreads logo / hamburger / contact-icon evenly, which
   grows into a big gap between the hamburger and the icon on wider
   phones/small tablets. Group them tightly on the right instead: drop
   space-between, let the nav (hamburger) soak up the free space with
   margin-left:auto, then set an exact 25px gap to the contact icon. */
@media (max-width: 799px) {
	.navinci-header {
		justify-content: flex-start;
		/* header's own blockGap (24px) already spaces flex siblings, so
		   this alone sets the nav↔icon gap — no separate margin needed. */
		column-gap: 25px;
	}

	/* WordPress copies the nav's own classes (including our "navinci-nav")
	   onto its inner <ul> too, so a plain .navinci-nav selector here would
	   also match that ul — including inside the open mobile overlay, where
	   it shoved the link list off to the right and pushed the close button
	   out of view. Tag-qualify to "nav.navinci-nav" so only the real <nav>
	   element (never the <ul>) gets pushed. */
	.navinci-header nav.navinci-nav {
		margin-left: auto;
	}
}

/* WordPress's own breakpoint for switching the nav block between the
   hamburger/overlay and inline links is a hardcoded 600px (see
   style.min.css). Our inline layout (40%-wide, 500px-capped, 3 links)
   gets uncomfortably tight between 600–799px, so we raise the switch-over
   to 800px by overriding WordPress's own min-width:600px rules with a
   higher-specificity one (.navinci-header ancestor) scoped to exactly the
   600–799px gap. Above 800px normal desktop behaviour resumes unchanged. */
@media (min-width: 600px) and (max-width: 799px) {
	.navinci-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.navinci-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* Header nav links: scale their spread responsively instead of a fixed gap.
   Targets our own stable .navinci-nav class, not WordPress's auto-generated
   wp-container-core-navigation-is-layout-* hash (that hash is recalculated
   whenever the block's layout attributes change, so styling against it
   would silently break on a future edit).
   Scoped to min-width so it doesn't leak into the mobile overlay menu,
   which needs its own (vertical, stacked) layout below. 800px matches our
   raised hamburger breakpoint above, so there's no gap zone where the two
   rules disagree. */
@media (min-width: 800px) {
	.navinci-header .navinci-nav {
		width: 40%;
		/* The links are spread across this width (space-between), so it sets the
		   gap between them. 500px up to 1440px wide, then growing to 600px at
		   2560px (about 187px between the links there). */
		max-width: clamp(500px, calc(500px + (100vw - 1440px) * 0.0893), 600px);
	}

	/* Link text: 15px up to 1440px wide, growing slowly to 17px at 2560px. A
	   fixed px scale on purpose: the nav's own rem size would otherwise follow
	   the site-wide text scale and get far too big on wide screens. */
	.navinci-header .navinci-nav .wp-block-navigation-item__content {
		font-size: clamp(15px, calc(15px + (100vw - 1440px) * 0.001786), 17px);
	}

	.navinci-header .navinci-nav .wp-block-navigation__container {
		width: 100%;
		justify-content: space-between;
	}

	/* WordPress adds 7.5px/15px padding to nav links by default so they're
	   easier to tap once the block is overlay/hamburger-capable — needed for
	   the mobile menu, but on desktop it was just enough extra width to tip
	   Science/Solutions/About over our 500px-capped container and force a
	   wrap around 970px. Only strip the left/right padding here (desktop
	   inline state only); the mobile overlay's own links keep WordPress's
	   default touch-friendly padding. */
	.navinci-header .navinci-nav .wp-block-navigation-item__content {
		padding-left: 0;
		padding-right: 0;
	}
}

/* "Let's connect" header CTA: full text button on desktop (matches Figma),
   icon-only circular button once the hamburger takes over (same 799px
   cutoff) so it doesn't compete with the hamburger for space. aria-label
   on the <a> keeps the accessible name identical in both states. */
.navinci-header .navinci-btn-solid .navinci-cta-icon {
	display: none;
	align-items: center;
}

/* The header button keeps its original size on wide screens: its text is in
   rem, which would otherwise grow with the site-wide text scale (html
   font-size) and make the button bigger than designed (177 x 50px). */
.navinci-header .navinci-btn-solid .wp-block-button__link {
	font-size: 16px;
}

/* Logo and "Let's connect" button on desktop: smaller on laptop screens (they
   felt too big at 1440px), growing to the original size (170px logo, 177 x 50px
   button) at 2560px wide. In px on purpose, like the nav links above. */
@media (min-width: 800px) {
	.navinci-header .wp-block-site-logo img {
		width: clamp(125px, calc(125px + (100vw - 1440px) * 0.0402), 170px);
		height: auto;
	}

	.navinci-header .navinci-btn-solid .wp-block-button__link {
		font-size: clamp(14px, calc(14px + (100vw - 1440px) * 0.001786), 16px);
		padding: 0.75em 1.75em;
	}
}

@media (max-width: 799px) {
	.navinci-header .navinci-btn-solid .navinci-cta-label {
		display: none;
	}

	.navinci-header .navinci-btn-solid .navinci-cta-icon {
		display: inline-flex;
	}

	.navinci-header .navinci-btn-solid .wp-block-button__link {
		padding: 12px !important;
		border-radius: 9999px !important;
		line-height: 0;
	}
}

/* Mobile overlay menu (hamburger) — style it to match the brand instead of
   WordPress's default white panel, and stack the links vertically. */
.navinci-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--background);
	/* .navinci-header has backdrop-filter for its glass effect, which
	   creates a new containing block for position:fixed descendants — so
	   this modal sizes itself against the header box instead of the
	   viewport. Only the HEIGHT actually needs forcing (header is only
	   ~80–115px tall); the header's own box is already exactly the
	   visible width (block-level, correctly excludes the scrollbar), so
	   WordPress's own inset:0 already gets the width right via that.
	   Forcing width:100vw here made the modal a scrollbar's-width too
	   wide and pushed the close button off-screen — don't add it back. */
	height: 100vh !important;
}

.navinci-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
	padding: 32px;
}

.navinci-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.5rem;
}

.navinci-header .wp-block-navigation__responsive-container-open,
.navinci-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--foreground);
}

.navinci-header .wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
	width: 28px;
	height: 28px;
}

/* Custom hamburger icon (Lucide "text-align-justify", stroke-width 4,
   #c74a1a — matches the logo's rust-orange) in place of WordPress's
   default menu icon. Hide WP's own SVG and draw ours with a CSS mask so
   its color stays controllable without touching WP's rendered markup.
   The close (X) icon inside the open overlay is untouched. */
.navinci-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.navinci-header .wp-block-navigation__responsive-container-open {
	/* No display here on purpose — WordPress's own rules already control
	   whether this button is display:flex (visible) or display:none
	   (hidden above the hamburger breakpoint). Setting display here
	   unconditionally overrode that and showed the hamburger at every
	   width. align-items/justify-content just center our icon whenever
	   WP's own rule has it visible. */
	align-items: center;
	justify-content: center;
}

.navinci-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	background-color: #c74a1a;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M3 19h18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M3 19h18'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Nav bar & footer — link states (Normal / Hover / Active per Figma spec) */
.navinci-nav .wp-block-navigation-item__content {
	transition: color 0.15s ease;
}

/* :focus-visible, not :focus: when the mobile menu opens WordPress moves focus to
   the first link (Science), and :focus made that link orange on every page. With
   :focus-visible it is orange only when someone tabs to it with the keyboard. */
.navinci-nav .wp-block-navigation-item__content:hover,
.navinci-nav .wp-block-navigation-item__content:focus-visible,
.navinci-nav .wp-block-navigation-item__content:active {
	color: var(--wp--preset--color--accent-orange) !important;
}

/* The page you are on gets the same colour as a hovered menu item, in the header
   menu only (the footer menu also has the class .navinci-nav, so it is scoped
   to the header on purpose). */
.navinci-header .navinci-nav .wp-block-navigation-item.current-menu-item>.wp-block-navigation-item__content,
.navinci-header .navinci-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent-orange) !important;
}

.navinci-btn-solid .wp-block-button__link {
	transition: background-color 0.15s ease;
}

.navinci-btn-solid .wp-block-button__link:active {
	background-color: #7d214b !important;
}

.navinci-btn-outline .wp-block-button__link {
	background-color: #0b0908;
	color: var(--wp--preset--color--accent-orange);
	border: 1px solid var(--wp--preset--color--accent-orange);
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.navinci-btn-outline .wp-block-button__link:hover,
.navinci-btn-outline .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-orange);
	color: #fff;
}

/* Footer layout */
.navinci-footer-top {
	width: 100%;
	align-items: center;
	row-gap: 24px;
	column-gap: 48px;
	padding-top: 20px;
	padding-left: 30px;
	padding-right: 30px;
}

.navinci-footer-actions .wp-block-button {
	margin: 0;
}

/* On phones the two footer buttons are smaller (13px text instead of 16px and less
   padding), so "SIGN UP FOR PRESS RELEASES" fits on one line, and they sit closer. */
@media (max-width: 700px) {
	.navinci-footer .navinci-footer-actions {
		gap: 12px;
	}

	.navinci-footer .navinci-footer-actions .wp-block-button__link {
		font-size: 13px;
		padding: 9px 18px;
	}
}

.navinci-social img {
	display: block;
	/* 20px up to 1440px wide, growing evenly to 40px at 2560px (then capped). The
	   image block says 20 x 20, which these rules override. */
	width: clamp(20px, calc(20px + (100vw - 1440px) * 0.01786), 40px);
	height: clamp(20px, calc(20px + (100vw - 1440px) * 0.01786), 40px);
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.navinci-social a:hover img {
	opacity: 1;
}

.navinci-footer-bottom {
	width: 100%;
	align-items: center;
	/* Space above Privacy Policy / Terms of Use: 56px at 1440px wide, growing evenly
	   to 85px at 2560px (then capped). */
	margin-top: clamp(56px, calc(56px + (100vw - 1440px) * 0.0259), 85px);
}

/* The logo: 150px up to 1440px wide, growing evenly to 281px at 2560px (then capped). */
.navinci-footer-top .wp-block-site-logo {
	width: clamp(150px, calc(150px + (100vw - 1440px) * 0.117), 281px);
	max-width: none;
}

.navinci-footer-top .wp-block-site-logo a,
.navinci-footer-top .wp-block-site-logo img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Bottom of the footer: Privacy Policy / Terms of Use on the right, then a thin line
   and, centred under it, the copyright line and the legal notice. Sizes are the
   ones tested at 2560px wide (copyright 14px, notice 11.4px); on smaller screens
   they stay readable (12px and 11px) and grow evenly from 1440px. */
.navinci-footer-notice {
	/* Close to the line above, as at 2560px wide: 30px at every width. */
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--border);
	text-align: center;
}

.navinci-footer-notice p {
	margin: 0 auto;
}

.navinci-footer-notice .navinci-footer-copyright {
	font-size: clamp(12px, calc(12px + (100vw - 1440px) * 0.00196), 14.2px);
	letter-spacing: 0.3px;
	margin-bottom: 10px;
}

.navinci-footer-notice .navinci-legal-notice {
	/* Three lines at 1440px and wider: 60% of the width, at most 880px. */
	width: min(60%, 880px);
	font-size: clamp(11px, calc(11px + (100vw - 1440px) * 0.00036), 11.5px);
	line-height: 1.6;
	opacity: 0.85;
}

@media (max-width: 900px) {
	.navinci-footer-notice .navinci-legal-notice {
		width: 100%;
	}
}

.navinci-footer-bottom p {
	margin: 0;
}

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

.navinci-legal a:hover {
	color: var(--wp--preset--color--accent-orange);
}

.navinci-legal-links {
	align-items: center;
	column-gap: 10px;
}

.navinci-legal-dot {
	margin: 0;
	color: var(--wp--preset--color--border);
}

@media (max-width: 900px) {
	.navinci-header {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.navinci-footer {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/* WordPress puts its block gap (24px) above every top-level block, so <main>
   started 24px below the header and a full-colour hero showed a black strip
   under the menu. <main> now starts right at the header's bottom edge on every
   page, so headings sit at the same height wherever you navigate. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Hero v2 — solid orange base + dark vertical vignette gradient on top
   (no background photo, no CTA button — per the updated Figma HeroSection). */
.navinci-hero-v2 {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	/* More orange under the text: 300px at the base size (was 210px). It
	   scales with the text on wide screens, like the rest of the hero. */
	/* 225px on top: the hero is 25px taller than before, with the text 25px lower. */
	padding: 225px 24px calc(var(--navinci-fluid-base) * 18.75);
	/* Orange base and the dark gradient on top of it are ONE background on the
	   same element (not a separate ::before overlay): two layers meeting on a
	   fractional pixel edge could leave a thin orange line along the top. The
	   fade back to black at the bottom is measured from the bottom edge (about
	   160px -> 100px at the base size), so extra height under the text stays
	   orange instead of stretching the fade. */
	background-color: #eb5a28;
	background-image: linear-gradient(180deg, rgb(5, 7, 10) 0%, rgba(5, 7, 10, 0.6) 58.694%, rgba(5, 7, 10, 0.4) calc(100% - var(--navinci-fluid-base) * 10.1875), rgb(5, 7, 10) calc(100% - var(--navinci-fluid-base) * 6.375));
}

.navinci-hero-v2-content {
	position: relative;
	z-index: 1;
	/* Sized from the fluid base (see --navinci-fluid-base): the text, and
	   the width it may use, grow together on large screens. 896px at the
	   base size. */
	font-size: var(--navinci-fluid-base);
	max-width: calc(var(--navinci-fluid-base) * 56);
	text-align: center;
}

.navinci-hero-v2-content h1 {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: 4.5em;
	line-height: 1.1111;
	margin: 0 0 calc(var(--navinci-fluid-base) * 1.5);
}

.navinci-hero-v2-content p {
	color: #fff;
	font-family: "Mulish", sans-serif;
	font-size: 1.25em;
	line-height: 1.4;
	max-width: calc(var(--navinci-fluid-base) * 42);
	margin: 0 auto;
}

/* Science page hero (patterns/science-hero.php, template page-science.html).
   The Figma background is five stacked exports; they are rebuilt here as CSS
   gradients (values read from the exported layers): a flat orange wash, a wide
   orange->magenta glow on the left, an orange->blue glow on the right, and a
   fade to the page's black at the bottom (the topmost layer). Two faint
   circles (::before/::after) sit behind the text on either side. */
.navinci-hero-v2.navinci-hero-science {
	background-color: #05070a;
	background-image:
		linear-gradient(180deg, rgba(5, 7, 10, 0) 30%, rgba(5, 7, 10, 0.02) 35%, rgba(5, 7, 10, 0.05) 40%, rgba(5, 7, 10, 0.1) 50%, rgba(5, 7, 10, 0.15) 60%, rgba(5, 7, 10, 0.4) 70%, rgba(5, 7, 10, 0.71) 80%, rgba(5, 7, 10, 0.87) 85%, #05070a 90%),
		radial-gradient(circle 70vw at 90% 40%, rgba(58, 189, 239, 0.12) 0%, rgba(100, 162, 193, 0.13) 14.3%, rgba(149, 135, 142, 0.14) 28.6%, rgba(195, 114, 87, 0.15) 43%, rgba(235, 92, 39, 0.15) 57%, rgba(235, 92, 41, 0.1) 71%, rgba(230, 77, 26, 0.04) 85.7%, rgba(230, 77, 26, 0) 100%),
		radial-gradient(circle 70vw at 10% 40%, rgba(233, 89, 39, 0.18) 0%, rgba(209, 75, 52, 0.17) 14.3%, rgba(187, 62, 68, 0.16) 28.6%, rgba(157, 46, 85, 0.15) 43%, rgba(148, 41, 90, 0.12) 57%, rgba(153, 38, 89, 0.08) 71%, rgba(159, 32, 96, 0.03) 85.7%, rgba(159, 32, 96, 0) 100%),
		linear-gradient(rgba(195, 70, 10, 0.2), rgba(195, 70, 10, 0.2));
}

.navinci-hero-science::before,
.navinci-hero-science::after {
	content: "";
	position: absolute;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgba(0, 170, 170, 0.06);
	background: radial-gradient(circle closest-side, rgba(57, 187, 244, 0.18) 0%, rgba(111, 157, 183, 0.15) 20%, rgba(170, 124, 116, 0.13) 40%, rgba(219, 91, 55, 0.11) 60%, rgba(237, 91, 36, 0.05) 80%, rgba(237, 91, 36, 0) 100%);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* Left circle: orange only (the blue centre belongs to the right one). */
.navinci-hero-science::before {
	left: 14%;
	top: 50%;
	width: 26%;
	background: radial-gradient(circle closest-side, rgba(237, 91, 36, 0.1) 0%, rgba(237, 91, 36, 0.08) 40%, rgba(237, 91, 36, 0.04) 75%, rgba(237, 91, 36, 0) 100%);
}

.navinci-hero-science::after {
	left: 85%;
	top: 46%;
	width: 35%;
}

.navinci-hero-science .navinci-hero-accent {
	color: var(--wp--preset--color--accent-orange);
}

/* Solutions page hero: the Science hero with a redder, more purple wash (the
   flat colour under the glows: rgb(165, 60, 100) at 25% instead of orange). */
.navinci-hero-v2.navinci-hero-science.is-solutions {
	background-image:
		linear-gradient(180deg, rgba(5, 7, 10, 0) 30%, rgba(5, 7, 10, 0.02) 35%, rgba(5, 7, 10, 0.05) 40%, rgba(5, 7, 10, 0.1) 50%, rgba(5, 7, 10, 0.15) 60%, rgba(5, 7, 10, 0.4) 70%, rgba(5, 7, 10, 0.71) 80%, rgba(5, 7, 10, 0.87) 85%, #05070a 90%),
		radial-gradient(circle 70vw at 90% 40%, rgba(58, 189, 239, 0.12) 0%, rgba(100, 162, 193, 0.13) 14.3%, rgba(149, 135, 142, 0.14) 28.6%, rgba(195, 114, 87, 0.15) 43%, rgba(235, 92, 39, 0.15) 57%, rgba(235, 92, 41, 0.1) 71%, rgba(230, 77, 26, 0.04) 85.7%, rgba(230, 77, 26, 0) 100%),
		radial-gradient(circle 70vw at 10% 40%, rgba(233, 89, 39, 0.18) 0%, rgba(209, 75, 52, 0.17) 14.3%, rgba(187, 62, 68, 0.16) 28.6%, rgba(157, 46, 85, 0.15) 43%, rgba(148, 41, 90, 0.12) 57%, rgba(153, 38, 89, 0.08) 71%, rgba(159, 32, 96, 0.03) 85.7%, rgba(159, 32, 96, 0) 100%),
		linear-gradient(rgba(165, 60, 100, 0.25), rgba(165, 60, 100, 0.25));
}

/* A three-line intro, narrower than the Science one. */
.navinci-hero-science.is-solutions .navinci-hero-v2-content p {
	max-width: 24.2em;
	margin-left: auto;
	margin-right: auto;
}

/* About page hero: the Science hero with a much weaker, slightly red wash
   (rgb(130, 60, 60) at 5%), so the page looks darker overall. */
.navinci-hero-v2.navinci-hero-science.is-about {
	background-image:
		linear-gradient(180deg, rgba(5, 7, 10, 0) 30%, rgba(5, 7, 10, 0.02) 35%, rgba(5, 7, 10, 0.05) 40%, rgba(5, 7, 10, 0.1) 50%, rgba(5, 7, 10, 0.15) 60%, rgba(5, 7, 10, 0.4) 70%, rgba(5, 7, 10, 0.71) 80%, rgba(5, 7, 10, 0.87) 85%, #05070a 90%),
		radial-gradient(circle 70vw at 90% 40%, rgba(58, 189, 239, 0.12) 0%, rgba(100, 162, 193, 0.13) 14.3%, rgba(149, 135, 142, 0.14) 28.6%, rgba(195, 114, 87, 0.15) 43%, rgba(235, 92, 39, 0.15) 57%, rgba(235, 92, 41, 0.1) 71%, rgba(230, 77, 26, 0.04) 85.7%, rgba(230, 77, 26, 0) 100%),
		radial-gradient(circle 70vw at 10% 40%, rgba(233, 89, 39, 0.18) 0%, rgba(209, 75, 52, 0.17) 14.3%, rgba(187, 62, 68, 0.16) 28.6%, rgba(157, 46, 85, 0.15) 43%, rgba(148, 41, 90, 0.12) 57%, rgba(153, 38, 89, 0.08) 71%, rgba(159, 32, 96, 0.03) 85.7%, rgba(159, 32, 96, 0) 100%),
		linear-gradient(rgba(130, 60, 60, 0.05), rgba(130, 60, 60, 0.05));
}

.navinci-hero-science.is-about .navinci-hero-v2-content h1 {
	font-size: min(4.5em, calc((100vw - 48px) / 12.9));
}

/* A three-line headline: at 72px its longest line is about 12.7em wide, which only
   fits down to ~710px; on phones the lines are allowed to wrap by themselves at
   a normal size instead of shrinking. */
@media (max-width: 700px) {
	.navinci-hero-science.is-about .navinci-hero-v2-content h1 {
		font-size: clamp(28px, 9vw, 44px) !important;
	}

	.navinci-hero-science.is-about .navinci-hero-v2-content h1 span.navinci-fade-in {
		display: inline;
	}

	.navinci-hero-science.is-about .navinci-hero-v2-content h1 br,
	.navinci-hero-science.is-about .navinci-hero-v2-content p br {
		display: none;
	}
}

@media (max-width: 1099px) {
	.navinci-hero-science.is-about .navinci-hero-v2-content p br {
		display: none;
	}
}

/* The Science and Solutions heroes are full of colour from the first frame: the
   background neither fades in nor slides up (the 20px slide of
   .navinci-fade-in-background left a black strip under the menu while it ran).
   Only the headline and intro animate, via their own .navinci-fade-in classes. */
.navinci-hero-science.navinci-fade-in-background {
	opacity: 1;
	transform: none !important;
	transition: none !important;
}

/* The intro is wider and quieter than the Home hero's. */
.navinci-hero-science .navinci-hero-v2-content {
	max-width: calc(var(--navinci-fluid-base) * 63);
}

.navinci-hero-science .navinci-hero-v2-content p {
	color: var(--wp--preset--color--legal-text);
	max-width: none;
}

/* "how biology works" is about 9.2em wide, so it only stays on one line (two
   lines in total) if the headline is at most 1/9.4 of the width left on each
   side of the screen. Below ~710px that is smaller than the normal size. */
.navinci-hero-science .navinci-hero-v2-content h1 {
	font-size: min(4.5em, calc((100vw - 48px) / 9.4));
	/* WordPress limits blocks to 1152px, which is too narrow for the big
	   headline on very wide screens (128px at 2560px wide). */
	max-width: none;
}

@media (max-width: 600px) {
	.navinci-hero-science .navinci-hero-v2-content h1 {
		font-size: min(2.75rem, calc((100vw - 40px) / 9.4)) !important;
	}

	.navinci-hero-science .navinci-hero-v2-content p {
		font-size: 1em;
	}
}

/* Science page, section under the hero: "The power of isPLA."
   (patterns/science-technology.php, circles from inc/science-technology.php).
   It shares the Home sections' full-screen layout, eyebrow with line, headline
   (.navinci-section-title) and intro (.navinci-section-lede) styling above. */
.navinci-science-tech .navinci-tech-eyebrow,
.navinci-science-apps .navinci-apps-eyebrow,
.navinci-science-why .navinci-sw-eyebrow,
.navinci-sol-services .navinci-sol-eyebrow,
.navinci-about-careers .navinci-ac-eyebrow,
.navinci-sol-approach .navinci-ap-eyebrow,
.navinci-latest-news .navinci-ln-eyebrow {
	color: var(--wp--preset--color--accent-orange);
	font-family: "Poppins", sans-serif;
	line-height: 0.8889;
	text-transform: uppercase;
}

.navinci-science-tech .navinci-tech-title,
.navinci-science-apps .navinci-apps-title,
.navinci-science-why .navinci-sw-title,
.navinci-sol-services .navinci-sol-title,
.navinci-about-careers .navinci-ac-title,
.navinci-sol-approach .navinci-ap-title {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	line-height: 1;
}

.navinci-science-tech .navinci-tech-lede {
	max-width: 30em;
}

/* Science page, section under that: "Go beyond expression to see biology in
   action." (patterns/science-applications.php). Four cards, each with a coloured bar
   on top (orange-red, orange, plum, dark red). In a 2x2 grid up to 1799px wide
   (the grid is about 62% of the screen: 900px at 1440px), and all four in one row
   on bigger screens (70% of the screen, at most 1800px). */
.navinci-science-apps .navinci-apps-grid {
	--navinci-apps-bar-1: #d45227;
	--navinci-apps-bar-2: #d97a22;
	--navinci-apps-bar-3: #95285a;
	--navinci-apps-bar-4: #550000;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(14px, 1.74vw, 28px);
	max-width: clamp(560px, 62.4vw, 1100px);
}

.navinci-science-apps .navinci-apps-card {
	margin: 0;
	background: #0a0e13;
	border-radius: 10px;
	padding: clamp(24px, 2.64vw, 40px);
	min-height: clamp(150px, 16.7vw, 260px);
	text-align: left;
}

.navinci-apps-card::before {
	content: "";
	display: block;
	width: clamp(72px, 6.94vw, 110px);
	height: clamp(10px, 0.84vw, 14px);
	border-radius: 9999px;
	background: var(--navinci-apps-bar-1);
	margin: 0 0 clamp(24px, 2.5vw, 40px);
}

.navinci-apps-card:nth-child(2)::before {
	background: var(--navinci-apps-bar-2);
}

.navinci-apps-card:nth-child(3)::before {
	background: var(--navinci-apps-bar-3);
}

.navinci-apps-card:nth-child(4)::before {
	background: var(--navinci-apps-bar-4);
}

.navinci-apps-card .navinci-apps-card-title {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: clamp(22px, calc(28px + (100vw - 1440px) * 0.00714), 36px);
	line-height: 1.2;
	margin: 0 0 12px;
}

.navinci-apps-card .navinci-apps-card-text {
	color: var(--wp--preset--color--nav-text);
	font-family: "Poppins", sans-serif;
	font-size: clamp(14px, calc(15px + (100vw - 1440px) * 0.00446), 20px);
	line-height: 1.5;
	margin: 0;
}

/* Big screens: the four cards in one row. */
@media (min-width: 1800px) {
	.navinci-science-apps .navinci-apps-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		max-width: min(70vw, 1800px);
	}
}

@media (max-width: 700px) {
	/* On phones let the headline wrap by itself instead of in the design's two lines. */
	.navinci-science-apps .navinci-apps-title br {
		display: none;
	}

	.navinci-science-apps .navinci-apps-grid {
		grid-template-columns: 1fr;
	}

	.navinci-apps-card {
		min-height: 0;
	}
}

/* Science page, last section: "Designed for deeper insight."
   (patterns/science-why-choose.php). Four reasons in a row with the same
   icon / title / text look as the Home page's "Why choose Navinci" pillars
   (.navinci-choose-pillar ... above); only the layout and the icons differ. */
.navinci-science-why .navinci-sci-pillars {
	display: flex;
	gap: 1.5em;
	padding: 0;
	margin-bottom: 0;
	/* A little wider than the headline above (up to 1240px) so each column has
	   room for its text. */
	max-width: max(calc(var(--navinci-fluid-base) * 69), 1240px);
}

.navinci-sci-pillars>.navinci-choose-pillar {
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

.navinci-science-why .navinci-sw-lede {
	max-width: 30em;
}

/* The icons keep their own proportions: the largest (the target, 61.8 units)
   gets the full --navinci-choose-icon-size, the others are scaled from it. */
/* Four columns are narrower than the Home page's three, so the text wraps. */
.navinci-sci-pillars .navinci-choose-pillar .navinci-choose-pillar-text {
	white-space: normal;
	max-width: none;
}

.navinci-choose-icon.is-sensitivity {
	/* ?v=2: the file was fixed, this makes browsers fetch it again instead of using
	   their cached copy of the old one (images in CSS are not versioned by WordPress). */
	background-image: url("../images/science/icon-sensitivity.svg?v=3");
	/* The icon file is redrawn (2-unit line) in a 64 x 64 viewBox with room around
	   the glass and the handle; the size here follows the viewBox, so the drawing
	   is the same scale as the other icons (full size = 61.78 units). */
	background-size: calc(var(--navinci-choose-icon-size) * 1.0359) calc(var(--navinci-choose-icon-size) * 1.0359);
}

.navinci-choose-icon.is-specificity {
	background-image: url("../images/science/icon-specificity.svg?v=3");
	background-size: calc(var(--navinci-choose-icon-size) * 1.0646) calc(var(--navinci-choose-icon-size) * 1.0647);
}

.navinci-choose-icon.is-multiplexing {
	background-image: url("../images/science/icon-multiplexing.svg?v=3");
	background-size: calc(var(--navinci-choose-icon-size) * 0.8020) calc(var(--navinci-choose-icon-size) * 0.7498);
}

.navinci-choose-icon.is-heritage {
	background-image: url("../images/science/icon-heritage.svg?v=3");
	background-size: calc(var(--navinci-choose-icon-size) * 0.9731) calc(var(--navinci-choose-icon-size) * 0.9476);
}

/* "Read more" link under each reason: small, orange, upper case, with an arrow.
   14px up to 1440px wide, 16px at 2560px (then staying there). */
.navinci-sci-pillars .navinci-choose-pillar .navinci-sw-more {
	margin: clamp(16px, calc(16px + (100vw - 1440px) * 0.0125), 30px) 0 0;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: clamp(14px, calc(14px + (100vw - 1440px) * 0.001786), 16px);
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
}

.navinci-sci-pillars .navinci-sw-more a {
	color: var(--wp--preset--color--accent-orange);
	text-decoration: none;
}

/* No underline on hover or focus either (WordPress adds one by default). */
.navinci-sci-pillars .navinci-sw-more a:hover,
.navinci-sci-pillars .navinci-sw-more a:focus {
	text-decoration: none;
}

.navinci-sci-pillars .navinci-sw-more a::after {
	content: " \2192";
}

/* Solutions page, section under Scientific services: "Here when you need us"
   (patterns/solutions-support.php). Uses the Science "Designed for deeper
   insight" section's styles (.navinci-science-why / .navinci-sci-pillars); only
   the icons are its own. The icon files are 64 x 64 units with room around. */
.navinci-choose-icon.is-protocols {
	background-image: url("../images/solutions/icon-protocols.svg?v=1");
	background-size: calc(var(--navinci-choose-icon-size) * 1.0359) calc(var(--navinci-choose-icon-size) * 1.0359);
}

.navinci-choose-icon.is-videos {
	background-image: url("../images/solutions/icon-videos.svg?v=1");
	background-size: calc(var(--navinci-choose-icon-size) * 1.0359) calc(var(--navinci-choose-icon-size) * 1.0359);
}

.navinci-choose-icon.is-faq {
	background-image: url("../images/solutions/icon-faq.svg?v=1");
	background-size: calc(var(--navinci-choose-icon-size) * 1.0359) calc(var(--navinci-choose-icon-size) * 1.0359);
}

.navinci-choose-icon.is-support {
	background-image: url("../images/solutions/icon-support.svg?v=1");
	background-size: calc(var(--navinci-choose-icon-size) * 1.0359) calc(var(--navinci-choose-icon-size) * 1.0359);
}

/* Four columns need about 1180px; below that, two by two. */
@media (max-width: 1179px) {
	.navinci-science-why .navinci-sci-pillars {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px 16px;
	}
}

@media (max-width: 600px) {
	.navinci-science-why .navinci-sci-pillars {
		grid-template-columns: 1fr;
	}
}

/* Solutions page, section under the hero: "More than a solution, a scientific
   partnership" (patterns/solutions-services.php). Three services with the
   same icon / title / text look as the Home page's "Why choose Navinci"
   pillars; only the layout differs. */
.navinci-sol-services .navinci-accent {
	color: var(--wp--preset--color--accent-orange);
}

.navinci-sol-services .navinci-sol-lede {
	max-width: none;
}

.navinci-sol-services .navinci-sol-pillars {
	display: flex;
	gap: 4em;
	padding: 0;
	margin-bottom: 0;
	/* Narrower than the headline above, so the three columns sit close together:
	   980px up to 1440px wide, growing to 1400px at 2560px, then staying there. */
	max-width: clamp(980px, calc(980px + (100vw - 1440px) * 0.375), 1400px);
}

.navinci-sol-pillars>.navinci-choose-pillar {
	margin: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Narrow text blocks, as in the design. */
.navinci-sol-pillars .navinci-choose-pillar .navinci-choose-pillar-text {
	white-space: normal;
	max-width: 20em;
	/* Wrap into evenly long lines (two instead of three). */
	text-wrap: balance;
}

.navinci-sol-pillars .navinci-choose-pillar .navinci-choose-pillar-title {
	line-height: 1.15;
}

.navinci-choose-icon.is-development {
	background-image: url("../images/solutions/icon-development.svg?v=3");
	/* 48.96 x 42.32 units plus 2 units of room on every side (2px line), in
	   proportion to the other icons (see .is-sensitivity). */
	background-size: calc(var(--navinci-choose-icon-size) * 0.8572) calc(var(--navinci-choose-icon-size) * 0.7498);
}

@media (max-width: 1099px) {
	.navinci-sol-services .navinci-sol-lede br {
		display: none;
	}
}

@media (max-width: 700px) {
	.navinci-sol-services .navinci-sol-title br {
		display: none;
	}

	.navinci-sol-services .navinci-sol-pillars {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.navinci-sol-pillars>.navinci-choose-pillar {
		width: 100%;
		max-width: 360px;
	}
}

/* About page, section under the hero: "Help us discover what's next."
   (patterns/about-careers.php). Shares the other sections' eyebrow, headline,
   intro and button styling above. */
.navinci-about-careers .navinci-ac-lede {
	max-width: 37em;
}

@media (max-width: 1099px) {
	.navinci-about-careers .navinci-ac-lede br {
		display: none;
	}
}

@media (max-width: 700px) {
	.navinci-about-careers .navinci-ac-title br {
		display: none;
	}
}

/* Solutions page, section under the hero: "Discover Omni"
   (patterns/solutions-featured.php). Text on the left and, on the right, an
   animated image of two round tissue samples (the image block, so it can be
   replaced from the page editor). Sizes are first guesses, tune them at 2560px. */
.navinci-sol-featured .navinci-sf-grid {
	display: grid;
	/* The image column is as wide as the image is meant to be shown: the two circles
	   are about 250px each at 1440px wide (the image is 853 x 480 with space around them). */
	grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--navinci-fluid-base) * 38));
	align-items: center;
	gap: calc(var(--navinci-fluid-base) * 4);
	/* Wider than the other sections' content (1251px instead of 1104px at 1440px
	   wide); on big screens the usual width (69em) is larger and takes over. */
	max-width: max(calc(var(--navinci-fluid-base) * 69), 1251px);
}

.navinci-sol-featured .navinci-sf-grid>* {
	margin: 0;
}

.navinci-sf-text {
	text-align: left;
}

.navinci-sf-text>* {
	margin: 0;
}

.navinci-sf-text .navinci-sf-eyebrow {
	color: var(--wp--preset--color--accent-orange);
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	/* 18px up to 1440px wide, 25.6px at 2560px (the shared eyebrow size). */
	font-size: clamp(18px, calc(18px + (100vw - 1440px) * 0.006786), 25.6px);
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	margin-bottom: clamp(10px, 0.9vw, 14px);
}

.navinci-sf-text .navinci-sf-title {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	/* 28px up to 1440px wide, 40px at 2560px (then staying there). */
	font-size: clamp(26px, calc(28px + (100vw - 1440px) * 0.0107), 40px);
	line-height: 1.2;
	margin-bottom: clamp(10px, 0.9vw, 14px);
}

.navinci-sf-text .navinci-sf-desc {
	color: var(--wp--preset--color--nav-text);
	font-family: "Mulish", sans-serif;
	font-size: clamp(16px, calc(16px + (100vw - 1440px) * 0.00446), 21px);
	line-height: 1.5;
	margin-bottom: clamp(24px, 2vw, 32px);
}

.navinci-sf-text .navinci-sf-cta {
	margin: 0;
}

/* The button's own block setting says Poppins (.has-poppins-font-family, which is
   !important), so this has to be !important too. */
.navinci-sf-text .navinci-sf-cta .wp-block-button__link.wp-element-button {
	font-family: "Inter", sans-serif !important;
}

.navinci-sf-image {
	margin: 0;
	line-height: 0;
}

.navinci-sf-image img,
.navinci-sf-image video {
	display: block;
	width: 100%;
	height: auto;
}

/* The video is drawn on a black background (video has no transparency); "screen"
   makes that black disappear into the section's own dark background, so no
   rectangle shows. */
.navinci-sf-image video {
	mix-blend-mode: screen;
}

@media (max-width: 900px) {
	.navinci-sol-featured .navinci-sf-grid {
		grid-template-columns: 1fr;
		gap: 24px;
		text-align: center;
	}

	/* Stacked: the circles come first, then the text. */
	.navinci-sol-featured .navinci-sf-image {
		order: -1;
		max-width: 520px;
		margin-left: auto;
		margin-right: auto;
	}

	.navinci-sf-text {
		text-align: center;
	}

	.navinci-sf-text .navinci-sf-cta {
		justify-content: center;
	}
}

/* Solutions page, section under the hero: "Built around your research."
   (patterns/solutions-approach.php). Three columns, each with a small orange
   label, two contrasting words with an orange arrow between them and a short
   description. Thin lines separate the columns. Sizes are first guesses from
   the Figma screenshot, tune them at 2560px. */
.navinci-sol-approach .navinci-ap-title.navinci-section-title {
	/* Space under the headline: about 120px at 1440px (Figma). */
	margin-bottom: clamp(64px, 8.2vw, 150px);
}

.navinci-sol-approach .navinci-ap-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding: 0;
}

.navinci-sol-approach .navinci-ap-col {
	margin: 0;
	text-align: center;
}

.navinci-sol-approach .navinci-ap-col .navinci-ap-col-title {
	color: var(--wp--preset--color--accent-orange);
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: clamp(14px, 1.18vw, 24px);
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 clamp(20px, 2.1vw, 40px);
}

/* The thin lines between the columns start under the labels. */
.navinci-sol-approach .navinci-ap-body {
	padding: 0 clamp(16px, 2.2vw, 32px);
}

.navinci-sol-approach .navinci-ap-col+.navinci-ap-col .navinci-ap-body {
	border-left: 1px solid rgba(255, 255, 255, 0.15);
}

.navinci-sol-approach .navinci-ap-body .navinci-ap-claim {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: clamp(24px, 2.3vw, 44px);
	line-height: 1.2;
	margin: 0;
}

/* The two arrows (right, left) are drawn as thin outlined arrows (as in Figma) with
   a mask, in the accent colour. They stand almost on top of each other. The text
   "→" / "←" in the paragraphs is kept for screen readers but not shown. All sizes
   follow the size of the words (--navinci-ap-fs). */
.navinci-sol-approach {
	--navinci-ap-fs: clamp(24px, 2.3vw, 44px);
}

.navinci-sol-approach .navinci-ap-body .navinci-ap-arrow {
	width: var(--navinci-ap-fs);
	height: calc(var(--navinci-ap-fs) * 0.5);
	margin: 0 auto;
	font-size: 0;
	line-height: 0;
	color: transparent;
	background-color: var(--wp--preset--color--accent-orange);
	-webkit-mask: url("../images/solutions/arrow-right.svg?v=1") center / 100% 100% no-repeat;
	mask: url("../images/solutions/arrow-right.svg?v=1") center / 100% 100% no-repeat;
}

.navinci-sol-approach .navinci-ap-body .navinci-ap-arrow+.navinci-ap-arrow {
	margin-top: calc(var(--navinci-ap-fs) * 0.04);
	-webkit-mask-image: url("../images/solutions/arrow-left.svg?v=1");
	mask-image: url("../images/solutions/arrow-left.svg?v=1");
}

/* Space above and below the pair of arrows. */
.navinci-sol-approach .navinci-ap-body .navinci-ap-claim+.navinci-ap-arrow {
	margin-top: clamp(12px, 1.05vw, 22px);
}

.navinci-sol-approach .navinci-ap-body .navinci-ap-arrow+.navinci-ap-claim {
	margin-top: clamp(12px, 1.05vw, 22px);
}

.navinci-sol-approach .navinci-ap-body .navinci-ap-text {
	color: var(--wp--preset--color--nav-text);
	font-family: "Poppins", sans-serif;
	font-size: clamp(12px, 0.85vw, 17px);
	line-height: 1.45;
	margin: clamp(18px, 1.55vw, 30px) auto 0;
	max-width: 24em;
}

@media (max-width: 700px) {
	.navinci-sol-approach .navinci-ap-cols {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Stacked: the thin line goes above the labels (Exploration, Workflow), on the
	   column itself, not under the label as on the body. */
	.navinci-sol-approach .navinci-ap-col+.navinci-ap-col .navinci-ap-body {
		border-left: 0;
	}

	.navinci-sol-approach .navinci-ap-col+.navinci-ap-col {
		border-top: 1px solid rgba(255, 255, 255, 0.15);
		padding-top: 32px;
	}
}

/* Science page, "The power of isPLA.": three illustrations (media library images,
   Recognition / Interaction / Signal) standing on a common line, each with an
   orange title under it. The images keep their own proportions and are all drawn at
   the same scale (--navinci-tech-unit = the width of 1000 image pixels), so the tall
   Signal illustration is larger than the other two, as in the design. */
.navinci-tech-steps {
	--navinci-tech-unit: clamp(64px, 6.6vw, 140px);
	display: grid;
	grid-template-columns: repeat(3, calc(var(--navinci-tech-unit) * 3.1));
	grid-template-rows: auto auto;
	justify-content: center;
	column-gap: calc(var(--navinci-tech-unit) * 0.25);
	margin-left: auto;
	margin-right: auto;
}

/* Each step spans the two rows (image, title) so that the images sit on one line
   and the titles on another, whatever the heights of the images. */
.navinci-tech-step {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	justify-items: center;
	margin: 0;
}

.navinci-tech-step>.navinci-tech-image {
	align-self: end;
	margin: 0;
	line-height: 0;
}

.navinci-tech-step>.navinci-tech-image img {
	display: block;
	height: auto;
	max-width: none;
}

.navinci-tech-step:nth-child(1)>.navinci-tech-image img {
	width: calc(var(--navinci-tech-unit) * 1.15);
}

.navinci-tech-step:nth-child(2)>.navinci-tech-image img {
	width: calc(var(--navinci-tech-unit) * 1.147);
}

.navinci-tech-step:nth-child(3)>.navinci-tech-image img {
	width: calc(var(--navinci-tech-unit) * 2.465);
}

.navinci-tech-step .navinci-tech-step-title {
	color: var(--wp--preset--color--accent-orange);
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	/* Same size as the Home diagram's step titles: 18px up to 1440px wide,
	   25.6px at 2560px, then staying there. */
	font-size: clamp(16px, calc(16px + (100vw - 1100px) * 0.0059), 25.6px);
	letter-spacing: 0.03em;
	line-height: 1.1;
	text-transform: uppercase;
	/* Space between the images and the titles. */
	margin: clamp(24px, calc(24px + (100vw - 1440px) * 0.0071), 32px) 0 0;
	white-space: nowrap;
}

@media (max-width: 700px) {
	.navinci-tech-steps {
		--navinci-tech-unit: min(26vw, 130px);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48px;
	}

	.navinci-tech-step {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

/* Section rhythm */
.navinci-section {
	padding-top: 96px;
	padding-bottom: 96px;
	padding-left: 24px;
	padding-right: 24px;
}

.navinci-section-inner {
	max-width: 1152px;
	margin: 0 auto;
}

.navinci-eyebrow {
	color: var(--wp--preset--color--accent-orange);
	text-transform: uppercase;
	letter-spacing: 1.2px;
	font-size: 0.75rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 12px;
}

.navinci-arrow-link {
	color: var(--wp--preset--color--accent-orange) !important;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.navinci-arrow-link:hover {
	color: var(--wp--preset--color--accent-magenta) !important;
}

.navinci-center {
	text-align: center;
}

.navinci-lede {
	max-width: 672px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 8px;
}

/* 3-step diagram */
.navinci-diagram {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	max-width: 896px;
	margin: 52px auto 0;
	flex-wrap: wrap;
}

.navinci-diagram-step {
	flex: 1 1 160px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 160px;
}

.navinci-diagram-step .navinci-step-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #e2e8f0;
	margin: 0 0 4px;
}

.navinci-diagram-step .navinci-step-caption {
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
	margin: 0 0 12px;
}

.navinci-diagram-circle {
	width: 160px;
	height: 160px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle, rgba(23, 37, 84, 0.5) 0%, #020617 100%);
	border: 1px solid rgba(21, 94, 117, 0.4);
}

.navinci-diagram-circle.is-accent {
	border-color: rgba(235, 90, 40, 0.5);
	box-shadow: 0 10px 15px -3px rgba(235, 90, 40, 0.1);
}

.navinci-diagram-circle img {
	width: 92px;
	height: 92px;
}

.navinci-diagram-arrow {
	flex: 0 0 auto;
	align-self: center;
	color: var(--wp--preset--color--muted);
	font-size: 1.25rem;
	padding-top: 60px;
}

/* Application cards */
.navinci-cards {
	display: flex;
	gap: 24px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.navinci-card {
	flex: 1 1 300px;
	position: relative;
	min-height: 256px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.navinci-card-bg {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 0;
}

.navinci-card-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.navinci-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
}

.navinci-card-title {
	position: relative;
	z-index: 2;
	padding: 24px;
	color: #fff;
	font-size: 1.25rem;
	margin: 0;
}

/* Why choose — pillars */
.navinci-pillars {
	display: flex;
	gap: 40px;
	justify-content: center;
	margin-top: 52px;
	flex-wrap: wrap;
}

.navinci-pillar {
	flex: 1 1 260px;
	max-width: 341px;
	text-align: center;
}

.navinci-pillar-icon {
	width: 64px;
	height: 64px;
	border-radius: 9999px;
	border: 1px solid rgba(235, 90, 40, 0.6);
	box-shadow: 0 1px 2px 0 rgba(235, 90, 40, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

.navinci-pillar-icon img {
	width: 28px;
	height: 28px;
}

.navinci-pillar h3 {
	margin: 0 0 8px;
	font-size: 1.125rem;
}

.navinci-pillar p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

/* Evidence stats */
.navinci-stats {
	display: flex;
	gap: 32px;
	justify-content: center;
	margin-top: 44px;
	flex-wrap: wrap;
}

.navinci-stat {
	flex: 1 1 260px;
	max-width: 346px;
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: center;
}

.navinci-stat img {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.navinci-stat-number {
	font-family: "Lora", serif;
	font-weight: 700;
	font-size: 2.25rem;
	color: #fff;
	margin: 0;
	line-height: 1.1;
}

.navinci-stat-label {
	font-size: 0.75rem;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* Latest news */
.navinci-news-grid {
	display: flex;
	gap: 24px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.navinci-news-card {
	flex: 1 1 300px;
	display: flex;
	gap: 16px;
	padding: 17px;
	border-radius: 12px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
}

.navinci-news-thumb {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	background: #0f172a;
	border: 1px solid #1e293b;
	margin: 0;
}

.navinci-news-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.navinci-news-date {
	font-size: 0.625rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0 0 4px;
}

.navinci-news-title {
	font-size: 0.75rem;
	color: #fff;
	line-height: 1.4;
	margin: 0 0 12px;
}

.navinci-news-card .navinci-arrow-link {
	font-size: 0.6875rem;
}

/* Contact banner */
.navinci-contact-banner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.navinci-contact-left {
	flex: 1 1 420px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.navinci-contact-left h3 {
	font-size: 2.25rem;
	margin: 0;
	max-width: 384px;
}

.navinci-contact-left .wp-block-buttons {
	width: 100%;
}

.navinci-contact-left .wp-block-button__link {
	white-space: nowrap;
}

.navinci-contact-right {
	flex: 1 1 280px;
	position: relative;
	min-height: 282px;
	margin: 0;
}

.navinci-contact-right img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Mobile nav now handled by WordPress core's own overlay (hamburger)
   behaviour via the block's "overlayMenu":"mobile" attribute — no manual
   display:none needed here anymore. */

@media (max-width: 600px) {
	.navinci-hero-v2-content h1 {
		font-size: 2.75rem !important;
		line-height: 1.15 !important;
	}

	.navinci-hero-v2 {
		padding: 125px 20px 100px;
	}

	/* Home hero only (not the Science, Solutions and About heroes): 180px under the
	   text instead of 100px, so there is more orange under it; and the orange shows
	   through higher up, so the text sits on it: 55% dark at 123px from the top, 30%
	   at 256px, then orange (25% dark) until 120px from the bottom, fading to black
	   40px from the bottom. The top stops are in px so they stay put when the hero
	   gets taller. */
	.navinci-hero-v2:not(.navinci-hero-science) {
		padding-bottom: 180px;
		background-image: linear-gradient(180deg, rgb(5, 7, 10) 0, rgba(5, 7, 10, 0.55) 123px, rgba(5, 7, 10, 0.3) 256px, rgba(5, 7, 10, 0.25) calc(100% - 120px), rgb(5, 7, 10) calc(100% - 40px));
	}

	.navinci-contact-banner {
		flex-direction: column;
	}

	.navinci-contact-right {
		min-height: 220px;
	}

	.navinci-diagram-arrow {
		transform: rotate(90deg);
		padding-top: 0;
	}
}

/* Let's Connect page — shared column. The design is a 1240px column with
   100px gutters at a 1440px viewport; the page's hero and form card both
   sit in it, so the heading, intro text and card share one left edge.
   The whole page is sized in em from --navinci-fluid-base (16px up to 1440px,
   then growing with the screen width, like the home page sections), so text,
   line heights, fields, gaps and the column all scale together. Mixing rem
   text with fixed px line heights/heights squeezes the page on wide screens. */
.navinci-contact-hero,
.navinci-contact-card {
	--navinci-contact-gutter: calc(var(--navinci-fluid-base) * 6.25);
	font-size: var(--navinci-fluid-base);
	width: calc(100% - 2 * var(--navinci-contact-gutter));
	max-width: 77.5em;
	margin-left: auto;
	margin-right: auto;
}

.navinci-contact-hero.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

/* WordPress's "constrained" layout centers every child in a 1152px
   column (margin-inline:auto !important), which is why the child margins
   below need !important to stay flush left. */
.navinci-contact-hero>*,
.navinci-contact-card>* {
	max-width: none;
}

/* Stronger selector for the margins: the block editor has its own
   constrained-layout margin rules that would otherwise re-centre the children. */
.wp-block-group.navinci-contact-hero>*,
.wp-block-group.navinci-contact-card>* {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Page spacing: 100px under the nav bar, 138px above the footer (at 1440px).
   The <main> padding is set inline by the page template, hence !important. */
main:has(.navinci-contact-hero) {
	padding-top: calc(var(--navinci-fluid-base) * 4.75 + 25px) !important;
	padding-bottom: calc(var(--navinci-fluid-base) * 7.125) !important;
}

/* Let's Connect page — page header */
.navinci-contact-hero h1 {
	color: #f5f2ed;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 2.5em;
	letter-spacing: -0.02875em;
	line-height: 1;
	/* Wraps after "starts", as in the design. */
	max-width: 12em;
	margin: 0 0 0.5em;
}

.navinci-contact-hero p {
	color: var(--wp--preset--color--legal-text);
	font-family: "Mulish", sans-serif;
	font-size: 1.125em;
	line-height: 1.5556;
	max-width: calc(var(--navinci-fluid-base) * 53.75);
	margin: 0 !important;
}

/* Let's Connect page — form card ([navinci_contact_form] shortcode output) */
.navinci-contact-card {
	background: #151210;
	border: 1px solid #292321;
	border-radius: 1em;
	/* 40px + the 1px border = the design's 41px inset. */
	padding: 2.5em;
	/* Inline margin-top from the page content, so !important. */
	margin-top: 3.125em !important;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.navinci-contact-card-title {
	color: #f5f2ed;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 2em;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0 0 0.125em;
}

.navinci-contact-card-subtitle {
	color: var(--wp--preset--color--legal-text);
	font-family: "Mulish", sans-serif;
	font-size: 0.9375em;
	line-height: 1.6;
	margin: 0 0 calc(var(--navinci-fluid-base) * 2) !important;
	max-width: calc(var(--navinci-fluid-base) * 32.8125);
}

.navinci-contact-card>.navinci-contact-form-wrap {
	margin-top: 0;
}

.navinci-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.25em;
}

.navinci-contact-row {
	display: flex;
	width: 100%;
}

.navinci-contact-field {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	width: 100%;
}

.navinci-contact-field-half {
	max-width: 17.75em;
}

.navinci-contact-label {
	color: var(--wp--preset--color--legal-text);
	font-family: "Mulish", sans-serif;
	font-weight: 600;
	font-size: 0.75em;
	letter-spacing: 0.05em;
	line-height: 1.3333;
	text-transform: uppercase;
}

.navinci-contact-input {
	background: #0e0c0b;
	border: 1px solid #292321;
	border-radius: 0.2667em;
	color: #f5f2ed;
	font-family: "Mulish", sans-serif;
	font-size: 0.9375em;
	height: 2.9333em;
	padding: 0 1.0667em;
	width: 100%;
	box-sizing: border-box;
}

.navinci-contact-input::placeholder {
	color: #5c666b;
}

.navinci-contact-input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-orange);
}

.navinci-contact-textarea {
	display: block;
	height: auto;
	line-height: 1.6;
	min-height: 8.6667em;
	padding: 1.0667em;
	resize: vertical;
}

.navinci-contact-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M1 1L5 5.5L9 1' stroke='%23b8b3ae' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.0667em center;
	background-size: 0.6667em auto;
	padding-right: 2.6667em;
}

.navinci-contact-select option {
	background: #0e0c0b;
	color: #f5f2ed;
}

.navinci-contact-submit {
	background: #c44809;
	border: none;
	border-radius: 0.2em;
	color: #fff;
	cursor: pointer;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 1.25em;
	letter-spacing: 0.05em;
	line-height: 1.4;
	text-transform: uppercase;
	padding: 0.7em;
	/* The design adds 14px under the message box before the button (at 1440px). */
	margin-top: 0.7em;
	transition: background-color 0.15s ease;
}

.navinci-contact-submit:hover {
	background: var(--wp--preset--color--accent-magenta);
}

.navinci-contact-microcopy {
	color: #8c969e;
	font-family: "Mulish", sans-serif;
	font-size: 0.8125em;
	line-height: 1.5385;
	text-align: center;
	margin: 0.3077em 0 0;
}

.navinci-hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.navinci-contact-notice {
	border-radius: 0.5333em;
	padding: 1.0667em 1.3333em;
	font-family: "Mulish", sans-serif;
	font-size: 0.9375em;
	margin-bottom: 1.6em;
}

.navinci-contact-notice-success {
	background: rgba(34, 197, 94, 0.12);
	border: 1px solid rgba(34, 197, 94, 0.35);
	color: #86efac;
}

.navinci-contact-notice-error {
	background: rgba(239, 68, 68, 0.12);
	border: 1px solid rgba(239, 68, 68, 0.35);
	color: #fca5a5;
}

@media (max-width: 1100px) {

	.navinci-contact-hero,
	.navinci-contact-card {
		--navinci-contact-gutter: 40px;
	}
}

@media (max-width: 700px) {

	.navinci-contact-hero,
	.navinci-contact-card {
		--navinci-contact-gutter: 20px;
	}

	.navinci-contact-hero h1 {
		font-size: 2rem;
		line-height: 1.1;
		max-width: none;
	}

	.navinci-contact-card {
		padding: 24px;
	}

	.navinci-contact-field-half {
		max-width: 100%;
	}
}

/* Generic scroll-triggered fade-up, paired with assets/js/fade-in.js.
   Apply .navinci-fade-in to anything that should reveal on scroll, and
   one .navinci-fade-delay-N per element to stagger a group — explicit
   classes rather than nth-child, so it works regardless of markup shape. */
.navinci-fade-in {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 5s ease, transform 5s ease;
}

.navinci-fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Span fragments (e.g. per-line heading text) need inline-block for the
   transform to actually apply — plain inline elements ignore transforms.
   Block-level uses (paragraphs, divs) keep their natural display. */
span.navinci-fade-in {
	display: inline-block;
}

.navinci-fade-delay-1 {
	transition-delay: 0s;
}

.navinci-fade-delay-2 {
	transition-delay: 0.15s;
}

.navinci-fade-delay-3 {
	transition-delay: 0.3s;
}

.navinci-fade-delay-4 {
	transition-delay: 0.45s;
}

.navinci-fade-delay-5 {
	transition-delay: 0.6s;
}

.navinci-fade-delay-background {
	transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
	.navinci-fade-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.navinci-fade-in-background {
	opacity: 0;
	transform: translateY(20px) !important;
	transition: opacity 2s ease, transform 2s ease !important;
}

/* The !important above also beat .is-visible, so the hero stayed 20px lower
   after fading in (and kept a transform, which forces its own compositing
   layer). Once visible it rests at its normal position. */
.navinci-fade-in-background.is-visible {
	transform: none !important;
}

/* Full-screen home sections (Why function matters, Why choose Navinci,
   Evidence): each is at least one viewport tall with its content centred,
   and padding that grows with the screen width (160px / 150px from about
   1870px). With a section scrolled to the middle of the screen, no
   neighbouring section shows. Everything inside is sized in em from
   --navinci-fluid-base, so text, icons and spacing grow together. */
main .navinci-why-function,
main .navinci-why-choose,
main .navinci-evidence,
main .navinci-science-tech,
main .navinci-science-apps,
main .navinci-science-why,
main .navinci-sol-services,
main .navinci-about-careers,
main .navinci-sol-featured,
main .navinci-sol-approach,
main .navinci-latest-news {
	font-size: var(--navinci-fluid-base);
	background: #05070a;
	margin-block-start: 0;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(64px, 8.56vw, 160px) 24px clamp(60px, 8vw, 150px);
}

.navinci-why-function>*,
.navinci-why-choose>*,
.navinci-evidence>*,
.navinci-science-tech>*,
.navinci-science-apps>*,
.navinci-science-why>*,
.navinci-sol-services>*,
.navinci-about-careers>*,
.navinci-sol-featured>*,
.navinci-sol-approach>*,
.navinci-latest-news>* {
	width: 100%;
	/* 1104px at the base size; grows with the text so headlines never wrap
	   as they get bigger. Not em: that would resolve against each child's
	   own (different) font size. */
	max-width: calc(var(--navinci-fluid-base) * 69);
}

/* In a flex container margins don't collapse, so WordPress's default 24px
   gap between sibling blocks would add to the spacing set below. */
main .navinci-why-function>*,
main .navinci-why-choose>*,
main .navinci-evidence>*,
main .navinci-science-tech>*,
main .navinci-science-apps>*,
main .navinci-science-why>*,
main .navinci-sol-services>*,
main .navinci-about-careers>*,
main .navinci-sol-featured>*,
main .navinci-sol-approach>*,
main .navinci-latest-news>* {
	margin-top: 0;
}

/* Section headlines: put the class "navinci-section-title" on a heading
   (block settings -> Advanced -> Additional CSS class) and it gets the one
   responsive size below: on desktop 49.2px up to 1440px wide, then growing
   evenly to 70px at 2560px (and staying there on wider screens); 2.4em at
   700-1099px; 2rem on mobile. In px on purpose: following the site-wide text
   scale (em from --navinci-fluid-base) made them 87px at 2560px, too large.
   Line heights stay with each section. Used by the headlines of Why function
   matters, Why choose Navinci and Evidence. */
.wp-block-heading.navinci-section-title {
	font-size: clamp(49.2px, calc(49.2px + (100vw - 1440px) * 0.01857), 70px);
}

@media (min-width: 700px) and (max-width: 1099px) {
	.wp-block-heading.navinci-section-title {
		font-size: 2.4em;
	}
}

/* 1100-1439px: continue from the 38.4px used just below 1100px and grow evenly
   to 49.2px at 1440px, instead of jumping straight to 49.2px at 1100px. */
@media (min-width: 1100px) and (max-width: 1439px) {
	.wp-block-heading.navinci-section-title {
		font-size: calc(38.4px + (100vw - 1100px) * 0.031765);
	}
}

@media (max-width: 700px) {
	.wp-block-heading.navinci-section-title {
		font-size: 2rem;
	}
}

/* Intro paragraph under a section headline: put the class
   "navinci-section-lede" on it (Advanced -> Additional CSS class) and it never
   gets larger than 25px (the size chosen at 2560px wide). Up to
   that point each paragraph keeps its own size, set with --navinci-lede-em
   (default 1em) and growing with the screen like the rest of the section.
   Change the 25px here to change the limit for all of them at once. */
p.navinci-section-lede {
	font-size: min(var(--navinci-lede-em, 1em), 25px);
}

/* Shared look of the three Home sections' eyebrow, headline spacing, intro and
   button spacing (Why function matters, Why choose Navinci, Evidence). Sizes
   were chosen at 2560px wide; up to 1440px the earlier values are kept and in
   between everything grows evenly (px + vw, so it doesn't follow the site-wide
   text scale all the way up).
   Eyebrow: 18px -> 25.6px, weight 500, with a short orange line under it. */
.navinci-why-function .navinci-why-eyebrow,
.navinci-why-choose .navinci-choose-eyebrow,
.navinci-evidence .navinci-evidence-eyebrow,
.navinci-science-tech .navinci-tech-eyebrow,
.navinci-science-apps .navinci-apps-eyebrow,
.navinci-science-why .navinci-sw-eyebrow,
.navinci-sol-services .navinci-sol-eyebrow,
.navinci-about-careers .navinci-ac-eyebrow,
.navinci-sol-approach .navinci-ap-eyebrow,
.navinci-latest-news .navinci-ln-eyebrow {
	font-weight: 500;
	font-size: clamp(18px, calc(18px + (100vw - 1440px) * 0.006786), 25.6px);
	/* Space between the line and the headline: 28px on small screens, 43.9px at
	   1440px, 78px at 2560px (then capped). */
	margin: 0 0 clamp(28px, 3.05vw, calc(var(--navinci-fluid-base) * 2.743));
}

.navinci-why-function .navinci-why-eyebrow::after,
.navinci-why-choose .navinci-choose-eyebrow::after,
.navinci-evidence .navinci-evidence-eyebrow::after,
.navinci-science-tech .navinci-tech-eyebrow::after,
.navinci-science-apps .navinci-apps-eyebrow::after,
.navinci-science-why .navinci-sw-eyebrow::after,
.navinci-sol-services .navinci-sol-eyebrow::after,
.navinci-about-careers .navinci-ac-eyebrow::after,
.navinci-sol-approach .navinci-ap-eyebrow::after {
	content: "";
	display: block;
	/* 95px wide and 38px below the text at 2560px. */
	width: clamp(48px, 3.7vw, calc(var(--navinci-fluid-base) * 3.34));
	margin: clamp(14px, 1.486vw, calc(var(--navinci-fluid-base) * 1.336)) auto 0;
	border-top: 2px solid var(--wp--preset--color--accent-orange);
}

/* Headline -> intro: 25.4px up to 1440px wide, 20px at 2560px. Intro -> next
   block: 70px. Button gap above the section's button: 62px up to 1440px wide,
   70px at 2560px. */
.navinci-why-function .navinci-why-title,
.navinci-why-choose .navinci-choose-title,
.navinci-science-tech .navinci-tech-title,
.navinci-science-apps .navinci-apps-title,
.navinci-science-why .navinci-sw-title,
.navinci-sol-services .navinci-sol-title,
.navinci-about-careers .navinci-ac-title,
.navinci-sol-approach .navinci-ap-title {
	margin: 0 0 clamp(20px, calc(25.4px - (100vw - 1440px) * 0.004821), 25.4px);
}

.navinci-why-function .navinci-why-lede,
.navinci-why-choose .navinci-choose-lede,
.navinci-science-tech .navinci-tech-lede,
.navinci-science-apps .navinci-apps-lede,
.navinci-science-why .navinci-sw-lede,
.navinci-sol-services .navinci-sol-lede,
.navinci-about-careers .navinci-ac-lede {
	color: var(--wp--preset--color--legal-text);
	font-family: "Mulish", sans-serif;
	--navinci-lede-em: 1.125em;
	line-height: 1.36;
	margin: 0 0 clamp(70px, calc(71px - (100vw - 1440px) * 0.000893), 71px);
}

.navinci-why-function .navinci-why-cta,
.navinci-why-choose .navinci-choose-cta,
.navinci-evidence .navinci-evidence-cta,
.navinci-science-apps .navinci-apps-cta,
.navinci-science-why .navinci-sw-cta,
.navinci-about-careers .navinci-ac-cta,
.navinci-latest-news .navinci-ln-cta,
.navinci-sol-approach .navinci-ap-cta {
	margin-top: clamp(62px, calc(62px + (100vw - 1440px) * 0.007143), 70px);
}

/* Home — "Why function matters" section (patterns/why-function-matters.php,
   diagram from inc/why-function-matters.php). Figma: three 310px circles
   40px apart. */
main .navinci-why-function {
	border-top: 1px solid rgba(25, 32, 46, 0.3);
}

.navinci-why-function .navinci-why-eyebrow {
	color: var(--wp--preset--color--accent-orange);
	font-family: "Poppins", sans-serif;
	line-height: 0.8889;
	text-transform: uppercase;
}

.navinci-why-function .navinci-why-title {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	line-height: 1;
}

/* 3-step diagram: label above each circle, an arrow in each gap. */
.navinci-why-function .navinci-process {
	/* --navinci-process-gap is the distance between the edges of two circles
	   (the column is exactly as wide as its circle), so this one value moves
	   the circles closer together or further apart. */
	--navinci-process-gap: 3.7em;
	/* Circle diameter: 190px up to 1440px wide, then growing more slowly than the
	   text scale (12% smaller than 11.875em at 2560px = 297.2px), capped there. */
	--navinci-process-circle: clamp(190px, calc(190px + (100vw - 1440px) * 0.09571), 297.2px);
	display: flex;
	justify-content: center;
	gap: var(--navinci-process-gap);
	max-width: 63.125em;
	margin-top: 0;
}

.navinci-process-step {
	flex: none;
	width: var(--navinci-process-circle);
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* The label may be a little wider than its circle; nowrap + a centred flex
   column lets it overhang equally on both sides instead of wrapping. */
.navinci-process-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	white-space: nowrap;
	/* Space between the caption and its circle: 14px up to 1440px wide, easing
	   to 18px at 2560px. */
	margin-bottom: clamp(14px, calc(14px + (100vw - 1440px) * 0.003571), 18px);
	text-align: center;
}

.navinci-process .navinci-process-title {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	/* 18px up to 1440px wide, growing evenly to 25.6px (0.9em of the section) at
	   2560px, then staying there. In px so it doesn't follow the site-wide
	   text scale all the way up. */
	font-size: clamp(18px, calc(18px + (100vw - 1440px) * 0.006786), 25.6px);
	letter-spacing: 0.03em;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 calc(var(--navinci-fluid-base) * 0.49);
}

.navinci-process .navinci-process-caption {
	color: var(--wp--preset--color--legal-text);
	font-family: "Mulish", sans-serif;
	/* 16.4px up to 1440px wide, growing evenly to 22.75px (0.8em of the section)
	   at 2560px, then staying there. */
	font-size: clamp(16.4px, calc(16.4px + (100vw - 1440px) * 0.00567), 22.75px);
	line-height: 0.9756;
	margin: 0;
}

.navinci-process-figure {
	position: relative;
	width: 100%;
}

.navinci-process-circle {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 9999px;
	overflow: hidden;
}

.navinci-process-bg,
.navinci-process-overlay {
	position: absolute;
	display: block;
	max-width: none;
}

.navinci-process-bg {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Overlay placement within the 310px circle, as in the design. */
.navinci-process-circle.is-expression .navinci-process-overlay {
	left: 12.903%;
	top: 5.161%;
	width: 74.194%;
	height: 89.677%;
}

.navinci-process-circle.is-function .navinci-process-overlay {
	left: 5.161%;
	top: 5.484%;
	width: 89.677%;
	height: 89.032%;
}

.navinci-process-circle.is-interaction .navinci-process-overlay {
	left: 5.161%;
	top: 5.161%;
	width: 89.677%;
	height: 89.677%;
}

.navinci-process-arrow {
	position: absolute;
	left: 100%;
	top: 50%;
	/* Spans exactly the gap between two circles, with the arrow centred in it. */
	width: var(--navinci-process-gap);
	display: flex;
	justify-content: center;
	color: #fff;
	transform: translateY(-50%);
}

.navinci-process-arrow svg {
	width: 1.5em;
	height: 1.5em;
}

/* Small outlined button (not used on the home page right now). */
.navinci-btn-outline.navinci-btn-sm .wp-block-button__link {
	background-color: #05070a;
	border-width: 0.5px;
	border-radius: 8px;
	font-size: 10px;
	line-height: 16px;
	padding: 5.5px 10.5px;
}

/* Medium outlined button (one step up from -sm), used by the three Home
   sections. Text is 14px up to 1440px wide, growing evenly to 19.2px at 2560px
   (then capped); padding is in em, so the button grows with its text. */
.navinci-btn-outline.navinci-btn-m .wp-block-button__link {
	background-color: #05070a;
	border-width: 1px;
	border-radius: 8px;
	font-size: clamp(14px, calc(14px + (100vw - 1440px) * 0.004643), 19.2px);
	line-height: 1.4286;
	padding: 0.7em 1.525em;
}

.navinci-btn-outline.navinci-btn-sm .wp-block-button__link:hover,
.navinci-btn-outline.navinci-btn-sm .wp-block-button__link:focus,
.navinci-btn-outline.navinci-btn-m .wp-block-button__link:hover,
.navinci-btn-outline.navinci-btn-m .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-orange);
	color: #fff;
}

@media (max-width: 900px) {
	.navinci-why-function .navinci-process {
		--navinci-process-gap: 36px;
	}

	.navinci-why-function .navinci-why-lede br {
		display: none;
	}
}

@media (max-width: 700px) {
	main .navinci-sol-approach {
		padding-left: 20px;
		padding-right: 20px;
	}

	main .navinci-sol-featured {
		padding-left: 20px;
		padding-right: 20px;
	}

	main .navinci-about-careers {
		padding-left: 20px;
		padding-right: 20px;
	}

	main .navinci-latest-news {
		padding-left: 20px;
		padding-right: 20px;
	}

	main .navinci-sol-services {
		padding-left: 20px;
		padding-right: 20px;
	}

	main .navinci-science-why {
		padding-left: 20px;
		padding-right: 20px;
	}

	main .navinci-science-apps {
		padding-left: 20px;
		padding-right: 20px;
	}

	main .navinci-science-tech {
		padding-left: 20px;
		padding-right: 20px;
	}

	main .navinci-why-function {
		padding-left: 20px;
		padding-right: 20px;
	}

	.navinci-why-function .navinci-why-title {
		line-height: 1.2;
	}

	.navinci-why-function .navinci-process {
		--navinci-process-gap: 72px;
		flex-direction: column;
		align-items: center;
	}

	.navinci-process-arrow {
		left: 50%;
		top: 100%;
		width: 24px;
		height: var(--navinci-process-gap);
		align-items: center;
		transform: translateX(-50%);
	}

	.navinci-process-arrow svg {
		transform: rotate(90deg);
	}
}

/* The button under the pillars sits a little closer than the other sections':
   48px up to 1440px wide, 53px at 2560px. */
.navinci-why-choose .navinci-choose-cta {
	margin-top: clamp(48px, calc(48px + (100vw - 1440px) * 0.004464), 53px);
}

/* Home — "Why choose Navinci" section (patterns/why-choose-navinci.php).
   Figma: 1104px content, three pillars 40px apart. */
.navinci-why-choose .navinci-choose-eyebrow {
	color: var(--wp--preset--color--accent-orange);
	font-family: "Poppins", sans-serif;
	line-height: 0.8889;
	text-transform: uppercase;
}

.navinci-why-choose .navinci-choose-title {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	line-height: 1;
}

.navinci-why-choose .navinci-choose-lede {
	max-width: 42em;
}

.navinci-choose-pillars {
	display: flex;
	gap: 2.5em;
	/* Wider than the headline above (up to 1240px), so the pillar texts, which
	   are set to the same size as the diagram's, fit in their line breaks. */
	max-width: max(calc(var(--navinci-fluid-base) * 69), 1240px);
	padding: 0;
	margin-bottom: 0;
}

/* Zero WordPress's default gap between sibling blocks; the row's own gap
   spaces the pillars. */
.navinci-choose-pillars>.navinci-choose-pillar {
	margin: 0;
}

.navinci-choose-pillar {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1em;
	text-align: center;
}

/* Icons come from the theme (relative to this stylesheet), so they travel
   with it and need no media-library upload. */
.navinci-choose-icon {
	flex: none;
	width: 4em;
	height: 4em;
	/* Space under the icon: 14px up to 1440px wide, easing to 7px at 2560px
	   (then staying). */
	margin: 0 0 clamp(7px, calc(14px - (100vw - 1440px) * 0.00625), 14px);
	/* Reference icon size (the partnership icon; the others are scaled from it
	   below). 60.88px up to 1440px wide, then growing more slowly than the text
	   scale to 86.74px (3.05em) at 2560px, capped there. */
	--navinci-choose-icon-size: clamp(60.88px, calc(60.88px + (100vw - 1440px) * 0.023089), 86.74px);
	/* No rounded corners: a round box clips the background, which cut the handle
	   off the magnifying glass (it sits in the bottom-right corner of the icon). */
	border-radius: 0;
	background-position: center;
	background-repeat: no-repeat;
}

/* Block editor only: an empty Group block shows WordPress's layout-picker
   placeholder (the white box with grey bars), which sits on top of the icon
   (drawn as this block's background) and pushes the text around. These icon
   blocks are meant to be empty, so hide the placeholder. It never exists on
   the front end. */
.navinci-choose-icon .components-placeholder,
.navinci-evidence-icon .components-placeholder {
	display: none !important;
}

.navinci-choose-icon.is-access {
	background-image: url("../images/why-choose/icon-access.svg");
	background-size: var(--navinci-choose-icon-size) calc(var(--navinci-choose-icon-size) * 0.3407);
}

.navinci-choose-icon.is-partnership {
	background-image: url("../images/why-choose/icon-partnership.svg");
	background-size: var(--navinci-choose-icon-size) var(--navinci-choose-icon-size);
}

.navinci-choose-icon.is-support {
	background-image: url("../images/why-choose/icon-support.svg");
	background-size: calc(var(--navinci-choose-icon-size) * 0.9220) calc(var(--navinci-choose-icon-size) * 0.9220);
}

.navinci-choose-pillar .navinci-choose-pillar-title {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	/* Same size as the diagram's step titles (.navinci-process-title): 18px up
	   to 1440px wide, 25.6px at 2560px, then staying there. */
	font-size: clamp(18px, calc(18px + (100vw - 1440px) * 0.006786), 25.6px);
	line-height: 0.9333;
	margin: 0 0 4px;
}

.navinci-choose-pillar .navinci-choose-pillar-text {
	color: #cbd5e1;
	font-family: "Poppins", sans-serif;
	/* Same size as the diagram's captions (.navinci-process-caption): 16.4px up
	   to 1440px wide, 22.75px at 2560px, then staying there. */
	font-size: clamp(16.4px, calc(16.4px + (100vw - 1440px) * 0.00567), 22.75px);
	line-height: 1.4333;
	max-width: calc(var(--navinci-fluid-base) * 20);
	/* 5px at the base size; it adds to the title's own margin-bottom. */
	margin: calc(var(--navinci-fluid-base) * 0.3125) 0 0;
}

/* Wide screens: keep the design's line breaks without extra wrapping. */
@media (min-width: 1220px) {
	.navinci-choose-pillar .navinci-choose-pillar-text {
		max-width: none;
		white-space: nowrap;
	}
}

/* Below 1220px the three pillar texts no longer fit side by side in the
   design's line breaks, so let them wrap. */
@media (max-width: 1219px) {
	.navinci-choose-pillar-text br {
		display: none;
	}
}

@media (max-width: 1099px) {

	.navinci-why-choose .navinci-choose-lede br {
		display: none;
	}
}

@media (max-width: 800px) {
	.navinci-choose-pillars {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.navinci-choose-pillar {
		flex: none;
		width: 100%;
		max-width: 360px;
	}
}

@media (max-width: 700px) {
	main .navinci-why-choose {
		padding-left: 20px;
		padding-right: 20px;
	}

	.navinci-why-choose .navinci-choose-title {
		line-height: 1.2;
	}
}

/* One text scale for the whole site. The Figma frame is 1440px wide, so up
   to 1440px nothing changes (16px), and on wider screens all text grows in
   proportion to the screen width: 1.33x at 1920px, 1.78x at 2560px, capped
   at 30px (1.875x). Everything sized in rem (menu, footer, buttons, body
   text, the contact page) follows html's font-size; the home page sections
   and the Contact fade banner follow --navinci-fluid-base, the same value. */
html {
	font-size: clamp(100%, 1.1111vw, 30px);
}

/* --navinci-fluid-base is the same scale as html's font-size above, but in px
   so it doesn't depend on the root. Sections that use it set
   `font-size: var(--navinci-fluid-base)` on themselves and size their text,
   icons and spacing in em, so everything scales together. */
:root {
	--navinci-fluid-base: clamp(16px, 1.1111vw, 30px);
	/* Spacing between blocks: s = eyebrow -> headline, m = headline -> intro,
	   l = between the larger parts of a section. Shrinks on small screens. */
	--navinci-gap-s: clamp(28px, 3.3vw, calc(var(--navinci-fluid-base) * 3));
	--navinci-gap-m: clamp(20px, 2.2vw, calc(var(--navinci-fluid-base) * 2));
	--navinci-gap-l: clamp(56px, 6.9vw, calc(var(--navinci-fluid-base) * 6.25));
}

/* Home — "Evidence" section (patterns/evidence.php). Figma: 1104px content,
   three stats 32px apart. Spacing is deliberately roomier than the Figma
   frame, and the section fills the viewport (content centred), so with it
   scrolled to the middle of the screen no neighbouring section shows. */
.navinci-evidence .navinci-evidence-eyebrow {
	color: var(--wp--preset--color--accent-orange);
	font-family: "Poppins", sans-serif;
	line-height: 0.8889;
	text-transform: uppercase;
}

.navinci-evidence .navinci-evidence-title {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	line-height: 0.8333;
	margin: 0 0 var(--navinci-gap-l);
}

.navinci-evidence-stats {
	display: flex;
	gap: 2em;
	padding: 0;
	margin-bottom: 0;
}

.navinci-evidence-stats>.navinci-evidence-stat {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin: 0;
}

.navinci-evidence-stat>* {
	margin: 0;
}

/* Icons come from the theme (relative to this stylesheet). */
.navinci-evidence-icon {
	flex: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.navinci-evidence-icon.is-publications {
	width: 2.7006em;
	height: 3.4881em;
	background-image: url("../images/evidence/icon-publications.svg");
}

.navinci-evidence-icon.is-institutions {
	width: 2.7006em;
	height: 3.4881em;
	background-image: url("../images/evidence/icon-institutions.svg");
}

.navinci-evidence-icon.is-countries {
	width: 3.2538em;
	height: 3.2538em;
	background-image: url("../images/evidence/icon-countries.svg");
}

.navinci-evidence-stat-text .navinci-evidence-number {
	color: #fff;
	font-family: "Poppins", sans-serif;
	/* 36px up to 1440px wide, easing to 36.97px (1.3em of the section) at
	   2560px, then staying there. */
	font-size: clamp(36px, calc(36px + (100vw - 1440px) * 0.000866), 36.97px);
	line-height: 1.1111;
	margin: 0;
}

.navinci-evidence-stat-text .navinci-evidence-label {
	color: #cbd5e1;
	font-family: "Poppins", sans-serif;
	/* 18px up to 1440px wide, growing to 28.44px (1em of the section) at 2560px,
	   then staying there. */
	font-size: clamp(18px, calc(18px + (100vw - 1440px) * 0.009321), 28.44px);
	line-height: 0.8889;
	/* 5px up to 1440px wide, easing to 14px at 2560px. */
	margin: clamp(5px, calc(5px + (100vw - 1440px) * 0.008036), 14px) 0 0;
}

@media (min-width: 700px) and (max-width: 1099px) {

	.navinci-evidence-stats {
		/*flex-direction: column;*/
		gap: 1.5em;
		padding-left: 36px;
		overflow: hidden;
	}

	/* Stacked: align the rows on a shared left edge instead of centering
	   each one by its own width. */
	.navinci-evidence-stats {
		align-items: center;
	}

	.navinci-evidence-stats>.navinci-evidence-stat {
		flex: none;
		width: 100%;
		max-width: 20em;
		justify-content: flex-start;
	}

	.navinci-evidence-stat .navinci-evidence-icon {
		width: 3.2538em;
		background-size: auto 100%;
	}

	.navinci-evidence-number {
		font-size: 2.1em !important;
	}

	.navinci-evidence-label {
		font-size: 1em !important;
	}
}

@media (max-width: 1030px) {
	.navinci-evidence-stats {
		gap: 0em;
		padding-left: 0px !important;
	}
}

/* Still in one row (931-1099px): let each stat be as wide as its own content and
   spread the leftover space evenly, so the group is centred instead of every
   stat sitting at the left of a fixed 20em box. */
@media (min-width: 931px) and (max-width: 1099px) {
	.navinci-evidence-stats {
		justify-content: space-evenly;
		padding-left: 0;
		gap: 0;
	}

	.navinci-evidence-stats>.navinci-evidence-stat {
		flex: none;
		width: auto;
		max-width: none;
		justify-content: center;
	}
}

@media (max-width: 930px) {
	.navinci-evidence-stats {
		flex-direction: column;
		align-items: center;
		gap: 3.5em;
	}

	/* Stacked: every row gets the same width and starts at the same left edge
	   (rather than being centred by its own, different, width), and the three
	   icons share one box width so the text lines up too. */
	.navinci-evidence-stats>.navinci-evidence-stat {
		flex: none;
		width: 100%;
		max-width: 20em;
		justify-content: flex-start;
	}

	.navinci-evidence-stat .navinci-evidence-icon {
		width: 3.2538em;
		background-size: auto 100%;
	}
}

@media (max-width: 700px) {
	main .navinci-evidence {
		padding-left: 20px;
		padding-right: 20px;
	}

	.navinci-evidence .navinci-evidence-title {
		line-height: 1.2;
	}
}

/* Home — "Contact fade" closing banner (patterns/contact-fade.php).
   Gradient and spacing measured from the Figma export: near-black at the
   top fading to a deep orange-brown, left aligned. Sized in em from
   --navinci-fluid-base (the Figma frame is 1440px wide, so it is 16px up to
   1440px and grows in proportion to the screen width above that), keeping the
   banner looking like the design on wide screens. */
main .navinci-contact-fade {
	font-size: var(--navinci-fluid-base);
	background-image: linear-gradient(180deg, #05070a 0%, #05070a 8%, #120b09 19%, #241208 32%, #371809 45%, #491f08 58%, #5c2309 71%, #6d2a08 84%, #782e0a 97%, #782e0a 100%);
	margin-block-start: 0;
	padding: 6.6875em 6.25em 6.125em; /* 107px 100px 98px at 1440px */
}

/* Constrained layout centers every child in a 1152px column; this banner
   is left aligned, hence !important on the side margins. */
.navinci-contact-fade>* {
	max-width: none;
}

/* Stronger selector for the margins (see the contact page rule above). */
.wp-block-group.navinci-contact-fade>* {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.navinci-contact-fade .navinci-contact-fade-title {
	color: #fff9f6;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	/* 40px up to 1440px wide, growing evenly to 56.88px (2em of the section) at
	   2560px, then staying there. In px so it doesn't follow the site-wide
	   text scale all the way up. */
	font-size: clamp(40px, calc(40px + (100vw - 1440px) * 0.01507), 56.88px);
	letter-spacing: -0.005em;
	line-height: 1.2;
	/* Wraps after "starts", as in the design. */
	max-width: 12em;
	margin: 0 0 0.95em;
}

.navinci-contact-fade .navinci-contact-fade-text {
	color: #fff;
	font-family: "Poppins", sans-serif;
	/* 20px up to 1440px wide, growing evenly to 28.44px (1em of the section) at
	   2560px, then staying there. */
	font-size: clamp(20px, calc(20px + (100vw - 1440px) * 0.007536), 28.44px);
	line-height: 1.4;
	margin: 0;
}

/* The space between the text and the button comes from the button block's
   own margin-top (margins between siblings would collapse, so the text
   above has none). 2.5 x the base size = 40px at 1440px. */
.navinci-contact-fade .navinci-contact-fade-cta {
	margin: calc(var(--navinci-fluid-base) * 2.5) 0 0;
}

/* Compact solid button ("Let's connect"). */
.navinci-btn-solid.navinci-btn-compact .wp-block-button__link {
	/* Text 17px up to 1440px wide, growing to 22.75px (0.8em of the section) at
	   2560px; padding 12.75px 34px -> 13.65px 36.4px (0.6em 1.6em at 2560px). */
	font-size: clamp(17px, calc(17px + (100vw - 1440px) * 0.005134), 22.75px);
	line-height: 1.3333;
	padding: clamp(12.75px, calc(12.75px + (100vw - 1440px) * 0.000804), 13.65px) clamp(34px, calc(34px + (100vw - 1440px) * 0.002143), 36.4px);
	border-radius: 0.5em;
	text-transform: uppercase;
}

/* The banner meets the footer directly; drop WordPress's default gap
   between <main> and the footer so no dark band shows under the gradient. */
main:has(.navinci-contact-fade)+footer {
	margin-top: 0;
}

@media (max-width: 900px) {
	.navinci-contact-fade .navinci-contact-fade-text br {
		display: none;
	}
}

@media (max-width: 700px) {
	main .navinci-contact-fade {
		padding: 64px 20px;
	}

	.navinci-contact-fade .navinci-contact-fade-title {
		font-size: 2rem;
		line-height: 1.2;
		max-width: none;
	}

	.navinci-contact-fade .navinci-contact-fade-text {
		font-size: 1rem;
		line-height: 1.6;
	}
}
/* Home eyebrows: text removed, only the orange line is kept. */
.navinci-why-function .navinci-why-eyebrow::after,
.navinci-why-choose .navinci-choose-eyebrow::after,
.navinci-evidence .navinci-evidence-eyebrow::after,
.navinci-science-tech .navinci-tech-eyebrow::after,
.navinci-science-apps .navinci-apps-eyebrow::after,
.navinci-science-why .navinci-sw-eyebrow::after,
.navinci-sol-services .navinci-sol-eyebrow::after,
.navinci-about-careers .navinci-ac-eyebrow::after,
.navinci-sol-approach .navinci-ap-eyebrow::after {
	margin-top: 0;
}

/* About page, section under Careers: address and contact
   (patterns/about-address.php). Uses the Careers section's layout, eyebrow
   line, headline and button spacing (.navinci-about-careers / .navinci-ac-*). */
/* The headline and the columns share a wrapper that is exactly as wide as the
   headline text (the columns add no width: width 0, min-width 100%). The logo
   column starts under the first letter of the headline and the address column
   about two thirds in (Figma: logo under the "H", mail icon under the "n" of
   "need"); the address text runs past the end of the headline. */
main .navinci-about-address>.navinci-aa-wrap {
	display: grid;
	width: fit-content;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

.navinci-about-address .navinci-aa-wrap>* {
	margin-top: 0;
}

.navinci-about-address .navinci-aa-cols {
	display: grid;
	grid-template-columns: 62.7% max-content;
	justify-content: start;
	align-items: start;
	width: 0;
	min-width: 100%;
	/* Space between the headline and the columns: 35px at 1440px, growing with
	   the screen (about 62px at 2560px), at least 24px. */
	margin: clamp(24px, 2.43vw, calc(var(--navinci-fluid-base) * 2.43)) 0 0;
	/* A little to the left of the headline's first letter: 32px at 1440px. */
	transform: translateX(calc(var(--navinci-fluid-base) * -2));
}

.navinci-aa-cols>.navinci-aa-col {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.navinci-aa-cols>.navinci-aa-col-address {
	display: grid;
	grid-template-columns: auto auto;
	column-gap: clamp(24px, 2.6vw, calc(var(--navinci-fluid-base) * 2.7));
	align-items: start;
}

.navinci-aa-col-address .navinci-aa-icon {
	grid-row: 1 / span 2;
}

.navinci-aa-col-address>.navinci-aa-text {
	grid-column: 2;
}

.navinci-aa-logo {
	width: clamp(150px, 15vw, calc(var(--navinci-fluid-base) * 14.2));
	aspect-ratio: 204 / 42;
	background: url("../images/about/logo-horizontal.svg?v=1") left center / contain no-repeat;
	margin: 0 0 clamp(28px, 3vw, calc(var(--navinci-fluid-base) * 2.8));
}

.navinci-aa-icon {
	width: clamp(64px, 5.7vw, calc(var(--navinci-fluid-base) * 5.7));
	aspect-ratio: 60.33 / 44.02;
	background: url("../images/about/icon-mail.svg?v=2") center / contain no-repeat;
	margin: 0;
}

.navinci-aa-text {
	color: #cbd5e1;
	font-family: "Poppins", sans-serif;
	font-size: clamp(16.4px, calc(16.4px + (100vw - 1440px) * 0.00567), 22.75px);
	line-height: 1.4333;
	margin: 0;
}

.navinci-aa-text.navinci-aa-mail {
	margin-top: 1.4333em;
}

.navinci-aa-mail a {
	color: inherit;
	text-decoration: underline;
}

.navinci-about-address .navinci-aa-cta {
	margin-top: clamp(40px, 3.6vw, calc(var(--navinci-fluid-base) * 3.6));
}

@media (max-width: 860px) {
	main .navinci-about-address>.navinci-aa-wrap {
		display: block;
		width: 100%;
	}

	.navinci-about-address .navinci-aa-cols {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
		width: auto;
		transform: none;
	}
}

/* About page: "Science is a team effort." (patterns/about-team.php). The
   people come from Team in the admin menu (plugin navinci-team, shortcode
   [navinci_team section="..."]). The section uses the Careers section's
   layout, eyebrow line, headline and intro. */
/* Heading + grid share one wrapper (printed by the shortcode), so they keep the
   same width and side space wherever the shortcode is placed: 1104px at 1440px,
   growing with the other sections, and 24px from the screen edges. Inside the
   section the section's own padding does that, so the gutter is 0 there. */
.navinci-team-group {
	--navinci-team-gutter: 24px;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--navinci-fluid-base) * 69 + var(--navinci-team-gutter) * 2);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--navinci-team-gutter);
	padding-right: var(--navinci-team-gutter);
}

.navinci-about-team .navinci-team-group {
	--navinci-team-gutter: 0px;
	margin-top: 0;
}

.navinci-about-team .navinci-at-lede+.navinci-team-group {
	margin-top: clamp(48px, 4.9vw, calc(var(--navinci-fluid-base) * 4.9));
}

.navinci-about-team .navinci-team-group+.navinci-team-group {
	margin-top: clamp(64px, 6.9vw, calc(var(--navinci-fluid-base) * 6.9));
}

.navinci-team-group .navinci-team-group-title {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: clamp(20px, calc(20px + (100vw - 1440px) * 0.0054), 26px);
	line-height: 1.2;
	margin: 0 0 clamp(20px, 2vw, 32px);
}

/* Five cards per row; the same grid in every section. Rows with fewer people
   keep the same column width and stay left-aligned. */
.navinci-team-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(28px, 2.8vw, calc(var(--navinci-fluid-base) * 2.8)) clamp(12px, 1.1vw, calc(var(--navinci-fluid-base) * 1.1));
}

.navinci-team-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

.navinci-team-photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 0.5em;
	overflow: hidden;
	background: #11151c;
	margin: 0 0 clamp(12px, 1.1vw, 18px);
}

.navinci-team-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.navinci-team-card .navinci-team-name {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: clamp(15px, calc(15px + (100vw - 1440px) * 0.0054), 21px);
	line-height: 1.25;
	margin: 0;
}

.navinci-team-card .navinci-team-role,
.navinci-team-dialog .navinci-team-role {
	color: #cbd5e1;
	font-family: "Poppins", sans-serif;
	font-size: clamp(13px, calc(13px + (100vw - 1440px) * 0.0045), 18px);
	line-height: 1.4;
	margin: 0.4em 0 0;
}

.navinci-team-more {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: clamp(10px, 1vw, 16px) 0 0;
	color: #fff;
	cursor: pointer;
	font-family: "Poppins", sans-serif;
	font-size: clamp(13px, calc(13px + (100vw - 1440px) * 0.0045), 18px);
	line-height: 1.2;
	text-decoration: none;
}

.navinci-team-more:hover,
.navinci-team-more:focus-visible {
	color: var(--wp--preset--color--accent-orange);
}

/* The window that opens with "Read more". */
.navinci-team-dialog {
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	background: #0b0e14;
	color: #fff;
	padding: clamp(24px, 3vw, 48px);
	box-sizing: border-box;
	width: min(860px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	overflow: auto;
}

.navinci-team-dialog[open] {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
	gap: clamp(20px, 2.5vw, 40px);
	align-items: start;
	/* The rows are as tall as their content and never squeezed: with a long text the
	   window is taller than the screen, and without this the photo row was squeezed
	   so the text ran over the photo. The window scrolls instead. */
	grid-auto-rows: max-content;
	align-content: start;
}

.navinci-team-dialog::backdrop {
	background: rgba(0, 0, 0, 0.72);
}

.navinci-team-dialog-photo {
	border-radius: 0.5em;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: #11151c;
}

.navinci-team-dialog-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.navinci-team-dialog .navinci-team-name {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.2;
	margin: 0;
}

.navinci-team-dialog .navinci-team-description {
	color: #cbd5e1;
	font-family: "Poppins", sans-serif;
	font-size: clamp(14px, 1.15vw, 17px);
	line-height: 1.55;
	margin-top: 1.2em;
}

.navinci-team-dialog .navinci-team-description p {
	margin: 0 0 1em;
}

.navinci-team-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: 0;
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
}

.navinci-team-close:hover,
.navinci-team-close:focus-visible {
	color: var(--wp--preset--color--accent-orange);
}

html.navinci-team-open {
	overflow: hidden;
}

@media (max-width: 1099px) {
	.navinci-team-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

	.navinci-team-dialog[open] {
		grid-template-columns: 1fr;
	}

	.navinci-team-dialog-photo {
		/* A fixed width (not max-width), so the height from the 4:5 ratio is known. */
		width: min(100%, 220px);
	}
}

/* About page: the eyebrows (Our people, Careers, Address) are text only, with
   no orange line, so the space under them is shorter than the space under a
   line (about 30px at 1440px). */
.navinci-about-careers .navinci-ac-eyebrow::after {
	display: none;
}

.navinci-about-careers .navinci-ac-eyebrow {
	margin-bottom: clamp(18px, 2.1vw, calc(var(--navinci-fluid-base) * 1.9));
}

/* About page, Careers section only (not Our people or Address, which share
   its classes): 10px above the button and a shorter gap under the intro,
   so the intro has 35px above and below it. */
.navinci-about-careers:not(.navinci-about-team):not(.navinci-about-address) .navinci-ac-title {
	margin-bottom: 0;
}

.navinci-about-careers:not(.navinci-about-team):not(.navinci-about-address) .navinci-ac-lede {
	margin-top: 35px;
	margin-bottom: 35px;
}

.navinci-about-careers:not(.navinci-about-team):not(.navinci-about-address) .navinci-ac-cta {
	margin-top: 10px;
}

/* Single news article (templates/single.html): date, headline, featured image
   and the text, in a column about 760px wide on a dark background. */
main.navinci-news-single {
	background: #05070a;
	margin-block-start: 0;
	padding: clamp(96px, 9vw, 160px) 24px clamp(72px, 7vw, 140px);
	min-height: 60vh;
}

.navinci-news-single .navinci-news-article {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.navinci-news-single .navinci-news-article>* {
	margin-top: 0;
}

.navinci-news-single .navinci-news-date {
	color: var(--wp--preset--color--accent-orange);
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: clamp(14px, 1.1vw, 17px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.navinci-news-single .navinci-news-title {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1.2;
	margin-bottom: clamp(28px, 3vw, 44px);
}

.navinci-news-single .navinci-news-image {
	margin-bottom: clamp(28px, 3vw, 44px);
}

.navinci-news-single .navinci-news-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5em;
}

.navinci-news-single .navinci-news-content {
	color: #cbd5e1;
	font-family: "Mulish", sans-serif;
	font-size: clamp(16px, 1.25vw, 19px);
	line-height: 1.65;
}

.navinci-news-single .navinci-news-content>* {
	margin-top: 0;
	margin-bottom: 1.2em;
}

.navinci-news-single .navinci-news-content h2,
.navinci-news-single .navinci-news-content h3 {
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	line-height: 1.25;
	margin-top: 1.8em;
}

.navinci-news-single .navinci-news-content a {
	color: var(--wp--preset--color--accent-orange);
}

.navinci-news-single .navinci-news-content img {
	max-width: 100%;
	height: auto;
	border-radius: 0.5em;
}

.navinci-news-single .navinci-news-content figure {
	margin: 2em 0;
}

.navinci-news-single .navinci-news-content blockquote {
	margin: 1.8em 0;
	padding-left: 1.2em;
	border-left: 2px solid var(--wp--preset--color--accent-orange);
	color: #fff;
}

.navinci-news-single .navinci-news-content blockquote p {
	margin: 0;
}

.navinci-news-single .navinci-news-button {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--accent-orange);
	border-radius: 0.5em;
	color: var(--wp--preset--color--accent-orange);
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	padding: 0.7em 1.5em;
	text-decoration: none;
}

/* Home page: "Latest from Navinci" (patterns/latest-news.php, cards from
   inc/latest-news.php). Text-only eyebrow (no line), three cards with the
   newest posts, and a "View all news" button. */
.navinci-latest-news .navinci-ln-eyebrow {
	margin-bottom: clamp(24px, 2.6vw, calc(var(--navinci-fluid-base) * 2.4));
}

.navinci-ln-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2.1vw, calc(var(--navinci-fluid-base) * 2.1));
}

.navinci-ln-card {
	display: flex;
	gap: clamp(12px, 1.1vw, calc(var(--navinci-fluid-base) * 1.1));
	background: #0d1016;
	padding: clamp(12px, 1.1vw, calc(var(--navinci-fluid-base) * 1.1));
	min-width: 0;
}

.navinci-ln-image {
	flex: 0 0 31%;
	align-self: stretch;
	min-height: 150px;
	border-radius: 0.4em;
	overflow: hidden;
	background: #11151c;
}

.navinci-ln-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.navinci-ln-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.navinci-ln-date {
	color: #94a3b8;
	font-family: "Mulish", sans-serif;
	font-size: clamp(12.5px, calc(12.5px + (100vw - 1440px) * 0.0039), 16px);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1.2;
}

.navinci-ln-card .navinci-ln-title {
	margin: 0.6em 0 0;
	font-family: "Mulish", sans-serif;
	font-weight: 400;
	font-size: clamp(15px, calc(15px + (100vw - 1440px) * 0.0054), 20px);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.navinci-ln-card .navinci-ln-title a {
	color: #fff;
	text-decoration: none;
}

.navinci-ln-card .navinci-ln-more {
	margin-top: auto;
	padding-top: 1em;
	color: #fff;
	font-family: "Mulish", sans-serif;
	font-size: clamp(11.5px, calc(11.5px + (100vw - 1440px) * 0.0036), 15px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.navinci-ln-card .navinci-ln-more:hover,
.navinci-ln-card .navinci-ln-more:focus-visible,
.navinci-ln-card .navinci-ln-title a:hover,
.navinci-ln-card .navinci-ln-title a:focus-visible {
	color: var(--wp--preset--color--accent-orange);
}

@media (max-width: 1099px) {
	.navinci-ln-grid {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* HubSpot form on the Let's Connect page ([navinci_hubspot_form],
   inc/hubspot-form.php). HubSpot draws the form itself and reads its colours
   and fonts from --hsf-* variables; the texts are set light here so they are
   readable on the dark card. */
.navinci-hs-form {
	width: 100%;
	--hsf-global__color: #cbd5e1;
	--hsf-global__font-family: "Poppins", sans-serif;
	--hsf-field-label__color: #cbd5e1;
	--hsf-richtext__color: #cbd5e1;
	--hsf-field-footer__color: #cbd5e1;
}

.navinci-hs-form .hsfc-RichText a {
	color: var(--wp--preset--color--accent-orange);
}

/* The red asterisk after the required fields' labels and the error messages. */
.navinci-hs-form [data-hsfc-id="Renderer"] .hsfc-FieldLabel__RequiredIndicator,
.navinci-hs-form [data-hsfc-id="Renderer"] .hsfc-ErrorAlert {
	color: rgb(235 90 40);
}

/* Home page: "Powering discovery across key areas of research."
   (patterns/home-applications.php). It reuses the Science Applications section's
   layout, line, headline and button (.navinci-science-apps); only the three image
   cards are its own. The title sits over the image, in the middle, as HTML text. */
.navinci-home-apps .navinci-apps-title {
	margin-bottom: clamp(36px, 3.7vw, calc(var(--navinci-fluid-base) * 3.7));
}

.navinci-ha-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, calc(var(--navinci-fluid-base) * 1.6));
}

.navinci-ha-card {
	position: relative;
	margin: 0;
	aspect-ratio: 1236 / 1016;
	background: #05070a;
	overflow: hidden;
}

.navinci-ha-card>.wp-block-image,
.navinci-ha-card>.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.navinci-ha-card .navinci-ha-card-title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 8%;
	color: #fff;
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-size: clamp(22px, 2.22vw, 44px);
	line-height: 1.2;
	text-align: center;
	pointer-events: none;
}

@media (max-width: 899px) {
	.navinci-ha-grid {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* News page (/news, patterns/news-list.php, cards from inc/latest-news.php): the
   Science Applications section's layout, line and headline, but as long as the
   list is, not as tall as the screen; the cards are the Home page's news cards. */
main .navinci-science-apps.navinci-news-list {
	min-height: 0;
	justify-content: flex-start;
	/* Less space above the headline: 70px at 1440px wide (the other sections have
	   about 123px). */
	padding-top: clamp(48px, 4.86vw, calc(var(--navinci-fluid-base) * 4.375));
}

/* Only the headline on the News page (these classes are shared with other
   sections): 110px under it at 1440px wide. */
main .navinci-news-list .navinci-apps-title {
	margin-bottom: clamp(64px, 7.64vw, calc(var(--navinci-fluid-base) * 6.875));
}

/* More room between the cards than on the Home page: 50px between the rows and
   34px between the columns at 1440px wide (30px both ways on Home). */
.navinci-nl-grid {
	row-gap: clamp(28px, 3.5vw, calc(var(--navinci-fluid-base) * 3.5));
	column-gap: clamp(18px, 2.4vw, calc(var(--navinci-fluid-base) * 2.4));
}

/* Two cards per row (one on phones). */
@media (min-width: 700px) {
	.navinci-nl-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Two classes: the section's own "main .navinci-science-apps>*" rule sets margin-top 0
   on every direct child and would win over a single class. */
.navinci-news-list .navinci-nl-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	/* 80px at 1440px wide, growing with the screen (about 142px at 2560px). */
	margin-top: clamp(48px, 5.56vw, calc(var(--navinci-fluid-base) * 5));
	font-family: "Poppins", sans-serif;
	font-size: clamp(14px, 1.1vw, 17px);
}

.navinci-nl-pagination .page-numbers {
	min-width: 2.4em;
	padding: 0.5em 0.8em;
	text-align: center;
	color: #cbd5e1;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 0.5em;
}

.navinci-nl-pagination a.page-numbers:hover,
.navinci-nl-pagination a.page-numbers:focus-visible {
	color: var(--wp--preset--color--accent-orange);
	border-color: var(--wp--preset--color--accent-orange);
}

.navinci-nl-pagination .page-numbers.current {
	color: #fff;
	background: var(--wp--preset--color--accent-orange);
	border-color: var(--wp--preset--color--accent-orange);
}

.navinci-nl-pagination .page-numbers.dots {
	border: 0;
}

/* Single news article: "Previous" and "Next" under the text
   (templates/single.html, core post navigation links). "Previous" is the next
   older post, "Next" the next newer one. */
.navinci-news-single .navinci-news-nav {
	/* 127px at 1440px wide, growing with the screen. */
	margin-top: clamp(64px, 8.82vw, calc(var(--navinci-fluid-base) * 7.94));
	padding-top: clamp(24px, 2.4vw, 40px);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	gap: 32px;
	align-items: flex-start;
}

.navinci-news-nav .wp-block-post-navigation-link {
	/* The arrow stands next to the label and the title, on the same line as the label. */
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-family: "Poppins", sans-serif;
	font-size: clamp(14px, 1.1vw, 17px);
	line-height: 1.4;
}

.navinci-news-nav .post-navigation-link-next {
	text-align: right;
	justify-content: flex-end;
	margin-left: auto;
}

.navinci-news-nav .wp-block-post-navigation-link a {
	color: #fff;
	text-decoration: none;
}

.navinci-news-nav .wp-block-post-navigation-link a:hover,
.navinci-news-nav .wp-block-post-navigation-link a:focus-visible {
	color: var(--wp--preset--color--accent-orange);
}

.navinci-news-nav .post-navigation-link__label {
	display: block;
	color: var(--wp--preset--color--accent-orange);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.navinci-news-nav .post-navigation-link__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0.4em;
}

.navinci-news-nav .post-navigation-link__arrow-previous,
.navinci-news-nav .post-navigation-link__arrow-next {
	color: var(--wp--preset--color--accent-orange);
}

@media (max-width: 600px) {
	.navinci-news-single .navinci-news-nav {
		flex-direction: column;
		gap: 24px;
	}

	.navinci-news-nav .post-navigation-link-next {
		margin-left: 0;
		text-align: left;
	}
}

/* Science page, "Go beyond expression to see biology in action.": a little more space
   between the two lines of the headline (the section headlines have line-height 1).
   Only this headline: #applications is this section's id. */
#applications .navinci-apps-title {
	line-height: 1.15;
}

/* Science page: less space between the sections after the hero (tuned at 1440px
   and 2560px). The first two sections ("The power of isPLA." and "Go beyond
   expression", which has the id #applications) have no space above and 300px
   below at 1440px, growing to 400px at 2560px; the last one ("Designed for deeper
   insight", not the Solutions support section that shares its classes) has no
   space above and 200px below, growing to 250px, so it sits closer to the contact
   banner. Phones keep the normal spacing. */
@media (min-width: 701px) {
	.wp-site-blocks main .navinci-science-tech,
	.wp-site-blocks main #applications {
		padding-top: 0;
		padding-bottom: clamp(120px, calc(300px + (100vw - 1440px) * 0.0893), 400px);
	}

	.wp-site-blocks main .navinci-science-why:not(.navinci-sol-support) {
		padding-top: 0;
		padding-bottom: clamp(100px, calc(200px + (100vw - 1440px) * 0.0446), 250px);
		/* The contact banner comes up over the empty space under the last section:
		   150px closer at 1440px wide (the space between the last content and the
		   banner was 282px), about 225px closer at 2560px. */
		margin-bottom: clamp(-225px, calc(-150px - (100vw - 1440px) * 0.067), -100px);
	}
}

/* Science page, 2400px to 2600px wide: the orange line of the first section
   (under the hero) would show above the fold, so it gets a little space above it. */
@media (min-width: 2400px) and (max-width: 2600px) {
	.wp-site-blocks main .navinci-science-tech {
		padding-top: 80px;
	}
}

/* Solutions page: the same spacing between the sections after the hero as on the
   Science page (tuned at 1440px and 2560px). "Built around your research",
   "Discover Omni" and "More than a solution" have no space above and 300px below at
   1440px, growing to 400px at 2560px; the last one ("Here when you need us") has
   no space above and 200px below (250px at 2560px) and the contact banner comes up
   over the empty space under it, 150px closer at 1440px (about 225px at 2560px).
   Phones keep the normal spacing. */
@media (min-width: 701px) {
	.wp-site-blocks main .navinci-sol-approach,
	.wp-site-blocks main .navinci-sol-featured,
	.wp-site-blocks main .navinci-sol-services {
		padding-top: 0;
		padding-bottom: clamp(120px, calc(300px + (100vw - 1440px) * 0.0893), 400px);
	}

	.wp-site-blocks main .navinci-science-why.navinci-sol-support {
		padding-top: 0;
		padding-bottom: clamp(100px, calc(200px + (100vw - 1440px) * 0.0446), 250px);
		margin-bottom: clamp(-225px, calc(-150px - (100vw - 1440px) * 0.067), -100px);
	}
}

/* 2400px to 2600px wide: the orange line of the first section under the hero would
   show above the fold, so it gets a little space above it (as on Science). */
@media (min-width: 2400px) and (max-width: 2600px) {
	.wp-site-blocks main .navinci-sol-approach {
		padding-top: 80px;
	}
}

/* Home, "Why choose Navinci": on phones less space between the intro and the three
   pillars (40px instead of 71px). Desktop keeps the design's spacing. */
@media (max-width: 700px) {
	.navinci-why-choose .navinci-choose-lede {
		margin-bottom: 40px;
	}
}

/* Home, "Built on science, proven through research.": on tablets (701px to 1099px
   wide) the headline wraps to two lines, so it gets the same line height as on phones
   (1.2 instead of 0.8333, which makes the lines touch). */
@media (min-width: 701px) and (max-width: 1099px) {
	.navinci-evidence .navinci-evidence-title {
		line-height: 1.2;
	}
}

/* Solutions, "More than a solution, a scientific partnership": on phones less space
   between the intro and the three services (40px instead of 71px). Desktop keeps the
   design's spacing. */
@media (max-width: 700px) {
	.navinci-sol-services .navinci-sol-lede {
		margin-bottom: 40px;
	}
}

/* "Designed for deeper insight." (Science) and "Here when you need us" (Solutions): on
   phones less space between the intro and the four pillars (40px instead of 71px).
   The Solutions section has both classes (navinci-sw-lede and navinci-sup-lede).
   Desktop keeps the design's spacing. */
@media (max-width: 700px) {
	.navinci-science-why .navinci-sw-lede {
		margin-bottom: 40px;
	}
}

/* Tablets (701px to 1099px wide): the sections are not as tall as the screen any more
   (they were min-height 100svh, which left big gaps on a portrait tablet), and have
   72px of space above and below, so there are about 144px between two sections. This
   replaces the larger desktop spacing on the Science and Solutions pages for this
   range. The hero, the contact banner and the News list are left as they are. */
@media (min-width: 701px) and (max-width: 1099px) {
	.wp-site-blocks main .navinci-why-function,
	.wp-site-blocks main .navinci-why-choose,
	.wp-site-blocks main .navinci-evidence,
	.wp-site-blocks main .navinci-latest-news,
	.wp-site-blocks main .navinci-science-tech,
	.wp-site-blocks main .navinci-science-apps:not(.navinci-news-list),
	.wp-site-blocks main #applications,
	.wp-site-blocks main .navinci-science-why,
	.wp-site-blocks main .navinci-science-why:not(.navinci-sol-support),
	.wp-site-blocks main .navinci-science-why.navinci-sol-support,
	.wp-site-blocks main .navinci-sol-approach,
	.wp-site-blocks main .navinci-sol-featured,
	.wp-site-blocks main .navinci-sol-services,
	.wp-site-blocks main .navinci-about-careers {
		min-height: 0;
		padding-top: 72px;
		padding-bottom: 72px;
		padding-left: 50px;
		padding-right: 50px;
		margin-bottom: 0;
	}

	/* The sections also have 50px at the sides on tablets (they had about 24px), and so
	   do the About "Our people" and "Address" sections and the News page, which share
	   classes with the ones above or have their own. */
	.wp-site-blocks main .navinci-about-address,
	.wp-site-blocks main .navinci-about-team,
	.wp-site-blocks main .navinci-science-apps.navinci-news-list {
		padding-left: 50px;
		padding-right: 50px;
	}
}

/* Let's Connect, HubSpot form on phones: HubSpot gives the form 40px of padding on each
   side, so the fields were narrower than the heading and the text above them. Without
   it the form is as wide as "Reach out to our scientific team...". */
/* Desktop: the HubSpot form is narrower than the card (44em = about 704px at 1440px wide,
   growing with the text on big screens), and starts at the same left edge as the
   headline above it. HubSpot reads its padding from --hsf-background__padding (40px on
   all sides by default): none above and on the sides, 40px below, also on phones. */
.navinci-hs-form {
	/* No space above the form (the headline "Let's Connect" is right above it) and 40px
	   below it. */
	--hsf-background__padding: 0 0 40px;
}

@media (min-width: 701px) {
	.navinci-hs-form {
		max-width: calc(var(--navinci-fluid-base) * 44);
	}
}

/* About, "Here when you need us": on tablets and phones (1099px wide and narrower) the
   envelope stands above the address, like the logo above "Founded and Based in...",
   instead of beside it. */
@media (max-width: 1099px) {
	.navinci-aa-cols>.navinci-aa-col-address {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	.navinci-aa-col-address .navinci-aa-icon {
		grid-row: auto;
		margin-bottom: clamp(20px, 2.6vw, 28px);
	}

	.navinci-aa-col-address>.navinci-aa-text {
		grid-column: 1;
	}
}

/* When the two columns are stacked (860px and narrower) they are the same width, so
   the logo and the envelope start at the same left edge. */
@media (max-width: 860px) {
	.navinci-aa-cols>.navinci-aa-col {
		width: min(100%, 320px);
	}
}

/* About, "Our people": on big screens the three groups grow more slowly, so the photos do not
   get too large. 1104px wide up to 1440px, then 0.2759px more for every px of screen
   width, stopping at 1413px at 2560px (about 260px per card, five in a row, instead
   of about 375px). The headline and intro above keep their usual width. */
main .navinci-about-team>.navinci-team-group {
	max-width: clamp(1104px, calc(1104px + (100vw - 1440px) * 0.2759), 1413px);
}

/* Home, "Powering discovery across key areas of research.": a little more space between
   the two lines of the headline (the section headlines have line-height 1), the same
   as the Science headline "Go beyond expression...". Only this headline: .navinci-home-apps
   is this section on Home. */
.navinci-home-apps .navinci-apps-title {
	line-height: 1.15;
}

/* Science page on tablets (701px to 1099px wide): a little more space between the sections
   than the other pages have (100px above and below instead of 72px, about 200px between
   two sections). */
@media (min-width: 701px) and (max-width: 1099px) {
	.wp-site-blocks main .navinci-science-tech,
	.wp-site-blocks main #applications,
	.wp-site-blocks main .navinci-science-why:not(.navinci-sol-support) {
		padding-top: 100px;
		padding-bottom: 100px;
	}
}

/* Solutions and About on tablets (701px to 1099px wide): the same spacing as the Science page,
   100px above and below each section (about 200px between two sections). Home keeps 72px. */
@media (min-width: 701px) and (max-width: 1099px) {
	.wp-site-blocks main .navinci-sol-approach,
	.wp-site-blocks main .navinci-sol-featured,
	.wp-site-blocks main .navinci-sol-services,
	.wp-site-blocks main .navinci-science-why.navinci-sol-support,
	.wp-site-blocks main .navinci-about-careers {
		padding-top: 100px;
		padding-bottom: 100px;
	}
}

/* About, Solutions and Science on tablets and phones: more space between the hero and the
   first section after it ("Our people", "Built around your research", "The power of
   isPLA."): 140px on tablets (701px to 1099px wide, was 100px) and 100px on phones (was
   64px). */
@media (min-width: 701px) and (max-width: 1099px) {
	.wp-site-blocks main .navinci-about-team,
	.wp-site-blocks main .navinci-sol-approach,
	.wp-site-blocks main .navinci-science-tech {
		padding-top: 140px;
	}
}

@media (max-width: 700px) {
	.wp-site-blocks main .navinci-about-team,
	.wp-site-blocks main .navinci-sol-approach,
	.wp-site-blocks main .navinci-science-tech {
		padding-top: 100px;
	}
}

/* Home on desktop (1100px wide and up): a little less space between "Expression is only part of
   the story.", "Latest from Navinci" and "Powering discovery across key areas of research."
   The next section comes up over the empty space under the one above: 100px closer at
   1440px wide (the space between the contents was about 430px), about 150px closer at 2560px. */
@media (min-width: 1100px) {
	/* "Expression is only part of the story." -> "Latest from Navinci": 60px of overlap at
	   1440px (it was 100px), about 110px at 2560px. */
	.wp-site-blocks main .navinci-why-function {
		margin-bottom: clamp(-110px, calc(-60px - (100vw - 1440px) * 0.045), -30px);
	}

	/* "Latest from Navinci" -> "Powering discovery": a little more space again (40px
	   less overlap: 60px at 1440px, about 110px at 2560px). */
	.wp-site-blocks main .navinci-latest-news {
		margin-bottom: clamp(-110px, calc(-60px - (100vw - 1440px) * 0.045), -30px);
	}
}

/* Home on desktop (1100px wide and up): more space above and below "Powering discovery across
   key areas of research." (60px at 1440px, growing a little on big screens: about 90px
   at 2560px), on top of the spacing between the sections above. */
@media (min-width: 1100px) {
	.wp-site-blocks main .navinci-home-apps {
		margin-top: clamp(60px, calc(60px + (100vw - 1440px) * 0.0268), 90px);
		margin-bottom: clamp(60px, calc(60px + (100vw - 1440px) * 0.0268), 90px);
	}
}

/* About on desktop (1100px wide and up): less space around "Help us discover what's next."
   (Careers). The sections above and below come up over the empty space in the Careers
   section, 120px closer on each side at 1440px wide (the spaces were about 400px and
   530px), about 180px at 2560px. */
@media (min-width: 1100px) {
	.wp-site-blocks main .navinci-about-careers:not(.navinci-about-team):not(.navinci-about-address) {
		margin-top: clamp(-180px, calc(-120px - (100vw - 1440px) * 0.0536), -80px);
		margin-bottom: clamp(-180px, calc(-120px - (100vw - 1440px) * 0.0536), -80px);
	}
}

/* Let's Connect on desktop (over 1100px wide): the card is only as wide as the intro text
   above it (the paragraph's max-width, 53.75em), not the whole column, and still starts at
   the same left edge as the headline and the text. On tablets and phones it is as wide
   as the column, as before. */
@media (min-width: 1101px) {
	.navinci-contact-card {
		max-width: 53.75em;
		margin-left: max(var(--navinci-contact-gutter), calc((100% - 77.5em) / 2));
		margin-right: auto;
	}
}