/* PCL bundle — GENERATED, do not edit. Edit css/<module>.css and rebuild via build-pcl-child.sh. */

/* ── module: base ── */
/*
 * PCL Base — Design tokens, reset, typography, utilities
 * Source of truth for all design decisions
 */
:root {
	--pcl-mint: #CAF2F1;
	--pcl-cyan: #8CEBEF;
	--pcl-teal: #6ABAC3;
	--pcl-teal-text: #2E6B74;
	--pcl-lilac: #9671BD;
	--pcl-purple: #6A408D;
	--pcl-logo-purple: #59357D;
	--pcl-purple-ink: #241536;
	--pcl-purple-deep: #1A0E29;
	--pcl-paper: #FAFCFC;
	--pcl-line: rgba(106,64,141,.15);
	--pcl-line-dark: rgba(202,242,241,.16);
	--pcl-text: #2B2231;
	--pcl-text-soft: #5A4F66;
	--pcl-text-inv: #F2FBFB;
	--pcl-text-inv-soft: #BFD3D9;
	--pcl-display: 'Marcellus', 'Marcellus Fallback', serif;
	--pcl-body: 'Figtree', 'Figtree Fallback', system-ui, sans-serif;
	--pcl-max: 100vw;
	--pcl-r: 6px;
	--pcl-r-lg: 12px;
	--pcl-ease: cubic-bezier(.16,1,.3,1);
	--pcl-ease-soft: cubic-bezier(.4,0,.2,1);
	--pcl-shadow-sm: 0 4px 16px rgba(36,21,54,.08);
	--pcl-shadow-md: 0 24px 60px rgba(106,64,141,.14);
	--pcl-shadow-lg: 0 40px 90px rgba(0,0,0,.3);
	--pcl-ring: 0 0 0 3px rgba(140,235,239,.4);
	--pcl-space-1: 4px;
	--pcl-space-2: 8px;
	--pcl-space-3: 12px;
	--pcl-space-4: 16px;
	--pcl-space-5: 24px;
	--pcl-space-6: 32px;
	--pcl-space-7: 48px;
	--pcl-space-8: 64px;
	--pcl-white: #fff;
	--pcl-teal-dark: #2C727A;
	--pcl-teal-mid:  #307D87;
	--pcl-teal-light:#8CB9B6;
	--pcl-maxw: 1180px;
	--pcl-gutter: clamp(20px, 5vw, 48px);
	--pcl-section-y: clamp(72px, 9vw, 120px);
	--pcl-section-y-tight: clamp(48px, 7vw, 80px);
	--pcl-h2: clamp(2rem, 3.8vw, 3rem);
	--pcl-h3-lg: 1.28rem;
	--pcl-h3: 1.28rem;
	--pcl-h3-sm: 1rem;
	--pcl-fs-body: 0.96rem;
	--pcl-fs-body-lg: 1.07rem;
}

