/**
 * Practice Claim
 *
 * Design language: clean and corporate enough to sit next to an enterprise
 * health IT vendor, but warmer, per requirements section I.1. Navy carries
 * authority, cyan is reserved for action, and white space does the rest.
 *
 * Contents
 *   1.  Tokens and base
 *   2.  Buttons
 *   3.  Header and logo
 *   4.  Mega menu
 *   5.  Mobile navigation
 *   6.  Sections and layout helpers
 *   7.  Hero
 *   8.  Cards and grids
 *   9.  Stats and trust bar
 *   10. Specialty hub
 *   11. Process, FAQ and testimonials
 *   12. CTA band and footer
 *   13. Block style variations
 *   14. Motion and accessibility
 */

/* -------------------------------------------------------------------------
   1. Tokens and base
   ---------------------------------------------------------------------- */

/* Poppins is the typeface used in the supplied logo artwork, loaded only for
   the wordmark so the lockup matches the brand exactly at any size. */
@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins-300.woff2") format("woff2");
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("../fonts/poppins-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

:root {
	--pc-navy: #0a1a2f;
	--pc-navy-deep: #040a14;
	--pc-navy-mid: #14314f;
	--pc-navy-soft: #1e4a73;
	--pc-cyan: #22aecd;
	--pc-cyan-light: #63d5e6;
	--pc-cyan-deep: #0e7c9b;
	--pc-amber: #f2a63b;
	--pc-grey-50: #f5f8fa;
	--pc-grey-100: #eaf0f4;
	--pc-grey-300: #c8d4dd;
	--pc-grey-500: #6b7f8f;
	--pc-grey-700: #3d4f5c;

	--pc-radius: 18px;
	--pc-radius-sm: 12px;
	--pc-radius-lg: 26px;
	--pc-shadow-sm: 0 1px 2px rgba(10, 26, 47, 0.06), 0 2px 8px rgba(10, 26, 47, 0.04);
	--pc-shadow-md: 0 2px 4px rgba(10, 26, 47, 0.05), 0 8px 24px rgba(10, 26, 47, 0.08);
	--pc-shadow-lg: 0 4px 8px rgba(10, 26, 47, 0.04), 0 16px 48px rgba(10, 26, 47, 0.12);
	--pc-shadow-xl: 0 24px 70px rgba(10, 26, 47, 0.18);
	--pc-ease: 180ms cubic-bezier(0.4, 0, 0.2, 1);
	--pc-container: 1240px;
	--pc-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--pc-header-h: 76px;
	--pc-header-h-sm: 76px;
	--pc-logo: "Poppins", Roboto, system-ui, sans-serif;
}

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

html {
	/* Belt and braces against sideways scroll on phones. A single stray
	   transform is enough to give a page an 8px horizontal scrollbar. */
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pc-header-h) + 1.5rem);
	-webkit-text-size-adjust: 100%;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Full width bands sit flush. WordPress block gap otherwise inserts 24px
   between every one of them, which reads as an accidental seam. */
.wp-block-post-content > .alignfull,
.entry-content > .alignfull {
	margin-block-start: 0;
}

body {
	margin: 0;
	overflow-x: clip;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

.pc-icon {
	flex: none;
	display: inline-block;
	vertical-align: middle;
}

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

.pc-skip {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--pc-navy);
	color: #fff;
	border-radius: 0 0 var(--pc-radius-sm) var(--pc-radius-sm);
	font-weight: 700;
	transition: top var(--pc-ease);
}

.pc-skip:focus {
	top: 0;
}

/* -------------------------------------------------------------------------
   2. Buttons
   ---------------------------------------------------------------------- */

.pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.9rem 1.85rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: Roboto, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--pc-ease), box-shadow var(--pc-ease), background var(--pc-ease), color var(--pc-ease);
}

.pc-btn--primary {
	background: linear-gradient(120deg, var(--pc-cyan-light) 0%, var(--pc-cyan) 55%, #159fc4 100%);
	color: var(--pc-navy);
	box-shadow: 0 8px 24px rgba(34, 174, 205, 0.32);
}

.pc-btn--primary:hover,
.pc-btn--primary:focus-visible {
	color: var(--pc-navy);
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(34, 174, 205, 0.42);
}

.pc-btn--dark {
	background: var(--pc-navy);
	color: #fff;
}

.pc-btn--dark:hover,
.pc-btn--dark:focus-visible {
	background: var(--pc-navy-mid);
	color: #fff;
	transform: translateY(-2px);
}

.pc-btn--ghost {
	background: transparent;
	border-color: var(--pc-grey-300);
	color: var(--pc-navy);
}

.pc-btn--ghost:hover,
.pc-btn--ghost:focus-visible {
	border-color: var(--pc-navy);
	background: var(--pc-navy);
	color: #fff;
}

.pc-btn--on-dark {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.35);
	color: #fff;
}

.pc-btn--on-dark:hover,
.pc-btn--on-dark:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--pc-navy);
}

/* Secondary pill, used for Client Login beside the primary call to action. */
.pc-btn--outline {
	background: #fff;
	border-color: var(--pc-grey-300);
	color: var(--pc-navy);
}

.pc-btn--outline:hover,
.pc-btn--outline:focus-visible {
	border-color: var(--pc-navy);
	color: var(--pc-navy);
	transform: translateY(-1px);
	box-shadow: var(--pc-shadow-sm);
}

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

/* -------------------------------------------------------------------------
   3. Header and logo
   ---------------------------------------------------------------------- */

/* Fixed to the viewport so the bar never moves while the page scrolls. The
   body is offset by the same height, and the height stays constant so nothing
   shifts when the shadow appears. */
.pc-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

body {
	padding-top: var(--pc-header-h);
}

/* The WordPress admin bar is itself fixed, so the header sits below it. */
.admin-bar .pc-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .pc-header {
		top: 46px;
	}
}

.pc-header__bar {
	background: #fff;
	border-bottom: 1px solid var(--pc-grey-100);
	transition: box-shadow var(--pc-ease), background var(--pc-ease);
}

.pc-header.is-stuck .pc-header__bar {
	box-shadow: var(--pc-shadow-md);
	border-bottom-color: transparent;
}

.pc-header__inner {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.6vw, 1.5rem);
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--pc-gutter);
	height: var(--pc-header-h);
	transition: height var(--pc-ease);
}



.pc-logo {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	flex: none;
}

.pc-logo__mark,
.pc-logo__img {
	width: 38px;
	height: 38px;
}



.pc-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.pc-logo__name {
	font-family: var(--pc-logo);
	font-weight: 700;
	font-size: 1.12rem;
	letter-spacing: -0.01em;
	color: var(--pc-navy);
	text-transform: uppercase;
	white-space: nowrap;
}

.pc-logo__tag {
	font-family: var(--pc-logo);
	font-size: 0.62rem;
	font-weight: 300;
	color: var(--pc-grey-500);
	letter-spacing: 0.005em;
	margin-top: 0.16rem;
	white-space: nowrap;
}



.pc-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.4vw, 1.15rem);
	margin-left: auto;
	flex: none;
}

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

.pc-header__phone:hover {
	color: var(--pc-cyan-deep);
}

.pc-header__phone .pc-icon {
	color: var(--pc-cyan-deep);
}

.pc-header__login {
	padding: 0.55rem 1.15rem;
	font-size: 0.875rem;
}

/* Tap to call, shown only on mobile where the two pills are hidden. */
.pc-header__phone--compact {
	display: none;
	padding: 0.45rem;
	border-radius: 10px;
	background: var(--pc-grey-50);
	border: 1px solid var(--pc-grey-100);
	color: var(--pc-navy);
}

.pc-header__cta {
	padding: 0.55rem 1.3rem;
	font-size: 0.875rem;
}


/* -------------------------------------------------------------------------
   4. Mega menu
   ---------------------------------------------------------------------- */

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

.pc-nav__item {
	position: static;
}

.pc-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	padding: 0.5rem 0.6rem;
	background: none;
	border: 0;
	border-radius: 9px;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--pc-navy);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
	transition: background var(--pc-ease), color var(--pc-ease);
}

/* Underline grows from the centre on hover and while a panel is open. */
.pc-nav__link::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0.15rem;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--pc-cyan-light), var(--pc-cyan));
	transition: left 220ms cubic-bezier(0.4, 0, 0.2, 1), right 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pc-nav__link:hover::after,
.pc-nav__item.is-open > .pc-nav__link::after {
	left: 0.5rem;
	right: 0.5rem;
}

.pc-nav__link:hover,
.pc-nav__item.is-open > .pc-nav__link {
	background: var(--pc-grey-50);
	color: var(--pc-cyan-deep);
}

.pc-nav__chevron {
	transition: transform var(--pc-ease);
	opacity: 0.6;
}

.pc-nav__item.is-open .pc-nav__chevron {
	transform: rotate(180deg);
}

/* The panel spans the container width and hangs below the header bar. */
.pc-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	width: min(var(--pc-container), calc(100vw - 2rem));
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius-lg);
	box-shadow: var(--pc-shadow-xl);
	padding: 1.1rem 1.35rem;
	max-height: calc(100vh - var(--pc-header-h) - 1.25rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--pc-ease), transform var(--pc-ease), visibility var(--pc-ease);
	z-index: 120;
}

.pc-nav__item.is-open .pc-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(10px);
}

.pc-mega__inner {
	display: grid;
	gap: 2rem;
}

.pc-mega__inner--services,
.pc-mega__inner--compact {
	grid-template-columns: minmax(0, 1fr) 300px;
}

.pc-mega__inner--solutions {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pc-mega__heading {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pc-cyan-deep);
	margin-bottom: 0.6rem;
}

.pc-mega__grid {
	display: grid;
	gap: 0.15rem 1rem;
}

.pc-mega__grid--1 {
	grid-template-columns: minmax(0, 1fr);
}

.pc-mega__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pc-mega__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pc-mega__stack {
	display: flex;
	flex-direction: column;
}

.pc-mega__link {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.42rem 0.55rem;
	border-radius: 9px;
	text-decoration: none;
	color: var(--pc-navy);
	transition: background var(--pc-ease), transform var(--pc-ease);
}

.pc-mega__link:hover {
	background: var(--pc-grey-50);
	text-decoration: none;
	transform: translateX(2px);
}

.pc-mega__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(99, 213, 230, 0.16), rgba(34, 174, 205, 0.1));
	color: var(--pc-cyan-deep);
	transition: background var(--pc-ease), color var(--pc-ease);
}

.pc-mega__link:hover .pc-mega__icon {
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
	color: var(--pc-navy);
}

.pc-mega__text {
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	min-width: 0;
}

.pc-mega__title {
	font-weight: 650;
	font-size: 0.855rem;
	line-height: 1.3;
}

.pc-mega__desc {
	font-size: 0.735rem;
	line-height: 1.35;
	color: var(--pc-grey-500);
}

/* Specialties panel, eight categories in four columns. */
/* Columns are packed in PHP so they stay balanced, see pcc_panel_specialties. */
.pc-mega__cats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 1.4rem;
	align-items: start;
}

.pc-mega__catcol {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	min-width: 0;
}

.pc-mega__cat .pc-mega__heading {
	margin-bottom: 0.3rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--pc-grey-100);
}

.pc-mega__cat .pc-mega__link {
	padding: 0.13rem 0.35rem;
}

.pc-mega__cat .pc-mega__title {
	font-size: 0.775rem;
	font-weight: 550;
	line-height: 1.25;
}

.pc-mega__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 0.1rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--pc-grey-100);
}

.pc-mega__viewall {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
	color: var(--pc-cyan-deep);
	text-decoration: none;
}

.pc-mega__viewall:hover {
	gap: 0.7rem;
	color: var(--pc-navy);
}

.pc-mega__footer-note {
	font-size: 0.85rem;
	color: var(--pc-grey-500);
}

/* The AI column carries equal weight to software, requirements C.3. */
.pc-mega__col--half {
	display: flex;
	flex-direction: column;
}

.pc-mega__col--half.is-ai {
	background: linear-gradient(150deg, rgba(99, 213, 230, 0.08), rgba(34, 174, 205, 0.03));
	border: 1px solid rgba(34, 174, 205, 0.16);
	border-radius: var(--pc-radius);
	padding: 1.25rem;
	margin: -0.35rem;
}

.pc-mega__col--half .pc-mega__promo {
	margin-top: 1.25rem;
}

/* Featured card: photograph behind a navy gradient so the copy stays legible
   whatever image the client uploads. */
.pc-mega__promo {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 190px;
	padding: 1.15rem 1.25rem;
	border-radius: var(--pc-radius);
	background: linear-gradient(155deg, var(--pc-navy-mid) 0%, var(--pc-navy) 60%, var(--pc-navy-deep) 100%);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.pc-mega__promo-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-color: var(--pc-navy);
	background-size: cover;
	background-position: center;
	/* Cool the imagery slightly so any photograph the client uploads sits with
	   the brand rather than fighting it. */
	filter: saturate(0.85) contrast(1.02);
	opacity: 0;
	transition: opacity 320ms ease;
}

.pc-mega__promo-media.is-loaded {
	opacity: 1;
}

/* Swapping images cross fades rather than cutting. */
.pc-mega__promo-media.is-swapping {
	opacity: 0.28;
}

.pc-mega__promo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(160deg, rgba(10, 26, 47, 0.58) 0%, rgba(10, 26, 47, 0.82) 52%, rgba(4, 10, 20, 0.94) 100%);
}

.pc-mega__promo-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pc-mega__promo-eyebrow {
	font-size: 0.7rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--pc-cyan-light);
}

.pc-mega__promo-title {
	display: block;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0.6rem 0 0.5rem;
	color: #fff;
}

.pc-mega__promo-body {
	display: block;
	font-size: 0.79rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 1.15rem;
}

.pc-mega__promo-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: auto;
	color: var(--pc-cyan-light);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	line-height: 1.3;
}

.pc-mega__promo-cta:hover {
	gap: 0.7rem;
	color: #fff;
}

/* -------------------------------------------------------------------------
   5. Mobile navigation
   ---------------------------------------------------------------------- */

.pc-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--pc-grey-50);
	border: 1px solid var(--pc-grey-100);
	border-radius: 12px;
	cursor: pointer;
}

.pc-burger__box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 20px;
}

.pc-burger__box span {
	display: block;
	height: 2px;
	background: var(--pc-navy);
	border-radius: 2px;
	transition: transform var(--pc-ease), opacity var(--pc-ease);
}

.pc-burger[aria-expanded="true"] .pc-burger__box span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.pc-burger[aria-expanded="true"] .pc-burger__box span:nth-child(2) {
	opacity: 0;
}

.pc-burger[aria-expanded="true"] .pc-burger__box span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.pc-mobile {
	position: fixed;
	inset: var(--pc-header-h) 0 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	overflow: hidden;
	z-index: 99;
}

.pc-mobile[hidden] {
	display: none;
}

.pc-mobile__scroll {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.25rem var(--pc-gutter) 1rem;
}

.pc-mobile__actions {
	display: grid;
	gap: 0.7rem;
	padding: 1.15rem var(--pc-gutter) calc(1.15rem + env(safe-area-inset-bottom));
	border-top: 1px solid var(--pc-grey-100);
	background: var(--pc-grey-50);
}

