/* ==========================================================================
   Manta Squadron — component styles
   Design tokens live in theme.json. Only component-level styling belongs here.
   Single breakpoint at 1024px, matching the design handoff.
   ========================================================================== */

:root {
	--manta-radius-btn: 10px;
	--manta-radius-card: 16px;
	--manta-radius-img: 12px;
	--manta-chip: 0 0 0 18px;
	--manta-ease: 0.15s ease;
}

/* --------------------------------------------------------------------------
   0. Accessibility foundations
   -------------------------------------------------------------------------- */

/* Skip link — first thing in the tab order, visible only when focused. */

.manta-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1100;
	padding: 14px 22px;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	border-radius: 0 0 var(--manta-radius-btn) 0;
}

.manta-skip:focus {
	left: 0;
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: -3px;
}

/* One visible focus ring everywhere. Browsers only show :focus-visible for
   keyboard users, so this costs mouse users nothing. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

/* On navy the cyan ring is low contrast against the background — use white. */

.manta-steps :where(a, button):focus-visible,
.manta-ctaband :where(a, button):focus-visible,
.manta-hubhead :where(a, button):focus-visible,
.manta-404 :where(a, button):focus-visible,
.manta-newsletter :where(a, button, input):focus-visible,
.manta-footer :where(a, button):focus-visible,
.manta-topbar :where(a, button):focus-visible {
	outline-color: #fff;
}

/* Screen-reader-only utility. */

.manta-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
}

.wp-block-group.has-background,
.wp-block-cover {
	margin-top: 0;
	margin-bottom: 0;
}

/* WordPress's root block template wrapper (.wp-site-blocks) applies a default
   margin-top between EVERY top-level template block — header, main, footer —
   via `.wp-site-blocks > * + *`, falling back to 2em because this theme never
   set settings.spacing.blockGap in theme.json. Confirmed against the design
   source: Frontpage.dc.html and Resources.dc.html both go straight from the
   SiteHeader import into the next section with nothing in between. The fixed
   header's own height is already reserved by #header-spacer, so this extra
   margin is pure unwanted space on top of that — invisible where a section
   starts white/light (home, Resources), glaring against a dark hero (single
   post). Neutralize at the actual selector WordPress generates, plus a
   belt-and-braces rule on <main> itself, both !important since this can lose
   to the cascade otherwise. */
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

main {
	margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   2. Buttons — custom block styles registered in functions.php
   -------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition: transform var(--manta-ease), background-color var(--manta-ease),
		color var(--manta-ease), box-shadow var(--manta-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -6px rgba(11, 35, 80, 0.45);
}

.wp-block-button.is-style-accent .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
	box-shadow: 0 6px 24px rgba(23, 196, 221, 0.38);
}

.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background-color: #12b2c9;
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline-light .wp-block-button__link {
	background-color: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.4);
	padding: 13px 28px;
}

.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background-color: #fff;
	color: var(--wp--preset--color--navy);
}

/* --------------------------------------------------------------------------
   3. Group block styles — card + icon chip
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--manta-radius-card);
	padding: 24px;
	box-shadow: 0 4px 16px rgba(8, 26, 58, 0.06);
	transition: transform var(--manta-ease), box-shadow var(--manta-ease);
}

.wp-block-group.is-style-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(8, 26, 58, 0.12);
}

.wp-block-group.is-style-chip {
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--tint-cyan);
	border-radius: var(--manta-chip);
	font-size: 18px;
	line-height: 1;
}

.wp-block-group.is-style-chip p {
	margin: 0;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.manta-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 900;
	background: #fff;
	box-shadow: 0 4px 16px rgba(8, 26, 58, 0.08);
}

#header-spacer {
	height: 104px;
}

.manta-topbar {
	background: #081a3a;
	color: #fff;
	font-size: 13px;
	padding: 7px 0;
}

.manta-topbar p {
	margin: 0;
	color: #fff;
	font-size: 13px;
}

.manta-topbar a {
	color: #fff;
	text-decoration: none;
}

.manta-topbar a:hover {
	color: var(--wp--preset--color--accent);
}

.manta-topbar__contacts {
	gap: 22px;
}

.manta-header__main {
	padding-top: 16px;
	padding-bottom: 16px;
}

.manta-header__inner {
	align-items: center;
	gap: 24px;
}

.manta-brand {
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.manta-brand__mark {
	margin: 0;
	line-height: 0;
}

.manta-brand__mark img {
	display: block;
	width: 56px;
	height: auto;
}

.manta-brand__text {
	display: flex;
	flex-direction: column;
	gap: 0;
	line-height: 1;
}

.manta-brand__name a,
.manta-brand__name {
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

.manta-brand__tagline {
	margin: 2px 0 0;
	font-size: 11px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--wp--preset--color--label);
	font-weight: 600;
}

/* The mark and the site title are each their own link, which left the gap
   between them — and the tagline — dead to clicks. Rather than nest the
   tagline inside an anchor (which changes its layout box), an empty anchor is
   stretched over the whole brand group. Same destination as both, so it
   doesn't matter which one the pointer lands on. */
.manta-brand {
	position: relative;
}

.manta-brand__hitarea {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.manta-header__nav {
	align-items: center;
	gap: 28px;
}

/* --- main navigation --- */

.manta-nav {
	gap: 28px;
	font-weight: 600;
	font-size: 15px;
}

.manta-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	font-weight: 600;
	padding: 6px 0;
}

/* top-level nav links — .nav-link from SiteHeader.dc.html, verbatim:
   a 2px #0b6ea8 rule 4px below the text, wiping in from the left over 0.25s.
   No glow, no cyan, no text-shadow — those were my invention, not the design. */

.manta-header .manta-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: color 0.15s;
}

.manta-header .manta-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	height: 2px;
	width: 100%;
	background: var(--wp--preset--color--accent-2);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.manta-header .manta-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.manta-header .manta-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.manta-header .manta-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-2);
}

.manta-header .manta-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
.manta-header .manta-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.manta-header .manta-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* --- mega menu ---------------------------------------------------------
   Verbatim from SiteHeader.dc.html (.mega-panel / .mega-link):
   760px, centred under the trigger via left:50% + translateX(-50%),
   18px below it, 1px #e3e9f2 border, 14px radius, two panes at 1.15fr/0.85fr.
   `.mega-wrap::after` is an invisible 24px bridge that keeps hover alive
   across the 18px gap — that is how the design does it, so no compromise
   on the offset is needed.

   SPECIFICITY: core styles submenus with three classes
   (`.wp-block-navigation .has-child .wp-block-navigation__submenu-container`),
   so every rule leads with `.manta-header .wp-block-navigation .manta-nav__mega.has-child`.
   Don't shorten these selectors.
   ---------------------------------------------------------------------- */

.manta-header .wp-block-navigation .manta-nav__mega.has-child {
	position: relative;
}

/* hover bridge across the 18px gap */
.manta-header .wp-block-navigation .manta-nav__mega.has-child::after {
	content: "";
	position: absolute;
	top: 100%;
	left: -20px;
	right: -20px;
	height: 24px;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child > .wp-block-navigation__submenu-container {
	position: absolute;
	top: calc(100% + 18px);
	left: 50%;
	right: auto;
	transform: translateX(-50%) translateY(8px);
	width: 760px;
	min-width: 760px;
	max-width: 90vw;
	padding: 0;
	margin: 0;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(8, 26, 58, 0.18);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	display: grid;
	grid-template-columns: 1fr 1fr 323px;
	/* The last row is 1fr so the tracks fill the panel. With `align-content:
	   start` the tracks only summed to their content height, so the feature
	   column — which spans 1/-1 — stopped short of the bottom edge and left a
	   white band. Links are `align-self: start` so they don't stretch. */
	grid-template-rows: auto auto 1fr;
	column-gap: 0;
	row-gap: 0;
	min-height: 260px;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child:hover > .wp-block-navigation__submenu-container,
.manta-header .wp-block-navigation .manta-nav__mega.has-child:focus-within > .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* left pane: title with divider, then the 2x2 link grid */

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-mega__title {
	grid-column: 1 / 3;
	grid-row: 1;
	display: block;
	margin: 30px 32px 16px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-mega__title span {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1;
	color: var(--wp--preset--color--navy);
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	padding: 0;
	margin: 0;
	align-self: start;
	justify-self: start;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	position: relative;
	display: inline-block;
	width: auto;
	max-width: max-content;
	padding: 9px 0;
	margin-left: 32px;
	border-radius: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background: transparent;
	text-decoration: none;
	transition: color 0.15s;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-of-type(even) .wp-block-navigation-item__content {
	margin-left: 0;
}

/* submenu links get their own underline, in currentColor (.mega-link) */

.manta-header .wp-block-navigation .manta-nav__mega.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	width: auto;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
	display: block;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-2);
	background: transparent;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover::after {
	transform: scaleX(1);
}

/* right pane: navy, photo bled to the edges, copy pinned to the bottom */

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-mega__feature {
	grid-column: 3;
	grid-row: 1 / -1;
	padding: 0;
	margin: 0;
	align-self: stretch;
	min-height: 260px;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-megacard {
	position: relative;
	display: block;
	height: 100%;
	min-height: 260px;
	margin: 0;
	padding: 0;
	border-radius: 0;
	overflow: hidden;
	background: var(--wp--preset--color--navy);
}

/* Full-bleed scrim over the whole photo — matching the design, which layers
   `position:absolute; inset:0` gradient above the image. Putting the gradient
   on the text block instead (as this did) draws a hard horizontal seam where
   the block starts. */

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-megacard::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(8, 26, 58, 0.9) 0%,
		rgba(8, 26, 58, 0.15) 65%
	);
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-megacard__img {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 0;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-megacard__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-megacard__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 24px 22px 22px;
	background: none;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-megacard__eyebrow {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-megacard__title {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 22px;
	line-height: 1.05;
	color: #fff;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-megacard__link {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-megacard__link a {
	color: #fff;
	text-decoration: none;
}

.manta-header .wp-block-navigation .manta-nav__mega.has-child .manta-megacard__link a:hover {
	color: var(--wp--preset--color--accent);
}

/* --- hamburger + drawer --- */

.manta-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.manta-burger span {
	display: block;
	height: 2px;
	background: var(--wp--preset--color--navy);
	border-radius: 2px;
	transition: transform var(--manta-ease), opacity var(--manta-ease);
}

.manta-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 380px;
	max-width: 92vw;
	background: #fff;
	z-index: 1000;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	box-shadow: -12px 0 40px rgba(8, 26, 58, 0.18);
}

.manta-drawer[hidden] {
	display: block;
	visibility: hidden;
}

.manta-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
}

/* drawer menu — built by interactions.js from a scrubbed clone of the desktop
   nav. No core navigation classes survive that copy, so nothing here is
   fighting WordPress; these are our own class names. */

.manta-drawer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22px 24px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.manta-drawer__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 24px;
	line-height: 1;
	color: var(--wp--preset--color--navy);
}

.manta-drawer__close {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	margin: 0;
}

.manta-drawer__body {
	padding: 8px 24px 32px;
}

.manta-dnav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.manta-dnav__item {
	position: relative;
	border-bottom: 1px solid #eef2f8;
}

.manta-dnav__item > a {
	display: block;
	padding: 16px 40px 16px 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 23px;
	line-height: 1.1;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.manta-dnav__toggle {
	position: absolute;
	top: 12px;
	right: 0;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--accent);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.manta-dnav__item.is-open .manta-dnav__toggle {
	transform: rotate(180deg);
}

.manta-dnav__sub {
	list-style: none;
	margin: 0 0 14px;
	padding: 0 0 0 2px;
}

/* Submenu links (Jerseys / Tank tops / Shorts / Other products) carry the same
   wipe-in underline as the desktop nav links — 2px accent-2, 4px below the
   text, scaling in from the left over 0.25s. inline-block so the rule is the
   width of the words, not the whole drawer, matching desktop. The top-level
   drawer items (Custom products / Resources / About) deliberately have no
   underline. */
.manta-dnav__subitem > a {
	display: inline-block;
	position: relative;
	padding: 10px 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 0.15s;
}

.manta-dnav__subitem > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 6px;
	height: 2px;
	width: 100%;
	background: var(--wp--preset--color--accent-2);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.manta-dnav__subitem > a:hover,
.manta-dnav__subitem > a:focus-visible {
	color: var(--wp--preset--color--accent-2);
}

.manta-dnav__subitem > a:hover::after,
.manta-dnav__subitem > a:focus-visible::after {
	transform: scaleX(1);
}

/* promo card, moved out of the submenu by the JS */

.manta-drawer__feature:not(:empty) {
	margin: 24px 0 20px;
}

/* interactions.js's buildDrawerNav() moves the whole <li class="manta-mega__feature">
   element (not just its contents) into this plain <div> — outside any <ul>,
   a bare <li> still gets the browser's default list-item bullet. Reset it
   here rather than in the JS, so the clone doesn't need to know about its
   own markup origin. */
.manta-drawer__feature .manta-mega__feature {
	display: block;
	margin: 0;
	list-style: none;
}

.manta-drawer__feature .manta-megacard {
	position: relative;
	display: block;
	height: 300px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--navy);
}

.manta-drawer__feature .manta-megacard__img {
	position: absolute;
	inset: 0;
	margin: 0;
}

.manta-drawer__feature .manta-megacard__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.manta-drawer__feature .manta-megacard::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(8, 26, 58, 0.9) 0%,
		rgba(8, 26, 58, 0.15) 65%
	);
}