/* Self-hosted brand fonts — no external CDN dependency (fixes gstatic 404s) */
@font-face {
	font-family: 'Marcellus';
	src: url('../fonts/marcellus-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Figtree';
	src: url('../fonts/figtree-300.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Figtree';
	src: url('../fonts/figtree-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Figtree';
	src: url('../fonts/figtree-500.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Figtree';
	src: url('../fonts/figtree-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Figtree';
	src: url('../fonts/figtree-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Figtree';
	src: url('../fonts/figtree-800.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

/* Font fallback with size-adjust — prevents CLS if web fonts are slow (Core Web Vitals) */
@font-face {
	font-family: 'Figtree Fallback';
	src: local('Arial');
	size-adjust: 106%;
	ascent-override: 94%;
	descent-override: 24%;
	line-gap-override: 0%;
}
@font-face {
	font-family: 'Marcellus Fallback';
	src: local('Times New Roman');
	size-adjust: 105%;
	ascent-override: 88%;
	descent-override: 22%;
	line-gap-override: 0%;
}

body,
.ast-container,
.ast-separate-container .site-content > .ast-container {
	font-family: var(--pcl-body);
	color: var(--pcl-text);
	background: var(--pcl-paper);
	line-height: 1.65;
	font-size: 16.5px;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Typography alignment - LEFT for readability (standard for paragraphs/headings in LTR languages) */
p,
li,
dt, dd,
.block-editor-rich-text__editable,
.wp-block-paragraph,
.wp-block-heading,
.entry-content p,
.entry-content li,
.entry-content dt,
.entry-content dd,
.pcl-eyebrow,
.pcl-sub,
.pcl-hero p,
.pcl-section p,
.pcl-band-navy p,
.footer-widgets p,
.site-info p {
	text-align: left !important;
	margin-bottom: var(--pcl-space-4); /* 16px - consistent paragraph spacing */
}

/* Headings: LEFT for consistent hierarchy (visual weight comes from size/weight/color, not alignment) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.wp-block-heading,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.pcl-section h2,
.pcl-section h3,
.pcl-band-navy h2,
.pcl-band-navy h3,
.pcl-section .wp-block-heading,
.pcl-band-navy .wp-block-heading {
	text-align: left !important;
	margin-top: var(--pcl-space-5);   /* 24px - heading top margin */
	margin-bottom: var(--pcl-space-3); /* 12px - heading bottom margin */
}

/* Specific heading adjustments for better hierarchy */
h1 {
	margin-top: 0; /* Usually at top of section */
	margin-bottom: var(--pcl-space-4);
}

h2 {
	margin-top: var(--pcl-space-5);
	margin-bottom: var(--pcl-space-4);
}

/* Selection styling */
::selection {
	background: rgba(140,235,239,.55);
	color: var(--pcl-purple-ink);
}

html { scroll-behavior: smooth; font-size: 100% !important; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, .serif {
	font-family: var(--pcl-display);
	font-weight: 400 !important;
	letter-spacing: .01em;
	text-wrap: balance;
	text-rendering: optimizeLegibility;
}

h2 {
	font-size: clamp(2rem, 3.8vw, 3rem);
	line-height: 1.12;
	letter-spacing: .01em;
	color: var(--pcl-purple);
	margin: 18px 0 16px;
}

/* Section heading scale — `.pcl-section h2` (0,1,1) beats Astra's
   `.entry-content :where(h2)` (0,1,0), which otherwise overrides PCL's bare
   `h2`/`h3` element selectors on the live pages. Component rules
   (`.pcl-card h3`, `.pcl-step h3`, …) still win via later source order. */
.pcl-section h2,
.pcl-band-navy h2 {
	font-size: var(--pcl-h2) !important;
}
.pcl-section h3,
.pcl-band-navy h3 {
	font-size: var(--pcl-h3);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: var(--pcl-display);
	color: var(--pcl-purple-ink);
}

.lede { color: var(--pcl-text-soft); max-width: 58ch; font-size: 1.07rem; line-height: 1.75; }

.eyebrow {
	font-size: .72rem;
	letter-spacing: .34em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--pcl-teal-text);
	display: flex;
	align-items: center;
	gap: 14px;
}

.eyebrow::before {
	content: "";
	width: 36px;
	height: 1px;
	background: linear-gradient(90deg, var(--pcl-teal-mid), var(--pcl-teal-light));
	flex: none;
}

.pcl-gradient-text {
	background: linear-gradient(120deg, var(--pcl-lilac), var(--pcl-purple));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pcl-brand-grad {
	background: linear-gradient(105deg, var(--pcl-mint) 0%, var(--pcl-cyan) 35%, #fff 52%, var(--pcl-cyan) 70%, var(--pcl-teal) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	background-size: 200% 100%;
}

/* Gradient text safety net: these classes paint with `color: transparent`
   clipped to a background gradient. Without background-clip:text support —
   or under forced-colors, where backgrounds are flattened — the text would
   vanish entirely. Both guards restore a solid readable colour. */
@supports not (background-clip: text) {
	.pcl-gradient-text,
	.pcl-brand-grad,
	.pcl-counter b {
		background: none;
		color: var(--pcl-mint);
	}
	.pcl-counter b .pcl-count,
	.pcl-counter b .pcl-unit {
		color: inherit;
	}
}
@media (forced-colors: active) {
	.pcl-gradient-text,
	.pcl-brand-grad,
	.pcl-counter b {
		background: none;
		color: CanvasText;
		-webkit-text-fill-color: CanvasText;
	}
	.pcl-counter b .pcl-count,
	.pcl-counter b .pcl-unit {
		color: inherit;
		-webkit-text-fill-color: CanvasText;
	}
}

section { position: relative; }

.dark {
	background: linear-gradient(180deg, var(--pcl-purple-ink), var(--pcl-purple-deep) 130%);
	color: var(--pcl-text-inv);
}
.dark h2 { color: var(--pcl-mint); }
.dark .lede { color: var(--pcl-text-inv-soft); }
.dark .eyebrow { color: var(--pcl-cyan); }

.wrap { max-width: 100vw; margin: 0 auto; padding: 0 28px; }

/* === Full-width / wide alignment helpers === */
.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 0;
	padding-right: 0;
}

.alignwide {
	max-width: var(--pcl-max);
	margin-left: auto;
	margin-right: auto;
}

/* Vertical section rhythm — `!important` beats Astra block-layout padding
   (`.entry-content[data-ast-blocks-layout] > *` sets top/bottom to 3em);
   the inner `.wp-block-group` owns horizontal gutter.
   Responsive/mobile override this at their breakpoints (later in cascade). */
.pcl-section { padding: var(--pcl-section-y) 0 !important; }
.pcl-section-tight { padding: var(--pcl-section-y-tight) 0 !important; }

/* Unified content gutter — align hero, sections, footer, nav, counters at every breakpoint */
.pcl-section > .wp-block-group,
.pcl-band > .wp-block-group,
.pcl-band-navy > .wp-block-group,
.pcl-hero-grid > .wp-block-group,
.footer-widgets > .wp-block-group,
.site-info > .wp-block-group,
.pcl-section > .wp-block-group > .wp-block-group,
.pcl-band-navy > .wp-block-group > .wp-block-group,
.pcl-section:not(.pcl-photo-band) > *,
.pcl-band-navy:not(.pcl-photo-band) > * {
	max-width: var(--pcl-maxw);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pcl-gutter);
	padding-right: var(--pcl-gutter);
	box-sizing: border-box;
}

.pcl-section:not(.pcl-photo-band) > .pcl-section-head,
.pcl-band-navy:not(.pcl-photo-band) > .pcl-section-head {
	max-width: 760px;
}

/* === Gutenberg layout neutralization === */
/* Override Gutenberg's constrained layout which adds max-width + centering margins */
.is-layout-constrained > .pcl-section,
.is-layout-constrained > .pcl-band,
.is-layout-constrained > .pcl-band-navy,
.is-layout-constrained > .pcl-section-tight,
.is-layout-constrained > .pcl-hero-grid,
.is-layout-constrained > .footer-widgets,
.is-layout-constrained > .site-info {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

/* Base layout containers (alternative approach - direct on section) */
.pcl-section,
.pcl-band-navy,
.pcl-hero-grid,
.footer-widgets,
.site-info {
	position: relative;
}

/* Additional direct container styling for consistency */
.pcl-section > .wp-block-group,
.pcl-band-navy > .wp-block-group,
.pcl-hero-grid > .wp-block-group,
.footer-widgets > .wp-block-group,
.site-info > .wp-block-group {
	max-width: var(--pcl-maxw);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pcl-gutter);
	padding-right: var(--pcl-gutter);
}

/* Reset default container centering on inner content wrappers */
.is-layout-constrained > .pcl-section > .wp-block-group,
.is-layout-constrained > .pcl-band > .wp-block-group,
.is-layout-constrained > .pcl-section-tight > .wp-block-group {
	max-width: var(--pcl-maxw);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pcl-gutter);
	padding-right: var(--pcl-gutter);
}

.pcl-tabular {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* Gutenberg color palette utilities */
.has-pcl-mint-background-color { background-color: var(--pcl-mint); }
.has-pcl-cyan-background-color { background-color: var(--pcl-cyan); }
.has-pcl-teal-background-color { background-color: var(--pcl-teal); }
.has-pcl-teal-text-background-color { background-color: var(--pcl-teal-text); }
.has-pcl-lilac-background-color { background-color: var(--pcl-lilac); }
.has-pcl-purple-background-color { background-color: var(--pcl-purple); }
.has-pcl-purple-ink-background-color { background-color: var(--pcl-purple-ink); }
.has-pcl-purple-deep-background-color { background-color: var(--pcl-purple-deep); }
.has-pcl-paper-background-color { background-color: var(--pcl-paper); }
.has-pcl-text-inv-background-color { background-color: var(--pcl-text-inv); }
.has-pcl-mint-color { color: var(--pcl-mint); }
.has-pcl-cyan-color { color: var(--pcl-cyan); }
.has-pcl-teal-color { color: var(--pcl-teal); }
.has-pcl-teal-text-color { color: var(--pcl-teal-text); }
.has-pcl-lilac-color { color: var(--pcl-lilac); }
.has-pcl-purple-color { color: var(--pcl-purple); }
.has-pcl-purple-ink-color { color: var(--pcl-purple-ink); }
.has-pcl-purple-deep-color { color: var(--pcl-purple-deep); }
.has-pcl-paper-color { color: var(--pcl-paper); }
.has-pcl-text-inv-color { color: var(--pcl-text-inv); }
.has-pcl-text-color { color: var(--pcl-text); }
.has-pcl-text-soft-color { color: var(--pcl-text-soft); }
.has-pcl-text-inv-soft-color { color: var(--pcl-text-inv-soft); }

/* Accessibility */
:focus-visible { outline: 2px solid var(--pcl-teal); outline-offset: 3px; box-shadow: var(--pcl-ring); }

/* Visually hidden but announced by screen readers */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Reduced motion: instant transitions */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; }
.skip-link:focus {
	left: 12px; top: 12px;
	background-color: var(--pcl-paper);
	color: var(--pcl-purple-ink);
	padding: 10px 16px;
	border-radius: var(--pcl-r);
	box-shadow: 0 4px 16px rgba(106,64,141,.08);
	font-weight: 600;
}

/* Astra page title suppression */
.page .entry-header,
.page-template-default .entry-header,
.page .entry-header .entry-title,
.single .entry-header .entry-title,
body.page .entry-header,
body.page-template-default .entry-header {
	display: none !important;
}

/* Make PCL hero and dark bands full-width, edge-to-edge within viewport */
.pcl-hero,
.pcl-band-navy,
.pcl-marquee {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 0;
	padding-right: 0;
}

/* Ensure sections inside .ast-container fill the content area */
.ast-container .pcl-section,
.ast-container .pcl-band,
.ast-container .pcl-band-navy {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Force full-width sections at all viewports — override ast-container max-width */
.pcl-section, .pcl-band, .pcl-band-navy, .pcl-hero, .pcl-marquee {
	max-width: 100% !important;
	width: 100% !important;
}

/* Full-bleed hero — force viewport width */
.pcl-hero {
	width: 100vw !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	left: 0 !important;
	right: 0 !important;
}

/* Override Astra container max-width for full-width content */
.ast-container {
	max-width: 100vw !important;
	margin: 0 !important;
	padding: 0 !important;
}
.ast-separate-container .site-content > .ast-container {
	max-width: 100vw !important;
	margin: 0 !important;
	padding: 0 !important;
}
.pcl-section, .pcl-band, .pcl-band-navy, .pcl-hero, .pcl-marquee {
	width: 100% !important;
	max-width: 100% !important;
}

/* ── module: buttons ── */
/*
 * PCL Buttons — All variants with sheen sweep
 */
.btn,
.pcl-btn,
.wp-block-button__link,
.ast-button,
.button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center; /* Ensures button text is centered */
	gap: 10px;
	padding: 14px 30px;
	min-height: 44px;
	border-radius: 999px;
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	transition: all .3s;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: var(--pcl-body);
	position: relative;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

/* Press state */
.btn:active,
.pcl-btn:active,
.wp-block-button__link:active,
.ast-button:active,
.button:active,
input[type="submit"]:active {
	transform: translateY(1px) scale(.985);
	transition-duration: .1s;
}

/* ── Centred label on arrow-bearing buttons ───────────────────────────
   An icon in normal flow can never leave the label centred: flex/grid
   either pin it hard left (space-between) or shift it by half the icon
   width. Taking the arrow out of flow is the only way the label's centre
   equals the button's centre at every viewport.
   1fr auto 1fr does NOT work here: the arrow lands inside a 1fr track
   that collapses to ~11px and overflows back into the label (measured
   exactly -14px). So: arrow absolutely positioned, symmetric padding
   sized to clear it (47px), which keeps total width unchanged
   (label + 94px = the old label + 56px padding + 38px icon/gap). */
.pcl-btn:has(> .pcl-btn-label) {
	padding-left: 47px;
	padding-right: 47px;
	/* The arrow is absolute now, so `.pcl-justify-between`'s
	   space-between would strand the lone label at flex-start
	   (measured -191px). Re-centre it. */
	justify-content: center;
}
.pcl-btn:has(> .pcl-btn-label) > .pcl-btn-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
	margin-left: 0;
}
.pcl-btn:has(> .pcl-btn-label) > .pcl-btn-label {
	display: block;
	text-align: center;
}
/* Nav CTA keeps its tighter pill geometry. */
.pcl-nav-cta:has(> .pcl-btn-label) {
	padding-left: 42px;
	padding-right: 42px;
}
.pcl-nav-cta:has(> .pcl-btn-label) > .pcl-btn-icon {
	right: 9px;
}

/* Keyboard focus ring — accessibility.
   The generic `button:focus-visible` selector (0,1,1) intentionally ties
   Astra's `button:focus{outline:0}` (0,1,1) and wins by source order, so
   every native button keeps a visible ring with keyboard input only. */
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.pcl-btn:focus-visible,
.wp-block-button__link:focus-visible,
.ast-button:focus-visible,
.button:focus-visible,
input[type="submit"]:focus-visible {
	outline: 3px solid var(--pcl-cyan);
	outline-offset: 3px;
}

/* Sheen sweep */
.btn::before,
.pcl-btn::before,
.wp-block-button__link::before,
.ast-button::before {
	content: none;
	position: absolute;
	top: 0;
	left: -80%;
	width: 50%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
	transform: skewX(-20deg);
	transition: left .55s ease;
}

.btn:hover::before,
.pcl-btn:hover::before,
.wp-block-button__link:hover::before,
.ast-button:hover::before { left: 130%; }

/* Brand button */
.btn-brand,
.pcl-btn-brand,
.wp-block-button .wp-block-button__link {
	background: linear-gradient(120deg, var(--pcl-cyan), var(--pcl-mint));
	color: var(--pcl-purple-ink);
}

.btn-brand:hover,
.pcl-btn-brand:hover,
.wp-block-button .wp-block-button__link:hover,
.ast-button:hover {
	box-shadow: 0 10px 32px rgba(140,235,239,.45);
	transform: translateY(-2px);
	color: var(--pcl-purple-ink);
}

/* Purple button */
.btn-purple,
.pcl-btn-purple {
	background: linear-gradient(120deg, var(--pcl-purple), var(--pcl-lilac));
	color: #fff;
}

.btn-purple:hover,
.pcl-btn-purple:hover {
	box-shadow: 0 10px 32px rgba(150,113,189,.4);
	transform: translateY(-2px);
}

/* Ghost button */
.btn-ghost,
.pcl-btn-ghost {
	border-color: rgba(202,242,241,.4);
	color: var(--pcl-mint);
	background: transparent;
}

.btn-ghost:hover,
.pcl-btn-ghost:hover {
	border-color: var(--pcl-cyan);
	color: #fff;
	transform: translateY(-2px);
}

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--pcl-line-dark);
	color: var(--pcl-teal-text);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--pcl-cyan);
	background: rgba(140,235,239,.1);
	color: var(--pcl-teal-text);
}

/* Fill button */
.wp-block-button.is-style-fill .wp-block-button__link {
	background: var(--pcl-purple-ink);
	color: var(--pcl-text-inv);
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
	background: var(--pcl-purple);
	color: var(--pcl-text-inv);
	box-shadow: 0 10px 32px rgba(150,113,189,.4);
	transform: translateY(-2px);
}

/* Nav CTA sizing */
.pcl-nav-cta { padding: 11px 24px; }

/* Unified radius — override any legacy inline 3px on CTAs (e.g. hero buttons stored in post content) */
.pcl-hero-ctas .wp-block-button__link,
.wp-block-button__link[style*="border-radius:3px"] {
	border-radius: var(--pcl-r) !important;
}

/* === Pill Button (fully rounded) === */
.btn-pill,
.pcl-btn-pill {
  border-radius: 999px;
  padding-left: 28px;
  padding-right: 28px;
}

.btn-pill.btn-brand,
.pcl-btn-pill.pcl-btn-brand {
  box-shadow: 0 6px 24px rgba(140,235,239,.35);
}

.btn-pill.btn-purple,
.pcl-btn-pill.pcl-btn-purple {
  box-shadow: 0 6px 24px rgba(150,113,189,.3);
}

/* Black-text overrides for CTA buttons in content sections */
#calculator .pcl-btn-brand,
.pcl-contact .pcl-btn-brand,
.pcl-hours-strip .pcl-btn-brand {
	color: #000 !important;
}

/* Core's `.entry-content a` (0,1,1) outranks single-class button rules (0,1,0). */
.entry-content .pcl-btn-purple {
	color: #fff;
}

.pcl-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(36,21,54,.1);
	font-size: 14px;
	line-height: 1;
	transition: transform .3s var(--pcl-ease);
}

.pcl-btn:hover .pcl-btn-icon { transform: translateX(3px); }
.pcl-btn-purple .pcl-btn-icon { background: rgba(255,255,255,.15); }
.pcl-justify-between { width: 100%; justify-content: space-between; }

/* Small pill variant */
.btn-pill-sm,
.pcl-btn-pill-sm {
  border-radius: 999px;
  padding: 10px 22px;
  font-size: .78rem;
  min-height: 40px;
}

/* ── module: nav ── */
/*
 * PCL Nav — Fixed transparent nav, brand, links, mobile menu, scroll glass
 */
.pcl-site-nav,
.pcl-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	border: 0;
	box-shadow: none;
	pointer-events: none;
}

.pcl-nav-in {
	pointer-events: auto;
	box-sizing: border-box;
	width: min(1200px, calc(100% - 40px));
	margin: 18px auto 0;
	padding: 10px 12px 10px 20px;
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 999px;
	border: 1px solid rgba(202,242,241,.16);
	background: rgba(26,14,41,.55);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 44px rgba(10,5,18,.4);
	transition: background .5s var(--pcl-ease), box-shadow .5s var(--pcl-ease), min-height .4s;
}

.pcl-site-nav.scrolled .pcl-nav-in,
.pcl-nav.scrolled .pcl-nav-in {
	min-height: 60px;
	background: rgba(26,14,41,.82);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 54px rgba(10,5,18,.55);
}

.pcl-brand {
	display: flex;
	align-items: center;
	gap: 13px;
	color: #fff;
	text-decoration: none;
}

.pcl-brand-gem,
.pcl-logo-gem {
	width: 38px;
	color: var(--pcl-cyan);
	transition: transform .5s;
}

.pcl-brand:hover .pcl-brand-gem,
.pcl-brand:hover .pcl-logo-gem { transform: rotate(-14deg); }

.pcl-brand-text,
.pcl-brand-name {
	font-family: var(--pcl-display);
	font-size: .95rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--pcl-text-inv);
}

/* Tagline. 3.7.0: raised from .54rem/.4em (8.64px) to .625rem/.32em
   (10px) — 8.64px was unreadable at tablet and desktop sizes. Tracking
   was trimmed in proportion so the lockup's overall width is nearly
   unchanged (+8px measured at 15 characters), which keeps the nav pill
   and its neighbours from reflowing at any width. */
.pcl-brand-text small,
.pcl-brand-name small {
	display: block;
	font-family: var(--pcl-body);
	font-size: .625rem;
	letter-spacing: .32em;
	color: var(--pcl-teal);
	margin-top: 2px;
}

/* Centre the tagline under the wordmark. The name box is exactly the
   wordmark's own width (measured 149/189/188/189px — the flex item is
   shrink-to-fit and never grows), so centring the tagline cannot shift
   the wordmark itself. */
.pcl-site-nav .pcl-brand-name small { text-align: center; }

.pcl-nav-links {
	display: flex;
	gap: 20px;
	align-items: center;
}

.pcl-nav-links a {
	color: var(--pcl-text-inv);
	font-size: .84rem;
	font-weight: 500;
	letter-spacing: .05em;
	position: relative;
	transition: color .25s;
	text-decoration: none;
	/* WCAG 2.2 2.5.8: pointer targets need >=24px in each dimension.
	   Visual size unchanged; the hit area grows. The pill CTA keeps its
	   own 44px button layout. */
}
.pcl-nav-links a:not(.pcl-btn) {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

.pcl-nav-links a:not(.btn)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 0;
	height: 1.5px;
	background: var(--pcl-cyan);
	transition: width .3s;
}

.pcl-nav-links a:not(.btn):hover,
.pcl-nav-links a:not(.pcl-btn):hover { color: var(--pcl-cyan); }
.pcl-nav-links a:not(.btn):hover::after,
.pcl-nav-links a:not(.pcl-btn):hover::after { width: 100%; }

.pcl-menu-btn {
	display: none;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 999px;
	color: var(--pcl-mint);
	cursor: pointer;
	position: relative;
	transition: background .3s;
}

.pcl-menu-btn:hover { background: rgba(140,235,239,.06); }

/* Hamburger icon — 3 lines morph to X */
.pcl-menu-lines {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 18px;
	height: 14px;
}

.pcl-menu-lines i {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--pcl-cyan);
	transform-origin: center;
	transition: transform .35s var(--pcl-ease), opacity .25s;
}

.pcl-menu-btn[aria-expanded="true"] .pcl-menu-lines i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pcl-menu-btn[aria-expanded="true"] .pcl-menu-lines i:nth-child(2) { opacity: 0; }
.pcl-menu-btn[aria-expanded="true"] .pcl-menu-lines i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav CTA */
.pcl-nav-cta {
	padding: 9px 18px;
	font-size: .84rem;
	font-weight: 500;
	letter-spacing: .05em;
	margin-left: 2px;
	color: #101014 !important;
	box-shadow: 0 6px 20px rgba(140,235,239,.18);
}

.pcl-nav-cta .pcl-btn-icon { width: 20px; height: 20px; font-size: 13px; }

@media (min-width: 1025px) {
	.pcl-cta-mobile { display: none; }
}

/* Active link state (scroll-spy) */
.pcl-nav-links a.active {
	color: var(--pcl-cyan);
}
.pcl-nav-links a.active:not(.btn)::after { width: 100%; }

/* Mobile — handled in responsive.css */
.pcl-mobile-menu { display: none; }


.pcl-social-float {
  position: fixed;
  right: var(--pcl-gutter);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  /* 3.7.0: opacity added so the hide-on-scroll fade (below, now applying
     to tablet as well as phones) transitions instead of snapping. */
  transition: transform .3s var(--pcl-ease), box-shadow .3s, opacity .3s var(--pcl-ease);
}

.pcl-social-float::before,
.pcl-social-float::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: pcl-social-radar 2.8s ease-out infinite;
}

