/*
 * ProChem Solutions — Theme Stylesheet
 * ---------------------------------------------------------------------------
 * 01. Design tokens
 * 02. Reset & base
 * 03. Typography
 * 04. Layout primitives
 * 05. Components
 * 06. Header & navigation
 * 07. Footer
 * 08. Home / marketing sections
 * 09. Templates (archive, single, product, resources, search, 404)
 * 10. Editor / block support
 * 11. Utilities, motion & print
 * ---------------------------------------------------------------------------
 *
 * PUBLIC COMPONENT API — PLEASE READ BEFORE PRUNING
 *
 * The brief requires a reusable component system: containers, section spacing,
 * buttons, eyebrow headings, heroes, cards, icon cards, product cards, service
 * cards, industry cards, breadcrumbs, forms, accordions, FAQs, tables,
 * testimonials, statistics, CTA banners, badges, alert boxes, pagination and
 * search results. Those components — and their size/variant modifiers, their
 * `--on-dark` counterparts and the `pcs-u-*` utility scale — are part of the
 * deliverable. The site owner reaches them from block patterns, custom HTML
 * blocks and child themes, so a class carrying NO reference in this theme's
 * PHP or JS is NOT automatically dead code.
 *
 * HOW THAT IS ENFORCED — the `@public` marker
 *
 *     /* @public .pcs-badge
 *        Brief: badges. `--neutral` / `--accent` / `--dark` are the variants. *\/
 *
 * `_team/run-tests.py` (test `css-classes-dead`) reads this file and treats a
 * comment containing `@public` as declaring the BEM roots listed right after
 * it. A root `.pcs-x` covers `.pcs-x`, `.pcs-x--modifier` and `.pcs-x__element`
 * — so adding a new variant to an already-public component needs no test
 * change. A trailing `*` (`.pcs-u-*`) covers a whole prefix family.
 *
 * Consequences, on purpose:
 *   - A brand-new rule that nothing references and that is NOT under a
 *     `@public` root still FAILS the suite. Dead code is still caught.
 *   - A `@public` root with no rule left in this file is reported as a stale
 *     marker, so the markers cannot rot after a component is deleted.
 *   - To keep an orphan, mark its component `@public` here and say why.
 *     Otherwise delete the rule. There is no list to remember elsewhere.
 * ---------------------------------------------------------------------------
 */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
	/* Brand ---------------------------------------------------------------- */
	--pc-primary: #0b6bd3;
	--pc-primary-hover: #0a5cb8;
	--pc-primary-dark: #084c99;
	--pc-primary-100: #d9e8fc;
	--pc-primary-050: #eef5fe;

	--pc-navy: #0c2036;
	--pc-navy-700: #12324f;
	--pc-navy-900: #071624;

	--pc-dark: #161d25;
	--pc-accent: #d9741a;
	--pc-accent-ink: #a8530c;
	--pc-accent-soft: #f6e6d4;

	/* Neutrals ------------------------------------------------------------- */
	--pc-white: #ffffff;
	--pc-background: #ffffff;
	--pc-background-alt: #f3f6fa;
	--pc-background-alt-2: #e8eef6;
	--pc-border: #dee4ec;
	--pc-border-strong: #c4cfdc;
	--pc-text: #1a2531;
	--pc-text-muted: #566779;
	--pc-text-soft: #647082;
	--pc-on-dark: #ffffff;
	--pc-on-dark-muted: #a9bccf;
	--pc-on-dark-border: rgba(255, 255, 255, 0.14);

	/* Status --------------------------------------------------------------- */
	--pc-success: #12784f;
	--pc-success-bg: #e7f5ee;
	--pc-error: #b3261e;
	--pc-error-bg: #fdecea;
	--pc-warning: #8a5a06;
	--pc-warning-bg: #fdf3e0;

	/* Type ----------------------------------------------------------------- */
	--pc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pc-font-heading: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--pc-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--pc-text-xs: 0.8125rem;   /* 13 */
	--pc-text-sm: 0.9375rem;   /* 15 */
	--pc-text-base: 1.0625rem; /* 17 */
	--pc-text-lg: 1.1875rem;   /* 19 */
	--pc-text-xl: 1.375rem;    /* 22 */

	--pc-h1: clamp(2.25rem, 1.42rem + 2.65vw, 3.375rem);
	--pc-h2: clamp(1.875rem, 1.42rem + 1.45vw, 2.5rem);
	--pc-h3: clamp(1.375rem, 1.2rem + 0.55vw, 1.625rem);
	--pc-h4: 1.1875rem;
	--pc-display: clamp(2.5rem, 1.35rem + 3.65vw, 4.0625rem);

	--pc-leading-tight: 1.08;
	--pc-leading-snug: 1.22;
	--pc-leading-normal: 1.45;
	--pc-leading-relaxed: 1.68;

	/* Space ---------------------------------------------------------------- */
	--pc-space-1: 0.25rem;
	--pc-space-2: 0.5rem;
	--pc-space-3: 0.75rem;
	--pc-space-4: 1rem;
	--pc-space-5: 1.25rem;
	--pc-space-6: 1.5rem;
	--pc-space-7: 2rem;
	--pc-space-8: 2.5rem;
	--pc-space-9: 3rem;
	--pc-space-10: 4rem;
	--pc-space-11: 5rem;
	--pc-space-12: 6rem;

	--pc-section-y: clamp(4.25rem, 2.6rem + 5.2vw, 7.5rem);
	--pc-section-y-sm: clamp(3rem, 2rem + 3.2vw, 4.75rem);

	/* Structure ------------------------------------------------------------ */
	--pc-container: 1240px;
	--pc-container-wide: 1440px;
	--pc-container-narrow: 780px;
	--pc-gutter: clamp(1.25rem, 0.85rem + 1.6vw, 2.5rem);
	--pc-header-h: 84px;

	--pc-radius-sm: 3px;
	--pc-radius-md: 5px;
	--pc-radius-lg: 8px;
	--pc-radius-xl: 12px;
	--pc-radius-pill: 999px;

	--pc-shadow-xs: 0 1px 2px rgba(12, 32, 54, 0.06);
	--pc-shadow-sm: 0 1px 2px rgba(12, 32, 54, 0.06), 0 2px 6px rgba(12, 32, 54, 0.05);
	--pc-shadow-md: 0 2px 4px rgba(12, 32, 54, 0.05), 0 14px 30px -14px rgba(12, 32, 54, 0.24);
	--pc-shadow-lg: 0 4px 10px rgba(12, 32, 54, 0.06), 0 32px 64px -28px rgba(12, 32, 54, 0.34);
	--pc-ring: 0 0 0 3px rgba(11, 107, 211, 0.32);

	/* Motion --------------------------------------------------------------- */
	--pc-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--pc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--pc-dur: 240ms;
	--pc-dur-fast: 150ms;

	--pc-z-header: 100;
	--pc-z-drawer: 200;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pc-header-h) + 1.5rem);
}

body {
	margin: 0;
	background-color: var(--pc-background);
	color: var(--pc-text);
	font-family: var(--pc-font-body);
	font-size: var(--pc-text-base);
	line-height: var(--pc-leading-relaxed);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
	border-style: none;
}

svg {
	fill: currentColor;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

hr {
	border: 0;
	border-top: 1px solid var(--pc-border);
	margin: var(--pc-space-8) 0;
}

::selection {
	background-color: var(--pc-primary);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--pc-primary);
	outline-offset: 2px;
	border-radius: var(--pc-radius-sm);
}

[data-theme="dark"] :focus-visible {
	outline-color: #7ab6ff;
}

/* Skip link ------------------------------------------------------------- */
.pcs-skip-link {
	position: absolute;
	top: -100px;
	left: var(--pc-space-4);
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--pc-navy);
	color: #fff;
	font-size: var(--pc-text-sm);
	font-weight: 600;
	border-radius: 0 0 var(--pc-radius-md) var(--pc-radius-md);
	text-decoration: none;
	transition: top var(--pc-dur-fast) var(--pc-ease);
}

.pcs-skip-link:focus {
	top: 0;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	color: var(--pc-navy);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */

/* Dark sections re-point the heading/muted tokens instead of restating colours. */
.pcs-hero,
.pcs-process,
.pcs-cta,
.pcs-section--navy,
.pcs-widget--cta,
.pcs-mega__feature,
.pcs-page-head:not(.pcs-page-head--light) {
	--pcs-heading: #ffffff;
	--pcs-body: #b7cadb;
	--pcs-muted: #a9bccf;
	--pcs-rule: rgba(255, 255, 255, 0.14);
	--pcs-accent-link: #8fc0f5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	font-family: var(--pc-font-heading);
	font-weight: 800;
	color: var(--pcs-heading, var(--pc-navy));
	line-height: var(--pc-leading-snug);
	letter-spacing: -0.021em;
	text-wrap: balance;
}

h1 {
	font-size: var(--pc-h1);
	line-height: var(--pc-leading-tight);
	letter-spacing: -0.03em;
}

h2 {
	font-size: var(--pc-h2);
	line-height: 1.14;
	letter-spacing: -0.028em;
}

h3 {
	font-size: var(--pc-h3);
	letter-spacing: -0.019em;
}

h4 {
	font-size: var(--pc-h4);
	font-weight: 700;
	letter-spacing: -0.012em;
}

h5 {
	font-size: var(--pc-text-base);
	font-weight: 700;
	letter-spacing: -0.008em;
}

h6 {
	font-size: var(--pc-text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pcs-muted, var(--pc-text-muted));
	font-family: var(--pc-font-mono);
}

p {
	margin: 0 0 1.15em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--pc-primary-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--pc-dur-fast) var(--pc-ease);
}

a:hover {
	color: var(--pc-primary);
}

strong,
b {
	font-weight: 700;
	color: var(--pcs-heading, var(--pc-navy));
}

small {
	font-size: var(--pc-text-sm);
}

ul,
ol {
	margin: 0 0 1.15em;
	padding-left: 1.35em;
}

li {
	margin-bottom: 0.45em;
}

li:last-child {
	margin-bottom: 0;
}

blockquote {
	margin: var(--pc-space-8) 0;
	padding: var(--pc-space-6) var(--pc-space-8);
	border-left: 3px solid var(--pc-primary);
	background: var(--pc-background-alt);
	font-size: var(--pc-text-lg);
	line-height: 1.55;
	color: var(--pc-navy);
	font-weight: 500;
}

blockquote cite,
blockquote .wp-block-quote__citation {
	display: block;
	margin-top: var(--pc-space-4);
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-text-muted);
}

code,
kbd,
pre,
samp {
	font-family: var(--pc-font-mono);
	font-size: 0.9em;
}

code {
	background: var(--pc-background-alt);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-sm);
	padding: 0.12em 0.4em;
}

pre {
	background: var(--pc-navy);
	color: #dbe7f3;
	padding: var(--pc-space-6);
	border-radius: var(--pc-radius-md);
	overflow-x: auto;
	font-size: var(--pc-text-sm);
	line-height: 1.6;
}

pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
}

figure {
	margin: var(--pc-space-8) 0;
}

figcaption {
	margin-top: var(--pc-space-3);
	font-size: var(--pc-text-sm);
	color: var(--pc-text-muted);
	line-height: 1.5;
}

/* Lead & measure --------------------------------------------------------- */
.pcs-lead {
	font-size: clamp(1.0625rem, 1rem + 0.32vw, 1.25rem);
	line-height: 1.6;
	color: var(--pcs-body, var(--pc-text-muted));
	max-width: 62ch;
}

/* @public .pcs-measure .pcs-measure-narrow
   Reading-measure pair; the narrow step is for asides, captions and notes. */
.pcs-measure {
	max-width: 68ch;
}

.pcs-measure-narrow {
	max-width: 54ch;
}

/* Eyebrow ---------------------------------------------------------------- */
/* @public .pcs-eyebrow
   Brief: eyebrow headings. `--on-dark` / `--plain` are the variant set. */
.pcs-eyebrow {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0 0 var(--pc-space-5);
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pc-primary-dark);
	line-height: 1;
}

.pcs-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	margin-top: 0.42em;
	background: var(--pc-accent);
	flex: none;
}

@media (max-width: 560px) {
	.pcs-eyebrow {
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
		gap: 0.55rem;
	}

	.pcs-eyebrow::before {
		width: 20px;
	}
}

.pcs-eyebrow--on-dark {
	color: #8fc0f5;
}

.pcs-eyebrow--plain::before {
	display: none;
}

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */
/* @public .pcs-container .pcs-section .pcs-grid .pcs-media .pcs-rule
   Layout primitives: containers (`--wide` / `--narrow`), section spacing,
   grids, media frames and rules. Reachable from block patterns and custom HTML. */

.pcs-container {
	width: 100%;
	max-width: calc(var(--pc-container) + (var(--pc-gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

.pcs-container--wide {
	max-width: calc(var(--pc-container-wide) + (var(--pc-gutter) * 2));
}

.pcs-container--narrow {
	max-width: calc(var(--pc-container-narrow) + (var(--pc-gutter) * 2));
}

/* @public .pcs-section
   Brief: section spacing. `--navy` also feeds the dark-token group near the
   top of section 02 — delete one and you must update both. */
.pcs-section {
	padding-block: var(--pc-section-y);
	position: relative;
}

.pcs-section--sm {
	padding-block: var(--pc-section-y-sm);
}

.pcs-section--flush-top {
	padding-top: 0;
}

.pcs-section--flush-bottom {
	padding-bottom: 0;
}

.pcs-section--alt {
	background-color: var(--pc-background-alt);
}

.pcs-section--bordered {
	border-top: 1px solid var(--pc-border);
}

.pcs-section--navy {
	background-color: var(--pc-navy);
	color: var(--pc-on-dark-muted);
}

/* Section heading block --------------------------------------------------- */
.pcs-section-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-space-6);
	margin-bottom: var(--pc-space-9);
	align-items: end;
}

@media (min-width: 900px) {
	.pcs-section-head--split {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: var(--pc-space-10);
	}

	.pcs-section-head--split .pcs-section-head__aside {
		padding-bottom: 0.35rem;
	}
}

.pcs-section-head__title {
	margin-bottom: 0;
	max-width: 19ch;
}

.pcs-section-head__title--wide {
	max-width: 26ch;
}

.pcs-section-head__aside p {
	color: var(--pcs-muted, var(--pc-text-muted));
	font-size: var(--pc-text-base);
	max-width: 48ch;
}

/* Rules ------------------------------------------------------------------ */
/* @public .pcs-rule
   Margin-free divider primitive; `hr` keeps its own margins. */
.pcs-rule {
	height: 1px;
	background: var(--pc-border);
	border: 0;
	margin: 0;
}

.pcs-rule--dark {
	background: var(--pc-on-dark-border);
}

/* Grids ------------------------------------------------------------------ */
/* @public .pcs-grid
   `--2` / `--3` / `--4` are one column-count scale; ship the whole scale. */
.pcs-grid {
	display: grid;
	gap: var(--pc-space-6);
}

.pcs-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.pcs-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.pcs-grid--4 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

/* Media ------------------------------------------------------------------ */
/* @public .pcs-media
   The ratio modifiers ARE this component's API: `.pcs-media` has no intrinsic
   height without one. */
.pcs-media {
	position: relative;
	overflow: hidden;
	background: var(--pc-background-alt-2);
	border-radius: var(--pc-radius-md);
}

.pcs-media > img,
.pcs-media > svg,
.pcs-media > picture > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pcs-media--16x9 { aspect-ratio: 16 / 9; }
.pcs-media--4x3  { aspect-ratio: 4 / 3; }
.pcs-media--3x2  { aspect-ratio: 3 / 2; }
.pcs-media--1x1  { aspect-ratio: 1 / 1; }
.pcs-media--4x5  { aspect-ratio: 4 / 5; }
.pcs-media--3x4  { aspect-ratio: 3 / 4; }

/* ==========================================================================
   05. COMPONENTS
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */
.pcs-btn,
.wp-block-button__link {
	--btn-bg: var(--pc-primary);
	--btn-fg: #fff;
	--btn-border: var(--pc-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.9rem 1.5rem;
	background-color: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-border);
	border-radius: var(--pc-radius-md);
	font-family: var(--pc-font-body);
	font-size: var(--pc-text-sm);
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--pc-dur-fast) var(--pc-ease),
		border-color var(--pc-dur-fast) var(--pc-ease),
		color var(--pc-dur-fast) var(--pc-ease),
		transform var(--pc-dur-fast) var(--pc-ease),
		box-shadow var(--pc-dur-fast) var(--pc-ease);
	white-space: nowrap;
	max-width: 100%;
}

/*
 * Long labels must wrap rather than push the layout wide on small screens.
 * Buttons keep `nowrap` on larger viewports where there is room for them.
 */
@media (max-width: 540px) {
	.pcs-btn,
	.wp-block-button__link {
		white-space: normal;
		text-align: center;
	}
}

.pcs-btn:hover,
.wp-block-button__link:hover {
	--btn-bg: var(--pc-primary-hover);
	--btn-border: var(--pc-primary-hover);
	color: #fff;
	box-shadow: 0 6px 18px -8px rgba(11, 107, 211, 0.7);
	transform: translateY(-1px);
}

.pcs-btn:active,
.wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: none;
}