.manta-drawer__feature .manta-megacard__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 24px 20px 22px;
	background: none;
}

.manta-drawer__feature .manta-megacard__eyebrow,
.manta-drawer__feature .manta-megacard__link {
	display: none;
}

.manta-drawer__feature .manta-megacard__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 24px;
	line-height: 1.05;
	color: #fff;
}

.manta-drawer__cta {
	display: block;
	padding: 16px;
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-radius: 10px;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
}

.manta-drawer__contacts {
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid #eef2f8;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.manta-drawer__contact {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.manta-drawer__contact::before {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

.manta-drawer__contact--mail::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2350' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
}

.manta-drawer__contact--telegram::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2350' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3 2 10.5l6.5 2.5L11 21l3.5-5.5L21 20Z'/%3E%3Cpath d='M8.5 13 21 3'/%3E%3C/svg%3E");
}

.manta-drawer__contact--whatsapp::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2350' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.5v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 1 3.7 2 2 0 0 1 3 1.5h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L7.1 9.4a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2.1Z'/%3E%3C/svg%3E");
}

.manta-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(8, 26, 58, 0.45);
	z-index: 999;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.manta-drawer-backdrop[hidden] {
	display: block;
	visibility: hidden;
}

.manta-drawer-backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

body.manta-no-scroll {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. Hero + carousel
   -------------------------------------------------------------------------- */

.manta-hero {
	position: relative;
	overflow: hidden;
}

.manta-hero__title {
	margin-bottom: 18px;
}

.manta-hero__lede {
	max-width: 46ch;
	font-size: 18px;
	margin-bottom: 28px;
}

.manta-hero__ctas {
	gap: 12px;
}

.manta-carousel {
	position: relative;
	border-radius: var(--manta-radius-card);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: 0 24px 60px rgba(8, 26, 58, 0.28);
}

.manta-carousel__track {
	position: absolute;
	inset: 0;
}

.manta-carousel__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.55s ease;
}

.manta-carousel__slide.is-active {
	opacity: 1;
}

.manta-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--wp--preset--color--navy);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background-color var(--manta-ease);
}

.manta-carousel__arrow:hover {
	background: #fff;
}

.manta-carousel__arrow--prev {
	left: 12px;
}

.manta-carousel__arrow--next {
	right: 12px;
}

.manta-carousel__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 7px;
}

.manta-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.manta-carousel__dot.is-active {
	background: var(--wp--preset--color--accent);
	width: 20px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   6. Key facts
   -------------------------------------------------------------------------- */

.manta-facts {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.manta-facts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

/* WordPress's default block-gap spacing (from each group's "flow"
   layout) adds margin-top to non-first children -- here that means the
   2nd and 3rd fact cards within .manta-facts__grid (a grid row, where
   it just drops them below the 1st card) and the text block within
   each .manta-fact (a flex row, where it pushes the text below the
   icon). Both parents already handle spacing via `gap`, so reset it. */
.manta-fact {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-top: 0;
}

/* WordPress's default block-gap spacing (from this group's "flow" layout)
   adds margin-top to the text block as its second child -- harmless when
   stacked, but here .manta-fact is forced into a flex ROW above, so that
   margin just pushes the text down out of alignment with the icon. The
   flex `gap` already provides the spacing, so reset it. */
.manta-fact__text {
	margin-top: 0;
}

.manta-fact__chip {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
	background: var(--wp--preset--color--tint-cyan);
	color: var(--wp--preset--color--navy);
	border-radius: 0 0 0 18px;
}

.manta-fact h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--navy);
}

.manta-fact p {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

/* --------------------------------------------------------------------------
   7. Product bento grid
   -------------------------------------------------------------------------- */

.manta-bento__head {
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 28px;
}

.manta-bento__head h2 {
	margin: 0;
}

.manta-bento__sub {
	max-width: 34ch;
	margin: 0;
}

.manta-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 220px 220px;
	gap: 16px;
}

.manta-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--manta-radius-card);
	text-decoration: none;
	transition: transform var(--manta-ease), box-shadow var(--manta-ease);
}

.manta-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(8, 26, 58, 0.2);
}

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

.manta-tile--tall {
	grid-row: span 2;
}

.manta-tile--wide {
	grid-row: span 2;
}

.manta-tile__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 18px 16px;
	background: linear-gradient(to top, rgba(8, 26, 58, 0.88), rgba(8, 26, 58, 0));
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.manta-tile__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 26px;
	letter-spacing: 0.4px;
	color: #fff;
	line-height: 1;
}

.manta-tile__meta {
	font-size: 14px;
	color: #c3d2ea;
}

/* Tiles are now built from native Image/Group/Buttons blocks (used to be
   raw HTML) so they can be edited without touching code. A few overrides so
   the block wrappers behave exactly like the old flat markup did. */
.manta-tile figure.wp-block-image {
	margin: 0;
	height: 100%;
}

.manta-tile__title,
.manta-tile__meta {
	margin: 0;
}

.manta-tile__linklayer {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
}

/* This is a flex-layout Buttons block (WP core default), so the cross
   axis (height) stretches to fill .manta-tile__linklayer automatically --
   but the main axis (width) does not, and with the link's text hidden
   (font-size:0 below) the button has no content to size itself by, so
   it collapses to ~0 width and the tile becomes unclickable. Force it
   to fill the row. */
.manta-tile__linklayer .wp-block-button {
	margin: 0;
	width: 100%;
	height: 100%;
}

.manta-tile__linklayer .wp-block-button__link {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border-radius: 0;
	background: transparent !important;
	color: transparent !important;
	font-size: 0;
	line-height: 0;
}

.manta-tile__linklayer .wp-block-button__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   8. Ordering steps band
   Values from Frontpage.dc.html "STAT SPOTLIGHT": flat navy, two ghosted
   circular photos bleeding off the right edge, 2px rule above each step,
   44px badge with a 16px bottom-left radius sitting inline with the title.
   -------------------------------------------------------------------------- */

.manta-steps {
	position: relative;
	overflow: hidden;
}

/* decorative circles */

.manta-steps__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.manta-steps__circle {
	position: absolute;
	display: block;
	border-radius: 50%;
	overflow: hidden;
}

.manta-steps__circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.manta-steps__circle--1 {
	top: -120px;
	right: -120px;
	width: 420px;
	height: 420px;
	opacity: 0.16;
}

.manta-steps__circle--2 {
	bottom: -160px;
	right: 120px;
	width: 300px;
	height: 300px;
	opacity: 0.14;
}

/* content sits above the circles */

.manta-steps > *:not(.manta-steps__deco) {
	position: relative;
	z-index: 1;
}

.manta-steps__head {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.manta-steps__eyebrow {
	margin: 0 !important;
	font-size: 13px !important;
	letter-spacing: 2.5px;
}

.manta-steps h2 {
	margin: 0;
	font-size: clamp(36px, 4.6vw, 52px);
	line-height: 0.98;
}

/* steps */

.manta-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-top: 2px solid rgba(255, 255, 255, 0.14);
	padding-top: 20px;
}

.manta-step__head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: nowrap;
}

.manta-step__num {
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--accent);
	border-radius: 0 0 0 16px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 20px;
	line-height: 1;
	color: #07203a;
}

.manta-step__title {
	margin: 0;
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: 0.3px;
}

.manta-step__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

.manta-steps__cta {
	/* the design's outer stack is `gap: 36px`; core's blockGap is unreliable
	   after a columns block, so set it explicitly */
	margin: 36px 0 0;
}

.manta-steps__cta .wp-block-button__link {
	font-size: 16px;
	padding: 13px 28px;
}

.manta-steps__cta .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent) !important;
	color: #07203a !important;
}

/* --------------------------------------------------------------------------
   9. Story split
   -------------------------------------------------------------------------- */

.manta-story__img img {
	border-radius: var(--manta-radius-card);
	width: 100%;
	object-fit: cover;
}

.manta-story h2 {
	margin: 6px 0 16px;
}

.manta-story__link a {
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--accent-2);
	padding-bottom: 2px;
}

/* --------------------------------------------------------------------------
   10. CTA band
   -------------------------------------------------------------------------- */

.manta-ctaband {
	position: relative;
	overflow: hidden;
	text-align: center;
}

