/* projects.css — Project archive + case-study template styles
   Loads after: tokens.css → layout.css → animations.css → components.css
   Scope: archive-pb_project.php + single-pb_project.php (enqueued conditionally)
   Reuses from service.css: .before-after__grid, .before-after__col, .before-after__img-wrap,
           .before-after__label, .service-before-after, .pb-admin-notice, .sr-only
   Reuses global: .section-overline, .section-title, .section-header, .pb-reveal,
           .img-skeleton, .container, .btn-primary, .btn-secondary
   ─────────────────────────────────────────────────────────────────────── */


/* ══════════════════════════════════════════════════════════
   ARCHIVE: HERO
   ══════════════════════════════════════════════════════════ */

.projects-archive-hero {
	position: relative;
	min-height: clamp(280px, 40vh, 440px);
	display: flex;
	align-items: flex-end;
	background-color: var(--pb-navy);
	overflow: hidden;
}

.projects-archive-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(11, 31, 58, 0.55) 0%,
		rgba(11, 31, 58, 0.96) 100%
	);
	z-index: 1;
}

.projects-archive-hero .container {
	position: relative;
	z-index: 2;
	padding-block-start: var(--pb-space-24);
	padding-block-end: var(--pb-space-12);
	width: 100%;
}

.projects-archive-hero__content {
	max-width: 640px;
}

.projects-archive-hero__overline {
	color: rgba(255, 255, 255, 0.65);
}

.projects-archive-hero__title {
	font-family: var(--pb-font-display);
	font-weight: 900;
	font-size: clamp(1.875rem, 4.5vw, 3.75rem);
	line-height: var(--pb-leading-tight);
	color: var(--pb-white);
	margin: var(--pb-space-3) 0 var(--pb-space-4);
}

.projects-archive-hero__sub {
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-lg);
	color: rgba(255, 255, 255, 0.72);
	line-height: var(--pb-leading-normal);
	max-width: 58ch;
	margin: 0;
}


/* ══════════════════════════════════════════════════════════
   ARCHIVE: BODY CONTAINER
   ══════════════════════════════════════════════════════════ */

.projects-archive-body {
	background: var(--pb-white);
	padding: var(--pb-space-12) 0 var(--pb-space-16);
}

@media (min-width: 1024px) {
	.projects-archive-body { padding: var(--pb-space-16) 0 var(--pb-space-24); }
}


/* ══════════════════════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════════════════════ */

.projects-filter-bar {
	display: flex;
	flex-direction: column;
	gap: var(--pb-space-4);
	margin-bottom: var(--pb-space-10);
	padding: var(--pb-space-6);
	background: var(--pb-gray-50);
	border: 1px solid var(--pb-gray-200);
	border-radius: var(--pb-radius-lg);
}

/* Desktop: a single full-width row — Sector left, Year pushed right */
@media (min-width: 1024px) {
	.projects-filter-bar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--pb-space-6) var(--pb-space-10);
	}
	.filter-group--year {
		margin-inline-start: auto;
	}
}

.filter-group {
	display: flex;
	flex-direction: column;
	gap: var(--pb-space-2);
}

@media (min-width: 768px) {
	.filter-group {
		flex-direction: row;
		align-items: center;
		gap: var(--pb-space-4);
	}
}

.filter-group__label {
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-xs);
	font-weight: var(--pb-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.10em;
	color: var(--pb-gray-500);
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.filter-group__label {
		width: 64px;
	}
}

.filter-group__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pb-space-2);
}

.filter-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 0 var(--pb-space-4);
	border-radius: var(--pb-radius-full);
	border: 1px solid var(--pb-gray-300);
	background: var(--pb-white);
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-sm);
	font-weight: var(--pb-weight-medium);
	color: var(--pb-gray-700);
	cursor: pointer;
	line-height: 1;
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
	.filter-btn {
		transition:
			background-color var(--pb-transition-fast),
			border-color     var(--pb-transition-fast),
			color            var(--pb-transition-fast);
	}
}

.filter-btn:hover {
	border-color: var(--pb-blue-dark);
	color: var(--pb-blue-dark);
}

.filter-btn:focus-visible {
	outline: 2px solid var(--pb-blue-dark);
	outline-offset: 3px;
}