.pcs-btn .pcs-icon {
	flex: none;
	transition: transform var(--pc-dur) var(--pc-ease);
}

.pcs-btn:hover .pcs-icon--arrow {
	transform: translateX(3px);
}

.pcs-btn--secondary {
	--btn-bg: transparent;
	--btn-fg: var(--pc-navy);
	--btn-border: var(--pc-border-strong);
}

.pcs-btn--secondary:hover {
	--btn-bg: var(--pc-navy);
	--btn-border: var(--pc-navy);
	color: #fff;
	box-shadow: 0 6px 18px -10px rgba(12, 32, 54, 0.8);
}

.pcs-btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--pc-primary-dark);
	--btn-border: transparent;
	padding-inline: 0.25rem;
}

.pcs-btn--ghost:hover {
	--btn-bg: transparent;
	--btn-border: transparent;
	color: var(--pc-primary);
	box-shadow: none;
	transform: none;
}

.pcs-btn--on-dark {
	--btn-bg: transparent;
	--btn-fg: #fff;
	--btn-border: rgba(255, 255, 255, 0.32);
}

.pcs-btn--on-dark:hover {
	--btn-bg: #fff;
	--btn-border: #fff;
	color: var(--pc-navy);
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.6);
}

.pcs-btn--white {
	--btn-bg: #fff;
	--btn-fg: var(--pc-navy);
	--btn-border: #fff;
}

.pcs-btn--white:hover {
	--btn-bg: var(--pc-primary-050);
	--btn-border: var(--pc-primary-050);
	color: var(--pc-navy);
}

.pcs-btn--lg {
	padding: 1.05rem 1.85rem;
	font-size: var(--pc-text-base);
}

.pcs-btn--sm {
	padding: 0.6rem 1rem;
	font-size: var(--pc-text-xs);
}

.pcs-btn--block {
	width: 100%;
}

.pcs-btn[disabled],
.pcs-btn[aria-disabled="true"] {
	opacity: 0.55;
	pointer-events: none;
}

.pcs-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-3);
	align-items: center;
}

/* Text link with arrow ---------------------------------------------------- */
.pcs-link-arrow {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	gap: 0.45rem;
	font-size: var(--pc-text-sm);
	font-weight: 600;
	color: var(--pc-primary-dark);
	text-decoration: none;
	line-height: 1.2;
}

.pcs-link-arrow .pcs-icon {
	transition: transform var(--pc-dur) var(--pc-ease);
	flex: none;
}

.pcs-link-arrow:hover .pcs-icon {
	transform: translateX(3px);
}

.pcs-link-arrow--on-dark {
	color: #8fc0f5;
}

.pcs-link-arrow--on-dark:hover {
	color: #fff;
}

/* --- Icons -------------------------------------------------------------- */
/* @public .pcs-icon
   `--sm` / `--xl` are the icon size scale. */
.pcs-icon {
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pcs-icon--sm { width: 16px; height: 16px; }
.pcs-icon--lg { width: 26px; height: 26px; stroke-width: 1.5; }
.pcs-icon--xl { width: 32px; height: 32px; stroke-width: 1.4; }

/* @public .pcs-icon-tile
   Brief: icon cards. `--dark` is the dark-surface variant. */
.pcs-icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	flex: none;
	color: var(--pc-primary);
	background: var(--pc-primary-050);
	border: 1px solid var(--pc-primary-100);
	border-radius: var(--pc-radius-md);
	transition: background-color var(--pc-dur) var(--pc-ease), color var(--pc-dur) var(--pc-ease),
		border-color var(--pc-dur) var(--pc-ease);
}

.pcs-icon-tile--dark {
	color: #8fc0f5;
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--pc-on-dark-border);
}

/* --- Badges ------------------------------------------------------------- */
/* @public .pcs-badge
   Brief: badges. `--neutral` / `--accent` / `--dark` are the full variant set. */
.pcs-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.6rem;
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--pc-primary-dark);
	background: var(--pc-primary-050);
	border: 1px solid var(--pc-primary-100);
	border-radius: var(--pc-radius-sm);
	white-space: nowrap;
}

.pcs-badge--neutral {
	color: var(--pc-text-muted);
	background: var(--pc-background-alt);
	border-color: var(--pc-border);
}

.pcs-badge--accent {
	color: #8a4a0d;
	background: #fdf3e7;
	border-color: #f0dcc4;
}

.pcs-badge--dark {
	color: #cfe1f3;
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--pc-on-dark-border);
}

/* --- Cards -------------------------------------------------------------- */
.pcs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--pc-white);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	transition: border-color var(--pc-dur) var(--pc-ease), box-shadow var(--pc-dur) var(--pc-ease),
		transform var(--pc-dur) var(--pc-ease);
}

.pcs-card--interactive:hover {
	border-color: var(--pc-border-strong);
	box-shadow: var(--pc-shadow-md);
	transform: translateY(-3px);
}

.pcs-card__body {
	padding: var(--pc-space-6);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--pc-space-3);
}

.pcs-card__title {
	font-size: var(--pc-h4);
	margin: 0;
}

.pcs-card__title a {
	color: inherit;
	text-decoration: none;
}

.pcs-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.pcs-card__text {
	color: var(--pc-text-muted);
	font-size: var(--pc-text-sm);
	line-height: 1.6;
	margin: 0;
}

.pcs-card__foot {
	margin-top: auto;
	padding-top: var(--pc-space-4);
}

.pcs-card__meta {
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
}

/* --- Stats -------------------------------------------------------------- */
/* @public .pcs-stats .pcs-stat
   Brief: statistics. `.pcs-stat` is the BEM root the "Statistics row" block
   pattern emits; layout comes from `.pcs-stats`. `--on-dark` pairs with dark
   sections. */
.pcs-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	gap: var(--pc-space-6) var(--pc-space-8);
}

.pcs-stat__value {
	display: block;
	font-family: var(--pc-font-heading);
	font-size: clamp(2rem, 1.6rem + 1.3vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--pc-navy);
}

.pcs-stat__label {
	display: block;
	margin-top: var(--pc-space-3);
	padding-top: var(--pc-space-3);
	border-top: 2px solid var(--pc-accent);
	font-size: var(--pc-text-sm);
	line-height: 1.4;
	color: var(--pc-text-muted);
	max-width: 22ch;
}

.pcs-stat--on-dark .pcs-stat__value {
	color: #fff;
}

.pcs-stat--on-dark .pcs-stat__label {
	color: var(--pc-on-dark-muted);
}

/* --- Checklist ---------------------------------------------------------- */
/* @public .pcs-checklist
   `--on-dark` is the standard dark-surface counterpart. */
.pcs-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--pc-space-3);
}

.pcs-checklist--2col {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--pc-space-3) var(--pc-space-6);
}

.pcs-checklist li {
	position: relative;
	margin: 0;
	padding-left: 1.85rem;
	font-size: var(--pc-text-sm);
	line-height: 1.5;
	color: var(--pc-text);
}

.pcs-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 18px;
	height: 18px;
	border-radius: var(--pc-radius-sm);
	background-color: var(--pc-primary-050);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6bd3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 12px;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid var(--pc-primary-100);
}

.pcs-checklist--on-dark li {
	color: #cfdced;
}

.pcs-checklist--on-dark li::before {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: var(--pc-on-dark-border);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fc0f5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* --- Breadcrumbs -------------------------------------------------------- */
.pcs-breadcrumbs {
	font-size: var(--pc-text-xs);
	font-family: var(--pc-font-mono);
	letter-spacing: 0.05em;
	color: var(--pc-text-soft);
}

.pcs-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.pcs-breadcrumbs li {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pcs-breadcrumbs li + li::before {
	content: "/";
	color: var(--pc-border-strong);
}

.pcs-breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--pc-text-muted);
	text-decoration: none;
}

.pcs-breadcrumbs a:hover {
	color: var(--pc-primary);
	text-decoration: underline;
}

.pcs-breadcrumbs [aria-current="page"] {
	color: var(--pc-navy);
	font-weight: 500;
}

.pcs-breadcrumbs--on-dark a {
	color: #a9bccf;
}

.pcs-breadcrumbs--on-dark {
	color: #7f97ac;
}

.pcs-breadcrumbs--on-dark [aria-current="page"] {
	color: #fff;
}

.pcs-breadcrumbs--on-dark li + li::before {
	color: rgba(255, 255, 255, 0.28);
}

/* --- Forms -------------------------------------------------------------- */
/* @public .pcs-form .pcs-checkbox .pcs-radio
   Brief: forms. `.pcs-radio` mirrors `.pcs-checkbox` and completes the form
   control set. */
.pcs-form {
	display: grid;
	gap: var(--pc-space-5);
}

.pcs-form-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--pc-space-5);
}

.pcs-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	min-width: 0;
}

.pcs-form-grid > .pcs-field {
	grid-column: span 12;
}

@media (min-width: 720px) {
	.pcs-form-grid > .pcs-field--half { grid-column: span 6; }
	.pcs-form-grid > .pcs-field--third { grid-column: span 4; }
	.pcs-form-grid > .pcs-field--two-thirds { grid-column: span 8; }
	.pcs-form-grid > .pcs-field--quarter { grid-column: span 3; }
}

.pcs-label,
.pcs-form label {
	font-size: var(--pc-text-sm);
	font-weight: 600;
	color: var(--pc-navy);
	line-height: 1.3;
}

.pcs-label .pcs-required {
	color: var(--pc-error);
	margin-left: 0.15rem;
}

.pcs-help {
	font-size: var(--pc-text-xs);
	color: var(--pc-text-soft);
	line-height: 1.45;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	background-color: var(--pc-white);
	border: 1px solid var(--pc-border-strong);
	border-radius: var(--pc-radius-md);
	font-size: var(--pc-text-sm);
	line-height: 1.45;
	color: var(--pc-text);
	transition: border-color var(--pc-dur-fast) var(--pc-ease), box-shadow var(--pc-dur-fast) var(--pc-ease);
	-webkit-appearance: none;
	appearance: none;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566779' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px;
	padding-right: 2.4rem;
}

input::placeholder,
textarea::placeholder {
	color: var(--pc-text-soft);
	opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--pc-primary);
	box-shadow: var(--pc-ring);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
	border-color: var(--pc-error);
}

input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.24);
}

.pcs-field__error {
	font-size: var(--pc-text-xs);
	font-weight: 600;
	color: var(--pc-error);
}

.pcs-checkbox,
.pcs-radio {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--pc-text-sm);
	font-weight: 400;
	color: var(--pc-text);
	line-height: 1.45;
	cursor: pointer;
}

.pcs-checkbox input,
.pcs-radio input {
	margin: 0.2em 0 0;
	width: 17px;
	height: 17px;
	flex: none;
	accent-color: var(--pc-primary);
}

.pcs-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Search field ----------------------------------------------------------- */
.pcs-search {
	display: flex;
	gap: var(--pc-space-2);
	position: relative;
}

.pcs-search__input-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
}

.pcs-search__icon {
	position: absolute;
	left: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--pc-text-soft);
	pointer-events: none;
}

.pcs-search input[type="search"] {
	padding-left: 2.6rem;
}

/* --- Alerts / notices --------------------------------------------------- */
.pcs-alert {
	display: flex;
	gap: var(--pc-space-4);
	padding: var(--pc-space-5) var(--pc-space-6);
	border: 1px solid var(--pc-border);
	border-left: 3px solid var(--pc-text-muted);
	border-radius: var(--pc-radius-md);
	background: var(--pc-background-alt);
	font-size: var(--pc-text-sm);
	line-height: 1.55;
	color: var(--pc-text);
}

/*
 * display:flex above beats the user-agent [hidden] { display: none } rule, so
 * the instant filter's "Nothing on this page matches" alert stayed on screen
 * even while its hidden attribute was set. Same fix as .pcs-doc-row[hidden].
 */
.pcs-alert[hidden] {
	display: none;
}

.pcs-alert__icon {
	flex: none;
	margin-top: 0.1em;
}

.pcs-alert__title {
	font-family: var(--pc-font-heading);
	font-weight: 700;
	color: var(--pc-navy);
	margin: 0 0 0.25rem;
	font-size: var(--pc-text-base);
}

.pcs-alert--success {
	background: var(--pc-success-bg);
	border-color: #bfe0d0;
	border-left-color: var(--pc-success);
	color: #14503a;
}

.pcs-alert--success .pcs-alert__title { color: #0f4632; }

.pcs-alert--error {
	background: var(--pc-error-bg);
	border-color: #f3ccc9;
	border-left-color: var(--pc-error);
	color: #7d1c17;
}

.pcs-alert--error .pcs-alert__title { color: #7d1c17; }

.pcs-alert--info {
	background: var(--pc-primary-050);
	border-color: var(--pc-primary-100);
	border-left-color: var(--pc-primary);
	color: #0b3b6b;
}

.pcs-alert--info .pcs-alert__title { color: var(--pc-primary-dark); }

/* --- Tables ------------------------------------------------------------- */
/* @public .pcs-table .pcs-table-wrap
   Brief: tables. `.pcs-table-wrap` is the required scroll shell for wide
   tables; `.pcs-table--hover` is the opt-in row highlight. */
.pcs-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	background: var(--pc-white);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--pc-text-sm);
}

.pcs-table th,
.pcs-table td,
.wp-block-table th,
.wp-block-table td {
	padding: 0.85rem 1.1rem;
	text-align: left;
	border-bottom: 1px solid var(--pc-border);
	vertical-align: top;
}

