/* ==========================================================================
   PITON-Global 2026 — Header & Footer
   Rebuilt from the Claude Design handoff kit (Homepage Version 2 nav/footer).
   Color/font values reference theme.json presets via CSS custom properties.
   ========================================================================== */

/* Every max-width + padding combo in this theme assumes border-box (padding
   included inside the max-width, not added on top) — without this reset,
   a 1240px max-width with 64px side padding renders as 1368px. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------- Header / sticky nav ---------- */
/* The block-theme wrapper around the header template part is exactly the
   header's own height, which left the header's own position:sticky with zero
   travel — the nav was authored sticky but never actually stuck (found
   2026-08-12). The WRAPPER is the sticky element now, so its containing
   block is the whole page. */
.wp-block-template-part:has(> .pg-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Client-chosen mobile behavior (Aug-12, "option B"): below the drawer tier
   the pinned bar auto-hides while scrolling down and returns on the first
   scroll-up. nav.js toggles .pg-nav-autohidden — never while the drawer is
   open, never near the top of the page. */
@media (max-width: 900px) {
	/* Hide by animating the sticky `top`, NOT transform: a transform on this
	   wrapper would make it the containing block for its position:fixed
	   descendants (the drawer, panels, scrim), which drags the off-canvas
	   drawer into the page's scrollable width. */
	.wp-block-template-part:has(> .pg-header) {
		transition: top .25s ease;
	}

	.wp-block-template-part.pg-nav-autohidden:has(> .pg-header) {
		top: -90px;
	}
}

.pg-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--white);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.pg-nav {
	max-width: 1240px;
	margin: 0 auto;
	padding: 16px 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pg-nav-logo img {
	height: 30.3px;
	width: auto;
	display: block;
}

.pg-nav-links {
	display: flex;
	align-items: center;
	gap: 26px;
	font: 500 15.5px/1 'Hanken Grotesk', sans-serif;
	color: var(--wp--preset--color--ink-body-muted);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pg-nav-item {
	position: relative;
}

.pg-nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	background: none;
	border: none;
	font: 500 15.5px/1 'Hanken Grotesk', sans-serif;
	color: var(--wp--preset--color--ink-body-muted);
	padding: 8px 0;
}

.pg-nav-trigger .label {
	padding-bottom: 6px;
	border-bottom: 1.5px solid transparent;
	transition: border-color .16s ease, color .16s ease;
}

.pg-nav-trigger:hover .label,
.pg-nav-trigger:focus-visible .label {
	border-bottom-color: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--brand-red);
}

.pg-nav-trigger .caret {
	font-size: 7px;
	opacity: .6;
}

/* Plain nav links (Philippines, Contact Us) — no dropdown, no underline treatment,
   just muted by default with a color change on hover. Without this class they fall
   back to theme.json's global link color (red) and look permanently "active". */
.pg-nav-link {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font: 500 15.5px/1 'Hanken Grotesk', sans-serif;
	padding: 8px 0;
}

/* Matches .pg-nav-trigger .label exactly (padding-bottom + transparent border) so
   plain links (Philippines, Contact Us) share the same box height as the dropdown
   triggers and don't sit at a different vertical position in the nav row. */
.pg-nav-link .label {
	color: var(--wp--preset--color--ink-body-muted);
	padding-bottom: 6px;
	border-bottom: 1.5px solid transparent;
}

.pg-nav-link:hover .label {
	color: var(--wp--preset--color--brand-red);
}

/* Current-page nav highlight — matches the handoff kit's active-state
   treatment (top-level trigger/link: red + bold; dropdown/mega leaf item:
   red text, no dot). The "is-current" class is added server-side per
   request (functions.php: piton2026_mark_current_nav_item), since this nav
   is a static template part with no per-request PHP of its own. */
.pg-nav-trigger.is-current .label,
.pg-nav-link.is-current .label {
	color: var(--wp--preset--color--brand-red);
	font-weight: 700;
}

.pg-nav-panel {
	position: fixed;
	top: 52px;
	left: 50%;
	transform: translateX(-50%);
	padding-top: 20px;
	width: min(1200px, calc(100vw - 48px));
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease;
}

