/**
 * Pan Land Builder Elementor
 * Shared design system for all Pan Landscape widgets.
 *
 * Contents
 *  1. Tokens
 *  2. Primitives (container, section head, kicker)
 *  3. Buttons + links (one system, used by every widget)
 *  4. Hero
 *  5. Introduction
 *  6. Services
 *  7. Why Choose Us
 *  8. Featured Projects
 *  9. Process
 * 10. Final CTA
 * 11. Site footer
 * 12. Site header
 * 13. FAQ
 * 14. About page
 * 15. Page title bar
 * 16. Portfolio gallery
 * 17. Contact page
 * 18. Services listing
 * 19. Blog templates
 * 20. Responsive
 */

/* ============================ 1. TOKENS ============================ */
/* Every token lives on :root, never on .pan-section. An Elementor control
   writes to {{WRAPPER}} - an ancestor of .pan-section - so a token declared
   on .pan-section would shadow the control. Keep it that way when adding
   tokens: :root here, override from the widget's Style tab. */
:root {
	--pan-primary: #1A3A08;
	--pan-secondary: #D7623F;
	--pan-secondary-soft: #D7623F;
	--pan-cream: #f6f4ef;
	--pan-muted: #5d7185;
	--pan-line: #e7eae5;
	--pan-font: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;

	--pan-radius-sm: 8px;
	--pan-radius-md: 14px;
	--pan-radius-lg: 22px;

	--pan-shadow-sm: 0 4px 14px rgba(5, 44, 87, 0.07);
	--pan-shadow-md: 0 18px 40px rgba(5, 44, 87, 0.13);
	--pan-shadow-lg: 0 28px 64px rgba(5, 44, 87, 0.2);
	--pan-shadow-brand: 0 12px 28px rgba(253, 111, 3, 0.32);

	/* Single source of truth for every button in the pack. */
	--pan-btn-min-h: 56px;
	--pan-btn-pad-x: 30px;
	--pan-btn-pad-y: 15px;
	--pan-btn-font: 13px;
	--pan-btn-track: 0.06em;
	--pan-btn-radius: 999px;
	--pan-btn-border-w: 1px;
	--pan-btn-gap: 12px;
	--pan-btn-icon: 16px;
	--pan-btn-lift: -2px;

	--pan-pad-y: clamp(80px, 9vw, 130px);
	--pan-gutter: clamp(20px, 4vw, 40px);
	--pan-max: 1200px;

	--pan-ease: 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
	--pan-ease-slow: 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pan-section {
	position: relative;
	font-family: var(--pan-font);
}

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

.pan-section h1,
.pan-section h2,
.pan-section h3,
.pan-section p {
	overflow-wrap: break-word;
}

/* ========================== 2. PRIMITIVES ========================== */
.pan-container {
	width: 100%;
	max-width: var(--pan-max);
	margin-inline: auto;
	padding-inline: var(--pan-gutter);
}

/* Shared eyebrow. Self-contained pill that can never spill its column. */
.pan-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid rgba(253, 111, 3, 0.32);
	border-radius: 999px;
	background: rgba(253, 111, 3, 0.08);
	color: var(--pan-secondary);
	font: 600 11px / 1.45 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
}

.pan-kicker__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pan-secondary);
}

.pan-kicker--light {
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.07);
}

/* Shared section head: text block + optional aside (copy or one action). */
.pan-section-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 28px clamp(32px, 5vw, 80px);
	margin-bottom: clamp(44px, 5vw, 68px);
}

.pan-section-head__text {
	min-width: 0;
}

.pan-section-head__aside {
	display: flex;
	justify-content: flex-end;
	min-width: 0;
}

.pan-section-head h2 {
	max-width: 660px;
	margin: 22px 0 0;
	color: var(--pan-primary);
	font: 600 clamp(31px, 4.2vw, 56px) / 1.12 var(--pan-font);
	letter-spacing: -0.035em;
}

.pan-section-head__copy {
	max-width: 380px;
	margin: 0;
	color: var(--pan-muted);
	font: 400 14px / 1.8 var(--pan-font);
}

/* ======================== 3. BUTTONS + LINKS ======================== */
/* Every call to action in the pack renders this exact markup and geometry.
   Variants only ever change colour, never size, radius, or motion. */
.pan-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pan-btn-gap);
	min-height: var(--pan-btn-min-h);
	padding: var(--pan-btn-pad-y) var(--pan-btn-pad-x);
	border: var(--pan-btn-border-w) solid transparent;
	border-radius: var(--pan-btn-radius);
	color: inherit;
	font: 600 var(--pan-btn-font) / 1.25 var(--pan-font);
	letter-spacing: var(--pan-btn-track);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--pan-ease), box-shadow var(--pan-ease),
		background-color var(--pan-ease), border-color var(--pan-ease), color var(--pan-ease);
}

.pan-button:hover,
.pan-button:focus-visible {
	transform: translateY(var(--pan-btn-lift));
	text-decoration: none;
}

.pan-button:active {
	transform: translateY(0);
}

.pan-button:focus-visible {
	outline: 2px solid var(--pan-secondary);
	outline-offset: 3px;
}

.pan-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--pan-ease);
}

.pan-button .pan-icon {
	width: var(--pan-btn-icon);
	height: var(--pan-btn-icon);
}

.pan-button:hover .pan-icon,
.pan-button:focus-visible .pan-icon {
	transform: translate(3px, -3px);
}

.pan-button--primary {
	background-color: var(--pan-secondary);
	color: #fff;
	box-shadow: var(--pan-shadow-brand);
}

.pan-button--primary:hover,
.pan-button--primary:focus-visible {
	background-color: var(--pan-secondary-soft);
	color: #fff;
	box-shadow: 0 18px 38px rgba(253, 111, 3, 0.42);
}

/* Secondary on light backgrounds. */
.pan-button--outline {
	border-color: rgba(5, 44, 87, 0.22);
	background-color: transparent;
	color: var(--pan-primary);
}

.pan-button--outline:hover,
.pan-button--outline:focus-visible {
	border-color: var(--pan-primary);
	background-color: var(--pan-primary);
	color: #fff;
	box-shadow: var(--pan-shadow-md);
}

/* Secondary on dark backgrounds. */
.pan-button--ghost {
	border-color: rgba(255, 255, 255, 0.34);
	background-color: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.pan-button--ghost:hover,
.pan-button--ghost:focus-visible {
	border-color: #fff;
	background-color: rgba(255, 255, 255, 0.16);
	color: #fff;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
}

.pan-button--ghost:focus-visible {
	outline-color: #fff;
}

.pan-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pan-actions-gap, 14px);
	margin-top: var(--pan-actions-top, 40px);
}

/* ============================= 4. HERO ============================= */
.pan-hero {
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: 700px;
	color: #fff;
	background-color: var(--pan-primary);
	background-image:
		linear-gradient(
			var(--pan-hero-angle, 112deg),
			var(--pan-hero-overlay-1, rgba(5, 44, 87, 0.97)) 0%,
			var(--pan-hero-overlay-2, rgba(5, 44, 87, 0.86)) 46%,
			var(--pan-hero-overlay-3, rgba(5, 44, 87, 0.5)) 100%
		),
		var(--pan-hero-image, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.pan-hero__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(96px, 11vw, 130px);
}

.pan-hero__content {
	max-width: 720px;
	animation: pan-fade-up 0.8s ease both;
}

@keyframes pan-fade-up {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}

.pan-hero h1 {
	margin: 26px 0 24px;
	color: #fff;
	font: 600 clamp(36px, 5.4vw, 72px) / 1.07 var(--pan-font);
	letter-spacing: -0.04em;
}

.pan-hero__copy {
	max-width: 600px;
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font: 400 17px / 1.75 var(--pan-font);
}

.pan-hero__trust {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	max-width: 100%;
	margin-top: clamp(40px, 5vw, 60px);
	padding: 14px 22px 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.8);
	font: 400 11px / 1.55 var(--pan-font);
	letter-spacing: 0.03em;
}

.pan-hero__trust strong {
	display: block;
	color: #fff;
	font-weight: 600;
}

.pan-hero__trust-mark {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--pan-secondary);
	color: #fff;
}

.pan-hero__trust-mark .pan-icon {
	width: 15px;
	height: 15px;
}

/* Decorative layers. Never interactive, never affect layout. */
.pan-hero__blueprint,
.pan-hero__orbs,
.pan-hero__drawing,
.pan-hero__scroll {
	pointer-events: none;
}

.pan-hero__blueprint {
	position: absolute;
	right: -80px;
	bottom: -100px;
	z-index: 0;
	width: min(58vw, 620px);
	fill: none;
	stroke: var(--pan-blueprint-color, var(--pan-secondary));
	stroke-width: 1;
	opacity: var(--pan-blueprint-opacity, 0.16);
}

.pan-hero__orbs {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.pan-hero__orbs span {
	position: absolute;
	border-radius: 50%;
	filter: blur(var(--pan-orb-blur, 60px));
	opacity: var(--pan-orb-opacity, 0.3);
	animation: pan-float 16s ease-in-out infinite;
}

.pan-hero__orbs span:nth-child(1) { top: 12%; right: 20%; width: 220px; height: 220px; background: var(--pan-orb-1, var(--pan-secondary)); }
.pan-hero__orbs span:nth-child(2) { bottom: 18%; left: 8%; width: 280px; height: 280px; background: var(--pan-orb-2, #ffb27a); animation-delay: 5s; }
.pan-hero__orbs span:nth-child(3) { top: 45%; right: 5%; width: 160px; height: 160px; background: var(--pan-orb-3, #2b5fa8); animation-delay: 10s; }

@keyframes pan-float {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(28px, -28px) scale(1.05); }
}

.pan-hero__drawing {
	position: absolute;
	right: var(--pan-gutter);
	bottom: 96px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: rgba(255, 255, 255, 0.55);
	font: 600 10px / 1 var(--pan-font);
	letter-spacing: 0.25em;
}

.pan-hero__drawing span {
	padding: 8px 16px;
	text-transform: uppercase;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
}

.pan-hero__scroll {
	position: absolute;
	right: 26px;
	bottom: 30px;
	z-index: 2;
	color: rgba(255, 255, 255, 0.55);
	font: 500 10px / 1 var(--pan-font);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	writing-mode: vertical-rl;
}

.pan-hero__scroll .pan-icon {
	width: 14px;
	height: 14px;
	margin-top: 12px;
	color: var(--pan-secondary);
	animation: pan-bob 1.8s ease-in-out infinite;
}

@keyframes pan-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(5px); }
}

/* ========================= 5. INTRODUCTION ========================= */
.pan-introduction {
	padding-block: var(--pan-pad-y);
	background: var(--pan-cream);
	color: var(--pan-primary);
}

.pan-introduction__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
	align-items: center;
	gap: clamp(56px, 8vw, 110px);
}

.pan-introduction__visual {
	position: relative;
	min-width: 0;
	padding: 0 34px 34px 0;
}

.pan-introduction__image {
	position: relative;
	z-index: 1;
	min-height: 470px;
	border-radius: var(--pan-radius-md);
	background-color: var(--pan-placeholder-a, #cfd4cf);
	background-image: linear-gradient(135deg, var(--pan-placeholder-a, #d6d8d2), var(--pan-placeholder-b, #9fa9a5));
	background-position: center;
	background-size: cover;
	box-shadow: var(--pan-shadow-lg);
}

.pan-introduction__frame {
	position: absolute;
	inset: 22px 0 0 22px;
	border: 2px solid var(--pan-secondary);
	border-radius: var(--pan-radius-md);
	pointer-events: none;
}

.pan-introduction__stamp {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: calc(100% - 34px);
	padding: 20px 24px;
	border-radius: var(--pan-radius-sm) 0 var(--pan-radius-md) 0;
	background: var(--pan-secondary);
	color: #fff;
	box-shadow: var(--pan-shadow-md);
}

.pan-introduction__stamp strong {
	font: 600 32px / 1 var(--pan-font);
}

.pan-introduction__stamp span {
	max-width: 124px;
	font: 600 10px / 1.45 var(--pan-font);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pan-introduction__content {
	min-width: 0;
}

.pan-introduction h2 {
	max-width: 560px;
	margin: 22px 0 26px;
	color: var(--pan-primary);
	font: 600 clamp(30px, 3.8vw, 52px) / 1.13 var(--pan-font);
	letter-spacing: -0.035em;
}

.pan-introduction__copy {
	max-width: 530px;
	color: var(--pan-muted);
	font: 400 15px / 1.85 var(--pan-font);
}

.pan-introduction__copy p {
	margin: 0 0 18px;
}

.pan-introduction__copy p:last-child {
	margin-bottom: 0;
}

.pan-introduction .pan-actions {
	margin-top: var(--pan-actions-top, 34px);
}

/* =========================== 6. SERVICES =========================== */
.pan-services {
	padding-block: var(--pan-pad-y);
	background: #fff;
	color: var(--pan-primary);
}

.pan-service-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pan-grid-gap, 26px);
}

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

.pan-service-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pan-service-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-md);
	background: #fff;
	color: var(--pan-primary);
	text-decoration: none;
	transition: transform var(--pan-ease), box-shadow var(--pan-ease), border-color var(--pan-ease);
}

.pan-service-card:hover,
.pan-service-card:focus-visible {
	transform: translateY(-6px);
	border-color: rgba(253, 111, 3, 0.35);
	box-shadow: var(--pan-shadow-md);
	text-decoration: none;
}

.pan-service-card:focus-visible {
	outline: 2px solid var(--pan-secondary);
	outline-offset: 3px;
}

.pan-service-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: calc(var(--pan-radius-md) - 1px) calc(var(--pan-radius-md) - 1px) 0 0;
	background: linear-gradient(135deg, var(--pan-placeholder-a, #d8ddd9), var(--pan-placeholder-b, #9ba9a5));
}

/* The image is its own layer so scaling it never moves the badge. */
.pan-service-card__img {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	transition: transform var(--pan-ease-slow);
}

.pan-service-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 45%, var(--pan-media-overlay, rgba(5, 44, 87, 0.6)));
	opacity: var(--pan-media-overlay-idle, 0.35);
	transition: opacity var(--pan-ease);
}

.pan-service-card:hover .pan-service-card__img {
	transform: scale(1.06);
}

.pan-service-card:hover .pan-service-card__media::after {
	opacity: 1;
}

.pan-service-card__index {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--pan-secondary);
	color: #fff;
	font: 600 11px / 1 var(--pan-font);
	letter-spacing: 0.04em;
}

.pan-service-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 24px 22px 22px;
}

.pan-service-card h3 {
	margin: 0 0 10px;
	font: 600 18px / 1.32 var(--pan-font);
	transition: color var(--pan-ease);
}

.pan-service-card:hover h3 {
	color: var(--pan-secondary);
}

.pan-service-card p {
	margin: 0;
	color: var(--pan-muted);
	font: 400 13px / 1.7 var(--pan-font);
}

/* Pinned to the bottom so every card footer lines up. */
.pan-card-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 18px;
	color: var(--pan-secondary);
	font: 600 11px / 1 var(--pan-font);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pan-service-card__body > .pan-card-link {
	border-top: 1px solid var(--pan-line);
}

.pan-card-link .pan-icon {
	width: 14px;
	height: 14px;
}

.pan-service-card:hover .pan-card-link .pan-icon {
	transform: translate(3px, -3px);
}

.pan-services__footer {
	display: flex;
	justify-content: center;
	margin-top: clamp(40px, 4vw, 56px);
}

/* ======================== 7. WHY CHOOSE US ======================== */
.pan-benefits {
	overflow: hidden;
	padding-block: var(--pan-pad-y);
	background: var(--pan-primary);
	color: #fff;
}

.pan-benefits::before {
	content: "";
	position: absolute;
	top: -140px;
	right: -140px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--pan-glow, rgba(253, 111, 3, 0.2)), transparent 66%);
	pointer-events: none;
}

.pan-benefits .pan-container {
	position: relative;
}

.pan-benefits .pan-section-head h2 {
	max-width: 620px;
	color: #fff;
}

.pan-benefits .pan-section-head__aside {
	align-items: flex-end;
	flex-direction: column;
	gap: 26px;
	max-width: 400px;
}

.pan-benefits__copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font: 400 14px / 1.85 var(--pan-font);
	text-align: right;
}

.pan-benefits__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pan-grid-gap, 22px);
}

.pan-benefit {
	position: relative;
	overflow: hidden;
	padding: 30px 26px 32px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--pan-radius-md);
	background: rgba(255, 255, 255, 0.04);
	transition: transform var(--pan-ease), background-color var(--pan-ease), border-color var(--pan-ease);
}

.pan-benefit::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--pan-secondary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--pan-ease);
}

.pan-benefit:hover {
	transform: translateY(-6px);
	border-color: rgba(253, 111, 3, 0.4);
	background: rgba(255, 255, 255, 0.07);
}

.pan-benefit:hover::before {
	transform: scaleX(1);
}

.pan-benefit__number {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 22px;
	border: 1px solid rgba(253, 111, 3, 0.55);
	border-radius: 50%;
	color: var(--pan-secondary);
	font: 600 13px / 1 var(--pan-font);
	transition: background-color var(--pan-ease), color var(--pan-ease);
}

.pan-benefit:hover .pan-benefit__number {
	background: var(--pan-secondary);
	color: #fff;
}

.pan-benefit h3 {
	margin: 0 0 10px;
	color: #fff;
	font: 600 18px / 1.34 var(--pan-font);
}

.pan-benefit p {
	margin: 0;
	color: rgba(255, 255, 255, 0.66);
	font: 400 13px / 1.72 var(--pan-font);
}

.pan-benefits__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
	margin-top: clamp(40px, 4vw, 56px);
	padding-top: clamp(32px, 3.5vw, 44px);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pan-benefits__assurance {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
	font: 500 11px / 1.5 var(--pan-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pan-benefits__assurance strong {
	color: #fff;
	font-weight: 600;
}

.pan-benefits__assurance .pan-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 9px;
	border-radius: 50%;
	background: var(--pan-secondary);
	color: #fff;
	stroke-width: 1.9;
}

.pan-benefits__footer .pan-button {
	margin-left: auto;
}

/* ====================== 8. FEATURED PROJECTS ====================== */
.pan-projects {
	padding-block: var(--pan-pad-y);
	background: var(--pan-cream);
	color: var(--pan-primary);
}

.pan-section-head--center {
	align-items: center;
}

.pan-project-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pan-grid-gap-y, 34px) var(--pan-grid-gap, 26px);
}

/* Cards are not links: Featured Projects is a listing, there is no detail page. */
.pan-project {
	display: block;
	color: var(--pan-primary);
	transition: transform var(--pan-ease);
}

.pan-project:hover {
	transform: translateY(-6px);
}

.pan-project__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3.4;
	border-radius: var(--pan-radius-md);
	background: linear-gradient(135deg, var(--pan-placeholder-a, #d5d9d2), var(--pan-placeholder-b, #9eaaa4));
	box-shadow: var(--pan-shadow-sm);
	transition: box-shadow var(--pan-ease);
}

.pan-project:hover .pan-project__media {
	box-shadow: var(--pan-shadow-md);
}

/* Own layer + transform only: no background-size animation, no repaint jank. */
.pan-project__img {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	transform: scale(1);
	transition: transform var(--pan-ease-slow);
}

.pan-project:hover .pan-project__img {
	transform: scale(1.07);
}

.pan-project__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 42%, var(--pan-media-overlay, rgba(5, 44, 87, 0.72)));
	opacity: 0;
	transition: opacity var(--pan-ease);
}

.pan-project:hover .pan-project__media::after {
	opacity: 1;
}

.pan-project__meta {
	padding-top: 20px;
}

.pan-project__category {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(253, 111, 3, 0.09);
	color: var(--pan-secondary);
	font: 600 11px / 1.5 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pan-project h3 {
	margin: 12px 0 0;
	font: 600 19px / 1.36 var(--pan-font);
	transition: color var(--pan-ease);
}

.pan-project:hover h3 {
	color: var(--pan-secondary);
}

/* ============================ 9. PROCESS ============================ */
.pan-process {
	padding-block: var(--pan-pad-y);
	background: #fff;
	color: var(--pan-primary);
}

.pan-process__head {
	max-width: 720px;
	margin-bottom: clamp(52px, 6vw, 80px);
}

.pan-process__head h2 {
	max-width: 660px;
	margin: 22px 0 0;
	color: var(--pan-primary);
	font: 600 clamp(31px, 4.2vw, 56px) / 1.12 var(--pan-font);
	letter-spacing: -0.035em;
}

.pan-process__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pan-grid-gap, 26px);
}