.pcs-table thead th,
.wp-block-table thead th {
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pc-text-muted);
	background: var(--pc-background-alt);
	border-bottom: 1px solid var(--pc-border-strong);
	white-space: nowrap;
}

.pcs-table tbody tr:last-child td,
.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

.pcs-table tbody tr {
	transition: background-color var(--pc-dur-fast) var(--pc-ease);
}

.pcs-table--hover tbody tr:hover {
	background: var(--pc-primary-050);
}

.pcs-table th[scope="row"] {
	font-weight: 600;
	color: var(--pc-navy);
}

/* Spec table (product details) ------------------------------------------- */
.pcs-spec-table {
	width: 100%;
	border-collapse: collapse;
}

.pcs-spec-table th,
.pcs-spec-table td {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--pc-border);
	text-align: left;
	font-size: var(--pc-text-sm);
	vertical-align: top;
}

.pcs-spec-table th {
	width: 42%;
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pc-text-muted);
	padding-right: var(--pc-space-4);
}

.pcs-spec-table td {
	color: var(--pc-navy);
	font-weight: 500;
}

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

/* --- Accordion / FAQ ---------------------------------------------------- */
/* The theme's accordion is the core `<details>` block — see the
   `.wp-block-details` rules in section 10. The `.pcs-accordion*` and
   `.pcs-tabs__*` rules that used to sit here were driven by
   `[data-pcs-accordion]` / `[data-pcs-tabs]` in assets/js/theme.js; wave 2
   removed both scripts, and no template emits either hook. */

/* --- Pagination --------------------------------------------------------- */
.pcs-pagination {
	margin-top: var(--pc-space-10);
	padding-top: var(--pc-space-7);
	border-top: 1px solid var(--pc-border);
}

.pcs-pagination .nav-links,
.pcs-pagination .page-numbers-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-2);
	align-items: center;
	justify-content: center;
}

.pcs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.7rem;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	font-size: var(--pc-text-sm);
	font-weight: 600;
	color: var(--pc-text-muted);
	text-decoration: none;
	background: var(--pc-white);
	transition: all var(--pc-dur-fast) var(--pc-ease);
}

.pcs-pagination .page-numbers:hover {
	border-color: var(--pc-primary);
	color: var(--pc-primary);
}

.pcs-pagination .page-numbers.current {
	background: var(--pc-navy);
	border-color: var(--pc-navy);
	color: #fff;
}

.pcs-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* --- Testimonial -------------------------------------------------------- */
.pcs-testimonial {
	display: grid;
	gap: var(--pc-space-6);
}

.pcs-testimonial__quote {
	font-family: var(--pc-font-heading);
	font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem);
	font-weight: 700;
	line-height: 1.38;
	letter-spacing: -0.02em;
	color: var(--pc-navy);
	margin: 0;
	max-width: 34ch;
}

.pcs-testimonial__attr {
	display: flex;
	align-items: center;
	gap: var(--pc-space-4);
	padding-top: var(--pc-space-5);
	border-top: 1px solid var(--pc-border);
}

.pcs-testimonial__name {
	font-weight: 700;
	font-size: var(--pc-text-sm);
	color: var(--pc-navy);
	display: block;
}

.pcs-testimonial__role {
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
	display: block;
	margin-top: 0.15rem;
}

/* ==========================================================================
   06. HEADER & NAVIGATION
   ========================================================================== */

.pcs-header {
	position: sticky;
	top: 0;
	z-index: var(--pc-z-header);
	background: var(--pc-white);
	border-bottom: 1px solid var(--pc-border);
	transition: box-shadow var(--pc-dur) var(--pc-ease), border-color var(--pc-dur) var(--pc-ease);
}

.pcs-header.is-scrolled {
	box-shadow: 0 1px 0 rgba(12, 32, 54, 0.06), 0 10px 30px -18px rgba(12, 32, 54, 0.45);
	border-bottom-color: transparent;
}

/* Utility bar ------------------------------------------------------------ */
.pcs-header__utility {
	background: var(--pc-navy);
	color: #b9cbdc;
	font-size: var(--pc-text-xs);
	line-height: 1;
	height: 40px;
	overflow: hidden;
	transition: height var(--pc-dur) var(--pc-ease), opacity var(--pc-dur-fast) var(--pc-ease);
}

.pcs-header.is-scrolled .pcs-header__utility {
	height: 0;
	opacity: 0;
}

.pcs-header__utility-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-6);
	height: 40px;
}

.pcs-header__utility-note {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--pc-font-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.6875rem;
	color: #91a8bd;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pcs-header__utility-note .pcs-icon {
	color: #8fc0f5;
	flex: none;
}

.pcs-header__utility-links {
	display: flex;
	align-items: center;
	gap: var(--pc-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pcs-header__utility-links li {
	margin: 0;
}

.pcs-header__utility-links a {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	gap: 0.45rem;
	color: #cfdced;
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
	transition: color var(--pc-dur-fast) var(--pc-ease);
}

.pcs-header__utility-links a:hover {
	color: #fff;
}

.pcs-header__utility-links .pcs-icon {
	color: #8fc0f5;
	width: 15px;
	height: 15px;
}

@media (max-width: 899px) {
	.pcs-header__utility {
		display: none;
	}
}

/* Main bar --------------------------------------------------------------- */
/* `min-height`, not `height`. The brand and the actions cluster are both
   `flex: none`, so the nav is the only item that can absorb a deficit; when a
   long menu label makes its list wrap to a second row the bar has to grow
   instead of spilling over the sticky header. At the shipped label lengths
   nothing wraps and the bar resolves to exactly `--pc-header-h`. */
.pcs-header__bar {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-6);
	min-height: var(--pc-header-h);
	padding-block: 0.5rem;
	transition: min-height var(--pc-dur) var(--pc-ease);
}

.pcs-header.is-scrolled .pcs-header__bar {
	min-height: 70px;
}

@media (max-width: 899px) {
	.pcs-header__bar,
	.pcs-header.is-scrolled .pcs-header__bar {
		min-height: 68px;
	}
}

/* Brand ------------------------------------------------------------------ */
.pcs-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: var(--pc-navy);
	flex: none;
}

.pcs-brand .custom-logo {
	height: 44px;
	width: auto;
	object-fit: contain;
}

@media (max-width: 480px) {
	.pcs-brand .custom-logo {
		height: 36px;
	}
}

/* Brand lockup ----------------------------------------------------------- */
/* The mark is a conical flask on a square 48-unit viewBox: a heavy navy
   outline (stroked, so `currentColor` recolours the whole vessel in one go),
   cyan liquid with a wavy surface, and two bubbles. `--pc-logo-liquid` is the
   supplied brand cyan and is deliberately scoped to the lockup rather than
   promoted to a :root token — it belongs to the logo, not to the palette, and
   the palette's contrast pairs were verified against the existing values.
   The liquid is painted before the outline so the stroke, which straddles the
   triangle's edge, covers the fill's boundary at every size. */
.pcs-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.pcs-logo__mark {
	--pc-logo-liquid: #5bc2e7;
	height: 42px;
	width: auto;
	flex: none;
	color: var(--pc-navy);
	transition: height var(--pc-dur) var(--pc-ease);
}

.pcs-logo__outline {
	stroke: currentColor;
}

.pcs-logo__liquid,
.pcs-logo__bubble {
	fill: var(--pc-logo-liquid);
}

.pcs-brand--light .pcs-logo__mark {
	/* Lifted a step on the dark footer so the cyan keeps its separation from
	   the pure-white outline instead of reading as a grey wash. */
	--pc-logo-liquid: #7ad2f2;
	color: #ffffff;
}

.pcs-header.is-scrolled .pcs-logo__mark {
	height: 36px;
}

.pcs-logo__word {
	font-family: var(--pc-font-heading);
	font-weight: 800;
	font-size: 1.24rem;
	letter-spacing: -0.022em;
	line-height: 1;
	white-space: nowrap;
	color: var(--pc-navy);
}

.pcs-brand--light .pcs-logo__word {
	color: #fff;
}

@media (max-width: 479px) {
	.pcs-logo__mark { height: 34px; }
	.pcs-logo__word { font-size: 0.95rem; }
}

/* Below 375px — the narrowest viewport any current phone reports — the header
   bar cannot seat the one-line wordmark beside the call and menu buttons
   without shoving them past the viewport edge, and the wordmark is a single
   line by definition: it must not be stacked or shrunk to an unreadable size.
   The bar therefore falls back to the symbol-only lockup, which is the
   reduction a brand mark is designed for. The text is clipped rather than
   removed so the link keeps its accessible name, and the drawer and footer —
   both of which have the room — keep the full lockup. The threshold clears a
   classic 15px scrollbar at 375px, so a narrow desktop window behaves too. */
@media (max-width: 374px) {
	.pcs-header__bar .pcs-logo__word {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.pcs-header__bar .pcs-logo {
		gap: 0;
	}
}

/* Primary navigation ------------------------------------------------------ */
/* The nav is the bar's only shrinkable item — `min-width: 0` defeats the
   automatic minimum size so it can never push the actions cluster (and with it
   the CTA) past the viewport edge, whatever the site owner names a menu item.
   The list absorbs the deficit in three graded stages: the `clamp()`ed gap and
   link padding below tighten first, then the list wraps to a second row, then
   an over-long single word breaks inside its own link. */
.pcs-nav {
	display: none;
	margin-left: auto;
	/* The shipped menu is ~18px wider than the slot flexbox gives it and has
	   always rendered by spilling into the empty run before the actions. The
	   negative margin makes that allowance explicit — the nav may grow up to
	   the actions cluster before it wraps — so the fix below changes nothing at
	   the shipped label lengths. It does not move the actions: their position
	   is computed from the nav's outer size, which is unchanged. */
	margin-right: calc(-1 * (var(--pc-space-6) + var(--pc-space-4)));
	flex: 0 1 auto;
	min-width: 0;
}

@media (min-width: 1080px) {
	.pcs-nav {
		display: block;
	}
}

.pcs-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Column gap eases from 0.35rem at 1400px to 0.2rem at 1080px — enough, with
	   the link padding below, for the shipped menu to clear the container on a
	   1080-wide window without wrapping. Above 1400px it is the shipped value. */
	gap: 0.15rem clamp(0.2rem, -0.306rem + 0.75vw, 0.35rem);
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.pcs-nav__list > li {
	margin: 0;
	position: relative;
	max-width: 100%;
}

.pcs-nav__list > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.65rem clamp(0.6rem, -0.244rem + 1.25vw, 0.85rem);
	font-size: var(--pc-text-sm);
	font-weight: 600;
	color: var(--pc-navy);
	text-decoration: none;
	border-radius: var(--pc-radius-sm);
	/* Wraps only under pressure: a label with room renders on one line exactly
	   as before. `anywhere` also lets an unbroken 70-character label break
	   rather than overflow the bar. */
	white-space: normal;
	overflow-wrap: anywhere;
	transition: color var(--pc-dur-fast) var(--pc-ease);
}

.pcs-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: clamp(0.6rem, -0.244rem + 1.25vw, 0.85rem);
	right: clamp(0.6rem, -0.244rem + 1.25vw, 0.85rem);
	bottom: 0.28rem;
	height: 2px;
	background: var(--pc-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--pc-dur) var(--pc-ease);
}

.pcs-nav__list > li:hover > a::after,
.pcs-nav__list > li:focus-within > a::after,
.pcs-nav__list > li.current-menu-item > a::after,
.pcs-nav__list > li.current-menu-ancestor > a::after,
.pcs-nav__list > li.current_page_item > a::after {
	transform: scaleX(1);
}

.pcs-nav__list > li:hover > a,
.pcs-nav__list > li > a:focus-visible,
.pcs-nav__list > li.current-menu-item > a {
	color: var(--pc-primary-dark);
}

.pcs-nav__caret {
	width: 14px;
	height: 14px;
	stroke-width: 2;
	color: var(--pc-text-soft);
	transition: transform var(--pc-dur) var(--pc-ease);
}

.pcs-nav__list > li:hover .pcs-nav__caret,
.pcs-nav__list > li:focus-within .pcs-nav__caret {
	transform: rotate(180deg);
	color: var(--pc-primary);
}

/* Dropdown / mega menu ---------------------------------------------------- */
.pcs-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 260px;
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	background: var(--pc-white);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	box-shadow: var(--pc-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--pc-dur-fast) var(--pc-ease), transform var(--pc-dur) var(--pc-ease),
		visibility var(--pc-dur);
	z-index: 20;
}

.pcs-nav__list > li:hover > .pcs-submenu,
.pcs-nav__list > li:focus-within > .pcs-submenu,
.pcs-submenu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pcs-submenu li {
	margin: 0;
}

.pcs-submenu a {
	display: block;
	padding: 0.6rem 0.75rem;
	font-size: var(--pc-text-sm);
	font-weight: 500;
	color: var(--pc-text);
	text-decoration: none;
	border-radius: var(--pc-radius-sm);
	transition: background-color var(--pc-dur-fast) var(--pc-ease), color var(--pc-dur-fast) var(--pc-ease);
}

.pcs-submenu a:hover {
	background: var(--pc-background-alt);
	color: var(--pc-primary-dark);
}

/* Mega menu --------------------------------------------------------------- */
.pcs-mega {
	position: absolute;
	top: calc(100% - 1px);
	left: var(--pc-gutter);
	right: var(--pc-gutter);
	transform: translateY(6px);
	background: var(--pc-white);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	box-shadow: var(--pc-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pc-dur-fast) var(--pc-ease), transform var(--pc-dur) var(--pc-ease),
		visibility var(--pc-dur);
	overflow: hidden;
	z-index: 20;
}

.pcs-nav__list > li.pcs-nav__item--mega {
	position: static;
}

.pcs-nav__item--mega:hover .pcs-mega,
.pcs-nav__item--mega:focus-within .pcs-mega,
.pcs-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pcs-mega__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 24%);
}

.pcs-mega__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pc-space-8);
	padding: var(--pc-space-8);
}

.pcs-mega__col-title {
	display: block;
	margin: 0 0 var(--pc-space-4);
	padding-bottom: var(--pc-space-3);
	border-bottom: 1px solid var(--pc-border);
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
}

.pcs-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}

.pcs-mega__list li {
	margin: 0;
}

.pcs-mega__list a {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.5rem 0.4rem 0;
	font-size: var(--pc-text-sm);
	font-weight: 500;
	color: var(--pc-text);
	text-decoration: none;
	border-radius: var(--pc-radius-sm);
	transition: color var(--pc-dur-fast) var(--pc-ease), padding-left var(--pc-dur) var(--pc-ease);
}

.pcs-mega__list a::before {
	content: "";
	width: 5px;
	height: 5px;
	flex: none;
	border-radius: 1px;
	background: var(--pc-border-strong);
	transition: background-color var(--pc-dur-fast) var(--pc-ease), transform var(--pc-dur) var(--pc-ease);
}

.pcs-mega__list a:hover {
	color: var(--pc-primary-dark);
	padding-left: 0.3rem;
}

.pcs-mega__list a:hover::before {
	background: var(--pc-accent);
	transform: scale(1.25);
}

.pcs-mega__feature {
	position: relative;
	padding: var(--pc-space-8);
	background: var(--pc-navy);
	color: #c3d5e6;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--pc-space-4);
	overflow: hidden;
}

.pcs-mega__feature::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 0.7;
	pointer-events: none;
}

.pcs-mega__feature > * {
	position: relative;
}