/* Active / selected filter */
.filter-btn.is-active,
.filter-btn[aria-pressed="true"] {
	background: var(--pb-blue);
	border-color: var(--pb-blue);
	color: var(--pb-white);
	font-weight: var(--pb-weight-semibold);
}

.filter-btn.is-active:hover,
.filter-btn[aria-pressed="true"]:hover {
	background: var(--pb-blue-dark);
	border-color: var(--pb-blue-dark);
}

/* Clear-all pill — shown by JS when a non-All filter is active */
.filter-clear-wrap {
	display: flex;
	align-items: flex-end;
	padding-bottom: 2px;
}

.filter-clear-all {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--pb-space-4);
	border-radius: var(--pb-radius-full);
	border: 1px solid var(--pb-blue-dark);
	background: transparent;
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-sm);
	font-weight: var(--pb-weight-semibold);
	color: var(--pb-blue-dark);
	cursor: pointer;
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
	.filter-clear-all {
		transition: background-color var(--pb-transition-fast), color var(--pb-transition-fast);
	}
}

.filter-clear-all:hover {
	background: var(--pb-blue-dark);
	color: var(--pb-white);
}

.filter-clear-all:focus-visible {
	outline: 2px solid var(--pb-blue-dark);
	outline-offset: 3px;
}

[hidden].filter-clear-all {
	display: none;
}


/* ══════════════════════════════════════════════════════════
   PROJECT GRID
   ══════════════════════════════════════════════════════════ */

.projects-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pb-space-6);
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (min-width: 640px) {
	.projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.projects-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--pb-space-5);
	}
}


/* ══════════════════════════════════════════════════════════
   PROJECT CARD (archive + related)
   ══════════════════════════════════════════════════════════ */

.project-card {
	border-radius: var(--pb-radius-lg);
	overflow: hidden;
	background: var(--pb-navy);
}

/* Featured card — wide span on desktop */
@media (min-width: 1024px) {
	.project-card--featured {
		grid-column: span 2;
	}
	.project-card--featured .project-card__photo-wrap {
		aspect-ratio: 21 / 9;
	}
}

.project-card__inner {
	display: block;
	position: relative;
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.project-card__inner:focus-visible {
	outline: 3px solid var(--pb-blue-dark);
	outline-offset: 0;
	border-radius: var(--pb-radius-lg);
}

/* Photo */
.project-card__photo-wrap {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--pb-navy);
	display: block;
}

.project-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.project-card__photo {
		transition: transform 420ms ease-out;
	}
	.project-card:hover .project-card__photo,
	.project-card:focus-within .project-card__photo {
		transform: scale(1.04);
	}
}

/* Overlay */
.project-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(11, 31, 58, 0.92) 0%,
		rgba(11, 31, 58, 0.60) 45%,
		rgba(11, 31, 58, 0.10) 100%
	);
	display: flex;
	align-items: flex-end;
	padding: var(--pb-space-6);
	opacity: 0.60;
}

@media (prefers-reduced-motion: no-preference) {
	.project-card__overlay {
		transition: opacity 240ms ease;
	}
	.project-card:hover .project-card__overlay,
	.project-card:focus-within .project-card__overlay {
		opacity: 1;
	}
}

/* Always show overlay at ≥ 0.60 — even without hover, so title reads on mobile */
@media (hover: none) {
	.project-card__overlay { opacity: 1; }
}

/* ── NO-IMAGE CARD ── branded placeholder instead of a perpetual skeleton */
.project-card__photo-wrap--empty {
	background: linear-gradient(135deg, var(--pb-navy) 0%, var(--pb-navy-2) 100%);
}

.project-card__photo-wrap--empty::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff'%3E%3Crect x='14' y='55' width='14' height='50' rx='4'/%3E%3Crect x='33' y='38' width='14' height='67' rx='4'/%3E%3Crect x='52' y='28' width='14' height='77' rx='4'/%3E%3Crect x='71' y='45' width='14' height='60' rx='4'/%3E%3Crect x='90' y='60' width='14' height='45' rx='4'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center 36%;
	background-size: 112px auto;
	opacity: 0.08;
}

/* No-image cards have nothing to reveal on hover — show content fully */
.project-card--no-image .project-card__overlay {
	opacity: 1;
}

.project-card__overlay-inner {
	display: flex;
	flex-direction: column;
	gap: var(--pb-space-2);
	width: 100%;
}