.pan-process__steps::before {
	content: "";
	position: absolute;
	top: 56px;
	right: 6%;
	left: 6%;
	height: var(--pan-connector-h, 2px);
	background: linear-gradient(90deg, transparent, var(--pan-connector, var(--pan-secondary)) 12%, var(--pan-connector, var(--pan-secondary)) 88%, transparent);
	opacity: var(--pan-connector-opacity, 0.35);
}

.pan-step {
	position: relative;
	z-index: 1;
	padding: 26px 22px 28px;
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-md);
	background: #fff;
	transition: transform var(--pan-ease), box-shadow var(--pan-ease), border-color var(--pan-ease);
}

.pan-step:hover {
	transform: translateY(-6px);
	border-color: rgba(253, 111, 3, 0.35);
	box-shadow: var(--pan-shadow-md);
}

.pan-step__number {
	display: inline-grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin-bottom: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--pan-step-num-a, #fff7f0), var(--pan-step-num-b, #ffe8d4));
	box-shadow: inset 0 0 0 1px var(--pan-step-num-ring, rgba(253, 111, 3, 0.2));
	color: var(--pan-secondary);
	font: 600 21px / 1 var(--pan-font);
	transition: background var(--pan-ease), color var(--pan-ease);
}

.pan-step:hover .pan-step__number {
	background: var(--pan-secondary);
	color: #fff;
}

.pan-step h3 {
	margin: 0 0 10px;
	font: 600 18px / 1.34 var(--pan-font);
}

.pan-step p {
	margin: 0;
	color: var(--pan-muted);
	font: 400 13px / 1.74 var(--pan-font);
}

.pan-process__footer {
	display: flex;
	justify-content: center;
	margin-top: clamp(40px, 4vw, 56px);
}

/* =========================== 10. FINAL CTA =========================== */
/* A compact horizontal band: message on the left, actions on the right.
   Deliberately shorter than the hero so it closes the page instead of
   repeating it. */
.pan-cta {
	overflow: hidden;
	padding-block: clamp(60px, 6vw, 92px);
	background-color: var(--pan-primary);
	background-image:
		linear-gradient(
			var(--pan-cta-angle, 160deg),
			var(--pan-cta-overlay-1, rgba(5, 44, 87, 0.95)),
			var(--pan-cta-overlay-2, rgba(3, 32, 63, 0.9))
		),
		var(--pan-cta-image, none);
	background-position: center;
	background-size: cover;
	color: #fff;
}

.pan-cta--glow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(1100px, 96%);
	height: 420px;
	background: radial-gradient(ellipse at center, var(--pan-glow, rgba(253, 111, 3, 0.16)), transparent 70%);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.pan-cta__panel {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(30px, 4vw, 68px);
	padding: clamp(34px, 3.4vw, 52px) clamp(26px, 3.4vw, 56px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--pan-radius-lg);
	background:
		linear-gradient(180deg, var(--pan-panel-sheen, rgba(255, 255, 255, 0.07)), rgba(255, 255, 255, 0.02)),
		linear-gradient(180deg, var(--pan-panel-1, rgba(8, 50, 95, 0.8)), var(--pan-panel-2, rgba(4, 31, 60, 0.76)));
	box-shadow: 0 26px 60px rgba(2, 17, 35, 0.36);
	backdrop-filter: blur(6px);
}

/* Left accent rule: the horizontal-layout equivalent of a centred tick. */
.pan-cta__panel::before {
	content: "";
	position: absolute;
	top: clamp(30px, 3vw, 46px);
	bottom: clamp(30px, 3vw, 46px);
	left: -1px;
	width: 3px;
	border-radius: 0 999px 999px 0;
	background: var(--pan-secondary);
}

.pan-cta__text {
	min-width: 0;
}

.pan-cta h2 {
	margin: 16px 0 14px;
	color: #fff;
	font: 600 clamp(25px, 2.7vw, 38px) / 1.16 var(--pan-font);
	letter-spacing: -0.03em;
}

.pan-cta__copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.76);
	font: 400 14px / 1.75 var(--pan-font);
	text-wrap: pretty;
}

.pan-cta__aside {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	min-width: 0;
}

.pan-cta .pan-actions {
	flex-direction: column;
	gap: var(--pan-actions-gap, 12px);
	margin-top: var(--pan-actions-top, 0px);
}

.pan-cta__note {
	margin: 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.58);
	font: 500 11px / 1.6 var(--pan-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* =========================== 11. SITE FOOTER =========================== */
/* Closes the page on the same dark ground as the final CTA, so the two read
   as one band rather than two competing dark sections. Every decorative
   layer is inert: absolutely positioned, aria-hidden, pointer-events none. */
.pan-footer {
	padding-block: clamp(64px, 6.5vw, 104px) 0;
	background-color: var(--pan-primary);
	background-image:
		linear-gradient(
			var(--pan-footer-angle, 168deg),
			var(--pan-footer-overlay-1, rgba(5, 44, 87, 0.96)),
			var(--pan-footer-overlay-2, rgba(3, 26, 52, 0.97))
		),
		var(--pan-footer-image, none);
	background-position: center;
	background-size: cover;
	color: #fff;
}

.pan-footer > .pan-container {
	position: relative;
	z-index: 1;
}

.pan-footer a:focus-visible {
	outline: 2px solid var(--pan-secondary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Background decoration --- */
.pan-footer__decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Running-bond paver texture. Masked out towards the bottom so the copyright
   line never sits on top of a live grid. */
.pan-footer__pavers {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--pan-pavers-color, #fff);
	opacity: var(--pan-pavers-opacity, 0.1);
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, #000 26%, rgba(0, 0, 0, 0.3) 70%, transparent 92%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, #000 26%, rgba(0, 0, 0, 0.3) 70%, transparent 92%);
}

.pan-footer__pavers path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
}

/* Backyard build elevation: the closing half of the hero's blueprint. Lifted
   clear of the bottom bar so the drawing sits on the divider instead of
   running through the copyright line, and faded on the left so it never
   competes with the contact column. */
.pan-footer__sketch {
	position: absolute;
	right: clamp(16px, 3vw, 56px);
	bottom: clamp(66px, 7vw, 92px);
	width: min(52vw, 560px);
	fill: none;
	stroke: var(--pan-sketch-color, var(--pan-secondary));
	stroke-width: 1.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: var(--pan-sketch-opacity, 0.22);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}

.pan-footer--glow .pan-footer__decor::before {
	content: "";
	position: absolute;
	top: -180px;
	left: 50%;
	z-index: 0;
	width: min(1200px, 120%);
	height: 540px;
	background: radial-gradient(ellipse at center, var(--pan-footer-glow, rgba(253, 111, 3, 0.14)), transparent 70%);
	transform: translateX(-50%);
	pointer-events: none;
}

/* --- CTA --- */
/* One card, three degrees of separation from the link columns below it:
   a full-bleed band closed by a rule, an inset glass panel, or a card lifted
   out of the footer entirely. Only the surface changes; the grid does not. */
.pan-footer__cta-wrap {
	position: relative;
	z-index: 1;
	border-style: solid;
	border-width: 0;
	border-color: rgba(255, 255, 255, 0.12);
}

.pan-footer__cta {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(24px, 3vw, 56px);
}

/* Separated band: its own strip across the full footer width, closed by the
   same hairline the bottom bar uses. */
.pan-footer--cta-band {
	padding-top: 0;
}

.pan-footer--cta-band .pan-footer__cta-wrap {
	margin-bottom: clamp(48px, 5vw, 76px);
	padding-block: clamp(44px, 4.6vw, 68px);
	border-bottom-width: 1px;
	background: linear-gradient(
		180deg,
		var(--pan-footer-cta-1, rgba(255, 255, 255, 0.06)),
		var(--pan-footer-cta-2, transparent)
	);
}

/* Inset panel: the glass card sitting inside the footer padding. */
.pan-footer--cta-panel .pan-footer__cta-wrap {
	margin-bottom: clamp(48px, 5vw, 76px);
}

.pan-footer--cta-panel .pan-footer__cta {
	padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--pan-radius-lg);
	background: linear-gradient(
		180deg,
		var(--pan-footer-cta-1, rgba(255, 255, 255, 0.08)),
		var(--pan-footer-cta-2, rgba(255, 255, 255, 0.02))
	);
	box-shadow: 0 24px 56px rgba(2, 17, 35, 0.32);
	backdrop-filter: blur(6px);
}

/* Raised card: lifts clear of the footer and overlaps whatever sits above it,
   so the surface has to be opaque rather than glass. */
.pan-footer--cta-raised {
	padding-top: 0;
}

.pan-footer--cta-raised .pan-footer__cta-wrap {
	/* flow-root, not the default block: without a formatting context the card's
	   negative top margin collapses out and lifts the whole footer instead. */
	display: flow-root;
	margin-bottom: clamp(48px, 5vw, 76px);
}

.pan-footer--cta-raised .pan-footer__cta {
	margin-top: clamp(-104px, -7vw, -52px);
	padding: clamp(30px, 3.2vw, 48px) clamp(26px, 3.2vw, 52px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--pan-radius-lg);
	background: linear-gradient(
		180deg,
		var(--pan-footer-cta-1, #0a3a72),
		var(--pan-footer-cta-2, #062f5d)
	);
	box-shadow: 0 34px 70px rgba(2, 17, 35, 0.45);
}

.pan-footer__cta-text {
	min-width: 0;
}

.pan-footer__cta h2 {
	margin: 16px 0 0;
	color: #fff;
	font: 600 clamp(23px, 2.4vw, 34px) / 1.18 var(--pan-font);
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.pan-footer__cta .pan-actions {
	margin-top: var(--pan-actions-top, 0px);
}

/* --- Column grid --- */
.pan-footer__grid {
	display: grid;
	grid-template-columns:
		minmax(0, var(--pan-footer-brand-col, 1.6fr))
		repeat(2, minmax(0, 1fr))
		minmax(0, var(--pan-footer-contact-col, 1.3fr));
	gap: clamp(34px, 4vw, 58px) clamp(28px, 4vw, 64px);
	padding-bottom: clamp(40px, 4.5vw, 64px);
}

.pan-footer__brand,
.pan-footer__col {
	min-width: 0;
}

.pan-footer__logo {
	display: inline-flex;
	text-decoration: none;
}

.pan-footer__logo img {
	display: block;
	width: var(--pan-footer-logo-w, 200px);
	max-width: 100%;
	height: auto;
}

.pan-footer__logo-text {
	display: block;
	color: #fff;
	font: 600 24px / 1.2 var(--pan-font);
	letter-spacing: -0.02em;
}

.pan-footer__about {
	max-width: 380px;
	margin: 20px 0 0;
	color: rgba(255, 255, 255, 0.7);
	font: 400 14px / 1.8 var(--pan-font);
	text-wrap: pretty;
}

.pan-footer__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.pan-footer__badges li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.82);
	font: 600 10px / 1.4 var(--pan-font);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pan-footer__badges .pan-icon {
	width: 13px;
	height: 13px;
	color: var(--pan-secondary);
}

/* --- Link + contact columns --- */
.pan-footer__col h3 {
	margin: 0 0 20px;
	color: #fff;
	font: 600 12px / 1.4 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pan-footer__links,
.pan-footer__contact {
	display: grid;
	gap: var(--pan-footer-link-gap, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The rule grows out of the left edge on hover: the list equivalent of the
   button's arrow nudge, with no layout shift because the anchor owns the gap. */
.pan-footer__links a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.72);
	font: 400 14px / 1.6 var(--pan-font);
	text-decoration: none;
	transition: color var(--pan-ease);
}

.pan-footer__links a::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 1px;
	background-color: var(--pan-secondary);
	transition: width var(--pan-ease);
}

.pan-footer__links a:hover,
.pan-footer__links a:focus-visible {
	color: #fff;
	text-decoration: none;
}

.pan-footer__links a:hover::before,
.pan-footer__links a:focus-visible::before {
	width: 14px;
}

.pan-footer__contact li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.72);
	font: 400 14px / 1.6 var(--pan-font);
}

.pan-footer__contact a,
.pan-footer__contact li > span:last-child {
	min-width: 0;
	color: inherit;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--pan-ease);
}

.pan-footer__contact a:hover,
.pan-footer__contact a:focus-visible {
	color: #fff;
	text-decoration: none;
}

.pan-footer__contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--pan-contact-icon-box, 34px);
	height: var(--pan-contact-icon-box, 34px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--pan-secondary);
}

.pan-footer__contact-icon .pan-icon {
	width: 15px;
	height: 15px;
}

/* --- Social buttons --- */
.pan-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pan-social-gap, 10px);
	margin-top: 26px;
}

.pan-footer__social-label {
	width: 100%;
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
	font: 600 10px / 1.4 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pan-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pan-social-size, 42px);
	height: var(--pan-social-size, 42px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.05);
	color: #fff;
	text-decoration: none;
	transition: transform var(--pan-ease), background-color var(--pan-ease),
		border-color var(--pan-ease), color var(--pan-ease);
}

.pan-social__link:hover,
.pan-social__link:focus-visible {
	transform: translateY(-2px);
	border-color: var(--pan-secondary);
	background-color: var(--pan-secondary);
	color: #fff;
}

.pan-social__glyph {
	width: var(--pan-social-icon, 18px);
	height: var(--pan-social-icon, 18px);
	stroke-width: 1.6;
}

/* --- Bottom bar --- */
.pan-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 32px;
	padding-block: clamp(22px, 2.4vw, 30px);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.pan-footer__copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font: 400 13px / 1.6 var(--pan-font);
}

.pan-footer__copy a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--pan-ease);
}

.pan-footer__copy a:hover,
.pan-footer__copy a:focus-visible {
	color: #fff;
}

.pan-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pan-footer__legal a {
	color: rgba(255, 255, 255, 0.55);
	font: 400 13px / 1.6 var(--pan-font);
	text-decoration: none;
	transition: color var(--pan-ease);
}

.pan-footer__legal a:hover,
.pan-footer__legal a:focus-visible {
	color: #fff;
	text-decoration: none;
}

/* =========================== 12. SITE HEADER =========================== */
/* Deliberately no backdrop-filter anywhere on .pan-header: a filtered ancestor
   becomes the containing block for fixed descendants, which would break the
   mobile drawer the moment the header itself is sticky or floating. */
.pan-header {
	position: relative;
	z-index: 50;
	background-color: #fff;
	color: var(--pan-primary);
	transition: background-color var(--pan-ease), box-shadow var(--pan-ease);
}

/* Both stick with position: fixed rather than position: sticky. Sticky is
   bounded by its parent's box, and inside a page builder the header's wrapper
   is only as tall as the header, so sticky would have no travel and never
   appear to stick. The sticky variant pairs fixed with a spacer that the
   script sizes to the bar, so the page keeps its layout height; the floating
   variant has no spacer and sits over the hero. */
.pan-header--sticky,
.pan-header--fixed {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
}

.pan-header__spacer {
	display: none;
}

.pan-header--sticky + .pan-header__spacer {
	display: block;
}

/* The editor canvas scrolls independently, so a stuck or floating bar there
   sits over the controls instead of the page. Preview always renders in flow. */
.pan-header--preview {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
}

.pan-header--preview + .pan-header__spacer {
	display: none;
}

.pan-header.is-stuck {
	box-shadow: var(--pan-shadow-sm);
}

.pan-header--shrink.is-stuck .pan-header__topbar {
	max-height: 0;
}

.pan-header--shrink.is-stuck .pan-header__topbar-inner {
	opacity: 0;
}

.pan-header a:focus-visible,
.pan-header button:focus-visible {
	outline: 2px solid var(--pan-secondary);
	outline-offset: 3px;
	border-radius: 4px;
}

html.pan-nav-lock {
	overflow: hidden;
}

/* --- Top bar --- */
/* Collapsed by animating max-height rather than toggling display, which would
   snap the bar shorter mid-scroll. A 0fr grid row was the other candidate, but
   a row cannot shrink past its item's own padding, so it stalled at 18px. The
   script measures the bar once and writes the real height to --pan-topbar-h,
   so the cap is exact and a taller top bar is never clipped. */
.pan-header__topbar {
	overflow: hidden;
	max-height: var(--pan-topbar-h, 200px);
	background-color: var(--pan-primary);
	color: rgba(255, 255, 255, 0.78);
	font: 500 12px / 1.5 var(--pan-font);
	transition: max-height var(--pan-ease);
}

.pan-header__topbar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 28px;
	padding-block: 9px;
	transition: opacity var(--pan-ease);
}

.pan-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pan-header__meta li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pan-header__meta .pan-icon {
	width: 14px;
	height: 14px;
	color: var(--pan-secondary);
}

.pan-header__meta a {
	color: inherit;
	text-decoration: none;
	transition: color var(--pan-ease);
}

.pan-header__meta a:hover,
.pan-header__meta a:focus-visible {
	color: #fff;
	text-decoration: none;
}

.pan-header__topbar-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pan-header-social-gap, 8px);
}

/* Sized through a var with an inline fallback rather than a declaration, so
   the widget control writing the token to the wrapper is never shadowed. */
.pan-header__topbar .pan-social__link {
	width: var(--pan-header-social-size, 30px);
	height: var(--pan-header-social-size, 30px);
}

.pan-header__topbar .pan-social__glyph {
	width: var(--pan-header-social-icon, 14px);
	height: var(--pan-header-social-icon, 14px);
}

/* --- Main bar --- */
.pan-header .pan-container {
	max-width: var(--pan-header-max, 1440px);
}

.pan-header__bar {
	border-bottom: 1px solid var(--pan-line);
}

.pan-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(14px, 2.2vw, 36px);
	min-height: var(--pan-header-h, 84px);
}

.pan-header__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* width, not max-width: max-width can only ever shrink, so a logo narrower
   than the cap ignored the control completely. */
.pan-header__logo-img {
	display: block;
	width: var(--pan-header-logo-w, 180px);
	max-width: 100%;
	height: auto;
}

.pan-header__logo-img--light {
	display: none;
}

.pan-header__logo-text {
	color: var(--pan-primary);
	font: 600 22px / 1.2 var(--pan-font);
	letter-spacing: -0.02em;
}

/* --- Navigation --- */
.pan-header__panel {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.pan-header__nav {
	min-width: 0;
}

.pan-nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--pan-nav-gap, 4px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pan-nav__item {
	position: relative;
}

.pan-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 13px;
	color: var(--pan-primary);
	font: 600 13px / 1.4 var(--pan-font);
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--pan-ease);
}

/* Underline grows from the left, matching the footer's link rule. */
.pan-nav__link::after {
	content: "";
	position: absolute;
	right: 13px;
	bottom: 4px;
	left: 13px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--pan-secondary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--pan-ease);
}

.pan-nav__link:hover,
.pan-nav__link:focus-visible {
	color: var(--pan-secondary);
	text-decoration: none;
}

.pan-nav__link:hover::after,
.pan-nav__link:focus-visible::after,
.pan-nav__item.is-current > .pan-nav__link::after {
	transform: scaleX(1);
}

.pan-nav__item.is-current > .pan-nav__link {
	color: var(--pan-secondary);
}

.pan-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-left: -10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pan-primary);
	cursor: pointer;
	transition: transform var(--pan-ease), color var(--pan-ease);
}

.pan-nav__toggle .pan-icon {
	width: 13px;
	height: 13px;
}

.pan-nav__item.is-open > .pan-nav__toggle {
	transform: rotate(180deg);
}

/* Bridges the gap between the link and the panel so the pointer can cross it
   without the dropdown closing underneath it. */
.pan-nav__item--has-children::before {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	height: 12px;
}

.pan-nav__submenu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 2;
	display: grid;
	gap: 2px;
	min-width: 240px;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-md);
	background-color: #fff;
	box-shadow: var(--pan-shadow-md);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--pan-ease), transform var(--pan-ease), visibility var(--pan-ease);
}

.pan-nav__item--has-children:hover > .pan-nav__submenu,
.pan-nav__item--has-children:focus-within > .pan-nav__submenu,
.pan-nav__item.is-open > .pan-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.pan-nav__sublink {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border-radius: var(--pan-radius-sm);
	color: var(--pan-primary);
	font: 500 13px / 1.5 var(--pan-font);
	text-decoration: none;
	transition: color var(--pan-ease), background-color var(--pan-ease);
}