.pc-mobile__login {
	text-align: center;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--pc-grey-500);
	text-decoration: none;
}

/* Accordion behaviour once the nav is moved into the mobile panel. */
.pc-mobile .pc-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.pc-mobile .pc-nav__item {
	border-bottom: 1px solid var(--pc-grey-100);
}

.pc-mobile .pc-nav__link {
	width: 100%;
	justify-content: space-between;
	padding: 1rem 0.25rem;
	border-radius: 0;
	font-size: 1.05rem;
	font-weight: 700;
}

.pc-mobile .pc-nav__link:hover,
.pc-mobile .pc-nav__item.is-open > .pc-nav__link {
	background: none;
}

/* Selector deliberately carries the .is-open class too. The desktop rule
   `.pc-nav__item.is-open .pc-mega` also has three classes, so without matching
   its weight the panel keeps translateX(-50%) and slides off screen on mobile. */
.pc-mobile .pc-nav__item .pc-mega,
.pc-mobile .pc-nav__item.is-open .pc-mega {
	position: static;
	transform: none;
	left: auto;
	right: auto;
	width: 100%;
	padding: 0 0 1rem;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	max-height: none;
	overflow: visible;
}

.pc-mobile .pc-nav__item:not(.is-open) .pc-mega {
	display: none;
}

.pc-mobile .pc-mega__inner,
.pc-mobile .pc-mega__cats,
.pc-mobile .pc-mega__grid {
	display: block;
}

.pc-mobile .pc-mega__cat {
	margin-bottom: 1.15rem;
}

.pc-mobile .pc-mega__promo {
	margin-top: 1rem;
}

.pc-mobile .pc-mega__link {
	padding: 0.55rem 0.25rem;
}

/* Persistent bottom action bar, requirements C.9. */
.pc-actionbar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 98;
	gap: 0.6rem;
	padding: 0.6rem var(--pc-gutter) calc(0.6rem + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--pc-grey-100);
	box-shadow: 0 -4px 24px rgba(10, 26, 47, 0.08);
}

.pc-actionbar__call,
.pc-actionbar__demo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.8rem 1rem;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
}

.pc-actionbar__call {
	flex: none;
	width: 42%;
	border: 2px solid var(--pc-grey-300);
	color: var(--pc-navy);
}

.pc-actionbar__demo {
	flex: 1;
	background: linear-gradient(120deg, var(--pc-cyan-light), var(--pc-cyan));
	color: var(--pc-navy);
}

body.pc-menu-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   6. Sections and layout helpers
   ---------------------------------------------------------------------- */

.pc-section {
	padding-block: clamp(2.5rem, 4.2vw, 4.25rem);
}

.pc-section--tight {
	padding-block: clamp(2rem, 3vw, 3rem);
}

.pc-section--grey {
	background: var(--pc-grey-50);
}

.pc-section--tint {
	background: linear-gradient(170deg, #f7fbfd 0%, #eaf4f9 100%);
	color: var(--pc-grey-700);
	border-block: 1px solid var(--pc-grey-100);
}

.pc-section--tint h1,
.pc-section--tint h2,
.pc-section--tint h3,
.pc-section--tint h4 {
	color: var(--pc-navy);
}

.pc-wrap {
	max-width: var(--pc-container);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

.pc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--pc-cyan-deep);
	margin-bottom: 0.9rem;
}

.pc-section--tint .pc-eyebrow {
	color: var(--pc-cyan-deep);
}

.pc-lede {
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.65;
	color: var(--pc-grey-500);
	max-width: 62ch;
}

.pc-section--tint .pc-lede {
	color: var(--pc-grey-500);
}

/* The constrained layout gives every child auto side margins, which centres
   section headings. Section intros are left aligned unless explicitly centred,
   so wrappers use flow layout and cap the text measure on their children. */
/* Section intros are centred throughout. The eyebrow, heading and lede sit as
   one centred column above the content they introduce, which keeps long pages
   with many bands reading calmly. Card and list copy stays left aligned, since
   centring body text hurts readability once it runs past a line or two. */
.pc-head {
	margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
	text-align: center;
}

/* The wrapper spans the wide width so it lines up with the grids below. The
   text measure is capped on the children instead. */
.pc-head > * {
	max-width: 700px;
	margin-inline: auto;
}

/* Retained so existing markup using the explicit modifier keeps working. */
.pc-head--center > * {
	margin-inline: auto;
}



.pc-head--center .pc-lede {
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   7. Hero
   ---------------------------------------------------------------------- */

.pc-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(168deg, #ffffff 0%, #f2f9fc 48%, #e3f1f7 100%);
	color: var(--pc-grey-700);
	padding-block: clamp(2rem, 3.4vw, 3.25rem);
}

/* Soft cyan glow and a faint grid, so the navy does not read as a flat slab. */
.pc-hero::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 70vw;
	height: 70vw;
	max-width: 900px;
	max-height: 900px;
	background: radial-gradient(circle, rgba(34, 174, 205, 0.22) 0%, rgba(34, 174, 205, 0) 64%);
	pointer-events: none;
}

.pc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(10, 26, 47, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(10, 26, 47, 0.045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
	pointer-events: none;
}

/* Columns block handles the split so the client can rebalance it. */
.pc-hero__inner {
	position: relative;
	z-index: 1;
	align-items: center;
	gap: clamp(2rem, 5vw, 4rem);
}

.pc-hero h1 {
	color: var(--pc-navy);
	margin: 0 0 0.9rem;
	font-size: clamp(1.85rem, 3vw, 2.7rem);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.022em;
}

.pc-hero__accent {
	color: var(--pc-cyan-deep);
}

.pc-hero__lede {
	font-size: clamp(0.98rem, 1.2vw, 1.08rem);
	line-height: 1.6;
	color: var(--pc-grey-500);
	max-width: 52ch;
	margin: 0 0 1.4rem;
}

.pc-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.9rem;
	margin-bottom: 1.1rem;
	border: 1px solid rgba(34, 174, 205, 0.32);
	border-radius: 999px;
	background: rgba(34, 174, 205, 0.09);
	font-size: 0.775rem;
	font-weight: 650;
	color: var(--pc-cyan-deep);
}

.pc-hero__badge .pc-icon {
	color: var(--pc-cyan-light);
}

.pc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem;
}

.pc-hero__note {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 1.1rem;
	font-size: 0.8rem;
	color: var(--pc-grey-500);
}

.pc-hero__note .pc-icon {
	color: var(--pc-cyan-deep);
}

/* pc-btn--on-dark is reserved for genuinely dark surfaces, such as the video
   stat band or the footer. Every button on a light section uses --ghost. */

.pc-hero__art {
	position: relative;
}


/* Interior page hero: same navy treatment as the homepage, less height, no
   illustration column. */
.pc-hero--page {
	padding-block: clamp(2.5rem, 5vw, 4.25rem);
}

.pc-hero--page h1 {
	font-size: clamp(1.9rem, 3.2vw, 2.7rem);
	font-weight: 700;
	letter-spacing: -0.022em;
	max-width: 22ch;
}

.pc-hero--page .pc-hero__lede {
	margin-bottom: 1.6rem;
}

.pc-crumbs {
	font-size: 0.85rem;
	color: var(--pc-grey-500);
	margin: 0 0 0.7rem;
}

.pc-crumbs a {
	color: var(--pc-cyan-deep);
	font-weight: 600;
	text-decoration: none;
}

.pc-crumbs a:hover {
	text-decoration: underline;
}

.pc-compliance {
	max-width: 70ch;
	margin-inline: auto;
	font-size: 0.86rem;
	color: var(--pc-grey-500);
}



/* --- Hero rotator ----------------------------------------------------------
   Three slides stacked in a single grid cell, so the hero is always as tall as
   its tallest slide and nothing jumps when the slide changes. The outgoing
   slide fades and drifts out while the incoming one drifts in. Only the active
   slide is in the accessibility tree and the tab order. */

.pc-hero--home {
	position: relative;
}

/* Every slide occupies the same grid cell, so WordPress block gap would shift
   slides two and three down by 24px against the first. */
.pc-hero--home > .pc-hero__slide {
	margin-block-start: 0;
}

/* Stacking applies as soon as the pc-js flag is set in the head, so the active
   slide is correct on the first paint. Without JavaScript the slides simply
   stack and every word stays readable. */
.pc-js .pc-hero--home {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.pc-js .pc-hero__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: translateX(var(--pc-slide-shift, 36px));
	transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 620ms;
	pointer-events: none;
}

.pc-js .pc-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0s;
	pointer-events: auto;
	position: relative;
	z-index: 2;
}

/* The slide leaving drifts the other way, so the pair reads as movement
   rather than a crossfade in place. */
.pc-js .pc-hero__slide.is-leaving {
	opacity: 0;
	visibility: visible;
	transform: translateX(calc(var(--pc-slide-shift, 36px) * -1));
	z-index: 1;
}

/* Second and third slides carry an h2 for document outline reasons, but they
   are the same visual weight as the first slide's h1. */
.pc-hero__slide h2.wp-block-heading {
	font-size: clamp(1.85rem, 3vw, 2.7rem);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.022em;
	color: var(--pc-navy);
	margin: 0 0 0.9rem;
}

/* Controls */
.pc-hero__controls {
	position: absolute;
	left: 50%;
	bottom: clamp(0.9rem, 2vw, 1.6rem);
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: var(--pc-container);
	width: 100%;
	padding-inline: var(--pc-gutter);
	justify-content: flex-start;
}

.pc-hero__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.pc-hero__dot {
	width: 30px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: rgba(10, 26, 47, 0.18);
	cursor: pointer;
	transition: background var(--pc-ease), width var(--pc-ease);
}

.pc-hero__dot:hover {
	background: rgba(10, 26, 47, 0.34);
}

.pc-hero__dot[aria-current="true"] {
	width: 46px;
	background: linear-gradient(90deg, var(--pc-cyan-light), var(--pc-cyan-deep));
}

.pc-hero__pause {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid rgba(10, 26, 47, 0.16);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.7);
	color: var(--pc-navy);
	cursor: pointer;
	transition: background var(--pc-ease), border-color var(--pc-ease);
}

.pc-hero__pause:hover {
	background: #fff;
	border-color: var(--pc-navy);
}

.pc-hero__pause svg {
	width: 11px;
	height: 11px;
}

@media (prefers-reduced-motion: reduce) {
	.pc-js .pc-hero__slide {
		transition: opacity 1ms linear, visibility 0s linear 1ms;
		transform: none !important;
	}
}

@media (max-width: 640px) {
	.pc-hero__controls {
		justify-content: center;
	}
}

/* --- Home hero composition -------------------------------------------------
   Copy and call to action on the left, photograph on the right inside a masked
   shape with a brand gradient behind it and two proof cards overlapping the
   edge. The whole block is sized to sit above the fold at 1920x825. */

.pc-hero--home .pc-hero__inner {
	min-height: min(64vh, 500px);
}

.pc-hero__proof {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.6rem;
	margin: 1.3rem 0 0;
	padding: 0;
	list-style: none;
}

.pc-hero__proof li {
	position: relative;
	font-size: 0.8rem;
	color: var(--pc-grey-500);
	padding-left: 1.1rem;
}

.pc-hero__proof li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pc-cyan);
}

.pc-hero__proof strong {
	display: block;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--pc-navy);
	letter-spacing: -0.01em;
}

.pc-hero__art {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 380px;
}

/* Gradient shape sitting behind the portrait. */
.pc-hero__art::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(104%, 430px);
	height: 97%;
	margin-left: -14px;
	border-radius: 46% 46% 30% 30% / 38% 38% 8% 8%;
	background: linear-gradient(160deg, var(--pc-cyan-light) 0%, var(--pc-cyan) 55%, var(--pc-cyan-deep) 100%);
	opacity: 0.92;
}

/* The ring breathes continuously: one smooth swell in and out, no pause between
   cycles, so it reads as a steady rhythm rather than a beat with a gap in it. */
.pc-hero__art::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4%;
	transform: translateX(-50%) scale(1);
	transform-origin: 50% 82%;
	width: min(118%, 486px);
	height: 99%;
	border: 2px solid rgba(34, 174, 205, 0.5);
	border-radius: 46% 46% 30% 30% / 38% 38% 8% 8%;
	pointer-events: none;
	animation: pcRingPulse 2.4s ease-in-out infinite;
}

@keyframes pcRingPulse {
	0% {
		transform: translateX(-50%) scale(1);
		border-color: rgba(34, 174, 205, 0.42);
		box-shadow: 0 0 10px 0 rgba(34, 174, 205, 0.14), inset 0 0 20px rgba(99, 213, 230, 0.1);
	}
	50% {
		transform: translateX(-50%) scale(1.028);
		border-color: rgba(99, 213, 230, 0.95);
		box-shadow: 0 0 34px 7px rgba(34, 174, 205, 0.3), inset 0 0 32px rgba(99, 213, 230, 0.24);
	}
	100% {
		transform: translateX(-50%) scale(1);
		border-color: rgba(34, 174, 205, 0.42);
		box-shadow: 0 0 10px 0 rgba(34, 174, 205, 0.14), inset 0 0 20px rgba(99, 213, 230, 0.1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-hero__art::after {
		animation: none;
		border-color: rgba(34, 174, 205, 0.45);
	}
}

.pc-hero__figure {
	position: relative;
	z-index: 2;
	margin: 0;
	width: min(100%, 400px);
	align-self: flex-end;
}

.pc-hero__figure img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(58vh, 470px);
	object-fit: cover;
	object-position: 50% 12%;
	/* Matches the shape behind it and fades the photo's own background out at
	   the base so it reads as part of the composition. */
	border-radius: 46% 46% 30% 30% / 38% 38% 8% 8%;
	mask-image: linear-gradient(180deg, #000 74%, rgba(0, 0, 0, 0.3) 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 74%, rgba(0, 0, 0, 0.3) 92%, transparent 100%);
}

/* Cool wash over the photograph, warmest at the base where it meets the
   gradient shape, so the studio grey blends into the brand colour. */
.pc-hero__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 46% 46% 30% 30% / 38% 38% 8% 8%;
	background:
		linear-gradient(180deg, rgba(34, 174, 205, 0) 46%, rgba(34, 174, 205, 0.42) 88%, rgba(14, 124, 155, 0.55) 100%),
		linear-gradient(120deg, rgba(99, 213, 230, 0.16), rgba(34, 174, 205, 0.04));
	mask-image: linear-gradient(180deg, #000 74%, rgba(0, 0, 0, 0.3) 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, #000 74%, rgba(0, 0, 0, 0.3) 92%, transparent 100%);
	pointer-events: none;
}

.pc-hero__float {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.85rem;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(10, 26, 47, 0.07);
	border-radius: 13px;
	box-shadow: 0 10px 30px rgba(10, 26, 47, 0.13);
	white-space: nowrap;
}

.pc-hero__float--a {
	left: -4%;
	top: 22%;
}

.pc-hero__float--b {
	right: -6%;
	bottom: 20%;
}

.pc-hero__float-icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 9px;
	background: rgba(34, 174, 205, 0.14);
	color: var(--pc-cyan-deep);
}

.pc-hero__float-icon svg {
	width: 17px;
	height: 17px;
}

.pc-hero__float-icon--good {
	background: rgba(34, 174, 205, 0.16);
}

.pc-hero__float-text strong {
	display: block;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 0.83rem;
	font-weight: 800;
	color: var(--pc-navy);
	line-height: 1.2;
}

.pc-hero__float-text em {
	display: block;
	font-style: normal;
	font-size: 0.71rem;
	color: var(--pc-grey-500);
	margin-top: 0.1rem;
}

@media (max-width: 1200px) {
	.pc-hero--home .pc-hero__inner {
		min-height: 0;
	}

	.pc-hero__art {
		min-height: 320px;
		margin-top: 1.5rem;
	}

	.pc-hero__float--a {
		left: 0;
	}

	.pc-hero__float--b {
		right: 0;
	}
}

@media (max-width: 640px) {
	.pc-hero__float {
		transform: scale(0.88);
	}

	.pc-hero__float--a {
		left: -2%;
	}

	.pc-hero__float--b {
		right: -2%;
	}
}

/* -------------------------------------------------------------------------
   8. Cards and grids
   ---------------------------------------------------------------------- */

.pc-cards {
	display: grid;
	gap: 1.25rem;
}

.pc-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pc-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pc-card {
	display: flex;
	flex-direction: column;
	padding: 1.3rem;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	text-decoration: none;
	color: inherit;
	transition: transform var(--pc-ease), box-shadow var(--pc-ease), border-color var(--pc-ease);
}

.pc-card:hover {
	transform: translateY(-4px);
	border-color: rgba(34, 174, 205, 0.35);
	box-shadow: var(--pc-shadow-lg);
	text-decoration: none;
}

.pc-card__icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 0.85rem;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(99, 213, 230, 0.18), rgba(34, 174, 205, 0.1));
	color: var(--pc-cyan-deep);
	transition: background var(--pc-ease), color var(--pc-ease);
}