/* Sector badge (pill) */
.project-card__sector-badge {
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--pb-radius-full);
	padding: var(--pb-space-1) var(--pb-space-3);
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-xs);
	font-weight: var(--pb-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: rgba(255, 255, 255, 0.90);
	align-self: flex-start;
}

/* Title */
.project-card__title {
	font-family: var(--pb-font-display);
	font-weight: var(--pb-weight-bold);
	font-size: clamp(1rem, 2vw, 1.375rem);
	line-height: var(--pb-leading-snug);
	color: var(--pb-white);
	margin: 0;
	word-break: break-word;
}

/* Meta line: client · year */
.project-card__meta {
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-sm);
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* CTA arrow */
.project-card__cta {
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-xs);
	font-weight: var(--pb-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pb-blue);
	margin-top: var(--pb-space-1);
}


/* ══════════════════════════════════════════════════════════
   EMPTY STATES
   ══════════════════════════════════════════════════════════ */

.projects-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pb-space-4);
	padding: var(--pb-space-16) var(--pb-space-6);
	text-align: center;
}

/* Respect the [hidden] attribute — the class display:flex would otherwise keep it
   visible. Only shown by projects.js when a filter yields zero visible cards. */
.projects-empty[hidden] {
	display: none;
}

.projects-empty__message {
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-lg);
	color: var(--pb-gray-700);
	margin: 0;
}

/* JS removes hidden attr when no cards are visible */
.projects-no-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pb-space-6);
	padding: var(--pb-space-16) var(--pb-space-6);
	text-align: center;
}

.projects-no-content p {
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-lg);
	color: var(--pb-gray-700);
	margin: 0;
}


/* ══════════════════════════════════════════════════════════
   CASE STUDY: HERO
   ══════════════════════════════════════════════════════════ */

.project-hero {
	position: relative;
	min-height: clamp(400px, 60vh, 620px);
	display: flex;
	align-items: flex-end;
	background-color: var(--pb-navy);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.project-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		rgba(11, 31, 58, 0.92) 0%,
		rgba(11, 31, 58, 0.65) 50%,
		rgba(11, 31, 58, 0.22) 100%
	);
	z-index: 1;
}

[dir="rtl"] .project-hero__overlay {
	background: linear-gradient(
		-105deg,
		rgba(11, 31, 58, 0.92) 0%,
		rgba(11, 31, 58, 0.65) 50%,
		rgba(11, 31, 58, 0.22) 100%
	);
}

.project-hero .container {
	position: relative;
	z-index: 2;
	padding-block-start: var(--pb-space-24);
	padding-block-end: var(--pb-space-16);
	width: 100%;
}

.project-hero__content {
	max-width: 680px;
}

/* Breadcrumb */
.project-hero__breadcrumb {
	margin-bottom: var(--pb-space-5);
}

.project-hero__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pb-space-1);
	list-style: none;
	padding: 0;
	margin: 0;
}

.project-hero__breadcrumb-link {
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-xs);
	font-weight: var(--pb-weight-medium);
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.project-hero__breadcrumb-link:hover {
	color: rgba(255, 255, 255, 0.90);
}

.project-hero__breadcrumb-link:focus-visible {
	outline: 2px solid var(--pb-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

.project-hero__breadcrumb-current {
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-xs);
	font-weight: var(--pb-weight-semibold);
	color: rgba(255, 255, 255, 0.88);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* CSS separators replace the old <li> separator elements */
.project-hero__breadcrumb-item:not(:last-child)::after {
	content: '/';
	font-size: var(--pb-text-xs);
	color: rgba(255, 255, 255, 0.38);
	padding: 0 var(--pb-space-2);
}

[dir="rtl"] .project-hero__breadcrumb-item:not(:last-child)::after {
	content: '\\';
}

/* Sector chip */
.project-hero__sector {
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: var(--pb-radius-full);
	padding: var(--pb-space-1) var(--pb-space-4);
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-xs);
	font-weight: var(--pb-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.10em;
	color: rgba(255, 255, 255, 0.88);
	margin-bottom: var(--pb-space-4);
}

/* Project title H1 */
.project-hero__title {
	font-family: var(--pb-font-display);
	font-weight: 900;
	font-size: clamp(1.875rem, 4.5vw, 4rem);
	line-height: var(--pb-leading-tight);
	color: var(--pb-white);
	max-width: 22ch;
	word-break: break-word;
	margin: 0 0 var(--pb-space-3);
}

/* Meta: client · year below title */
.project-hero__meta {
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-base);
	color: rgba(255, 255, 255, 0.70);
	margin: 0;
}


/* ══════════════════════════════════════════════════════════
   CASE STUDY: KEY-FACTS STRIP
   ══════════════════════════════════════════════════════════ */

.project-facts {
	background: var(--pb-navy-2);
	padding: var(--pb-space-10) 0;
}

@media (min-width: 1024px) {
	.project-facts { padding: var(--pb-space-12) 0; }
}

.project-facts__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pb-space-8) var(--pb-space-6);
	margin: 0;
}