.pan-nav__sublink:hover,
.pan-nav__sublink:focus-visible {
	background-color: var(--pan-cream);
	color: var(--pan-secondary);
	text-decoration: none;
}

/* --- Actions --- */
.pan-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 18px);
}

.pan-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--pan-primary);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--pan-ease);
}

.pan-header__phone-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: rgba(253, 111, 3, 0.1);
	color: var(--pan-secondary);
}

.pan-header__phone-text {
	display: grid;
	gap: 1px;
}

.pan-header__phone small {
	color: var(--pan-muted);
	font: 600 10px / 1.3 var(--pan-font);
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.pan-header__phone strong {
	font: 600 15px / 1.3 var(--pan-font);
	letter-spacing: -0.01em;
}

.pan-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0 12px;
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-sm);
	background-color: transparent;
	cursor: pointer;
}

.pan-header__burger span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background-color: var(--pan-primary);
	transition: transform var(--pan-ease), opacity var(--pan-ease);
}

.pan-header.is-open .pan-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pan-header.is-open .pan-header__burger span:nth-child(2) { opacity: 0; }
.pan-header.is-open .pan-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Only ever shown inside the drawer. */
.pan-header__panel-extra,
.pan-header__panel-close {
	display: none;
}

.pan-header__panel-phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--pan-primary);
	font: 600 15px / 1.4 var(--pan-font);
	text-decoration: none;
}

.pan-header__panel-phone .pan-icon {
	color: var(--pan-secondary);
}

.pan-header__scrim {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 55;
	background-color: rgba(3, 26, 52, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pan-ease), visibility var(--pan-ease);
}

/* --- Transparent state, for a floating bar over a dark hero --- */
.pan-header--transparent:not(.is-stuck) {
	background-color: transparent;
}

.pan-header--transparent:not(.is-stuck) .pan-header__bar {
	border-bottom-color: rgba(255, 255, 255, 0.18);
}

.pan-header--transparent:not(.is-stuck) .pan-header__topbar {
	background-color: rgba(255, 255, 255, 0.07);
}

.pan-header--transparent:not(.is-stuck) .pan-nav__link,
.pan-header--transparent:not(.is-stuck) .pan-nav__toggle,
.pan-header--transparent:not(.is-stuck) .pan-header__logo-text,
.pan-header--transparent:not(.is-stuck) .pan-header__phone {
	color: #fff;
}

.pan-header--transparent:not(.is-stuck) .pan-header__phone small {
	color: rgba(255, 255, 255, 0.62);
}

.pan-header--transparent:not(.is-stuck) .pan-header__phone-icon {
	background-color: rgba(255, 255, 255, 0.12);
}

.pan-header--transparent:not(.is-stuck) .pan-header__burger {
	border-color: rgba(255, 255, 255, 0.28);
}

.pan-header--transparent:not(.is-stuck) .pan-header__burger span {
	background-color: #fff;
}

.pan-header--transparent:not(.is-stuck) .pan-header__logo-img {
	display: none;
}

.pan-header--transparent:not(.is-stuck) .pan-header__logo-img--light {
	display: block;
}

@media (max-width: 1200px) {
	.pan-header--collapse-1200 .pan-header__burger { display: flex; }
	.pan-header--collapse-1200 .pan-header__actions .pan-button { display: none; }
	.pan-header--collapse-1200 .pan-header__scrim { display: block; }

	.pan-header--collapse-1200 .pan-header__panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 28px;
		width: min(var(--pan-drawer-w, 380px), 88vw);
		padding: var(--pan-drawer-pad, 84px 26px 40px);
		overflow-y: auto;
		background-color: var(--pan-drawer-bg, #fff);
		box-shadow: -20px 0 60px rgba(5, 44, 87, 0.24);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--pan-ease), visibility var(--pan-ease);
	}

	.pan-header--collapse-1200.is-open .pan-header__panel { transform: none; visibility: visible; }
	.pan-header--collapse-1200.is-open .pan-header__scrim { opacity: 1; visibility: visible; }

	.pan-header--collapse-1200 .pan-nav { flex-direction: column; align-items: stretch; gap: 2px; }
	.pan-header--collapse-1200 .pan-nav__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.pan-header--collapse-1200 .pan-nav__link { padding: 13px 4px; font-size: 15px; }
	.pan-header--collapse-1200 .pan-nav__link::after { right: auto; bottom: 8px; left: 4px; width: 18px; }

	.pan-header--collapse-1200 .pan-nav__toggle { width: 40px; height: 40px; margin-left: 0; border-radius: var(--pan-radius-sm); }
	.pan-header--collapse-1200 .pan-nav__item--has-children::before { display: none; }

	/* Accordion, not a floating panel. Collapsed with display rather than a
	   zero-height row: grid-template-rows: 0fr sizes only the first row, so
	   every sub-item after the first would leak through. */
	.pan-header--collapse-1200 .pan-nav__submenu {
		position: static;
		display: none;
		grid-column: 1 / -1;
		gap: 0;
		min-width: 0;
		margin: 0 0 0 4px;
		padding: 0 0 0 14px;
		border-width: 0 0 0 1px;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.pan-header--collapse-1200 .pan-nav__item.is-open > .pan-nav__submenu { display: grid; }

	.pan-header--collapse-1200 .pan-header__panel-close {
		position: absolute;
		top: 18px;
		right: 22px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border: 1px solid var(--pan-line);
		border-radius: var(--pan-radius-sm);
		background-color: transparent;
		color: var(--pan-primary);
		cursor: pointer;
	}

	.pan-header--collapse-1200 .pan-header__panel-close .pan-icon { width: 17px; height: 17px; }

	.pan-header--collapse-1200 .pan-header__panel-extra { display: grid; gap: 16px; justify-items: start; }
	.pan-header--collapse-1200 .pan-header__panel-extra .pan-button { width: 100%; }
}

@media (max-width: 1024px) {
	.pan-header--collapse-1024 .pan-header__burger { display: flex; }
	.pan-header--collapse-1024 .pan-header__actions .pan-button { display: none; }
	.pan-header--collapse-1024 .pan-header__scrim { display: block; }

	.pan-header--collapse-1024 .pan-header__panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 28px;
		width: min(var(--pan-drawer-w, 380px), 88vw);
		padding: var(--pan-drawer-pad, 84px 26px 40px);
		overflow-y: auto;
		background-color: var(--pan-drawer-bg, #fff);
		box-shadow: -20px 0 60px rgba(5, 44, 87, 0.24);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--pan-ease), visibility var(--pan-ease);
	}

	.pan-header--collapse-1024.is-open .pan-header__panel { transform: none; visibility: visible; }
	.pan-header--collapse-1024.is-open .pan-header__scrim { opacity: 1; visibility: visible; }

	.pan-header--collapse-1024 .pan-nav { flex-direction: column; align-items: stretch; gap: 2px; }
	.pan-header--collapse-1024 .pan-nav__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.pan-header--collapse-1024 .pan-nav__link { padding: 13px 4px; font-size: 15px; }
	.pan-header--collapse-1024 .pan-nav__link::after { right: auto; bottom: 8px; left: 4px; width: 18px; }

	.pan-header--collapse-1024 .pan-nav__toggle { width: 40px; height: 40px; margin-left: 0; border-radius: var(--pan-radius-sm); }
	.pan-header--collapse-1024 .pan-nav__item--has-children::before { display: none; }

	/* Accordion, not a floating panel. Collapsed with display rather than a
	   zero-height row: grid-template-rows: 0fr sizes only the first row, so
	   every sub-item after the first would leak through. */
	.pan-header--collapse-1024 .pan-nav__submenu {
		position: static;
		display: none;
		grid-column: 1 / -1;
		gap: 0;
		min-width: 0;
		margin: 0 0 0 4px;
		padding: 0 0 0 14px;
		border-width: 0 0 0 1px;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.pan-header--collapse-1024 .pan-nav__item.is-open > .pan-nav__submenu { display: grid; }

	.pan-header--collapse-1024 .pan-header__panel-close {
		position: absolute;
		top: 18px;
		right: 22px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border: 1px solid var(--pan-line);
		border-radius: var(--pan-radius-sm);
		background-color: transparent;
		color: var(--pan-primary);
		cursor: pointer;
	}

	.pan-header--collapse-1024 .pan-header__panel-close .pan-icon { width: 17px; height: 17px; }

	.pan-header--collapse-1024 .pan-header__panel-extra { display: grid; gap: 16px; justify-items: start; }
	.pan-header--collapse-1024 .pan-header__panel-extra .pan-button { width: 100%; }
}

@media (max-width: 900px) {
	.pan-header--collapse-900 .pan-header__burger { display: flex; }
	.pan-header--collapse-900 .pan-header__actions .pan-button { display: none; }
	.pan-header--collapse-900 .pan-header__scrim { display: block; }

	.pan-header--collapse-900 .pan-header__panel {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 28px;
		width: min(var(--pan-drawer-w, 380px), 88vw);
		padding: var(--pan-drawer-pad, 84px 26px 40px);
		overflow-y: auto;
		background-color: var(--pan-drawer-bg, #fff);
		box-shadow: -20px 0 60px rgba(5, 44, 87, 0.24);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform var(--pan-ease), visibility var(--pan-ease);
	}

	.pan-header--collapse-900.is-open .pan-header__panel { transform: none; visibility: visible; }
	.pan-header--collapse-900.is-open .pan-header__scrim { opacity: 1; visibility: visible; }

	.pan-header--collapse-900 .pan-nav { flex-direction: column; align-items: stretch; gap: 2px; }
	.pan-header--collapse-900 .pan-nav__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.pan-header--collapse-900 .pan-nav__link { padding: 13px 4px; font-size: 15px; }
	.pan-header--collapse-900 .pan-nav__link::after { right: auto; bottom: 8px; left: 4px; width: 18px; }

	.pan-header--collapse-900 .pan-nav__toggle { width: 40px; height: 40px; margin-left: 0; border-radius: var(--pan-radius-sm); }
	.pan-header--collapse-900 .pan-nav__item--has-children::before { display: none; }

	/* Accordion, not a floating panel. Collapsed with display rather than a
	   zero-height row: grid-template-rows: 0fr sizes only the first row, so
	   every sub-item after the first would leak through. */
	.pan-header--collapse-900 .pan-nav__submenu {
		position: static;
		display: none;
		grid-column: 1 / -1;
		gap: 0;
		min-width: 0;
		margin: 0 0 0 4px;
		padding: 0 0 0 14px;
		border-width: 0 0 0 1px;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.pan-header--collapse-900 .pan-nav__item.is-open > .pan-nav__submenu { display: grid; }

	.pan-header--collapse-900 .pan-header__panel-close {
		position: absolute;
		top: 18px;
		right: 22px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		border: 1px solid var(--pan-line);
		border-radius: var(--pan-radius-sm);
		background-color: transparent;
		color: var(--pan-primary);
		cursor: pointer;
	}

	.pan-header--collapse-900 .pan-header__panel-close .pan-icon { width: 17px; height: 17px; }

	.pan-header--collapse-900 .pan-header__panel-extra { display: grid; gap: 16px; justify-items: start; }
	.pan-header--collapse-900 .pan-header__panel-extra .pan-button { width: 100%; }
}

@media (max-width: 767px) {
	/* A full top bar costs roughly 90px of a phone screen, so what it keeps is
	   a choice rather than a fixed rule. */
	.pan-header--topbar-hide .pan-header__topbar { display: none; }
	.pan-header--topbar-contact .pan-header__topbar-social { display: none; }
	.pan-header__topbar-inner { justify-content: center; }
	.pan-header__meta { justify-content: center; gap: 4px 18px; }
}

@media (max-width: 620px) {
	.pan-header__phone-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pan-header,
	.pan-header__topbar,
	.pan-header__topbar-inner,
	.pan-header__panel,
	.pan-nav__submenu {
		transition: none !important;
	}
}

/* ============================== 13. FAQ ============================== */
/* Section-scoped tokens are only ever read here with a fallback, never
   declared on .pan-faq: --pan-faq-accent, --pan-faq-accent-w,
   --pan-faq-rail-w, and --pan-faq-rail-top are written by the widget's
   Style tab onto the Elementor wrapper, which .pan-faq would shadow. */
.pan-faq {
	position: relative;
	overflow: hidden;
	padding-block: var(--pan-pad-y);
	background: var(--pan-cream);
	color: var(--pan-primary);
}

/* Blueprint dot grid, faded out before it reaches the questions. */
.pan-faq__decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(circle at 1px 1px, var(--pan-faq-dot, rgba(5, 44, 87, 0.16)) 1px, transparent 0);
	background-size: var(--pan-faq-dot-size, 26px) var(--pan-faq-dot-size, 26px);
	opacity: var(--pan-faq-dot-opacity, 0.7);
	-webkit-mask-image: radial-gradient(ellipse 78% 52% at 50% 0%, #000 10%, transparent 72%);
	mask-image: radial-gradient(ellipse 78% 52% at 50% 0%, #000 10%, transparent 72%);
	pointer-events: none;
}

.pan-faq > .pan-container {
	position: relative;
	z-index: 1;
}

.pan-faq__head {
	margin-bottom: clamp(40px, 4.6vw, 64px);
}

.pan-faq--head-center .pan-faq__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 780px;
	margin-inline: auto;
	text-align: center;
}

.pan-faq__head h2 {
	margin: 22px 0 0;
	color: var(--pan-primary);
	font: 600 clamp(31px, 4.2vw, 56px) / 1.12 var(--pan-font);
	letter-spacing: -0.035em;
}

.pan-faq__intro {
	max-width: 620px;
	margin: 18px 0 0;
	color: var(--pan-muted);
	font: 400 15px / 1.8 var(--pan-font);
}

/* Search. The field filters the list as the visitor types; with no script
   the questions simply all stay visible. */
.pan-faq__search {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 520px;
	margin-top: 32px;
	padding: 5px 8px 5px 20px;
	border: 1px solid var(--pan-line);
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--pan-shadow-sm);
	transition: border-color var(--pan-ease), box-shadow var(--pan-ease);
}

.pan-faq--head-center .pan-faq__search {
	margin-inline: auto;
}

.pan-faq__search:focus-within {
	border-color: var(--pan-secondary);
	box-shadow: var(--pan-shadow-md);
}

.pan-faq__search .pan-icon {
	width: 18px;
	height: 18px;
	color: var(--pan-muted);
}

.pan-faq__search input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--pan-primary);
	font: 400 15px / 1.4 var(--pan-font);
}

.pan-faq__search input:focus {
	outline: none;
	box-shadow: none;
}

.pan-faq__search input::placeholder {
	color: var(--pan-muted);
	opacity: 0.8;
}

.pan-faq__search-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Category pills, used by the tabs layout. */
.pan-faq__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(30px, 3.6vw, 46px);
}

.pan-faq--head-center .pan-faq__filters {
	justify-content: center;
}

.pan-faq__filter {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px;
	border: 1px solid var(--pan-line);
	border-radius: 999px;
	background: #fff;
	color: var(--pan-primary);
	font: 600 12px / 1.2 var(--pan-font);
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color var(--pan-ease), border-color var(--pan-ease),
		color var(--pan-ease), box-shadow var(--pan-ease), transform var(--pan-ease);
}

.pan-faq__filter:hover {
	transform: translateY(-2px);
	border-color: rgba(253, 111, 3, 0.4);
	color: var(--pan-secondary);
}

.pan-faq__filter:focus-visible {
	outline: 2px solid var(--pan-secondary);
	outline-offset: 3px;
}

.pan-faq__filter.is-active {
	border-color: var(--pan-primary);
	background: var(--pan-primary);
	color: #fff;
	box-shadow: var(--pan-shadow-sm);
}

.pan-faq__filter-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(5, 44, 87, 0.08);
	font-size: 10px;
}

.pan-faq__filter.is-active .pan-faq__filter-count {
	background: rgba(255, 255, 255, 0.2);
}

/* Layout shell. One column everywhere except the rail layout. */
.pan-faq__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: clamp(36px, 4vw, 60px);
}

.pan-faq--rail .pan-faq__layout {
	grid-template-columns: var(--pan-faq-rail-w, 300px) minmax(0, 1fr);
}

.pan-faq__main {
	display: flex;
	flex-direction: column;
	gap: clamp(44px, 5vw, 68px);
	min-width: 0;
}

.pan-faq--stacked .pan-faq__main,
.pan-faq--tabs .pan-faq__main {
	max-width: 880px;
	margin-inline: auto;
}

/* Sticky category rail. */
.pan-faq__rail {
	min-width: 0;
}

.pan-faq__rail-inner {
	position: sticky;
	top: var(--pan-faq-rail-top, 110px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.pan-faq__rail-nav {
	padding: 22px;
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-lg);
	background: #fff;
	box-shadow: var(--pan-shadow-sm);
}

.pan-faq__rail-title {
	margin: 0 0 14px;
	padding-inline: 14px;
	color: var(--pan-muted);
	font: 600 11px / 1 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pan-faq__rail-nav ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pan-faq__rail-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--pan-radius-sm);
	color: var(--pan-primary);
	font: 600 13px / 1.4 var(--pan-font);
	text-decoration: none;
	transition: background-color var(--pan-ease), color var(--pan-ease), box-shadow var(--pan-ease);
}

.pan-faq__rail-link:hover,
.pan-faq__rail-link.is-active {
	background: rgba(253, 111, 3, 0.09);
	color: var(--pan-secondary);
	text-decoration: none;
}

.pan-faq__rail-link.is-active {
	box-shadow: inset 0 0 0 1px rgba(253, 111, 3, 0.3);
}

.pan-faq__rail-link:focus-visible {
	outline: 2px solid var(--pan-secondary);
	outline-offset: 2px;
}

.pan-faq__rail-index {
	flex: 0 0 auto;
	color: var(--pan-secondary);
	font-size: 11px;
	letter-spacing: 0.08em;
}

.pan-faq__rail-label {
	flex: 1 1 auto;
	min-width: 0;
}

.pan-faq__rail-count {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(5, 44, 87, 0.07);
	color: var(--pan-muted);
	font-size: 11px;
	transition: background-color var(--pan-ease), color var(--pan-ease);
}

.pan-faq__rail-link.is-active .pan-faq__rail-count {
	background: var(--pan-secondary);
	color: #fff;
}

/* Support card under the rail. */
.pan-faq__support {
	padding: 26px 24px 28px;
	border-radius: var(--pan-radius-lg);
	background: linear-gradient(150deg, var(--pan-primary), #0a3f75);
	color: #fff;
	box-shadow: var(--pan-shadow-md);
}

.pan-faq__support-title {
	margin: 0;
	font: 600 18px / 1.3 var(--pan-font);
}

.pan-faq__support-text {
	margin: 10px 0 0;
	color: rgba(255, 255, 255, 0.76);
	font: 400 13px / 1.7 var(--pan-font);
}

.pan-faq__support-phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0 0;
	color: #fff;
	font: 600 17px / 1 var(--pan-font);
	text-decoration: none;
}

.pan-faq__support-phone .pan-icon {
	color: var(--pan-secondary);
}

.pan-faq__support-phone:hover {
	color: var(--pan-secondary);
	text-decoration: none;
}

.pan-faq__support .pan-button {
	width: 100%;
	margin-top: 22px;
}

/* Category header. */
.pan-faq__group {
	scroll-margin-top: calc(var(--pan-faq-rail-top, 110px) + 20px);
}

.pan-faq__group.is-hidden {
	display: none;
}

.pan-faq__group-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: clamp(20px, 2.4vw, 28px);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--pan-line);
}

.pan-faq__group-index {
	flex: 0 0 auto;
	color: var(--pan-secondary);
	font: 600 12px / 1 var(--pan-font);
	letter-spacing: 0.1em;
}

.pan-faq__group-head h3 {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	color: var(--pan-primary);
	font: 600 clamp(20px, 2.4vw, 26px) / 1.25 var(--pan-font);
	letter-spacing: -0.02em;
}

.pan-faq__group-count {
	flex: 0 0 auto;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(5, 44, 87, 0.07);
	color: var(--pan-muted);
	font: 600 11px / 1 var(--pan-font);
}

/* Question cards. */
.pan-faq__items {
	display: grid;
	gap: var(--pan-grid-gap, 14px);
}