.manta-ctaband h2 {
	margin-bottom: 26px;
	/* The design caps the CTA headline so it breaks over two lines rather than
	   running the full width of the band — "Your season starts / with the right
	   kit." 22ch is what Frontpage.dc.html and About.dc.html specify. The
	   product-page band (cta-band-colors) says 24ch, but all three patterns
	   share this class and both values wrap these headings to two lines, so
	   they use one value. Splitting them would need a modifier class on the
	   pattern, and therefore a re-insertion, for a 2ch difference. */
	max-width: 22ch;
	margin-inline: auto;
	text-wrap: pretty;
	/* 46px per Frontpage.dc.html; the theme's h2 token is 40px, which read
	   noticeably smaller than the design against the same band. The product
	   band is 42px in its source — 4px off, and it doesn't change the line
	   break, so all three share this value rather than take a modifier class
	   and another re-insertion. */
	font-size: 46px;
}

/* Watermark manta behind every navy CTA banner. Geometry is verbatim from the
   <img> on line 193 of Frontpage.dc.html: centred, rotated -8deg, 480px wide
   but never more than 80% of the band, at 10% opacity.
   Deliberate departures from the source:
   - The design puts this on the front-page banner only. Hanna asked for it on
     all CTA bands, so it hangs off .manta-ctaband itself — which also means it
     reaches content that is already inserted, with no re-insertion needed.
   - manta-white.png instead of manta-navy.png + `filter:brightness(0)
     invert(1)`. The asset is already white, so the filter is redundant.
   - a ::before rather than an <img>. It is purely decorative (the source has
     alt=""), so keeping it out of the DOM means it can't be selected or
     deleted in the editor, and screen readers never see it. */
.manta-ctaband::before {
	content: "";
	position: absolute;
	/* Geometry verbatim from Frontpage.dc.html line 193: a 480px square, capped
	   at 80% of the band, centred and rotated -8deg.
	   An earlier attempt insetting this 10% from the top and bottom and using
	   `contain` made the box height-bound, which shrank the mark to about half
	   the intended size. The square is deliberately allowed to be taller than
	   the band. manta-white.png is a 500x500 canvas but the ink only occupies
	   414x306 of it (61% of the height), so at 480px the mark draws ~397x294,
	   standing ~346px tall once rotated -8deg. Against a band of roughly 320px
	   that bleeds a little top and bottom — which is what the design does too;
	   `overflow:hidden` is mostly trimming transparent padding. */
	top: 50%;
	left: 50%;
	z-index: 0;
	width: min(480px, 80%);
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%) rotate(-8deg);
	background: url("../images/manta-white.png") no-repeat center / contain;
	opacity: 0.1;
	pointer-events: none;
}

/* The ::before is positioned, so without this it would paint over the static
   heading and button rather than behind them. */
.manta-ctaband > * {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */

.manta-faq h2 {
	margin-bottom: 32px;
}

.manta-faq__item {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--manta-radius-btn);
	margin-bottom: 10px;
	padding: 0;
	overflow: hidden;
}

.manta-faq__item summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 22px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 16px;
	color: var(--wp--preset--color--navy);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.manta-faq__item summary::-webkit-details-marker {
	display: none;
}

.manta-faq__item summary::after {
	content: "+";
	font-size: 22px;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	flex: 0 0 auto;
}

.manta-faq__item[open] summary::after {
	content: "–";
}

.manta-faq__item > :not(summary) {
	padding: 0 22px 18px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   12. Contact section + Fluent Forms
   -------------------------------------------------------------------------- */

.manta-contact__cols {
	align-items: flex-start;
}

/* CTAs across the site now jump to this section with href="#contact" rather
   than navigating to /contact/ (the footer form is the default contact
   path everywhere) — without this, the fixed header covers the top of the
   section on arrival. Same 128px clearance already used for article
   heading anchors. */
#contact {
	scroll-margin-top: 128px;
}

.manta-contact h2 {
	margin-top: 0;
}

.manta-contact__methods {
	margin-top: 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.manta-contact__row {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
}

.manta-contact__row a {
	text-decoration: none;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

.manta-formcard {
	background: var(--wp--preset--color--tint);
	border-radius: var(--manta-radius-card);
	padding: 40px 44px;
}

/* Fluent Forms — restyled to match the designed form card.
   Scoped to .manta-formcard so other forms on the site are untouched. */

.manta-formcard .fluentform form {
	margin: 0;
}

/* Fluent Forms' column container.

   NOTE: Fluent Forms reuses `.ff-t-container` internally — the Name field
   wraps its first/last inputs in one. Hard-coding `1fr 1fr` therefore made a
   single-input Name field half width. `grid-auto-flow: column` sizes to the
   number of cells actually rendered instead: two cells give two columns, one
   cell fills the row. Cells hidden with `display:none` aren't grid items, so
   they create no track. */

.manta-formcard .ff-t-container {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0 18px;
	margin: 0;
}

.manta-formcard .ff-t-cell {
	padding: 0;
	min-width: 0;
}

.manta-formcard .ff-name-field-wrapper {
	width: 100%;
}

.manta-formcard .ff-name-field-wrapper .ff-t-container {
	gap: 0 12px;
}

.manta-formcard .ff-el-group {
	margin: 0 0 16px;
}

.manta-formcard .ff-el-input--label {
	padding: 0;
}

.manta-formcard .ff-el-input--label label {
	/* Verbatim from SiteFooter.dc.html's form-card <label> spec: 13px,
	   0.5px letter-spacing, #3c4c6b. Was 12px with 1.6px letter-spacing
	   (over 3x the source value) and the theme's lighter --label token
	   (#5f6e8a) — the extra spacing on small bold uppercase text is what
	   read as "weaker", even at the same font-weight. #3c4c6b isn't in the
	   site palette (it's specific to this one component in the source) but
	   is darker than --label, so this is a contrast improvement, not a
	   regression. */
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #3c4c6b;
	margin-bottom: 7px;
}

/* Fluent Forms puts a `size` attribute on text inputs; without an explicit
   width they shrink to a character count instead of filling the column. */

.manta-formcard .ff-el-input--content {
	display: block;
	width: 100%;
}

.manta-formcard .ff-el-form-control,
.manta-formcard .fluentform input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.manta-formcard .fluentform select,
.manta-formcard .fluentform textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.manta-formcard input[type="text"],
.manta-formcard input[type="email"],
.manta-formcard input[type="tel"],
.manta-formcard input[type="url"],
.manta-formcard input[type="number"],
.manta-formcard input[type="date"],
.manta-formcard select,
.manta-formcard textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--manta-radius-btn);
	background: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
	box-shadow: none;
	transition: border-color var(--manta-ease), box-shadow var(--manta-ease);
}

.manta-formcard textarea {
	min-height: 120px;
	resize: vertical;
}

.manta-formcard input:focus,
.manta-formcard select:focus,
.manta-formcard textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(23, 196, 221, 0.18);
}

.manta-formcard input::placeholder,
.manta-formcard textarea::placeholder {
	color: #9aa8bf;
}

/* Submit button — same spec as every other CTA: Inter 700, sentence case,
   navy, 10px radius. Fluent Forms' own Button Styler (set per form in the
   form editor) emits inline styles that ordinary CSS can't beat, so the
   colour and typography carry !important. If you'd rather control it in the
   plugin, clear the styler there and drop these. */

.manta-formcard .fluentform .ff-btn-submit,
.manta-formcard button.ff-btn-submit,
.manta-formcard .ff-btn.ff-btn-submit,
.manta-formcard .ff_btn_style {
	background: var(--wp--preset--color--navy) !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--manta-radius-btn) !important;
	padding: 15px 30px !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 17px !important;
	line-height: 1.2;
	width: auto;
	cursor: pointer;
	box-shadow: none;
	transition: transform var(--manta-ease), background-color var(--manta-ease),
		box-shadow var(--manta-ease);
}

.manta-formcard .fluentform .ff-btn-submit:hover,
.manta-formcard button.ff-btn-submit:hover {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--navy) !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -6px rgba(11, 35, 80, 0.45);
}

.manta-formcard .ff-el-is-error input,
.manta-formcard .ff-el-is-error textarea,
.manta-formcard .ff-el-is-error select {
	border-color: #c0392b;
}

.manta-formcard .error.text-danger,
.manta-formcard .ff-el-is-error .error {
	font-size: 13px;
	color: #c0392b;
	margin-top: 6px;
}

.manta-formcard .ff-el-form-check-label {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

/* Range slider (Team size) — the browser default has no relationship to the
   rest of the site. Rebuilt on the brand palette: 6px tinted track, navy fill
   to the left of the thumb, accent thumb with a white ring. `accent-color` is
   set as a fallback for browsers that ignore the vendor pseudo-elements. */

.manta-formcard .ff-el-group:has(input[type="range"]) {
	padding-bottom: 4px;
}

.manta-formcard input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	accent-color: var(--wp--preset--color--accent);
	width: 100%;
	height: 26px;
	margin: 6px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.manta-formcard input[type="range"]:focus {
	outline: none;
	box-shadow: none;
}

/* track */

.manta-formcard input[type="range"]::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: #dbe3ee;
}

.manta-formcard input[type="range"]::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: #dbe3ee;
}

.manta-formcard input[type="range"]::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--navy);
}

/* thumb */

.manta-formcard input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(8, 26, 58, 0.28);
	transition: transform var(--manta-ease);
}

.manta-formcard input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(8, 26, 58, 0.28);
}

.manta-formcard input[type="range"]:hover::-webkit-slider-thumb,
.manta-formcard input[type="range"]:focus-visible::-webkit-slider-thumb {
	transform: scale(1.08);
}

.manta-formcard input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px rgba(23, 196, 221, 0.28);
}

/* the value readout Fluent Forms prints under the slider */

.manta-formcard .ff-el-range-value,
.manta-formcard input[type="range"] + output,
.manta-formcard .ff_slider_value {
	display: inline-block;
	margin-top: 6px;
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--tint-cyan);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.4;
	color: var(--wp--preset--color--navy);
	text-align: center;
}

/* success state — mirrors the designed confirmation card */

.manta-formcard .ff-message-success {
	text-align: center;
	padding: 40px 20px;
	border: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	font-weight: 800;
	font-size: 26px;
	line-height: 1.15;
	color: var(--wp--preset--color--navy);
}

.manta-formcard .ff-message-success::before {
	content: "";
	display: block;
	width: 54px;
	height: 54px;
	margin: 0 auto 18px;
	background-color: var(--wp--preset--color--accent);
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px 28px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E");
}

/* Contact page hero — flat "hero-navy" gradient group, no cover image.
   Values from Contact.dc.html's hero: h1-60 (44px under 1024px, see
   Responsive section) and a 56ch-capped intro paragraph. */

.manta-contact-hero__title {
	font-size: 60px;
	line-height: 0.98;
	letter-spacing: 0.5px;
}

.manta-contact-hero__intro {
	max-width: 56ch;
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.manta-footer__brand {
	align-items: center;
	gap: 10px;
	margin-bottom: 34px;
}

.manta-footer__mark {
	margin: 0;
	line-height: 0;
}

.manta-footer__brand img {
	display: block;
	width: 40px;
	height: auto;
}

.manta-footer__name a,
.manta-footer__name {
	color: #fff;
	text-decoration: none;
	font-size: 17px;
}

.manta-footer__label {
	font-size: 12px !important;
	letter-spacing: 2px;
	margin: 0 0 14px;
}

.manta-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 14px;
	color: var(--wp--preset--color--muted-light);
}