.pc-card:hover .pc-card__icon {
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
	color: var(--pc-navy);
}

.pc-card__title {
	font-family: Roboto, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pc-navy);
	margin: 0 0 0.45rem;
}

.pc-card__text {
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--pc-grey-500);
	margin: 0 0 1.15rem;
}

.pc-card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--pc-cyan-deep);
	transition: gap var(--pc-ease);
}

.pc-card:hover .pc-card__more {
	gap: 0.65rem;
}

/* -------------------------------------------------------------------------
   9. Stats and trust bar
   ---------------------------------------------------------------------- */

.pc-trustbar {
	border-block: 1px solid var(--pc-grey-100);
	background: #fff;
}

/* Built from core columns so the client can add or remove items. These rules
   handle spacing and colour only, and leave layout to the columns block. */
.pc-trustbar__inner {
	padding-block: 1.75rem;
	gap: 1rem;
}

.pc-trust {
	text-align: center;
	margin: 0;
}

.pc-trust__value {
	display: block;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--pc-navy);
	line-height: 1.15;
}

.pc-trust__label {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8rem;
	color: var(--pc-grey-500);
	line-height: 1.35;
}

.pc-stats {
	gap: 1.25rem;
	perspective: 1400px;
}

.pc-stat {
	padding: 1.75rem 1.5rem;
	border-radius: var(--pc-radius);
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	box-shadow: var(--pc-shadow-sm);
}

.pc-stat__value {
	display: block;
	font-family: Roboto, system-ui, sans-serif;
	font-size: clamp(2.1rem, 3.6vw, 2.9rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1;
	background: linear-gradient(100deg, var(--pc-cyan-deep), var(--pc-cyan));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 0.45rem;
	white-space: nowrap;
}

.pc-stat__label {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--pc-grey-500);
}

/* On a light background the stat card inverts. */
.pc-stats--light .pc-stat {
	background: #fff;
	border-color: var(--pc-grey-100);
	box-shadow: var(--pc-shadow-sm);
}

.pc-stats--light .pc-stat__label {
	color: var(--pc-grey-500);
}







/* --- AI agent cards --------------------------------------------------------
   A depth treatment for the nine agent cards: they tilt slightly toward the
   pointer and carry a soft light that follows it. Deliberately restrained,
   because this sits over the section that explains human oversight and a card
   that lurches around would undercut the message. Every value here is small
   enough to register as texture rather than movement, the tilt never blocks a
   click, and the whole effect is dropped under reduced motion. */

.pc-aicards {
	perspective: 1400px;
}

.pc-aicards .pc-card {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 300ms ease;
}

.pc-aicards .pc-card.is-tilting {
	/* Follows the pointer, so the easing is short enough not to lag behind it. */
	transition: box-shadow 300ms ease, border-color 300ms ease;
}

/* Light source tracking the pointer. Sits above the card background but below
   its content, and never intercepts a click. */
.pc-aicards .pc-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: radial-gradient(
		380px circle at var(--pc-gx, 50%) var(--pc-gy, 0%),
		rgba(34, 174, 205, 0.16),
		rgba(34, 174, 205, 0) 62%
	);
	opacity: 0;
	transition: opacity 380ms ease;
	pointer-events: none;
}

.pc-aicards .pc-card:hover::before,
.pc-aicards .pc-card:focus-visible::before {
	opacity: 1;
}

.pc-aicards .pc-card > * {
	position: relative;
	z-index: 1;
}

.pc-aicards .pc-card:hover {
	border-color: rgba(34, 174, 205, 0.45);
	box-shadow: 0 18px 44px rgba(10, 26, 47, 0.16), 0 0 0 1px rgba(34, 174, 205, 0.14);
}

/* The icon lifts out of the card plane, which is what sells the depth. */
.pc-aicards .pc-card__icon {
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background 300ms ease, color 300ms ease;
}

.pc-aicards .pc-card:hover .pc-card__icon {
	transform: translateZ(26px) scale(1.06);
}

.pc-aicards .pc-card__title,
.pc-aicards .pc-card__more {
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-aicards .pc-card:hover .pc-card__title {
	transform: translateZ(14px);
}

.pc-aicards .pc-card:hover .pc-card__more {
	transform: translateZ(10px);
}

/* Entrance: cards arrive from slightly below and behind, one after another.
   The stagger index is set by site.js on every grid, so this only changes the
   shape of the movement, not the timing. */
.pc-aicards.pc-stagger > * {
	transform: translateY(26px) rotateX(7deg) scale(0.97);
	transform-origin: 50% 100%;
	transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-aicards.pc-stagger.is-visible > * {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.pc-aicards .pc-card,
	.pc-aicards .pc-card__icon,
	.pc-aicards .pc-card__title,
	.pc-aicards .pc-card__more {
		transform: none !important;
		transition: none;
	}

	.pc-aicards .pc-card::before {
		display: none;
	}
}

/* Tilt is a pointer affordance, so it is not applied on touch. */
@media (hover: none) {
	.pc-aicards .pc-card {
		transform: none !important;
	}
}

/* --- Expanding card slider -------------------------------------------------
   Horizontal track where the active card widens and reveals its detail. The
   timings match the reference: 0.32s ease-out on the width, 0.5s on the colour
   and content fade, which is what makes it feel unhurried rather than snappy.
   Hover, focus and the arrow buttons all drive the same active state. */

.pc-slider {
	position: relative;
	margin-top: 0.5rem;
}

/* The pointer drives the scroll position, so signal that the track is a
   surface you move through rather than a static row. */
.pc-slider:hover .pc-slider__track {
	cursor: ew-resize;
}

.pc-slider__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-behavior: smooth;
	/* Bleed to the viewport edge so the track reads as continuing off screen. */
	margin-inline: calc(50% - 50vw);
	padding-inline: max(var(--pc-gutter), calc(50vw - var(--pc-container) / 2));
	padding-block: 0.5rem 1.25rem;
}

.pc-slider__viewport::-webkit-scrollbar {
	display: none;
}

.pc-slider__track {
	display: flex;
	gap: 1.15rem;
	width: max-content;
}

.pc-slide {
	position: relative;
	z-index: 0;
	flex: 0 0 282px;
	width: 282px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 358px;
	padding: 0;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: linear-gradient(180deg, #0b111a 0%, #0d131c 35%, #142033 62%, #1b2c44 100%);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	transition: flex-basis 0.32s ease-out, width 0.32s ease-out, border-color 0.5s ease;
}

/* Brand gradient washes in behind the active card. */
.pc-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 16px;
	/* A tint rather than a fill. The card now carries a photograph, and an
	   opaque gradient here hid it precisely on the active card. */
	background: linear-gradient(180deg, rgba(18, 103, 138, 0.5) -30%, rgba(13, 44, 68, 0.32) 55%, rgba(10, 26, 47, 0.12) 120%);
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.pc-slide.is-active {
	flex-basis: 430px;
	width: 430px;
	border-color: rgba(99, 213, 230, 0.45);
}

.pc-slide.is-active::before {
	opacity: 1;
}

.pc-slide__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 13px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: var(--pc-cyan-light);
	transition: background 0.5s ease, color 0.5s ease, transform 0.5s ease;
}

.pc-slide.is-active .pc-slide__icon {
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
	color: var(--pc-navy);
	transform: translateY(-2px);
}

.pc-slide__body {
	display: block;
	margin-top: auto;
	padding-top: 1.25rem;
}

.pc-slide__title {
	display: block;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #fff;
}

.pc-slide__text {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.5s ease;
}

.pc-slide.is-active .pc-slide__text {
	color: rgba(255, 255, 255, 0.82);
}

/* The call to action only appears once a card is active, which is what gives
   the expansion something to reveal. */
.pc-slide__more {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--pc-cyan-light);
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transition: opacity 0.5s ease, max-height 0.5s ease, margin-top 0.5s ease;
}

.pc-slide.is-active .pc-slide__more {
	opacity: 1;
	max-height: 2rem;
	margin-top: 0.9rem;
}


/* Photograph behind the card, dimmed so the copy stays readable. Brightens as
   the card becomes active, which is what gives the expansion its lift. */
.pc-slide__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	opacity: 0.4;
	transform: scale(1.03);
	filter: saturate(0.75);
	transition: opacity 0.5s ease, transform 0.6s ease, filter 0.5s ease;
}

.pc-slide.is-active .pc-slide__media {
	opacity: 0.85;
	transform: scale(1);
	filter: saturate(1);
}

.pc-slide__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.5rem 1.4rem;
}

/* Gradient floor so text sits on a dark base whatever the photograph. */
.pc-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(4, 10, 20, 0.15) 0%, rgba(4, 10, 20, 0.55) 45%, rgba(4, 10, 20, 0.9) 100%);
	pointer-events: none;
}

/* Detail lines, hidden until the card opens. */
.pc-slide__points {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;
}

.pc-slide.is-active .pc-slide__points {
	max-height: 8rem;
	opacity: 1;
	margin-top: 0.8rem;
}

.pc-slide__points li {
	position: relative;
	padding-left: 1.15rem;
	margin-bottom: 0.35rem;
	font-size: 0.83rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.78);
}

.pc-slide__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pc-cyan-light);
}

/* Hovering near either edge scrolls the track continuously, the behaviour on
   the reference site. Pointer events only: these are decorative to a reader. */
/* Controls */
.pc-slider__controls {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.pc-slider__btn {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--pc-grey-300);
	border-radius: 50%;
	background: #fff;
	color: var(--pc-navy);
	cursor: pointer;
	transition: background var(--pc-ease), border-color var(--pc-ease), color var(--pc-ease), opacity var(--pc-ease);
}

.pc-slider__btn:hover:not(:disabled) {
	background: var(--pc-navy);
	border-color: var(--pc-navy);
	color: #fff;
}

.pc-slider__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.pc-slider__prev-icon {
	transform: rotate(180deg);
}

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

	.pc-slide,
	.pc-slide::before,
	.pc-slide__more,
	.pc-slide__icon {
		transition: none;
	}
}

/* Below the tablet breakpoint the track becomes a plain scroller with every
   card at one size, since expand on hover has no meaning on touch. */
@media (max-width: 781px) {
	.pc-slide,
	.pc-slide.is-active {
		flex-basis: 262px;
		width: 262px;
	}

	.pc-slide__points {
		max-height: 8rem;
		opacity: 1;
		margin-top: 0.8rem;
	}

	.pc-slide__media {
		opacity: 0.65;
	}

	.pc-slide__more {
		opacity: 1;
		max-height: 2rem;
		margin-top: 0.9rem;
	}

	.pc-slide::before {
		opacity: 1;
	}

	.pc-slider__controls {
		justify-content: center;
	}
}

/* --- Role coverage ---------------------------------------------------------
   Who in the practice each benefit lands on. Icons are CSS masks keyed off a
   data attribute, so every card stays plain editable blocks in wp-admin. */

.pc-roles {
	gap: 1.25rem;
}

.pc-role,
.pc-secure__item {
	position: relative;
	padding: 1.5rem 1.4rem;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	transition: transform var(--pc-ease), box-shadow var(--pc-ease), border-color var(--pc-ease);
}

.pc-role:hover,
.pc-secure__item:hover {
	transform: translateY(-4px);
	border-color: rgba(34, 174, 205, 0.32);
	box-shadow: var(--pc-shadow-lg);
}

.pc-role::before,
.pc-secure__item::before {
	content: "";
	display: block;
	width: 42px;
	height: 42px;
	margin-bottom: 0.9rem;
	border-radius: 12px;
	background-color: var(--pc-cyan-deep);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2v5a4.5 4.5 0 0 0 9 0V2'/%3E%3Cpath d='M3.5 2h3'/%3E%3Cpath d='M12.5 2h3'/%3E%3Cpath d='M9.5 11.5V15a5 5 0 0 0 10 0v-1.5'/%3E%3Ccircle cx='19.5' cy='11' r='2.2'/%3E%3C/svg%3E") center / 22px no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2v5a4.5 4.5 0 0 0 9 0V2'/%3E%3Cpath d='M3.5 2h3'/%3E%3Cpath d='M12.5 2h3'/%3E%3Cpath d='M9.5 11.5V15a5 5 0 0 0 10 0v-1.5'/%3E%3Ccircle cx='19.5' cy='11' r='2.2'/%3E%3C/svg%3E") center / 22px no-repeat;
}