.pan-faq__item {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-md);
	background: #fff;
	transition: border-color var(--pan-ease), box-shadow var(--pan-ease), transform var(--pan-ease);
}

/* Accent bar wipes down the edge of the card that is open. */
.pan-faq__item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--pan-faq-accent-w, 3px);
	background: var(--pan-faq-accent, var(--pan-secondary));
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--pan-ease);
}

.pan-faq__item:hover {
	border-color: rgba(253, 111, 3, 0.35);
	box-shadow: var(--pan-shadow-sm);
}

.pan-faq__item.is-open {
	border-color: rgba(253, 111, 3, 0.35);
	box-shadow: var(--pan-shadow-md);
}

.pan-faq__item.is-open::before {
	transform: none;
}

.pan-faq__item.is-hidden {
	display: none;
}

.pan-faq__q-head {
	margin: 0;
	font: inherit;
}

.pan-faq__q {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 22px 22px 22px 24px;
	border: 0;
	background: transparent;
	color: var(--pan-primary);
	font: 600 17px / 1.45 var(--pan-font);
	text-align: left;
	cursor: pointer;
}

.pan-faq__q:focus-visible {
	outline: 2px solid var(--pan-secondary);
	outline-offset: -4px;
}

.pan-faq__index {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(253, 111, 3, 0.1);
	box-shadow: inset 0 0 0 1px rgba(253, 111, 3, 0.18);
	color: var(--pan-secondary);
	font: 600 12px / 1 var(--pan-font);
	letter-spacing: 0.04em;
	transition: background-color var(--pan-ease), color var(--pan-ease);
}

.pan-faq__item.is-open .pan-faq__index {
	background: var(--pan-secondary);
	color: #fff;
}

.pan-faq__q-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

.pan-faq__q-text {
	display: block;
	min-width: 0;
	transition: color var(--pan-ease);
}

.pan-faq__item:hover .pan-faq__q-text {
	color: var(--pan-secondary);
}

/* Category tag, shown in the pill layout where there are no group headers. */
.pan-faq__tag {
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(5, 44, 87, 0.06);
	color: var(--pan-muted);
	font: 600 10px / 1.2 var(--pan-font);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pan-faq__toggle {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--pan-line);
	border-radius: 50%;
	background: #fff;
	color: var(--pan-primary);
	transition: background-color var(--pan-ease), border-color var(--pan-ease), color var(--pan-ease);
}

.pan-faq__toggle .pan-icon {
	width: 16px;
	height: 16px;
}

/* The plus becomes a minus: the glyph spins a half turn while the upright
   stroke collapses into the crossbar. A quarter turn would leave the
   crossbar standing on end, which reads as a bar, not a minus. */
.pan-faq__toggle-v {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform var(--pan-ease), opacity var(--pan-ease);
}

.pan-faq__item.is-open .pan-faq__toggle {
	border-color: var(--pan-secondary);
	background: var(--pan-secondary);
	color: #fff;
}

.pan-faq__item.is-open .pan-faq__toggle .pan-icon {
	transform: rotate(180deg);
}

.pan-faq__item.is-open .pan-faq__toggle-v {
	transform: scaleY(0);
	opacity: 0;
}

/* Answer. Animating grid-template-rows keeps the panel at its natural
   height, so nothing has to be measured in script. */
.pan-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--pan-ease-slow);
}

.pan-faq__item.is-open .pan-faq__panel {
	grid-template-rows: 1fr;
}

.pan-faq__panel-inner {
	overflow: hidden;
	min-height: 0;
}

.pan-faq__answer {
	position: relative;
	padding: 2px 26px 24px 78px;
	color: var(--pan-muted);
	font: 400 14px / 1.8 var(--pan-font);
}

.pan-faq__answer::before {
	content: "";
	position: absolute;
	top: 0;
	right: 26px;
	left: 78px;
	height: 1px;
	background: var(--pan-line);
}

.pan-faq--plain .pan-faq__answer {
	padding-left: 24px;
}

.pan-faq--plain .pan-faq__answer::before {
	left: 24px;
}

.pan-faq__answer > :first-child {
	margin-top: 14px;
}

.pan-faq__answer > :last-child {
	margin-bottom: 0;
}

.pan-faq__answer p {
	margin: 0 0 12px;
}

.pan-faq__answer ul,
.pan-faq__answer ol {
	margin: 0 0 12px;
	padding-left: 20px;
}

.pan-faq__answer li {
	margin-bottom: 6px;
}

.pan-faq__answer a {
	color: var(--pan-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pan-faq__empty {
	margin: 0;
	padding: 26px 24px;
	border: 1px dashed var(--pan-line);
	border-radius: var(--pan-radius-md);
	background: rgba(255, 255, 255, 0.6);
	color: var(--pan-muted);
	font: 400 14px / 1.7 var(--pan-font);
	text-align: center;
}

/* Closing panel. */
.pan-faq__cta {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 28px clamp(32px, 4.4vw, 64px);
	overflow: hidden;
	margin-top: clamp(56px, 6vw, 88px);
	padding: clamp(30px, 3.4vw, 44px) clamp(26px, 3.4vw, 48px);
	border-radius: var(--pan-radius-lg);
	background: #fff;
	box-shadow: var(--pan-shadow-md);
}

.pan-faq__cta::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: var(--pan-faq-cta-glow, rgba(253, 111, 3, 0.14));
	filter: blur(70px);
	pointer-events: none;
}

.pan-faq__cta-text {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.pan-faq__cta h3 {
	margin: 16px 0 0;
	color: var(--pan-primary);
	font: 600 clamp(24px, 2.8vw, 34px) / 1.2 var(--pan-font);
	letter-spacing: -0.03em;
}

.pan-faq__cta-copy {
	max-width: 520px;
	margin: 14px 0 0;
	color: var(--pan-muted);
	font: 400 14px / 1.8 var(--pan-font);
}

.pan-faq__cta-actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 0;
}

.pan-faq__cta .pan-actions {
	margin-top: 0;
}

.pan-faq__cta-note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	color: var(--pan-muted);
	font: 400 12px / 1.5 var(--pan-font);
}

.pan-faq__cta-note .pan-icon {
	width: 14px;
	height: 14px;
	color: var(--pan-secondary);
}

/* ========================== 14. ABOUT PAGE ========================== */
/* Five sections that alternate ground the same way the home page does -
   dark, cream, white, dark, cream - so the two pages read as one site. Each
   one deliberately picks a different shape from its nearest home-page
   relative: a rail instead of a step row, a checklist instead of a card
   grid. Same system, different sentence. */

/* --- 14a. Page introduction --------------------------------------- */
/* A page opener, not a second hero. Same dark ground so it seats cleanly
   under the header, but shorter, and the weight goes to the statement pair
   rather than to a call to action. */
.pan-about-intro {
	position: relative;
	overflow: hidden;
	background-color: var(--pan-primary);
	background-image:
		linear-gradient(
			var(--pan-about-intro-angle, 152deg),
			var(--pan-about-intro-overlay-1, rgba(5, 44, 87, 0.96)) 0%,
			var(--pan-about-intro-overlay-2, rgba(4, 33, 65, 0.9)) 100%
		),
		var(--pan-about-intro-image, none);
	background-position: center;
	background-size: cover;
	color: #fff;
}

.pan-about-intro__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(72px, 8vw, 118px);
	animation: pan-fade-up 0.8s ease both;
}

.pan-about-intro__head {
	max-width: 780px;
}

.pan-about-intro__title {
	margin: 24px 0 0;
	color: #fff;
	font: 600 clamp(34px, 4.8vw, 64px) / 1.08 var(--pan-font);
	letter-spacing: -0.04em;
}

.pan-about-intro__sub {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 660px;
	margin: 22px 0 0;
	color: var(--pan-secondary);
	font: 600 clamp(15px, 1.5vw, 19px) / 1.5 var(--pan-font);
	letter-spacing: -0.01em;
}

.pan-about-intro__rule {
	flex: 0 0 auto;
	width: var(--pan-about-rule-w, 54px);
	height: var(--pan-about-rule-h, 2px);
	border-radius: 999px;
	background: currentColor;
}

/* Single column until there is an action to sit beside the copy - an empty
   aside would otherwise reserve a column and squeeze the paragraph. */
.pan-about-intro__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: clamp(32px, 5vw, 76px);
	margin-top: clamp(34px, 4vw, 50px);
}

.pan-about-intro__body--split {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
}

.pan-about-intro__copy {
	max-width: 640px;
	color: rgba(255, 255, 255, 0.78);
	font: 400 15px / 1.85 var(--pan-font);
}

.pan-about-intro__copy p {
	margin: 0 0 16px;
}

.pan-about-intro__copy p:last-child {
	margin-bottom: 0;
}

.pan-about-intro__copy a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pan-about-intro__aside {
	min-width: 0;
}

.pan-about-intro .pan-actions {
	margin-top: var(--pan-actions-top, 0px);
}

.pan-about-intro__uses {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px var(--pan-about-use-gap, 12px);
	margin-top: clamp(38px, 4.4vw, 56px);
	padding-top: clamp(20px, 2.2vw, 28px);
	border-top: 1px solid var(--pan-about-use-divider, rgba(255, 255, 255, 0.14));
}

.pan-about-intro__uses-title {
	margin: 0 6px 0 0;
	color: rgba(255, 255, 255, 0.5);
	font: 600 10px / 1.5 var(--pan-font);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.pan-about-intro__use-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pan-about-use-gap, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pan-about-intro__use {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px 9px 10px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	font: 500 12px / 1.4 var(--pan-font);
	letter-spacing: 0.02em;
	transition: transform var(--pan-ease), background-color var(--pan-ease), border-color var(--pan-ease);
}

.pan-about-intro__use:hover {
	transform: translateY(-3px);
	border-color: rgba(253, 111, 3, 0.45);
	background: rgba(255, 255, 255, 0.09);
}

.pan-about-intro__use .pan-icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 7px;
	border-radius: 50%;
	background: rgba(253, 111, 3, 0.16);
	color: var(--pan-secondary);
}

/* Decorative layers. Never interactive, never affect layout. */
.pan-about-intro__decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Site-plan contour rings: the landscape equivalent of the hero's blueprint,
   so the two openers rhyme without repeating the same drawing. */
.pan-about-intro__contour {
	position: absolute;
	top: 50%;
	right: clamp(-160px, -5vw, -40px);
	width: min(58vw, 600px);
	fill: none;
	stroke: var(--pan-contour-color, var(--pan-secondary));
	stroke-width: 1;
	opacity: var(--pan-contour-opacity, 0.18);
	transform: translateY(-50%);
}

.pan-about-intro__orbs {
	position: absolute;
	inset: 0;
}

.pan-about-intro__orbs span {
	position: absolute;
	border-radius: 50%;
	filter: blur(var(--pan-orb-blur, 70px));
	opacity: var(--pan-orb-opacity, 0.26);
	animation: pan-float 18s ease-in-out infinite;
}

.pan-about-intro__orbs span:nth-child(1) { top: -70px; left: 10%; width: 260px; height: 260px; background: var(--pan-orb-1, var(--pan-secondary)); }
.pan-about-intro__orbs span:nth-child(2) { right: 16%; bottom: -90px; width: 300px; height: 300px; background: var(--pan-orb-2, #2b5fa8); animation-delay: 6s; }

/* --- 14b. Our story ------------------------------------------------ */
.pan-about-story {
	padding-block: var(--pan-pad-y);
	background: var(--pan-cream);
	color: var(--pan-primary);
}

.pan-about-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(52px, 7vw, 96px);
}

/* Padded on the two sides the inset and the stamp break out of, so neither
   can spill past the container. */
.pan-about-story__visual {
	position: relative;
	min-width: 0;
	padding: 0 0 clamp(44px, 5.5vw, 72px) clamp(36px, 4.5vw, 64px);
}

.pan-about-story__main {
	position: relative;
	z-index: 1;
	min-height: var(--pan-about-story-h, 480px);
	border-radius: var(--pan-radius-lg);
	background-color: var(--pan-placeholder-a, #cfd4cf);
	background-image: linear-gradient(135deg, var(--pan-placeholder-a, #d6d8d2), var(--pan-placeholder-b, #9fa9a5));
	background-position: center;
	background-size: cover;
	box-shadow: var(--pan-shadow-lg);
}

.pan-about-story__inset {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: clamp(150px, 20vw, 230px);
	aspect-ratio: 4 / 3.4;
	border: 6px solid var(--pan-cream);
	border-radius: var(--pan-radius-md);
	background-color: var(--pan-placeholder-b, #9fa9a5);
	background-image: linear-gradient(135deg, var(--pan-placeholder-b, #b7bfba), var(--pan-placeholder-a, #d6d8d2));
	background-position: center;
	background-size: cover;
	box-shadow: var(--pan-shadow-md);
}

.pan-about-story__stamp {
	position: absolute;
	top: clamp(20px, 3vw, 34px);
	right: clamp(-18px, -1.5vw, 0px);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 3px;
	max-width: 62%;
	padding: 16px 22px;
	border-radius: var(--pan-radius-sm);
	background: var(--pan-secondary);
	color: #fff;
	box-shadow: var(--pan-shadow-brand);
}

.pan-about-story__stamp strong {
	font: 600 20px / 1.15 var(--pan-font);
	letter-spacing: -0.02em;
}

.pan-about-story__stamp span {
	font: 600 10px / 1.45 var(--pan-font);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.86;
}

.pan-about-story__content {
	min-width: 0;
}

.pan-about-story h2 {
	max-width: 560px;
	margin: 22px 0 24px;
	color: var(--pan-primary);
	font: 600 clamp(30px, 3.8vw, 52px) / 1.13 var(--pan-font);
	letter-spacing: -0.035em;
}

.pan-about-story__copy {
	max-width: 560px;
	color: var(--pan-muted);
	font: 400 15px / 1.85 var(--pan-font);
}

.pan-about-story__copy p {
	margin: 0 0 18px;
}

.pan-about-story__copy p:last-child {
	margin-bottom: 0;
}

.pan-about-story__pledge {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	max-width: 560px;
	margin-top: clamp(26px, 3vw, 34px);
	padding: 20px 24px;
	border-left: 3px solid var(--pan-secondary);
	border-radius: 0 var(--pan-radius-md) var(--pan-radius-md) 0;
	background: rgba(255, 255, 255, 0.7);
}

.pan-about-story__pledge p {
	margin: 0;
	color: var(--pan-primary);
	font: 500 14px / 1.7 var(--pan-font);
}

.pan-about-story__pledge .pan-icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 8px;
	border-radius: 50%;
	background: var(--pan-secondary);
	color: #fff;
	stroke-width: 1.9;
}

.pan-about-story .pan-actions {
	margin-top: var(--pan-actions-top, 32px);
}

.pan-about-story__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pan-grid-gap, 22px);
	margin-top: clamp(56px, 6vw, 88px);
}

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

.pan-about-story__stat {
	padding: 26px 24px 28px;
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-md);
	background: #fff;
	transition: transform var(--pan-ease), border-color var(--pan-ease), box-shadow var(--pan-ease);
}

.pan-about-story__stat:hover {
	transform: translateY(-6px);
	border-color: rgba(253, 111, 3, 0.35);
	box-shadow: var(--pan-shadow-md);
}

.pan-about-story__stat strong {
	display: block;
	color: var(--pan-secondary);
	font: 600 clamp(30px, 3.2vw, 42px) / 1 var(--pan-font);
	letter-spacing: -0.03em;
}

.pan-about-story__stat span {
	display: block;
	margin-top: 10px;
	color: var(--pan-muted);
	font: 500 12px / 1.6 var(--pan-font);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pan-about-story__panel {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(26px, 3vw, 46px);
	margin-top: clamp(26px, 3vw, 34px);
	padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 40px);
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-lg);
	background: #fff;
}

.pan-about-story__panel-col {
	min-width: 0;
}

.pan-about-story__panel-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	color: var(--pan-primary);
	font: 600 11px / 1.5 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pan-about-story__panel-title .pan-icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 6px;
	border-radius: 50%;
	background: rgba(253, 111, 3, 0.1);
	color: var(--pan-secondary);
}

.pan-about-story__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pan-about-story__chips li {
	padding: 8px 15px;
	border: 1px solid var(--pan-line);
	border-radius: 999px;
	background: var(--pan-cream);
	color: var(--pan-primary);
	font: 500 12px / 1.45 var(--pan-font);
	transition: border-color var(--pan-ease), background-color var(--pan-ease), color var(--pan-ease);
}

.pan-about-story__chips li:hover {
	border-color: rgba(253, 111, 3, 0.4);
	background: rgba(253, 111, 3, 0.08);
	color: var(--pan-secondary);
}

/* --- 14c. Our approach --------------------------------------------- */
.pan-about-approach {
	padding-block: var(--pan-pad-y);
	background: #fff;
	color: var(--pan-primary);
}

.pan-about-approach__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	align-items: start;
	gap: clamp(48px, 6vw, 96px);
}

/* Sticky so the section title stays with whichever step is being read. */
.pan-about-approach__head {
	position: sticky;
	top: var(--pan-about-sticky-top, 110px);
	min-width: 0;
}

.pan-about-approach__head h2 {
	max-width: 460px;
	margin: 22px 0 20px;
	color: var(--pan-primary);
	font: 600 clamp(30px, 3.8vw, 52px) / 1.12 var(--pan-font);
	letter-spacing: -0.035em;
}

.pan-about-approach__copy {
	max-width: 430px;
	margin: 0;
	color: var(--pan-muted);
	font: 400 15px / 1.82 var(--pan-font);
}

.pan-about-approach__note {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 430px;
	margin: clamp(26px, 3vw, 34px) 0 0;
	padding: 15px 20px;
	border: 1px dashed rgba(253, 111, 3, 0.4);
	border-radius: var(--pan-radius-md);
	background: rgba(253, 111, 3, 0.05);
	color: var(--pan-primary);
	font: 500 12px / 1.6 var(--pan-font);
}

.pan-about-approach__note .pan-icon {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	padding: 7px;
	border-radius: 50%;
	background: var(--pan-secondary);
	color: #fff;
}

.pan-about-approach .pan-actions {
	margin-top: var(--pan-actions-top, 30px);
}

.pan-about-approach__list {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The rail runs behind the markers and stops short at both ends so it never
   dangles past the first and last step. */
.pan-about-approach__list::before {
	content: "";
	position: absolute;
	top: calc(var(--pan-approach-marker, 58px) / 2);
	bottom: calc(var(--pan-approach-marker, 58px) / 2);
	left: calc(var(--pan-approach-marker, 58px) / 2);
	width: var(--pan-rail-w, 2px);
	background: linear-gradient(180deg, transparent, var(--pan-rail-color, var(--pan-secondary)) 7%, var(--pan-rail-color, var(--pan-secondary)) 93%, transparent);
	opacity: var(--pan-rail-opacity, 0.28);
	transform: translateX(-50%);
}

.pan-about-approach__step {
	position: relative;
	display: grid;
	grid-template-columns: var(--pan-approach-marker, 58px) minmax(0, 1fr);
	align-items: start;
	gap: clamp(18px, 2vw, 26px);
}

.pan-about-approach__step + .pan-about-approach__step {
	margin-top: var(--pan-approach-step-gap, 20px);
}

.pan-about-approach__marker {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--pan-approach-marker, 58px);
	height: var(--pan-approach-marker, 58px);
	border: 1px solid rgba(253, 111, 3, 0.35);
	border-radius: 50%;
	background: #fff;
	color: var(--pan-secondary);
	font: 600 14px / 1 var(--pan-font);
	letter-spacing: 0.04em;
	transition: transform var(--pan-ease), background-color var(--pan-ease), border-color var(--pan-ease), color var(--pan-ease);
}

.pan-about-approach__step:hover .pan-about-approach__marker {
	transform: scale(1.06);
	border-color: var(--pan-secondary);
	background: var(--pan-secondary);
	color: #fff;
}

.pan-about-approach__card {
	display: flex;
	align-items: flex-start;
	gap: clamp(16px, 1.8vw, 22px);
	padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.4vw, 28px);
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-md);
	background: #fff;
	transition: transform var(--pan-ease), border-color var(--pan-ease), box-shadow var(--pan-ease), background-color var(--pan-ease);
}

/* Slides toward the reader rather than lifting: on a rail, sideways reads as
   "this one", while a lift would break the line the markers sit on. */