.pcl-social-float::after { animation-delay: 1.4s; }
.pcl-social-float:hover { transform: translateY(-4px) scale(1.08); color: #fff; }
.pcl-social-float svg { width: 27px; height: 27px; flex: none; position: relative; z-index: 1; }
.pcl-social-float-x { bottom: 190px; background: #000; box-shadow: 0 8px 30px rgba(0,0,0,.3); }
.pcl-social-float-facebook { bottom: 122px; background: #1877F2; box-shadow: 0 8px 30px rgba(24,119,242,.35); }
.pcl-whatsapp-float { bottom: 54px; background: #25D366; box-shadow: 0 8px 30px rgba(37,211,102,.35); }

@keyframes pcl-social-radar {
  0% { transform: scale(1); opacity: .65; }
  100% { transform: scale(1.75); opacity: 0; }
}

@media (max-width: 640px) {
  .pcl-social-float {
    width: 46px;
    height: 46px;
    right: calc(12px + env(safe-area-inset-right, 0px));
    transition: transform .3s var(--pcl-ease), box-shadow .3s, opacity .3s var(--pcl-ease);
  }
  .pcl-social-float svg { width: 22px; height: 22px; }
  .pcl-social-float-x { bottom: calc(166px + env(safe-area-inset-bottom, 0px)); }
  .pcl-social-float-facebook { bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .pcl-whatsapp-float { bottom: calc(54px + env(safe-area-inset-bottom, 0px)); }
  /* Hide-on-scroll: the rail parks out of the way while reading so it
     never sits on the calculator or a slider; body class from nav.js.
     3.7.0: hoisted out of the max-width:640 block below so the tablet
     rail gets the same treatment — it is anchored to the viewport edge
     there too and lands on the calculator's steppers at rest. */
}

/* Stacked viewports (phones + tablets): the rail is viewport-anchored and
   sits over the calculator on these widths, so it parks while reading. */
body.pcl-floats-hidden .pcl-social-float {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* ── module: hero ── */
/*
 * PCL Hero — 2-column grid, aurora, shards, gem, scroll cue, ridge
 */
.pcl-hero {
	min-height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: var(--pcl-text-inv);
	position: relative;
	overflow: hidden;
	background: var(--pcl-purple-deep);
	padding: 116px 0 92px;
}

/* Neutralize WordPress is-layout root padding so hero content aligns to the shared gutter */
.pcl-hero.is-layout-flow,
.pcl-hero.is-layout-constrained {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Aurora */
.pcl-aurora {
	position: absolute;
	inset: -20%;
	pointer-events: none;
	filter: blur(70px);
	opacity: .45;
}

.pcl-aurora::before,
.pcl-aurora::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

.pcl-aurora::before {
	background: radial-gradient(38% 42% at 28% 32%, var(--pcl-purple) 0%, transparent 68%),
		radial-gradient(30% 34% at 72% 24%, var(--pcl-lilac) 0%, transparent 70%);
}

.pcl-aurora::after {
	background: radial-gradient(34% 40% at 74% 72%, var(--pcl-teal-mid) 0%, var(--pcl-teal-light) 68%),
		radial-gradient(26% 30% at 22% 80%, rgba(140,235,239,.75) 0%, transparent 72%);
}

/* Grain */
.pcl-hero-grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .35;
	background-image: radial-gradient(rgba(255,255,255,.06) .6px, transparent .7px);
	background-size: 4px 4px;
}

/* Shards */
.pcl-shards {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.pcl-shard {
	position: absolute;
	background: linear-gradient(135deg, rgba(140,235,239,.35), rgba(150,113,189,.22));
	clip-path: polygon(50% 0, 100% 74%, 12% 100%);
	width: 26px;
	height: 26px;
	opacity: .55;
}

/* Hero grid — 2-column layout */
.pcl-hero-grid {
	display: grid;
	grid-template-columns: 55% 45%;
	gap: 36px;
	align-items: center;
	max-width: var(--pcl-maxw);
	margin: 0 auto;
	padding: 0 var(--pcl-gutter);
	position: relative;
	z-index: 2;
	width: 100%;
}

/* ── Desktop (≥981px): optical alignment of text with gem ── */
@media (min-width: 981px) {
	/* Pin both columns to the grid top so the eyebrow starts level with
	   the gem's top edge. Centered columns chase themselves whenever the
	   copy grows (exact top-alignment would need 379px of padding), so
	   both columns are pinned explicitly — deterministic, no circularity. */
	.pcl-hero-grid { align-items: start; }
	/* Both columns share one upward shift so their confirmed relative
	   alignment is preserved while the dead void under the nav shrinks.
	   The gem column is lifted further (12px) so the mark — and its
	   caption, which rides below the canvas in the same column — sit
	   higher in the hero. */
	.pcl-hero-grid > .pcl-hero-copy { padding-top: 175px; }
	.pcl-hero-grid > .pcl-hero-gem { padding-top: 12px; }
	/* Detach the calculator from the supporting line. Child-scoped so it
	   beats the base panel rule regardless of source order. */
	/* Supporting line drops away from the headline to sit just above the
	   calculator it introduces. Child-scoped to beat base rules. */
	.pcl-hero-grid > .pcl-hero-copy .pcl-sub { margin-top: 286px; }
	.pcl-hero-grid > .pcl-hero-copy .pcl-calc-panel { margin-top: 32px; }
}

/* Gutenberg layout wrapper overrides */
.pcl-hero-grid.is-layout-flow,
.pcl-hero-grid.is-layout-constrained {
	display: grid;
	max-width: var(--pcl-maxw);
	margin-left: auto;
	margin-right: auto;
}

.pcl-hero-grid > .wp-block-group {
	display: flex;
	flex-direction: column;
	max-width: none;
	width: auto;
	margin: 0;
}

/* Gem — right column of the desktop 2-column hero; collapses above the text on tablet/mobile */
.pcl-hero-gem {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: visible;
	margin: 0 auto;
	max-width: none;
	width: 100%;
	padding: 8px 0 14px;
}

.pcl-gem-wrap {
	position: relative;
	width: min(480px, 100%);
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.pcl-gem-wrap canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: none;
}

.pcl-hero-gem.webgl-on .pcl-gem-wrap canvas {
	display: block;
}

.pcl-hero-gem.webgl-on .pcl-gem-fallback {
	display: none;
}

.pcl-hero-gem.webgl-on .pcl-gem-halo {
	opacity: 1;
}

.pcl-gem-halo {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(140,235,239,.22), transparent 70%);
	pointer-events: none;
}

.pcl-gem-fallback {
	width: min(400px, 78%);
	color: rgba(255,255,255,.95);
	filter: drop-shadow(0 24px 60px rgba(26,14,41,.5));
}

.pcl-gem-caption {
	position: absolute;
	left: 50%;
	bottom: -4px;
	transform: translateX(-50%);
	width: 100%;
	font-size: .68rem;
	line-height: 1.5;
	letter-spacing: .06em;
	text-align: center;
	color: rgba(255,255,255,.62);
}

.pcl-hero-copy .pcl-calc-panel {
	width: 100%;
	margin-top: 28px;
}

/* Calculator CTA lives below the panel (not inside it) so the figures
   breathe; the action stays immediately under the numbers. */
.pcl-hero-copy .pcl-calc-cta {
	margin-top: 18px;
	width: 100%;
}

/* Hero text */
/* Hero text. 3.7.0: eyebrow raised from .68rem (10.88px) to .75rem (12px).
   Phones already rendered this at .75rem via responsive.css, so the old
   value made the eyebrow SHRINK as the screen grew — a visible step at the
   640/641 boundary and illegible on tablet. One floor for every width. */
.pcl-hero .pcl-eyebrow {
	color: var(--pcl-mint);
	font-size: .75rem;
	letter-spacing: .22em;
}
.pcl-hero .pcl-eyebrow::before { background: linear-gradient(90deg, #fff, var(--pcl-mint)); }

.pcl-hero h1,
.pcl-hero h1.wp-block-heading,
.pcl-hero h1.has-text-color,
.pcl-hero .wp-block-heading {
	font-size: clamp(2.25rem, 4.6vw, 3.5rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: .01em;
	color: var(--pcl-text-inv);
	position: relative;
	z-index: 3;
	display: block;
	text-align: left !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 20px !important;
}
.pcl-hero h1 .pcl-brand-grad {
	display: inline-block;
	white-space: nowrap;
}
.pcl-hero h1 .pcl-hero-line {
	display: block;
}

/* Hero content container - consistent with base.css */
.pcl-hero-grid {
	max-width: var(--pcl-maxw);
	margin: 0 auto;
	width: 100%;
	padding-left: var(--pcl-gutter);
	padding-right: var(--pcl-gutter);
	box-sizing: border-box;
}

/* Footer content alignment */
.footer-widgets,
.site-footer .widget-area {
	max-width: var(--pcl-maxw);
	margin: 0 auto;
	padding-left: var(--pcl-gutter);
	padding-right: var(--pcl-gutter);
	width: 100%;
	box-sizing: border-box;
}

/* Footer text - left-aligned for readability */
.footer-widgets .widget-title,
.site-footer p,
.site-footer .widget-area * {
	text-align: left;
}

/* Align eyebrow content with section content area */
.pcl-eyebrow {
	max-width: var(--pcl-maxw);
	margin: 0 auto;
	padding-left: clamp(20px, 5vw, 48px);
	padding-right: clamp(20px, 5vw, 48px);
}

/* Hero grid — true two columns on desktop: text left, gem right */
.pcl-hero-grid > .wp-block-group:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}
.pcl-hero-grid > .pcl-hero-gem {
	grid-column: 2;
	grid-row: 1;
	order: 0;
}
.pcl-hero-grid > .wp-block-group:nth-child(1) > .wp-block-heading {
	width: 100%;
}

.pcl-hero .pcl-sub,
.pcl-hero p.has-text-color {
	font-weight: 300;
	line-height: 1.7;
	color: #ffffffd9;
	max-width: 52ch;
	font-size: 1.02rem;
}

.pcl-hero-ctas {
	display: flex;
	gap: 16px;
	margin-top: 44px;
	flex-wrap: wrap;
}

.pcl-hero-meta {
	display: flex;
	gap: 46px;
	margin-top: 64px;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 100%;
}

.pcl-hero-meta.is-content-justification-left {
	gap: 46px;
	justify-content: space-evenly !important;
}

.pcl-hero-meta div,
.pcl-hero-meta p {
	border-left: 1px solid rgba(255,255,255,.28);
	padding-left: 18px;
	margin: 0;
}

.pcl-hero-meta strong {
	display: block;
	font-family: var(--pcl-display);
	font-size: 1.6rem;
	letter-spacing: .02em;
	color: #fff;
}

.pcl-hero-meta span {
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
}

/* Tablet — three stats fit on one row, centered */
@media (max-width: 980px) and (min-width: 641px) {
	.pcl-hero-meta.is-content-justification-left {
		gap: 20px;
		justify-content: center;
	}
	/* Tablet hero carries a wider column than phones: let the gem scale
	   up to match (canvas follows the wrap via gem.js sizing). */
	.pcl-gem-wrap { width: min(340px, 60%) !important; }
}
	.pcl-hero-meta div,
	.pcl-hero-meta p {
		flex: 0 1 auto;
		min-width: 0;
	}
}

/* Scroll cue */
.pcl-scroll-cue {
	position: absolute;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,.55);
	font-size: .66rem;
	letter-spacing: .3em;
	text-transform: uppercase;
}

.pcl-scroll-cue span {
	display: block;
	width: 1px;
	height: 44px;
	background: linear-gradient(var(--pcl-cyan), transparent);
}

/* Ridge */
.pcl-hero-ridge {
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100%;
	z-index: 2;
	display: block;
}

.pcl-hero-ridge path:last-child {
	stroke: var(--pcl-cyan);
	stroke-width: 1.2;
	opacity: .7;
}

/* Word animation */
@media (prefers-reduced-motion: no-preference) {
	.pcl-hero h1 .w {
		display: inline-block;
		opacity: 0;
		transform: translateY(38px) rotate(2deg);
		animation: pcl-wordUp .9s cubic-bezier(.16,1,.3,1) forwards;
	}
	@keyframes pcl-wordUp { to { opacity: 1; transform: none; } }

	.pcl-shard {
		animation: pcl-drift var(--pcl-dur, 16s) ease-in-out infinite alternate;
	}
	@keyframes pcl-drift {
		from { transform: translate(0,0) rotate(0); }
		to { transform: translate(var(--pcl-dx, 30px), var(--pcl-dy, -46px)) rotate(var(--pcl-rot, 18deg)); }
	}

	.pcl-aurora { animation: pcl-aur1 22s ease-in-out infinite alternate; }
	.pcl-aurora::after { animation: pcl-aur2 26s ease-in-out infinite alternate; }
	@keyframes pcl-aur1 { from { transform: translate(-6%,-4%) scale(1); } to { transform: translate(7%,6%) scale(1.15); } }
	@keyframes pcl-aur2 { from { transform: translate(5%,3%) scale(1.1); } to { transform: translate(-8%,-6%) scale(.95); } }

	.pcl-scroll-cue span { animation: pcl-cue 1.8s ease-in-out infinite; }
	@keyframes pcl-cue {
		0% { transform: scaleY(0); transform-origin: top; }
		45% { transform: scaleY(1); transform-origin: top; }
		55% { transform: scaleY(1); transform-origin: bottom; }
		100% { transform: scaleY(0); transform-origin: bottom; }
	}

	.pcl-brand-grad { animation: pcl-sheen 7s ease-in-out infinite; }
	@keyframes pcl-sheen { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
}

/* Mobile mark motion: the static SVG breathes — slow tilt and scale on
   the stage, opacity pulse on the halo. Transform/opacity only, zero
   payload. Desktop keeps WebGL; reduced motion keeps stillness. */
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
	/* Scoped to the static mark only: once WebGL boots, the 3D scene
	   owns all motion and the CSS must not fight its transform. */
	.pcl-hero-gem:not(.webgl-on) .pcl-gem-wrap { animation: pcl-gem-breathe 9s ease-in-out infinite; }
	@keyframes pcl-gem-breathe {
		0%, 100% { transform: rotate(-2.5deg) scale(1); }
		50% { transform: rotate(2.5deg) scale(1.035); }
	}
	.pcl-hero-gem:not(.webgl-on) .pcl-gem-halo { animation: pcl-halo-pulse 9s ease-in-out infinite; }
	@keyframes pcl-halo-pulse {
		0%, 100% { opacity: .55; }
		50% { opacity: 1; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcl-hero h1 .w { opacity: 1; }
}

/* ── module: marquee ── */
/*
 * PCL Marquee — Infinite scrolling brand band
 */
.pcl-marquee {
	background: linear-gradient(90deg, var(--pcl-purple), var(--pcl-logo-purple));
	overflow: hidden;
	padding: 20px 0;
	border-top: 1px solid var(--pcl-line-dark);
	border-bottom: 1px solid var(--pcl-line-dark);
}

.pcl-marq-track {
	display: flex;
	gap: 64px;
	width: auto;
	min-width: 100%;
	will-change: transform;
}

@media (max-width: 640px) {
	.pcl-marquee {
		overflow-x: clip;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.pcl-marq-track { animation: pcl-marq 30s linear infinite; }
	@keyframes pcl-marq { to { transform: translateX(-50%); } }
	.pcl-marquee:hover .pcl-marq-track { animation-play-state: paused; }
}

.pcl-marq-track span {
	font-family: var(--pcl-display);
	font-size: 1.2rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--pcl-mint);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 64px;
}

.pcl-dot,
.pcl-marq-dot {
	width: 9px;
	height: 9px;
	background: var(--pcl-cyan);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	display: inline-block;
}

/* ── module: sections ── */
/*
 * PCL Sections — Counters, about, cards, rate-band, steps, values
 */

/* === Counters === */
.pcl-counters {
	background: var(--pcl-paper);
	border-bottom: 1px solid var(--pcl-line);
}

.pcl-counters-in {
	max-width: var(--pcl-maxw);
	margin: 0 auto;
	padding: 56px var(--pcl-gutter);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px;
	text-align: left; /* Changed from center to left for consistency */
}

/* === About === */
.pcl-about {
	display: grid;
	gap: 70px;
	align-items: start;
}

/* On desktop, show image and text side by side */
@media (min-width: 768px) {
	.pcl-about {
		grid-template-columns: .9fr 1.1fr;
		align-items: center;
	}
}

/* Stack about section content vertically for consistent alignment */
.pcl-about > .wp-block-group > .wp-block-group {
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Add vertical spacing between stacked elements */
.pcl-about > .wp-block-group > .wp-block-group + .wp-block-group {
	margin-top: var(--pcl-space-5); /* 24px */
}

/* Make paragraphs and headings full width */
.pcl-about p,
.pcl-about h2,
.pcl-about h3,
.pcl-about .wp-block-heading {
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left;
}

.pcl-about-gem {
	position: relative;
	display: flex;
	justify-content: center;
}

.pcl-about-gem .pcl-logo-gem,
.pcl-about-gem .pcl-gem-icon {
	width: min(320px, 85%);
	color: var(--pcl-teal);
	filter: drop-shadow(0 20px 40px rgba(106,64,141,.2));
}

.pcl-about-gem::after {
	content: "";
	position: absolute;
	inset: 10% 16%;
	background: radial-gradient(closest-side, rgba(140,235,239,.3), transparent 70%);
	z-index: -1;
}

.pcl-milestones {
	list-style: none;
	margin-top: 34px;
	position: relative;
	padding-left: 26px;
}

.pcl-milestones::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 8px;
	bottom: 8px;
	width: 1.5px;
	background: linear-gradient(var(--pcl-teal-mid), var(--pcl-lilac));
}

.pcl-milestones li {
	position: relative;
	padding: 14px 0;
}

.pcl-milestones li::before {
	content: "";
	position: absolute;
	left: -26px;
	top: 24px;
	width: 11px;
	height: 11px;
	background: var(--pcl-cyan);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	box-shadow: 0 0 0 4px rgba(140,235,239,.18);
}

.pcl-milestones .yr {
	font-family: var(--pcl-display);
	color: var(--pcl-purple);
	font-size: 1.08rem;
	margin-right: 12px;
}

.pcl-milestones p { font-size: .96rem; color: var(--pcl-text-soft); display: inline; }
.pcl-milestones strong { color: var(--pcl-text); font-weight: 700; }

/* === Cards === */
.pcl-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 26px;
}

.pcl-card {
	background: #fff;
	border: 1px solid var(--pcl-line);
	border-radius: var(--pcl-r-lg);
	padding: 44px 36px 40px;
	position: relative;
	overflow: hidden;
	transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s;
	transform-style: preserve-3d;
	will-change: transform;
}

/* Gradient border on hover (mask technique) */
.pcl-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: linear-gradient(135deg, var(--pcl-cyan), var(--pcl-lilac));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .45s var(--pcl-ease);
	pointer-events: none;
}

.pcl-card:hover::before { opacity: 1; }

.pcl-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--pcl-shadow-md);
}

.pcl-card-num {
	position: absolute;
	top: -26px;
	right: 6px;
	font-family: var(--pcl-body);
	font-weight: 800;
	font-size: 7.2rem;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(106,186,195,.4);
	transition: all .45s;
	pointer-events: none;
}

.pcl-card:hover .pcl-card-num {
	color: rgba(140,235,239,.16);
	-webkit-text-stroke: 1.5px var(--pcl-teal);
	transform: translateY(-4px);
}

.pcl-card::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: linear-gradient(90deg, var(--pcl-teal-mid), var(--pcl-lilac));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s;
}

.pcl-card:hover::after { transform: scaleX(1); }

.pcl-card-ico {
	width: 44px;
	height: 44px;
	position: relative;
	transition: transform .45s;
}

.pcl-card:hover .pcl-card-ico { transform: translateY(-4px) scale(1.06); }

.pcl-card h3 { font-size: var(--pcl-h3-lg); color: var(--pcl-purple); margin: 22px 0 10px; position: relative; }
.pcl-card p { color: var(--pcl-text-soft); font-size: var(--pcl-fs-body); position: relative; }

/* === Rate band === */
.pcl-rate-band {
	margin-top: 64px;
	background: linear-gradient(120deg, var(--pcl-purple), var(--pcl-lilac));
	border-radius: var(--pcl-r-lg);
	padding: 44px 48px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
	color: #fff;
	position: relative;
	overflow: hidden;
}

/* Bright display text on the purple band — white heading, cyan rate highlight */
.pcl-rate-band h3 { color: #fff; text-align: center; }
.pcl-rate-band .pcl-rate-highlight {
	color: var(--pcl-cyan);
	text-shadow: 0 0 24px rgba(140,235,239,.45);
}

.pcl-rate-band::before {
	content: "";
	position: absolute;
	top: -60%;
	right: -6%;
	width: 300px;
	height: 300px;
	background: radial-gradient(closest-side, rgba(140,235,239,.35), transparent 70%);
}

.pcl-rate-band .big {
	font-family: var(--pcl-display);
	font-size: clamp(2rem, 3.8vw, 2.8rem);
	line-height: 1.15;
	position: relative;
}

.pcl-rate-band .btn { flex: none; }

/* === Steps === */
.pcl-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 38px;
}

.pcl-step {
	border-top: 1px solid var(--pcl-line-dark);
	padding-top: 28px;
	position: relative;
}

.pcl-step::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 54px;
	height: 2px;
	background: var(--pcl-cyan);
}

.pcl-step-k {
	font-family: var(--pcl-display);
	font-size: 1rem;
	letter-spacing: .24em;
	color: var(--pcl-cyan);
}

.pcl-step h3 { font-size: 1.2rem; margin: 14px 0 10px; color: var(--pcl-mint); }
.pcl-step p { font-size: var(--pcl-fs-body); color: var(--pcl-text-inv-soft); }

/* Step heading toggle: a real <button> inheriting the h3 type so the
   heading stays in the document outline while remaining operable. */
.pcl-step-toggle {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	width: 100%;
	border-radius: 6px;
}

/* Steps accordion on narrow screens (JS toggles .active) */
@media (max-width: 980px) {
	.pcl-step { border: 1px solid var(--pcl-line-dark); border-radius: var(--pcl-r-lg); padding: 20px 22px; }
	.pcl-step::before { display: none; }
	.pcl-step h3 { margin: 4px 0 0; }
	.pcl-step-toggle { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
	.pcl-step-toggle::after {
		content: "+";
		font-family: var(--pcl-body);
		font-size: 1.3rem;
		font-weight: 400;
		color: var(--pcl-cyan);
		transition: transform .3s var(--pcl-ease);
		flex: none;
	}
	.pcl-step.active .pcl-step-toggle::after { transform: rotate(45deg); }
	.pcl-step p { max-height: 0; overflow: hidden; opacity: 0; margin: 0; transition: max-height .4s var(--pcl-ease), opacity .35s, margin .35s; }
	.pcl-step.active p { max-height: 260px; opacity: 1; margin-top: 12px; }
}

/* === Values === */
.pcl-why,
.pcl-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.pcl-why > div,
.pcl-values > div {
	border: 1px solid var(--pcl-line);
	position: relative;
	overflow: hidden;
	transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s;
}

.pcl-why > div::before,
.pcl-values > div::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(var(--pcl-teal-mid), var(--pcl-lilac));
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .4s;
}

.pcl-why > div:hover,
.pcl-values > div:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 48px rgba(106,64,141,.14);
}

.pcl-why > div:hover::before,
.pcl-values > div:hover::before { transform: scaleY(1); }

/* Liquid glass variant */
.pcl-why > div.liquid,
.pcl-values > div.liquid {
	background: transparent;
}
.pcl-why > div.liquid::before,
.pcl-values > div.liquid::before {
	background: rgba(255,255,255,0.02);
	background-blend-mode: luminosity;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.pcl-why h3,
.pcl-values h3 { font-size: var(--pcl-h3); color: var(--pcl-purple); margin-bottom: 8px; }
.pcl-why p,
.pcl-values p { font-size: var(--pcl-fs-body); color: var(--pcl-text-soft); }

/* Section heading */
.pcl-section-head {
	max-width: 700px;
	margin: 0 auto 62px;
	text-align: left; /* Changed from center to left for consistency */
}

.pcl-section-head.h-center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* Section content - make text blocks full width to align with hero */
.pcl-section > .wp-block-group > .wp-block-group > * {
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Ensure grid items take full width */
.pcl-section > .wp-block-group > .wp-block-group > .wp-block-group,
.pcl-section > .wp-block-group > .wp-block-group > .wp-block-group > * {
	width: 100%;
}

/* Make paragraphs and headings full width */
.pcl-section p,
.pcl-section h2,
.pcl-section h3,
.pcl-section .wp-block-heading {
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ── B.3a Community & News cards ─────────────────────────────────────── */
.pcl-community .pcl-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.pcl-event-card {
	background: var(--pcl-card-bg);
	border: 1px solid var(--pcl-line);
	border-radius: var(--pcl-r-lg);
	padding: 28px 24px 24px;
	transition: box-shadow .3s var(--pcl-ease), transform .3s var(--pcl-ease);
	position: relative;
	overflow: hidden;
}
.pcl-event-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--pcl-cyan), var(--pcl-lilac));
	opacity: 0;
	transition: opacity .4s var(--pcl-ease);
}
.pcl-event-card:hover::before { opacity: .06; }
.pcl-event-card:hover { box-shadow: var(--pcl-shadow-md); transform: translateY(-3px); }
.pcl-event-card .pcl-tag {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--pcl-cyan);
	color: var(--pcl-purple);
	margin-bottom: 12px;
	position: relative;
}
.pcl-event-card .pcl-tag.pcl-tag-purple {
	background: var(--pcl-purple);
	color: #fff;
}
.pcl-event-card h3 {
	font-size: var(--pcl-h3);
	color: var(--pcl-purple);
	margin: 0 0 8px;
	position: relative;
}
.pcl-event-card p {
	color: var(--pcl-text-soft);
	font-size: .92rem;
	margin: 0;
	position: relative;
}