.pcs-mega__feature-title {
	font-family: var(--pc-font-heading);
	font-size: var(--pc-text-xl);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
}

.pcs-mega__feature-text {
	font-size: var(--pc-text-sm);
	line-height: 1.55;
	margin: 0;
	color: #a9bccf;
}

/* Header actions ---------------------------------------------------------- */
.pcs-header__actions {
	display: flex;
	align-items: center;
	gap: var(--pc-space-4);
	flex: none;
	margin-left: var(--pc-space-4);
}

.pcs-header__phone {
	display: none;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--pc-text-sm);
	font-weight: 700;
	color: var(--pc-navy);
	text-decoration: none;
	white-space: nowrap;
}

.pcs-header__phone .pcs-icon {
	color: var(--pc-primary);
}

.pcs-header__phone:hover {
	color: var(--pc-primary-dark);
}

/* 1280, not 1240: at 1240 the phone appears in the same step that the container
   stops growing, which left the nav ~15px short and wrapped it for a 20px band.
   The number is still in the utility strip above at every desktop width. */
@media (min-width: 1280px) {
	.pcs-header__phone {
		display: inline-flex;
	}
}

.pcs-header__cta {
	display: none;
}

@media (min-width: 620px) {
	.pcs-header__cta {
		display: inline-flex;
	}
}

/* Below the CTA breakpoint the highest-intent mobile action is a phone call. */
.pcs-header__call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--pc-primary);
	border-radius: var(--pc-radius-md);
	background: var(--pc-primary);
	color: #fff;
	transition: background-color var(--pc-dur-fast) var(--pc-ease);
}

.pcs-header__call:hover {
	background: var(--pc-primary-hover);
	color: #fff;
}

/*
 * The compact call button runs until the utility bar appears at 900px and takes
 * over the phone number. It previously stopped at 620px, which left 620–900px —
 * most tablets — with no phone number anywhere in the header.
 */
@media (min-width: 900px) {
	.pcs-header__call {
		display: none;
	}
}

/* Search toggle ----------------------------------------------------------- */
.pcs-header__search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	color: var(--pc-navy);
	transition: border-color var(--pc-dur-fast) var(--pc-ease), color var(--pc-dur-fast) var(--pc-ease),
		background-color var(--pc-dur-fast) var(--pc-ease);
}

.pcs-header__search-toggle:hover {
	border-color: var(--pc-primary);
	color: var(--pc-primary);
	background: var(--pc-primary-050);
}

@media (min-width: 1080px) {
	.pcs-header__search-toggle {
		display: inline-flex;
	}
}

.pcs-header__search {
	display: none;
	border-top: 1px solid var(--pc-border);
	background: var(--pc-background-alt);
	padding-block: var(--pc-space-5);
}

.pcs-header__search.is-open {
	display: block;
	animation: pcs-fade-down var(--pc-dur) var(--pc-ease) both;
}

/* Mobile nav toggle -------------------------------------------------------- */
.pcs-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 46px;
	height: 46px;
	border: 1px solid var(--pc-border-strong);
	border-radius: var(--pc-radius-md);
	color: var(--pc-navy);
	background: var(--pc-white);
	transition: border-color var(--pc-dur-fast) var(--pc-ease), color var(--pc-dur-fast) var(--pc-ease);
}

.pcs-nav-toggle:hover {
	border-color: var(--pc-primary);
	color: var(--pc-primary);
}

@media (min-width: 1080px) {
	.pcs-nav-toggle {
		display: none;
	}
}

.pcs-nav-toggle__bars {
	display: block;
	position: relative;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: background-color var(--pc-dur-fast) var(--pc-ease);
}

.pcs-nav-toggle__bars::before,
.pcs-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--pc-dur) var(--pc-ease);
}

.pcs-nav-toggle__bars::before { top: -6px; }
.pcs-nav-toggle__bars::after  { top: 6px; }

.pcs-nav-toggle[aria-expanded="true"] .pcs-nav-toggle__bars {
	background: transparent;
}

.pcs-nav-toggle[aria-expanded="true"] .pcs-nav-toggle__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.pcs-nav-toggle[aria-expanded="true"] .pcs-nav-toggle__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Mobile drawer ------------------------------------------------------------ */
.pcs-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(7, 22, 36, 0.55);
	backdrop-filter: blur(2px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pc-dur) var(--pc-ease), visibility var(--pc-dur);
	z-index: var(--pc-z-drawer);
}

.pcs-drawer-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.pcs-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 100vw);
	background: var(--pc-white);
	z-index: calc(var(--pc-z-drawer) + 1);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--pc-dur) var(--pc-ease-out), visibility 0s linear var(--pc-dur);
	box-shadow: -20px 0 60px -30px rgba(7, 22, 36, 0.8);
	overscroll-behavior: contain;
}

.pcs-drawer.is-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform var(--pc-dur) var(--pc-ease-out), visibility 0s;
}

.pcs-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-4);
	padding: var(--pc-space-4) var(--pc-space-6);
	border-bottom: 1px solid var(--pc-border);
	min-height: 68px;
	flex: none;
}

.pcs-drawer__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--pc-border-strong);
	border-radius: var(--pc-radius-md);
	color: var(--pc-navy);
	transition: border-color var(--pc-dur-fast) var(--pc-ease), color var(--pc-dur-fast) var(--pc-ease);
}

.pcs-drawer__close:hover {
	border-color: var(--pc-primary);
	color: var(--pc-primary);
}

.pcs-drawer__body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--pc-space-5) var(--pc-space-6) var(--pc-space-8);
}

.pcs-drawer__search {
	margin-bottom: var(--pc-space-5);
}

.pcs-drawer__menu,
.pcs-drawer__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pcs-drawer__menu > li {
	margin: 0;
	border-bottom: 1px solid var(--pc-border);
}

.pcs-drawer__menu > li > a,
.pcs-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-4);
	width: 100%;
	padding: 1rem 0;
	font-family: var(--pc-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.012em;
	color: var(--pc-navy);
	text-decoration: none;
	text-align: left;
	min-height: 56px;
}

.pcs-drawer__row-link {
	flex: 1;
	color: inherit;
	text-decoration: none;
}

.pcs-drawer__sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-sm);
	color: var(--pc-primary);
	transition: transform var(--pc-dur) var(--pc-ease), background-color var(--pc-dur) var(--pc-ease),
		color var(--pc-dur) var(--pc-ease);
}

.pcs-drawer__sub-toggle[aria-expanded="true"] {
	transform: rotate(180deg);
	background: var(--pc-primary);
	border-color: var(--pc-primary);
	color: #fff;
}

.pcs-drawer__submenu {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--pc-dur) var(--pc-ease);
}

.pcs-drawer__submenu[data-open="true"] {
	grid-template-rows: 1fr;
}

.pcs-drawer__submenu > div {
	overflow: hidden;
}

.pcs-drawer__submenu ul {
	padding: 0 0 var(--pc-space-5) var(--pc-space-4);
	border-left: 2px solid var(--pc-primary-100);
	margin-left: 0.25rem;
	display: grid;
	gap: 0.1rem;
}

.pcs-drawer__submenu a {
	display: block;
	padding: 0.7rem 0;
	font-size: var(--pc-text-sm);
	font-weight: 500;
	color: var(--pc-text-muted);
	text-decoration: none;
	min-height: 44px;
}

.pcs-drawer__submenu a:hover {
	color: var(--pc-primary-dark);
}

.pcs-drawer__foot {
	flex: none;
	padding: var(--pc-space-6);
	border-top: 1px solid var(--pc-border);
	background: var(--pc-background-alt);
	display: grid;
	gap: var(--pc-space-4);
}

.pcs-drawer__contact {
	display: grid;
	gap: var(--pc-space-2);
}

.pcs-drawer__contact a {
	display: inline-flex;
	align-items: center;
	overflow-wrap: anywhere;
	gap: 0.6rem;
	font-size: var(--pc-text-sm);
	font-weight: 600;
	color: var(--pc-navy);
	text-decoration: none;
	min-height: 32px;
}

.pcs-drawer__contact .pcs-icon {
	color: var(--pc-primary);
	flex: none;
}

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

/* ==========================================================================
   07. FOOTER
   ========================================================================== */

.pcs-footer {
	background: var(--pc-navy-900);
	color: #9db2c6;
	font-size: var(--pc-text-sm);
	position: relative;
}

.pcs-footer::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--pc-primary) 0%, var(--pc-primary) 55%, var(--pc-accent) 55%, var(--pc-accent) 100%);
}

.pcs-footer a {
	color: #b9cbdc;
	text-decoration: none;
	transition: color var(--pc-dur-fast) var(--pc-ease);
}

.pcs-footer a:hover {
	color: #fff;
}

.pcs-footer__main {
	display: grid;
	gap: var(--pc-space-9);
	padding-block: clamp(3rem, 2rem + 3.4vw, 5rem);
}

@media (min-width: 780px) {
	.pcs-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1080px) {
	.pcs-footer__main {
		/*
		 * auto-fit rather than repeat(4): a menu column is skipped when its
		 * menu renders empty — which interim mode does to Solutions — and a
		 * fixed 4-track template then reserved a dead 200px column, leaving the
		 * footer bunched to the left with a 240px gap at the right edge.
		 * auto-fit collapses the unused track so the remaining columns widen to
		 * fill the row. Verified at both 3 and 4 menu columns.
		 */
		grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
		gap: var(--pc-space-8);
	}
}

.pcs-footer__brand {
	max-width: 34ch;
}

.pcs-footer__desc {
	line-height: 1.65;
	color: #91a8bd;
	margin-bottom: var(--pc-space-6);
}

.pcs-footer__col-title {
	margin: 0 0 var(--pc-space-5);
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #7e95aa;
}

.pcs-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.pcs-footer__list li {
	margin: 0;
	line-height: 1.4;
}

.pcs-footer__list a,
.pcs-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.pcs-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--pc-space-4);
}

.pcs-footer__contact li {
	display: flex;
	gap: 0.7rem;
	margin: 0;
	line-height: 1.5;
}

.pcs-footer__contact .pcs-icon {
	color: #5f88b3;
	flex: none;
	margin-top: 0.15em;
}

.pcs-footer__contact strong {
	overflow-wrap: anywhere;
	color: #fff;
	display: block;
	font-size: var(--pc-text-sm);
	font-weight: 600;
}

.pcs-footer__contact span {
	color: #8ba1b6;
	font-size: var(--pc-text-xs);
	display: block;
	margin-top: 0.1rem;
}

.pcs-social {
	display: flex;
	gap: var(--pc-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pcs-social li {
	margin: 0;
}

.pcs-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--pc-radius-md);
	color: #b9cbdc;
	transition: all var(--pc-dur-fast) var(--pc-ease);
}

.pcs-social a:hover {
	background: var(--pc-primary);
	border-color: var(--pc-primary);
	color: #fff;
	transform: translateY(-2px);
}

.pcs-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: var(--pc-space-6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-4) var(--pc-space-6);
	font-size: var(--pc-text-xs);
	color: #7e95aa;
}

.pcs-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-2) var(--pc-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pcs-footer__legal li {
	margin: 0;
}

/* ==========================================================================
   08. HOME / MARKETING SECTIONS
   ========================================================================== */

/* Shared decorative pattern ---------------------------------------------- */
.pcs-pattern-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
	background-size: 56px 56px;
	background-position: center top;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 20%, transparent 78%);
	mask-image: radial-gradient(120% 90% at 70% 0%, #000 20%, transparent 78%);
}


/* --- HERO ---------------------------------------------------------------- */
.pcs-hero {
	position: relative;
	background: var(--pc-navy);
	background-image: radial-gradient(90% 120% at 82% -10%, #17456f 0%, rgba(12, 32, 54, 0) 62%);
	color: #c3d5e6;
	overflow: hidden;
	isolation: isolate;
}

.pcs-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-space-9);
	padding-top: clamp(3rem, 1.8rem + 4.2vw, 5.5rem);
	padding-bottom: 0;
}

@media (min-width: 1000px) {
	.pcs-hero__inner {
		grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
		gap: clamp(2.5rem, 1rem + 4.5vw, 5rem);
		align-items: center;
		padding-top: clamp(3.5rem, 2rem + 4vw, 6rem);
		padding-bottom: clamp(2rem, 1rem + 2.5vw, 3.5rem);
	}
}

.pcs-hero__title {
	font-size: var(--pc-display);
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: #fff;
	margin: 0 0 var(--pc-space-6);
	max-width: 16ch;
	text-wrap: balance;
}

.pcs-hero__title em {
	font-style: normal;
	color: #6fb0f5;
	position: relative;
	white-space: nowrap;
}

.pcs-hero__text {
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
	line-height: 1.6;
	color: #b7cadb;
	max-width: 52ch;
	margin: 0 0 var(--pc-space-8);
}

.pcs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-3);
	align-items: center;
}

@media (max-width: 479px) {
	.pcs-hero__actions .pcs-btn {
		width: 100%;
	}
}

/* Hero media stack -------------------------------------------------------- */
.pcs-hero__media {
	position: relative;
	margin-bottom: var(--pc-space-9);
}

@media (min-width: 1000px) {
	.pcs-hero__media {
		margin-bottom: 0;
	}
}

.pcs-hero__media-frame {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--pc-radius-lg);
	overflow: hidden;
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85);
	background: #0f2b47;
}

.pcs-hero__media-frame img,
.pcs-hero__media-frame svg {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

@media (min-width: 1000px) {
	.pcs-hero__media-frame img,
	.pcs-hero__media-frame svg {
		aspect-ratio: 5 / 4;
	}
}

.pcs-hero__tag {
	position: absolute;
	top: var(--pc-space-5);
	left: var(--pc-space-5);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.7rem;
	background: rgba(7, 22, 36, 0.82);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--pc-radius-sm);
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #d7e6f5;
	line-height: 1;
}

.pcs-hero__tag .pcs-icon {
	width: 14px;
	height: 14px;
	color: #6fb0f5;
}

.pcs-hero__card {
	position: relative;
	margin: -3.25rem 0 0 0;
	background: var(--pc-white);
	border-radius: var(--pc-radius-md);
	box-shadow: var(--pc-shadow-lg);
	padding: var(--pc-space-6);
	display: grid;
	gap: var(--pc-space-4);
	max-width: 340px;
	border-top: 3px solid var(--pc-accent);
}

@media (min-width: 560px) {
	.pcs-hero__card {
		margin-left: calc(-1 * var(--pc-space-6));
	}
}

@media (min-width: 1000px) {
	.pcs-hero__card {
		position: absolute;
		left: -3.5rem;
		bottom: -2.25rem;
		margin: 0;
		width: 318px;
	}
}

.pcs-hero__card-label {
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
}

.pcs-hero__card-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--pc-space-3);
}

.pcs-hero__card-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	font-size: var(--pc-text-sm);
	font-weight: 600;
	color: var(--pc-navy);
	line-height: 1.35;
}

.pcs-hero__card-list .pcs-icon {
	color: var(--pc-primary);
	flex: none;
	margin-top: 0.05em;
}

/* Hero trust rail --------------------------------------------------------- */
/*
 * The rail reflows 2 -> 3 -> 5 columns. The hairline divider and padding rules
 * are written ONCE PER COLUMN COUNT rather than patched per breakpoint, because
 * the logic is identical at every count: in an N-column grid the item that
 * opens a row (:nth-child(Nn + 1)) drops its left padding so it aligns with the
 * container edge, and the item that closes a row (:nth-child(Nn), plus
 * :last-child when the final row is short) drops its right-hand hairline.
 * The item count is Customizer-driven, so these must stay count-agnostic.
 *
 * Five columns start at 1280px, not 1080px: five cells inside the 1240px
 * container only give each label room for a single line from ~1280px up, and
 * below that the row goes ragged (some labels one line, some two).
 */