.pc-role[data-pc-icon="stethoscope"]::before,
.pc-secure__item[data-pc-icon="stethoscope"]::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2v5a4.5 4.5 0 0 0 9 0V2'/%3E%3Cpath d='M3.5 2h3'/%3E%3Cpath d='M12.5 2h3'/%3E%3Cpath d='M9.5 11.5V15a5 5 0 0 0 10 0v-1.5'/%3E%3Ccircle cx='19.5' cy='11' r='2.2'/%3E%3C/svg%3E") center / 22px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2v5a4.5 4.5 0 0 0 9 0V2'/%3E%3Cpath d='M3.5 2h3'/%3E%3Cpath d='M12.5 2h3'/%3E%3Cpath d='M9.5 11.5V15a5 5 0 0 0 10 0v-1.5'/%3E%3Ccircle cx='19.5' cy='11' r='2.2'/%3E%3C/svg%3E") center / 22px no-repeat; }
.pc-role[data-pc-icon="users"]::before,
.pc-secure__item[data-pc-icon="users"]::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.8a3.5 3.5 0 0 1 0 6.4'/%3E%3Cpath d='M17.5 14.2A6.5 6.5 0 0 1 21.5 20'/%3E%3C/svg%3E") center / 22px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.8a3.5 3.5 0 0 1 0 6.4'/%3E%3Cpath d='M17.5 14.2A6.5 6.5 0 0 1 21.5 20'/%3E%3C/svg%3E") center / 22px no-repeat; }
.pc-role[data-pc-icon="receipt"]::before,
.pc-secure__item[data-pc-icon="receipt"]::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12v20l-2.5-1.8L13 22l-2.5-1.8L8 22l-2-1.5z'/%3E%3Cpath d='M9.5 8h5'/%3E%3Cpath d='M9.5 12h5'/%3E%3C/svg%3E") center / 22px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12v20l-2.5-1.8L13 22l-2.5-1.8L8 22l-2-1.5z'/%3E%3Cpath d='M9.5 8h5'/%3E%3Cpath d='M9.5 12h5'/%3E%3C/svg%3E") center / 22px no-repeat; }
.pc-role[data-pc-icon="chart"]::before,
.pc-secure__item[data-pc-icon="chart"]::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 15 4-5 3.5 3L21 6'/%3E%3C/svg%3E") center / 22px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='m7 15 4-5 3.5 3L21 6'/%3E%3C/svg%3E") center / 22px no-repeat; }
.pc-role[data-pc-icon="lock"]::before,
.pc-secure__item[data-pc-icon="lock"]::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 22px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 22px no-repeat; }
.pc-role[data-pc-icon="shield-check"]::before,
.pc-secure__item[data-pc-icon="shield-check"]::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 22px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / 22px no-repeat; }
.pc-role[data-pc-icon="file-search"]::before,
.pc-secure__item[data-pc-icon="file-search"]::before { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Ccircle cx='11.5' cy='14' r='2.5'/%3E%3Cpath d='m14 16.5 2 2'/%3E%3C/svg%3E") center / 22px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5'/%3E%3Ccircle cx='11.5' cy='14' r='2.5'/%3E%3Cpath d='m14 16.5 2 2'/%3E%3C/svg%3E") center / 22px no-repeat; }

.pc-role h3,
.pc-secure__item h3 {
	margin: 0 0 0.45rem;
	color: var(--pc-navy);
}

.pc-role p,
.pc-secure__item p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--pc-grey-500);
}

/* --- Feature spotlight -----------------------------------------------------
   Wide two column band: the product on one side, the argument on the other. */

.pc-spotlight {
	background: linear-gradient(170deg, #f7fbfd 0%, #eef6fa 100%);
	border-block: 1px solid var(--pc-grey-100);
}

.pc-spotlight__inner {
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

.pc-spotlight__art {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pc-radius);
	background: linear-gradient(155deg, #123152 0%, var(--pc-navy) 55%, var(--pc-navy-deep) 100%);
	padding: 1.25rem;
	box-shadow: var(--pc-shadow-lg);
}

.pc-spotlight h2 {
	margin-top: 0;
}

/* --- Security --------------------------------------------------------------
   Four plain statements. Deliberately understated: overclaiming compliance is
   the one thing a billing company cannot afford to do. */

.pc-secure {
	background: var(--pc-grey-50);
}

.pc-secure__grid {
	gap: 1.25rem;
}

.pc-secure__item::before {
	background-color: var(--pc-navy-mid);
}

/* --- Centred FAQ -----------------------------------------------------------
   The accordion is centred on the page but its text stays left aligned, since
   answers run several lines. */

.pc-faq--center {
	max-width: 860px;
	margin-inline: auto;
}

/* --- Pain point cards ------------------------------------------------------
   The problem section reads as a wall of text otherwise. Each card leads with
   the figure already present in its own copy, so the number is evidence rather
   than decoration. Amber marks problems, keeping cyan reserved for solutions.
   Icons come from CSS masks so the copy stays plain, editable blocks. */

.pc-problems {
	gap: 1.25rem;
}

.pc-problem {
	position: relative;
	padding: 1.75rem 1.5rem 1.6rem;
	background: linear-gradient(180deg, #fffdfa 0%, #ffffff 42%);
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	overflow: hidden;
	transition: transform var(--pc-ease), box-shadow var(--pc-ease), border-color var(--pc-ease);
}

.pc-problem:hover {
	transform: translateY(-4px);
	border-color: rgba(242, 166, 59, 0.4);
	box-shadow: var(--pc-shadow-lg);
}

/* Accent rule across the top, drawn in on hover. */
.pc-problem::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--pc-amber), rgba(242, 166, 59, 0.15));
	transform: scaleX(0.18);
	transform-origin: left;
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-problem:hover::before {
	transform: scaleX(1);
}

.pc-problem:hover .pc-problem__stat::before {
	transform: scale(1.05);
}

/* The figure, with its icon chip sitting alongside. */
.pc-problem__stat {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin: 0 0 0.85rem !important;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--pc-navy);
	line-height: 1;
}

.pc-problem__stat::before {
	content: "";
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background-color: rgba(242, 166, 59, 0.14);
	transition: background-color var(--pc-ease), transform var(--pc-ease);
}

/* The icon itself is a mask over a solid colour, so it inherits the accent. */
.pc-problem__stat::after {
	content: "";
	position: absolute;
	left: 1.5rem;
	width: 46px;
	height: 46px;
	background-color: #b8730f;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / 23px no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / 23px no-repeat;
	pointer-events: none;
}

.pc-problem:hover .pc-problem__stat::before {
	background-color: rgba(242, 166, 59, 0.24);
}

.pc-problem h3 {
	margin: 0 0 0.5rem;
	color: var(--pc-navy);
}

.pc-problem p:not(.pc-problem__stat) {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--pc-grey-500);
}

.pc-problem--denials .pc-problem__stat::after { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / 23px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / 23px no-repeat; }
.pc-problem--ar .pc-problem__stat::after      { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12'/%3E%3Cpath d='M6 22h12'/%3E%3Cpath d='M6 2c0 4 6 6 6 10s-6 6-6 10'/%3E%3Cpath d='M18 2c0 4-6 6-6 10s6 6 6 10'/%3E%3C/svg%3E") center / 23px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12'/%3E%3Cpath d='M6 22h12'/%3E%3Cpath d='M6 2c0 4 6 6 6 10s-6 6-6 10'/%3E%3Cpath d='M18 2c0 4-6 6-6 10s6 6 6 10'/%3E%3C/svg%3E") center / 23px no-repeat; }
.pc-problem--admin .pc-problem__stat::after   { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / 23px no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center / 23px no-repeat; }

@media (max-width: 781px) {
	.pc-problem__stat::after {
		left: 1.5rem;
	}
}

/* --- Image backed cards ----------------------------------------------------
   Core cover blocks, so the client swaps the photograph and drags the overlay
   dim in wp-admin. The gradient runs dark at the base regardless of the dim
   setting, which keeps the heading and link legible on any image. */

.pc-mediacards {
	gap: 1.25rem;
}

.pc-mediacard {
	border-radius: var(--pc-radius);
	overflow: hidden;
	align-items: stretch;
	transition: transform var(--pc-ease), box-shadow var(--pc-ease);
}

.pc-mediacard:hover {
	transform: translateY(-4px);
	box-shadow: var(--pc-shadow-lg);
}

.pc-mediacard .wp-block-cover__image-background {
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-mediacard:hover .wp-block-cover__image-background {
	transform: scale(1.05);
}

/* Extra gradient under the block's own dim, weighted to the bottom where the
   copy sits. */
.pc-mediacard::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(4, 10, 20, 0) 18%, rgba(4, 10, 20, 0.45) 52%, rgba(4, 10, 20, 0.86) 84%, rgba(4, 10, 20, 0.94) 100%);
	pointer-events: none;
}

/* flex: 1 rather than height: 100%, which cannot resolve against a parent
   sized by min-height and left the copy floating in the middle of the card. */
.pc-mediacard .wp-block-cover__inner-container {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	text-align: left;
}

.pc-mediacard .wp-block-cover__inner-container > * {
	max-width: none;
}

.pc-mediacard h3 {
	color: #fff;
	margin: 0 0 0.5rem;
}

.pc-mediacard p {
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.9rem;
	line-height: 1.55;
	margin: 0;
}

.pc-mediacard__cta {
	margin-top: 0.9rem !important;
}

.pc-mediacard__cta a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #8fe6f5;
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.01em;
	text-decoration: none;
}

.pc-mediacard__cta a:hover {
	color: #fff;
}

.pc-mediacard__cta a::after {
	content: "";
	width: 15px;
	height: 15px;
	background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--pc-ease);
}

.pc-mediacard:hover .pc-mediacard__cta a::after {
	transform: translateX(3px);
}

@media (max-width: 781px) {
	.pc-mediacard {
		min-height: 260px !important;
	}
}



/* --- Testimonial marquee ---------------------------------------------------
   Two rows travelling in opposite directions. Each row holds its cards twice
   and slides exactly half its width, which is what makes the loop seamless.
   A mask fades both ends so the card under the centre reads cleanly and the
   ones either side trail off, rather than being cut by a hard edge. */

.pc-reviews {
	position: relative;
}

.pc-marquee {
	overflow: hidden;
	padding-block: 0.6rem;
	/* Clear in the middle, fading out toward both ends. */
	mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}

.pc-marquee__track {
	display: flex;
	width: max-content;
}

/* Only animates once site.js has measured the set and cloned enough copies.
   Until then the row is simply a static strip of cards. */
.pc-marquee__track.is-running {
	animation: pcMarquee var(--pc-mq-dur, 60s) linear infinite;
}

/* Reversed rather than a second keyframe set, so both rows stay in step. */
.pc-marquee--right .pc-marquee__track {
	animation-direction: reverse;
}

.pc-marquee__set {
	display: flex;
	gap: 1.15rem;
	padding-right: 1.15rem;
}

/* Travels exactly one set width, so the loop point is invisible however many
   copies were cloned in. */
@keyframes pcMarquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(var(--pc-mq-w, 0px) * -1), 0, 0); }
}

/* Hovering anywhere in the section stops both rows, so a quote can be read. */
.pc-reviews:hover .pc-marquee__track,
.pc-reviews:focus-within .pc-marquee__track {
	animation-play-state: paused;
}

.pc-marquee .pc-quote {
	flex: 0 0 clamp(280px, 30vw, 400px);
	width: clamp(280px, 30vw, 400px);
	margin: 0;
}

.pc-marquee .pc-quote__text {
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0 0 1.15rem;
	border: 0;
	padding: 0;
}

/* --- Review submission ----------------------------------------------------- */

.pc-reviews__form {
	max-width: 720px;
	margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	padding: 0.9rem 1.25rem;
	box-shadow: var(--pc-shadow-sm);
}

.pc-reviews__form summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-weight: 600;
	color: var(--pc-navy);
	cursor: pointer;
	list-style: none;
}

.pc-reviews__form summary::-webkit-details-marker {
	display: none;
}

.pc-reviews__form summary .pc-icon {
	color: var(--pc-cyan-deep);
}

.pc-reviews__form[open] summary {
	margin-bottom: 1.15rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--pc-grey-100);
}

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

.pc-reviews__form label {
	display: block;
	margin-bottom: 0.9rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--pc-grey-700);
}

.pc-reviews__form label span {
	display: block;
	margin-bottom: 0.3rem;
}

.pc-reviews__form input[type="text"],
.pc-reviews__form textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--pc-grey-300);
	border-radius: 10px;
	font: inherit;
	font-weight: 400;
	color: var(--pc-navy);
	background: #fff;
}

.pc-reviews__form input:focus,
.pc-reviews__form textarea:focus {
	outline: 2px solid var(--pc-cyan-deep);
	outline-offset: 1px;
	border-color: transparent;
}

.pc-reviews__small {
	margin: 0 0 0.9rem;
	font-size: 0.8rem;
	color: var(--pc-grey-500);
}

.pc-reviews__notice {
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	border-radius: 10px;
	font-size: 0.88rem;
}

.pc-reviews__notice--ok {
	background: rgba(34, 174, 205, 0.1);
	color: var(--pc-cyan-deep);
}

.pc-reviews__notice--warn {
	background: rgba(242, 166, 59, 0.14);
	color: #8a5209;
}

/* Honeypot. Off screen rather than display:none, which some bots skip. */
.pc-reviews__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 600px) {
	.pc-reviews__row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Motion here is decorative, so it stops entirely when asked. A moving wall of
   text is one of the harder things to tolerate with a vestibular disorder. */
@media (prefers-reduced-motion: reduce) {
	.pc-marquee__track {
		animation: none;
	}

	.pc-marquee {
		overflow-x: auto;
		mask-image: none;
		-webkit-mask-image: none;
	}
}

/* --- Bento grid ------------------------------------------------------------
   Cards of uneven width on a six column track, so the block reads as a
   composition rather than a uniform grid. Fills alternate between the two
   brand tones, and flowing lines run behind the cards, showing through the
   gutters to tie the set together. */

.pc-bentogrid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.15rem;
}

.pc-bento__card--span2 { grid-column: span 2; }
.pc-bento__card--span3 { grid-column: span 3; }
.pc-bento__card--span4 { grid-column: span 4; }

.pc-bento__card {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 216px;
	padding: 1.5rem 1.6rem;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease;
}

.pc-bento__card:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 50px rgba(4, 10, 20, 0.28);
	text-decoration: none;
}