/* ── B.3b Meet the Team ─────────────────────────────────────────────── */
.pcl-team .pcl-cards {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}
.pcl-team-card {
	text-align: center;
	border: 1px solid var(--pcl-line);
	position: relative;
	overflow: hidden;
	transition: transform .3s var(--pcl-ease), box-shadow .3s var(--pcl-ease);
}

.pcl-team-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(135deg, var(--pcl-cyan), var(--pcl-lilac));
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}

.pcl-team-card:hover::before { opacity: .06; }

.pcl-team-card:hover { box-shadow: var(--pcl-shadow-md); transform: translateY(-3px); }

/* Liquid glass variant */
.pcl-team-card.liquid {
	background: transparent;
}
.pcl-team-card.liquid::before {
	background: rgba(255,255,255,0.02);
	background-blend-mode: luminosity;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.pcl-team-avatar {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	margin: 0 auto 14px;
	background: linear-gradient(135deg, var(--pcl-cyan), var(--pcl-purple));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	color: #fff;
	font-family: var(--pcl-display);
	font-weight: 700;
}
.pcl-team-card h3 {
	font-size: 1.05rem;
	color: var(--pcl-purple);
	margin: 0 0 4px;
}
.pcl-team-card p {
	font-size: .85rem;
	color: var(--pcl-text-soft);
	margin: 0;
}

/* ── B.3c Careers ───────────────────────────────────────────────────── */
.pcl-careers .pcl-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}
.pcl-career-card {
	background: var(--pcl-card-bg);
	border: 1px solid var(--pcl-line);
	border-radius: var(--pcl-r-lg);
	padding: 28px 24px;
	transition: box-shadow .3s var(--pcl-ease), transform .3s var(--pcl-ease);
}
.pcl-career-card:hover { box-shadow: var(--pcl-shadow-md); transform: translateY(-3px); }
.pcl-career-card h3 {
	font-size: var(--pcl-h3);
	color: var(--pcl-purple);
	margin: 0 0 8px;
}
.pcl-career-card p {
	color: var(--pcl-text-soft);
	font-size: .92rem;
	margin: 0 0 16px;
}
.pcl-career-card a {
	color: var(--pcl-teal);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color .2s;
}
.pcl-career-card a:hover { border-color: var(--pcl-teal); }
.pcl-no-vacancy {
	text-align: center;
	padding: 40px 24px;
	background: var(--pcl-card-bg);
	border: 1px dashed var(--pcl-line);
	border-radius: var(--pcl-r-lg);
}
.pcl-no-vacancy h3 {
	font-size: var(--pcl-h3);
	color: var(--pcl-purple);
	margin: 0 0 8px;
}
.pcl-no-vacancy p {
	color: var(--pcl-text-soft);
	font-size: .92rem;
	margin: 0;
}

@media (max-width: 1100px) {
	.pcl-team .pcl-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
	.pcl-community .pcl-cards { grid-template-columns: 1fr 1fr; }
	.pcl-careers .pcl-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.pcl-community .pcl-cards { grid-template-columns: 1fr; }
	.pcl-team .pcl-cards { grid-template-columns: repeat(2, 1fr); }
}

.pcl-counter b {
	font-family: var(--pcl-display);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 3rem);
	display: block;
	background: linear-gradient(120deg, var(--pcl-teal-mid), var(--pcl-teal-light));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pcl-counter span {
	font-size: .74rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--pcl-text-soft);
	font-weight: 600;
}

/* The number and its unit both sit inside <b>, so `.pcl-counter span` above
   would shrink them to label size. Restore the intended <b> size. */
.pcl-counter b .pcl-count,
.pcl-counter b .pcl-unit {
	font-size: 1em;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	font-weight: inherit;
}
.pcl-counter b .pcl-unit { font-size: .55em; }