.manta-footer__links a {
	color: var(--wp--preset--color--muted-light);
	text-decoration: none;
}

.manta-footer__links a:hover {
	color: var(--wp--preset--color--accent);
}

.manta-footer__bottom {
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	align-items: center;
	font-size: 13px;
}

.manta-footer__bottom p {
	margin: 0;
	color: var(--wp--preset--color--muted-light);
	font-size: 13px;
}

.manta-footer__legal a {
	color: var(--wp--preset--color--muted-light);
	text-decoration: none;
	margin-left: 18px;
	opacity: .85;
	transition: opacity .15s ease, color .15s ease;
}

.manta-footer__legal a:hover,
.manta-footer__legal a:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   14. Article (single post) — hero, two-column body, prose, related
   -------------------------------------------------------------------------- */

.manta-article__tag a {
	display: inline-block;
	background: var(--wp--preset--color--tint-cyan);
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
}

.manta-cardgrid {
	gap: 24px;
}

/* Used by templates/index.html's fallback post grid (no static Resources page set). */
.manta-card img {
	border-radius: var(--manta-radius-img);
	width: 100%;
	object-fit: cover;
}

.manta-card h3 {
	font-size: 20px;
	margin: 12px 0 8px;
}

.manta-card h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--navy);
}

/* --- Hero: full-bleed featured image, text bottom-aligned --- */

.manta-art-hero.wp-block-cover {
	margin: 0;
}

.manta-art-hero .wp-block-cover__background {
	background-color: transparent !important;
	background-image: linear-gradient(
		180deg,
		rgba(6, 18, 42, 0.35) 0%,
		rgba(6, 18, 42, 0.55) 45%,
		rgba(6, 18, 42, 0.9) 100%
	) !important;
	opacity: 1 !important;
}

.manta-art-crumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--wp--preset--color--muted-light);
	margin: 0 0 14px;
}

.manta-art-crumb a {
	color: var(--wp--preset--color--muted-light);
	text-decoration: none;
}

.manta-art-crumb a:hover {
	color: #fff;
}

.manta-art-crumb__current {
	color: #fff;
	font-weight: 600;
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.manta-art-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.manta-art-pill {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: #07203a;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	text-decoration: none;
}

/* core/post-terms wraps the term in its own <a>, which is a direct rule on
   that element — it wins over the wrapper's color even though the wrapper
   has a more specific selector, because inherited values always lose to any
   rule matching the element itself. Restate color/underline with `inherit`
   (not a duplicate background/padding, or the pill would double up). */
.manta-art-pill a,
.manta-art-pill a:hover {
	color: inherit;
	text-decoration: inherit;
}

.manta-art-readtime {
	font-size: 13px;
	color: var(--wp--preset--color--muted-light);
}

.manta-art-title.wp-block-post-title {
	font-size: 56px;
	line-height: 1;
	margin: 0 0 16px;
	text-shadow: 0 2px 20px rgba(6, 18, 42, 0.5);
}

.manta-art-byline {
	gap: 12px;
	align-items: center;
}

.manta-art-byline .wp-block-avatar {
	margin: 0;
	flex: none;
	line-height: 0;
}

.manta-art-byline .wp-block-avatar img {
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.5);
	display: block;
}

.manta-art-byline .wp-block-post-author-name {
	font-weight: 600;
	font-size: 15px;
	color: #fff;
}

.manta-art-byline .wp-block-post-date {
	font-size: 13px;
	color: var(--wp--preset--color--muted-light);
}

/* --- Body: two-column grid with sticky sidebar --- */

.manta-art-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--60) 24px;
	box-sizing: border-box;
}

.manta-art-side {
	position: sticky;
	top: 128px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.manta-art-contact {
	background: linear-gradient(135deg, #0b2350, #0e3a7d);
	border-radius: var(--manta-radius-card);
	padding: 26px 24px;
	color: #fff;
}

.manta-art-contact h3 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 24px;
	text-transform: uppercase;
	line-height: 1.05;
	margin: 0 0 10px;
	color: #fff;
}

.manta-art-contact > p {
	margin: 0 0 16px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted-light);
}

.manta-art-contact .wp-block-button {
	width: 100%;
	margin-bottom: 16px;
}

.manta-art-contact .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
}

.manta-art-contact .manta-contact__methods {
	margin-top: 0;
}

.manta-art-contact .manta-contact__row a {
	color: #fff;
}

/* --- Prose (post content column) --- */

.manta-article {
	font-size: 18px;
	line-height: 1.75;
	color: var(--wp--preset--color--ink);
	min-width: 0;
}

.manta-article > p {
	margin: 0 0 22px;
	font-size: 18px;
	line-height: 1.75;
	color: #33425f;
}

.manta-article > ul,
.manta-article > ol {
	margin: 0 0 22px;
	padding-left: 22px;
	font-size: 18px;
	line-height: 1.7;
	color: #33425f;
}

.manta-article > ul li,
.manta-article > ol li {
	margin-bottom: 8px;
}

.manta-article > h2 {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 32px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--navy);
	margin: 40px 0 16px;
	line-height: 1.05;
	scroll-margin-top: 128px;
}

.manta-article > h3 {
	margin: 32px 0 14px;
	scroll-margin-top: 128px;
}

.manta-article > figure.wp-block-image {
	margin: 32px 0;
}

.manta-article > figure.wp-block-image img {
	width: 100%;
}

.manta-article .wp-element-caption {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--label-light);
	font-style: italic;
}

/* Pull-quote — bigger and bolder than the site-wide quote default */

.manta-article > blockquote.wp-block-quote {
	margin: 32px 0;
	padding: 20px 28px;
	border-left: 4px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--page);
	border-radius: 0 12px 12px 0;
}

.manta-article > blockquote.wp-block-quote p {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 24px;
	line-height: 1.3;
	color: var(--wp--preset--color--navy);
	margin: 0;
}

/* Table — horizontal scroll on small screens, never breaks the page */

.manta-article > figure.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 24px;
	border: 1px solid var(--wp--preset--color--border);
	/* Straight 90° corners on purpose: a border-radius here clips the navy
	   <th> background unevenly at the curve (border-collapse plus a rounded
	   ancestor produces a crooked, jagged seam right where the two colours
	   meet). Keeping the box square avoids the seam entirely. */
	border-radius: 0;
}

.manta-article > figure.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 620px;
	font-size: 15px;
	margin: 0;
}

.manta-article > figure.wp-block-table th {
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: left;
	padding: 13px 18px;
	white-space: nowrap;
	/* Explicit reset: th previously had no border declared at all on any
	   side, while td declared border-top only. Under border-collapse,
	   leaving one side "undeclared" rather than explicitly 0 can resolve
	   inconsistently between the header row and body rows in some engines
	   — the safe fix is to declare all four sides on every cell. */
	border: 0;
}

.manta-article > figure.wp-block-table td {
	padding: 13px 18px;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	color: #33425f;
}

.manta-article > figure.wp-block-table tr:nth-child(even) td {
	background: var(--wp--preset--color--page);
}

/* Sizing-chart tables specifically (patterns/post-dummy-sizing-guide.php) —
   "className":"manta-sizetable" on the wp:table block. Scoped rather than
   applied to every article table on purpose: table-layout:auto measures
   thead and tbody independently and isn't guaranteed to land on identical
   column boundaries between the two, which is what made the columns look
   a little wider/misaligned starting right below the header row.
   table-layout:fixed locks every row to the same column widths, so header
   and body can't diverge. Only scoped to this class because the other
   article table (the sublimation comparison) holds full sentences per
   cell, not a short label + seven narrow size columns — a fixed first-
   column width would break its proportions. */
.manta-article figure.manta-sizetable table {
	table-layout: fixed;
}

.manta-article figure.manta-sizetable th:first-child,
.manta-article figure.manta-sizetable td:first-child {
	width: 30%;
}

/* In-summary callout */

.manta-art-summary {
	background: var(--wp--preset--color--page);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 24px 28px;
	margin: 0 0 36px;
}

.manta-art-summary__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
	margin-bottom: 12px;
}

.manta-art-summary p {
	font-size: 16px;
	line-height: 1.65;
	margin: 0 0 12px;
	color: #33425f;
}

.manta-art-summary ul,
.manta-art-summary ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.manta-art-summary li {
	font-size: 16px;
	line-height: 1.65;
	margin-bottom: 7px;
	color: #33425f;
}

.manta-art-summary p:last-child,
.manta-art-summary ul:last-child,
.manta-art-summary ol:last-child {
	margin-bottom: 0;
}

.manta-art-summary li:last-child {
	margin-bottom: 0;
}

/* Table of contents — active state set by assets/js/interactions.js */

.manta-art-toc {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 20px 24px;
	margin: 0 0 32px;
}

.manta-art-toc__label {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	margin-bottom: 8px;
}

/* Each link is authored as its own paragraph block, which otherwise carries
   its own default bottom margin on top of the link's 8px padding, doubling
   the gap between entries. Zero it out so padding is the only spacing. */
.manta-art-toc p {
	margin: 0;
}

.manta-art-toc .toc-link {
	display: block;
	padding: 8px 0;
	font-size: 14.5px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	border-left: 2px solid var(--wp--preset--color--border);
	padding-left: 14px;
	transition: color 0.15s, border-color 0.15s;
}

.manta-art-toc .toc-link:first-of-type {
	margin-top: 2px;
}

.manta-art-toc .toc-link:hover,
.manta-art-toc .toc-link.is-active {
	color: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
}

.manta-art-toc .toc-link.is-active {
	font-weight: 600;
}

/* Numbered / bulleted description list — bold topic + detail line */

.manta-article > .manta-art-desclist {
	margin: 0 0 24px;
	padding-left: 26px;
	font-size: inherit;
	line-height: inherit;
}

.manta-article > .manta-art-desclist > li {
	margin-bottom: 16px;
	padding-left: 6px;
}

.manta-article > .manta-art-desclist > li::marker {
	color: var(--wp--preset--color--navy);
	font-weight: 800;
}

.manta-art-desclist > li > strong {
	display: block;
	font-size: 18px;
	color: var(--wp--preset--color--navy);
	font-weight: 700;
	margin-bottom: 2px;
	line-height: 1.25;
}

.manta-art-desclist > li > span {
	display: block;
	font-size: 16px;
	line-height: 1.65;
	color: #33425f;
}

/* Drop-in CTA — reusable mid-article promo, see patterns/cta-inline-article.php */

.manta-art-cta {
	margin: 36px 0;
	background: var(--wp--preset--color--navy);
	border-radius: 16px;
	padding: 30px 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.manta-art-cta__copy {
	min-width: 220px;
	flex: 1;
}

.manta-art-cta__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 24px;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.05;
	margin: 0;
}