/* Resources: right-aligned to its trigger (source: position:absolute; right:0). */
.pg-nav-panel.pg-panel-right {
	position: absolute;
	top: 100%;
	left: auto;
	right: 0;
	transform: none;
	padding-top: 16px;
	width: 640px;
}

/* About Us: centered under its trigger (source: position:absolute; left:50%; translateX(-50%)) — different anchor than Resources, do not share pg-panel-right. */
.pg-nav-panel.pg-panel-center {
	position: absolute;
	top: 100%;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	padding-top: 16px;
	width: 560px;
}

.pg-nav-item.is-open .pg-nav-panel {
	opacity: 1;
	visibility: visible;
}

/* Hover-to-open is desktop-only. Below 900px the panel is an inline accordion
   driven by .is-open, and a lingering :hover on touch would leave it stuck open. */
@media (min-width: 901px) {
	.pg-nav-item:hover .pg-nav-panel {
		opacity: 1;
		visibility: visible;
	}
}

.pg-nav-panel-inner {
	background: var(--wp--preset--color--white);
	border: 1px solid #E6EAF0;
	border-radius: 16px;
	box-shadow: 0 36px 84px -20px rgba(12,26,58,.34), 0 12px 30px -10px rgba(12,26,58,.12);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transform: translateY(6px);
	transition: transform .18s ease;
}

.pg-nav-item.is-open .pg-nav-panel-inner {
	transform: translateY(0);
}

@media (min-width: 901px) {
	.pg-nav-item:hover .pg-nav-panel-inner {
		transform: translateY(0);
	}
}

.pg-nav-panel-inner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: #CB0E2A;
	opacity: .9;
	z-index: 3;
}

.pg-mega-content {
	padding: 26px 30px;
}

.pg-mega-label {
	font: 700 11px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .14em;
	color: #9097A4;
	margin-bottom: 18px;
}

.pg-mega-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px 28px;
}

.pg-mega-cat {
	position: relative;
	padding-left: 14px;
	font: 700 12.5px/1.2 'Bricolage Grotesque', sans-serif;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-heading);
	padding-bottom: 9px;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	margin-bottom: 13px;
}

.pg-mega-cat::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1px;
	bottom: 11px;
	width: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--brand-red);
}

.pg-mega-tagline-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--hairline);
	gap: 16px;
}

.pg-mega-tagline-row span {
	font: 500 12px/1.3 'Hanken Grotesk', sans-serif;
	color: #9097A4;
}

.pg-mega-tagline-row a {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 700 12.5px/1 'Hanken Grotesk', sans-serif;
	color: var(--wp--preset--color--brand-red);
	white-space: nowrap;
}

/* Featured capability band */
.pg-mm-feat {
	display: flex;
	align-items: center;
	gap: 28px;
	background: linear-gradient(100deg, #0C1A3A, #15294F);
	color: #fff;
	padding: 20px 28px;
	position: relative;
	overflow: hidden;
}

.pg-mm-feat .fx-main {
	flex: 1;
	min-width: 0;
}

.pg-mm-feat .fx-eyb {
	font: 700 10.5px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .14em;
	color: #9FB0CC;
	display: inline-block;
	margin-bottom: 8px;
}

.pg-mm-feat h3 {
	font: 700 21px/1.15 'Bricolage Grotesque', sans-serif;
	letter-spacing: -0.02em;
	margin: 0 0 4px;
	color: #fff;
}

.pg-mm-feat p {
	font: 400 12.5px/1.45 'Hanken Grotesk', sans-serif;
	color: #AEB9D0;
	margin: 0;
	max-width: 460px;
}

.pg-mm-feat .fx-stats {
	display: flex;
	gap: 26px;
	flex-shrink: 0;
}

.pg-mm-feat .fx-stats .v {
	font: 700 24px/0.9 'Bricolage Grotesque', sans-serif;
	color: #fff;
}

.pg-mm-feat .fx-stats .k {
	font: 500 10px/1.3 'Hanken Grotesk', sans-serif;
	color: #8FA0BE;
	margin-top: 4px;
}

.pg-mm-feat .fx-go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: #0C1A3A;
	padding: 12px 20px;
	border-radius: 8px;
	font: 700 12.5px/1 'Hanken Grotesk', sans-serif;
	text-decoration: none;
	flex-shrink: 0;
	transition: transform .16s;
}