.pcs-hero__rail {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	margin-top: var(--pc-space-9);
}

@media (min-width: 1000px) {
	.pcs-hero__rail {
		margin-top: 0;
	}
}

.pcs-hero__rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pcs-hero__rail-list li {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.35rem 1.25rem;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--pc-text-sm);
	font-weight: 600;
	color: #dce8f3;
	line-height: 1.25;
}

/* 2 columns — below 720px */
@media (max-width: 719.98px) {
	.pcs-hero__rail-list li:nth-child(2n + 1) {
		padding-left: 0;
	}

	.pcs-hero__rail-list li:nth-child(2n),
	.pcs-hero__rail-list li:last-child {
		border-right: 0;
	}
}

/* 3 columns — 720px to 1279px */
@media (min-width: 720px) and (max-width: 1279.98px) {
	.pcs-hero__rail-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pcs-hero__rail-list li:nth-child(3n + 1) {
		padding-left: 0;
	}

	.pcs-hero__rail-list li:nth-child(3n),
	.pcs-hero__rail-list li:last-child {
		border-right: 0;
	}
}

/* 5 columns — 1280px and up */
@media (min-width: 1280px) {
	.pcs-hero__rail-list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.pcs-hero__rail-list li {
		border-bottom: 0;
		padding-left: 1rem;
		padding-right: 1rem;
		font-size: 0.875rem;
	}

	.pcs-hero__rail-list li:nth-child(5n + 1) {
		padding-left: 0;
	}

	.pcs-hero__rail-list li:nth-child(5n) {
		padding-right: 0;
	}

	.pcs-hero__rail-list li:nth-child(5n),
	.pcs-hero__rail-list li:last-child {
		border-right: 0;
	}
}

.pcs-hero__rail-list li span {
	text-wrap: balance;
}

.pcs-hero__rail-list .pcs-icon {
	color: #6fb0f5;
	flex: none;
}

/* --- SOLUTIONS ------------------------------------------------------------ */
.pcs-solutions__grid {
	display: grid;
	gap: var(--pc-space-5);
}

@media (min-width: 860px) {
	.pcs-solutions__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--pc-space-6);

		/*
		 * The feature card spans 7 columns and 2 rows, so the 5 columns beside
		 * it are only filled if the next two cards are both `compact`. That
		 * held for the shipped order, but card size is set per solution in the
		 * editor — one change there and a `medium` card lands next, cannot fit
		 * in 5 columns, wraps, and leaves a 527x749 hole on the right.
		 *
		 * `dense` lets a later small card backfill that gap instead. Measured
		 * on the live layout: the section went from 2307px to 1754px.
		 *
		 * The trade: visual order can differ from DOM order. Acceptable here —
		 * these are sibling links with no sequence between them, so nothing is
		 * lost by reading them in a different order.
		 */
		grid-auto-flow: row dense;
	}

	.pcs-solution--feature { grid-column: span 7; grid-row: span 2; }
	.pcs-solution--compact { grid-column: span 5; }
	.pcs-solution--medium  { grid-column: span 6; }
}

.pcs-solution {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--pc-white);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	overflow: hidden;
	transition: border-color var(--pc-dur) var(--pc-ease), box-shadow var(--pc-dur) var(--pc-ease),
		transform var(--pc-dur) var(--pc-ease);
}

.pcs-solution::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--pc-primary);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--pc-dur) var(--pc-ease);
	z-index: 3;
}

.pcs-solution:hover {
	border-color: var(--pc-border-strong);
	box-shadow: var(--pc-shadow-md);
	transform: translateY(-3px);
}

.pcs-solution:hover::after,
.pcs-solution:focus-within::after {
	transform: scaleY(1);
}

.pcs-solution__media {
	position: relative;
	overflow: hidden;
	background: var(--pc-background-alt-2);
	border-bottom: 1px solid var(--pc-border);
}

.pcs-solution__media img,
.pcs-solution__media svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--pc-ease-out);
}

.pcs-solution:hover .pcs-solution__media img,
.pcs-solution:hover .pcs-solution__media svg {
	transform: scale(1.035);
}

.pcs-solution--feature .pcs-solution__media { aspect-ratio: 16 / 9; }
.pcs-solution--medium .pcs-solution__media  { aspect-ratio: 2 / 1; }

.pcs-solution__body {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-3);
	padding: var(--pc-space-6);
	flex: 1;
}

@media (min-width: 860px) {
	.pcs-solution--feature .pcs-solution__body {
		padding: var(--pc-space-8);
	}
}

.pcs-solution__index {
	position: absolute;
	top: var(--pc-space-5);
	right: var(--pc-space-6);
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--pc-text-soft);
	z-index: 2;
}

.pcs-solution__media + .pcs-solution__body .pcs-solution__index {
	top: auto;
	bottom: auto;
}

.pcs-solution__title {
	font-family: var(--pc-font-heading);
	font-size: var(--pc-h3);
	font-weight: 800;
	letter-spacing: -0.021em;
	color: var(--pc-navy);
	margin: 0;
	line-height: 1.2;
}

.pcs-solution--feature .pcs-solution__title {
	font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
}

.pcs-solution__title a {
	color: inherit;
	text-decoration: none;
}

.pcs-solution__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
}

.pcs-solution__text {
	color: var(--pc-text-muted);
	font-size: var(--pc-text-sm);
	line-height: 1.62;
	margin: 0;
	max-width: 48ch;
}

.pcs-solution--feature .pcs-solution__text {
	font-size: var(--pc-text-base);
	max-width: 52ch;
}

@media (max-width: 640px) {
	.pcs-solution__body {
		padding: var(--pc-space-5);
		gap: var(--pc-space-2);
	}

	.pcs-solution--feature .pcs-solution__text,
	.pcs-solution__text {
		font-size: var(--pc-text-sm);
		line-height: 1.58;
	}

	.pcs-solution--compact .pcs-solution__body {
		gap: var(--pc-space-4);
	}
}

.pcs-solution__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: var(--pc-space-2) 0 0;
	padding: 0;
}

.pcs-solution__tags li {
	margin: 0;
}

.pcs-solution__foot {
	margin-top: auto;
	padding-top: var(--pc-space-5);
}

.pcs-solution--compact .pcs-solution__body {
	flex-direction: row;
	align-items: stretch;
	gap: var(--pc-space-5);
}

.pcs-solution--compact .pcs-solution__body > div {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	flex: 1;
	min-width: 0;
}

.pcs-solution:hover .pcs-icon-tile {
	background: var(--pc-primary);
	border-color: var(--pc-primary);
	color: #fff;
}

/* --- WHY / SPLIT SECTION -------------------------------------------------- */
/* @public .pcs-split
   `.pcs-split--reverse` flips the media/copy order. */
.pcs-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-space-9);
	align-items: center;
}

@media (min-width: 960px) {
	.pcs-split {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		gap: clamp(3rem, 1.5rem + 4.5vw, 5.5rem);
	}

	.pcs-split--reverse .pcs-split__media {
		order: 2;
	}
}

.pcs-split__media {
	position: relative;
}

.pcs-split__media-main {
	position: relative;
	border-radius: var(--pc-radius-md);
	overflow: hidden;
	box-shadow: var(--pc-shadow-md);
	background: var(--pc-background-alt-2);
}

.pcs-split__media-main img,
.pcs-split__media-main svg {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}

.pcs-split__media-inset {
	position: absolute;
	right: -1.5rem;
	bottom: -1.5rem;
	width: 46%;
	max-width: 220px;
	border: 6px solid var(--pc-white);
	border-radius: var(--pc-radius-md);
	overflow: hidden;
	box-shadow: var(--pc-shadow-md);
	background: var(--pc-background-alt-2);
	display: none;
}

@media (min-width: 560px) {
	.pcs-split__media-inset {
		display: block;
	}
}

.pcs-split__media-inset img,
.pcs-split__media-inset svg {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.pcs-split__badge {
	position: absolute;
	left: -1rem;
	top: 2rem;
	background: var(--pc-navy);
	color: #fff;
	padding: var(--pc-space-4) var(--pc-space-5);
	border-radius: var(--pc-radius-md);
	box-shadow: var(--pc-shadow-lg);
	display: grid;
	gap: 0.15rem;
	min-width: 160px;
}

.pcs-split__badge-value {
	font-family: var(--pc-font-heading);
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.pcs-split__badge-label {
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8fc0f5;
}

.pcs-split__body > * + * {
	margin-top: var(--pc-space-6);
}

.pcs-split__title {
	margin: 0;
	max-width: 15ch;
}

.pcs-split__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: var(--pc-space-6);
	padding-top: var(--pc-space-7);
	border-top: 1px solid var(--pc-border);
}

/* --- PROCESS -------------------------------------------------------------- */
.pcs-process {
	position: relative;
	background: var(--pc-navy);
	overflow: hidden;
}

.pcs-process__steps {
	display: grid;
	gap: 0;
	counter-reset: step;
	position: relative;
}

@media (min-width: 900px) {
	.pcs-process__steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.pcs-step {
	position: relative;
	padding: var(--pc-space-7) 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

@media (min-width: 900px) {
	.pcs-step {
		padding: var(--pc-space-7) var(--pc-space-7) var(--pc-space-6) 0;
	}

	.pcs-step + .pcs-step {
		padding-left: var(--pc-space-7);
		border-left: 1px solid rgba(255, 255, 255, 0.1);
	}
}

.pcs-step::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 46px;
	height: 3px;
	background: var(--pc-accent);
}

@media (min-width: 900px) {
	.pcs-step + .pcs-step::before {
		left: var(--pc-space-7);
	}
}

.pcs-step__num {
	display: block;
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	font-weight: 500;
	letter-spacing: 0.18em;
	color: #7ea6cc;
	margin-bottom: var(--pc-space-5);
}

.pcs-step__title {
	font-family: var(--pc-font-heading);
	font-size: var(--pc-h3);
	font-weight: 800;
	letter-spacing: -0.022em;
	color: #fff;
	margin: 0 0 var(--pc-space-3);
	line-height: 1.2;
}

.pcs-step__text {
	color: #a9bccf;
	font-size: var(--pc-text-sm);
	line-height: 1.65;
	margin: 0;
	max-width: 34ch;
}

.pcs-process__foot {
	margin-top: var(--pc-space-9);
	padding-top: var(--pc-space-7);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-5);
}

.pcs-process__foot p {
	margin: 0;
	color: #a9bccf;
	font-size: var(--pc-text-sm);
	max-width: 56ch;
}

/* --- INDUSTRIES ----------------------------------------------------------- */
/* @public .pcs-industry
   Brief: industry cards. `--wide` / `--xl` are the size scale. */
.pcs-industries__grid {
	display: grid;
	gap: var(--pc-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
	.pcs-industries__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.pcs-industries__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 190px;
	}

	.pcs-industry--xl {
		grid-column: span 2;
		grid-row: span 2;
	}

	.pcs-industry--wide {
		grid-column: span 2;
	}
}

.pcs-industry {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 190px;
	padding: var(--pc-space-5);
	border-radius: var(--pc-radius-md);
	overflow: hidden;
	background: var(--pc-navy);
	isolation: isolate;
	transition: transform var(--pc-dur) var(--pc-ease), box-shadow var(--pc-dur) var(--pc-ease);
}

.pcs-industry:hover {
	box-shadow: var(--pc-shadow-md);
}

.pcs-industry__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 700ms var(--pc-ease-out);
}

.pcs-industry:hover .pcs-industry__img {
	transform: scale(1.06);
}

.pcs-industry::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(7, 22, 36, 0.92) 0%, rgba(7, 22, 36, 0.55) 42%, rgba(7, 22, 36, 0.18) 100%);
	transition: background var(--pc-dur) var(--pc-ease);
}

.pcs-industry:hover::before {
	background: linear-gradient(to top, rgba(6, 30, 54, 0.94) 0%, rgba(7, 24, 40, 0.7) 48%, rgba(9, 40, 70, 0.35) 100%);
}

.pcs-industry__label {
	position: relative;
	display: block;
	font-family: var(--pc-font-heading);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: #fff;
	line-height: 1.2;
}

.pcs-industry--xl .pcs-industry__label {
	font-size: clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem);
}

.pcs-industry__label a {
	color: inherit;
	text-decoration: none;
}

.pcs-industry__label a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pcs-industry__text {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--pc-text-xs);
	font-weight: 400;
	line-height: 1.45;
	color: #b7cadb;
	max-width: 32ch;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--pc-dur) var(--pc-ease), transform var(--pc-dur) var(--pc-ease);
}

.pcs-industry:hover .pcs-industry__text,
.pcs-industry:focus-within .pcs-industry__text {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 699px) {
	.pcs-industry__text {
		display: none;
	}

	.pcs-industry {
		min-height: 132px;
		padding: var(--pc-space-4);
	}

	.pcs-industry__label {
		font-size: var(--pc-text-sm);
	}
}

.pcs-industry__mark {
	position: absolute;
	top: var(--pc-space-4);
	right: var(--pc-space-4);
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--pc-radius-sm);
	color: #fff;
	opacity: 0;
	transform: translate(-4px, 4px);
	transition: opacity var(--pc-dur) var(--pc-ease), transform var(--pc-dur) var(--pc-ease),
		background-color var(--pc-dur) var(--pc-ease);
}

.pcs-industry:hover .pcs-industry__mark,
.pcs-industry:focus-within .pcs-industry__mark {
	opacity: 1;
	transform: translate(0, 0);
	background: rgba(11, 107, 211, 0.9);
	border-color: transparent;
}

/* --- PRODUCT CARDS -------------------------------------------------------- */
.pcs-catalog-rail {
	display: flex;
	gap: var(--pc-space-2);
	overflow-x: auto;
	padding-bottom: var(--pc-space-4);
	margin-bottom: var(--pc-space-7);
	border-bottom: 1px solid var(--pc-border);
	scrollbar-width: thin;
}

.pcs-catalog-rail::-webkit-scrollbar {
	height: 3px;
}

.pcs-catalog-rail::-webkit-scrollbar-track {
	background: transparent;
}

.pcs-catalog-rail::-webkit-scrollbar-thumb {
	background: var(--pc-border);
	border-radius: 2px;
}

.pcs-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	background: var(--pc-white);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-pill);
	font-size: var(--pc-text-xs);
	font-weight: 600;
	color: var(--pc-text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: all var(--pc-dur-fast) var(--pc-ease);
}

.pcs-chip:hover {
	border-color: var(--pc-primary);
	color: var(--pc-primary-dark);
	background: var(--pc-primary-050);
}

.pcs-chip[aria-current="true"],
.pcs-chip.is-active {
	background: var(--pc-navy);
	border-color: var(--pc-navy);
	color: #fff;
}

.pcs-product-grid {
	display: grid;
	gap: var(--pc-space-5);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

@media (max-width: 599px) {
	.pcs-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pc-space-4);
	}
}

.pcs-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--pc-white);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	overflow: hidden;
	transition: border-color var(--pc-dur) var(--pc-ease), box-shadow var(--pc-dur) var(--pc-ease),
		transform var(--pc-dur) var(--pc-ease);
}