.manta-art-cta__sub {
	font-size: 15px;
	color: var(--wp--preset--color--muted-light);
	margin: 6px 0 0;
}

.manta-art-cta .wp-block-button {
	flex: none;
	margin: 0;
}

/* --- Author box --- */

.manta-art-authorbox {
	background: var(--wp--preset--color--page);
}

/* .manta-art-wrap is reused here purely for its grid-column alignment — its
   own top/bottom padding would stack with .manta-art-authorbox's section
   padding above, doubling the gap between the article and the author card. */
.manta-art-authorbox .manta-art-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

/* Sits inside a .manta-art-wrap grid (see templates/single.html) so it lines
   up with the article column above and leaves the sidebar's 320px reserved,
   rather than centering independently of the two-column layout. */
.manta-art-authorcard.wp-block-post-author {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	padding: 32px 34px;
}

.manta-art-authorcard img {
	border-radius: 50%;
	flex: none;
	display: block;
}

.manta-art-authorcard p {
	margin: 0;
}

.manta-art-authorcard .wp-block-post-author__name,
.manta-art-authorcard strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 22px;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	display: block;
	margin-bottom: 6px;
}

.manta-art-authorcard .wp-block-post-author__bio {
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* LinkedIn link — injected by inc/author.php's render_block_core/post-author
   filter, only when the post's author has a LinkedIn URL saved on their
   profile. flex-basis:100% drops it onto its own row under the avatar+bio
   row (the card is flex-wrap now, see above) rather than squeezing in as a
   third side-by-side column. The 92px left offset is avatarSize (72px) +
   the card's own 20px gap, so it lines up under the bio text instead of
   the avatar. Default link colour/hover comes from theme.json's global
   link style — no colour override needed here. */
.manta-art-authorcard__linkedin {
	flex-basis: 100%;
	margin-left: 92px;
}

.manta-art-authorcard__linkedin a {
	font-size: 14px;
	font-weight: 600;
}

/* --- Related --- */

.manta-art-related {
	background: var(--wp--preset--color--page);
}

.manta-art-related > h2 {
	font-size: 34px;
	margin: 0 0 24px;
}

.manta-art-relgrid {
	gap: 24px;
}

.manta-artcard {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
}

.manta-artcard .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 10;
}

.manta-artcard .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.manta-artcard__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.manta-artcard__cat,
.manta-artcard__cat a {
	color: var(--wp--preset--color--accent-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
}

.manta-artcard h3 {
	font-size: 21px;
	line-height: 1.15;
	margin: 0;
}

.manta-artcard h3 a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

/* --- Sticky mobile CTA bar — hidden until the 1024px breakpoint --- */

.manta-art-stickycta {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 25;
	max-width: calc(100% - 120px);
	display: none;
	align-items: center;
	gap: 12px;
}

.manta-art-stickycta__label {
	color: #dbe6f7;
	font-size: 16px;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
}

.manta-art-stickycta .wp-block-button__link {
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   15. Product pages
   -------------------------------------------------------------------------- */

/* --- breadcrumb --- */

.manta-crumbs__trail {
	gap: 8px;
	align-items: center;
}

.manta-crumbs__trail p,
.manta-crumbs__current {
	margin: 0;
	font-size: 13px;
	color: var(--wp--preset--color--label);
}

.manta-crumbs__trail p:not(:last-child)::after {
	content: "/";
	margin-left: 8px;
	color: #b6c2d6;
}

.manta-crumbs__trail a {
	color: var(--wp--preset--color--label);
	text-decoration: none;
}

.manta-crumbs__trail a:hover {
	color: var(--wp--preset--color--accent-2);
}

.manta-crumbs__current {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

/* --- product hero --- */

.manta-phero__img img {
	border-radius: var(--manta-radius-card);
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.manta-phero h1 {
	margin: 6px 0 16px;
	font-size: clamp(38px, 4.4vw, 60px);
}

.manta-phero__ctas {
	gap: 12px;
	margin-top: 28px;
}

.manta-stats {
	gap: 20px 44px;
	margin-top: 28px;
}

.manta-stat {
	min-width: 130px;
}

.manta-stat__val {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 26px;
	line-height: 1.05;
	color: var(--wp--preset--color--navy);
}

.manta-stat__lab {
	margin: 4px 0 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--label);
}

/* --- product detail split --- */

.manta-psplit__img img {
	border-radius: var(--manta-radius-card);
	width: 100%;
	object-fit: cover;
	aspect-ratio: 3 / 4;
	max-height: 460px;
}

.manta-ticks {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.manta-ticks li {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.55;
}

/* --- sizing chart --- */

.manta-sizing__head {
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 26px;
}

.manta-sizing__head h2 {
	margin: 0 0 8px;
}

.manta-sizing__head p {
	margin: 0;
	max-width: 42ch;
}

/* .manta-table carries min-width:560px so the size columns stay readable, and
   .manta-table-scroll scrolls it. But a flex item defaults to min-width:auto,
   so without this the column refuses to shrink below that 560px, widens the
   whole row and pushes the measurement card off-screen with it — the table
   never gets to scroll because it isn't the thing overflowing. The design does
   the same: `min-width:0` on .pl-tables-col in Jerseys/Tank tops/Shorts.dc.html. */
.manta-sizing__cols > .wp-block-column {
	min-width: 0;
}

.manta-unit {
	display: inline-flex;
	border-radius: var(--manta-radius-btn);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	background: #fff;
}

.manta-unit__btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 15px;
	padding: 11px 22px;
	background: #fff;
	color: var(--wp--preset--color--navy);
	transition: background-color var(--manta-ease), color var(--manta-ease);
}

.manta-unit__btn.is-active {
	background: var(--wp--preset--color--navy);
	color: #fff;
}

.manta-measure {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--manta-radius-card);
	padding: 22px;
}

.manta-measure__title,
.manta-table__title {
	/* Verbatim from the <h3> spec in Jerseys.dc.html/Shorts.dc.html for
	   "Jersey measurement" and "Loose cut (men's)"/"Fitted cut (women's)":
	   20px, 0.5px letter-spacing, navy. This was still the old 12px/1.4px/
	   --label (light grey-blue) values — missed in the previous pass, which
	   only touched .manta-measure__key (the "Width"/"Length" sub-labels),
	   not this title rule. */
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 20px;
	color: var(--wp--preset--color--navy);
	margin: 0 0 14px;
}

.manta-table__title {
	margin-top: 26px;
}

.manta-table-wrap > .manta-table__title:first-child {
	margin-top: 0;
}

.manta-measure img {
	width: 100%;
	height: auto;
	display: block;
	background: var(--wp--preset--color--page);
	border-radius: var(--manta-radius-img);
}

.manta-measure__key {
	margin: 18px 0 0;
}

.manta-measure__key dt {
	/* 18px/normal letter-spacing, verbatim from the "Width"/"Length" spec in
	   Jerseys.dc.html, Tank tops.dc.html and Shorts.dc.html's measure-card
	   figcaption (all three match exactly) — was 13px with an extra 0.8px
	   letter-spacing not in the source, which read noticeably smaller and
	   more spread out than the design. */
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 18px;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
	margin-top: 12px;
}

.manta-measure__key dd {
	margin: 3px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* Measurement diagram card (manta_measure_card() in inc/sizing.php) — the
   img is now a core wp:image block, so kill the image block's default
   bottom margin (the 18px gap to the key list below comes from
   .manta-measure__key-table's own top margin, same as the old dl). */
.manta-measure figure.wp-block-image {
	margin: 0;
}

/* The dt/dd key list is now a core wp:table block (className
   "manta-measure__key-table"). Cells are forced to display:block so each
   term still stacks above its definition — a plain vertical list, not a
   two-column grid — matching the original dl look exactly. */
.manta-measure__key-table {
	margin: 18px 0 0;
}

.manta-measure__key-table table,
.manta-measure__key-table tbody,
.manta-measure__key-table tr,
.manta-measure__key-table td {
	display: block;
	border: 0;
	padding: 0;
}

.manta-measure__key-table tr:not(:first-child) td:first-child {
	margin-top: 12px;
}

.manta-measure__key-table td:first-child {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 18px;
	line-height: 1.2;
	color: var(--wp--preset--color--navy);
}

.manta-measure__key-table td:last-child {
	margin: 3px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.manta-table-scroll {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--manta-radius-card);
	background: #fff;
}

.manta-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	min-width: 560px;
}

.manta-table th,
.manta-table td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.manta-table thead th {
	background: var(--wp--preset--color--tint);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;
	color: var(--wp--preset--color--label);
	white-space: nowrap;
}

.manta-table tbody th {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

.manta-table tbody tr:last-child th,
.manta-table tbody tr:last-child td {
	border-bottom: 0;
}

/* --- hub grid --- */

.manta-hubhead h1 {
	margin: 6px 0 14px;
}

.manta-hubhead p {
	max-width: 56ch;
}

.manta-hubgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.manta-hubcard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--manta-radius-card);
	overflow: hidden;
	text-decoration: none;
	transition: transform var(--manta-ease), box-shadow var(--manta-ease);
}

.manta-hubcard:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(8, 26, 58, 0.14);
}

.manta-hubcard img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

.manta-hubcard__body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.manta-hubcard__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 24px;
	letter-spacing: 0.4px;
	color: var(--wp--preset--color--navy);
	line-height: 1.05;
}

.manta-hubcard__text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.manta-hubcard__link {
	font-weight: 700;
	font-size: 15px;
	color: var(--wp--preset--color--accent-2);
	margin-top: 4px;
}

/* manta-hubcard is now built from native Image/Group/Buttons blocks (used
   to be a single raw <a class="manta-hubcard">) so it can be edited
   without touching code. Same overrides as .manta-tile above: kill the
   image block's default margin, and stretch the Buttons block's link
   over the whole card as an invisible click target. */
.manta-hubcard figure.wp-block-image {
	margin: 0;
}

.manta-hubcard__title,
.manta-hubcard__text {
	margin: 0;
}

.manta-hubcard__linklayer {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
}

/* Same flex-layout width collapse as .manta-tile__linklayer above. */
.manta-hubcard__linklayer .wp-block-button {
	margin: 0;
	width: 100%;
	height: 100%;
}

.manta-hubcard__linklayer .wp-block-button__link {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border-radius: 0;
	background: transparent !important;
	color: transparent !important;
	font-size: 0;
	line-height: 0;
}

.manta-hubcard__linklayer .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: -2px;
}

/* --- other products cards --- */

.manta-more h2 {
	margin-top: 0;
	margin-bottom: 28px;
}