.pg-mm-feat .fx-go:hover {
	transform: translateX(3px);
}

/* Trust band */
.pg-mm-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border-top: 1px solid var(--wp--preset--color--hairline);
	background: #FAFBFC;
	padding: 15px 28px;
	flex-wrap: wrap;
}

.pg-mm-trust {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	font: 600 12px/1 'Hanken Grotesk', sans-serif;
	color: #5A6172;
}

.pg-mm-trust .tv {
	font: 800 14px/1 'Bricolage Grotesque', sans-serif;
	color: #0C1A3A;
}

.pg-mm-trust .sep {
	width: 1px;
	height: 20px;
	background: #E1E5EC;
}

.pg-mm-bcta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font: 700 13px/1 'Hanken Grotesk', sans-serif;
	color: var(--wp--preset--color--brand-red);
	text-decoration: none;
	white-space: nowrap;
}

.pg-mega-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The two bottom Industries categories (Media/Gaming, Industrial/Public) span
   two grid columns with their links flowing down a 2x4 grid. Desktop panel
   only — the <=900px drawer keeps the single-column list. */
@media (min-width: 901px) {
	.pg-mega-col-wide {
		grid-column: span 2;
		margin-top: 1.3cm;
	}

	.pg-mega-col-wide .pg-mega-links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: column;
		grid-template-rows: repeat(4, auto);
		gap: 10px 22px;
	}
}

.pg-mega-links a {
	text-decoration: none;
	font: 700 13px/1.2 'Hanken Grotesk', sans-serif;
	color: var(--wp--preset--color--ink-body-muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pg-mega-links a::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-positive);
	flex-shrink: 0;
}

.pg-mega-links a {
	padding: 4px 8px;
	margin: 0 -8px;
	border-radius: 3px;
	transition: background .12s ease, box-shadow .12s ease;
}

.pg-mega-links a:hover {
	background: #F6F7FA;
	color: var(--wp--preset--color--brand-red);
	box-shadow: inset 2px 0 0 var(--wp--preset--color--brand-red);
}

.pg-mega-links a.is-current {
	background: #F6F7FA;
	color: var(--wp--preset--color--brand-red);
	box-shadow: inset 2px 0 0 var(--wp--preset--color--brand-red);
}

.pg-mega-link-disabled {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 8px;
	margin: 0 -8px;
	font: 700 13px/1.2 'Hanken Grotesk', sans-serif;
	color: var(--wp--preset--color--ink-body-muted);
	opacity: .5;
	cursor: default;
}

.pg-mega-link-disabled .soon {
	flex-shrink: 0;
	font: 600 10.5px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #9097A4;
	background: #F1F2F5;
	border-radius: 4px;
	padding: 3px 6px;
}

.pg-panel-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 6px;
	padding: 10px;
}

.pg-panel-grid-2 a {
	text-decoration: none;
	padding: 11px 14px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pg-panel-grid-2 a .label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font: 600 14px/1.2 'Hanken Grotesk', sans-serif;
	color: var(--wp--preset--color--ink-heading);
}

.pg-panel-grid-2 a .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-positive);
	flex-shrink: 0;
}

.pg-panel-grid-2 a:hover {
	background: var(--wp--preset--color--section-light);
}

.pg-panel-grid-2 a.is-current {
	background: #FCE9EB;
}

.pg-panel-grid-2 a.is-current .label {
	color: var(--wp--preset--color--brand-red);
	font-weight: 700;
}

.pg-panel-grid-2 a.is-current .dot {
	display: none;
}

.pg-nav-cta-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--navy-4);
	color: var(--wp--preset--color--white);
	padding: 12px 22px;
	border-radius: 4px;
	font: 600 13.5px/1 'Hanken Grotesk', sans-serif;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease;
}

.pg-nav-cta-link:hover {
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--white);
}

.pg-nav-cta-arrow {
	color: var(--wp--preset--color--accent-negative);
}

/* ---------- Mobile drawer chrome (desktop: inert) ----------
   The hamburger, the scrim and the in-drawer CTA only exist below 900px.
   Declared display:none here so they never affect the desktop nav row. */