.pcs-product-card:hover {
	border-color: var(--pc-border-strong);
	box-shadow: var(--pc-shadow-md);
	transform: translateY(-3px);
}

.pcs-product-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--pc-background-alt);
	border-bottom: 1px solid var(--pc-border);
	display: grid;
	place-items: center;
	padding: var(--pc-space-5);
	overflow: hidden;
}

.pcs-product-card__media img,
.pcs-product-card__media svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 500ms var(--pc-ease-out);
}

.pcs-product-card:hover .pcs-product-card__media img,
.pcs-product-card:hover .pcs-product-card__media svg {
	transform: scale(1.045);
}

.pcs-product-card__flag {
	position: absolute;
	top: var(--pc-space-3);
	left: var(--pc-space-3);
}

.pcs-product-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-2);
	padding: var(--pc-space-5);
	flex: 1;
}

.pcs-product-card__cat {
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pc-primary-dark);
}

.pcs-product-card__title {
	font-family: var(--pc-font-heading);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.014em;
	color: var(--pc-navy);
	margin: 0;
}

.pcs-product-card__title a {
	color: inherit;
	text-decoration: none;
}

.pcs-product-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pcs-product-card__text {
	font-size: var(--pc-text-sm);
	line-height: 1.55;
	color: var(--pc-text-muted);
	margin: 0;
}

.pcs-product-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-3);
	margin-top: auto;
	padding-top: var(--pc-space-4);
	border-top: 1px solid var(--pc-border);
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	color: var(--pc-text-soft);
	letter-spacing: 0.04em;
}

.pcs-product-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--pc-font-body);
	font-size: var(--pc-text-xs);
	font-weight: 700;
	color: var(--pc-primary-dark);
	letter-spacing: 0;
}

.pcs-product-card:hover .pcs-product-card__cta .pcs-icon {
	transform: translateX(3px);
}

.pcs-product-card__cta .pcs-icon {
	transition: transform var(--pc-dur) var(--pc-ease);
}

@media (max-width: 599px) {
	/*
	 * Two-up cards get very narrow on a 320px screen. The footer is a flex row of
	 * "SKU · pack size" and the View link, and a long pack size pushed the arrow
	 * past the card edge where it was clipped. Let the row wrap and let the meta
	 * shrink so the link always stays inside.
	 */
	.pcs-product-card__foot {
		flex-wrap: wrap;
		gap: var(--pc-space-2);
	}

	.pcs-product-card__foot > span:first-child {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	.pcs-product-card__body {
		padding: var(--pc-space-4);
	}

	.pcs-product-card__text {
		display: none;
	}
}

/* Featured-products showcase ---------------------------------------------
   @public .pcs-product-showcase
   The section leads with one wide horizontal card and
   follows with a standard grid, so the page does not run three consecutive
   grid sections. Degrades to a plain grid when only one product is featured. */
.pcs-product-showcase {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-space-5);
}

.pcs-product-showcase__rest {
	margin: 0;
}

@media (min-width: 900px) {
	.pcs-product-showcase__rest {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* The feature card is the standard product card turned on its side: same
   border, media treatment and hover, more room for the summary and specs. */
@media (min-width: 720px) {
	.pcs-product-card--feature {
		display: grid;
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: stretch;
	}

	.pcs-product-card--feature .pcs-product-card__media {
		/*
		 * No `aspect-ratio` here. The cell is stretched by the grid, so a ratio
		 * would take the row height and transfer it back into *width* — the panel
		 * grew to 557px inside a 409px track at 1024px and painted over the body
		 * column, hiding the product number entirely. The cell takes the track
		 * width; the row height comes from the body; the image letterboxes into
		 * whatever that leaves.
		 */
		aspect-ratio: auto;
		height: 100%;
		border-bottom: 0;
		border-right: 1px solid var(--pc-border);
		padding: var(--pc-space-7);
	}

	.pcs-product-card--feature .pcs-product-card__body {
		padding: var(--pc-space-7) var(--pc-space-8);
		gap: var(--pc-space-3);
		justify-content: center;
	}

	/* With the body centred the footer no longer needs to be pushed down. */
	.pcs-product-card--feature .pcs-product-card__foot {
		margin-top: var(--pc-space-5);
	}

	.pcs-product-card--feature .pcs-product-card__title {
		font-size: var(--pc-h3);
		line-height: 1.24;
	}

	.pcs-product-card--feature .pcs-product-card__text {
		font-size: var(--pc-text-base);
		line-height: 1.6;
		max-width: 52ch;
		display: block;
	}
}

/* The base product card centres its image (`place-items: center`), which leaves
   the cell unstretched — so the image's `height: 100%` has no definite box to
   resolve against, falls back to its intrinsic square, and overflows. The
   feature card stretches its media cell instead, at EVERY width: scoping this
   to the desktop breakpoint left the stacked mobile card clipping a 308px
   image into a 218px box. */
.pcs-product-card--feature .pcs-product-card__media {
	place-items: stretch;
}

.pcs-product-card--feature .pcs-product-card__media img,
.pcs-product-card--feature .pcs-product-card__media svg {
	min-height: 0;
	max-height: 100%;
}

/*
 * WordPress only generates the `pcs-square` crop for uploads at least 800px
 * wide, so a smaller original is served at its native ratio. A tall, narrow
 * product shot would then set the grid row height and stretch the whole card.
 * Cap the media panel so the card's height stays governed by its copy.
 */
.pcs-product-card--feature .pcs-product-card__media {
	max-height: 34rem;
}

/* On small screens the wide card must not become one enormous stacked block:
   cap the media height so the copy stays reachable without a long scroll. */
@media (max-width: 719px) {
	.pcs-product-card--feature .pcs-product-card__media {
		aspect-ratio: 16 / 10;
	}

	.pcs-product-card--feature .pcs-product-card__text {
		display: block;
	}
}

/* Inline specification strip — only the feature card carries it. */
.pcs-product-card__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
	gap: var(--pc-space-3) var(--pc-space-5);
	margin: var(--pc-space-2) 0 0;
	padding: var(--pc-space-4) 0 0;
	border-top: 1px solid var(--pc-border);
}

.pcs-product-card__specs > div {
	min-width: 0;
}

.pcs-product-card__specs dt {
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
	margin-bottom: 0.2rem;
}

.pcs-product-card__specs dd {
	margin: 0;
	font-size: var(--pc-text-sm);
	font-weight: 600;
	color: var(--pc-navy);
	overflow-wrap: anywhere;
}

/* --- RESOURCE TEASER ROW -------------------------------------------------- */
.pcs-post-rail {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--pc-border);
}

.pcs-post-row {
	position: relative;
	display: grid;
	gap: var(--pc-space-4);
	padding: var(--pc-space-6) 0;
	border-bottom: 1px solid var(--pc-border);
	align-items: center;
	transition: background-color var(--pc-dur) var(--pc-ease);
}

@media (min-width: 800px) {
	.pcs-post-row {
		grid-template-columns: 170px minmax(0, 1.4fr) minmax(0, 1fr) auto;
		gap: var(--pc-space-7);
		padding-inline: var(--pc-space-4);
		margin-inline: calc(-1 * var(--pc-space-4));
	}
}

.pcs-post-row:hover {
	background: var(--pc-background-alt);
}

.pcs-post-row__meta {
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
}

.pcs-post-row__title {
	font-family: var(--pc-font-heading);
	font-size: var(--pc-text-xl);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.3;
	color: var(--pc-navy);
	margin: 0;
}

.pcs-post-row__title a {
	color: inherit;
	text-decoration: none;
}

.pcs-post-row__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pcs-post-row:hover .pcs-post-row__title {
	color: var(--pc-primary-dark);
}

.pcs-post-row__text {
	font-size: var(--pc-text-sm);
	color: var(--pc-text-muted);
	line-height: 1.55;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.pcs-post-row__arrow {
	color: var(--pc-primary);
	transition: transform var(--pc-dur) var(--pc-ease);
	display: none;
}

@media (min-width: 800px) {
	.pcs-post-row__arrow {
		display: block;
	}
}

.pcs-post-row:hover .pcs-post-row__arrow {
	transform: translateX(4px);
}

/* --- CTA BANNER ----------------------------------------------------------- */
.pcs-cta {
	position: relative;
	background: var(--pc-navy);
	background-image: radial-gradient(80% 120% at 15% 0%, #17456f 0%, rgba(12, 32, 54, 0) 58%);
	overflow: hidden;
}

.pcs-cta__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-space-9);
	align-items: center;
}

@media (min-width: 960px) {
	.pcs-cta__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: clamp(3rem, 1.5rem + 4vw, 5rem);
	}
}

.pcs-cta__title {
	font-size: clamp(2rem, 1.5rem + 2.1vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.032em;
	color: #fff;
	margin: 0 0 var(--pc-space-5);
	max-width: 17ch;
}

.pcs-cta__text {
	color: #b7cadb;
	font-size: var(--pc-text-lg);
	line-height: 1.6;
	max-width: 52ch;
	margin: 0 0 var(--pc-space-8);
}

.pcs-cta__panel {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--pc-radius-md);
	padding: var(--pc-space-7);
	backdrop-filter: blur(2px);
}

.pcs-cta__panel-title {
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8fc0f5;
	margin: 0 0 var(--pc-space-5);
}

.pcs-cta__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--pc-space-5);
	counter-reset: cta-step;
}

.pcs-cta__steps li {
	position: relative;
	margin: 0;
	padding-left: 2.6rem;
	color: #b7cadb;
	font-size: var(--pc-text-sm);
	line-height: 1.55;
	counter-increment: cta-step;
}

.pcs-cta__steps li strong {
	display: block;
	color: #fff;
	font-size: var(--pc-text-base);
	font-weight: 700;
	margin-bottom: 0.15rem;
	font-family: var(--pc-font-heading);
	letter-spacing: -0.012em;
}

.pcs-cta__steps li::before {
	content: counter(cta-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.05rem;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--pc-radius-sm);
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	color: #8fc0f5;
}

/* ==========================================================================
   09. TEMPLATES
   ========================================================================== */

/* --- Page header band ----------------------------------------------------- */
.pcs-page-head {
	position: relative;
	background: var(--pc-navy);
	background-image: radial-gradient(75% 130% at 88% -20%, #17456f 0%, rgba(12, 32, 54, 0) 60%);
	color: #b7cadb;
	overflow: hidden;
	padding-block: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem) clamp(2.75rem, 1.8rem + 3.2vw, 4.25rem);
}

.pcs-page-head__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-space-6);
}

@media (min-width: 900px) {
	.pcs-page-head__inner--split {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: var(--pc-space-10);
		align-items: end;
	}
}

.pcs-page-head__title {
	color: #fff;
	margin: 0;
	max-width: 20ch;
}

.pcs-page-head .pcs-breadcrumbs {
	margin-bottom: var(--pc-space-6);
}

.pcs-page-head__text {
	color: #b7cadb;
	font-size: var(--pc-text-lg);
	line-height: 1.6;
	max-width: 58ch;
	margin: var(--pc-space-5) 0 0;
}

.pcs-page-head__aside {
	display: grid;
	gap: var(--pc-space-4);
	justify-items: start;
}

@media (min-width: 900px) {
	.pcs-page-head__aside {
		justify-items: end;
	}
}

.pcs-page-head--bar {
	padding-block: var(--pc-space-6);
}

.pcs-page-head--bar .pcs-breadcrumbs {
	margin-bottom: 0;
}

.pcs-page-head--light {
	background: var(--pc-background-alt);
	background-image: none;
	color: var(--pc-text-muted);
	border-bottom: 1px solid var(--pc-border);
}

.pcs-page-head--light .pcs-page-head__title {
	color: var(--pc-navy);
}

.pcs-page-head--light .pcs-page-head__text {
	color: var(--pc-text-muted);
}

/* --- Content / entry ------------------------------------------------------ */
.pcs-entry {
	font-size: var(--pc-text-base);
	line-height: var(--pc-leading-relaxed);
	color: var(--pc-text);
}

.pcs-entry > * + * {
	margin-top: 1.15em;
}

.pcs-entry h2 {
	margin-top: 1.9em;
	margin-bottom: 0.55em;
}

.pcs-entry h3 {
	margin-top: 1.7em;
	margin-bottom: 0.5em;
}

.pcs-entry h4 {
	margin-top: 1.5em;
	margin-bottom: 0.45em;
}

.pcs-entry > *:first-child {
	margin-top: 0;
}

.pcs-entry ul,
.pcs-entry ol {
	padding-left: 1.3em;
}

.pcs-entry img {
	border-radius: var(--pc-radius-md);
}

.pcs-entry a:not(.pcs-btn):not(.wp-block-button__link) {
	text-decoration: underline;
	text-decoration-color: var(--pc-primary-100);
	text-decoration-thickness: 2px;
	transition: text-decoration-color var(--pc-dur-fast) var(--pc-ease), color var(--pc-dur-fast) var(--pc-ease);
}

.pcs-entry a:not(.pcs-btn):not(.wp-block-button__link):hover {
	text-decoration-color: var(--pc-primary);
}

/* Layout with sidebar ------------------------------------------------------ */
.pcs-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-space-9);
}

@media (min-width: 1000px) {
	.pcs-layout--sidebar {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
		align-items: start;
	}

	.pcs-layout--sidebar-left {
		grid-template-columns: 280px minmax(0, 1fr);
	}

	.pcs-layout--sidebar-left .pcs-sidebar {
		order: -1;
	}
}

.pcs-sidebar {
	display: grid;
	gap: var(--pc-space-7);
}

@media (min-width: 1000px) {
	.pcs-sidebar--sticky {
		position: sticky;
		top: calc(var(--pc-header-h) + var(--pc-space-6));
	}
}

.pcs-widget {
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	padding: var(--pc-space-6);
	background: var(--pc-white);
}

.pcs-widget__title,
.pcs-sidebar .widget-title,
.pcs-sidebar .wp-block-heading {
	margin: 0 0 var(--pc-space-5);
	padding-bottom: var(--pc-space-3);
	border-bottom: 1px solid var(--pc-border);
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
}

.pcs-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}

/* Product categories are a real nested list (Pcs_Walker_Product_Cat), so the
   indent compounds with depth instead of the flat inline padding it replaced. */
.pcs-widget li > ul {
	padding-left: 0.75rem;
}

.pcs-widget li {
	margin: 0;
}

.pcs-widget li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-3);
	padding: 0.5rem 0;
	font-size: var(--pc-text-sm);
	font-weight: 500;
	color: var(--pc-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--pc-dur-fast) var(--pc-ease);
}

.pcs-widget li a:hover {
	color: var(--pc-primary-dark);
}

.pcs-widget li.is-current > a {
	color: var(--pc-primary-dark);
	font-weight: 700;
}

.pcs-widget__count {
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	color: var(--pc-text-soft);
}

.pcs-widget--cta {
	background: var(--pc-navy);
	border-color: var(--pc-navy);
	color: #b7cadb;
}

.pcs-widget--cta .pcs-widget__title {
	color: #8fc0f5;
	border-bottom-color: rgba(255, 255, 255, 0.14);
}

.pcs-widget--cta p {
	font-size: var(--pc-text-sm);
	line-height: 1.6;
	margin-bottom: var(--pc-space-5);
	color: #b7cadb;
}