.pan-about-approach__step:hover .pan-about-approach__card {
	transform: translateX(6px);
	border-color: rgba(253, 111, 3, 0.35);
	box-shadow: var(--pan-shadow-md);
}

.pan-about-approach__icon {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: var(--pan-approach-icon, 46px);
	height: var(--pan-approach-icon, 46px);
	border-radius: var(--pan-radius-sm);
	background: rgba(253, 111, 3, 0.1);
	color: var(--pan-secondary);
	transition: background-color var(--pan-ease), color var(--pan-ease);
}

.pan-about-approach__step:hover .pan-about-approach__icon {
	background: var(--pan-secondary);
	color: #fff;
}

.pan-about-approach__icon .pan-icon {
	width: 21px;
	height: 21px;
}

.pan-about-approach__text {
	min-width: 0;
}

.pan-about-approach__card h3 {
	margin: 0 0 8px;
	color: var(--pan-primary);
	font: 600 17px / 1.34 var(--pan-font);
}

.pan-about-approach__card p {
	margin: 0;
	color: var(--pan-muted);
	font: 400 13px / 1.74 var(--pan-font);
}

/* --- 14d. Company values ------------------------------------------- */
.pan-about-values {
	position: relative;
	overflow: hidden;
	padding-block: var(--pan-pad-y);
	background: var(--pan-primary);
	color: #fff;
}

/* Glow in the opposite corner from Why Choose Us, so a visitor scrolling both
   pages does not see the same light in the same place twice. */
.pan-about-values::before {
	content: "";
	position: absolute;
	bottom: -180px;
	left: -140px;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--pan-glow, rgba(253, 111, 3, 0.18)), transparent 68%);
	pointer-events: none;
}

.pan-about-values .pan-container {
	position: relative;
}

.pan-about-values .pan-section-head h2 {
	max-width: 620px;
	color: #fff;
}

.pan-about-values .pan-section-head__aside {
	flex-direction: column;
	align-items: flex-end;
	max-width: 400px;
}

.pan-about-values__copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font: 400 14px / 1.85 var(--pan-font);
	text-align: right;
}

.pan-about-values__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pan-grid-gap, 22px);
}

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

.pan-value {
	position: relative;
	overflow: hidden;
	padding: 30px 26px 32px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--pan-radius-md);
	background: rgba(255, 255, 255, 0.04);
	transition: transform var(--pan-ease), background-color var(--pan-ease), border-color var(--pan-ease);
}

.pan-value:hover {
	transform: translateY(-8px);
	border-color: rgba(253, 111, 3, 0.4);
	background: rgba(255, 255, 255, 0.07);
}

/* Corner bracket. Only drawn on hover, so the idle grid stays quiet. */
.pan-value::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: var(--pan-value-bracket, 40px);
	height: var(--pan-value-bracket, 40px);
	border-top: 2px solid var(--pan-secondary);
	border-right: 2px solid var(--pan-secondary);
	border-radius: 0 var(--pan-radius-md) 0 0;
	opacity: 0;
	transform: translate(-8px, 8px);
	transition: opacity var(--pan-ease), transform var(--pan-ease);
	pointer-events: none;
}

.pan-value:hover::after {
	opacity: 1;
	transform: none;
}

/* Ghosted index: reads as texture, never as content. Every real child is
   lifted above it rather than the watermark being pushed behind them, so a
   card background colour set from the Style tab cannot bury it. */
.pan-value__watermark {
	position: absolute;
	top: -16px;
	right: 4px;
	color: var(--pan-value-mark-color, #fff);
	font: 700 var(--pan-value-mark-size, 88px) / 1 var(--pan-font);
	letter-spacing: -0.05em;
	opacity: var(--pan-value-mark-opacity, 0.06);
	pointer-events: none;
	transition: opacity var(--pan-ease);
}

.pan-value:hover .pan-value__watermark {
	opacity: calc(var(--pan-value-mark-opacity, 0.06) * 2);
}

.pan-value__icon {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--pan-value-icon, 52px);
	height: var(--pan-value-icon, 52px);
	margin-bottom: 22px;
	border: 1px solid rgba(253, 111, 3, 0.4);
	border-radius: var(--pan-radius-sm);
	background: rgba(253, 111, 3, 0.12);
	color: var(--pan-secondary);
	transition: transform var(--pan-ease), background-color var(--pan-ease), color var(--pan-ease);
}

.pan-value:hover .pan-value__icon {
	transform: rotate(-6deg);
	background: var(--pan-secondary);
	color: #fff;
}

.pan-value__icon .pan-icon {
	width: 23px;
	height: 23px;
}

.pan-value h3 {
	position: relative;
	z-index: 1;
	margin: 0 0 10px;
	color: #fff;
	font: 600 18px / 1.34 var(--pan-font);
}

.pan-value p {
	position: relative;
	z-index: 1;
	margin: 0;
	color: rgba(255, 255, 255, 0.66);
	font: 400 13px / 1.72 var(--pan-font);
}

/* --- 14e. Why work with us ----------------------------------------- */
/* The closing trust block: a pitch on the left against a checklist on the
   right. A list rather than a fifth card grid - by this point the reader is
   scanning for reassurance, and a list answers that faster. */
.pan-about-why {
	padding-block: var(--pan-pad-y);
	background: var(--pan-cream);
	color: var(--pan-primary);
}

.pan-about-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	align-items: center;
	gap: clamp(44px, 5.5vw, 84px);
}

.pan-about-why__intro {
	min-width: 0;
}

.pan-about-why h2 {
	max-width: 460px;
	margin: 22px 0 20px;
	color: var(--pan-primary);
	font: 600 clamp(30px, 3.8vw, 50px) / 1.13 var(--pan-font);
	letter-spacing: -0.035em;
}

.pan-about-why__copy {
	max-width: 440px;
	margin: 0;
	color: var(--pan-muted);
	font: 400 15px / 1.82 var(--pan-font);
}

.pan-about-why .pan-actions {
	margin-top: var(--pan-actions-top, 32px);
}

.pan-about-why__note {
	margin: 20px 0 0;
	color: var(--pan-muted);
	font: 500 11px / 1.6 var(--pan-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.pan-about-why__panel {
	position: relative;
	padding: clamp(28px, 3.2vw, 44px) clamp(24px, 3vw, 42px);
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-lg);
	background: #fff;
	box-shadow: var(--pan-shadow-md);
	transition: transform var(--pan-ease), border-color var(--pan-ease), box-shadow var(--pan-ease);
}

.pan-about-why__ribbon {
	position: absolute;
	top: clamp(-17px, -1.4vw, -13px);
	right: clamp(20px, 3vw, 36px);
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--pan-secondary);
	color: #fff;
	font: 600 10px / 1.4 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	box-shadow: var(--pan-shadow-brand);
}

.pan-about-why__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pan-grid-gap, 22px) clamp(20px, 2.4vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pan-about-why__list--1 { grid-template-columns: minmax(0, 1fr); }
.pan-about-why__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pan-about-why__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

.pan-about-why__mark {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: var(--pan-why-mark, 32px);
	height: var(--pan-why-mark, 32px);
	border-radius: 50%;
	background: rgba(253, 111, 3, 0.12);
	color: var(--pan-secondary);
	transition: background-color var(--pan-ease), color var(--pan-ease);
}

.pan-about-why__item:hover .pan-about-why__mark {
	background: var(--pan-secondary);
	color: #fff;
}

.pan-about-why__mark .pan-icon {
	width: 15px;
	height: 15px;
	stroke-width: 2;
}

.pan-about-why__text {
	min-width: 0;
}

.pan-about-why__text strong {
	display: block;
	color: var(--pan-primary);
	font: 600 14px / 1.45 var(--pan-font);
}

.pan-about-why__text span {
	display: block;
	margin-top: 5px;
	color: var(--pan-muted);
	font: 400 13px / 1.62 var(--pan-font);
}

/* ========================= 15. PAGE TITLE BAR ========================= */
/* The band that opens every interior page. Same dark ground as the hero and
   the About opener so the three read as one family, but built to sit under a
   header rather than to carry a page on its own: no body copy, no min-height
   worth speaking of, and the whole thing collapses to a title if every
   optional part is switched off.

   Height comes from a modifier rather than a control default, so the Section
   Layout padding control can still override it without fighting a clamp. */
.pan-page-title {
	position: relative;
	overflow: hidden;
	padding-top: var(--pan-title-clear, 0px);
	background-color: var(--pan-primary);
	background-position: center;
	background-size: cover;
	color: #fff;
}

.pan-page-title__inner {
	position: relative;
	z-index: 2;
}

.pan-page-title--compact .pan-page-title__inner { padding-block: clamp(40px, 4.6vw, 60px); }
.pan-page-title--standard .pan-page-title__inner { padding-block: clamp(60px, 6.8vw, 94px); }
.pan-page-title--tall .pan-page-title__inner { padding-block: clamp(84px, 9.2vw, 136px); }

.pan-page-title__head {
	max-width: 780px;
}

.pan-page-title .pan-kicker {
	margin-bottom: 18px;
}

.pan-page-title__title {
	margin: 0;
	color: #fff;
	font: 600 clamp(30px, 4.2vw, 56px) / 1.1 var(--pan-font);
	letter-spacing: -0.035em;
}

.pan-page-title__rule {
	display: block;
	width: 54px;
	height: 3px;
	margin-top: clamp(16px, 1.8vw, 22px);
	border-radius: 999px;
	background: var(--pan-secondary);
}

.pan-page-title__sub {
	max-width: 620px;
	margin: clamp(14px, 1.6vw, 20px) 0 0;
	color: rgba(255, 255, 255, 0.74);
	font: 400 15px / 1.75 var(--pan-font);
}

.pan-page-title .pan-actions {
	margin-top: var(--pan-actions-top, clamp(24px, 2.8vw, 34px));
}

/* --- Centred variant --- */
.pan-page-title--center .pan-page-title__inner { text-align: center; }
.pan-page-title--center .pan-page-title__head { margin-inline: auto; }
.pan-page-title--center .pan-kicker { margin-inline: auto; }
.pan-page-title--center .pan-page-title__rule { margin-inline: auto; }
.pan-page-title--center .pan-page-title__sub { margin-inline: auto; }
.pan-page-title--center .pan-page-title__crumbs ol { justify-content: center; }
.pan-page-title--center .pan-actions { justify-content: center; }

/* --- Breadcrumbs --- */
.pan-page-title__crumbs {
	margin-bottom: clamp(18px, 2vw, 26px);
	font: 500 12px / 1.5 var(--pan-font);
}

.pan-page-title__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px var(--pan-crumb-gap, 10px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pan-page-title__crumbs li {
	display: inline-flex;
	align-items: center;
	gap: var(--pan-crumb-gap, 10px);
	min-width: 0;
}

.pan-page-title__crumbs a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color var(--pan-ease);
}

.pan-page-title__crumbs a:hover,
.pan-page-title__crumbs a:focus-visible {
	color: #fff;
	text-decoration: none;
}

.pan-page-title__crumbs a:focus-visible {
	outline: 2px solid var(--pan-secondary);
	outline-offset: 3px;
	border-radius: 3px;
}

.pan-page-title__crumbs [aria-current] {
	color: var(--pan-secondary);
}

/* Separator is a modifier rather than a token: `content` cannot fall back
   cleanly when a custom property is unset, and an empty crumb trail would
   then render a stray glyph. */
.pan-page-title__crumbs li + li::before {
	color: rgba(255, 255, 255, 0.32);
	pointer-events: none;
}

.pan-page-title__crumbs--chevron li + li::before { content: "\203A"; }
.pan-page-title__crumbs--slash li + li::before { content: "/"; }
.pan-page-title__crumbs--dot li + li::before { content: "\00B7"; }
.pan-page-title__crumbs--arrow li + li::before { content: "\2192"; }

/* --- Blog band ------------------------------------------------------ */
/* The archive and single-post bands are printed by the templates, not by the
   Pan Page Title widget, so they never receive the per-instance Style tab CSS
   Elementor writes for the interior pages. These rules restate the values the
   saved band carries (title 50px uppercase on #F6F6F6, crumbs 16px on white
   with an accent separator) so blog and FAQ read as one component rather than
   two that drift. The widget's own instance CSS outranks this everywhere it is
   set, so interior pages are unaffected.

   Sizes are fixed, not clamped, because the Elementor instance is fixed: it
   carries no breakpoint overrides, and a fluid blog title would part company
   with the rest of the site on small screens. */
.pan-page-title--blog .pan-page-title__title {
	font-size: 50px;
	color: #F6F6F6;
	font-weight:600;
	text-transform: uppercase;
}

.pan-page-title--blog .pan-page-title__crumbs {
	margin-bottom: 15px;
	font-size: 16px;
}

.pan-page-title--blog .pan-page-title__crumbs a {
	color: #fff;
}

.pan-page-title--blog .pan-page-title__crumbs li + li::before {
	color: var(--pan-secondary);
}

/* --- Decoration --- */
/* The bar also carries `--left`/`--center` and `--motif-<name>` on the section.
   Only `--center` is styled here; the other two are deliberate hooks, so a site
   can target one alignment or one page's motif from Elementor custom CSS
   without editing the pack. Absence of a rule for them is not an oversight. */
.pan-page-title__decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.pan-page-title__motif {
	position: absolute;
	fill: none;
	stroke: var(--pan-motif-color, var(--pan-secondary));
	stroke-width: 1;
	opacity: var(--pan-motif-opacity, 0.16);
}

/* Drawn motifs sit in the right margin, off the edge by default so they read
   as a fragment of a larger drawing rather than a centred graphic. */
.pan-page-title__motif--drawn {
	top: 50%;
	right: var(--pan-motif-offset, clamp(-130px, -4vw, -30px));
	width: var(--pan-motif-size, min(44vw, 460px));
	transform: translateY(-50%);
}

.pan-page-title--center .pan-page-title__motif--drawn {
	right: auto;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Tiled motifs fill the band and fade at both edges, so the texture never
   runs hard into the header above or the section below. */
.pan-page-title__motif--tiled {
	inset: 0;
	width: 100%;
	height: 100%;
	stroke: none;
	color: var(--pan-motif-color, #fff);
	opacity: var(--pan-motif-opacity, 0.09);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 68%, transparent);
	mask-image: linear-gradient(180deg, transparent, #000 30%, #000 68%, transparent);
}

.pan-page-title__motif--tiled path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
}

.pan-page-title__orbs {
	position: absolute;
	inset: 0;
}

.pan-page-title__orbs span {
	position: absolute;
	border-radius: 50%;
	filter: blur(var(--pan-orb-blur, 70px));
	opacity: var(--pan-orb-opacity, 0.24);
	animation: pan-float 18s ease-in-out infinite;
}

.pan-page-title__orbs span:nth-child(1) { top: -90px; left: 8%; width: 240px; height: 240px; background: var(--pan-orb-1, var(--pan-secondary)); }
.pan-page-title__orbs span:nth-child(2) { right: 14%; bottom: -110px; width: 280px; height: 280px; background: var(--pan-orb-2, #2b5fa8); animation-delay: 6s; }

/* ======================= 16. PORTFOLIO GALLERY ======================= */
/* Filtering hides tiles with a class rather than removing them, so the DOM
   order never changes and the lightbox can page through "whatever is on
   screen" by reading the grid back. */
.pan-gallery {
	padding-block: var(--pan-pad-y);
	background: var(--pan-cream);
	color: var(--pan-primary);
}

/* --- Filter bar --- */
.pan-gallery__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(32px, 3.6vw, 48px);
}

.pan-gallery__filters--center { justify-content: center; }

/* Same reasoning as the lightbox buttons: these are <button> elements, so a
   theme's min-width or square radius would turn the pills into blocks. */
.pan-gallery__filter {
	display: inline-flex !important;
	box-sizing: border-box;
	align-items: center;
	gap: 9px;
	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 10px 18px !important;
	border: 1px solid var(--pan-line);
	border-radius: 999px !important;
	background: #fff;
	color: var(--pan-primary);
	font: 500 12.5px / 1.4 var(--pan-font);
	letter-spacing: 0.01em;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color var(--pan-ease), border-color var(--pan-ease), color var(--pan-ease), transform var(--pan-ease);
}

.pan-gallery__filter:hover {
	transform: translateY(-2px);
	border-color: rgba(253, 111, 3, 0.4);
	color: var(--pan-secondary);
}

.pan-gallery__filter:focus-visible {
	outline: 2px solid var(--pan-secondary);
	outline-offset: 3px;
}

.pan-gallery__filter.is-active {
	border-color: var(--pan-secondary);
	background: var(--pan-secondary);
	color: #fff;
}

.pan-gallery__count {
	display: inline-grid;
	box-sizing: border-box;
	place-items: center;
	min-width: 20px;
	height: 20px;
	line-height: 1;
	padding-inline: 6px;
	border-radius: 999px;
	background: rgba(5, 44, 87, 0.08);
	color: var(--pan-muted);
	font: 600 10px / 1 var(--pan-font);
	font-variant-numeric: tabular-nums;
	transition: background-color var(--pan-ease), color var(--pan-ease);
}

.pan-gallery__filter.is-active .pan-gallery__count {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

/* --- Grid --- */
.pan-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pan-grid-gap-y, 26px) var(--pan-grid-gap, 26px);
}

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

/* Dense packing so a filtered-out wide tile does not leave a hole behind. */
.pan-gallery--mosaic .pan-gallery__grid {
	grid-auto-flow: dense;
	grid-auto-rows: auto;
}

.pan-gallery--mosaic .pan-gallery__item--wide { grid-column: span 2; }
.pan-gallery--mosaic .pan-gallery__item--tall { grid-row: span 2; }
.pan-gallery--mosaic .pan-gallery__item--large { grid-column: span 2; grid-row: span 2; }

/* A tall tile has to fill the two rows it claimed, so its photo stretches
   instead of holding the shared aspect ratio. */
.pan-gallery--mosaic .pan-gallery__item--tall .pan-gallery__media,
.pan-gallery--mosaic .pan-gallery__item--large .pan-gallery__media {
	aspect-ratio: auto;
	height: 100%;
}

.pan-gallery--mosaic .pan-gallery__item--tall,
.pan-gallery--mosaic .pan-gallery__item--large {
	display: flex;
}

.pan-gallery--mosaic .pan-gallery__item--tall .pan-gallery__link,
.pan-gallery--mosaic .pan-gallery__item--large .pan-gallery__link {
	flex: 1 1 auto;
}

.pan-gallery__item {
	min-width: 0;
	border-radius: var(--pan-radius-md);
	transition: transform var(--pan-ease), box-shadow var(--pan-ease);
}

.pan-gallery__item.is-hidden { display: none; }

.pan-gallery__item:hover { transform: translateY(-6px); }

.pan-gallery__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.pan-gallery__link:focus-visible {
	outline: 2px solid var(--pan-secondary);
	outline-offset: 4px;
	border-radius: var(--pan-radius-md);
}

.pan-gallery__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--pan-tile-ratio, 4 / 3);
	border-radius: var(--pan-radius-md);
	background: linear-gradient(135deg, var(--pan-placeholder-a, #d5d9d2), var(--pan-placeholder-b, #9eaaa4));
	box-shadow: var(--pan-shadow-sm);
	transition: box-shadow var(--pan-ease);
}

.pan-gallery__item:hover .pan-gallery__media { box-shadow: var(--pan-shadow-md); }

/* Transform only, on its own layer: no background-size animation, no jank. */
.pan-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform var(--pan-ease-slow);
}

.pan-gallery__item:hover .pan-gallery__img {
	transform: scale(var(--pan-tile-zoom, 1.07));
}

.pan-gallery__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, var(--pan-media-overlay, rgba(5, 44, 87, 0.74)));
	opacity: var(--pan-media-overlay-idle, 0.3);
	transition: opacity var(--pan-ease);
	pointer-events: none;
}

.pan-gallery__item:hover .pan-gallery__media::after { opacity: 1; }

.pan-gallery__zoom {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: grid;
	box-sizing: border-box;
	place-items: center;
	width: 40px;
	height: 40px;
	aspect-ratio: 1;
	line-height: 0;
	border-radius: 50%;
	background: var(--pan-secondary);
	color: #fff;
	opacity: 0;
	transform: scale(0.8);
	transition: opacity var(--pan-ease), transform var(--pan-ease);
}

.pan-gallery__item:hover .pan-gallery__zoom,
.pan-gallery__link:focus-visible .pan-gallery__zoom {
	opacity: 1;
	transform: none;
}