.pc-bento__card--cyan {
	background: linear-gradient(145deg, #3fc4dd 0%, #22aecd 46%, #1391b4 100%);
}

.pc-bento__card--navy {
	background: linear-gradient(145deg, #23527f 0%, #16375a 48%, #0d2440 100%);
}

/* White chip holding the icon, matching the reference treatment. */
.pc-bento__chip {
	position: absolute;
	top: 1.4rem;
	left: 1.6rem;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	color: #1391b4;
	box-shadow: 0 6px 18px rgba(4, 10, 20, 0.18);
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-bento__card--navy .pc-bento__chip {
	color: #23527f;
}

.pc-bento__card:hover .pc-bento__chip {
	transform: scale(1.07);
}

.pc-bento__body {
	display: block;
	margin-top: auto;
	padding-top: 2.5rem;
}

.pc-bento__value {
	display: block;
	margin-bottom: 0.35rem;
	color: #fff;
	font-family: Roboto, system-ui, sans-serif;
	font-size: clamp(1.15rem, 1.7vw, 1.5rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.pc-bento__label {
	display: block;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.9rem;
	line-height: 1.45;
	max-width: 38ch;
}

/* Connectors, drawn in when the section arrives. */
.pc-bento__lines {
	position: absolute;
	inset: -5% -3%;
	width: 106%;
	height: 110%;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
}

.pc-bento__line {
	stroke-dasharray: 1400;
	stroke-dashoffset: 1400;
	transition: stroke-dashoffset 2.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-bentogrid.is-visible .pc-bento__line,
.pc-bentogrid:not(.pc-stagger) .pc-bento__line {
	stroke-dashoffset: 0;
}

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

	.pc-bento__card--span2,
	.pc-bento__card--span3,
	.pc-bento__card--span4 {
		grid-column: span 1;
	}

	.pc-bento__lines {
		display: none;
	}
}

@media (max-width: 600px) {
	.pc-bentogrid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pc-bento__card {
		min-height: 180px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pc-bento__card,
	.pc-bento__chip {
		transition: none;
	}

	.pc-bento__line {
		transition: none;
		stroke-dashoffset: 0;
	}
}

/* --- Video backed stat band -------------------------------------------------
   Built on the core cover block so the client can swap the clip, change the
   overlay colour and adjust the dim from wp-admin. The video is muted, looped
   and plays inline, and a poster frame covers the moment before it starts. */

.pc-statband {
	padding-block: clamp(2.75rem, 4.5vw, 4.5rem);
}

.pc-statband .wp-block-cover__video-background {
	object-fit: cover;
}

.pc-statband .pc-eyebrow {
	color: var(--pc-cyan-light);
}

.pc-statband h2 {
	color: #fff;
}

/* Frosted cards, so the motion reads through without hurting legibility. */
.pc-statband .pc-stat {
	transform-style: preserve-3d;
	transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background 300ms ease, border-color 300ms ease;
	padding: 1.6rem 1.4rem;
	border-radius: var(--pc-radius);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(6px);
	box-shadow: none;
}

.pc-statband .pc-stat__value {
	background: linear-gradient(100deg, #8fe3f0, var(--pc-cyan-light));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pc-statband .pc-stat.is-tilting {
	transition: background 300ms ease, border-color 300ms ease;
}

.pc-statband .pc-stat:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(99, 213, 230, 0.45);
}

.pc-statband .pc-stat__label {
	color: rgba(255, 255, 255, 0.76);
}

/* Users who ask for less motion get the poster frame instead of the loop. */
@media (prefers-reduced-motion: reduce) {
	.pc-statband .wp-block-cover__video-background {
		display: none;
	}

	.pc-statband {
		background-image: url("/wp-content/uploads/2026/08/practice-video-poster.jpg");
		background-size: cover;
		background-position: center;
	}
}

/* -------------------------------------------------------------------------
   10. Specialty hub
   ---------------------------------------------------------------------- */

.pc-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2.25rem;
}

.pc-filter__btn {
	padding: 0.55rem 1.1rem;
	background: #fff;
	border: 1px solid var(--pc-grey-300);
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--pc-grey-700);
	cursor: pointer;
	transition: all var(--pc-ease);
}

.pc-filter__btn:hover {
	border-color: var(--pc-cyan);
	color: var(--pc-navy);
}

.pc-filter__btn.is-active {
	background: var(--pc-navy);
	border-color: var(--pc-navy);
	color: #fff;
}

.pc-spec__groups {
	display: grid;
	gap: 2.5rem;
}

.pc-spec__group[hidden] {
	display: none;
}

.pc-spec__heading {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.15rem;
	margin: 0 0 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--pc-grey-100);
	color: var(--pc-navy);
}

.pc-spec__heading .pc-icon {
	color: var(--pc-cyan-deep);
}

.pc-spec__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
	gap: 0.5rem;
}

.pc-spec__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.8rem 1rem;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius-sm);
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--pc-navy);
	text-decoration: none;
	transition: all var(--pc-ease);
}

.pc-spec__item .pc-icon {
	color: var(--pc-grey-300);
	transition: transform var(--pc-ease), color var(--pc-ease);
}

.pc-spec__item:hover {
	border-color: var(--pc-cyan);
	background: linear-gradient(120deg, rgba(99, 213, 230, 0.08), rgba(34, 174, 205, 0.04));
	text-decoration: none;
	transform: translateX(3px);
}

.pc-spec__item:hover .pc-icon {
	color: var(--pc-cyan-deep);
	transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   11. Process, FAQ and testimonials
   ---------------------------------------------------------------------- */

.pc-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.25rem;
	counter-reset: pc-step;
}

.pc-step {
	position: relative;
	padding: 1.75rem 1.5rem 1.5rem;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
}

.pc-step::before {
	counter-increment: pc-step;
	content: counter(pc-step);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 1rem;
	border-radius: 11px;
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
	font-family: Roboto, system-ui, sans-serif;
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--pc-navy);
}

.pc-step h3 {
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}

.pc-step p {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--pc-grey-500);
	margin: 0;
}

.pc-faq {
	display: grid;
	gap: 0.75rem;
	max-width: 860px;
}

.pc-faq details,
.wp-block-details.is-style-pc-faq {
	padding: 1.15rem 1.4rem;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius-sm);
	transition: border-color var(--pc-ease), box-shadow var(--pc-ease);
}

.pc-faq details[open],
.wp-block-details.is-style-pc-faq[open] {
	border-color: rgba(34, 174, 205, 0.35);
	box-shadow: var(--pc-shadow-sm);
}

.pc-faq summary,
.wp-block-details.is-style-pc-faq summary {
	font-family: Roboto, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--pc-navy);
	cursor: pointer;
	list-style: none;
	padding-right: 2rem;
	position: relative;
}

.pc-faq summary::-webkit-details-marker,
.wp-block-details.is-style-pc-faq summary::-webkit-details-marker {
	display: none;
}

.pc-faq summary::after,
.wp-block-details.is-style-pc-faq summary::after {
	content: "";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--pc-cyan-deep);
	border-bottom: 2px solid var(--pc-cyan-deep);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--pc-ease);
}

.pc-faq details[open] summary::after,
.wp-block-details.is-style-pc-faq[open] summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.pc-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.25rem;
}

.pc-quote {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
}

.pc-quote__mark {
	display: block;
	line-height: 0;
	color: var(--pc-cyan);
	margin-bottom: 0.9rem;
}

.pc-quote__mark .pc-icon {
	display: block;
	overflow: visible;
}

.pc-quote__text {
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--pc-grey-700);
	margin: 0 0 1.35rem;
}

.pc-quote__who {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1.15rem;
	border-top: 1px solid var(--pc-grey-100);
}

.pc-quote__avatar {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pc-navy-mid), var(--pc-navy));
	color: #fff;
	font-family: Roboto, system-ui, sans-serif;
	font-weight: 800;
	font-size: 0.95rem;
}

.pc-quote__name {
	display: block;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--pc-navy);
}

.pc-quote__role {
	display: block;
	font-size: 0.84rem;
	color: var(--pc-grey-500);
}

/* -------------------------------------------------------------------------
   12. CTA band and footer
   ---------------------------------------------------------------------- */

.pc-ctaband {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #eaf6fa 0%, #ddeff6 55%, #d2e9f2 100%);
	color: var(--pc-grey-700);
	padding-block: clamp(2.5rem, 4vw, 3.75rem);
}

.pc-ctaband::before {
	content: "";
	position: absolute;
	bottom: -60%;
	left: -5%;
	width: 55vw;
	height: 55vw;
	max-width: 700px;
	max-height: 700px;
	background: radial-gradient(circle, rgba(34, 174, 205, 0.18) 0%, rgba(34, 174, 205, 0) 68%);
	pointer-events: none;
}

.pc-ctaband__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	max-width: var(--pc-container);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

.pc-ctaband h2 {
	color: var(--pc-navy);
	margin: 0 0 0.6rem;
	max-width: 22ch;
}

.pc-ctaband p {
	margin: 0;
	max-width: 48ch;
	color: var(--pc-grey-500);
}

.pc-ctaband__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: none;
}

.pc-footer {
	background: var(--pc-navy-deep);
	color: rgba(255, 255, 255, 0.62);
	padding-block: clamp(3rem, 6vw, 4.5rem) 0;
	font-size: 0.92rem;
}

/* Layout comes from the core columns block so the client can restructure the
   footer in the site editor. These rules only handle spacing and colour. */
.pc-footer__top {
	padding-bottom: 3rem;
	gap: 1.5rem;
}

/* Footer lockup: same mark and wordmark as the header, in the light-on-dark
   treatment supplied in the brand artwork. */
.pc-logo--footer {
	margin-bottom: 0.25rem;
}

.pc-logo--footer .pc-logo__name {
	color: #fff;
	font-size: 1.05rem;
}

.pc-logo--footer .pc-logo__tag {
	color: rgba(255, 255, 255, 0.6);
}

.pc-footer__blurb {
	margin: 1.15rem 0 1.5rem;
	line-height: 1.65;
	max-width: 38ch;
}

.pc-footer__contact {
	line-height: 2;
}

.pc-footer__contact a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.pc-footer__contact a:hover {
	color: var(--pc-cyan-light);
	text-decoration: underline;
}

.pc-footer__contact .pc-icon {
	color: var(--pc-cyan);
}

.pc-footer__heading {
	display: block;
	font-family: Roboto, system-ui, sans-serif;
	font-size: 0.74rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #fff;
	margin-bottom: 1.1rem;
}

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

.pc-footer__list a {
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
	transition: color var(--pc-ease);
}

.pc-footer__list a:hover {
	color: #fff;
	text-decoration: underline;
}

.pc-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pc-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	max-width: var(--pc-container);
	margin-inline: auto;
	padding: 1.5rem var(--pc-gutter);
	font-size: 0.85rem;
}

.pc-footer__legal {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.pc-footer__legal a {
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
}

.pc-footer__legal a:hover {
	color: #fff;
	text-decoration: underline;
}

.pc-footer__compliance {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
}

.pc-footer__compliance .pc-icon {
	color: var(--pc-cyan);
}

/* -------------------------------------------------------------------------
   13. Block style variations
   ---------------------------------------------------------------------- */

.is-style-pc-card {
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
}

.is-style-pc-card-raised {
	padding: 1.75rem;
	background: #fff;
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-lg);
}

.is-style-pc-panel-dark {
	padding: clamp(1.75rem, 4vw, 2.75rem);
	background: linear-gradient(155deg, var(--pc-navy-mid), var(--pc-navy) 60%, var(--pc-navy-deep));
	border-radius: var(--pc-radius-lg);
	color: rgba(255, 255, 255, 0.78);
}

.is-style-pc-panel-dark :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.wp-block-heading.is-style-pc-eyebrow {
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.11em;
	color: var(--pc-cyan-deep);
}

.wp-block-image.is-style-pc-rounded img {
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-lg);
}

.wp-block-list.is-style-pc-check-list,
.wp-block-list.is-style-pc-arrow-list {
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 0.7rem;
}

.wp-block-list.is-style-pc-check-list li,
.wp-block-list.is-style-pc-arrow-list li {
	position: relative;
	padding-left: 2rem;
	line-height: 1.6;
}

.wp-block-list.is-style-pc-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat,
		linear-gradient(#000, #000);
	mask-composite: exclude;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat,
		linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
}

.wp-block-list.is-style-pc-arrow-list li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--pc-cyan);
	border-bottom: 2px solid var(--pc-cyan);
	transform: rotate(-45deg);
}

.is-style-pc-panel-dark .wp-block-list.is-style-pc-check-list li {
	color: rgba(255, 255, 255, 0.8);
}


/* --- Motion ----------------------------------------------------------------
   Sections fade up as they enter the viewport, and the hero staggers in on
   load. Both are opt-in through a class added by site.js, so content is fully
   visible if JavaScript never runs. */

.pc-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

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

/* Children of a grid arrive one after another. The index is set on each child
   by site.js, so the delay does not need to be hard coded per section. */
.pc-stagger > * {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--pc-i, 0) * 85ms);
	will-change: opacity, transform;
}

.pc-stagger.is-visible > * {
	opacity: 1;
	transform: none;
}