@media (min-width: 768px) {
	.project-facts__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.project-facts__item {
	display: flex;
	flex-direction: column;
	gap: var(--pb-space-2);
	padding-inline-start: var(--pb-space-6);
	border-inline-start: 2px solid var(--pb-blue);
}

.project-facts__term {
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-xs);
	font-weight: var(--pb-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.10em;
	color: rgba(255, 255, 255, 0.55);
}

.project-facts__def {
	font-family: var(--pb-font-display);
	font-weight: var(--pb-weight-bold);
	font-size: var(--pb-text-lg);
	color: var(--pb-white);
	line-height: var(--pb-leading-snug);
	margin: 0;
}


/* ══════════════════════════════════════════════════════════
   CASE STUDY: OVERVIEW
   ══════════════════════════════════════════════════════════ */

.project-overview {
	background: var(--pb-white);
	padding: var(--pb-space-12) 0;
}

@media (min-width: 1024px) {
	.project-overview { padding: var(--pb-space-16) 0; }
}

.project-overview .section-title {
	margin-bottom: var(--pb-space-6);
}

.project-overview__content {
	max-width: 72ch;
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-base);
	color: var(--pb-gray-900);
	line-height: var(--pb-leading-relaxed);
}

.project-overview__content p {
	margin: 0 0 var(--pb-space-4);
}

.project-overview__content p:last-child {
	margin-bottom: 0;
}

.project-overview__content ul,
.project-overview__content ol {
	padding-left: var(--pb-space-6);
	margin: var(--pb-space-4) 0;
}

.project-overview__content li {
	margin-bottom: var(--pb-space-2);
}

.project-overview__content h3 {
	font-family: var(--pb-font-display);
	font-weight: var(--pb-weight-bold);
	font-size: var(--pb-text-xl);
	color: var(--pb-gray-900);
	margin: var(--pb-space-8) 0 var(--pb-space-3);
}

.project-overview__content a {
	color: var(--pb-blue-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Before/after scoped to project (reuses service-before-after bg from service.css) */
.project-before-after {
	background: var(--pb-gray-50);
}


/* ══════════════════════════════════════════════════════════
   CASE STUDY: GALLERY
   ══════════════════════════════════════════════════════════ */

.project-gallery {
	background: var(--pb-white);
	padding: var(--pb-space-12) 0;
}

@media (min-width: 1024px) {
	.project-gallery { padding: var(--pb-space-16) 0; }
}

.project-gallery .section-title {
	margin-bottom: var(--pb-space-8);
}

.project-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--pb-space-3);
}

@media (min-width: 640px) {
	.project-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.project-gallery__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--pb-space-4);
	}
}

.project-gallery__thumb {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--pb-radius-md);
	background: var(--pb-navy);
	aspect-ratio: 4 / 3;
	border: none;
	padding: 0;
	cursor: pointer;
}

.project-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.project-gallery__thumb img {
		transition: transform 350ms ease-out, opacity 200ms ease;
	}
	.project-gallery__thumb:hover img,
	.project-gallery__thumb:focus-visible img {
		transform: scale(1.06);
	}
}

.project-gallery__thumb:focus-visible {
	outline: 2px solid var(--pb-blue-dark);
	outline-offset: 3px;
}

/* Hover zoom icon overlay */
.project-gallery__thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(11, 31, 58, 0.42);
	opacity: 0;
	border-radius: var(--pb-radius-md);
}

@media (prefers-reduced-motion: no-preference) {
	.project-gallery__thumb::after {
		transition: opacity 200ms ease;
	}
	.project-gallery__thumb:hover::after {
		opacity: 1;
	}
}