.pan-gallery__zoom .pan-icon { display: block; width: 16px; height: 16px; margin: 0; }

.pan-gallery__cat {
	align-self: flex-start;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(253, 111, 3, 0.12);
	color: var(--pan-secondary);
	font: 600 10px / 1.5 var(--pan-font);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pan-gallery__title {
	font: 600 16px / 1.36 var(--pan-font);
	transition: color var(--pan-ease);
}

/* Caption below the photo: the default, and the only one that survives a
   touch screen where there is no hover to reveal anything. */
.pan-gallery--cap-below .pan-gallery__caption {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	padding-top: 16px;
}

.pan-gallery--cap-below .pan-gallery__item:hover .pan-gallery__title { color: var(--pan-secondary); }

/* Caption over the photo. Sits inside the media box, so the tile keeps one
   silhouette and the grid rows stay even. */
.pan-gallery--cap-overlay .pan-gallery__link { position: relative; }

.pan-gallery--cap-overlay .pan-gallery__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 9px;
	padding: 20px 22px 22px;
	color: #fff;
	transform: translateY(8px);
	opacity: 0;
	transition: opacity var(--pan-ease), transform var(--pan-ease);
	pointer-events: none;
}

.pan-gallery--cap-overlay .pan-gallery__item:hover .pan-gallery__caption,
.pan-gallery--cap-overlay .pan-gallery__link:focus-visible .pan-gallery__caption {
	transform: none;
	opacity: 1;
}

.pan-gallery--cap-overlay .pan-gallery__cat {
	background: var(--pan-secondary);
	color: #fff;
}

.pan-gallery--cap-overlay .pan-gallery__title { color: #fff; }

.pan-gallery__empty {
	margin: 0;
	padding: clamp(36px, 5vw, 60px) 0;
	color: var(--pan-muted);
	font: 400 15px / 1.7 var(--pan-font);
	text-align: center;
}

.pan-gallery__more {
	display: flex;
	justify-content: center;
	margin-top: clamp(36px, 4vw, 52px);
}

/* The one place the pack renders .pan-button as a real <button>, so it is the
   one place a theme button reset can reach it. */
.pan-gallery__more .pan-button {
	width: auto;
	min-width: 0;
	height: auto;
	min-height: var(--pan-btn-min-h, 56px);
	-webkit-appearance: none;
	appearance: none;
}

.pan-gallery__more .pan-icon { transition: transform var(--pan-ease); }
.pan-gallery__more .pan-button:hover .pan-icon { transform: translateY(3px); }

/* --- Lightbox --- */
/* The frame shrink-wraps the photo instead of filling a fixed 1180px, so prev
   and next hug whatever the image actually measures. Pinned to a fixed-width
   frame they end up hundreds of pixels out in the dark beside a portrait shot;
   sized to content they stay beside it at every aspect ratio.
   The caption spans its own row underneath rather than sitting inside the
   middle column, or a long title would widen that column and push the buttons
   back out again. */
html.pan-lightbox-lock { overflow: hidden; }

.pan-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Top pad reserves the strip the close button sits in. */
	padding: clamp(62px, 9vh, 96px) clamp(12px, 3vw, 40px) clamp(20px, 5vh, 52px);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.pan-lightbox.is-open { opacity: 1; }

.pan-lightbox[hidden] { display: none; }

.pan-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: var(--pan-lightbox-bg, rgba(3, 20, 40, 0.92));
	backdrop-filter: blur(4px);
	cursor: zoom-out;
}

.pan-lightbox__frame {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: auto minmax(0, auto) auto;
	grid-template-rows: minmax(0, auto) auto;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 1.6vw, 18px) clamp(8px, 1.6vw, 18px);
	max-width: 100%;
	max-height: 100%;
	transform: scale(0.97);
	transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pan-lightbox.is-open .pan-lightbox__frame { transform: none; }

/* The figure box itself is dropped so the photo and the caption become grid
   items of the frame. figure/figcaption semantics survive display: contents. */
.pan-lightbox__figure {
	display: contents;
	margin: 0;
}

.pan-lightbox__img {
	grid-area: 1 / 2;
	max-width: 100%;
	max-height: 68vh;
	border-radius: var(--pan-radius-md);
	object-fit: contain;
	box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
}

.pan-lightbox__cap {
	grid-area: 2 / 1 / 3 / 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	text-align: center;
}

.pan-lightbox__cat {
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(253, 111, 3, 0.18);
	color: var(--pan-secondary-soft);
	font: 600 10px / 1.5 var(--pan-font);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pan-lightbox__title {
	color: #fff;
	font: 600 16px / 1.4 var(--pan-font);
}

.pan-lightbox__counter {
	color: rgba(255, 255, 255, 0.5);
	font: 500 12px / 1.4 var(--pan-font);
	font-variant-numeric: tabular-nums;
}

/*
 * Hardened against theme button resets. A theme rule as ordinary as
 * `.pan-section button {}` scores 0,1,1 and beats a bare `.pan-lightbox__btn`
 * at 0,1,0, which is what turns a round icon button into a wide pill with a
 * 4px radius. Specificity alone cannot win that race against an unknown theme
 * (an `#id button` rule outranks any class chain), so the handful of
 * declarations that define the shape are marked important. Everything the
 * Style tab is allowed to change stays normal weight, and the size control
 * emits its own important so it still overrides this.
 */
.pan-lightbox__btn {
	display: grid !important;
	box-sizing: border-box !important;
	flex: 0 0 auto;
	place-items: center !important;
	width: 48px !important;
	height: 48px !important;
	min-width: 48px !important;
	min-height: 48px !important;
	max-width: none !important;
	aspect-ratio: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font: inherit;
	line-height: 0 !important;
	text-align: center !important;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color var(--pan-ease), transform var(--pan-ease), border-color var(--pan-ease);
}

.pan-lightbox__btn:hover {
	transform: scale(1.06);
	border-color: rgba(255, 255, 255, 0.45);
	background: var(--pan-secondary);
}

.pan-lightbox__btn:focus-visible {
	outline: 2px solid var(--pan-secondary);
	outline-offset: 3px;
}

.pan-lightbox__btn[hidden] { display: none !important; }

/* display: block kills the inline baseline gap that offsets the glyph, and the
   pinned box stops a theme's `button svg { margin }` shifting it off centre. */
.pan-lightbox__btn .pan-icon {
	display: block !important;
	flex: none;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle;
}

.pan-lightbox__close {
	position: absolute;
	top: clamp(14px, 3vh, 28px);
	right: clamp(14px, 3vw, 32px);
	z-index: 3;
}

.pan-lightbox__nav--prev { grid-area: 1 / 1; }
.pan-lightbox__nav--next { grid-area: 1 / 3; }

/* One chevron glyph, rotated: two icons would be two things to keep in step. */
.pan-lightbox__nav--prev .pan-icon { transform: rotate(90deg); }
.pan-lightbox__nav--next .pan-icon { transform: rotate(-90deg); }

/* ========================== 17. CONTACT PAGE ========================== */
/* Details rail beside a form panel. Built from the same parts as the rest of
   the pack - the footer's icon box, the About panel's card, the shared social
   button - so the contact page reads as the same site rather than as a form
   plugin's own layout.

   Field styling targets bare input/select/textarea inside .pan-contact__form
   instead of a form plugin's class names: whichever engine renders the markup,
   the fields inherit one geometry. */
.pan-contact {
	padding-block: var(--pan-pad-y);
	background: #fff;
	color: var(--pan-primary);
}

.pan-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, var(--pan-contact-aside, 0.85fr)) minmax(0, 1.15fr);
	align-items: start;
	gap: clamp(40px, 5vw, 72px);
}

.pan-contact--form-left .pan-contact__aside { order: 2; }
.pan-contact--form-left .pan-contact__panel { order: 1; }

.pan-contact__aside {
	min-width: 0;
}

.pan-contact h2 {
	max-width: 460px;
	margin: 22px 0 18px;
	color: var(--pan-primary);
	font: 600 clamp(30px, 3.8vw, 50px) / 1.13 var(--pan-font);
	letter-spacing: -0.035em;
}

.pan-contact__copy {
	max-width: 460px;
	margin: 0;
	color: var(--pan-muted);
	font: 400 15px / 1.82 var(--pan-font);
}

.pan-contact__block {
	margin-top: var(--pan-contact-block-gap, 34px);
}

/* Same eyebrow treatment as the footer column headings, so a block title here
   and one there are the same object. */
.pan-contact__block-title {
	margin: 0 0 16px;
	color: var(--pan-primary);
	font: 600 11px / 1.45 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* --- Detail rows --- */
.pan-contact__rows {
	display: grid;
	gap: var(--pan-contact-row-gap, 18px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pan-contact__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}

.pan-contact__mark {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: var(--pan-contact-mark, 44px);
	height: var(--pan-contact-mark, 44px);
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-md);
	background: rgba(253, 111, 3, 0.08);
	color: var(--pan-secondary);
	transition: background-color var(--pan-ease), border-color var(--pan-ease), color var(--pan-ease);
}

.pan-contact__row:hover .pan-contact__mark {
	border-color: rgba(253, 111, 3, 0.4);
	background: var(--pan-secondary);
	color: #fff;
}

.pan-contact__mark .pan-icon {
	width: var(--pan-contact-mark-icon, 17px);
	height: var(--pan-contact-mark-icon, 17px);
}

.pan-contact__body {
	min-width: 0;
	padding-top: 2px;
}

.pan-contact__label {
	display: block;
	color: var(--pan-muted);
	font: 600 10px / 1.4 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pan-contact__value {
	display: block;
	margin-top: 5px;
	color: var(--pan-primary);
	font: 500 15px / 1.55 var(--pan-font);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--pan-ease);
}

a.pan-contact__value:hover,
a.pan-contact__value:focus-visible {
	color: var(--pan-secondary);
	text-decoration: none;
}

.pan-contact__note {
	display: block;
	margin-top: 4px;
	color: var(--pan-muted);
	font: 400 12.5px / 1.6 var(--pan-font);
}

/* --- Opening hours --- */
.pan-contact__hours {
	padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 24px);
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-md);
	background: var(--pan-cream);
}

.pan-contact__hours-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-block: var(--pan-contact-hours-pad, 11px);
	font: 400 14px / 1.5 var(--pan-font);
}

.pan-contact__hours-row:first-child { padding-top: 0; }
.pan-contact__hours-row:last-child { padding-bottom: 0; }

.pan-contact__hours-row + .pan-contact__hours-row {
	border-top: 1px solid var(--pan-line);
}

.pan-contact__hours-day {
	min-width: 0;
	color: var(--pan-primary);
	font-weight: 500;
}

.pan-contact__hours-time {
	flex: 0 0 auto;
	color: var(--pan-muted);
	font-variant-numeric: tabular-nums;
}

/* A closed day still has to be readable, so it drops weight rather than
   contrast: no faded text that fails against the cream panel. */
.pan-contact__hours-row.is-closed .pan-contact__hours-day,
.pan-contact__hours-row.is-closed .pan-contact__hours-time {
	color: var(--pan-muted);
	font-weight: 400;
	font-style: italic;
}

.pan-contact__hours-note {
	margin: 12px 0 0;
	color: var(--pan-muted);
	font: 400 12.5px / 1.6 var(--pan-font);
}

/* --- Social --- */
.pan-contact__social-label {
	margin: 0 0 14px;
	color: var(--pan-primary);
	font: 600 11px / 1.45 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* The shared .pan-social__link is drawn for the dark footer, so the light
   ground is restated here rather than in the primitive. */
.pan-contact__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pan-social-gap, 10px);
}

.pan-contact__social .pan-social__link {
	border-color: var(--pan-line);
	background-color: var(--pan-cream);
	color: var(--pan-primary);
}

.pan-contact__social .pan-social__link:hover,
.pan-contact__social .pan-social__link:focus-visible {
	border-color: var(--pan-secondary);
	background-color: var(--pan-secondary);
	color: #fff;
}

/* --- Form panel --- */
.pan-contact__panel {
	position: relative;
	min-width: 0;
	padding: clamp(28px, 3.2vw, 46px) clamp(24px, 3vw, 42px);
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-lg);
	background: #fff;
	box-shadow: var(--pan-shadow-md);
	transition: transform var(--pan-ease), border-color var(--pan-ease), box-shadow var(--pan-ease);
}

.pan-contact__ribbon {
	position: absolute;
	top: clamp(-17px, -1.4vw, -13px);
	right: clamp(20px, 3vw, 36px);
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--pan-secondary);
	color: #fff;
	font: 600 10px / 1.4 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	box-shadow: var(--pan-shadow-brand);
}

.pan-contact__panel-title {
	margin: 0;
	color: var(--pan-primary);
	font: 600 clamp(21px, 2.1vw, 27px) / 1.25 var(--pan-font);
	letter-spacing: -0.02em;
}

.pan-contact__panel-copy {
	margin: 10px 0 0;
	color: var(--pan-muted);
	font: 400 14px / 1.78 var(--pan-font);
}

.pan-contact__form {
	margin-top: 26px;
}

.pan-contact__empty {
	margin: 0;
	padding: 22px;
	border: 1px dashed var(--pan-line);
	border-radius: var(--pan-radius-md);
	background: var(--pan-cream);
	color: var(--pan-muted);
	font: 400 13.5px / 1.7 var(--pan-font);
	text-align: center;
}

.pan-contact__panel-note {
	margin: 18px 0 0;
	color: var(--pan-muted);
	font: 400 12.5px / 1.65 var(--pan-font);
}

/* --- Form fields --- */
/* Element selectors, not plugin class names: CF7, WPForms, Gravity, and Fluent
   all emit bare inputs inside their own wrappers, and this is the only hook
   common to every one of them. */
.pan-contact__form p {
	margin: 0 0 var(--pan-field-gap, 14px);
}

.pan-contact__form p:last-child {
	margin-bottom: 0;
}

.pan-contact__form label {
	display: block;
	margin-bottom: 7px;
	color: var(--pan-primary);
	font: 500 12.5px / 1.5 var(--pan-font);
}

.pan-contact__form input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.pan-contact__form select,
.pan-contact__form textarea {
	width: 100%;
	max-width: 100%;
	min-height: var(--pan-field-h, 52px);
	padding: 14px 16px;
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-field-radius, 10px);
	background-color: #fff;
	color: var(--pan-primary);
	font: 400 14px / 1.5 var(--pan-font);
	transition: border-color var(--pan-ease), box-shadow var(--pan-ease);
	appearance: none;
	-webkit-appearance: none;
}

.pan-contact__form textarea {
	min-height: 130px;
	resize: vertical;
}

.pan-contact__form ::placeholder {
	color: var(--pan-muted);
	opacity: 1;
}

.pan-contact__form input:not([type="submit"]):not([type="button"]):focus,
.pan-contact__form select:focus,
.pan-contact__form textarea:focus {
	outline: none;
	border-color: var(--pan-secondary);
	box-shadow: 0 0 0 3px rgba(253, 111, 3, 0.14);
}

.pan-contact__form input[type="checkbox"],
.pan-contact__form input[type="radio"] {
	accent-color: var(--pan-secondary);
}

/* Matches the shared button geometry through the same tokens the .pan-button
   primitive uses, so a form plugin's submit lands on the pack's button. */
.pan-contact__form input[type="submit"],
.pan-contact__form button[type="submit"],
.pan-contact__form button:not([type]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--pan-btn-min-h);
	margin-top: 4px;
	padding: var(--pan-btn-pad-y) var(--pan-btn-pad-x);
	border: var(--pan-btn-border-w) solid var(--pan-secondary);
	border-radius: var(--pan-btn-radius);
	background-color: var(--pan-secondary);
	color: #fff;
	font: 600 var(--pan-btn-font) / 1.2 var(--pan-font);
	letter-spacing: var(--pan-btn-track);
	text-transform: uppercase;
	cursor: pointer;
	transition: transform var(--pan-ease), background-color var(--pan-ease),
		border-color var(--pan-ease), color var(--pan-ease), box-shadow var(--pan-ease);
	appearance: none;
	-webkit-appearance: none;
}

.pan-contact__form input[type="submit"]:hover,
.pan-contact__form button[type="submit"]:hover,
.pan-contact__form button:not([type]):hover {
	transform: translateY(var(--pan-btn-lift));
	background-color: var(--pan-secondary-soft);
	border-color: var(--pan-secondary-soft);
	box-shadow: var(--pan-shadow-brand);
}

/* CF7 and Fluent both park their status messages after the form; give them the
   pack's type instead of the plugin default. */
.pan-contact__form .wpcf7-response-output,
.pan-contact__form .wpcf7-not-valid-tip {
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: var(--pan-radius-sm);
	font: 400 13px / 1.6 var(--pan-font);
}

.pan-contact__form .wpcf7-not-valid-tip {
	padding: 0;
	color: #c0392b;
}

/* --- Map --- */
.pan-contact__map {
	margin-top: clamp(40px, 4.5vw, 64px);
}

.pan-contact__map-frame {
	position: relative;
	overflow: hidden;
	height: var(--pan-contact-map-h, 420px);
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-lg);
	background: var(--pan-cream);
	box-shadow: var(--pan-shadow-sm);
}

.pan-contact__map-frame iframe,
.pan-contact__map-frame > * {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.pan-contact__map-caption {
	margin: 14px 0 0;
	color: var(--pan-muted);
	font: 400 12.5px / 1.6 var(--pan-font);
}

/* ======================== 18. SERVICES LISTING ======================== */
/* The services page itself. Alternating image and text rows, one per service,
   with no link out: there are no per-service pages, so each row carries the
   whole offer and the only anchor is the call to action.

   Sides come from a modifier class per row rather than :nth-child. The widget
   offers "always left" and "alternate starting right" as well, and one rule
   set has to serve all four without the stylesheet knowing the row index.

   The flip reverses the column template as well as the order, so the image
   column keeps its own width when it moves to the right - swapping order
   alone would hand the image the text column's track. */
.pan-services-list {
	padding-block: var(--pan-pad-y);
	background: #fff;
	color: var(--pan-primary);
}

.pan-services-list__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 28px clamp(32px, 5vw, 80px);
	margin-bottom: clamp(48px, 5.5vw, 76px);
}

.pan-services-list__head-text { min-width: 0; }

.pan-services-list__head-aside {
	display: flex;
	justify-content: flex-end;
	min-width: 0;
}

.pan-services-list h2 {
	max-width: 660px;
	margin: 22px 0 0;
	color: var(--pan-primary);
	font: 600 clamp(31px, 4.2vw, 56px) / 1.12 var(--pan-font);
	letter-spacing: -0.035em;
}

.pan-services-list__copy {
	max-width: 380px;
	margin: 0;
	color: var(--pan-muted);
	font: 400 14px / 1.8 var(--pan-font);
}

.pan-services-list--head-stacked .pan-services-list__head {
	grid-template-columns: minmax(0, 1fr);
}

.pan-services-list--head-stacked .pan-services-list__head-aside {
	justify-content: flex-start;
}

.pan-services-list--head-stacked .pan-services-list__copy {
	max-width: 620px;
}

.pan-services-list--head-centred .pan-services-list__head {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
}

.pan-services-list--head-centred .pan-services-list__head-aside {
	justify-content: center;
}

.pan-services-list--head-centred .pan-services-list__copy {
	max-width: 620px;
}

/* --- Rows --- */
.pan-services-list__rows {
	display: grid;
	gap: var(--pan-slist-row-gap, clamp(64px, 7vw, 104px));
}

.pan-services-list__row {
	display: grid;
	grid-template-columns: minmax(0, var(--pan-slist-media, 50%)) minmax(0, 1fr);
	align-items: center;
	gap: var(--pan-slist-col-gap, clamp(36px, 4.5vw, 72px));
}

.pan-services-list__row--media-right {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--pan-slist-media, 50%));
}

.pan-services-list__row--media-right .pan-services-list__content { order: 1; }
.pan-services-list__row--media-right .pan-services-list__media { order: 2; }

/* The rule is the row's own top border, so it never appears above the first
   row and never needs a separate element between them. */
.pan-services-list--ruled .pan-services-list__row + .pan-services-list__row {
	padding-top: var(--pan-slist-row-gap, clamp(64px, 7vw, 104px));
	border-top: 1px solid var(--pan-line);
}

/* Halved: the gap already separates the rows, so a ruled row would otherwise
   carry the full gap twice over. */