/* Images and figures get a slightly softer, longer entrance. */
.pc-reveal-media {
	opacity: 0;
	transform: translateY(20px) scale(0.985);
	transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

@media (prefers-reduced-motion: reduce) {
	.pc-stagger > *,
	.pc-reveal-media {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}



@keyframes pcHeroIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.js-motion .pc-hero__content > * {
	animation: pcHeroIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.js-motion .pc-hero__content > *:nth-child(1) { animation-delay: 60ms; }
.js-motion .pc-hero__content > *:nth-child(2) { animation-delay: 140ms; }
.js-motion .pc-hero__content > *:nth-child(3) { animation-delay: 220ms; }
.js-motion .pc-hero__content > *:nth-child(4) { animation-delay: 300ms; }
.js-motion .pc-hero__content > *:nth-child(5) { animation-delay: 380ms; }

.js-motion .pc-hero__art {
	animation: pcHeroIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}

.js-motion .pc-hero__float {
	animation: pcHeroIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.js-motion .pc-hero__float--a { animation-delay: 620ms; }
.js-motion .pc-hero__float--b { animation-delay: 760ms; }

/* Gentle float so the proof cards feel alive without being distracting. */
@keyframes pcDrift {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

.js-motion .pc-hero__float--a { animation: pcHeroIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 620ms both, pcDrift 6s ease-in-out 1.4s infinite; }
.js-motion .pc-hero__float--b { animation: pcHeroIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 760ms both, pcDrift 7s ease-in-out 1.8s infinite; }

@media (prefers-reduced-motion: reduce) {
	.pc-reveal,
	.js-motion .pc-hero__content > *,
	.js-motion .pc-hero__art,
	.js-motion .pc-hero__float {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* -------------------------------------------------------------------------
   14. Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1260px) {
	.pc-mega__cats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 1200px) {
	.pc-nav {
		display: none;
	}

	.pc-mobile .pc-nav {
		display: block;
	}

	.pc-burger {
		display: inline-flex;
	}

	/* The bottom action bar carries Call and Schedule a Demo on mobile, so the
	   header keeps only the logo, a tap-to-call icon and the menu button. */
	.pc-header__login,
	.pc-header__cta {
		display: none;
	}

	.pc-header__phone--compact {
		display: inline-flex;
	}

	.pc-actionbar {
		display: flex;
	}

	body {
		padding-bottom: 74px;
	}

	.pc-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Headline leads on mobile. The photograph supports it, so it follows. */

	.pc-footer__top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

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

	.pc-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.pc-cards--2,
	.pc-cards--3,
	.pc-cards--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.pc-stats,
	.pc-trustbar__inner,
	.pc-footer__top {
		grid-template-columns: minmax(0, 1fr);
	}

	.pc-logo__tag {
		display: none;
	}

	.pc-ctaband__actions {
		width: 100%;
	}

	.pc-spec__list {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* --- Phone refinements -----------------------------------------------------
   Verified at a genuine 375px viewport. Headless Chrome clamps its window to
   500px, so these were checked by rendering the site inside a 390px frame. */

@media (max-width: 640px) {
	:root {
		/* Smaller entrance offset, so stacked slides cannot push the document
		   sideways while they are hidden. */
		--pc-slide-shift: 12px;
	}

	/* Hero */
	.pc-hero--home .pc-hero__inner {
		min-height: 0;
	}

	.pc-hero__art {
		min-height: 260px;
	}

	.pc-hero__figure {
		width: min(84%, 300px);
	}

	.pc-hero__float {
		transform: scale(0.78);
	}

	.pc-hero__float--a {
		left: -6%;
		top: 12%;
	}

	.pc-hero__float--b {
		right: -6%;
		bottom: 14%;
	}

	.pc-hero__proof {
		gap: 0.35rem 1.1rem;
	}

	.pc-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.pc-hero__actions .pc-btn {
		width: 100%;
	}

	/* Section rhythm tightens up, otherwise the page is a very long scroll. */
	.pc-section {
		padding-block: clamp(2rem, 8vw, 2.75rem);
	}

	.pc-head {
		margin-bottom: 1.25rem;
	}

	/* Cards and grids */
	.pc-problem,
	.pc-role,
	.pc-secure__item {
		padding: 1.25rem 1.15rem;
	}

	.pc-problem__stat {
		font-size: 1.45rem;
	}

	.pc-bento__card {
		min-height: 168px;
		padding: 1.25rem 1.2rem;
	}

	.pc-bento__chip {
		width: 40px;
		height: 40px;
	}

	.pc-bento__body {
		padding-top: 1.9rem;
	}

	/* Slider: one card at a time, comfortably inside the screen. */
	.pc-slide,
	.pc-slide.is-active {
		flex-basis: min(78vw, 300px);
		width: min(78vw, 300px);
		min-height: 320px;
	}

	.pc-slider__viewport {
		scroll-snap-type: x mandatory;
	}

	.pc-slide {
		scroll-snap-align: center;
	}

	/* Testimonials */
	.pc-marquee .pc-quote {
		flex: 0 0 min(80vw, 320px);
		width: min(80vw, 320px);
	}

	.pc-quote {
		padding: 1.35rem 1.25rem;
	}

	/* Video stat band */
	.pc-statband .pc-stat {
		padding: 1.35rem 1.25rem;
	}

	/* Call to action */
	.pc-ctaband__actions {
		width: 100%;
	}

	.pc-ctaband__actions .pc-btn {
		width: 100%;
	}
}


/* --- Field driven service and specialty template ---------------------------
   The page is rendered as raw HTML by pcc/service-page, so these classes carry
   the section widths that block layout would otherwise provide. Everything
   inside a section is centred by .pc-wrap; the section itself spans full width. */

.pct-service .pc-section > .pc-wrap {
	max-width: var(--pc-container);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

.pct-service .pc-hero--page .pc-wrap {
	max-width: var(--pc-container);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

/* --- Interior video hero ----------------------------------------------------
   Same muted, looped Cover treatment as the homepage stat band, sized for a
   page header. Video, poster and overlay dim are all set from wp-admin. */
.pc-phero {
	position: relative;
	overflow: hidden;
	background: var(--pc-navy, #0b1f3a);
	padding-block: clamp(3.25rem, 7vw, 6rem);
	isolation: isolate;
}

.pc-phero__video,
.pc-phero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* Navy scrim plus a directional gradient so the title stays legible over any
   frame of the footage. The dim tracks the wp-admin overlay value. */
.pc-phero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(8, 22, 43, 0.92) 0%, rgba(8, 22, 43, 0.55) 55%, rgba(8, 22, 43, 0.3) 100%),
		rgba(8, 22, 43, var(--pc-phero-dim, 0.62));
}

.pc-phero__inner {
	position: relative;
	max-width: var(--pc-container);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

.pc-phero h1 {
	color: #fff;
	font-size: clamp(2.1rem, 4vw, 3.35rem);
	font-weight: 700;
	letter-spacing: -0.024em;
	line-height: 1.08;
	max-width: 20ch;
	margin: 0.2rem 0 0;
}

.pc-phero__lede {
	color: rgba(255, 255, 255, 0.84);
	font-size: clamp(1.02rem, 1.4vw, 1.2rem);
	line-height: 1.6;
	max-width: 56ch;
	margin: 1.1rem 0 1.7rem;
}

.pc-phero__actions {
	margin: 0;
}

.pc-crumbs--light {
	color: rgba(255, 255, 255, 0.7);
}

.pc-crumbs--light a {
	color: var(--pc-cyan-light);
}

.pc-phero__chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.9rem 0 0;
	padding: 0;
}

.pc-phero__chips li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.8rem;
	font-weight: 600;
}

.pc-phero__chips li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pc-cyan-light);
}

@media (prefers-reduced-motion: reduce) {
	.pc-phero__video {
		display: none;
	}
}

/* Two column split: heading on the left, list or detail on the right. */
.pct-service .pc-split {
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.pct-service .pc-related .wp-block-column {
	padding: 1.6rem;
}

.pct-service .pc-related h3 {
	margin: 0 0 0.9rem;
}

/* The differentiator band reuses the homepage stat treatment on a light tint. */
.pct-why .pc-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}

.pct-why .pc-stat {
	padding: 1.5rem 1.4rem;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
}

.pct-why .pc-stat__value {
	display: block;
	font-family: Roboto, system-ui, sans-serif;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 0.4rem;
	background: linear-gradient(100deg, var(--pc-cyan-deep), var(--pc-cyan));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pct-why .pc-stat__label {
	display: block;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--pc-grey-500);
}

/* Editor supplied body, when a service carries bespoke depth. */
.pct-service .pc-longform {
	max-width: 820px;
	margin-inline: auto;
}

.pct-service .pc-longform > * {
	margin-block: 1rem;
}

/* Pain cards: an accent icon and a hover lift, so the problem framing reads as
   designed rather than a plain column of text. */
.pc-pain__card {
	position: relative;
	overflow: hidden;
	transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease, border-color 320ms ease;
}

.pc-pain__card:hover {
	transform: translateY(-6px);
	box-shadow: var(--pc-shadow-md, 0 18px 40px -24px rgba(11, 31, 58, 0.4));
	border-color: rgba(34, 174, 205, 0.4);
}

.pc-pain__icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 1rem;
	border-radius: 13px;
	color: var(--pc-cyan-deep);
	background: linear-gradient(135deg, rgba(34, 174, 205, 0.14), rgba(34, 174, 205, 0.05));
	border: 1px solid rgba(34, 174, 205, 0.2);
}

/* --- Image led feature band ------------------------------------------------- */
.pc-feature__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
}

.pc-feature__media {
	position: relative;
	margin: 0;
	border-radius: var(--pc-radius-lg, 20px);
	overflow: hidden;
	box-shadow: var(--pc-shadow-md, 0 30px 60px -30px rgba(11, 31, 58, 0.45));
}

.pc-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.pc-feature__badge {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	background: rgba(8, 22, 43, 0.72);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
}

.pc-feature__badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pc-cyan-light);
	box-shadow: 0 0 0 0 rgba(99, 213, 230, 0.6);
	animation: pc-pulse 2.4s ease-out infinite;
}

@keyframes pc-pulse {
	0% { box-shadow: 0 0 0 0 rgba(99, 213, 230, 0.55); }
	70% { box-shadow: 0 0 0 12px rgba(99, 213, 230, 0); }
	100% { box-shadow: 0 0 0 0 rgba(99, 213, 230, 0); }
}

.pc-feature__lede {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.6;
	color: var(--pc-grey-600, #33404f);
	margin: 0.6rem 0 1.3rem;
}

.pc-feature__list {
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.pc-feature__list li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	line-height: 1.5;
}

.pc-ftr__tick {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
	color: var(--pc-navy);
}

/* --- Comparison table ------------------------------------------------------- */
.pc-compare-wrap {
	overflow-x: auto;
	border-radius: var(--pc-radius);
	border: 1px solid var(--pc-grey-100);
	background: #fff;
	box-shadow: var(--pc-shadow-sm);
}

.pc-compare {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
}

.pc-compare th,
.pc-compare td {
	padding: 1rem 1.15rem;
	text-align: left;
	border-bottom: 1px solid var(--pc-grey-100);
	font-size: 0.95rem;
	vertical-align: top;
}

.pc-compare thead th {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pc-grey-500);
	font-weight: 700;
}

.pc-compare thead .pc-compare__usth {
	color: var(--pc-cyan-deep);
}

.pc-compare tbody th {
	font-weight: 650;
	color: var(--pc-navy);
	width: 26%;
}

.pc-compare__old {
	color: var(--pc-grey-500);
}

.pc-compare__new {
	color: var(--pc-navy);
	font-weight: 600;
	background: rgba(34, 174, 205, 0.05);
}

.pc-compare__tick {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-right: 0.5rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
	color: var(--pc-navy);
	vertical-align: -4px;
}

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

/* --- Integration pills ------------------------------------------------------ */
.pc-integrations {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
	max-width: 780px;
}

.pc-integrations li {
	padding: 0.6rem 1.2rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	box-shadow: var(--pc-shadow-sm);
	font-weight: 600;
	color: var(--pc-navy);
	font-size: 0.9rem;
	transition: transform 260ms ease, border-color 260ms ease;
}

.pc-integrations li:hover {
	transform: translateY(-3px);
	border-color: rgba(34, 174, 205, 0.45);
}

.pc-integrations__note {
	max-width: 60ch;
	margin: 1.4rem auto 0;
	text-align: center;
	font-size: 0.9rem;
	color: var(--pc-grey-500);
}

/* ===========================================================================
   Specialty template: its own layout, distinct from services
   ======================================================================== */

/* Split hero: lead column plus an at-a-glance card, over the shared video. */
.pc-shero__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	max-width: var(--pc-container);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

.pc-shero__eyebrow {
	display: inline-block;
	margin: 0 0 0.6rem;
	padding: 0.32rem 0.85rem;
	border-radius: 999px;
	background: rgba(99, 213, 230, 0.16);
	border: 1px solid rgba(99, 213, 230, 0.3);
	color: var(--pc-cyan-light);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.pc-shero__lead h1 {
	color: #fff;
	font-size: clamp(2rem, 3.6vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.024em;
	line-height: 1.08;
	margin: 0.2rem 0 0;
}

.pc-btn--ghost-light {
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	background: transparent;
}

.pc-btn--ghost-light:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.7);
}

/* Frosted at-a-glance card. */
.pc-sglance {
	position: relative;
	padding: 1.6rem 1.6rem 1.3rem;
	border-radius: var(--pc-radius-lg, 20px);
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}

.pc-sglance__title {
	margin: 0 0 0.9rem;
	color: #fff;
	font-weight: 700;
	font-size: 1.02rem;
}

.pc-sglance ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pc-sglance li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pc-sglance li:first-child {
	border-top: 0;
}

.pc-sglance__k {
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.88rem;
}

.pc-sglance__v {
	color: #fff;
	font-weight: 650;
	font-size: 0.9rem;
	text-align: right;
}

/* "Why it is different" numbered rows. */
.pc-wrows {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 2.5rem;
	margin-top: 0.5rem;
}

.pc-wrow {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	padding-top: 1.4rem;
	border-top: 2px solid var(--pc-grey-100);
}

.pc-wrow__n {
	font-family: Roboto, system-ui, sans-serif;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	background: linear-gradient(120deg, var(--pc-cyan-deep), var(--pc-cyan));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pc-wrow h3 {
	margin: 0 0 0.35rem;
	font-size: 1.08rem;
}

.pc-wrow p {
	margin: 0;
	color: var(--pc-grey-500);
	line-height: 1.6;
	font-size: 0.94rem;
}

/* Dark codes board. */
.pc-section--dark {
	background: var(--pc-navy, #0b1f3a);
	background-image: radial-gradient(120% 120% at 0% 0%, rgba(34, 174, 205, 0.16), transparent 55%);
}

.pc-head--light .pc-eyebrow {
	color: var(--pc-cyan-light);
}

.pc-head--light h2 {
	color: #fff;
}

.pc-codes__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 0.85rem;
}

.pc-codes__grid li {
	position: relative;
	padding: 0.95rem 1.1rem 0.95rem 2.5rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.92);
	font-size: 0.92rem;
	font-weight: 500;
	transition: background 260ms ease, border-color 260ms ease, transform 260ms ease;
}

.pc-codes__grid li::before {
	content: "";
	position: absolute;
	left: 1.05rem;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: var(--pc-cyan-light);
}

.pc-codes__grid li:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(99, 213, 230, 0.45);
}

.pc-codes__note {
	max-width: 62ch;
	margin: 1.5rem 0 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.92rem;
	line-height: 1.6;
}

/* Flipped feature band puts the copy first, image second. */
.pc-feature--flip .pc-feature__media {
	order: 0;
}

/* What your practice gets: check cards. */
.pc-getcards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
}

.pc-getcards li {
	display: flex;
	gap: 0.85rem;
	align-items: center;
	padding: 1.15rem 1.25rem;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
	font-weight: 550;
	color: var(--pc-navy);
	transition: transform 260ms ease, border-color 260ms ease;
}

.pc-getcards li:hover {
	transform: translateY(-4px);
	border-color: rgba(34, 174, 205, 0.4);
}

.pc-getc__ic {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
	color: var(--pc-navy);
}

/* Sibling specialty chips. */
.pc-siblings {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	justify-content: center;
}

.pc-sibling {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.15rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	box-shadow: var(--pc-shadow-sm);
	color: var(--pc-navy);
	font-weight: 600;
	font-size: 0.92rem;
	text-decoration: none;
	transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.pc-sibling:hover {
	transform: translateY(-3px);
	border-color: rgba(34, 174, 205, 0.5);
	box-shadow: var(--pc-shadow-md, 0 18px 40px -24px rgba(11, 31, 58, 0.4));
}

.pc-sibling__ic {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(34, 174, 205, 0.1);
	color: var(--pc-cyan-deep);
}

.pc-spec-svc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	margin-top: 1.8rem;
	color: var(--pc-grey-500);
	font-size: 0.92rem;
}

.pc-spec-svc ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.1rem;
	margin: 0;
	padding: 0;
}

.pc-spec-svc a {
	color: var(--pc-cyan-deep);
	font-weight: 600;
	text-decoration: none;
}

.pc-spec-svc a:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.pc-shero__grid {
		grid-template-columns: 1fr;
	}

	.pc-wrows {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 820px) {
	.pc-feature__grid {
		grid-template-columns: 1fr;
	}

	.pc-feature__media {
		order: -1;
	}
}

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

@media (max-width: 640px) {
	.pct-why .pc-stats {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* --- Lead capture forms -----------------------------------------------------
   Used by the consultation and contact forms. Deliberately plain and roomy:
   this is the point of the whole site, so nothing here should feel clever at
   the expense of being obvious. */

.pc-form {
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius-lg, 20px);
	box-shadow: var(--pc-shadow-md, 0 30px 60px -30px rgba(11, 31, 58, 0.35));
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

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

.pc-field {
	display: block;
	margin-bottom: 1rem;
}

.pc-field__label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.88rem;
	font-weight: 650;
	color: var(--pc-navy);
}

.pc-field__req {
	color: var(--pc-cyan-deep);
}

.pc-field input,
.pc-field select,
.pc-field textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--pc-grey-100);
	border-radius: 11px;
	background: #f7f9fb;
	font: inherit;
	font-size: 0.95rem;
	color: var(--pc-ink, #1a2433);
	transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.pc-field textarea {
	resize: vertical;
	min-height: 110px;
}

.pc-field input:focus,
.pc-field select:focus,
.pc-field textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--pc-cyan);
	box-shadow: 0 0 0 3px rgba(34, 174, 205, 0.15);
}