.pg-nav-burger,
.pg-nav-scrim,
.pg-nav-drawer-cta {
	display: none;
}

.pg-nav-burger {
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	background: none;
	border: none;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex-shrink: 0;
}

.pg-burger-bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--ink-heading);
	transition: transform .22s ease, opacity .18s ease;
}

/* Bars morph into an X while the drawer is open. */
.pg-nav-burger[aria-expanded="true"] .pg-burger-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.pg-nav-burger[aria-expanded="true"] .pg-burger-bar:nth-child(2) {
	opacity: 0;
}

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

/* ---------- Footer (light, white background — not navy) ---------- */
.pg-footer {
	background: #FFFFFF;
	border-top: 1px solid var(--wp--preset--color--card-border);
}

.pg-footer-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px 64px 44px;
}

.pg-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 48px;
}

.pg-footer-logo img {
	height: 34px;
	width: auto;
	display: block;
	margin-bottom: 16px;
}

.pg-footer-logo p {
	font: 400 13.5px/1.6 'Hanken Grotesk', sans-serif;
	color: #5A5F6E;
	margin: 0;
	max-width: 300px;
}

.pg-footer-col {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.pg-footer-col h4 {
	font: 700 12px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .12em;
	color: #9097A4;
	margin: 0 0 5px;
	text-transform: uppercase;
}

.pg-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.pg-footer-col a {
	text-decoration: none;
	color: #42475A;
	font: 600 13.5px/1.3 'Hanken Grotesk', sans-serif;
	text-transform: capitalize;
}

.pg-footer-col a:hover {
	color: var(--wp--preset--color--brand-red);
}

/* Entity / leadership statement above the copyright row (Aug-7 handoff). It takes
   over the rule the old footer byline used to carry, so the divider and its 26px
   of padding move here and .pg-footer-legal drops down to a plain flex row. */
.pg-footer-entity {
	padding-top: 26px;
	border-top: 1px solid var(--wp--preset--color--card-border);
}

.pg-footer-entity p {
	margin: 0;
	max-width: 1000px;
	font: 400 12.5px/1.7 'Hanken Grotesk', sans-serif;
	color: #646B7B;
	text-wrap: pretty;
}

.pg-footer-entity strong {
	color: #42475A;
}

.pg-footer-legal {
	margin-top: 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
	font: 400 12px/1.6 'Hanken Grotesk', sans-serif;
	color: var(--wp--preset--color--ink-muted);
}

/* ---------- Cookie banner ----------
   REMOVED 2026-08-11 by client decision (Aug-11 handoff, decision point D10). The .pg-cookie*
   rules and their markup in parts/footer.html are gone; do not reinstate them. If consent
   becomes legally required for the analytics stack, use a WP-level consent-mode plugin. */

/* ---------- Contact FAB ----------
   Ported from the handoff kit's .cyn-contact-* component (Homepage Version 2).
   The prototype's checkbox-hack is replaced with a real <button> + aria-expanded
   toggled by nav.js. Sits at z-index 71; 72 is now free (it was the cookie banner's). */
.pg-contact-scrim {
	position: fixed;
	inset: 0;
	z-index: 69;
	background: transparent;
}

.pg-contact-scrim[hidden] {
	display: none;
}

/* Aug-12 "last minute" drop: the FAB moved from the bottom-right corner to the
   right-edge midline, clustered directly under the sticky "Inquire Now" tab
   (whose bottom now ends just above center — see .pg-sticky-cta), and it is
   scroll-gated like the tab: hidden until nav.js adds .is-visible past the
   same 85%-viewport threshold. The old homepage-only bottom:77px override is
   superseded by this global position and was removed. */
.pg-contact-wrap {
	position: fixed;
	right: 28px;
	/* Aug-13: nudged 1.5cm (57px) below the original mid-right position, in step
	   with the sticky tab above it (their 20px gap is preserved). */
	bottom: calc(50% - 125px);
	z-index: 71;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	/* .pg-contact-panel keeps its layout box (visibility:hidden, not display:none) even while
	   closed, so this flex column is tall/wide well beyond the visible button — without this,
	   its own transparent area sits over whatever's underneath and swallows clicks meant for
	   that, despite being invisible itself. Re-enabled on the two children that are actually
	   ever clickable — and re-disabled on both while the wrap is scroll-hidden. */
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
}

.pg-contact-wrap.is-visible {
	opacity: 1;
}

.pg-contact-wrap:not(.is-visible) .pg-contact-btn,
.pg-contact-wrap:not(.is-visible) .pg-contact-panel {
	pointer-events: none;
}

.pg-contact-panel {
	position: absolute;
	right: 76px;
	bottom: 0;
	width: 320px;
	max-width: calc(100vw - 114px);
	transform-origin: bottom right;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.96);
	transition: opacity .22s ease, transform .22s cubic-bezier(.22,.8,.18,1), visibility .22s;
	pointer-events: auto;
}