/* --- Post / article cards -------------------------------------------------- */
.pcs-article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--pc-white);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	overflow: hidden;
	transition: border-color var(--pc-dur) var(--pc-ease), box-shadow var(--pc-dur) var(--pc-ease),
		transform var(--pc-dur) var(--pc-ease);
}

.pcs-article-card:hover {
	border-color: var(--pc-border-strong);
	box-shadow: var(--pc-shadow-md);
	transform: translateY(-3px);
}

.pcs-article-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--pc-background-alt-2);
	border-bottom: 1px solid var(--pc-border);
}

.pcs-article-card__media img,
.pcs-article-card__media svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms var(--pc-ease-out);
}

.pcs-article-card:hover .pcs-article-card__media img,
.pcs-article-card:hover .pcs-article-card__media svg {
	transform: scale(1.04);
}

.pcs-article-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--pc-space-3);
	padding: var(--pc-space-6);
	flex: 1;
}

.pcs-article-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
}

.pcs-article-card__title {
	font-family: var(--pc-font-heading);
	font-size: var(--pc-text-xl);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.3;
	color: var(--pc-navy);
	margin: 0;
}

.pcs-article-card__title a {
	color: inherit;
	text-decoration: none;
}

.pcs-article-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pcs-article-card__text {
	font-size: var(--pc-text-sm);
	line-height: 1.6;
	color: var(--pc-text-muted);
	margin: 0;
}

.pcs-article-card__foot {
	margin-top: auto;
	padding-top: var(--pc-space-4);
}

/* Single post -------------------------------------------------------------- */
/* @public .pcs-single__meta
   The base colour is the white-page one so callers need no inline override;
   `--on-dark` carries the navy page-head treatment. */
.pcs-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-top: var(--pc-space-6);
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
}

.pcs-single__meta--on-dark {
	color: #91a8bd;
}

.pcs-single__meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.pcs-single__hero-img {
	margin-bottom: var(--pc-space-9);
	border-radius: var(--pc-radius-md);
	overflow: hidden;
	box-shadow: var(--pc-shadow-md);
}

.pcs-single__hero-img img {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}

.pcs-post-nav {
	display: grid;
	gap: var(--pc-space-4);
	margin-top: var(--pc-space-10);
	padding-top: var(--pc-space-7);
	border-top: 1px solid var(--pc-border);
}

@media (min-width: 720px) {
	.pcs-post-nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pcs-post-nav__link {
	display: grid;
	gap: 0.35rem;
	padding: var(--pc-space-5);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	text-decoration: none;
	transition: border-color var(--pc-dur) var(--pc-ease), background-color var(--pc-dur) var(--pc-ease);
}

.pcs-post-nav__link:hover {
	border-color: var(--pc-border-strong);
	background: var(--pc-background-alt);
}

.pcs-post-nav__label {
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
}

.pcs-post-nav__title {
	font-family: var(--pc-font-heading);
	font-weight: 700;
	color: var(--pc-navy);
	font-size: var(--pc-text-base);
	line-height: 1.35;
	letter-spacing: -0.014em;
}

.pcs-post-nav__link--next {
	text-align: right;
}

/* --- Product single -------------------------------------------------------- */
.pcs-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-space-9);
}

@media (min-width: 960px) {
	.pcs-product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
		align-items: start;
	}
}

.pcs-gallery {
	display: grid;
	gap: var(--pc-space-4);
}

@media (min-width: 960px) {
	.pcs-gallery--sticky {
		position: sticky;
		top: calc(var(--pc-header-h) + var(--pc-space-6));
	}
}

.pcs-gallery__main {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--pc-background-alt);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 1rem + 2vw, 3rem);
	overflow: hidden;
}

.pcs-gallery__main img,
.pcs-gallery__main svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pcs-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	gap: var(--pc-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pcs-gallery__thumbs li {
	margin: 0;
}

.pcs-gallery__thumb {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0.5rem;
	background: var(--pc-background-alt);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-sm);
	overflow: hidden;
	transition: border-color var(--pc-dur-fast) var(--pc-ease);
	cursor: pointer;
}

.pcs-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pcs-gallery__thumb:hover {
	border-color: var(--pc-border-strong);
}

.pcs-gallery__thumb[aria-current="true"] {
	border-color: var(--pc-primary);
	box-shadow: 0 0 0 1px var(--pc-primary);
}

.pcs-product__head {
	display: grid;
	gap: var(--pc-space-4);
}

.pcs-product__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.pcs-product__sku {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-sm);
	color: var(--pc-text-muted);
	letter-spacing: 0.04em;
}

.pcs-product__sku strong {
	color: var(--pc-navy);
	font-weight: 500;
}

.pcs-product__summary {
	font-size: var(--pc-text-lg);
	line-height: 1.6;
	color: var(--pc-text-muted);
	margin: 0;
	max-width: 52ch;
}

.pcs-product__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-3);
	padding-block: var(--pc-space-6);
	margin-block: var(--pc-space-2);
	border-block: 1px solid var(--pc-border);
}

.pcs-product__docs {
	display: grid;
	gap: var(--pc-space-2);
}

.pcs-doc-link {
	display: flex;
	align-items: center;
	gap: var(--pc-space-4);
	padding: 0.85rem 1rem;
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	background: var(--pc-white);
	color: var(--pc-navy);
	text-decoration: none;
	font-size: var(--pc-text-sm);
	font-weight: 600;
	transition: border-color var(--pc-dur-fast) var(--pc-ease), background-color var(--pc-dur-fast) var(--pc-ease),
		transform var(--pc-dur-fast) var(--pc-ease);
}

.pcs-doc-link:hover {
	border-color: var(--pc-primary);
	background: var(--pc-primary-050);
	color: var(--pc-primary-dark);
}

.pcs-doc-link__icon {
	flex: none;
	color: var(--pc-primary);
}

.pcs-doc-link__meta {
	margin-left: auto;
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
	font-weight: 500;
}

.pcs-product__section {
	margin-top: var(--pc-space-8);
}

.pcs-product__section-title {
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
	margin: 0 0 var(--pc-space-4);
	padding-bottom: var(--pc-space-3);
	border-bottom: 1px solid var(--pc-border);
}

/* --- Filter bar / toolbar --------------------------------------------------- */
.pcs-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-4);
	padding-bottom: var(--pc-space-5);
	margin-bottom: var(--pc-space-7);
	border-bottom: 1px solid var(--pc-border);
}

.pcs-toolbar__count {
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
}

.pcs-toolbar__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pc-space-3);
}

.pcs-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1rem;
	border: 1px solid var(--pc-border-strong);
	border-radius: var(--pc-radius-md);
	font-size: var(--pc-text-sm);
	font-weight: 600;
	color: var(--pc-navy);
}

@media (min-width: 1000px) {
	.pcs-filter-toggle {
		display: none;
	}
}

@media (max-width: 999px) {
	.pcs-sidebar--filters {
		display: none;
	}

	.pcs-sidebar--filters.is-open {
		display: grid;
		margin-bottom: var(--pc-space-7);
	}
}

/* --- Document / SDS library -------------------------------------------------- */
.pcs-doc-search {
	background: var(--pc-white);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	padding: var(--pc-space-6);
	box-shadow: var(--pc-shadow-sm);
	margin-bottom: var(--pc-space-8);
}

.pcs-doc-search__grid {
	display: grid;
	gap: var(--pc-space-4);
	grid-template-columns: 1fr;
	align-items: end;
}

@media (min-width: 780px) {
	.pcs-doc-search__grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
	}
}

/*
 * A library with fewer than two document types drops the type select, so the
 * search row loses its middle column. Without this the submit button would sit
 * in the vacated middle track with a gap after it.
 */
@media (min-width: 780px) {
	.pcs-doc-search__grid--slim {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.pcs-doc-list {
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	overflow: hidden;
	background: var(--pc-white);
}

.pcs-doc-row {
	display: grid;
	gap: var(--pc-space-3) var(--pc-space-6);
	padding: var(--pc-space-5) var(--pc-space-6);
	border-bottom: 1px solid var(--pc-border);
	align-items: center;
	transition: background-color var(--pc-dur-fast) var(--pc-ease);
}

@media (min-width: 860px) {
	.pcs-doc-row {
		grid-template-columns: minmax(0, 1fr) 150px 170px 150px;
	}
}

/*
 * When nothing in the result set carries a product number the template omits
 * that cell and its header, so the row is three columns, not four. The freed
 * width goes to the product name.
 */
@media (min-width: 860px) {
	.pcs-doc-list--no-sku .pcs-doc-row {
		grid-template-columns: minmax(0, 1fr) 170px 150px;
	}
}

.pcs-doc-row:last-child {
	border-bottom: 0;
}

.pcs-doc-row:hover {
	background: var(--pc-background-alt);
}

.pcs-doc-row--head {
	background: var(--pc-background-alt);
	border-bottom: 1px solid var(--pc-border-strong);
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pc-text-muted);
	padding-block: var(--pc-space-4);
	display: none;
}

@media (min-width: 860px) {
	.pcs-doc-row--head {
		display: grid;
	}
}

.pcs-doc-row__name {
	font-weight: 600;
	color: var(--pc-navy);
	font-size: var(--pc-text-sm);
	line-height: 1.4;
}

.pcs-doc-row__sku,
.pcs-doc-row__type {
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	letter-spacing: 0.05em;
	color: var(--pc-text-muted);
}

.pcs-doc-row__action {
	justify-self: start;
}

@media (min-width: 860px) {
	.pcs-doc-row__action {
		justify-self: end;
	}
}

.pcs-doc-row[hidden] {
	display: none;
}

/* --- Empty states ------------------------------------------------------------ */
.pcs-empty {
	display: grid;
	gap: var(--pc-space-5);
	justify-items: center;
	text-align: center;
	padding: clamp(3rem, 2rem + 3vw, 5rem) var(--pc-space-6);
	border: 1px dashed var(--pc-border-strong);
	border-radius: var(--pc-radius-md);
	background: var(--pc-background-alt);
}

.pcs-empty__icon {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: var(--pc-radius-md);
	background: var(--pc-white);
	border: 1px solid var(--pc-border);
	color: var(--pc-text-soft);
}

.pcs-empty__title {
	margin: 0;
	font-size: var(--pc-h3);
}

.pcs-empty__text {
	margin: 0;
	max-width: 46ch;
	color: var(--pc-text-muted);
	font-size: var(--pc-text-sm);
	line-height: 1.65;
}

/* --- 404 ---------------------------------------------------------------------- */
.pcs-404 {
	position: relative;
	overflow: hidden;
}

.pcs-404__code {
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	/* Darker than --pc-accent so small text clears 4.5:1 on white. */
	color: var(--pc-accent-ink);
	display: block;
	margin-bottom: var(--pc-space-5);
}

.pcs-404__grid {
	display: grid;
	gap: var(--pc-space-9);
}

@media (min-width: 900px) {
	.pcs-404__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(3rem, 1.5rem + 4vw, 5rem);
		align-items: start;
	}
}

.pcs-404__links {
	display: grid;
	gap: var(--pc-space-3);
}

.pcs-404__link {
	display: flex;
	align-items: center;
	gap: var(--pc-space-4);
	padding: var(--pc-space-5);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	background: var(--pc-white);
	text-decoration: none;
	transition: border-color var(--pc-dur) var(--pc-ease), transform var(--pc-dur) var(--pc-ease),
		box-shadow var(--pc-dur) var(--pc-ease);
}

.pcs-404__link:hover {
	border-color: var(--pc-primary);
	transform: translateX(3px);
	box-shadow: var(--pc-shadow-sm);
}

.pcs-404__link-title {
	display: block;
	font-family: var(--pc-font-heading);
	font-weight: 700;
	color: var(--pc-navy);
	font-size: var(--pc-text-base);
	letter-spacing: -0.014em;
}

.pcs-404__link-text {
	display: block;
	font-size: var(--pc-text-xs);
	color: var(--pc-text-muted);
	margin-top: 0.15rem;
	line-height: 1.45;
}

.pcs-404__link .pcs-icon:last-child {
	margin-left: auto;
	color: var(--pc-primary);
}

/* --- Search results ------------------------------------------------------------ */
.pcs-result {
	position: relative;
	display: grid;
	gap: var(--pc-space-2);
	padding: var(--pc-space-6) 0;
	border-bottom: 1px solid var(--pc-border);
}

.pcs-result:first-child {
	border-top: 1px solid var(--pc-border);
}

.pcs-result__type {
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pc-primary-dark);
}

.pcs-result__title {
	font-family: var(--pc-font-heading);
	font-size: var(--pc-text-xl);
	font-weight: 700;
	letter-spacing: -0.018em;
	color: var(--pc-navy);
	margin: 0;
	line-height: 1.3;
}

.pcs-result__title a {
	color: inherit;
	text-decoration: none;
}

.pcs-result__title a:hover {
	color: var(--pc-primary-dark);
}

.pcs-result__text {
	margin: 0;
	color: var(--pc-text-muted);
	font-size: var(--pc-text-sm);
	line-height: 1.6;
	max-width: 74ch;
}

.pcs-result__url {
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	color: var(--pc-text-soft);
	word-break: break-all;
}

/* --- Industry detail block ------------------------------------------------------ */
.pcs-industry-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-space-8);
	padding-block: var(--pc-section-y-sm);
	border-top: 1px solid var(--pc-border);
	align-items: center;
}

@media (min-width: 900px) {
	.pcs-industry-block {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
	}

	.pcs-industry-block:nth-child(even) .pcs-industry-block__media {
		order: 2;
	}
}

.pcs-industry-block__media {
	border-radius: var(--pc-radius-md);
	overflow: hidden;
	background: var(--pc-background-alt-2);
	box-shadow: var(--pc-shadow-sm);
}

.pcs-industry-block__media img,
.pcs-industry-block__media svg {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.pcs-industry-block__title {
	margin: 0 0 var(--pc-space-4);
	font-size: var(--pc-h2);
}

.pcs-industry-block__text {
	color: var(--pc-text-muted);
	max-width: 60ch;
	margin: 0 0 var(--pc-space-6);
}

.pcs-industry-block__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	list-style: none;
	margin: var(--pc-space-6) 0 0;
	padding: 0;
}

.pcs-industry-block__links li {
	margin: 0;
}

/* --- Contact page ---------------------------------------------------------------- */
.pcs-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-space-9);
	align-items: start;
}

@media (min-width: 1000px) {
	.pcs-contact-grid {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
	}
}

.pcs-contact-card {
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	background: var(--pc-white);
	padding: var(--pc-space-7);
	display: grid;
	gap: var(--pc-space-6);
}

.pcs-contact-item {
	display: flex;
	gap: var(--pc-space-4);
	align-items: flex-start;
}

.pcs-contact-item__label {
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
	display: block;
	margin-bottom: 0.3rem;
}

.pcs-contact-item__value {
	overflow-wrap: anywhere;
	font-size: var(--pc-text-base);
	font-weight: 600;
	color: var(--pc-navy);
	line-height: 1.45;
	text-decoration: none;
	display: block;
}

a.pcs-contact-item__value:hover {
	color: var(--pc-primary-dark);
}

.pcs-contact-item__value span {
	display: block;
	font-weight: 400;
	font-size: var(--pc-text-sm);
	color: var(--pc-text-muted);
}

.pcs-map {
	aspect-ratio: 16 / 9;
	border-radius: var(--pc-radius-md);
	overflow: hidden;
	border: 1px solid var(--pc-border);
	background: var(--pc-background-alt-2);
}