/* The honeypot must be unreachable for people but still submitted by bots,
   so it is moved off screen rather than display:none. */
.pc-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pc-form__small {
	margin: 0.4rem 0 1.2rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--pc-grey-500);
}

.pc-form__submit {
	width: 100%;
	justify-content: center;
}

.pc-form__notice {
	margin: 0 0 1.2rem;
	padding: 0.9rem 1.1rem;
	border-radius: 11px;
	font-size: 0.92rem;
	line-height: 1.5;
}

.pc-form__notice--ok {
	background: rgba(10, 125, 63, 0.08);
	border: 1px solid rgba(10, 125, 63, 0.28);
	color: #0a5d31;
}

.pc-form__notice--warn {
	background: rgba(184, 115, 15, 0.08);
	border: 1px solid rgba(184, 115, 15, 0.3);
	color: #8a5709;
}

/* Contact and consultation page layout: form beside the reassurance column. */
.pc-contact__grid {
	display: grid;
	grid-template-columns: 1fr 0.85fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: start;
}

.pc-contact__aside .pc-eyebrow {
	margin-top: 0;
}

.pc-contact__points {
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.pc-contact__points li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	line-height: 1.55;
	font-size: 0.95rem;
}

.pc-contact__ic {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
	color: var(--pc-navy);
}

.pc-contact__direct {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--pc-grey-100);
	display: grid;
	gap: 0.85rem;
}

.pc-contact__direct a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--pc-navy);
	font-weight: 650;
	text-decoration: none;
}

.pc-contact__direct a:hover {
	color: var(--pc-cyan-deep);
}

@media (max-width: 900px) {
	.pc-contact__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.pc-form__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}


/* --- Download cards ---------------------------------------------------------
   A whole card is the download link, so the click target is the card rather
   than a small line of text at the bottom of it. */

.pc-downloads {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 1.25rem;
}

.pc-dl {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.5rem 1.4rem;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
	text-decoration: none;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 280ms ease, box-shadow 280ms ease;
}

.pc-dl:hover {
	transform: translateY(-5px);
	border-color: rgba(34, 174, 205, 0.45);
	box-shadow: var(--pc-shadow-md, 0 22px 45px -26px rgba(11, 31, 58, 0.42));
}

.pc-dl__ic {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 0.35rem;
	border-radius: 12px;
	color: var(--pc-cyan-deep);
	background: linear-gradient(135deg, rgba(34, 174, 205, 0.15), rgba(34, 174, 205, 0.05));
	border: 1px solid rgba(34, 174, 205, 0.22);
}

.pc-dl__kind {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-grey-500);
}

.pc-dl h3 {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--pc-navy);
}

.pc-dl p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--pc-grey-500);
}

.pc-dl__meta {
	margin-top: auto;
	padding-top: 0.9rem;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.85rem;
	font-weight: 650;
	color: var(--pc-cyan-deep);
}

.pc-dl__meta small {
	margin-left: auto;
	font-weight: 500;
	color: var(--pc-grey-500);
	font-size: 0.78rem;
}


/* --- Referral program -------------------------------------------------------
   Deliberately restrained: the brief asks for corporate healthcare rather than
   a consumer rewards scheme, so no gold, no gift iconography, no cash imagery. */

.pc-fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.75rem;
}

.pc-fieldset legend {
	padding: 0;
	margin-bottom: 1rem;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-cyan-deep);
}

.pc-fieldset + .pc-fieldset {
	padding-top: 1.5rem;
	border-top: 1px solid var(--pc-grey-100);
}

.pc-checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.pc-check {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--pc-grey-100);
	border-radius: 10px;
	background: #f7f9fb;
	font-size: 0.88rem;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color 180ms ease, background 180ms ease;
}

.pc-check:hover {
	border-color: rgba(34, 174, 205, 0.45);
	background: #fff;
}

.pc-check input {
	margin-top: 0.15rem;
	accent-color: var(--pc-cyan-deep);
	flex: none;
}

.pc-check:has(input:checked) {
	border-color: var(--pc-cyan);
	background: rgba(34, 174, 205, 0.07);
}

.pc-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0 0 1rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--pc-grey-100);
	border-radius: 11px;
	background: #f7f9fb;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--pc-grey-600, #33404f);
}

.pc-consent input {
	margin-top: 0.2rem;
	accent-color: var(--pc-cyan-deep);
	flex: none;
}

.pc-consent a {
	color: var(--pc-cyan-deep);
	font-weight: 600;
}

/* The reward callout. Understated on purpose. */
.pc-reward {
	max-width: 720px;
	margin-inline: auto;
	padding: clamp(1.6rem, 3vw, 2.25rem);
	border-radius: var(--pc-radius-lg, 20px);
	border: 1px solid rgba(34, 174, 205, 0.3);
	background: linear-gradient(150deg, rgba(34, 174, 205, 0.08), rgba(11, 31, 58, 0.05));
	text-align: center;
}

.pc-reward__eyebrow {
	margin: 0 0 0.6rem;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pc-cyan-deep);
}

.pc-reward__value {
	margin: 0 0 0.7rem;
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--pc-navy);
}

.pc-reward__note {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--pc-grey-500);
	max-width: 54ch;
	margin-inline: auto;
}

/* The referral path diagram in the hero. */
.pc-refpath {
	display: grid;
	gap: 0.75rem;
}

.pc-refpath__step {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 1.15rem;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
}

.pc-refpath__ic {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(34, 174, 205, 0.16), rgba(34, 174, 205, 0.06));
	border: 1px solid rgba(34, 174, 205, 0.25);
	color: var(--pc-cyan-deep);
}

.pc-refpath__step strong {
	display: block;
	color: var(--pc-navy);
	font-size: 0.98rem;
	line-height: 1.25;
}

.pc-refpath__step span {
	display: block;
	font-size: 0.84rem;
	color: var(--pc-grey-500);
	margin-top: 2px;
}

.pc-refpath__arrow {
	display: grid;
	place-items: center;
	color: var(--pc-cyan);
}

@media (max-width: 640px) {
	.pc-checks {
		grid-template-columns: 1fr;
	}
}


/* --- Contact details panel --------------------------------------------------
   Cards are generated only for details that have been filled in, so this grid
   can legitimately hold three or four items and must look right either way. */

.pc-cinfo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
}

.pc-cinfo__card {
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
	padding: 1.5rem 1.4rem;
	transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.pc-cinfo__card:hover {
	transform: translateY(-4px);
	border-color: rgba(34, 174, 205, 0.4);
	box-shadow: var(--pc-shadow-md, 0 18px 40px -24px rgba(11, 31, 58, 0.4));
}

.pc-cinfo__ic {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 1rem;
	border-radius: 12px;
	color: var(--pc-cyan-deep);
	background: linear-gradient(135deg, rgba(34, 174, 205, 0.14), rgba(34, 174, 205, 0.05));
	border: 1px solid rgba(34, 174, 205, 0.2);
}

.pc-cinfo__label {
	margin: 0 0 0.4rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pc-grey-500);
}

.pc-cinfo__body {
	line-height: 1.6;
}

.pc-cinfo__strong {
	display: inline-block;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--pc-navy);
	text-decoration: none;
	margin: 0;
}

a.pc-cinfo__strong:hover {
	color: var(--pc-cyan-deep);
}

.pc-cinfo__addr {
	margin: 0;
	font-weight: 600;
	color: var(--pc-navy);
}

.pc-cinfo__sub {
	margin: 0.7rem 0 0;
	font-size: 0.88rem;
	line-height: 1.4;
}

.pc-cinfo__sub span {
	display: block;
	color: var(--pc-grey-500);
	font-size: 0.78rem;
	font-weight: 600;
}

.pc-cinfo__sub a {
	color: var(--pc-cyan-deep);
	font-weight: 600;
	text-decoration: none;
	word-break: break-word;
}

.pc-cinfo__sub a:hover {
	text-decoration: underline;
}

.pc-cinfo__note {
	margin: 0.8rem 0 0;
	font-size: 0.83rem;
	line-height: 1.5;
	color: var(--pc-grey-500);
}

.pc-cinfo__socials {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.5rem;
}

.pc-cinfo__socials > span {
	font-size: 0.85rem;
	font-weight: 650;
	color: var(--pc-grey-500);
	margin-right: 0.2rem;
}

.pc-cinfo__social {
	padding: 0.45rem 1rem;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	box-shadow: var(--pc-shadow-sm);
	color: var(--pc-navy);
	font-size: 0.86rem;
	font-weight: 650;
	text-decoration: none;
	transition: transform 220ms ease, border-color 220ms ease;
}

.pc-cinfo__social:hover {
	transform: translateY(-2px);
	border-color: rgba(34, 174, 205, 0.5);
	color: var(--pc-cyan-deep);
}


/* --- Article header --------------------------------------------------------
   Split hero: title and meta beside the featured image, on the same tinted
   band the interior pages use so the blog does not feel like a separate site. */

.pc-phead {
	background: linear-gradient(180deg, var(--pc-grey-50, #f7f9fb), #fff);
	border-bottom: 1px solid var(--pc-grey-100);
	padding-block: clamp(2rem, 4vw, 3.5rem);
}

.pc-phead__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	align-items: center;
	max-width: var(--pc-container);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

.pc-phead__cat {
	display: inline-block;
	margin: 0 0 0.7rem;
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: rgba(34, 174, 205, 0.1);
	border: 1px solid rgba(34, 174, 205, 0.25);
	color: var(--pc-cyan-deep);
	font-size: 0.78rem;
	font-weight: 700;
}

.pc-phead h1 {
	margin: 0;
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.024em;
	color: var(--pc-navy);
}

.pc-phead__lede {
	margin: 1rem 0 0;
	font-size: clamp(1rem, 1.3vw, 1.14rem);
	line-height: 1.6;
	color: var(--pc-grey-500);
	max-width: 54ch;
}

.pc-phead__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.5rem;
	font-size: 0.87rem;
	color: var(--pc-grey-500);
}

.pc-phead__author {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 650;
	color: var(--pc-navy);
}

.pc-phead__avatar {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
	color: var(--pc-navy);
	font-size: 0.72rem;
	font-weight: 800;
}

.pc-phead__dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--pc-grey-300, #c3ccd6);
}

.pc-phead__media {
	margin: 0;
	border-radius: var(--pc-radius-lg, 20px);
	overflow: hidden;
	box-shadow: var(--pc-shadow-md, 0 30px 60px -30px rgba(11, 31, 58, 0.45));
}

.pc-phead__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}


/* --- Article body ----------------------------------------------------------
   A measured reading column with editorial furniture: tables, callouts,
   comparisons and pull quotes, all available as block styles in the editor. */

/* The hero already carries generous breathing room, so the article section
   starts tighter than a standard pc-section would. */
.pc-article {
	padding-block-start: clamp(1.75rem, 3vw, 2.75rem);
}

/* Article beside its sidebar. The reading column keeps its measure while the
   column that was previously empty white space now carries the contents list
   and the consultation form. */
.pc-postlayout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
	max-width: var(--pc-container);
	margin-inline: auto;
	padding-inline: var(--pc-gutter);
}

.pc-postmain {
	min-width: 0;
}

.pc-article .entry-content {
	max-width: 720px;
	font-size: 1.06rem;
	line-height: 1.75;
	color: var(--pc-ink, #1a2433);
}

.pc-article .entry-content > * {
	margin-block: 1.35rem;
}

.pc-article .entry-content > h2 {
	margin-block: 2.75rem 1rem;
	font-size: clamp(1.4rem, 2.2vw, 1.85rem);
	line-height: 1.25;
	letter-spacing: -0.018em;
	scroll-margin-top: 100px;
}

.pc-article .entry-content > h3 {
	margin-block: 2rem 0.8rem;
	font-size: clamp(1.15rem, 1.7vw, 1.35rem);
}

.pc-article .entry-content > p.has-lg-font-size {
	font-size: clamp(1.14rem, 1.6vw, 1.3rem);
	line-height: 1.6;
	color: var(--pc-grey-600, #33404f);
}

.pc-article .entry-content a {
	color: var(--pc-cyan-deep);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pc-article .entry-content ul,
.pc-article .entry-content ol {
	padding-left: 1.3rem;
}

.pc-article .entry-content li {
	margin-block: 0.5rem;
}

/* Figures sit slightly wider than the text column so they read as breaks. */
.pc-article .entry-content figure.wp-block-image {
	margin-block: 2.25rem;
}

.pc-article .entry-content figure.wp-block-image img {
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-md, 0 24px 50px -30px rgba(11, 31, 58, 0.4));
}

.pc-article .entry-content figcaption {
	margin-top: 0.7rem;
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--pc-grey-500);
	text-align: center;
}

/* Tables ------------------------------------------------------------------ */
.pc-article .wp-block-table {
	margin-block: 2rem;
	overflow-x: auto;
}

.pc-article .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	overflow: hidden;
	font-size: 0.95rem;
}

.pc-article .wp-block-table th,
.pc-article .wp-block-table td {
	padding: 0.9rem 1.05rem;
	text-align: left;
	border-bottom: 1px solid var(--pc-grey-100);
	vertical-align: top;
}

.pc-article .wp-block-table thead th {
	background: var(--pc-grey-50, #f7f9fb);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--pc-grey-500);
}

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

.pc-article .wp-block-table tbody tr:hover td {
	background: rgba(34, 174, 205, 0.03);
}

/* Comparison table: first data column is the "before", last is ours. */
.pc-article .is-style-pc-compare-table table tbody td:last-child {
	background: rgba(34, 174, 205, 0.05);
	font-weight: 600;
	color: var(--pc-navy);
}

.pc-article .is-style-pc-compare-table table thead th:last-child {
	color: var(--pc-cyan-deep);
}

.pc-article .is-style-pc-compare-table table tbody td:first-child,
.pc-article .is-style-pc-compare-table table tbody th:first-child {
	font-weight: 650;
	color: var(--pc-navy);
}

/* Data table: emphasise numbers. */
.pc-article .is-style-pc-data-table table td:not(:first-child) {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--pc-navy);
}

/* Callout, takeaways and warning boxes ------------------------------------ */
.pc-article .is-style-pc-callout,
.pc-article .is-style-pc-takeaways,
.pc-article .is-style-pc-warning {
	position: relative;
	margin-block: 2.25rem;
	padding: 1.5rem 1.6rem;
	border-radius: var(--pc-radius);
	border: 1px solid var(--pc-grey-100);
	background: #fff;
	box-shadow: var(--pc-shadow-sm);
}

.pc-article .is-style-pc-callout {
	border-left: 4px solid var(--pc-cyan);
	background: rgba(34, 174, 205, 0.045);
}

.pc-article .is-style-pc-warning {
	border-left: 4px solid #d99616;
	background: rgba(217, 150, 22, 0.06);
}