.pg-contact-wrap.is-open .pg-contact-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.pg-contact-card {
	background: var(--wp--preset--color--white);
	border: 1px solid #ECEEF2;
	border-radius: 3px;
	box-shadow: 0 26px 64px rgba(12,26,58,.22);
	overflow: hidden;
}

.pg-contact-head {
	background: #0C1A3A;
	padding: 20px 22px;
}

.pg-contact-title {
	font: 700 16px/1.2 'Bricolage Grotesque', sans-serif;
	color: var(--wp--preset--color--white);
	margin-bottom: 5px;
}

.pg-contact-sub {
	font: 400 12.5px/1.5 'Hanken Grotesk', sans-serif;
	color: #AEB6C8;
}

.pg-contact-rows {
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pg-contact-row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px 12px;
	border-radius: 12px;
	text-decoration: none;
	transition: background .15s ease;
}

.pg-contact-row:hover {
	background: #F7F8FA;
}

/* The toll-free row is a <div>, not a link — three regional numbers can't share one
   href. Kill the row-level hover affordance so it doesn't read as clickable, and give
   the three inner tel: links their own. */
.pg-contact-row-static:hover {
	background: transparent;
}

.pg-contact-meta a {
	color: inherit;
	text-decoration: none;
}

.pg-contact-meta a:hover,
.pg-contact-meta a:focus-visible {
	color: var(--wp--preset--color--brand-red);
	text-decoration: underline;
}