/* ══════════════════════════════════════════════════════════
   LIGHTBOX DIALOG
   Uses <dialog> element — browser provides focus trap + Escape.
   ══════════════════════════════════════════════════════════ */

.pb-lightbox {
	position: fixed;
	inset: 0;
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
	overflow: hidden;
	z-index: 9000;
}

.pb-lightbox::backdrop {
	background: rgba(11, 31, 58, 0.96);
}

@media (prefers-reduced-motion: no-preference) {
	.pb-lightbox[open] {
		animation: lightbox-in 200ms ease-out forwards;
	}
	@keyframes lightbox-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}
}

.pb-lightbox__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	position: relative;
	padding: var(--pb-space-4);
}

.pb-lightbox__close {
	position: absolute;
	top: var(--pb-space-4);
	right: var(--pb-space-4);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--pb-radius-full);
	color: var(--pb-white);
	cursor: pointer;
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.pb-lightbox__close {
		transition: background-color var(--pb-transition-fast);
	}
}

.pb-lightbox__close:hover {
	background: rgba(255, 255, 255, 0.22);
}

.pb-lightbox__close:focus-visible {
	outline: 2px solid var(--pb-blue);
	outline-offset: 2px;
}

.pb-lightbox__close svg {
	width: 20px;
	height: 20px;
}

.pb-lightbox__img-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 90vw;
	max-height: 78vh;
	width: 100%;
}

.pb-lightbox__img {
	max-width: 100%;
	max-height: 78vh;
	object-fit: contain;
	display: block;
	border-radius: var(--pb-radius-md);
}

.pb-lightbox__nav {
	display: flex;
	align-items: center;
	gap: var(--pb-space-6);
	margin-top: var(--pb-space-4);
}

.pb-lightbox__prev,
.pb-lightbox__next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--pb-radius-full);
	color: var(--pb-white);
	cursor: pointer;
}

.pb-lightbox__prev:hover,
.pb-lightbox__next:hover {
	background: rgba(255, 255, 255, 0.22);
}

.pb-lightbox__prev:focus-visible,
.pb-lightbox__next:focus-visible {
	outline: 2px solid var(--pb-blue);
	outline-offset: 2px;
}

.pb-lightbox__prev svg,
.pb-lightbox__next svg {
	width: 20px;
	height: 20px;
}

.pb-lightbox__counter {
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-sm);
	color: rgba(255, 255, 255, 0.70);
	min-width: 56px;
	text-align: center;
}


/* ══════════════════════════════════════════════════════════
   CASE STUDY: PARTNER LOGOS
   ══════════════════════════════════════════════════════════ */

.project-logos {
	background: var(--pb-gray-50);
	padding: var(--pb-space-10) 0;
	border-top: 1px solid var(--pb-gray-200);
}

.project-logos__strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--pb-space-8) var(--pb-space-12);
}

.project-logos__item img {
	height: 64px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	/* Full colour, full opacity — stakeholder logos shown as-is. */
}

@media (min-width: 768px) {
	.project-logos__item img {
		height: 76px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.project-logos__item img {
		transition: transform var(--pb-transition-base);
	}
	.project-logos__item:hover img {
		transform: translateY(-2px);
	}
}


/* ══════════════════════════════════════════════════════════
   CASE STUDY: RELATED PROJECTS
   ══════════════════════════════════════════════════════════ */

.project-related {
	background: var(--pb-gray-50);
	padding: var(--pb-space-12) 0;
}

@media (min-width: 1024px) {
	.project-related { padding: var(--pb-space-16) 0; }
}

.project-related .section-title {
	margin-bottom: var(--pb-space-8);
}

.project-related__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pb-space-5);
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (min-width: 640px) {
	.project-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.project-related__grid { grid-template-columns: repeat(3, 1fr); }
}


/* ══════════════════════════════════════════════════════════
   CASE STUDY: CTA BLOCK (directly above footer — uses --pb-navy-2)
   ══════════════════════════════════════════════════════════ */

.project-cta {
	background: var(--pb-navy-2);
	padding: var(--pb-space-16) 0;
	text-align: center;
}

.project-cta .container {
	max-width: var(--pb-container-narrow);
}

.project-cta__overline {
	display: block;
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-xs);
	font-weight: var(--pb-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.60);
	margin-bottom: var(--pb-space-3);
}