.manta-more .manta-card h3 {
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   16. Journal (Resources index + archives)
   -------------------------------------------------------------------------- */

.manta-journalhead h1 {
	margin: 6px 0 0;
}

.manta-featured__cols {
	gap: 0;
	border-radius: var(--manta-radius-card);
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(8, 26, 58, 0.12);
}

/* The image column had no height of its own — with height:100% on the <img>
   but nothing defining the parent's height, a column with no featured image
   (or any image whose natural size isn't otherwise constrained) could dictate
   the whole row's height instead of the row settling to a sane size, which is
   how this ballooned to several screens tall. Give the figure its own
   position:relative box (matching Resources.dc.html's bl-feat-img: min-height
   380px) and let the image absolutely fill it, so the row's height is capped
   regardless of what's inside this column. */
.manta-featured__img {
	position: relative;
	min-height: 380px;
	height: 100%;
}

.manta-featured__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	display: block;
}

.manta-featured__body {
	padding: 40px 38px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.manta-featured__body h2 {
	margin: 0;
	font-size: clamp(26px, 2.4vw, 34px);
}

.manta-featured__body h2 a {
	color: #fff;
	text-decoration: none;
}

.manta-featured__body p {
	margin: 0;
}

.manta-pill a,
.manta-jcard__cat a {
	display: inline-block;
	text-decoration: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
}

.manta-pill a {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
	padding: 5px 12px;
	border-radius: 999px;
}

.manta-jcard__cat a {
	color: var(--wp--preset--color--accent-2);
}

.manta-byline {
	gap: 8px;
	font-size: 13px;
	color: var(--wp--preset--color--label);
	margin-top: 4px;
}

.manta-byline > *:not(:last-child)::after {
	content: "·";
	margin-left: 8px;
	opacity: 0.6;
}

.manta-featured__body .manta-byline {
	color: var(--wp--preset--color--muted-light);
}

/* category filter pills */

.manta-filters {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.manta-filters li a {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: #fff;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	transition: background-color var(--manta-ease), color var(--manta-ease),
		border-color var(--manta-ease);
}

.manta-filters li a:hover,
.manta-filters li.current-cat a {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: #fff;
}

/* journal cards */

.manta-jcard {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--manta-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--manta-ease), box-shadow var(--manta-ease);
}

.manta-jcard:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(8, 26, 58, 0.12);
}

.manta-jcard img {
	border-radius: 0;
	width: 100%;
	object-fit: cover;
	display: block;
}

.manta-jcard__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.manta-jcard__body h3 {
	margin: 0;
	font-size: 19px;
	line-height: 1.15;
}

.manta-jcard__body h3 a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

.manta-jcard__body p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
}

/* newsletter band */

.manta-newsletter h2 {
	margin-bottom: 10px;
}

.manta-newsletter .fluentform {
	max-width: 460px;
	margin: 22px auto 0;
}

.manta-newsletter .ff-el-group {
	margin-bottom: 12px;
}

.manta-newsletter .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.manta-newsletter input[type="email"],
.manta-newsletter input[type="text"] {
	width: 100%;
	padding: 14px 16px;
	border: 0;
	border-radius: var(--manta-radius-btn);
	font-size: 15px;
	font-family: var(--wp--preset--font-family--body);
}

.manta-newsletter .ff-el-form-check-label,
.manta-newsletter label {
	color: var(--wp--preset--color--muted-light);
	font-size: 13px;
}

.manta-newsletter .ff-el-form-check-label a {
	color: var(--wp--preset--color--accent);
}

.manta-newsletter .ff-el-group:has(.ff-btn-submit) {
	text-align: center;
	margin-top: 16px;
}

.manta-newsletter .ff-btn-submit {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
	border: 0;
	border-radius: var(--manta-radius-btn);
	padding: 13px 30px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-size: 16px;
	cursor: pointer;
}

.manta-newsletter .ff-message-success {
	color: #fff;
	background: transparent;
	border: 0;
	text-align: center;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   17. About page
   -------------------------------------------------------------------------- */

.manta-abouthero h1 {
	margin: 6px 0 14px;
}

.manta-abouthero p {
	margin: 0;
}

.manta-squad h2 {
	margin: 6px 0 40px;
}

.manta-person__img img {
	border-radius: var(--manta-radius-card);
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.manta-person h3 {
	margin: 0;
	font-size: 24px;
}

.manta-person__role {
	margin: 4px 0 14px !important;
	font-size: 12px !important;
	letter-spacing: 2px;
}

/* --------------------------------------------------------------------------
   18. Contact intent cards
   -------------------------------------------------------------------------- */

.manta-intent h2 {
	margin-bottom: 28px;
}

.manta-intent .manta-card h3 {
	margin-top: 0;
	font-size: 20px;
}

.manta-card__link {
	margin: 12px 0 0 !important;
	font-weight: 700;
	font-size: 15px;
}

.manta-card__link a {
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   19. Feature grid, spec sheet, library
   -------------------------------------------------------------------------- */

.manta-features h2 {
	margin-bottom: 40px;
}

.manta-fgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.manta-fcard {
	background: var(--wp--preset--color--page);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--manta-radius-card);
	padding: 26px 24px;
}

.manta-fcard__chip {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var(--wp--preset--color--tint-cyan);
	color: var(--wp--preset--color--accent-2);
	border-radius: var(--manta-chip);
	margin-bottom: 16px;
}

.manta-fcard h3 {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 18px;
	color: var(--wp--preset--color--navy);
}

.manta-fcard p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

.manta-specs {
	margin: 24px 0 0;
}

.manta-spec {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.manta-spec dt {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	color: var(--wp--preset--color--navy);
}

.manta-spec dd {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

/* Spec sheet table (patterns/spec-sheet.php) — the dt/dd list is now a
   core wp:table block (className "manta-specsheet__table") so Hanna can
   edit rows without opening the HTML tab. Rules below mirror the old
   .manta-spec / dt / dd look: bold navy uppercase label column, muted
   value column, thin bottom border between rows, no table chrome. */
.manta-specsheet__table {
	margin: 24px 0 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.manta-specsheet__table table {
	border-collapse: collapse;
	width: 100%;
}

.manta-specsheet__table td {
	padding: 14px 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	vertical-align: top;
}

.manta-specsheet__table td:first-child {
	width: 160px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

.manta-specsheet__table td:last-child {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

.manta-specsheet__img img {
	border-radius: var(--manta-radius-card);
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.manta-sports {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.manta-sport {
	padding: 11px 20px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	font-weight: 600;
	font-size: 15px;
	color: var(--wp--preset--color--navy);
}

.manta-sport.is-primary {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: #fff;
}

.manta-bigstats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	text-align: center;
}

.manta-bigstat strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1;
	color: var(--wp--preset--color--navy);
}

.manta-bigstat span {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--label);
}

/* manta-bigstat now built from a native Group/Paragraph block
   (patterns/page-library.php) instead of raw <strong>/<span> tags, so the
   number/label are addressed by class rather than by bare tag selector.
   Rules mirror .manta-bigstat strong / .manta-bigstat span above exactly. */
.manta-bigstat__val {
	display: block;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(34px, 4vw, 52px);
	line-height: 1;
	color: var(--wp--preset--color--navy);
}

.manta-bigstat__lab {
	display: block;
	margin: 8px 0 0;
	font-size: 13px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--label);
}

.manta-values h2 {
	margin-bottom: 32px;
}

.manta-values .manta-card h3 {
	margin-top: 0;
	font-size: 20px;
}

.manta-gallery img {
	border-radius: var(--manta-radius-img);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.manta-quote p {
	font-size: 16px;
	line-height: 1.6;
}

.manta-quote__who {
	margin-top: 14px !important;
	font-weight: 700;
	font-size: 14px;
	color: var(--wp--preset--color--navy) !important;
}

/* --------------------------------------------------------------------------
   19b. Icons
   -------------------------------------------------------------------------- */

/* --- SVG icons (CSS masks, so they inherit currentColor) --- */

.manta-topbar__item::before,
.manta-ticks li::before,
.manta-contact__row::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
}

/* The three topbar icons above are CSS masks — a mask only defines the
   shape, it has no fill of its own, so without an explicit background-color
   they render as nothing. Set to currentColor so they pick up the topbar's
   white text color automatically. */
.manta-topbar__item::before {
	background-color: currentColor;
}

.manta-topbar__item--mail::before {
	width: 14px;
	height: 14px;
	margin-right: 8px;
	vertical-align: -1px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.manta-topbar__item--whatsapp::before {
	width: 13px;
	height: 13px;
	margin-right: 8px;
	vertical-align: -1px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.5v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 1 3.7 2 2 0 0 1 3 1.5h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L7.1 9.4a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2.1Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.5v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 1 3.7 2 2 0 0 1 3 1.5h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L7.1 9.4a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2.1Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.manta-topbar__item--telegram::before {
	width: 14px;
	height: 14px;
	margin-right: 8px;
	vertical-align: -1px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3 2 10.5l6.5 2.5L11 21l3.5-5.5L21 20Z'/%3E%3Cpath d='M8.5 13 21 3'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3 2 10.5l6.5 2.5L11 21l3.5-5.5L21 20Z'/%3E%3Cpath d='M8.5 13 21 3'/%3E%3C/svg%3E") no-repeat center / contain;
}

.manta-contact__row::before {
	width: 34px;
	height: 34px;
	background-color: var(--wp--preset--color--tint-cyan);
	border-radius: var(--manta-chip);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 17px 17px;
}

.manta-contact__row--mail::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6ea8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
}

.manta-contact__row--telegram::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6ea8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3 2 10.5l6.5 2.5L11 21l3.5-5.5L21 20Z'/%3E%3Cpath d='M8.5 13 21 3'/%3E%3C/svg%3E");
}

.manta-contact__row--whatsapp::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6ea8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16.5v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 1 3.7 2 2 0 0 1 3 1.5h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.4 2.1L7.1 9.4a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2.1Z'/%3E%3C/svg%3E");
}

.manta-ticks li::before {
	position: absolute;
	left: 0;
	top: 3px;
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5 11-11'/%3E%3C/svg%3E") no-repeat center / contain;
}

.manta-icon {
	display: block;
}

/* --------------------------------------------------------------------------
   19c. Custom products hub / Other products / Contact
   -------------------------------------------------------------------------- */

.manta-hubsection h2 {
	margin-bottom: 12px;
}

.manta-hubsection > p {
	max-width: 62ch;
	margin-bottom: 28px;
}

.manta-hubsection .wp-block-buttons {
	margin-top: 32px;
}

/* four-across step grid (hub) */

.manta-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.manta-steps__grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* alternating product rows */

.manta-range__list {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.manta-range__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.manta-range__row.is-reversed .manta-range__media {
	order: 2;
}

.manta-range__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--manta-radius-card);
	display: block;
}

/* manta-range__media now wraps a native Image block (patterns/page-library.php)
   — kill the image block's default bottom margin so nothing shifts inside
   the grid cell. */
.manta-range__media figure.wp-block-image {
	margin: 0;
}

.manta-range__body h2 {
	margin: 0 0 14px;
}

.manta-range__body p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
}

.manta-range__link {
	display: inline-block;
	margin-top: 6px;
	font-weight: 700;
	font-size: 15px;
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--accent);
	padding-bottom: 2px;
}

/* "not yet available" notice */

.manta-notice {
	margin: 6px 0 4px !important;
	font-size: 15px;
	font-style: italic;
	color: var(--wp--preset--color--navy) !important;
}

/* Contact page — photo + stacked-channels grid, and the separate address bar.
   Values copied directly from Contact.dc.html: 0.85fr/1.15fr grid, 20px
   radius + shadow on the grid, panel bg is the theme's exact "page" colour
   (#f6f8fb), 46px/12px-radius chips, 12px/accent-2 channel titles, and a
   14px-radius navy address bar. Responsive overrides are in section 20. */

.manta-ct-section {
	background: #eef4fb;
}

.manta-ct-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(8, 26, 58, 0.12);
}