.pc-article .is-style-pc-takeaways {
	background: linear-gradient(140deg, rgba(11, 31, 58, 0.035), rgba(34, 174, 205, 0.05));
	border-left: 4px solid var(--pc-navy);
}

.pc-article .is-style-pc-callout > *:first-child,
.pc-article .is-style-pc-takeaways > *:first-child,
.pc-article .is-style-pc-warning > *:first-child {
	margin-top: 0;
}

.pc-article .is-style-pc-callout > *:last-child,
.pc-article .is-style-pc-takeaways > *:last-child,
.pc-article .is-style-pc-warning > *:last-child {
	margin-bottom: 0;
}

.pc-article .is-style-pc-takeaways h3,
.pc-article .is-style-pc-callout h3,
.pc-article .is-style-pc-warning h3 {
	margin: 0 0 0.8rem;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-cyan-deep);
}

.pc-article .is-style-pc-warning h3 {
	color: #a06a06;
}

.pc-article .is-style-pc-takeaways h3 {
	color: var(--pc-navy);
}

.pc-article .is-style-pc-takeaways ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

.pc-article .is-style-pc-takeaways li {
	position: relative;
	padding-left: 1.9rem;
	line-height: 1.55;
	margin: 0;
}

.pc-article .is-style-pc-takeaways li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
}

/* The tick itself, drawn as two borders rather than a background image so it
   renders identically everywhere and needs no encoded SVG. */
.pc-article .is-style-pc-takeaways li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 0.72em;
	width: 9px;
	height: 5px;
	border-left: 2.5px solid var(--pc-navy);
	border-bottom: 2.5px solid var(--pc-navy);
	border-radius: 1px;
	transform: rotate(-45deg);
}

/* Pull quote --------------------------------------------------------------- */
.pc-article .is-style-pc-pullquote {
	margin-block: 2.5rem;
	padding: 0 0 0 1.5rem;
	border-left: 4px solid var(--pc-cyan);
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	line-height: 1.5;
	font-weight: 600;
	color: var(--pc-navy);
	font-style: normal;
}

.pc-article .is-style-pc-pullquote p {
	margin: 0;
}

.pc-article .is-style-pc-pullquote cite {
	display: block;
	margin-top: 0.7rem;
	font-size: 0.86rem;
	font-weight: 500;
	font-style: normal;
	color: var(--pc-grey-500);
}

/* Numbered card list ------------------------------------------------------- */
.pc-article .is-style-pc-numbered-cards {
	list-style: none;
	counter-reset: pc-nc;
	padding: 0;
	display: grid;
	gap: 0.9rem;
	margin-block: 1.8rem;
}

.pc-article .is-style-pc-numbered-cards li {
	counter-increment: pc-nc;
	position: relative;
	margin: 0;
	padding: 1.1rem 1.25rem 1.1rem 3.4rem;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
	line-height: 1.6;
}

.pc-article .is-style-pc-numbered-cards li::before {
	content: counter(pc-nc);
	position: absolute;
	left: 1.05rem;
	top: 1.05rem;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
	color: var(--pc-navy);
	font-weight: 800;
	font-size: 0.85rem;
}

/* Tags --------------------------------------------------------------------- */

/* A post with no tags renders the section with nothing in it, which otherwise
   leaves a block of empty space before the next section. */
.pc-section--tight:not(:has(> *)) {
	display: none;
}

.pc-article__tags {
	max-width: 760px;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* The pills carry their own spacing, so the core separator between terms is
   redundant and reads as stray punctuation. */
.pc-article__tags .wp-block-post-terms__separator {
	display: none;
}

.pc-article__tags a {
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
	background: var(--pc-grey-50, #f7f9fb);
	border: 1px solid var(--pc-grey-100);
	font-size: 0.83rem;
	font-weight: 600;
	color: var(--pc-grey-500);
	text-decoration: none;
}

.pc-article__tags a:hover {
	color: var(--pc-cyan-deep);
	border-color: rgba(34, 174, 205, 0.4);
}


/* --- Article sidebar --------------------------------------------------------
   One sticky stack. Sticks below the fixed 76px header, and is allowed to
   scroll internally when it is taller than the viewport, so a long contents
   list never traps the reader. */

.pc-sidebar {
	position: sticky;
	top: 96px;
	display: grid;
	gap: 1rem;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	padding-right: 2px;
}

.pc-sidebar::-webkit-scrollbar {
	width: 6px;
}

.pc-sidebar::-webkit-scrollbar-thumb {
	background: var(--pc-grey-100);
	border-radius: 999px;
}

.pc-side {
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	padding: 1.25rem 1.3rem;
	box-shadow: var(--pc-shadow-sm);
}

.pc-side__title {
	margin: 0 0 0.85rem;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-grey-500);
}

.pc-side__title--lg {
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--pc-navy);
	line-height: 1.3;
	margin-bottom: 0.6rem;
}

.pc-side__eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-cyan-deep);
}

.pc-side__text {
	margin: 0 0 1rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--pc-grey-500);
}

.pc-side__small {
	margin: 0.7rem 0 0;
	font-size: 0.74rem;
	color: var(--pc-grey-500);
	text-align: center;
}

/* Contents ---------------------------------------------------------------- */
.pc-toc {
	list-style: none;
	counter-reset: pc-toc;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}

.pc-toc li {
	counter-increment: pc-toc;
	margin: 0;
}

.pc-toc a {
	display: flex;
	gap: 0.6rem;
	padding: 0.45rem 0.6rem;
	border-radius: 8px;
	border-left: 2px solid transparent;
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--pc-grey-500);
	text-decoration: none;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.pc-toc a::before {
	content: counter(pc-toc);
	flex: none;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--pc-grey-300, #c3ccd6);
	padding-top: 0.1rem;
}

.pc-toc a:hover {
	background: rgba(34, 174, 205, 0.06);
	color: var(--pc-navy);
}

.pc-toc a.is-current {
	background: rgba(34, 174, 205, 0.08);
	border-left-color: var(--pc-cyan);
	color: var(--pc-navy);
	font-weight: 600;
}

.pc-toc a.is-current::before {
	color: var(--pc-cyan-deep);
}

/* Consultation card -------------------------------------------------------- */
.pc-side--cta {
	background: linear-gradient(160deg, rgba(34, 174, 205, 0.07), rgba(11, 31, 58, 0.04));
	border-color: rgba(34, 174, 205, 0.28);
}

.pc-sideform {
	display: grid;
	gap: 0.6rem;
}

.pc-sideform .pc-field {
	margin: 0;
}

.pc-sideform input {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--pc-grey-100);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 0.9rem;
}

.pc-sideform input:focus {
	outline: none;
	border-color: var(--pc-cyan);
	box-shadow: 0 0 0 3px rgba(34, 174, 205, 0.15);
}

.pc-sideform .pc-btn {
	width: 100%;
	justify-content: center;
	margin-top: 0.15rem;
}

/* Guarantee numbers -------------------------------------------------------- */
.pc-sidestats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

.pc-sidestats li {
	display: grid;
	gap: 0.15rem;
	padding-left: 0.85rem;
	border-left: 3px solid rgba(34, 174, 205, 0.35);
}

.pc-sidestat__v {
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	color: var(--pc-navy);
}

.pc-sidestat__l {
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--pc-grey-500);
}

/* Client quote ------------------------------------------------------------- */
.pc-side--quote {
	margin: 0;
	background: var(--pc-navy, #0b1f3a);
	border-color: transparent;
	color: #fff;
}

.pc-side__quotemark {
	display: block;
	color: var(--pc-cyan-light);
	margin-bottom: 0.5rem;
}

.pc-side--quote blockquote {
	margin: 0 0 0.9rem;
	padding: 0;
	border: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}

.pc-side--quote figcaption {
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.62);
	display: grid;
	gap: 1px;
}

.pc-side--quote figcaption strong {
	color: #fff;
}

/* Contact links ------------------------------------------------------------ */
.pc-side--contact {
	display: grid;
	gap: 0.5rem;
}

.pc-sidelink {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem;
	border-radius: 10px;
	text-decoration: none;
	transition: background 180ms ease;
}

.pc-sidelink:hover {
	background: rgba(34, 174, 205, 0.06);
}

.pc-sidelink__ic {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: rgba(34, 174, 205, 0.1);
	color: var(--pc-cyan-deep);
}

.pc-sidelink strong {
	display: block;
	font-size: 0.9rem;
	color: var(--pc-navy);
	line-height: 1.25;
}

.pc-sidelink small {
	display: block;
	font-size: 0.76rem;
	color: var(--pc-grey-500);
	word-break: break-word;
}

/* Topics ------------------------------------------------------------------- */
.pc-sidetopics {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.pc-sidetopics a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--pc-grey-100);
	background: var(--pc-grey-50, #f7f9fb);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--pc-navy);
	text-decoration: none;
	transition: border-color 180ms ease, color 180ms ease;
}

.pc-sidetopics a span {
	font-size: 0.72rem;
	color: var(--pc-grey-500);
}

.pc-sidetopics a:hover {
	border-color: rgba(34, 174, 205, 0.45);
	color: var(--pc-cyan-deep);
}

/* Below the breakpoint the sidebar stops being a column and simply follows the
   article, so nothing is lost on a phone. */
@media (max-width: 1024px) {
	.pc-postlayout {
		grid-template-columns: minmax(0, 1fr);
	}

	.pc-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		margin-top: 2.5rem;
	}

	.pc-side--toc {
		display: none;
	}
}


/* --- Related posts ---------------------------------------------------------- */
.pc-rposts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
}

.pc-rpost {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--pc-shadow-sm);
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease, border-color 280ms ease;
}

.pc-rpost:hover {
	transform: translateY(-5px);
	border-color: rgba(34, 174, 205, 0.4);
	box-shadow: var(--pc-shadow-md, 0 22px 45px -26px rgba(11, 31, 58, 0.42));
}

.pc-rpost__media {
	display: block;
	overflow: hidden;
}

.pc-rpost__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pc-rpost:hover .pc-rpost__media img {
	transform: scale(1.05);
}

.pc-rpost__body {
	padding: 1.15rem 1.25rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.pc-rpost__cat {
	font-size: 0.73rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--pc-cyan-deep);
}

.pc-rpost h3 {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.35;
	color: var(--pc-navy);
}

.pc-rpost__time {
	margin-top: auto;
	font-size: 0.82rem;
	color: var(--pc-grey-500);
}


/* --- Blog index cards ------------------------------------------------------- */
.pc-postgrid > li,
.pc-postgrid .wp-block-post {
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	overflow: hidden;
	box-shadow: var(--pc-shadow-sm);
	padding: 0 0 1.4rem;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease, border-color 280ms ease;
}

.pc-postgrid .wp-block-post:hover {
	transform: translateY(-5px);
	border-color: rgba(34, 174, 205, 0.4);
	box-shadow: var(--pc-shadow-md, 0 22px 45px -26px rgba(11, 31, 58, 0.42));
}

.pc-postgrid .wp-block-post-featured-image {
	margin: 0 0 1.1rem;
}

.pc-postgrid .wp-block-post-featured-image img {
	border-radius: 0;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}

.pc-postgrid .wp-block-post-terms,
.pc-postgrid .wp-block-post-title,
.pc-postgrid .wp-block-post-excerpt,
.pc-postgrid .wp-block-post-date {
	padding-inline: 1.25rem;
}

.pc-postgrid .wp-block-post-title {
	margin: 0.5rem 0;
	line-height: 1.3;
}

.pc-postgrid .wp-block-post-title a {
	text-decoration: none;
	color: var(--pc-navy);
}

.pc-postgrid .wp-block-post-title a:hover {
	color: var(--pc-cyan-deep);
}

.pc-postgrid .wp-block-post-excerpt {
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--pc-grey-500);
}

@media (max-width: 900px) {
	.pc-phead__grid {
		grid-template-columns: 1fr;
	}

	.pc-phead__media {
		order: -1;
	}
}


/* --- Blog comments ---------------------------------------------------------
   Threaded to three levels. No avatars or commenter links by design, so the
   thread stays readable and gives spam nothing to aim at. */

.pc-comments {
	max-width: 820px;
	margin-inline: auto;
}

.pc-comments__title {
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	margin: 0 0 1.5rem;
}

.pc-comments__list {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.pc-comments__list .children {
	list-style: none;
	margin: 1rem 0 0;
	padding-left: clamp(1rem, 3vw, 2.25rem);
	display: grid;
	gap: 1rem;
	border-left: 2px solid var(--pc-grey-100);
}

.pc-comment__body {
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius);
	padding: 1.35rem 1.4rem;
	box-shadow: var(--pc-shadow-sm);
}

.pc-comment__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}

.pc-comment__avatar {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pc-cyan-light), var(--pc-cyan));
	color: var(--pc-navy);
	font-weight: 800;
	font-size: 0.85rem;
}

.pc-comment__author {
	display: block;
	font-weight: 700;
	color: var(--pc-navy);
	line-height: 1.2;
}

.pc-comment__date {
	display: block;
	font-size: 0.82rem;
	color: var(--pc-grey-500);
	margin-top: 2px;
}

.pc-comment__text {
	line-height: 1.65;
	color: var(--pc-ink, #1a2433);
}

.pc-comment__text > *:first-child { margin-top: 0; }
.pc-comment__text > *:last-child { margin-bottom: 0; }

.pc-comment__pending {
	margin: 0.85rem 0 0;
	padding: 0.6rem 0.85rem;
	border-radius: 9px;
	background: rgba(184, 115, 15, 0.08);
	border: 1px solid rgba(184, 115, 15, 0.28);
	color: #8a5709;
	font-size: 0.85rem;
}

.pc-comment__reply {
	margin: 0.9rem 0 0;
}

.pc-comment__reply a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	font-weight: 650;
	color: var(--pc-cyan-deep);
	text-decoration: none;
}

.pc-comment__reply a:hover {
	text-decoration: underline;
}

/* The comment form reuses the lead form field styling. */
.pc-commentform {
	background: #fff;
	border: 1px solid var(--pc-grey-100);
	border-radius: var(--pc-radius-lg, 20px);
	box-shadow: var(--pc-shadow-md, 0 30px 60px -30px rgba(11, 31, 58, 0.35));
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

.pc-commentform .pc-comments__title {
	margin-top: 0;
}

.pc-commentform__note {
	margin: 0 0 1.3rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--pc-grey-500);
}

.pc-commentform .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: 0 0 1.2rem;
	font-size: 0.85rem;
	color: var(--pc-grey-500);
}

.pc-commentform .comment-form-cookies-consent input {
	margin-top: 0.2rem;
}

.pc-commentform .form-submit {
	margin: 0;
}

.pc-commentform #cancel-comment-reply-link {
	margin-left: 0.6rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--pc-cyan-deep);
}

/* -------------------------------------------------------------------------
   15. Motion and accessibility
   ---------------------------------------------------------------------- */

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--pc-cyan-deep);
	outline-offset: 2px;
	border-radius: 4px;
}

.pc-footer :where(a, button):focus-visible,
.is-style-pc-panel-dark :where(a, button):focus-visible {
	outline-color: var(--pc-cyan-light);
}

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

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