.pg-contact-ic {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pg-contact-ic.pg-ic-red    { background: #FCE9EB; color: var(--wp--preset--color--brand-red); }
.pg-contact-ic.pg-ic-navy   { background: #E7ECF6; color: #15294F; }
.pg-contact-ic.pg-ic-blue   { background: #EAF1FE; color: #2F6FED; }
.pg-contact-ic.pg-ic-violet { background: #F0EDFE; color: #7C5CFC; }

.pg-contact-txt {
	flex: 1;
	min-width: 0;
}

.pg-contact-lbl {
	display: block;
	font: 600 14px/1.25 'Hanken Grotesk', sans-serif;
	color: var(--wp--preset--color--ink-heading);
}

.pg-contact-meta {
	display: block;
	font: 400 12px/1.3 'Hanken Grotesk', sans-serif;
	color: #9097A4;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pg-contact-foot {
	padding: 6px 14px 16px;
}

.pg-contact-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--white);
	padding: 14px;
	border-radius: 12px;
	font: 700 13.5px/1 'Hanken Grotesk', sans-serif;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(203,14,42,.28);
}

.pg-contact-btn {
	width: 60px;
	height: 60px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-red);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 12px 30px rgba(203,14,42,.42);
	transition: transform .2s ease, background .2s ease;
	pointer-events: auto;
}

.pg-contact-btn:hover {
	transform: translateY(-2px) scale(1.04);
}

.pg-contact-btn .pg-ic-x {
	display: none;
}

/* The cookie banner (72) is offset to right:104px so it clears the 60px button,
   but the open panel is 320px wide and still runs underneath it. Lifting the
   wrap above the banner while open keeps the panel the user just opened legible. */
.pg-contact-wrap.is-open {
	z-index: 73;
}

.pg-contact-wrap.is-open .pg-contact-btn {
	background: #15294F;
}

.pg-contact-wrap.is-open .pg-contact-btn .pg-ic-chat {
	display: none;
}

.pg-contact-wrap.is-open .pg-contact-btn .pg-ic-x {
	display: block;
}

@media (max-width: 900px) {
	.pg-mega-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.pg-footer-inner {
		padding-left: 30px;
		padding-right: 30px;
	}

	.pg-footer-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 30px;
	}

	/* Logo/description cell takes the full first row; the 4 link columns
	   then flow 2-up beneath it. */
	.pg-footer-grid > :first-child {
		grid-column: 1 / -1;
	}

	.pg-footer-col ul {
		gap: 2px;
	}

	.pg-footer-legal {
		justify-content: center;
		text-align: center;
		gap: 10px;
	}

	/* ---------- Mobile nav drawer ----------
	   Replaces the old `.pg-nav-links { display: none }`, which left the entire
	   primary nav unreachable below 900px with no alternative affordance.
	   The same <ul> is restyled into a drawer rather than duplicated, so the
	   ~100 service/industry links stay in one place and one source of truth. */
	/* backdrop-filter makes .pg-header the containing block for its
	   position:fixed descendants — which would clip the drawer and its scrim to
	   the 72px-tall header instead of the viewport. The header background is
	   already solid white, so the blur has nothing to reveal; dropping it below
	   900px costs nothing visually and lets the drawer size to the viewport. */
	.pg-header {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.pg-nav {
		padding: 14px 20px;
		gap: 10px;
	}

	.pg-nav-burger {
		display: inline-flex;
		order: 3;
	}

	.pg-nav-cta {
		order: 2;
		margin-left: auto;
	}

	.pg-nav-cta-link {
		padding: 10px 14px;
		font-size: 12.5px;
	}

	.pg-nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 79;
		background: rgba(12,26,58,.42);
		opacity: 0;
		transition: opacity .28s ease;
	}

	.pg-nav-scrim[hidden] {
		display: none;
	}

	.pg-nav-scrim.is-open {
		opacity: 1;
	}

	.pg-nav-links {
		display: flex;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(380px, 88vw);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 18px 0 40px;
		margin: 0;
		background: var(--wp--preset--color--white);
		box-shadow: -18px 0 44px rgba(12,26,58,.18);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		z-index: 80;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .28s cubic-bezier(.22,.8,.18,1), visibility .28s;
	}

	.pg-nav-links.is-open {
		transform: none;
		visibility: visible;
	}

	.pg-nav-item {
		position: static;
		border-bottom: 1px solid var(--wp--preset--color--hairline);
	}

	.pg-nav-trigger,
	.pg-nav-link {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		padding: 15px 22px;
		font-size: 15.5px;
		text-align: left;
	}

	/* The desktop underline treatment reads as a stray rule inside a drawer row. */
	.pg-nav-trigger .label,
	.pg-nav-link .label {
		padding-bottom: 0;
		border-bottom: none;
	}

	.pg-nav-trigger .caret {
		font-size: 18px !important;
		opacity: .75;
		transition: transform .2s ease;
	}

	.pg-nav-item.is-open .pg-nav-trigger .caret {
		transform: rotate(180deg);
	}

	/* Mega panel → inline accordion body. Every positioned/floating property from
	   the desktop rules (including .pg-panel-right / .pg-panel-center) is undone. */
	.pg-nav-panel,
	.pg-nav-panel.pg-panel-right,
	.pg-nav-panel.pg-panel-center {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		transform: none;
		width: 100%;
		padding-top: 0;
		z-index: auto;
		opacity: 1;
		visibility: visible;
		display: none;
	}

	.pg-nav-item.is-open .pg-nav-panel {
		display: block;
	}

	.pg-nav-panel-inner {
		background: #F7F8FA;
		border: none;
		border-radius: 0;
		box-shadow: none;
		transform: none;
	}

	.pg-nav-panel-inner::before {
		display: none;
	}

	.pg-mega-content {
		padding: 4px 20px 12px;
	}

	/* !important: the Industries and Resources panels carry an inline
	   grid-template-columns:repeat(3,1fr) in header.html, which otherwise wins
	   over this rule and forces a 3-column grid into a 380px drawer. */
	.pg-mega-grid {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	.pg-mega-cat {
		font-size: 14px !important;
		padding: 8px 18px;
		margin: 0;
	}

	.pg-mega-cat::before {
		height: 26px;
	}

	.pg-mega-links {
		gap: 2px;
	}

	.pg-mega-links a {
		padding: 9px 22px;
		font-size: 14px;
	}

	/* Desktop-only mega furniture — a promo sidebar and a trust band don't
	   translate to a single narrow column, and they bury the actual links. */
	.pg-mega-label,
	.pg-mega-tagline-row,
	.pg-mm-feat,
	.pg-mm-band {
		display: none;
	}

	.pg-panel-grid-2 {
		grid-template-columns: 1fr !important;
		padding: 4px 0 10px;
	}

	.pg-panel-grid-2 a {
		padding: 10px 22px;
		border-radius: 0;
	}

	.pg-nav-drawer-cta {
		display: block;
		padding: 20px 22px 0;
	}

	.pg-nav-drawer-cta a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		background: var(--wp--preset--color--brand-red);
		color: var(--wp--preset--color--white);
		padding: 14px;
		border-radius: 4px;
		font: 700 13.5px/1 'Hanken Grotesk', sans-serif;
		text-decoration: none;
	}

	/* The drawer lives inside .pg-header, which is a stacking context at z-index 50.
	   Without lifting the header itself, the footer's FAB (71) and cookie banner (72)
	   would paint over the open drawer no matter how high its own z-index is. */
	.pg-header.is-drawer-open {
		z-index: 90;
	}

	/* Keep the FAB clear of the drawer's edge on narrow screens; the vertical
	   mid-right position comes from the base rule. */
	.pg-contact-wrap {
		right: 18px;
	}
}

/* Below ~560px the CTA pill, logo and hamburger no longer fit on one row —
   the drawer carries its own copy of the CTA, so drop the header one. */
@media (max-width: 560px) {
	.pg-nav-cta {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pg-nav-links,
	.pg-nav-scrim,
	.pg-contact-panel,
	.pg-burger-bar,
	.pg-sticky-cta,
	.wp-block-template-part:has(> .pg-header) {
		transition: none;
	}
}

/* ---------- Sticky "Inquire Now" tab ----------
   Ported from the Aug-7 handoff kit's sticky-cta.js. Pinned to the right edge at
   mid-height; nav.js adds .is-visible once the page has scrolled past 85% of a
   viewport height. Rendered by piton2026_sticky_cta(), which skips /contact-us/.
   z-index 70 keeps it under the contact FAB (71) and the cookie banner (72) —
   both of those stay clickable in the rare short-viewport overlap. */
.pg-sticky-cta {
	position: fixed;
	right: 0;
	/* Aug-12 "last minute" drop: the tab's BOTTOM ends at this offset
	   (translateY(-100%)), clearing space for the contact FAB below.
	   Aug-13: nudged 1.5cm (57px) down from the original 50% - 8px. */
	top: calc(50% + 49px);
	z-index: 70;
	display: inline-flex;
	align-items: center;
	background: var(--wp--preset--color--brand-red);
	color: #fff;
	padding: 15px 20px;
	border-radius: 8px 0 0 8px;
	font: 700 15.2px/1 'Hanken Grotesk', sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: -6px 8px 24px rgba(203,14,42,.35);
	opacity: 0;
	transform: translateY(-100%) translateX(10px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease;
}

.pg-sticky-cta.is-visible {
	opacity: 1;
	transform: translateY(-100%) translateX(0);
	pointer-events: auto;
}

.pg-sticky-cta.is-visible:hover,
.pg-sticky-cta.is-visible:focus-visible {
	transform: translateY(-100%) translateX(-2px);
	box-shadow: -8px 10px 30px rgba(203,14,42,.5);
}

.pg-sticky-cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -5px;
}

@media (max-width: 640px) {
	.pg-sticky-cta {
		padding: 13px 15px;
		font-size: 14.1px;
	}
}

/* Scroll progress indicator (fixed top bar, width driven by nav.js) */
.pg-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, var(--wp--preset--color--brand-red), var(--wp--preset--color--brand-red-gradient));
	z-index: 60;
	box-shadow: 0 0 12px rgba(203,14,42,.55);
}

/* Bespoke pages define their own full-bleed sections (hero bands etc.) — never constrain post content */
.entry-content.wp-block-post-content {
	max-width: none;
	width: 100%;
}