.pcl-milestones .pcl-yr {
	font-family: var(--pcl-display);
	font-weight: 400;
	color: var(--pcl-purple);
	font-size: 1.08rem;
}

.pcl-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.pcl-bento-shell {
	background: rgba(106,64,141,.05);
	border: 1px solid var(--pcl-line);
	border-radius: var(--pcl-r-lg);
	padding: 7px;
	transition: transform .5s var(--pcl-ease), box-shadow .5s var(--pcl-ease);
}

.pcl-bento-shell:hover {
	transform: translateY(-7px);
	box-shadow: var(--pcl-shadow-md);
}

.pcl-bento-shell .pcl-card {
	height: 100%;
	box-shadow: none;
}

.pcl-bento-feature {
	grid-column: span 2;
}

.pcl-bento-feature .pcl-card {
	background: linear-gradient(135deg, var(--pcl-purple), var(--pcl-lilac));
	color: #fff;
	min-height: 290px;
}

.pcl-bento-feature .pcl-card h3,
.pcl-bento-feature .pcl-card p { color: #fff; }
.pcl-bento-feature .pcl-card p { color: rgba(255,255,255,.85); }
.pcl-bento-feature .pcl-card-num { -webkit-text-stroke-color: rgba(255,255,255,.35); }
.pcl-bento-feature .pcl-card-ico { color: #fff; }

.pcl-bento-tint .pcl-card {
	background: linear-gradient(160deg, #EFFBFA, #DDF4F3);
}

.pcl-card-num {
	top: 10px;
	right: 14px;
	font-size: 6.6rem;
}

.pcl-rate-band { padding: 12px; }
.pcl-rate-band .pcl-rate-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 38px 42px;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: var(--pcl-r-lg);
}
.pcl-rate-band h3 {
	font-family: var(--pcl-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 3.6vw, 2.7rem) !important;
	letter-spacing: 0;
	text-align: left;
}

.pcl-photo-band {
	position: relative;
	min-height: 480px;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 130px 0 150px;
	background: var(--pcl-purple-deep);
}

.pcl-photo-band-bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
}

.pcl-photo-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(26,14,41,.88) 0%, rgba(89,53,125,.58) 46%, rgba(64,131,139,.14) 100%);
}

.pcl-photo-content {
	position: relative;
	z-index: 2;
	width: min(1180px, 100%);
	margin: 0 auto;
	padding: 0 var(--pcl-gutter);
	color: #fff;
}

.pcl-photo-content h2 {
	color: #fff;
	font-size: var(--pcl-h2) !important;
	max-width: 18ch;
	font-weight: 400;
}

.pcl-photo-content p {
	color: rgba(255,255,255,.9);
	max-width: 52ch;
	font-size: 1.1rem;
	font-weight: 300;
}

.pcl-photo-credit {
	position: absolute;
	right: 18px;
	bottom: 10px;
	z-index: 3;
	font-size: .64rem;
	letter-spacing: .04em;
	color: rgba(255,255,255,.65);
}

.pcl-photo-credit a { color: inherit; text-decoration: underline; display: inline-flex; align-items: center; min-height: 24px; }

.pcl-values-list {
	columns: 2;
	column-gap: 80px;
}

.pcl-values-list > div {
	break-inside: avoid;
	padding: 26px 0;
	border-top: 1px solid var(--pcl-line);
	display: flex;
	gap: 22px;
}

.pcl-value-num {
	font-family: var(--pcl-display);
	color: var(--pcl-teal);
	font-size: 1.05rem;
	letter-spacing: .1em;
	flex: none;
	padding-top: 2px;
}

.pcl-values-list h3 {
	font-size: 1.12rem;
	font-weight: 400;
	color: var(--pcl-purple);
	margin-bottom: 6px;
}

.pcl-values-list p { font-size: .93rem; color: var(--pcl-text-soft); }

.pcl-contact-tiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 56px;
}

.pcl-contact-tile {
	background: rgba(38,22,58,.7);
	border: 1px solid var(--pcl-line-dark);
	border-radius: var(--pcl-r-lg);
	padding: 30px 26px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.pcl-contact-tile svg { margin-bottom: 14px; }
.pcl-contact-tile strong {
	display: block;
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--pcl-text-inv-soft);
	font-weight: 700;
	margin-bottom: 6px;
}
.pcl-contact-tile a,
.pcl-contact-tile span { color: var(--pcl-mint); font-size: .98rem; display: block; }
.pcl-contact-tile a:hover { color: var(--pcl-cyan); }

.pcl-hours-strip {
	margin-top: 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	border: 1px solid var(--pcl-line-dark);
	border-radius: var(--pcl-r-lg);
	padding: 26px 34px;
	background: rgba(202,242,241,.04);
}

.pcl-hours-strip > div {
	display: flex;
	gap: 34px;
	flex-wrap: wrap;
}

.pcl-hours-strip span {
	display: block;
	font-size: .7rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--pcl-text-inv-soft);
}

.pcl-hours-strip b { color: var(--pcl-mint); font-weight: 600; font-size: .95rem; }

/* "Start Your Application" reads as black on the mint brand gradient
   (the .pcl-btn-brand default is dark-purple ink). Scoped to this strip
   so the hero and rate-band CTAs keep their existing ink. */
.pcl-hours-strip .pcl-btn,
.pcl-hours-strip .pcl-btn-icon { color: #000; }

/* The button label is a <span>, so `.pcl-hours-strip span` was silently
   restyling it (11.2px / .2em tracking / light ink instead of the
   button's own 13.6px / .09em / black). Re-inherit from the button. */
.pcl-hours-strip .pcl-btn .pcl-btn-label {
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
}

/* ── Team & Vacancies: centred section heads, all viewports ───────────
   base.css pins `text-align: left !important` on h2 / .lede /
   .pcl-eyebrow for the left-aligned hierarchy used by every other
   section, so the override needs the same weight. The eyebrow is a flex
   row (rule + text), so it centres via justify-content rather than
   text-align. Scoped to these two sections only. */
#team .pcl-section-head,
#careers .pcl-section-head {
	text-align: center !important;
	margin-left: auto;
	margin-right: auto;
}
#team .pcl-section-head h2,
#careers .pcl-section-head h2,
#team .pcl-section-head .pcl-sub,
#careers .pcl-section-head .pcl-sub {
	text-align: center !important;
}
#team .pcl-section-head .pcl-eyebrow,
#careers .pcl-section-head .pcl-eyebrow {
	text-align: center !important;
	justify-content: center;
}

/* ── Desktop: centre section headings and intro copy (>=981px) ─────────
   Reverted to desktop-only in 3.6.1: applying this to mobile/tablet
   (3.6.0) centred the narrow-column headings and was judged worse.
   base.css pins `text-align: left !important` on h1-h6 and paragraphs to
   give the page a consistent left hierarchy, so these overrides need the
   same weight. The eyebrow is a flex row (rule + text) and centres via
   justify-content rather than text-align.
   Scope is deliberate: headings and intro copy only. Body content stays
   at its natural alignment — a centred timeline list or form fields read
   worse, and the calculator's right-aligned "total repayable" column is a
   deliberate pairing with its label. */
@media (min-width: 981px) {
	.pcl-section-head,
	.pcl-section-head h2,
	.pcl-section-head h3,
	.pcl-section-head .pcl-sub,
	.pcl-section-head .lede,
	.pcl-section-head .pcl-eyebrow {
		text-align: center !important;
		margin-left: auto;
		margin-right: auto;
	}

	.pcl-section-head .pcl-eyebrow { justify-content: center; }

	/* About uses its own two-column block, not .pcl-section-head. */
	.pcl-about h2,
	.pcl-about .lede,
	.pcl-about .pcl-sub {
		text-align: center !important;
	}

	/* Hero copy column. Its vertical relationship to the gem is set by the
	   padding offsets in hero.css and is untouched here. */
	.pcl-hero-grid > .pcl-hero-copy > .pcl-eyebrow,
	.pcl-hero-grid > .pcl-hero-copy h1,
	.pcl-hero-grid > .pcl-hero-copy > .pcl-sub {
		text-align: center !important;
	}

	.pcl-hero-grid > .pcl-hero-copy > .pcl-eyebrow { justify-content: center; }

	.pcl-hero-grid > .pcl-hero-copy > .pcl-sub {
		margin-left: auto;
		margin-right: auto;
	}
}

.pcl-team-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

.pcl-team-card {
	background: #fff;
	border: 1px solid var(--pcl-line);
	border-radius: var(--pcl-r-lg);
	padding: 30px 22px;
	text-align: center;
}

.pcl-team-card h3 {
	font-family: var(--pcl-display);
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--pcl-purple);
	margin: 0 0 4px;
}

.pcl-team-role,
.pcl-team-card .pcl-role,
.pcl-team-card .pcl-team-role {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--pcl-teal);
}

.pcl-team-card > p:last-child { font-size: .9rem; color: var(--pcl-text-soft); }

@media (max-width: 980px) {
	.pcl-bento { grid-template-columns: repeat(2, 1fr); }
	.pcl-bento-feature { grid-column: span 2; }
	.pcl-contact-tiles { grid-template-columns: repeat(2, 1fr); }
	.pcl-team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.pcl-bento { grid-template-columns: 1fr; }
	.pcl-bento-feature { grid-column: auto; }
	.pcl-bento-feature .pcl-card { min-height: 250px; }
	.pcl-card-num { font-size: 4.6rem; top: 8px; right: 10px; }
	.pcl-photo-band { min-height: 420px; padding: 96px 0 116px; }
	.pcl-values-list { columns: 1; }
	.pcl-contact-tiles { grid-template-columns: 1fr; }
	/* `flex`, not `inline-flex`: the inline version overrode the base
	   display:block and fused the two phone numbers / the WhatsApp+email
	   pair onto one line ("+266 2232 4412+266 5201 1000"). Block-level flex
	   keeps the 44px tap height and still stacks. */
	.pcl-contact-tile a { min-height: 44px; display: flex; align-items: center; }
	.pcl-contact-tile strong { font-size: .72rem; letter-spacing: .215em; }
	.pcl-hours-strip { padding: 24px 20px; }
	.pcl-hours-strip > div { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
	.pcl-hours-strip .pcl-btn { width: 100%; }
	.pcl-team-grid { grid-template-columns: 1fr; }
}

/* ── module: tools ── */
/*
 * PCL Tools — Estimator glass panel + Affordability 2-col
 */

/* === Estimator === */
.pcl-calc {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 70px;
	align-items: center;
}

.pcl-calc-panel {
	background: rgba(202,242,241,.055);
	border: 1px solid var(--pcl-line-dark);
	padding: 46px;
	border-radius: var(--pcl-r-lg);
	backdrop-filter: blur(8px);
	box-shadow: 0 40px 90px rgba(0,0,0,.35);
	position: relative;
	overflow: hidden;
}

.pcl-calc-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1.5px;
	background: linear-gradient(90deg, transparent, var(--pcl-cyan), transparent);
}

.pcl-calc-row { margin-bottom: 34px; }

.pcl-calc-row label {
	display: flex;
	justify-content: space-between;
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pcl-text-inv-soft);
	margin-bottom: 14px;
}

.pcl-calc-row output {
	font-family: var(--pcl-display);
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--pcl-cyan);
}

.pcl-stepper {
	display: flex;
	gap: 12px;
	align-items: center;
}

.pcl-step-btn {
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--pcl-line-dark);
	background: rgba(202,242,241,.06);
	color: var(--pcl-mint);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: all .25s;
	font-family: var(--pcl-body);
}

.pcl-step-btn:hover {
	background: var(--pcl-cyan);
	color: var(--pcl-purple-ink);
	border-color: var(--pcl-cyan);
	transform: scale(1.08);
}

/* Range sliders */
input[type=range] {
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	height: 44px;
	border-radius: 22px;
	background: linear-gradient(90deg, var(--pcl-cyan) var(--fill, 50%), rgba(202,242,241,.18) var(--fill, 50%));
	outline-offset: 6px;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--pcl-teal-dark);
	border: 2px solid var(--pcl-white);
	cursor: pointer;
	box-shadow: 0 0 16px rgba(44,114,122,.6);
	transition: transform .25s var(--pcl-ease), box-shadow .25s;
}

input[type=range]::-moz-range-thumb {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--pcl-teal-dark);
	border: 2px solid var(--pcl-white);
	cursor: pointer;
	transition: transform .25s var(--pcl-ease), box-shadow .25s;
}

input[type=range]:hover::-webkit-slider-thumb,
input[type=range]:focus-visible::-webkit-slider-thumb,
input[type=range]:active::-webkit-slider-thumb {
	transform: scale(1.18);
	box-shadow: 0 0 26px rgba(140,235,239,.85);
}

input[type=range]:hover::-moz-range-thumb,
input[type=range]:focus-visible::-moz-range-thumb,
input[type=range]:active::-moz-range-thumb {
	transform: scale(1.18);
}

/* Calculator result */
.pcl-calc-result {
	border-top: 1px solid var(--pcl-line-dark);
	padding-top: 30px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	flex-wrap: wrap;
}

.pcl-calc-result .pcl-monthly,
.pcl-calc-result .amt {
	font-family: var(--pcl-display);
	font-weight: 400;
	font-size: clamp(2.1rem, 3.6vw, 3rem);
	text-shadow: 0 0 34px rgba(140,235,239,.35);
}

.pcl-calc-result .pcl-display {
	font-family: var(--pcl-display);
	font-weight: 400;
	font-size: 1.3rem;
	color: var(--pcl-mint);
}

.pcl-calc-result .pcl-calc-lbl,
.pcl-calc-result .lbl {
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--pcl-text-inv-soft);
}

.pcl-sum-rows { margin-top: 24px; border-top: 1px solid var(--pcl-line-dark); }

.pcl-sum-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--pcl-line-dark);
	font-size: .9rem;
	color: var(--pcl-text-inv-soft);
}

.pcl-sum-row b { color: var(--pcl-mint); font-weight: 600; white-space: nowrap; }
.pcl-sum-row.emph b { color: var(--pcl-cyan); }

/* Repayment split bar */
.pcl-repay { margin-top: 20px; }

.pcl-repay-lbls {
	display: flex;
	justify-content: space-between;
	font-size: .68rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pcl-text-inv-soft);
	margin-bottom: 8px;
}