.manta-ct-heroimg {
	position: relative;
	min-height: 360px;
	background: var(--wp--preset--color--navy);
	overflow: hidden;
}

.manta-ct-heroimg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* manta-ct-heroimg now wraps a native Image block (patterns/page-contact-body.php)
   — the figure needs to fill the positioned .manta-ct-heroimg box so the
   absolutely-positioned img inside it (rule above) still covers it edge to
   edge. */
.manta-ct-heroimg figure.wp-block-image {
	margin: 0;
	height: 100%;
}

.manta-ct-panel {
	background: var(--wp--preset--color--page);
	padding: 40px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.manta-ct-panel__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: 26px;
	line-height: 1.1;
	color: var(--wp--preset--color--navy);
	margin-bottom: 8px;
}

.manta-ct-channel {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px 0;
	border-top: 1px solid var(--wp--preset--color--border);
	text-decoration: none;
	transition: opacity var(--manta-ease);
}

.manta-ct-channel:hover {
	opacity: 0.75;
}

.manta-ct-channel__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var(--wp--preset--color--tint-cyan);
	color: var(--wp--preset--color--navy);
}

.manta-ct-channel__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.manta-ct-channel__title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}

.manta-ct-channel__detail {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--navy);
}

/* Address — separate full-width bar, not part of the grid above. */

.manta-ct-address {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 16px;
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-radius: 14px;
	padding: 18px 26px;
}

.manta-ct-address__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 18px;
}

.manta-ct-address__divider {
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, 0.2);
}

.manta-ct-address__region {
	font-size: 15px;
	color: var(--wp--preset--color--muted-light);
}

/* --------------------------------------------------------------------------
   19d. Building-block pages (Library / Product Landing)
   Placeholder scaffolds — see the header comments in those pattern files.
   -------------------------------------------------------------------------- */

/* Eyebrows are paragraphs, not headings.

   They used to be <h6>, which put an h6 immediately before an h1 or h2 and
   broke heading order for screen readers and automated audits. They are
   decorative labels, so they are paragraphs carrying this class instead.
   Genuine headings — the footer column labels — are still <h6>.

   No !important on colour: WordPress emits its preset colour classes
   (.has-accent-color etc.) with !important, so a per-block colour override
   still wins. */

.manta-eyebrow {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--wp--preset--color--accent-2);
}

.manta-bigstats--3 {
	grid-template-columns: repeat(3, 1fr);
	margin-top: 36px;
}

.manta-fgrid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.manta-fgrid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.manta-fgrid--numbered .manta-fcard__n {
	display: inline-block;
	margin-bottom: 14px;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 22px;
	line-height: 1;
	color: var(--wp--preset--color--accent);
}

.manta-features .manta-fgrid {
	margin-top: 40px;
}

.manta-values .manta-fgrid {
	margin-top: 32px;
}

/* testimonials */

.manta-quotegrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 36px;
}

.manta-quotecard {
	margin: 0;
	padding: 28px 26px;
	background: var(--wp--preset--color--page);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--manta-radius-card);
}

.manta-quotecard blockquote {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--wp--preset--color--ink);
}

.manta-quotecard blockquote::before {
	content: "\201C";
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 44px;
	line-height: 0.6;
	color: var(--wp--preset--color--accent);
}

.manta-quotecard figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.manta-quotecard figcaption strong {
	font-size: 15px;
	color: var(--wp--preset--color--navy);
}

.manta-quotecard figcaption span {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

/* manta-quotecard citation is now two Paragraph blocks (className
   "manta-quotecard__cite-name" / "-team") inside a Group
   (className "manta-quotecard__cite"), replacing the old
   <figcaption><strong>/<span> markup — same two-line, name-bold/team-muted
   look, addressed by class instead of bare tag + figcaption ancestor. */
.manta-quotecard__cite {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.manta-quotecard__cite p {
	margin: 0;
}

.manta-quotecard__cite-name {
	font-weight: 700;
	font-size: 15px;
	color: var(--wp--preset--color--navy);
}

.manta-quotecard__cite-team {
	font-size: 14px;
	color: var(--wp--preset--color--muted);
}

/* filterable gallery */

.manta-gfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 28px;
}

.manta-gfilter__btn {
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: #fff;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--manta-ease), color var(--manta-ease),
		border-color var(--manta-ease);
}

.manta-gfilter__btn:hover {
	border-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--accent-2);
}

.manta-gfilter__btn.is-active {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: #fff;
}

.manta-ggrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.manta-gitem {
	margin: 0;
	border-radius: var(--manta-radius-card);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
}

.manta-gitem[hidden] {
	display: none;
}

.manta-gitem img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.manta-gitem figcaption {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.manta-gitem figcaption strong {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 18px;
	color: var(--wp--preset--color--navy);
}

.manta-gitem figcaption span {
	font-size: 13px;
	color: var(--wp--preset--color--muted);
}

/* expandable team grid */

.manta-teamgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 36px;
}

.manta-person-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--manta-radius-card);
	overflow: hidden;
}

.manta-person-card summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.manta-person-card summary::-webkit-details-marker {
	display: none;
}

.manta-person-card img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
}

.manta-person-card__name {
	padding: 16px 18px 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-size: 19px;
	color: var(--wp--preset--color--navy);
}

.manta-person-card__role {
	padding: 2px 18px 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2);
}

.manta-person-card > p {
	margin: 0;
	padding: 0 18px 20px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* Product Landing range grid */

.manta-rangegrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 28px;
}

.manta-rangegrid .manta-tile {
	height: 260px;
}

/* --------------------------------------------------------------------------
   19e. 404
   -------------------------------------------------------------------------- */

.manta-404 {
	position: relative;
	overflow: hidden;
}

.manta-404__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.manta-404__circle {
	position: absolute;
	top: -140px;
	right: -120px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0.15;
	display: block;
}

.manta-404__circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.manta-404 > *:not(.manta-404__deco) {
	position: relative;
	z-index: 1;
}

.manta-404__eyebrow {
	margin: 0 0 10px !important;
	font-size: 13px !important;
	letter-spacing: 2.5px;
}

.manta-404__title {
	margin: 0 0 18px;
	font-size: clamp(40px, 5vw, 64px);
	line-height: 0.98;
}

.manta-404__lede {
	margin: 0 0 30px;
	max-width: 46ch;
	font-size: 18px;
}

.manta-404__ctas {
	gap: 12px;
}

/* quick links panel */

.manta-404__links {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--manta-radius-card);
	padding: 26px 24px;
}

.manta-404__linkslabel {
	margin: 0 0 14px !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent) !important;
}

.manta-404__links a {
	position: relative;
	display: block;
	padding: 11px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 18px;
	transition: color var(--manta-ease), padding-left var(--manta-ease);
}

.manta-404__links a:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.manta-404__links a:hover,
.manta-404__links a:focus-visible {
	color: var(--wp--preset--color--accent);
	padding-left: 8px;
}

/* search band */

.manta-404__search h2 {
	margin-bottom: 22px;
}

.manta-404__search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--manta-radius-btn);
	padding: 4px;
	background: #fff;
}

.manta-404__search .wp-block-search__input {
	border: 0;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	background: transparent;
}

.manta-404__search .wp-block-search__input:focus {
	outline: none;
}

.manta-404__search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(23, 196, 221, 0.18);
}

.manta-404__search .wp-block-search__button {
	margin: 0;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background-color var(--manta-ease), color var(--manta-ease);
}

.manta-404__search .wp-block-search__button:hover {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
}

/* --------------------------------------------------------------------------
   19f. Search results
   Shares the 404's voice and furniture — navy head, ghosted circle, the same
   quick-links panel in the empty state.
   -------------------------------------------------------------------------- */

.manta-searchhead {
	position: relative;
	overflow: hidden;
}

.manta-searchhead__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

.manta-searchhead__circle {
	position: absolute;
	top: -150px;
	right: -110px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0.14;
	display: block;
}

.manta-searchhead__circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.manta-searchhead > *:not(.manta-searchhead__deco) {
	position: relative;
	z-index: 1;
}

.manta-searchhead__title {
	margin: 0 0 14px;
	font-size: clamp(34px, 4.2vw, 52px);
	line-height: 1;
}

.manta-searchhead__lede {
	margin: 0 0 26px;
	max-width: 52ch;
	font-size: 17px;
}

/* search field on navy */

.manta-searchhead__form .wp-block-search__inside-wrapper {
	max-width: 520px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--manta-radius-btn);
	padding: 4px;
	background: rgba(255, 255, 255, 0.08);
}

.manta-searchhead__form .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 12px 14px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	color: #fff;
}

.manta-searchhead__form .wp-block-search__input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.manta-searchhead__form .wp-block-search__input:focus {
	outline: none;
}

.manta-searchhead__form .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(23, 196, 221, 0.25);
}

.manta-searchhead__form .wp-block-search__button {
	margin: 0;
	padding: 12px 24px;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background-color var(--manta-ease);
}

.manta-searchhead__form .wp-block-search__button:hover {
	background: #12b2c9;
}

/* results */

.manta-searchresults .manta-jcard__body h2 {
	margin: 0;
	font-size: 19px;
	line-height: 1.15;
}

.manta-searchresults .manta-jcard__body h2 a {
	color: var(--wp--preset--color--navy);
	text-decoration: none;
}

/* empty state */

.manta-noresults__title {
	margin: 0 0 16px;
	font-size: clamp(28px, 3.4vw, 40px);
}

.manta-noresults__ctas {
	gap: 12px;
	margin-top: 26px;
}

.manta-noresults__links {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--manta-radius-card);
	padding: 26px 24px;
}

.manta-noresults__linkslabel {
	margin: 0 0 14px !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--label) !important;
}

.manta-noresults__links a {
	display: block;
	padding: 11px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-size: 18px;
	transition: color var(--manta-ease), padding-left var(--manta-ease);
}

.manta-noresults__links a:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.manta-noresults__links a:hover,
.manta-noresults__links a:focus-visible {
	color: var(--wp--preset--color--accent-2);
	padding-left: 8px;
}

/* admin-only warning when a Fluent Forms shortcode renders nothing */

.manta-formwarning {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	border: 2px dashed #b32d2e;
	border-radius: var(--manta-radius-btn);
	background: #fff4f4;
	color: #7a1d1e;
	font-size: 14px;
	line-height: 1.55;
}

.manta-formwarning strong {
	font-size: 15px;
}