.pan-services-list--ruled .pan-services-list__rows {
	gap: calc(var(--pan-slist-row-gap, clamp(64px, 7vw, 104px)) / 2);
}

/* --- Media --- */
/* The ratio lives on the box, not the image, and the image fills it
   absolutely. That way the Vertical Alignment control works in all three
   modes: on stretch the row hands the box a definite height and aspect-ratio
   simply yields to it, with no second rule needed. Putting the ratio on the
   image instead would mean setting an explicit height for stretch, and an
   explicit height overrides aspect-ratio - the ratio control would go dead. */
.pan-services-list__media {
	position: relative;
	overflow: hidden;
	min-width: 0;
	aspect-ratio: var(--pan-slist-ratio, 4 / 3);
	border-radius: var(--pan-radius-lg);
	background: linear-gradient(
		140deg,
		var(--pan-placeholder-a, #dfe6dd) 0%,
		var(--pan-placeholder-b, #c9d4cb) 100%
	);
	box-shadow: var(--pan-shadow-md);
}

.pan-services-list__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pan-ease-slow);
}

.pan-services-list--zoom .pan-services-list__row:hover .pan-services-list__img {
	transform: scale(1.05);
}

.pan-services-list__index {
	position: absolute;
	top: clamp(14px, 1.6vw, 20px);
	left: clamp(14px, 1.6vw, 20px);
	display: grid;
	place-items: center;
	min-width: 46px;
	padding: 9px 13px;
	border-radius: 999px;
	background: rgba(5, 44, 87, 0.86);
	color: #fff;
	font: 600 12px / 1 var(--pan-font);
	letter-spacing: 0.1em;
	backdrop-filter: blur(6px);
}

.pan-services-list__tag {
	position: absolute;
	right: clamp(14px, 1.6vw, 20px);
	bottom: clamp(14px, 1.6vw, 20px);
	padding: 8px 15px;
	border-radius: 999px;
	background: var(--pan-secondary);
	color: #fff;
	font: 600 10px / 1.4 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	box-shadow: var(--pan-shadow-brand);
}

/* --- Content --- */
.pan-services-list__content {
	min-width: 0;
}

/* Above the title the number is a standalone eyebrow, not a badge over the
   image, so it drops the pill entirely. */
.pan-services-list__content > .pan-services-list__index {
	position: static;
	display: inline-block;
	min-width: 0;
	margin-bottom: 12px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--pan-secondary);
	font: 600 12px / 1 var(--pan-font);
	letter-spacing: 0.18em;
	backdrop-filter: none;
}

.pan-services-list__title {
	margin: 0;
	color: var(--pan-primary);
	font: 600 clamp(24px, 2.6vw, 34px) / 1.2 var(--pan-font);
	letter-spacing: -0.028em;
}

.pan-services-list__text {
	margin-top: var(--pan-slist-body-gap, 18px);
	max-width: 560px;
	color: var(--pan-muted);
	font: 400 15px / 1.82 var(--pan-font);
}

.pan-services-list__text p { margin: 0 0 12px; }
.pan-services-list__text p:last-child { margin-bottom: 0; }

.pan-services-list__text a {
	color: var(--pan-secondary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Feature list --- */
.pan-services-list__features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pan-slist-feature-gap, 11px) clamp(18px, 2.2vw, 30px);
	margin: var(--pan-slist-body-gap, 18px) 0 0;
	padding: 0;
	list-style: none;
}

.pan-services-list__features--1 { grid-template-columns: minmax(0, 1fr); }
.pan-services-list__features--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pan-services-list__feature {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	color: var(--pan-primary);
	font: 400 14px / 1.55 var(--pan-font);
}

/* Same accent circle as the About trust list, so a checklist here and one
   there are the same object. */
.pan-services-list__feature-mark {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: var(--pan-slist-feature-mark, 22px);
	height: var(--pan-slist-feature-mark, 22px);
	margin-top: 1px;
	border-radius: 50%;
	background: rgba(253, 111, 3, 0.12);
	color: var(--pan-secondary);
}

.pan-services-list__feature-mark .pan-icon {
	width: 12px;
	height: 12px;
	stroke-width: 2.2;
}

.pan-services-list .pan-actions {
	margin-top: var(--pan-actions-top, 28px);
}

/* ======================== 19. BLOG TEMPLATES ======================== */
/* The blog is served as WordPress templates rather than widgets, so none of
   this is driven by an Elementor Style tab. Everything below therefore has to
   be right at its default: the tokens are the only adjustment surface, and
   they are the same tokens every widget already uses.

   Layout rule for the single post: the article runs in a narrow reading column
   while the image and the closing blocks run the full container. A post set to
   the width of a three-column card grid is not readable at length. */
:root {
	/* Reading measure for the article column. */
	--pan-post-measure: 720px;

	/* Card grid geometry. There is no Style tab here, so these are the
	   adjustment surface: override them on :root from the theme, or from
	   Elementor's custom CSS, to retune the blog without touching this file. */
	--pan-blog-gap: clamp(22px, 2.4vw, 32px);
	--pan-blog-row-gap: clamp(36px, 4vw, 52px);
	--pan-blog-card-ratio: 3 / 2;
	--pan-blog-lift: -6px;

	/* Lead post. */
	--pan-blog-lead-media: 55%;
	--pan-blog-lead-ratio: 16 / 10;
}

/* --- Specificity note, applies to everything below --------------------------
   Elementor writes its global kit typography as `.elementor-kit-N a` and
   `.elementor-kit-N h1`-`h6`, and that class sits on <body>, so it reaches
   these templates even though they are not Elementor content. Widgets never
   hit this: Elementor scopes widget CSS to `.elementor-element-{id}`, which
   out-specifies everything. A plain template gets no such boost.

   The kit's link rule is the one that actually broke the cards. It sets
   `a { font-size:14px; font-weight:300; line-height:1.5em }` at (0,1,1), and a
   card title is an <a> inside an <h2>, so the anchor won and every title drew
   at 14px light. Sizing the h2 harder would not have helped - the anchor is
   the element rendering the text.

   So: every type rule below is scoped to its section, which clears (0,1,1),
   and the anchors that wrap a heading inherit their type from it. Note the
   reset is deliberately NOT a blanket `.pan-blog a`: that would also strip
   .pan-button, which needs its own type. --- */

/* --- Title band --- */
/* The blog band is the Pan Page Title widget's own markup, so its geometry,
   breadcrumbs, rule, and motif all come from section 15 and there is nothing
   to restate here. The one addition is the meta row, which the widget has no
   equivalent for: a post needs its date, author, and reading time in the band,
   and a built page does not. */
.pan-page-title__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin: 22px 0 0;
	color: rgba(255, 255, 255, 0.72);
	font: 500 13px / 1.5 var(--pan-font);
}

.pan-page-title__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pan-page-title__meta .pan-icon {
	width: 15px;
	height: 15px;
	color: var(--pan-secondary);
}

.pan-page-title--center .pan-page-title__meta {
	justify-content: center;
}

/* --- Archive --- */
.pan-blog {
	padding-block: clamp(56px, 6vw, 92px);
	background: #fff;
	color: var(--pan-primary);
}

/* --- Filter pills --- */
.pan-blog__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(32px, 3.6vw, 48px);
}

.pan-blog .pan-blog__filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--pan-line);
	border-radius: 999px;
	background: #fff;
	color: var(--pan-primary);
	font: 500 13px / 1.2 var(--pan-font);
	text-decoration: none;
	transition: background-color var(--pan-ease), border-color var(--pan-ease), color var(--pan-ease);
}

.pan-blog .pan-blog__filter:hover,
.pan-blog .pan-blog__filter:focus-visible {
	border-color: rgba(253, 111, 3, 0.45);
	background: rgba(253, 111, 3, 0.07);
	color: var(--pan-primary);
	text-decoration: none;
}

.pan-blog__filter.is-active {
	border-color: var(--pan-primary);
	background: var(--pan-primary);
	color: #fff;
}

.pan-blog__filter-count {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding-inline: 5px;
	border-radius: 999px;
	background: rgba(5, 44, 87, 0.08);
	color: inherit;
	font-size: 11px;
	font-weight: 600;
}

.pan-blog__filter.is-active .pan-blog__filter-count {
	background: rgba(255, 255, 255, 0.2);
}

/* --- Lead post --- */
.pan-blog__lead {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, var(--pan-blog-lead-media, 55%)) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 3.4vw, 52px);
	margin-bottom: clamp(44px, 5vw, 72px);
	padding: clamp(20px, 2.2vw, 30px);
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-lg);
	background: var(--pan-cream);
}

.pan-blog__ribbon {
	position: absolute;
	top: clamp(-16px, -1.3vw, -12px);
	left: clamp(24px, 3vw, 40px);
	z-index: 4;
	padding: 8px 17px;
	border-radius: 999px;
	background: var(--pan-secondary);
	color: #fff;
	font: 600 10px / 1.4 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	box-shadow: var(--pan-shadow-brand);
}

.pan-blog__lead-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--pan-blog-lead-ratio, 16 / 10);
	border-radius: var(--pan-radius-md);
	background: linear-gradient(140deg, var(--pan-placeholder-a, #dfe6dd) 0%, var(--pan-placeholder-b, #c9d4cb) 100%);
}

.pan-blog__lead-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pan-ease-slow);
}

.pan-blog__lead:hover .pan-blog__lead-img {
	transform: scale(1.04);
}

.pan-blog__lead-body {
	min-width: 0;
}

.pan-blog .pan-blog__lead-title {
	margin: 14px 0 0;
	font: 600 clamp(25px, 2.6vw, 36px) / 1.18 var(--pan-font);
	letter-spacing: -0.032em;
	text-wrap: balance;
}

/* Inherits from the h2 above rather than taking the kit's 14px link type. */
.pan-blog .pan-blog__lead-title a {
	font: inherit;
	letter-spacing: inherit;
	color: var(--pan-primary);
	text-decoration: none;
	transition: color var(--pan-ease);
}

.pan-blog .pan-blog__lead:hover .pan-blog__lead-title a {
	color: var(--pan-secondary);
	text-decoration: none;
}

/* Stretched over the whole lead panel, same reasoning as the cards. */
.pan-blog .pan-blog__lead-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--pan-radius-lg);
}

.pan-blog .pan-blog__lead-title a:focus-visible {
	outline: none;
}

.pan-blog .pan-blog__lead-title a:focus-visible::after {
	outline: 2px solid var(--pan-secondary);
	outline-offset: 3px;
}

/* --- Card grid --- */
.pan-blog__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pan-blog-row-gap, clamp(36px, 4vw, 52px)) var(--pan-blog-gap, clamp(22px, 2.4vw, 32px));
}

.pan-blog__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pan-blog__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pan-blog__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-lg);
	background: #fff;
	transition: transform var(--pan-ease), border-color var(--pan-ease), box-shadow var(--pan-ease);
}

.pan-blog__card:hover {
	transform: translateY(var(--pan-blog-lift, -6px));
	border-color: rgba(253, 111, 3, 0.32);
	box-shadow: var(--pan-shadow-md);
}

.pan-blog__card-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--pan-blog-card-ratio, 3 / 2);
	background: linear-gradient(140deg, var(--pan-placeholder-a, #dfe6dd) 0%, var(--pan-placeholder-b, #c9d4cb) 100%);
}

.pan-blog__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--pan-ease-slow);
}

.pan-blog__card:hover .pan-blog__card-img {
	transform: scale(1.05);
}

.pan-blog__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: clamp(18px, 2vw, 26px);
}

.pan-blog .pan-blog__card-title {
	margin: 0;
	font: 600 clamp(19px, 1.6vw, 24px) / 1.32 var(--pan-font);
	letter-spacing: -0.022em;
	text-wrap: balance;
}

/* Inherits from the h2 above rather than taking the kit's 14px light link
   type, which is what made these titles unreadable. */
.pan-blog .pan-blog__card-title a {
	font: inherit;
	letter-spacing: inherit;
	color: var(--pan-primary);
	text-decoration: none;
	transition: color var(--pan-ease);
}

.pan-blog .pan-blog__card:hover .pan-blog__card-title a {
	color: var(--pan-secondary);
}

/* Stretched link. The title anchor is the card's only link - one stop per card
   for a screen reader, and the real text for search engines - but its ::after
   covers the whole card, so the image, the meta, and the read-more are all
   clickable. Without this the read-more looked like a button and did nothing,
   because it is a span. */
.pan-blog .pan-blog__card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--pan-radius-lg);
}

/* The ring is drawn on the stretched overlay, so keyboard focus outlines the
   whole card rather than a line of text inside it. */
.pan-blog .pan-blog__card-title a:focus-visible {
	outline: none;
}

/* Drawn just inside the edge: the card clips to its radius with
   overflow:hidden, so an outward ring would be cut off. */
.pan-blog .pan-blog__card-title a:focus-visible::after {
	outline: 2px solid var(--pan-secondary);
	outline-offset: -3px;
}

/* Pushes the read-more to the bottom so card footers line up across a row
   however long the titles run. */
.pan-blog__card-body .pan-blog__more {
	margin-top: auto;
	padding-top: 16px;
}

.pan-blog__card .pan-blog__more,
.pan-blog__lead .pan-blog__more {
	cursor: pointer;
}

/* --- Chip, meta, excerpt, read more --- */
.pan-blog__chip {
	display: inline-block;
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(253, 111, 3, 0.1);
	color: var(--pan-secondary);
	font: 600 10px / 1.4 var(--pan-font);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.pan-blog__chip--over {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 4;
	background: rgb(30 61 12);
	color: #fff;
	backdrop-filter: blur(6px);
}

.pan-blog__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 12px 0 0;
	color: var(--pan-muted);
	font: 400 12.5px / 1.5 var(--pan-font);
}

.pan-blog__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pan-blog__meta .pan-icon {
	width: 14px;
	height: 14px;
	color: var(--pan-secondary);
}

.pan-blog__excerpt {
	margin: 14px 0 0;
	color: var(--pan-muted);
	font: 400 14.5px / 1.72 var(--pan-font);
}

/* Scoped because it is an anchor inside the related block, where the kit's
   link rule would otherwise resize it. */
.pan-blog .pan-blog__more,
.pan-blog-related .pan-blog__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--pan-secondary);
	font: 600 12px / 1.2 var(--pan-font);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.pan-blog__more .pan-icon {
	width: 14px;
	height: 14px;
	transition: transform var(--pan-ease);
}

.pan-blog__card:hover .pan-blog__more .pan-icon,
.pan-blog__lead:hover .pan-blog__more .pan-icon,
.pan-blog__more:hover .pan-icon {
	transform: translate(3px, -3px);
}

/* --- Pagination --- */
.pan-blog__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(44px, 5vw, 68px);
}

.pan-blog .pan-blog__pagination a,
.pan-blog .pan-blog__pagination span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 14px;
	justify-content: center;
	border: 1px solid var(--pan-line);
	border-radius: 999px;
	background: #fff;
	color: var(--pan-primary);
	font: 500 13px / 1 var(--pan-font);
	text-decoration: none;
	transition: background-color var(--pan-ease), border-color var(--pan-ease), color var(--pan-ease);
}

.pan-blog .pan-blog__pagination a:hover,
.pan-blog .pan-blog__pagination a:focus-visible {
	border-color: var(--pan-secondary);
	color: var(--pan-secondary);
	text-decoration: none;
}

.pan-blog__pagination .current {
	border-color: var(--pan-primary);
	background: var(--pan-primary);
	color: #fff;
}

.pan-blog__pagination .dots {
	min-width: 0;
	border-color: transparent;
	background: none;
}

.pan-blog__pagination .pan-icon {
	width: 15px;
	height: 15px;
}

/* --- Empty state --- */
.pan-blog__empty {
	display: grid;
	justify-items: center;
	gap: 20px;
	padding: clamp(44px, 5vw, 72px) 24px;
	border: 1px dashed var(--pan-line);
	border-radius: var(--pan-radius-lg);
	background: var(--pan-cream);
	text-align: center;
}

.pan-blog__empty-title {
	margin: 0;
	color: var(--pan-primary);
	font: 500 17px / 1.5 var(--pan-font);
}

/* --- Single post --- */
.pan-blog-post {
	padding-block: clamp(44px, 5vw, 72px);
	background: #fff;
	color: var(--pan-primary);
}

.pan-blog-post__hero {
	margin: 0 0 clamp(36px, 4vw, 56px);
}

.pan-blog-post__hero-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pan-radius-lg);
	box-shadow: var(--pan-shadow-md);
}

.pan-blog-post__hero-caption {
	margin-top: 12px;
	color: var(--pan-muted);
	font: 400 12.5px / 1.6 var(--pan-font);
	text-align: center;
}

.pan-blog-post__article {
	max-width: var(--pan-post-measure);
	margin-inline: auto;
}

/* --- Post content typography --- */
/* This is the one place in the pack where the markup is not ours: it is
   whatever the editor produced. So every element the block editor and the
   classic editor can emit is given a size here, rather than trusting the
   theme. Hello Elementor supplies almost none of it. */
/* Scoped throughout: the kit sets type on every h1-h6 and every `a` at
   (0,1,1), which would otherwise win over a single class here. */
.pan-blog-post .pan-blog-post__content {
	color: var(--pan-primary);
	font: 400 17px / 1.76 var(--pan-font);
}

.pan-blog-post__content > *:first-child { margin-top: 0; }
.pan-blog-post__content > *:last-child { margin-bottom: 0; }

.pan-blog-post .pan-blog-post__content p {
	margin: 0 0 1.3em;
	color: #2f4459;
	font: inherit;
}

.pan-blog-post .pan-blog-post__content h2,
.pan-blog-post .pan-blog-post__content h3,
.pan-blog-post .pan-blog-post__content h4,
.pan-blog-post .pan-blog-post__content h5,
.pan-blog-post .pan-blog-post__content h6 {
	margin: 1.85em 0 0.55em;
	color: var(--pan-primary);
	font-family: var(--pan-font);
	font-weight: 600;
	letter-spacing: -0.022em;
	text-wrap: balance;
}

.pan-blog-post .pan-blog-post__content h2 { font-size: clamp(23px, 2.3vw, 30px); line-height: 1.26; }
.pan-blog-post .pan-blog-post__content h3 { font-size: clamp(19px, 1.95vw, 24px); line-height: 1.3; }
.pan-blog-post .pan-blog-post__content h4 { font-size: 19px; line-height: 1.36; }
.pan-blog-post .pan-blog-post__content h5 { font-size: 17px; line-height: 1.42; }
.pan-blog-post .pan-blog-post__content h6 {
	font-size: 13px;
	line-height: 1.45;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Inline links keep the body's size and leading; only colour and underline
   are theirs. Without `font: inherit` the kit drops them to 14px light and
   the line they sit in loses its rhythm. */
.pan-blog-post .pan-blog-post__content a {
	font: inherit;
	letter-spacing: inherit;
	color: var(--pan-secondary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--pan-ease);
}

.pan-blog-post .pan-blog-post__content a:hover {
	color: var(--pan-primary);
}

.pan-blog-post .pan-blog-post__content ul,
.pan-blog-post .pan-blog-post__content ol {
	margin: 0 0 1.3em;
	padding-left: 1.3em;
	color: #2f4459;
	font: inherit;
}

.pan-blog-post .pan-blog-post__content li {
	margin-bottom: 0.5em;
	font: inherit;
}
.pan-blog-post__content li::marker { color: var(--pan-secondary); }

.pan-blog-post__content ul { list-style: disc; }
.pan-blog-post__content ol { list-style: decimal; }

.pan-blog-post .pan-blog-post__content blockquote {
	margin: 1.8em 0;
	padding: 4px 0 4px clamp(20px, 2.4vw, 30px);
	border-left: 3px solid var(--pan-secondary);
	color: var(--pan-primary);
	font: 600 clamp(18px, 1.9vw, 22px) / 1.55 var(--pan-font);
	letter-spacing: -0.018em;
}

.pan-blog-post .pan-blog-post__content blockquote p {
	font: inherit;
	color: inherit;
}

.pan-blog-post__content blockquote p:last-child { margin-bottom: 0; }

.pan-blog-post__content blockquote cite {
	display: block;
	margin-top: 12px;
	color: var(--pan-muted);
	font: 400 13px / 1.5 var(--pan-font);
	font-style: normal;
}

.pan-blog-post__content img,
.pan-blog-post__content video,
.pan-blog-post__content iframe {
	max-width: 100%;
	height: auto;
	border-radius: var(--pan-radius-md);
}

.pan-blog-post__content figure {
	margin: 1.8em 0;
}

.pan-blog-post__content figcaption {
	margin-top: 10px;
	color: var(--pan-muted);
	font: 400 12.5px / 1.6 var(--pan-font);
	text-align: center;
}

/* Wide and full-width blocks break out of the reading column, which is the
   whole reason the column is narrower than the container. */
.pan-blog-post__content .alignwide {
	width: min(calc(100vw - 2 * var(--pan-gutter)), 1040px);
	margin-inline: calc(50% - min(calc(50vw - var(--pan-gutter)), 520px));
	max-width: none;
}

.pan-blog-post__content .alignfull {
	width: calc(100vw - 2 * var(--pan-gutter));
	margin-inline: calc(50% - 50vw + var(--pan-gutter));
	max-width: none;
}

.pan-blog-post__content .aligncenter {
	margin-inline: auto;
	text-align: center;
}

.pan-blog-post__content code {
	padding: 3px 6px;
	border-radius: 5px;
	background: var(--pan-cream);
	color: var(--pan-primary);
	font-size: 0.88em;
}

.pan-blog-post__content pre {
	overflow-x: auto;
	margin: 1.6em 0;
	padding: 20px;
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-md);
	background: var(--pan-cream);
	font-size: 13.5px;
	line-height: 1.7;
}