.pcl-repay-bar {
	display: flex;
	height: 6px;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(202,242,241,.12);
}

.pcl-repay-bar span {
	display: block;
	height: 100%;
	transition: width .5s var(--pcl-ease);
}

.pcl-rb-princ {
	background: linear-gradient(90deg, var(--pcl-cyan), var(--pcl-teal));
	border-radius: 6px 0 0 6px;
}

.pcl-rb-int {
	background: linear-gradient(90deg, var(--pcl-lilac), var(--pcl-purple));
	border-radius: 0 6px 6px 0;
}

.pcl-calc-note {
	font-size: .78rem;
	color: var(--pcl-text-inv-soft);
	margin-top: 22px;
	line-height: 1.65;
}

/* === Affordability === */
.pcl-afford {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 26px;
}

.pcl-afford-form {
	background: #fff;
	border: 1px solid var(--pcl-line);
	border-radius: var(--pcl-r-lg);
	padding: 46px 42px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-shadow: 0 24px 60px rgba(106,64,141,.08);
}

.pcl-af-field label {
	display: block;
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--pcl-text-soft);
	margin-bottom: 9px;
}

.pcl-af-input {
	display: flex;
	align-items: center;
	border: 1px solid var(--pcl-line);
	border-radius: var(--pcl-r-lg);
	background: var(--pcl-paper);
	transition: all .25s;
}

.pcl-af-input:focus-within {
	border-color: var(--pcl-teal);
	box-shadow: 0 0 0 3px rgba(106,186,195,.18);
}

.pcl-af-input span {
	padding-left: 14px;
	font-family: var(--pcl-display);
	color: var(--pcl-purple);
	font-size: 1.05rem;
}

.pcl-af-input input {
	flex: 1;
	border: none;
	background: none;
	padding: 13px 14px 13px 8px;
	font-family: var(--pcl-body);
	font-size: 1.05rem;
	color: var(--pcl-text);
	outline: none;
	min-height: 44px;
}

.pcl-afford-form select {
	width: 100%;
	border: 1px solid var(--pcl-line);
	border-radius: var(--pcl-r-lg);
	background: var(--pcl-paper);
	padding: 13px 14px;
	font-family: var(--pcl-body);
	font-size: 1rem;
	color: var(--pcl-text);
	outline: none;
	transition: all .25s;
}

.pcl-afford-form select:focus {
	border-color: var(--pcl-teal);
	box-shadow: 0 0 0 3px rgba(106,186,195,.18);
}

/* Dropzone */
.pcl-dropzone {
	border: 1.5px dashed rgba(106,64,141,.35);
	border-radius: var(--pcl-r-lg);
	background: var(--pcl-paper);
	padding: 26px 20px;
	text-align: center;
	cursor: pointer;
	transition: all .25s;
	position: relative;
}

/* The real file input covers the whole zone (transparent): tap, click,
   Enter and Space all reach a native control, so no programmatic .click()
   is needed — this works even in mobile browsers that block synthetic
   file-picker opens. */
.pcl-dropzone-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* 0.01, not 0: Chromium refuses keyboard activation (Enter/Space) on a
	   file input that paints nothing, as an anti-spoofing measure. At 1%
	   the control counts as rendered so native keyboard opens work, while
	   remaining invisible to the eye. Mouse/touch are unaffected either way. */
	opacity: 0.01;
	cursor: pointer;
	display: block;
}
.pcl-dropzone:focus-within {
	border-color: var(--pcl-teal);
	box-shadow: 0 0 0 3px rgba(106,186,195,.25);
}

.pcl-dropzone:hover, .pcl-dropzone.drag {
	border-color: var(--pcl-teal);
	background: #F0FAFA;
	transform: translateY(-2px);
}

.pcl-dropzone p { font-size: .85rem; color: var(--pcl-text-soft); margin-top: 8px; }
.pcl-dropzone .fname { font-size: .78rem; color: var(--pcl-purple); margin-top: 10px; font-weight: 600; word-break: break-all; }

/* Or divider */
.pcl-af-or {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--pcl-text-soft);
	font-size: .7rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	font-weight: 700;
}

.pcl-af-or::before, .pcl-af-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--pcl-line);
}

/* Output panel */
.pcl-afford-out {
	background: linear-gradient(170deg, var(--pcl-purple-ink), var(--pcl-logo-purple) 160%);
	color: var(--pcl-text-inv);
	padding: 46px 42px;
	border-radius: var(--pcl-r-lg);
	box-shadow: 0 24px 60px rgba(36,21,54,.35);
}

.pcl-af-badge {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 100px;
	font-size: .7375rem;
	letter-spacing: .178em;
	text-transform: uppercase;
	font-weight: 800;
	margin-bottom: 28px;
	border: 1px solid var(--pcl-line-dark);
	color: var(--pcl-text-inv-soft);
	transition: all .35s;
}

.pcl-af-badge[data-state="pass"] { background: rgba(140,235,239,.16); border-color: var(--pcl-cyan); color: var(--pcl-cyan); box-shadow: 0 0 24px rgba(140,235,239,.25); }
.pcl-af-badge[data-state="watch"] { background: rgba(150,113,189,.2); border-color: var(--pcl-lilac); color: #D9C6F0; }
.pcl-af-badge[data-state="review"] { background: rgba(224,121,107,.12); border-color: #C98F84; color: #EFC0B8; }
.pcl-af-badge[data-state="idle"] { background: rgba(202,242,241,.055); color: var(--pcl-text-inv-soft); border: 1px solid var(--pcl-line-dark); }

.pcl-af-results { list-style: none; }

.pcl-af-results li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 15px 0;
	border-top: 1px solid var(--pcl-line-dark);
}

.pcl-af-results span { font-size: .86rem; color: var(--pcl-text-inv-soft); }

.pcl-af-results strong {
	font-family: var(--pcl-display);
	font-weight: 400;
	font-size: 1.25rem;
	color: var(--pcl-mint);
	white-space: nowrap;
}

.pcl-af-results li:nth-child(2) strong {
	font-size: 1.65rem;
	color: var(--pcl-cyan);
	text-shadow: 0 0 24px rgba(140,235,239,.35);
}

.pcl-afford-out .pcl-calc-note { color: var(--pcl-text-inv-soft) !important; margin-top: 18px; }

/* ── module: contact ── */
/*
 * PCL Contact — Contact list + hours panel
 */
.pcl-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	align-items: start;
}

.pcl-c-list {
	list-style: none;
	margin-top: 34px;
}

.pcl-c-list li {
	display: flex;
	gap: 18px;
	padding: 22px 0;
	border-top: 1px solid var(--pcl-line-dark);
	align-items: flex-start;
	transition: padding-left .3s;
}

.pcl-c-list li:hover { padding-left: 8px; }

.pcl-c-list svg { flex: none; margin-top: 3px; }

.pcl-c-list strong {
	display: block;
	font-size: .73rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--pcl-text-inv-soft);
	font-weight: 700;
	margin-bottom: 4px;
}

.pcl-c-list a, .pcl-c-list span { color: var(--pcl-mint); font-size: 1.02rem; }
.pcl-c-list a:hover { color: var(--pcl-cyan); }

.pcl-hours {
	background: rgba(202,242,241,.05);
	border: 1px solid var(--pcl-line-dark);
	border-radius: var(--pcl-r);
	padding: 42px;
	backdrop-filter: blur(8px);
}

.pcl-hours h3 { color: var(--pcl-mint); font-size: var(--pcl-h3); margin-bottom: 22px; }

.pcl-hours table { width: 100%; border-collapse: collapse; font-size: .94rem; }

.pcl-hours td {
	padding: 11px 0;
	border-top: 1px solid var(--pcl-line-dark);
	color: var(--pcl-text-inv-soft);
}

.pcl-hours td:last-child { text-align: right; color: var(--pcl-mint); }

/* ── module: footer ── */
/*
 * PCL Footer — Custom dark footer replacing Astra's default
 */
.pcl-site-footer,
.pcl-footer {
	background: var(--pcl-purple-deep);
	border-top: 1px solid var(--pcl-line-dark);
	color: var(--pcl-text-inv-soft);
	padding: 66px 0 42px;
	position: relative;
}

.pcl-footer-in,
.pcl-f-in {
	max-width: var(--pcl-maxw);
	margin: 0 auto;
	padding: 0 var(--pcl-gutter);
}

.pcl-footer-top,
.pcl-f-top {
	display: flex;
	justify-content: space-between;
	gap: 36px;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: 38px;
	border-bottom: 1px solid var(--pcl-line-dark);
}

.pcl-footer-top .pcl-logo-lockup,
.pcl-footer-top .pcl-footer-logo { color: #fff; }
.pcl-footer-top .pcl-logo-lockup svg,
.pcl-footer-top .pcl-footer-logo svg { height: auto; }
.pcl-footer-logo {
	display: flex;
	align-items: center;
	min-height: 44px;
	gap: 13px;
	text-decoration: none;
}
.pcl-footer-logo .pcl-logo-gem {
	width: 40px;
	height: auto;
	color: var(--pcl-cyan);
	flex: none;
}
.pcl-footer-logo .pcl-brand-name {
	font-family: var(--pcl-display);
	font-size: .84rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pcl-text-inv);
	line-height: 1.2;
}
.pcl-footer-logo .pcl-brand-name small {
	display: block;
	font-family: var(--pcl-body);
	font-size: .54rem;
	letter-spacing: .4em;
	color: var(--pcl-teal);
	margin-top: 2px;
}

.pcl-footer-links,
.pcl-f-links { display: flex; gap: 28px; font-size: .84rem; }
/* Semantic list: list items give screen readers boundaries between links
   ("list, 8 items") so the row never announces as one run-on token. */
ul.pcl-footer-links { list-style: none; margin: 0; padding: 0; }
.pcl-footer-links li { display: flex; margin: 0; padding: 0; }
.pcl-footer-links a,
.pcl-f-links a {
	color: var(--pcl-text-inv-soft);
	text-decoration: none;
	transition: color .25s;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.pcl-footer-links a:hover,
.pcl-f-links a:hover { color: var(--pcl-cyan); }

.pcl-footer-reg,
.pcl-f-reg {
	padding-top: 30px;
	font-size: .8rem;
	line-height: 1.8;
	max-width: 76ch;
}

.pcl-footer-bottom,
.pcl-f-bottom {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 26px;
	font-size: .78rem;
	letter-spacing: .06em;
	align-items: center;
	position: relative;
	z-index: 9999;
}

.pcl-social { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; max-width: 100%; }

.pcl-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid rgba(202,242,241,.35);
	background: rgba(202,242,241,.08);
	color: var(--pcl-mint);
	transition: all .3s;
	text-decoration: none;
}

.pcl-social a:hover {
	color: var(--pcl-purple-ink);
	background: var(--pcl-cyan);
	border-color: var(--pcl-cyan);
	transform: translateY(-3px);
}

.pcl-social a.pcl-social-text,
.pcl-social a.pcl-social-link-text {
	width: auto;
	border: none;
	background: none;
	padding: 0;
	font-size: .78rem;
	letter-spacing: .06em;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ── module: components ── */
/*
 * PCL Components — Progress bar, WhatsApp, shared bits
 */

/* === Scroll progress === */
#pcl-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	z-index: 120;
	background: linear-gradient(90deg, var(--pcl-teal), var(--pcl-cyan), var(--pcl-mint));
	box-shadow: 0 0 12px rgba(140,235,239,.7);
}

/* === WhatsApp float === */
/* Defined in nav.css with teal/purple gradient to match brand */

/* === Quick Quote Form === */
.pcl-quick-quote {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.pcl-quick-quote .pcl-eyebrow { margin-bottom: 16px; }
.pcl-quick-quote h2 { margin-bottom: 12px; }
.pcl-quick-quote .pcl-sub { margin-bottom: 32px; }

.pcl-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.pcl-form-field { margin-bottom: 0; }

.pcl-form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--pcl-mint);
  font-size: .85rem;
}

.pcl-form-field input,
.pcl-form-field select,
.pcl-form-field textarea {
  width: 100%;
  border: 1px solid var(--pcl-line-dark);
  border-radius: var(--pcl-r);
  padding: 12px 14px;
  background-color: rgba(255,255,255,.06);
  color: var(--pcl-text-inv);
  font-family: var(--pcl-body);
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
}

.pcl-form-field input:focus,
.pcl-form-field select:focus,
.pcl-form-field textarea:focus {
  border-color: var(--pcl-cyan);
  outline: 2px solid rgba(140,235,239,.35);
  outline-offset: 1px;
}

.pcl-form-field input::placeholder {
  color: var(--pcl-text-inv-soft);
}

.pcl-form-note {
  margin-top: 16px;
  font-size: .8rem;
  color: var(--pcl-text-inv-soft);
  text-align: center;
}

@media (max-width: 640px) {
  .pcl-form-row { grid-template-columns: 1fr; }
}

/* === Motion system === */
@media (prefers-reduced-motion: no-preference) {
	.pcl-reveal {
		opacity: 0;
		transform: translateY(30px);
		transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
	}
	.pcl-reveal.pcl-in { opacity: 1; transform: none; }

	.pcl-stagger > * {
		opacity: 0;
		transform: translateY(26px);
		transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
	}
	.pcl-stagger.pcl-in > * { opacity: 1; transform: none; }
	.pcl-stagger.pcl-in > *:nth-child(1) { transition-delay: .05s; }
	.pcl-stagger.pcl-in > *:nth-child(2) { transition-delay: .14s; }
	.pcl-stagger.pcl-in > *:nth-child(3) { transition-delay: .23s; }
	.pcl-stagger.pcl-in > *:nth-child(4) { transition-delay: .32s; }
	.pcl-stagger.pcl-in > *:nth-child(5) { transition-delay: .41s; }
	.pcl-stagger.pcl-in > *:nth-child(6) { transition-delay: .50s; }
}

/* === Link distinguishability === */
.entry-content a,
.wp-block-column p a,
.wp-block-group p a,
.wp-block-quote a,
.wp-block-list a {
	color: #1a6d73;
	text-decoration: underline;
	text-decoration-color: rgba(26,109,115,.5);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.entry-content a:hover,
.wp-block-column p a:hover,
.wp-block-group p a:hover,
.wp-block-quote a:hover,
.wp-block-list a:hover {
	text-decoration-color: var(--pcl-teal);
}

/* === Forms (pcl-core) === */
.pcl-form label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--pcl-purple-ink); }