.project-cta__title {
	font-family: var(--pb-font-display);
	font-weight: 900;
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	color: var(--pb-white);
	margin: 0 0 var(--pb-space-4);
	line-height: var(--pb-leading-snug);
}

.project-cta__sub {
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-lg);
	color: rgba(255, 255, 255, 0.72);
	line-height: var(--pb-leading-normal);
	max-width: 52ch;
	margin: 0 auto var(--pb-space-8);
}

.project-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pb-space-4);
}


/* ══════════════════════════════════════════════════════════
   TRACK RECORD TABLE
   ══════════════════════════════════════════════════════════ */

.track-record {
	padding-block: var(--pb-space-16) var(--pb-space-24);
	background-color: var(--pb-gray-50);
	border-top: 1px solid var(--pb-gray-200);
}

.track-record__header {
	margin-bottom: var(--pb-space-8);
}

.track-record__subtitle {
	color: var(--pb-gray-700);
	font-size: var(--pb-text-base);
	line-height: var(--pb-leading-relaxed);
	max-width: 58ch;
}

/* ── Scroll wrapper — enforces horizontal scroll at mobile ── */
.track-record__scroll-wrap {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--pb-gray-200);
	border-radius: var(--pb-radius-lg);
	box-shadow: var(--pb-shadow-sm);
}

/* ── Table base ── */
.track-record__table {
	width: 100%;
	min-width: 680px; /* prevents wrapping before scroll kicks in */
	border-collapse: collapse;
	font-family: var(--pb-font-body);
	font-size: var(--pb-text-sm);
	background-color: var(--pb-white);
}

/* ── Header row ── */
.track-record__table thead tr {
	background-color: var(--pb-navy);
	border-bottom: 2px solid var(--pb-blue);
}

.track-record__th {
	padding: var(--pb-space-3) var(--pb-space-6);
	text-align: left;
	font-family: var(--pb-font-mono);
	font-size: var(--pb-text-xs);
	font-weight: var(--pb-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.72);
	white-space: nowrap;
}

.track-record__th--year {
	text-align: center;
}

/* ── Body rows — subtle alternating rhythm ── */
.track-record__row:nth-child(odd) {
	background-color: var(--pb-white);
}

.track-record__row:nth-child(even) {
	background-color: var(--pb-gray-50);
}

.track-record__row:hover {
	background-color: var(--pb-gray-100);
	transition: background-color var(--pb-transition-fast);
}

.track-record__row:not(:last-child) {
	border-bottom: 1px solid var(--pb-gray-200);
}

/* ── Cells ── */
.track-record__td {
	padding: var(--pb-space-4) var(--pb-space-6);
	color: var(--pb-gray-900);
	line-height: var(--pb-leading-snug);
	vertical-align: middle;
}

.track-record__td--project {
	font-weight: var(--pb-weight-semibold);
	color: var(--pb-gray-900);
	min-width: 180px;
}

.track-record__td--client {
	color: var(--pb-gray-700);
	min-width: 160px;
}

.track-record__td--scope {
	color: var(--pb-gray-700);
	min-width: 200px;
}

.track-record__td--year {
	text-align: center;
	color: var(--pb-gray-500);
	font-family: var(--pb-font-mono);
	font-size: var(--pb-text-sm);
	white-space: nowrap;
	min-width: 60px;
}

/* ── Sector chip — reuses badge treatment ── */
.track-record__chip {
	display: inline-block;
	padding: var(--pb-space-1) var(--pb-space-3);
	border-radius: var(--pb-radius-full);
	font-size: var(--pb-text-xs);
	font-weight: var(--pb-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	background-color: var(--pb-blue-lt);
	color: var(--pb-blue-dark);
}

/* Subtle tonal variants per sector — all use the same token family */
.track-record__chip--metal-works {
	background-color: var(--pb-gray-100);
	color: var(--pb-gray-900);
}

.track-record__chip--general {
	background-color: var(--pb-navy);
	color: rgba(255, 255, 255, 0.88);
}

/* ── Responsive: scroll indicator shadow on the right edge ── */
@media (max-width: 767px) {
	.track-record {
		padding-block: var(--pb-space-12) var(--pb-space-16);
	}

	.track-record__th,
	.track-record__td {
		padding-inline: var(--pb-space-4);
	}
}