.pan-blog-post__content pre code {
	padding: 0;
	background: none;
}

.pan-blog-post__content table {
	width: 100%;
	margin: 1.6em 0;
	border-collapse: collapse;
	font-size: 14px;
}

.pan-blog-post__content th,
.pan-blog-post__content td {
	padding: 11px 14px;
	border: 1px solid var(--pan-line);
	text-align: left;
}

.pan-blog-post__content th {
	background: var(--pan-cream);
	font-weight: 600;
}

.pan-blog-post__content hr {
	margin: 2.4em 0;
	border: 0;
	border-top: 1px solid var(--pan-line);
}

/* --- Tags --- */
.pan-blog-post__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin-top: clamp(36px, 4vw, 52px);
	padding-top: clamp(24px, 2.6vw, 34px);
	border-top: 1px solid var(--pan-line);
}

.pan-blog-post__tags-label {
	display: inline-flex;
	color: var(--pan-secondary);
}

.pan-blog-post__tags-label .pan-icon {
	width: 16px;
	height: 16px;
}

.pan-blog-post .pan-blog-post__tag {
	padding: 7px 14px;
	border: 1px solid var(--pan-line);
	border-radius: 999px;
	color: var(--pan-muted);
	font: 500 12.5px / 1.2 var(--pan-font);
	text-decoration: none;
	transition: border-color var(--pan-ease), color var(--pan-ease);
}

.pan-blog-post .pan-blog-post__tag:hover,
.pan-blog-post .pan-blog-post__tag:focus-visible {
	border-color: var(--pan-secondary);
	color: var(--pan-secondary);
	text-decoration: none;
}

/* --- Share --- */
.pan-blog-post__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
	margin-top: clamp(28px, 3vw, 38px);
}

.pan-blog-post__share-label {
	margin: 0;
	color: var(--pan-primary);
	font: 600 11px / 1.45 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* The shared social button is drawn for the dark footer, so the light ground
   is restated here the same way the contact page does it. */
.pan-blog-post__share-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pan-social-gap, 10px);
}

.pan-blog-post__share-links .pan-social__link {
	width: var(--pan-social-size, 40px);
	height: var(--pan-social-size, 40px);
	border-color: var(--pan-line);
	background-color: var(--pan-cream);
	color: var(--pan-primary);
}

.pan-blog-post__share-links .pan-social__link:hover,
.pan-blog-post__share-links .pan-social__link:focus-visible {
	border-color: var(--pan-secondary);
	background-color: var(--pan-secondary);
	color: #fff;
}

.pan-blog-post__share-links .pan-icon {
	width: 17px;
	height: 17px;
}

/* --- Author box --- */
.pan-blog-post__author {
	display: flex;
	align-items: flex-start;
	gap: clamp(16px, 2vw, 24px);
	margin-top: clamp(36px, 4vw, 52px);
	padding: clamp(22px, 2.6vw, 32px);
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-lg);
	background: var(--pan-cream);
}

.pan-blog-post__author-avatar {
	flex: 0 0 auto;
	overflow: hidden;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(5, 44, 87, 0.08);
}

.pan-blog-post__author-img,
.pan-blog-post__author-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pan-blog-post__author-body { min-width: 0; }

.pan-blog-post__author-label {
	margin: 0;
	color: var(--pan-muted);
	font: 600 10px / 1.4 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pan-blog-post__author-name {
	margin: 6px 0 0;
	color: var(--pan-primary);
	font: 600 17px / 1.38 var(--pan-font);
}

.pan-blog-post__author-bio {
	margin: 8px 0 0;
	color: var(--pan-muted);
	font: 400 14px / 1.72 var(--pan-font);
}

/* --- Previous / next --- */
.pan-blog-post__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 22px);
	margin-top: clamp(36px, 4vw, 52px);
}

.pan-blog-post__nav-link {
	display: grid;
	gap: 9px;
	min-width: 0;
	padding: clamp(18px, 2vw, 24px);
	border: 1px solid var(--pan-line);
	border-radius: var(--pan-radius-md);
	text-decoration: none;
	transition: border-color var(--pan-ease), background-color var(--pan-ease), transform var(--pan-ease);
}

.pan-blog-post__nav-link:hover {
	transform: translateY(-3px);
	border-color: rgba(253, 111, 3, 0.35);
	background: var(--pan-cream);
	text-decoration: none;
}

.pan-blog-post__nav-link.is-empty {
	border-color: transparent;
	pointer-events: none;
}

.pan-blog-post__nav-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--pan-secondary);
	font: 600 10px / 1.4 var(--pan-font);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.pan-blog-post__nav-label .pan-icon {
	width: 14px;
	height: 14px;
}

.pan-blog-post .pan-blog-post__nav-link {
	font: inherit;
}

.pan-blog-post .pan-blog-post__nav-title {
	color: var(--pan-primary);
	font: 600 15px / 1.45 var(--pan-font);
}

.pan-blog-post__nav-link--next {
	justify-items: end;
	text-align: right;
}

.pan-blog-post__nav-link--next .pan-blog-post__nav-label {
	flex-direction: row;
}

.pan-blog-post__comments {
	margin-top: clamp(40px, 4.5vw, 64px);
	padding-top: clamp(28px, 3vw, 40px);
	border-top: 1px solid var(--pan-line);
}

/* The related block reuses the archive card, but sits outside .pan-blog, so
   the scoped title rules above do not reach it. Restated here rather than
   loosening those selectors back down to where the kit beats them. */
.pan-blog-related .pan-blog__card-title {
	margin: 0;
	font: 600 clamp(18px, 1.5vw, 22px) / 1.32 var(--pan-font);
	letter-spacing: -0.022em;
	text-wrap: balance;
}

.pan-blog-related .pan-blog__card-title a {
	font: inherit;
	letter-spacing: inherit;
	color: var(--pan-primary);
	text-decoration: none;
	transition: color var(--pan-ease);
}

.pan-blog-related .pan-blog__card:hover .pan-blog__card-title a {
	color: var(--pan-secondary);
}

.pan-blog-related .pan-blog__card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--pan-radius-lg);
}

.pan-blog-related .pan-blog__card-title a:focus-visible {
	outline: none;
}

.pan-blog-related .pan-blog__card-title a:focus-visible::after {
	outline: 2px solid var(--pan-secondary);
	outline-offset: -3px;
}

/* --- Related --- */
.pan-blog-related {
	padding-block: clamp(52px, 5.5vw, 84px);
	background: var(--pan-cream);
	color: var(--pan-primary);
}

.pan-blog-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px 30px;
	margin-bottom: clamp(28px, 3.2vw, 42px);
}

.pan-blog-related .pan-blog-related__head h2 {
	margin: 0;
	color: var(--pan-primary);
	font: 600 clamp(23px, 2.7vw, 34px) / 1.18 var(--pan-font);
	letter-spacing: -0.03em;
}

.pan-blog-related .pan-blog__card {
	background: #fff;
}
.pan-page-title__title{
	color:#fff !important;
}


/* ========================== 20. RESPONSIVE ========================== */
@media (max-width: 1200px) {
	.pan-hero__drawing { display: none; }
}

/* Rail unwraps into a chip row above the questions; display:contents lets
   the support card drop to the end of the column without reordering DOM. */
@media (max-width: 1024px) {
	.pan-faq--rail .pan-faq__layout { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
	.pan-faq--rail .pan-faq__rail,
	.pan-faq--rail .pan-faq__rail-inner { display: contents; }
	.pan-faq--rail .pan-faq__rail-nav { order: 1; padding: 18px; }
	.pan-faq--rail .pan-faq__main { order: 2; }
	.pan-faq--rail .pan-faq__support { order: 3; }
	.pan-faq__rail-title { width: 100%; padding-inline: 0; }
	.pan-faq__rail-nav ul { flex-direction: row; flex-wrap: wrap; }
	.pan-faq__rail-link { padding: 10px 15px; border: 1px solid var(--pan-line); border-radius: 999px; }
	.pan-faq__rail-link.is-active { border-color: rgba(253, 111, 3, 0.4); }
}

@media (max-width: 1024px) {
	.pan-service-grid,
	.pan-service-grid--3,
	.pan-service-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pan-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pan-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pan-process__steps::before { display: none; }
}

@media (max-width: 1024px) {
	.pan-footer__cta { grid-template-columns: minmax(0, 1fr); }
	.pan-footer--cta-raised .pan-footer__cta { margin-top: clamp(-72px, -6vw, -40px); }
	.pan-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pan-footer__brand { grid-column: 1 / -1; }
	.pan-footer__about { max-width: 560px; }
}

@media (max-width: 1024px) {
	.pan-cta__panel { grid-template-columns: minmax(0, 1fr); }
	.pan-cta__aside { align-items: flex-start; }
	.pan-cta .pan-actions { flex-direction: row; gap: var(--pan-actions-gap, 14px); }
	.pan-cta__note { text-align: left; }
}

/* The rail is a reading column, so it stacks before the panel gets narrow
   enough to squeeze the form fields. Order is reset too: on one column the
   details always read first, whichever side the form sat on. */
@media (max-width: 1024px) {
	.pan-blog__grid,
	.pan-blog__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pan-blog__lead { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1024px) {
	.pan-contact__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
	.pan-contact--form-left .pan-contact__aside,
	.pan-contact--form-left .pan-contact__panel { order: 0; }
	.pan-contact h2,
	.pan-contact__copy { max-width: 620px; }
}

/* Stacked, image first on every row whichever side it sat on: alternating
   sides in one column reads as an ordering mistake rather than a rhythm. The
   template is reset too, or the single column would inherit the flipped
   row's track widths. */
@media (max-width: 900px) {
	.pan-blog-post__nav { grid-template-columns: minmax(0, 1fr); }
	.pan-blog-post__nav-link.is-empty { display: none; }
	.pan-blog-post__nav-link--next { justify-items: start; text-align: left; }
}

@media (max-width: 900px) {
	.pan-services-list__row,
	.pan-services-list__row--media-right {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}
	.pan-services-list__row--media-right .pan-services-list__media,
	.pan-services-list__row--media-right .pan-services-list__content { order: 0; }
	.pan-services-list__head { grid-template-columns: minmax(0, 1fr); }
	.pan-services-list__head-aside { justify-content: flex-start; }
	.pan-services-list--head-centred .pan-services-list__head-aside { justify-content: center; }
	.pan-services-list__copy { max-width: 620px; }
	.pan-services-list__text { max-width: none; }
}

@media (max-width: 900px) {
	.pan-faq__cta { grid-template-columns: minmax(0, 1fr); }
	.pan-faq__cta-actions { align-items: flex-start; }
	.pan-service-grid,
	.pan-service-grid--3,
	.pan-service-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pan-section-head { grid-template-columns: minmax(0, 1fr); }
	.pan-section-head__aside { justify-content: flex-start; }
	.pan-benefits .pan-section-head__aside { align-items: flex-start; max-width: none; }
	.pan-benefits__copy { text-align: left; }
	.pan-benefits__footer .pan-button { margin-left: 0; }
	.pan-introduction__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.pan-introduction__image { min-height: 380px; }
	.pan-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pan-hero { min-height: 620px; }
	.pan-hero__scroll { display: none; }
}

@media (max-width: 767px) {
	.pan-blog__grid,
	.pan-blog__grid--2,
	.pan-blog__grid--3 { grid-template-columns: minmax(0, 1fr); }
	.pan-blog-post .pan-blog-post__content { font-size: 16px; }
	.pan-blog-post__author { flex-direction: column; }
	.pan-blog__filters { gap: 8px; }
	.pan-blog .pan-blog__filter { padding: 9px 15px; font-size: 12.5px; }
	.pan-services-list__features,
	.pan-services-list__features--2 { grid-template-columns: minmax(0, 1fr); }
	.pan-contact__hours-row { flex-direction: column; gap: 3px; }
	.pan-contact__hours-time { align-self: flex-start; }
	.pan-contact__ribbon { right: auto; left: clamp(18px, 5vw, 24px); }
	.pan-faq__q { gap: 12px; padding: 18px; font-size: 16px; }
	.pan-faq__index { width: 32px; height: 32px; font-size: 11px; }
	.pan-faq__toggle { width: 34px; height: 34px; }
	.pan-faq__answer, .pan-faq--plain .pan-faq__answer { padding: 2px 18px 20px; }
	.pan-faq__answer::before, .pan-faq--plain .pan-faq__answer::before { right: 18px; left: 18px; }
	.pan-faq__group-head { flex-wrap: wrap; gap: 8px 12px; }
	.pan-faq__search { padding-left: 16px; }
	.pan-service-grid,
	.pan-service-grid--3,
	.pan-service-grid--4,
	.pan-project-grid,
	.pan-benefits__grid,
	.pan-process__steps { grid-template-columns: minmax(0, 1fr); }
	.pan-service-card__media { aspect-ratio: 16 / 10; }
	.pan-project__media { aspect-ratio: 16 / 11; }
	.pan-introduction__visual { padding: 0 20px 20px 0; }
	.pan-introduction__image { min-height: 320px; }
	.pan-introduction__stamp { padding: 16px 18px; }
	.pan-introduction__stamp strong { font-size: 26px; }
	.pan-hero__copy { font-size: 16px; }
	.pan-cta__panel { padding-inline: 22px; }
	.pan-cta__panel::before { top: 22px; bottom: 22px; }
	.pan-footer__sketch { right: -60px; width: min(86vw, 460px); opacity: calc(var(--pan-sketch-opacity, 0.22) * 0.6); }
}

@media (max-width: 600px) {
	.pan-footer__grid { grid-template-columns: minmax(0, 1fr); }
	.pan-footer__bottom { justify-content: flex-start; }
}

@media (max-width: 520px) {
	.pan-faq__cta { padding-inline: 20px; }
	.pan-faq__rail-nav ul { flex-direction: column; }
	.pan-actions { gap: var(--pan-actions-gap, 12px); }
	.pan-actions .pan-button { flex: 1 1 100%; }
	.pan-hero__trust { align-items: flex-start; }
}

/* --- About page ---------------------------------------------------- */
@media (max-width: 1024px) {
	.pan-about-values__grid,
	.pan-about-values__grid--3,
	.pan-about-values__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pan-about-story__stats,
	.pan-about-story__stats--3,
	.pan-about-story__stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pan-about-approach__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.pan-about-approach__head { position: static; }
	.pan-about-approach__head h2,
	.pan-about-approach__copy,
	.pan-about-approach__note { max-width: 640px; }
}

@media (max-width: 900px) {
	.pan-about-intro__body,
	.pan-about-intro__body--split { grid-template-columns: minmax(0, 1fr); }
	.pan-about-story__grid { grid-template-columns: minmax(0, 1fr); gap: 52px; }
	.pan-about-story__main { min-height: 380px; }
	.pan-about-values .pan-section-head__aside { align-items: flex-start; max-width: none; }
	.pan-about-values__copy { text-align: left; }
	.pan-about-why__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
	.pan-about-why h2,
	.pan-about-why__copy { max-width: 620px; }
}

/* The rail is dropped rather than squeezed: below this width the marker
   column would eat the card, so the steps stack and the numbers sit above. */
@media (max-width: 767px) {
	.pan-about-values__grid,
	.pan-about-values__grid--2,
	.pan-about-values__grid--3,
	.pan-about-values__grid--4,
	.pan-about-story__panel,
	.pan-about-why__list,
	.pan-about-why__list--2 { grid-template-columns: minmax(0, 1fr); }
	.pan-about-story__visual { padding: 0 0 52px 26px; }
	.pan-about-story__main { min-height: 300px; }
	.pan-about-story__inset { width: clamp(120px, 34vw, 170px); }
	.pan-about-story__stamp { padding: 13px 17px; }
	.pan-about-story__stamp strong { font-size: 17px; }
	.pan-about-intro__contour { right: -190px; opacity: calc(var(--pan-contour-opacity, 0.18) * 0.65); }
	.pan-about-approach__list::before { display: none; }
	.pan-about-approach__step { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.pan-about-approach__marker { width: 46px; height: 46px; }
}

@media (max-width: 520px) {
	.pan-about-story__stats,
	.pan-about-story__stats--2,
	.pan-about-story__stats--3,
	.pan-about-story__stats--4 { grid-template-columns: minmax(0, 1fr); }
	.pan-about-intro__uses { flex-direction: column; align-items: flex-start; }
	.pan-about-why__ribbon { position: static; display: inline-block; margin-bottom: 18px; }
	.pan-about-approach__card { flex-direction: column; }
}

/* --- Page title bar ------------------------------------------------- */
@media (max-width: 900px) {
	.pan-page-title__motif--drawn { opacity: calc(var(--pan-motif-opacity, 0.16) * 0.75); }
}

@media (max-width: 767px) {
	.pan-page-title__motif--drawn { right: -150px; width: min(78vw, 380px); }
	.pan-page-title--center .pan-page-title__motif--drawn { right: auto; }
	.pan-page-title__sub { font-size: 14px; }
}

@media (max-width: 520px) {
	.pan-page-title__crumbs { font-size: 11px; }
}

/* --- Portfolio gallery ---------------------------------------------- */
@media (max-width: 1024px) {
	.pan-gallery__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.pan-gallery__grid,
	.pan-gallery__grid--3,
	.pan-gallery__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pan-lightbox__img { max-height: 62vh; }
}

/* Below this the caption has to be permanent: there is no hover to reveal it,
   and a mosaic span would leave a single tile per row. */
@media (max-width: 767px) {
	.pan-gallery__grid,
	.pan-gallery__grid--2,
	.pan-gallery__grid--3,
	.pan-gallery__grid--4 { grid-template-columns: minmax(0, 1fr); }
	.pan-gallery--mosaic .pan-gallery__item--wide,
	.pan-gallery--mosaic .pan-gallery__item--tall,
	.pan-gallery--mosaic .pan-gallery__item--large { grid-column: auto; grid-row: auto; }
	.pan-gallery--mosaic .pan-gallery__item--tall .pan-gallery__media,
	.pan-gallery--mosaic .pan-gallery__item--large .pan-gallery__media { aspect-ratio: var(--pan-tile-ratio, 4 / 3); height: auto; }
	.pan-gallery--cap-overlay .pan-gallery__caption { transform: none; opacity: 1; }
	.pan-gallery__zoom { opacity: 1; transform: none; }
	/* Too narrow for side controls without squeezing the photo: the figure
	   takes the full width and the pair drops to a row beneath it. */
	.pan-lightbox__frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, auto) auto auto; gap: 14px; width: 100%; }
	.pan-lightbox__img { grid-area: 1 / 1; justify-self: center; max-height: 54vh; }
	.pan-lightbox__cap { grid-area: 2 / 1 / 3 / 2; }
	.pan-lightbox__nav--prev { grid-area: 3 / 1; justify-self: start; }
	.pan-lightbox__nav--next { grid-area: 3 / 1; justify-self: end; }
}

@media (max-width: 520px) {
	.pan-gallery__filter { padding: 8px 14px; font-size: 12px; }
	.pan-gallery__filters { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.pan-section *,
	.pan-section *::before,
	.pan-section *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}