.manta-formwarning a {
	color: #7a1d1e;
}

.manta-formwarning span:last-child {
	font-size: 12px;
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   20. Responsive — single breakpoint at 1024px, per the design
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.manta-topbar {
		display: none;
	}

	#header-spacer {
		height: 76px;
	}

	.manta-header__nav > .manta-nav {
		display: none;
	}

	.manta-burger {
		display: flex;
	}

	.manta-brand__mark img {
		width: 44px;
	}

	/* Mobile/tablet header: logo mark only (no title/tagline), "Get a
	   quote" button, and the burger — spread across the bar instead of
	   the full desktop brand + nav getting smooshed together. */
	.manta-brand__text {
		display: none;
	}

	/* The topbar block is hidden above, but its WP block-gap spacing to the
	   next sibling (header__main) is structural — it doesn't collapse just
	   because the topbar has display:none. The custom-property reset alone
	   isn't enough because WP bakes the block-gap into a fixed px value on
	   a generated container class at render time, so it's forced here. */
	.manta-header {
		--wp--style--block-gap: 0;
	}

	.manta-header__main {
		margin-top: 0 !important;
	}

	.manta-topbar {
		margin-bottom: 0 !important;
	}

	.manta-header__inner {
		position: relative;
	}

	.manta-header__nav {
		flex: 1;
		justify-content: flex-end;
	}

	.manta-header__cta {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
	}

	.manta-hero__cols,
	.manta-story__cols,
	.manta-contact__cols,
	.manta-steps__cols {
		flex-wrap: wrap;
	}

	.manta-facts__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.manta-steps__cols > .wp-block-column {
		flex-basis: 100% !important;
		margin-bottom: 8px;
	}

	.manta-steps__circle--1 {
		width: 260px;
		height: 260px;
		top: -80px;
		right: -80px;
	}

	.manta-steps__circle--2 {
		width: 190px;
		height: 190px;
		bottom: -90px;
		right: 40px;
	}

	.manta-step__title {
		font-size: 22px;
	}

	.manta-hero__cols > .wp-block-column,
	.manta-story__cols > .wp-block-column,
	.manta-contact__cols > .wp-block-column {
		flex-basis: 100% !important;
	}

	.manta-hero__cols {
		flex-direction: column-reverse;
	}

	.manta-bento {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.manta-tile {
		height: 220px;
	}

	.manta-tile--tall,
	.manta-tile--wide {
		grid-row: auto;
	}

	.manta-bento__head {
		align-items: flex-start;
	}

	.manta-formcard {
		padding: 28px 22px;
	}

	.manta-formcard .ff-t-container {
		grid-auto-flow: row;
		grid-auto-columns: auto;
	}

	.manta-footer__grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 24px !important;
	}

	.manta-footer__grid > .wp-block-column {
		margin-bottom: 0 !important;
		flex-basis: auto !important;
		width: auto !important;
	}

	.manta-footer__grid > .wp-block-column:nth-child(1) {
		grid-column: 1 !important;
		grid-row: 1 / 3 !important;
	}

	.manta-footer__grid > .wp-block-column:nth-child(2) {
		grid-column: 2 !important;
		grid-row: 1 !important;
	}

	.manta-footer__grid > .wp-block-column:nth-child(3) {
		grid-column: 2 !important;
		grid-row: 2 !important;
	}

	.manta-footer__grid > .wp-block-column:nth-child(4) {
		grid-column: 1 / -1 !important;
		grid-row: 3 !important;
	}

	.manta-article p {
		font-size: 16px;
	}

	.manta-phero__cols,
	.manta-psplit__cols,
	.manta-sizing__cols {
		flex-wrap: wrap;
	}

	.manta-phero__cols > .wp-block-column,
	.manta-psplit__cols > .wp-block-column,
	.manta-sizing__cols > .wp-block-column {
		flex-basis: 100% !important;
	}

	.manta-psplit__cols {
		flex-direction: column-reverse;
	}

	/* The diagram sits under the tables on mobile. Done with `order`, not
	   `flex-direction: column-reverse` — a column container makes the vertical
	   axis the main axis, which stops `min-width:0` from doing anything and
	   lets .manta-table's 560px minimum inflate every item, pushing the card
	   off-screen instead of letting the table scroll. Row direction + order is
	   what the design does too (.pl-measure-col{order:2}/.pl-tables-col{order:1}). */
	.manta-sizing__cols > .wp-block-column:first-child {
		order: 2;
	}

	.manta-sizing__cols > .wp-block-column:last-child {
		order: 1;
	}

	/* Every box between the flex item and the scroll container has to be
	   allowed to shrink, or the table's min-width propagates back up. */
	.manta-sizing__cols > .wp-block-column,
	.manta-measure,
	.manta-table-wrap,
	.manta-table-scroll {
		min-width: 0;
		max-width: 100%;
	}

	.manta-psplit__img img {
		aspect-ratio: 4 / 3;
		max-height: 340px;
	}

	.manta-sizing__head {
		align-items: flex-start;
	}

	/* 34px below 1024px, from the .cta-title rule in the <style> block of
	   Frontpage/Jerseys/About.dc.html. Missed on the first pass: the 46px came
	   from the inline style and the media query was never read. At 46px the
	   headline overflowed at 375px and below. */
	.manta-ctaband h2 {
		font-size: 34px;
	}

	.manta-hubgrid {
		grid-template-columns: 1fr;
	}

	.manta-steps__grid,
	.manta-steps__grid--4 {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.manta-range__row {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.manta-range__row.is-reversed .manta-range__media {
		order: 0;
	}

	.manta-range__list {
		gap: 40px;
	}

	.manta-bigstats--3,
	.manta-fgrid--3,
	.manta-fgrid--4,
	.manta-quotegrid,
	.manta-ggrid,
	.manta-teamgrid,
	.manta-rangegrid {
		grid-template-columns: 1fr 1fr;
	}

	.manta-contact-hero__title {
		font-size: 44px !important;
	}

	.manta-ct-grid {
		grid-template-columns: 1fr;
	}

	.manta-ct-heroimg {
		min-height: 240px !important;
	}

	.manta-ct-panel {
		padding: 30px 22px !important;
	}

	.manta-ct-address {
		flex-wrap: wrap;
		padding: 16px 20px !important;
	}

	.manta-404__cols {
		flex-wrap: wrap;
	}

	.manta-404__cols > .wp-block-column {
		flex-basis: 100% !important;
	}

	.manta-404__circle,
	.manta-searchhead__circle {
		width: 280px;
		height: 280px;
		top: -90px;
		right: -80px;
	}

	.manta-noresults__cols {
		flex-wrap: wrap;
	}

	.manta-noresults__cols > .wp-block-column {
		flex-basis: 100% !important;
	}

	.manta-more__cols {
		flex-wrap: wrap;
	}

	.manta-more__cols > .wp-block-column {
		flex-basis: 100% !important;
	}

	.manta-featured__cols,
	.manta-specsheet__cols,
	.manta-person,
	.manta-intent__cols,
	.manta-values__cols,
	.manta-quotes__cols {
		flex-wrap: wrap;
	}

	.manta-featured__cols > .wp-block-column,
	.manta-specsheet__cols > .wp-block-column,
	.manta-person > .wp-block-column,
	.manta-intent__cols > .wp-block-column,
	.manta-values__cols > .wp-block-column,
	.manta-quotes__cols > .wp-block-column {
		flex-basis: 100% !important;
	}

	.manta-featured__img {
		min-height: 240px;
		height: 100%;
	}

	.manta-featured__body {
		padding: 28px 24px;
	}

	/* One person on the card at the moment, so the portrait crop is dropped
	   below 1024px and the photo runs the full width of the column at 16:9. */
	.manta-person__img img {
		max-width: 100%;
		aspect-ratio: 16 / 9;
	}

	.manta-fgrid {
		grid-template-columns: 1fr 1fr;
	}

	.manta-bigstats {
		grid-template-columns: 1fr 1fr;
		gap: 32px 20px;
	}

	.manta-spec {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.manta-specsheet__table td:first-child {
		width: auto;
		white-space: normal;
	}

	.manta-specsheet__img img {
		aspect-ratio: 4 / 3;
	}

	.manta-art-wrap {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.manta-art-side {
		position: static;
		top: auto;
	}

	.manta-art-title.wp-block-post-title {
		font-size: 36px;
	}

	.manta-art-hero.wp-block-cover {
		min-height: 420px !important;
	}

	.manta-article > h2 {
		font-size: 26px;
	}

	.manta-article > p,
	.manta-article > ul,
	.manta-article > ol,
	.manta-art-summary p,
	.manta-art-summary li {
		font-size: 16.5px;
	}

	.manta-art-relgrid {
		grid-template-columns: 1fr;
	}

	.manta-art-related > h2 {
		font-size: 28px;
	}

	.manta-art-authorcard.wp-block-post-author {
		flex-wrap: wrap;
		padding: 26px 22px;
	}

	.manta-art-authorcard__linkedin {
		margin-left: 0;
	}
}

@media (max-width: 600px) {
	/* Phone-only — the two-column article grid has already stacked by 1024px,
	   but this bar stays hidden until true mobile widths so it never competes
	   with the sticky sidebar card on tablet/small-desktop windows. */
	.manta-art-stickycta {
		display: flex;
		max-width: calc(100% - 40px);
		bottom: max(20px, env(safe-area-inset-bottom, 20px));
		padding: 10px 14px;
	}

	.manta-art-stickycta__label {
		display: none;
	}

	/* Blog hero breadcrumb: stack the trail above the title on phones.

	   The desktop layout is one nowrap flex row — "Resources /" then the post
	   title, ellipsis-truncated. At phone widths there is not room for both, so
	   the two items compete: the title shrinks (min-width: 0 permits it) and
	   "Resources /" breaks internally, dropping the separator onto its own line.
	   Where that break lands depends on the title length, which is the layout
	   shift. Stacking removes the competition and lets the title show in full.

	   Selector carries .wp-block-group deliberately: WordPress emits its own
	   .wp-container-core-group-is-layout-* rule for this flex group with
	   align-items: center, and a bare .manta-art-crumb only ties it on
	   specificity. Two classes wins outright regardless of source order. */
	.wp-block-group.manta-art-crumb {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	/* Keep "Resources /" whole now that it owns a row — without this the
	   separator can still wrap away from the label on very narrow screens. */
	.manta-art-crumb > p {
		white-space: nowrap;
	}

	/* Undo the desktop ellipsis: on its own row the title has room to wrap. */
	.manta-art-crumb__current {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}


	.manta-carousel {
		aspect-ratio: 16 / 9;
	}

	.manta-fgrid {
		grid-template-columns: 1fr;
	}

	.manta-bigstats {
		grid-template-columns: 1fr;
	}

	.manta-bigstats--3,
	.manta-fgrid--3,
	.manta-fgrid--4,
	.manta-quotegrid,
	.manta-ggrid,
	.manta-teamgrid,
	.manta-rangegrid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   16. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}