/* The Quick Quote form sits on the navy contact band: dark-ink labels are
   unreadable there, so navy-placed forms get near-white labels. */
.pcl-band-navy .pcl-form label { color: var(--pcl-text-inv); }

.pcl-form input[type="text"],
.pcl-form input[type="email"],
.pcl-form input[type="tel"],
.pcl-form input[type="number"],
.pcl-form textarea,
.pcl-form select {
	width: 100%;
	border: 1px solid var(--pcl-line);
	border-radius: var(--pcl-r);
	padding: 10px 14px;
	background-color: var(--pcl-white, #fff);
	color: var(--pcl-text);
	font-family: var(--pcl-body);
}

.pcl-form input:focus,
.pcl-form textarea:focus,
.pcl-form select:focus {
	border-color: var(--pcl-cyan);
	outline: 2px solid rgba(140,235,239,.35);
	outline-offset: 1px;
}

.pcl-form .pcl-field { margin-bottom: 20px; }
.pcl-form .pcl-required { color: var(--pcl-teal); }

.pcl-form-status { border-radius: var(--pcl-r); padding: 12px 16px; margin-bottom: 20px; font-weight: 600; }
.pcl-form-status.is-success { background-color: #e7f5ee; color: #1a6b42; border: 1px solid #bfe5cf; }
.pcl-form-status.is-error { background-color: #fdecec; color: #a33a3a; border: 1px solid #f5c6c6; }
.pcl-form-status:empty { display: none; }
.pcl-form [aria-invalid="true"] { border-color: #c0392b; }

/* === Spotlight hover system === */
/* Pointer-tracked glow. spotlight.js injects <i class="pcl-spot"> into
   [data-spotlight] elements and sets --sp-x / --sp-y as percentages.
   Fine pointers + no reduced motion only. Paint-only, no filters. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
	[data-spotlight] { position: relative; overflow: hidden; }
	.pcl-spot {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 1;
		opacity: 0;
		transition: opacity .45s var(--pcl-ease);
		background: radial-gradient(340px circle at var(--sp-x, 50%) var(--sp-y, 50%), rgba(140,235,239,.16), transparent 62%);
	}
	[data-spotlight]:hover .pcl-spot { opacity: 1; }
	[data-spotlight]:hover .pcl-spot.hot { opacity: .9; }
}

/* === CTA band === */
.pcl-cta {
	background: linear-gradient(120deg, var(--pcl-purple-ink) 0%, var(--pcl-purple-deep) 100%);
	color: var(--pcl-text-inv);
	border-radius: var(--pcl-r);
	padding: clamp(32px, 5vw, 64px);
	position: relative;
	overflow: hidden;
}

.pcl-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(600px circle at 50% 0%, rgba(255,255,255,0.15), transparent 70%);
	pointer-events: none;
	z-index: 0;
	opacity: 0.3;
}

.pcl-cta::before {
	content: "";
	position: absolute;
	inset: -40%;
	pointer-events: none;
	background:
		radial-gradient(34% 40% at 22% 20%, rgba(106,64,141,.5) 0%, transparent 70%),
		radial-gradient(28% 36% at 80% 85%, rgba(140,235,239,.14) 0%, transparent 70%);
	z-index: 1;
}

.pcl-cta > * { position: relative; z-index: 2; }

.pcl-cta h2 { color: var(--pcl-mint); }

.pcl-cta .wp-block-button__link {
	background: linear-gradient(120deg, var(--pcl-cyan), var(--pcl-teal));
	color: var(--pcl-purple-ink);
}

.pcl-cta .wp-block-button__link:hover {
	background: linear-gradient(120deg, var(--pcl-teal), var(--pcl-cyan));
	color: var(--pcl-purple-ink);
	box-shadow: 0 10px 32px rgba(140,235,239,.4);
	transform: translateY(-2px);
}

/* === Contact strip === */
.pcl-contact-item {
	background-color: var(--pcl-white, #fff);
	border: 1px solid var(--pcl-line);
	border-radius: var(--pcl-r);
	padding: 20px 24px;
	box-shadow: 0 4px 16px rgba(106,64,141,.08);
	height: 100%;
}

.pcl-contact-item .pcl-icon { color: var(--pcl-cyan); }
.pcl-contact-item h3 { font-family: var(--pcl-display); margin: 8px 0 4px; font-size: 1rem; }

/* === Stats === */
.pcl-stat { text-align: center; }
.pcl-stat .pcl-stat-number { color: var(--pcl-purple-ink); font-family: var(--pcl-display); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 400; line-height: 1.1; }
.pcl-stat .pcl-stat-unit { font-size: .55em; }
.pcl-band-navy .pcl-stat-number { color: var(--pcl-mint); }
.pcl-stat .pcl-stat-label { color: var(--pcl-text-soft); margin-top: 4px; }
.pcl-band-navy .pcl-stat-label { color: var(--pcl-text-inv-soft); }

/* === Testimonials === */
.pcl-quote { background-color: var(--pcl-white, #fff); border-left: 4px solid var(--pcl-teal); border-radius: var(--pcl-r); padding: 24px; box-shadow: 0 4px 16px rgba(106,64,141,.08); }
.pcl-quote blockquote { margin: 0 0 12px; font-size: 1.0625rem; line-height: 1.6; }
.pcl-quote cite { color: var(--pcl-text-soft); font-style: normal; font-weight: 600; font-size: 0.875rem; }

/* === Dividers === */
.pcl-divider { width: 36px; height: 1px; background: linear-gradient(90deg, var(--pcl-cyan), var(--pcl-teal)); }
.pcl-divider-wide { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--pcl-line), transparent); }

/* === Band helpers === */
.pcl-band { background-color: var(--pcl-paper); }
.pcl-band-navy { background: linear-gradient(180deg, var(--pcl-purple-ink), var(--pcl-purple-deep) 130%); color: var(--pcl-text-inv); }
.pcl-band-navy h1, .pcl-band-navy h2, .pcl-band-navy h3, .pcl-band-navy h4, .pcl-band-navy .wp-block-heading { color: var(--pcl-mint); }
.pcl-band-navy a:not(.wp-block-button__link) { color: var(--pcl-cyan); }
.pcl-eyebrow { color: var(--pcl-teal-text); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; display: flex; align-items: center; gap: 14px; }
.pcl-eyebrow::before { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, var(--pcl-cyan), var(--pcl-teal)); }
.pcl-band-navy .pcl-eyebrow { color: var(--pcl-cyan); }

/* ── module: responsive ── */
/*
 * PCL Responsive — All media queries in one place
 * Breakpoints: 1100 (laptop), 980 (tablet), 640 (mobile), 544 (small mobile)
 */

/* === Laptop (1100px) === */
@media (max-width: 1100px) {
	.pcl-nav-links { gap: 22px; }
	.pcl-nav-links a { font-size: .8rem; }
	.pcl-brand-name { font-size: .92rem; letter-spacing: .1em; }
}

/* === Navigation collapse (1024px and below) === */
@media (max-width: 1024px) {
	.pcl-nav-in {
		width: calc(100% - 28px);
		margin: 12px auto 0;
		justify-content: space-between;
		padding: 8px 10px 8px 16px;
	}
	.pcl-nav-links { display: none; }
	.pcl-mobile-menu {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 101;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		gap: 0;
		padding: 104px 28px 40px;
		background: rgba(20,10,32,.94);
		backdrop-filter: blur(28px);
		-webkit-backdrop-filter: blur(28px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .5s var(--pcl-ease), visibility .5s;
		overflow-y: auto;
		pointer-events: none;
	}
	.pcl-mobile-menu.open {
		pointer-events: auto;
		opacity: 1;
		visibility: visible;
	}
	.pcl-mobile-menu a {
		font-family: var(--pcl-display);
		font-size: clamp(1.3rem, 5.5vh, 1.8rem);
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		text-decoration: none;
		color: var(--pcl-mint);
		padding: clamp(10px, 1.8vh, 16px) 0;
		border-bottom: 1px solid var(--pcl-line-dark);
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .5s var(--pcl-ease), transform .5s var(--pcl-ease), color .3s;
	}
	.pcl-mobile-menu.open a { opacity: 1; transform: none; }
	.pcl-mobile-menu.open a:nth-child(1) { transition-delay: .08s; }
	.pcl-mobile-menu.open a:nth-child(2) { transition-delay: .14s; }
	.pcl-mobile-menu.open a:nth-child(3) { transition-delay: .2s; }
	.pcl-mobile-menu.open a:nth-child(4) { transition-delay: .26s; }
	.pcl-mobile-menu.open a:nth-child(5) { transition-delay: .32s; }
	.pcl-mobile-menu.open a:nth-child(6) { transition-delay: .38s; }
	.pcl-mobile-menu.open a:nth-child(7) { transition-delay: .44s; }
	.pcl-mobile-menu a:hover { color: var(--pcl-cyan); }
	.pcl-menu-btn {
		display: inline-flex;
		position: relative;
		z-index: 102;
		width: 44px;
		height: 44px;
		min-height: 44px;
		padding: 0;
		border: none;
		background: none;
	}
}

/* === Tablet (980px) === */
@media (max-width: 980px) {
	/* Navigation collapse is handled by the max-width: 1024px block below. */

	/* Hero — single column: promise, gem, calculator.
	   The copy wrapper is dissolved so eyebrow/h1/sub/calculator become
	   grid items themselves; order then places the gem between the
	   promise and the tool. */
	.pcl-hero-grid {
		grid-template-columns: 1fr !important;
		gap: 0 !important;
		padding: 20px var(--pcl-gutter) 70px;
	}
	.pcl-hero-grid > .pcl-hero-copy {
		display: contents;
	}
	/* Grid items do not margin-collapse: without this the eyebrow/h1
	   gap grows by the eyebrow's old collapsed-away 16px. */
	.pcl-hero .pcl-eyebrow {
		margin-bottom: 0;
	}
	/* Centred promise on mobile: eyebrow, headline and supporting line
	   centre as a block. The h1 carries text-align:left !important on
	   desktop, so the override needs matching weight. The eyebrow is a
	   flex row (rule + text), so it centres via justify-content. */
	.pcl-hero .pcl-eyebrow {
		justify-content: center;
	}
	.pcl-hero h1,
	.pcl-hero-grid .pcl-sub {
		text-align: center !important;
	}
	.pcl-hero-gem {
		grid-column: 1 !important;
		grid-row: auto !important;
		order: 1 !important;
		width: 100% !important;
		margin: 34px auto 26px !important;
	}
	/* Supporting line sits below the gem on mobile: promise, mark,
	   supporting line, tool. Zero bottom margin preserves the
	   sub-to-calculator gap's collapsed 28px rhythm. */
	.pcl-hero-grid .pcl-sub {
		order: 2 !important;
		margin-bottom: 0;
		/* Supporting line drops away from the gem, matching the desktop
		   treatment (hero.css) at every stacked viewport. */
		margin-top: 40px;
	}
	/* Descendant — not a child — combinator: the panel stays nested in
	   the copy wrapper in the DOM; display:contents only flattens boxes. */
	.pcl-hero-grid #calculator {
		order: 3 !important;
	}
	/* The calculator CTA is a direct grid item since 3.0.2 (moved out of
	   the panel). Without an explicit order it defaults to 0 and jumps
	   ahead of the gem — pin it last on every stacked viewport. */
	.pcl-hero-grid .pcl-calc-cta {
		order: 4 !important;
		justify-self: stretch;
	}
	/* The caption describes cursor behaviour that does not exist on
	   touch; the mark stands unlabeled on mobile. */
	.pcl-gem-caption {
		display: none !important;
	}
	.pcl-gem-wrap { width: min(280px, 72%); }
	.pcl-gem-fallback { width: min(230px, 62%); }
	.pcl-hero h1 { font-size: clamp(2.1rem, 4.2vw, 2.6rem); }
	.pcl-hero .pcl-sub { font-size: 1.02rem; max-width: none; }
	.pcl-hero { min-height: auto; padding: 108px 0 72px; }

	/* Counters — 2×2 */
	.pcl-counters-in { grid-template-columns: 1fr 1fr !important; gap: 30px; }

	/* Cards — 2-col */
	.pcl-cards { grid-template-columns: 1fr 1fr; }

	/* Steps — 2×2 */
	.pcl-steps { grid-template-columns: 1fr 1fr; }

	/* Values — 2-col */
	.pcl-why,
	.pcl-values { grid-template-columns: 1fr 1fr; }

	/* Two-col sections — stack */
	.pcl-about,
	.pcl-calc,
	.pcl-afford,
	.pcl-contact {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Calculator panel */
	.pcl-calc-panel { padding: 32px; }

	/* Rate band — stack fully. The inner is its own flex row; leaving
	   it row-oriented crushes the h3 to ~96px on phones. */
	.pcl-rate-band { padding: 32px 28px; }
	.pcl-rate-band .pcl-rate-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 30px 24px;
	}
	.pcl-rate-band h3 { width: 100%; text-align: center; }
	.pcl-rate-band .pcl-rate-inner .pcl-btn { width: 100%; justify-content: center; }

	/* Contact hours panel */
	.pcl-hours { padding: 28px; }

	/* Affordability panels */
	.pcl-afford-form { padding: 28px 24px; }
	.pcl-afford-out { padding: 28px 24px; }

/* Section spacing */
.pcl-section { padding: var(--pcl-section-y) 0 !important; }
.pcl-section-tight { padding: var(--pcl-section-y-tight) 0 !important; }

	/* Ensure full-bleed outer sections have no horizontal padding */
	.pcl-band,
	.pcl-band-navy {
		padding-left: 0;
		padding-right: 0;
	}

	/* Inner content containers keep constrained layout */
	.pcl-band > .wp-block-group,
	.pcl-band-navy > .wp-block-group,
	.pcl-section > .wp-block-group {
		max-width: var(--pcl-maxw);
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--pcl-gutter);
		padding-right: var(--pcl-gutter);
	}

	/* Footer */
	.pcl-footer-top { flex-direction: column; gap: 20px; align-items: center; }
	.pcl-footer-logo { justify-content: center; }
	.pcl-footer-links { 
  flex-wrap: wrap; 
  justify-content: center; 
  gap: 16px 24px; 
}
}

/* === Mobile (640px) === */
@media (max-width: 640px) {
	/* Hero */
	/* Hero — h1 keeps a clear lead over h2 (32px) at every mobile width:
	   8.5vw beats h2's 8vw throughout, floor 2rem matches h2's floor. */
	.pcl-hero h1 { font-size: clamp(2rem, 8.5vw, 2.2rem); line-height: 1.14; }
	.pcl-hero .pcl-eyebrow { font-size: .75rem; letter-spacing: .177em; }
	.pcl-hero .pcl-sub { font-size: .95rem; line-height: 1.7; }
	.pcl-calc-result .pcl-calc-lbl,
	.pcl-calc-result .lbl { font-size: .8125rem; }
	.pcl-hero-meta { flex-direction: column; gap: 16px; justify-content: flex-start; }
	.pcl-hero-meta div,
	.pcl-hero-meta p { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding-top: 14px; }

	/* Cards, steps, values — single column */
	.pcl-cards { grid-template-columns: 1fr; gap: 20px; }
	.pcl-steps { grid-template-columns: 1fr; gap: 24px; }
	.pcl-why,
	.pcl-values { grid-template-columns: 1fr; gap: 16px; }

	/* Team role — preserve master values below 640px */
	.pcl-team-role,
	.pcl-team-card .pcl-role,
	.pcl-team-card .pcl-team-role {
		font-size: .74rem;
		font-weight: 700;
		letter-spacing: .2em;
		text-transform: uppercase;
	}

	/* Counters stay 2-col */
	.pcl-counters-in { grid-template-columns: 1fr 1fr; gap: 20px; padding: 36px var(--pcl-gutter); }
	.pcl-counter b { font-size: 1.7rem; }
	.pcl-counter span { font-size: .6375rem; letter-spacing: .1375em; }

	/* Rate band — outer stacks here; the inner stacks in the ≤980
	   block above. (The old `.btn` selector never matched; the live
	   button is `.pcl-btn`.) */
	.pcl-rate-band { padding: 28px 20px; flex-direction: column; text-align: center; }
	.pcl-rate-band h3 { font-size: 1.5rem !important; }

	/* Marquee */
	.pcl-marq-track span { font-size: .95rem; letter-spacing: .2em; gap: 40px; }

	/* Touch targets — min 44px */
	.btn,
	.wp-block-button__link,
	.pcl-step-btn,
	input[type="submit"],
	.pcl-nav-links a,
	.pcl-nav-links a:not(.pcl-btn),
	.pcl-whatsapp-float,
	.calculator-input,
	.calculator-btn,
	.calculator-select,
	select,
	textarea {
		min-height: 44px;
		padding: 12px 24px;
	}
	/* Nav lockup: keep the 44px tap height but drop the 24px side padding
	   — it was squeezing "Platinum Credit Ltd" onto two lines (verified:
	   189px of text in a 121px box at 320px). */
	.pcl-brand {
		min-height: 44px;
		padding: 12px 0;
	}
	/* Reclaiming that 48px is what lets the wordmark hold one line. */
	.pcl-site-nav .pcl-brand-name {
		white-space: nowrap;
	}

	/* Circular floats must not inherit the touch-target padding above:
	   48px of horizontal padding blows a 46px circle out to 48px. */
	.pcl-social-float.pcl-whatsapp-float,
	.pcl-social-float.pcl-social-float-x,
	.pcl-social-float.pcl-social-float-facebook {
		padding: 0;
	}

	/* Section spacing */
	.pcl-section { padding: var(--pcl-section-y) 0 !important; }
	.pcl-section-tight { padding: var(--pcl-section-y-tight) 0 !important; }

	/* Full-bleed on mobile */
	.pcl-band,
	.pcl-band-navy {
		padding-left: 0;
		padding-right: 0;
	}
	.pcl-band > .wp-block-group,
	.pcl-band-navy > .wp-block-group {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Affordability results — preserve master phone scale */
	.pcl-afford-results strong { font-size: 1.1rem; }
	.pcl-afford-results li:nth-child(2) strong { font-size: 1.35rem; }

	/* Section headings */
	.pcl-section-head { margin-bottom: 36px; }
	.pcl-section-head h2 { font-size: clamp(2rem, 8vw, 2rem); }
}

/* === Small mobile (544px) === */
@media (max-width: 544px) {
	/* Hero — compact */
	.pcl-hero {
		min-height: auto;
		padding: 48px 0 24px;
	}
	.pcl-hero-grid {
		padding: 8px var(--pcl-gutter) 24px;
		/* Zero gap: with five grid items (eyebrow/h1/sub/gem/calc),
		   margins carry the rhythm so the promise block keeps its
		   established spacing. */
		gap: 0 !important;
	}
	.pcl-hero h1 { margin: 18px 0 16px; }
	.pcl-gem-wrap { width: min(240px, 65vw); }
	.pcl-gem-fallback { width: min(200px, 60vw); }

	/* Cards */
	.pcl-card { padding: 28px 20px 24px; }
	.pcl-card-num { font-size: 4.6rem; top: -16px; }

	/* Contact */
	.pcl-contact-item { padding: 16px 14px; }
	.pcl-c-list { gap: 0; }
	.pcl-c-list li { padding: 16px 0; }

	/* CTA */
	.pcl-cta { padding: 28px 16px; }

	/* Affordability */
	.pcl-afford-form,
	.pcl-afford-out { padding: 20px 16px; }

	/* Calculator */
	.pcl-calc-panel { padding: 20px 16px; }
	.pcl-calc-row label { font-size: .78rem; font-weight: 400; }
	.pcl-calc-row output { font-size: 1.05rem; }
	.pcl-calc-result .pcl-monthly,
	.pcl-calc-result .amt { font-size: 2rem; }
	.pcl-calc-result .pcl-display { font-size: 1.3rem; }

	/* Footer */
	.pcl-site-footer,
	.pcl-footer { padding: 40px 0 28px; }
	.pcl-footer-reg,
	.pcl-f-reg { font-size: .72rem; }
	.pcl-footer-bottom,
	.pcl-f-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }

	/* WhatsApp float — matches the 46px rail in nav.css (which loads
	   earlier, so this later rule must agree with it). */
	.pcl-whatsapp-float {
		width: 46px;
		height: 46px;
		right: calc(12px + env(safe-area-inset-right, 0px));
		bottom: calc(54px + env(safe-area-inset-bottom, 0px));
	}
	.pcl-whatsapp-float svg { width: 22px; height: 22px; }

	/* Values cards */
	.pcl-why > div,
	.pcl-values > div { padding: 24px 18px; }

	/* About milestones */
	.pcl-milestones { padding-left: 20px; }
	.pcl-milestones li::before { left: -20px; width: 9px; height: 9px; }

	/* Nav */
	.pcl-nav-in { padding: 0 var(--pcl-gutter); }
	.pcl-brand-name { font-size: .95rem; }
	.pcl-brand-name small { font-size: .6875rem; letter-spacing: .3em; }

	/* Full-bleed outer sections — no horizontal padding on mobile */
	.pcl-band,
	.pcl-band-navy,
	.pcl-section,
	.pcl-section-tight {
		padding-left: 0;
		padding-right: 0;
	}

	/* Inner content padding */
	.pcl-section > .wp-block-group,
	.pcl-band > .wp-block-group,
	.pcl-band-navy > .wp-block-group {
		padding-left: var(--pcl-gutter);
		padding-right: var(--pcl-gutter);
	}
}

/* ── module: mobile ── */
/*
 * PCL Mobile — targeted refinements layered after responsive.css.
 * Covers phones + small tablets; tablet/desktop tuning lives here too.
 */

/* The lockup now holds two lines at every phone width (pill ≈66-71px),
   so the hero only needs clearance for the pill plus a 24px gap. */
@media (max-width: 980px) {
	.pcl-hero { padding-top: 108px !important; }
}

/* ── Small tablet (<=820px): tighten section density ── */
@media (max-width: 820px) {
	.pcl-section { padding: var(--pcl-section-y-tight) 0 !important; }
	/* 3.7.0: the h1 override that used to live here was removed. It capped
	   the headline at 2.4rem and floored it at 2.1rem, which is what made
	   the headline SHRINK from 35.2px at 640px to 33.6px at 641px. The
	   headline is now owned by one continuous curve in the tablet band
	   below. Section density is unaffected. */
}

/* ══════════════════════════════════════════════════════════════════════
   TABLET BAND (641–1024px) — 3.7.0
   ══════════════════════════════════════════════════════════════════════
   This file loads last in the cascade (functions.php enqueues
   base → buttons → nav → hero → marquee → sections → tools → contact →
   footer → components → responsive → mobile), so tablet rules live here
   where nothing can out-rank them on equal specificity.

   The band is bounded by the two real layout transitions in the design:
   640px (phone → tablet: 1-col grids, 280px gem) and 1025px (the nav
   stops collapsing and the gutters have grown past the social rail). */

@media (min-width: 641px) and (max-width: 1024px) {

	/* ── Headline: one continuous curve across the 640/641 seam ──────
	   Before: 640px → 35.2px (phone cap 2.2rem), 641px → 33.6px (tablet
	   floor 2.1rem). The headline visibly shrank as the screen grew.
	   Now: a linear ramp that starts exactly on the phone cap (35.2px at
	   641px) and lands exactly on the desktop curve's value at 981px
	   (45.13px), so neither boundary steps.
	     641 → 35.22   768 → 38.93   900 → 42.78   980 → 45.12
	   h2 is clamp(2rem,3.8vw,3rem) = 32–37px across the band, so the
	   h1-over-h2 lead goes from +3.2px to +7.9px — hierarchy that
	   actually reads at tablet size instead of tying. */
	.pcl-hero h1 {
		font-size: clamp(35.2px, calc(16.5px + 2.92vw), 45.6px);
		line-height: 1.12;
	}

	/* ── Calculator: clear the social rail ───────────────────────────
	   The rail is fixed at right:var(--pcl-gutter) and is 56px wide, so
	   it occupies the outer `gutter + 56px` of every stacked viewport.
	   At 768px the panel's "+" stepper spans x=665–727 while the rail
	   spans x=674–730 — the float sat directly on a live control.
	   Capping the panel to calc(100% - 144px) and centring it leaves a
	   guaranteed ≥16px gap at every width in the band (worst case 641px:
	   panel right edge 529 vs rail left 573), and as a bonus brings the
	   range sliders down from ~600px to a sane 340–460px of travel.
	   The CTA below the panel is capped identically so the two stay
	   flush. */
	.pcl-hero-grid .pcl-calc-panel,
	.pcl-hero-grid .pcl-calc-cta {
		max-width: calc(100% - 144px);
		margin-left: auto;
		margin-right: auto;
	}

	/* ── Tap targets: 36px steppers were phone-threshold on a tablet ──
	   36px clears the WCAG 2.5.8 AA minimum (24px) but sits well under
	   the 44–46px floor the rest of the design uses, and these are
	   primary repeat-tap controls. */
	.pcl-step-btn {
		width: 44px;
		height: 44px;
	}
	/* Both selects on the page live outside the hero panel (affordability
	   and Quick Quote), so they are addressed directly. */
	select {
		min-height: 44px;
	}

	/* ── Team grid timing ────────────────────────────────────────────
	   The 981–1099 band inherited the desktop 5-up layout (~171px cards
	   at 1024px: roles wrapped to four lines, names to two). Three
   columns gives ~285px at 1024px and restores readable roles/names. */
	.pcl-team-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 641px) and (max-width: 980px) {
	/* Two columns stay (cards are a comfortable ~335px at 768px) but the
	   fifth member was an orphan alone on row three. Span a trailing odd
	   card across the row so the block reads as a deliberate composition
	   rather than a grid that ran out of members. `:nth-child(odd):last-child`
	   only matches when the member count is odd, so it self-disables for an
	   even count — the team is data-driven and needs no PHP change. */
	.pcl-team-grid { grid-template-columns: repeat(2, 1fr); }
	.pcl-team-grid > :nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* ── Phones (<=640px) ── */
@media (max-width: 640px) {
	/* Hero — comfortable, non-clipping headline + readable lede.
	   h1 keeps a clear lead over h2 (32px): 8.5vw beats h2's 8vw. */
	.pcl-hero h1 {
		font-size: clamp(2rem, 8.5vw, 2.2rem) !important;
		line-height: 1.14 !important;
		margin: 22px 0 18px !important;
	}
	.pcl-hero p.has-text-color {
		font-size: .95rem !important;
		line-height: 1.7 !important;
		max-width: none;
	}
	.pcl-hero-ctas .wp-block-button__link {
		font-size: .85rem !important;
		padding: 13px 22px !important;
	}

	/* Footer registration — left-aligned + legible */
	.pcl-footer-reg,
	.pcl-f-reg {
		text-align: left;
		font-size: .8rem;
		line-height: 1.7;
	}

	/* Calculator — full-width steppers */
	.pcl-calc-panel .pcl-stepper {
		width: 100%;
	}

	/* Generic full-width tap targets on mobile */
	.pcl-btn,
	.wp-block-button__link,
	.pcl-whatsapp-float {
		min-height: 46px;
	}
}

/* ── Small phones (<=544px) ── */
@media (max-width: 544px) {
	.pcl-hero h1 {
		font-size: clamp(2rem, 8.5vw, 2.2rem) !important;
	}
}

/* ── Very small phones (<=380px): h2 floor 32px would tie h1's 32px floor.
   Drop h2's floor a touch so the h1 lead holds at every width. Band-navy
   and photo heads carry !important, hence the weight here. */
@media (max-width: 380px) {
	h2,
	.pcl-section h2,
	.pcl-section-head h2,
	.pcl-band-navy h2,
	.pcl-photo-content h2 {
		font-size: clamp(1.9rem, 8vw, 2rem) !important;
	}
}
/* ── Very narrow phones (<=344px) ── */
@media (max-width: 344px) {
	/* Dropping the lockup's side padding (responsive.css) frees 48px, which
	   is enough for the one-line wordmark. Here the pill is tightest, so
	   trim the wordmark type a step to guarantee it never re-wraps. */
	.pcl-site-nav .pcl-brand-name {
		font-size: .8rem;
		letter-spacing: .05em;
	}
	.pcl-site-nav .pcl-brand-name small {
		font-size: .5625rem;
		letter-spacing: .2em;
	}
}