.pcs-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* --- Form panel ------------------------------------------------------------------- */
.pcs-form-panel {
	background: var(--pc-white);
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	box-shadow: var(--pc-shadow-sm);
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.pcs-form-panel__head {
	margin-bottom: var(--pc-space-7);
	padding-bottom: var(--pc-space-6);
	border-bottom: 1px solid var(--pc-border);
}

.pcs-form-panel__title {
	margin: 0 0 var(--pc-space-2);
	font-size: var(--pc-h3);
}

.pcs-form-panel__text {
	margin: 0;
	color: var(--pc-text-muted);
	font-size: var(--pc-text-sm);
	line-height: 1.6;
	max-width: 60ch;
}

.pcs-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 var(--pc-space-8);
}

.pcs-fieldset:last-of-type {
	margin-bottom: var(--pc-space-6);
}

.pcs-fieldset__legend {
	display: flex;
	align-items: center;
	gap: var(--pc-space-3);
	width: 100%;
	padding: 0 0 var(--pc-space-5);
	font-family: var(--pc-font-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pc-text-soft);
}

.pcs-fieldset__legend::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--pc-border);
}

.pcs-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pc-space-4);
	padding-top: var(--pc-space-6);
	border-top: 1px solid var(--pc-border);
}

.pcs-form__note {
	font-size: var(--pc-text-xs);
	color: var(--pc-text-soft);
	line-height: 1.5;
	max-width: 42ch;
	margin: 0;
}

/* ==========================================================================
   10. GUTENBERG / BLOCK SUPPORT
   ========================================================================== */

.pcs-entry .alignwide {
	width: min(100vw - (var(--pc-gutter) * 2), 1140px);
	max-width: none;
	margin-inline: auto;
}

.pcs-entry .alignfull {
	width: auto;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

.pcs-entry .alignfull img {
	width: 100%;
	border-radius: 0;
}

.alignleft {
	float: left;
	margin: 0.35rem var(--pc-space-6) var(--pc-space-4) 0;
}

.alignright {
	float: right;
	margin: 0.35rem 0 var(--pc-space-4) var(--pc-space-6);
}

.aligncenter {
	margin-inline: auto;
	display: block;
}

.wp-block-image figcaption,
.wp-caption-text {
	font-size: var(--pc-text-sm);
	color: var(--pc-text-muted);
	margin-top: var(--pc-space-3);
	text-align: left;
	line-height: 1.5;
}

.wp-block-image img {
	border-radius: var(--pc-radius-md);
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pc-space-3);
	margin-block: var(--pc-space-7);
}

.wp-block-button__link {
	text-decoration: none;
}

.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline {
	--btn-bg: transparent;
	--btn-fg: var(--pc-navy);
	--btn-border: var(--pc-border-strong);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	--btn-bg: var(--pc-navy);
	--btn-border: var(--pc-navy);
	color: #fff;
}

.wp-block-columns {
	gap: var(--pc-space-8);
	margin-block: var(--pc-space-8);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--pc-border);
	margin-block: var(--pc-space-9);
	opacity: 1;
	max-width: none;
}

.wp-block-separator.is-style-dots {
	border: 0;
	text-align: center;
	line-height: 1;
	color: var(--pc-border-strong);
}

.wp-block-group.has-background {
	padding: clamp(1.5rem, 1rem + 2vw, 3rem);
	border-radius: var(--pc-radius-md);
}

.wp-block-cover {
	border-radius: var(--pc-radius-md);
	overflow: hidden;
	min-height: 420px;
	padding: clamp(2rem, 1.4rem + 2.6vw, 4rem);
}

.wp-block-cover .wp-block-cover__inner-container {
	max-width: 62ch;
}

.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover p {
	color: #fff;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: var(--pc-radius-md);
}

.wp-block-table {
	margin-block: var(--pc-space-8);
	overflow-x: auto;
}

.wp-block-table table {
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	overflow: hidden;
	background: var(--pc-white);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background: var(--pc-background-alt);
}

.wp-block-pullquote {
	border: 0;
	border-top: 3px solid var(--pc-primary);
	border-bottom: 1px solid var(--pc-border);
	padding: var(--pc-space-8) 0;
	margin-block: var(--pc-space-9);
	text-align: left;
}

.wp-block-pullquote blockquote {
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
}

.wp-block-pullquote p {
	font-family: var(--pc-font-heading);
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--pc-navy);
}

.wp-block-embed__wrapper {
	position: relative;
}

.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
	padding-top: 56.25%;
}

.wp-block-media-text {
	margin-block: var(--pc-space-9);
	border-radius: var(--pc-radius-md);
	overflow: hidden;
}

/* Theme colour classes generated from theme.json ---------------------------- */
.has-pc-navy-background-color { background-color: var(--pc-navy); }
.has-pc-navy-color { color: var(--pc-navy); }
.has-pc-primary-background-color { background-color: var(--pc-primary); }
.has-pc-primary-color { color: var(--pc-primary); }
.has-pc-light-background-color { background-color: var(--pc-background-alt); }
.has-pc-white-background-color { background-color: var(--pc-white); }
.has-pc-white-color { color: var(--pc-white); }
.has-pc-text-color { color: var(--pc-text); }
.has-pc-muted-color { color: var(--pc-text-muted); }

.has-pc-navy-background-color:not(.wp-block-button__link),
.has-pc-primary-background-color:not(.wp-block-button__link) {
	color: #fff;
}

.has-pc-navy-background-color h1,
.has-pc-navy-background-color h2,
.has-pc-navy-background-color h3,
.has-pc-navy-background-color h4,
.has-pc-primary-background-color h1,
.has-pc-primary-background-color h2,
.has-pc-primary-background-color h3,
.has-pc-primary-background-color h4 {
	color: #fff;
}

/* Block pattern helpers ----------------------------------------------------- */
.pcs-block-eyebrow {
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pc-primary-dark);
}

/* ==========================================================================
   11. UTILITIES, MOTION & PRINT
   ========================================================================== */
/* @public .pcs-u-*
   Public utility scale (trailing `*` marks a whole prefix family). The steps
   are intentionally complete — the spacing/flex/visibility helpers are
   authored against in the block editor, so do not prune the steps this
   theme's own templates happen not to use. */

.pcs-u-center { text-align: center; }
.pcs-u-right { text-align: right; }
.pcs-u-mt-0 { margin-top: 0 !important; }
.pcs-u-mb-0 { margin-bottom: 0 !important; }
.pcs-u-mt-4 { margin-top: var(--pc-space-4); }
.pcs-u-mt-6 { margin-top: var(--pc-space-6); }
.pcs-u-mt-8 { margin-top: var(--pc-space-8); }
.pcs-u-mt-10 { margin-top: var(--pc-space-10); }
.pcs-u-mb-6 { margin-bottom: var(--pc-space-6); }
.pcs-u-mb-8 { margin-bottom: var(--pc-space-8); }
.pcs-u-flex { display: flex; }
.pcs-u-gap-3 { gap: var(--pc-space-3); }
.pcs-u-wrap { flex-wrap: wrap; }
.pcs-u-items-center { align-items: center; }
.pcs-u-justify-between { justify-content: space-between; }
.pcs-u-relative { position: relative; }
.pcs-u-muted { color: var(--pc-text-muted); }
.pcs-u-mono {
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pcs-u-hide-mobile { display: none; }

@media (min-width: 720px) {
	.pcs-u-hide-mobile { display: initial; }
	.pcs-u-hide-desktop { display: none; }
}

.pcs-u-nowrap { white-space: nowrap; }

/* Scroll reveal -------------------------------------------------------------- */
[data-pcs-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 620ms var(--pc-ease-out), transform 620ms var(--pc-ease-out);
	will-change: opacity, transform;
}

[data-pcs-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

[data-pcs-reveal][data-pcs-delay="1"] { transition-delay: 70ms; }
[data-pcs-reveal][data-pcs-delay="2"] { transition-delay: 140ms; }
[data-pcs-reveal][data-pcs-delay="3"] { transition-delay: 210ms; }
[data-pcs-reveal][data-pcs-delay="4"] { transition-delay: 280ms; }

.pcs-no-js [data-pcs-reveal] {
	opacity: 1;
	transform: none;
}

@keyframes pcs-fade-down {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	[data-pcs-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}

	.pcs-solution:hover,
	.pcs-product-card:hover,
	.pcs-card--interactive:hover,
	.pcs-article-card:hover {
		transform: none;
	}
}

/* Forced colors ---------------------------------------------------------------- */
@media (forced-colors: active) {
	.pcs-btn,
	.pcs-card,
	.pcs-solution,
	.pcs-product-card {
		border: 1px solid ButtonBorder;
	}
}

/* Print ------------------------------------------------------------------------ */
@media print {
	.pcs-header,
	.pcs-footer,
	.pcs-drawer,
	.pcs-drawer-overlay,
	.pcs-cta,
	.pcs-skip-link,
	.pcs-btn,
	.pcs-pagination {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}

	.pcs-section {
		padding-block: 1rem;
	}
}

/* ==========================================================================
   12. LATE ADDITIONS — form grids, native details, comments, editor parity
   ========================================================================== */

/* Checkbox group used by the quote form ---------------------------------- */
.pcs-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 0.6rem 1.5rem;
}

/* Light variant of the numbered CTA steps (used inside white widgets) ----- */
.pcs-cta__steps--light li {
	color: var(--pc-text-muted);
}

.pcs-cta__steps--light li strong {
	color: var(--pc-navy);
}

.pcs-cta__steps--light li::before {
	border-color: var(--pc-border-strong);
	color: var(--pc-primary-dark);
}

/* Gallery placeholder ----------------------------------------------------- */
.pcs-gallery__placeholder {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Native <details> blocks styled as the theme accordion ------------------- */
.wp-block-details {
	border-top: 1px solid var(--pc-border);
	border-bottom: 1px solid var(--pc-border);
	margin-block: -1px 0;
	padding: 0;
}

.wp-block-details + .wp-block-details {
	margin-top: -1px;
}

.wp-block-details summary {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--pc-space-5);
	padding: var(--pc-space-5) 3rem var(--pc-space-5) 0;
	font-family: var(--pc-font-heading);
	font-size: var(--pc-text-lg);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.012em;
	color: var(--pc-navy);
	cursor: pointer;
	list-style: none;
	transition: color var(--pc-dur-fast) var(--pc-ease);
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary:hover {
	color: var(--pc-primary);
}

.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 0;
	top: calc(var(--pc-space-5) + 0.1em);
	width: 30px;
	height: 30px;
	border: 1px solid var(--pc-border-strong);
	border-radius: var(--pc-radius-sm);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6bd3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	background-size: 15px;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform var(--pc-dur) var(--pc-ease), background-color var(--pc-dur) var(--pc-ease);
}

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

.wp-block-details > *:not(summary) {
	margin-block: 0 var(--pc-space-6);
	max-width: 72ch;
	color: var(--pc-text-muted);
	font-size: var(--pc-text-sm);
	line-height: 1.7;
}

/* Block styles registered in inc/blocks.php ------------------------------- */
.wp-block-group.is-style-pcs-panel {
	border: 1px solid var(--pc-border);
	border-radius: var(--pc-radius-md);
	padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	background: var(--pc-white);
}

.wp-block-list.is-style-pcs-checklist {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: var(--pc-space-3);
}

.wp-block-list.is-style-pcs-checklist li {
	position: relative;
	padding-left: 1.85rem;
	font-size: var(--pc-text-sm);
	line-height: 1.5;
	margin: 0;
}

.wp-block-list.is-style-pcs-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 18px;
	height: 18px;
	border-radius: var(--pc-radius-sm);
	background-color: var(--pc-primary-050);
	border: 1px solid var(--pc-primary-100);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6bd3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-size: 12px;
	background-position: center;
	background-repeat: no-repeat;
}

.wp-block-table.is-style-pcs-spec th {
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.wp-block-quote.is-style-pcs-statement {
	border: 0;
	background: none;
	padding: var(--pc-space-8) 0;
	border-block: 1px solid var(--pc-border);
}

.wp-block-quote.is-style-pcs-statement p {
	font-family: var(--pc-font-heading);
	font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--pc-navy);
}

.wp-block-image.is-style-pcs-framed img {
	border: 8px solid var(--pc-white);
	border-radius: var(--pc-radius-md);
	box-shadow: var(--pc-shadow-md);
}

/* Pattern helpers --------------------------------------------------------- */
.pcs-pattern-split {
	margin-block: var(--pc-space-10);
}

.pcs-pattern-cards .pcs-card {
	padding: var(--pc-space-6);
}

.pcs-pattern-cards .pcs-card h3 {
	font-size: var(--pc-h4);
	margin-bottom: 0.4em;
}

.pcs-pattern-cards .pcs-card p {
	font-size: var(--pc-text-sm);
	color: var(--pc-text-muted);
	line-height: 1.6;
}

.pcs-pattern-cta {
	padding: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem) var(--pc-gutter);
	margin-block: var(--pc-space-10);
	text-align: left;
}

.pcs-pattern-cta p {
	color: #b7cadb;
	max-width: 56ch;
}

/* Full-width block page --------------------------------------------------- */
.pcs-entry--full > .alignfull:first-child {
	margin-top: 0;
}

.pcs-entry--full {
	padding-bottom: var(--pc-section-y);
}

.pcs-entry--full > *:not(.alignfull):not(.alignwide) {
	width: min(100% - (var(--pc-gutter) * 2), 780px);
	margin-inline: auto;
}

.pcs-entry--full > .alignwide {
	width: min(100% - (var(--pc-gutter) * 2), 1140px);
	margin-inline: auto;
}

/* Comments ---------------------------------------------------------------- */
.pcs-comments {
	padding-top: var(--pc-space-9);
	border-top: 1px solid var(--pc-border);
	max-width: 74ch;
}

.pcs-comment-list,
.pcs-comment-list .children {
	list-style: none;
	margin: 0 0 var(--pc-space-8);
	padding: 0;
}

.pcs-comment-list .children {
	margin: var(--pc-space-5) 0 0 var(--pc-space-7);
	padding-left: var(--pc-space-5);
	border-left: 2px solid var(--pc-border);
}

.pcs-comment-list li {
	margin-bottom: var(--pc-space-6);
}

.pcs-comment-list .comment-body {
	font-size: var(--pc-text-sm);
	line-height: 1.65;
}

.pcs-comment-list .comment-author {
	display: flex;
	align-items: center;
	gap: var(--pc-space-3);
	font-weight: 700;
	color: var(--pc-navy);
	margin-bottom: 0.35rem;
}

.pcs-comment-list .comment-author img {
	border-radius: var(--pc-radius-pill);
}

.pcs-comment-list .comment-metadata {
	font-family: var(--pc-font-mono);
	font-size: var(--pc-text-xs);
	letter-spacing: 0.05em;
	color: var(--pc-text-soft);
	margin-bottom: var(--pc-space-3);
}

.comment-form {
	display: grid;
	gap: var(--pc-space-5);
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--pc-text-sm);
}

.comment-form .comment-form-cookies-consent input {
	width: auto;
	margin-top: 0.25em;
}

.comment-reply-link {
	font-size: var(--pc-text-xs);
	font-weight: 700;
	text-decoration: none;
}

/* Product single: keep the page-head bar tight to the content ------------- */
.pcs-page-head--bar + .pcs-section {
	padding-top: var(--pc-section-y-sm);
}