.fg-certifications__intro,
.fg-clients__intro {
	margin-block-end: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.fg-certifications__intro .fg-section-title,
.fg-clients__intro .fg-section-title {
	text-align: center;
	font-family: var(--title-font, "Cairo", sans-serif);
	font-weight: 800;
	font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.25rem);
	line-height: 1.15;
	color: var(--fg-color-text);
	margin: 0 auto;
}

.fg-certifications__intro,
.fg-clients__intro {
	text-align: center;
}

.fg-intro-eyebrow {
	color: var(--fg-color-accent);
	margin-block-end: 0.5rem;
}

.fg-certifications__intro .fg-section-title::after,
.fg-clients__intro .fg-section-title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 1rem auto 0;
	border-radius: 2px;
	background: var(--fg-color-primary);
}

.fg-intro-lead {
	max-width: 60ch;
	margin: 1.25rem auto 0;
	color: var(--fg-color-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.fg-cert-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}

.fg-cert-card {
	margin: 0;
}

.fg-cert-card .fg-cert-trigger {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
	background: var(--fg-color-bg);
	border: 1px solid var(--fg-color-border);
	border-radius: var(--fg-radius-lg);
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fg-cert-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--fg-color-bg-alt);
	border: 1px solid var(--fg-color-border);
	border-block-end: 1px solid var(--fg-color-border);
	overflow: hidden;
}

.fg-cert-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Override the stale .fg-cert-card img { max-height: 80px } in main.css §16
	   (old cert layout) that was capping these CPT thumbnails to an 80px strip. */
	max-height: none;
	object-fit: contain;
	padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.fg-cert-card__view {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem;
	font-weight: 600;
	color: var(--fg-color-bg);
	/* Teal action band (was gold) — keeps gold rare and the band AA-safe in the
	   always-visible touch / reduced-motion states. */
	background: var(--fg-color-accent);
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fg-cert-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: clamp(1rem, 0.75rem + 1vw, 1.4rem);
}

.fg-cert-card__code {
	font-family: var(--title-font, "Cairo", sans-serif);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--fg-color-accent);
}

.fg-cert-card__title {
	font-family: var(--title-font, "Cairo", sans-serif);
	font-weight: 700;
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.4;
	color: var(--fg-color-text);
}

.fg-cert-card__issuer {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin-block-start: 0.15rem;
	font-size: 0.9rem;
	color: var(--fg-color-muted);
}

.fg-cert-card__issuer-label {
	font-family: var(--title-font, "Cairo", sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--fg-color-accent);
}

/* Interactive PDF / link card with no uploaded scan: a teal document plate
   stands in for the missing image (never a stock photo). */
.fg-cert-card__doc {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	color: var(--fg-color-accent);
	background:
		repeating-linear-gradient(
			-45deg,
			oklch(45% 0.06 215 / 0.05) 0 10px,
			transparent 10px 20px
		),
		var(--fg-color-bg-alt);
}

.fg-cert-card__doc i {
	font-size: clamp(2.4rem, 2rem + 1.5vw, 3.2rem);
	color: var(--fg-color-primary);
}

.fg-cert-card__doc-code {
	font-family: var(--title-font, "Cairo", sans-serif);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	color: var(--fg-color-accent);
}

/* Static credential plate — no document exists, so the card is NOT a link.
   It reads as an official, sealed credential record rather than a broken
   click target. Shares the interactive card's shell for grid cohesion. */
.fg-cert-card--static {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--fg-color-bg);
	border: 1px solid var(--fg-color-border);
	border-radius: var(--fg-radius-lg);
}

.fg-cert-seal {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	aspect-ratio: 4 / 3;
	padding: 1.25rem;
	background:
		radial-gradient(
			circle at 50% 38%,
			oklch(45% 0.06 215 / 0.08),
			transparent 62%
		),
		var(--fg-color-bg-alt);
	border-block-end: 1px solid var(--fg-color-border);
}

.fg-cert-seal__badge {
	position: absolute;
	inset-block-start: 0.85rem;
	inset-inline-end: 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.6rem;
	font-family: var(--title-font, "Cairo", sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--fg-color-on-dark);
	background: var(--fg-color-accent);
	border-radius: var(--fg-radius-pill);
}

.fg-cert-seal__mark {
	font-size: clamp(2.6rem, 2.1rem + 2vw, 3.6rem);
	/* Gold as the firm's seal — an icon, never body text (AA-safe). */
	color: var(--fg-color-primary);
}

.fg-cert-seal__stamp {
	font-family: var(--title-font, "Cairo", sans-serif);
	font-weight: 800;
	font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
	letter-spacing: 0.03em;
	text-align: center;
	color: var(--fg-color-accent);
}

.fg-cert-card--static .fg-cert-card__body {
	flex: 1 1 auto;
}

.fg-cert-card .fg-cert-trigger:hover,
.fg-cert-card .fg-cert-trigger:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px oklch(20% 0.03 255 / 0.14);
	border-color: var(--fg-color-primary);
}

.fg-cert-card .fg-cert-trigger:hover .fg-cert-card__media img,
.fg-cert-card .fg-cert-trigger:focus-visible .fg-cert-card__media img {
	transform: scale(1.04);
}

.fg-cert-card .fg-cert-trigger:hover .fg-cert-card__view,
.fg-cert-card .fg-cert-trigger:focus-visible .fg-cert-card__view {
	transform: translateY(0);
}

.fg-cert-card .fg-cert-trigger:focus-visible {
	outline: 3px solid var(--fg-color-primary);
	outline-offset: 3px;
}

.fg-cert-card .fg-cert-trigger:active {
	transform: translateY(-2px);
}

.fg-client-wall {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border: 1px solid var(--fg-color-border);
	border-radius: var(--fg-radius-lg);
	overflow: hidden;
	background: var(--fg-color-bg);
}

.fg-client {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
	min-height: clamp(96px, 8vw, 150px);
	border-inline-start: 1px solid var(--fg-color-border);
	border-block-start: 1px solid var(--fg-color-border);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fg-client:nth-child(-n+2) {
	border-block-start: 0;
}

.fg-client:nth-child(2n+1) {
	border-inline-start: 0;
}

.fg-client__logo {
	max-width: 100%;
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fg-client:hover {
	background: var(--fg-color-bg-alt);
}

.fg-client:hover .fg-client__logo {
	filter: grayscale(0);
	opacity: 1;
	transform: translateY(-4px);
}

.fg-empty-state {
	padding-block: 3rem;
	color: var(--fg-color-muted);
}

.fg-mfp .mfp-close {
	inset-inline-end: 0;
	inset-inline-start: auto;
}

.fg-mfp--pdf .mfp-iframe-scaler {
	padding-top: 0;
	height: 84vh;
	overflow: visible;
}

.fg-mfp--pdf .mfp-iframe-scaler iframe {
	box-shadow: 0 0 24px oklch(10% 0.02 255 / 0.5);
	background: var(--fg-color-bg);
}

.fg-mfp .fg-mfp-bar {
	position: absolute;
	inset-inline: 0;
	inset-block-end: -2.6rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--fg-color-on-dark);
	font-size: 0.95rem;
}

.fg-mfp .fg-mfp-title {
	font-family: var(--title-font, "Cairo", sans-serif);
	font-weight: 600;
}

.fg-mfp .fg-mfp-open {
	color: var(--fg-color-on-dark);
	text-decoration: underline;
	white-space: nowrap;
}

@media (min-width: 576px) {
	.fg-client-wall {
		grid-template-columns: repeat(3, 1fr);
	}

	.fg-client:nth-child(n) {
		border-inline-start: 1px solid var(--fg-color-border);
		border-block-start: 1px solid var(--fg-color-border);
	}

	.fg-client:nth-child(-n+3) {
		border-block-start: 0;
	}

	.fg-client:nth-child(3n+1) {
		border-inline-start: 0;
	}
}

@media (min-width: 992px) {
	.fg-client-wall {
		grid-template-columns: repeat(4, 1fr);
	}

	.fg-client:nth-child(n) {
		border-inline-start: 1px solid var(--fg-color-border);
		border-block-start: 1px solid var(--fg-color-border);
	}

	.fg-client:nth-child(-n+4) {
		border-block-start: 0;
	}

	.fg-client:nth-child(4n+1) {
		border-inline-start: 0;
	}
}

/* Cap the wall at 4 columns: 8 logos form two clean rows (4+4) instead of a 5+3
   orphan row. The >=992px 4-column rules above carry to all larger screens. */

@media (hover: none) {
	.fg-cert-card__view {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fg-cert-card .fg-cert-trigger,
	.fg-cert-card__media img,
	.fg-cert-card__view,
	.fg-client,
	.fg-client__logo {
		transition: none !important;
	}

	.fg-cert-card__view {
		transform: translateY(0);
	}
}

/* ----------------------------------------------------------------------------
   Projects index — "Engineered spec cards" (fg-projects-grid widget).
   Text-forward record cards: index № + title + scope excerpt + seal arrow, with
   a slim photo band that stays grayscale at rest and wakes to colour on hover.
   "The Field Report" — evidence-forward, photo secondary, RTL-first, tokens only.
---------------------------------------------------------------------------- */

.fg-projects__intro {
	margin-block-end: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

.fg-projects__eyebrow {
	margin: 0 0 0.45rem;
	color: var(--fg-color-accent);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}

.fg-projects__count {
	display: flex;
	align-items: baseline;
	gap: 0.65rem;
	margin: 0;
}

.fg-projects__count-num {
	position: relative;
	padding-block-end: 0.3rem;
	font-family: var(--title-font, "Cairo", sans-serif);
	font-weight: 800;
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
	line-height: 1;
	color: var(--fg-color-accent);
}

/* The gold seal rule, in miniature. */
.fg-projects__count-num::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 3px;
	border-radius: 2px;
	background: var(--fg-color-primary);
}

.fg-projects__count-label {
	font-family: var(--title-font, "Cairo", sans-serif);
	font-weight: 700;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
	color: var(--fg-color-text);
}

.fg-projects__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.fg-project-card {
	margin: 0;
}

.fg-project-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--fg-color-bg);
	border: 1px solid var(--fg-color-border);
	border-radius: var(--fg-radius-lg);
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fg-project-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--fg-color-bg-alt);
}

.fg-project-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Brand plate (no featured image): contain the mark instead of cropping it.
   Scoped here because .fg-project-card__media img above outranks the utility. */
.fg-project-card__media.fg-brand-plate img {
	width: min(46%, 180px);
	height: auto;
	max-height: 70%;
	object-fit: contain;
}

.fg-project-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.55rem;
	padding: clamp(1.1rem, 0.85rem + 1vw, 1.6rem);
}

.fg-project-card__index {
	font-family: var(--title-font, "Cairo", sans-serif);
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	color: var(--fg-color-accent);
}

/* Gold tick before the catalogue number — the seal motif, sparingly. */
.fg-project-card__index::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 2px;
	margin-inline-end: 0.5rem;
	vertical-align: middle;
	border-radius: 2px;
	background: var(--fg-color-primary);
}

.fg-project-card__title {
	margin: 0;
	font-family: var(--title-font, "Cairo", sans-serif);
	font-weight: 700;
	font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
	line-height: 1.4;
}

/* Ink title at rest (scoped to beat the `.elementor a` link colour), teal on hover. */
.fg-projects .fg-project-card__link {
	color: var(--fg-color-text);
	text-decoration: none;
	transition: color 0.25s ease;
}

/* Stretched link — the whole card is the hit target, but only one focusable link. */
.fg-project-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.fg-project-card__scope {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	color: var(--fg-color-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.fg-project-card__cta {
	margin-block-start: auto;
	padding-block-start: 0.45rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--title-font, "Cairo", sans-serif);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--fg-color-accent);
}

.fg-project-card__arrow {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.fg-project-card__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	border-radius: inherit;
	padding: 2px;
	background: linear-gradient(120deg, var(--fg-color-primary), var(--fg-color-accent), var(--fg-color-primary));
	background-size: 220% 100%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.4s var(--fg-ease);
}

/* Hover / focus — earned shadow, gold seal border, animated ring. */
.fg-project-card__inner:hover,
.fg-project-card__inner:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px oklch(20% 0.03 255 / 0.14);
	border-color: var(--fg-color-primary);
}

.fg-project-card__inner:hover::before,
.fg-project-card__inner:focus-within::before {
	opacity: 1;
	animation: fg-card-ring 2.6s linear infinite;
}

.fg-project-card__inner:hover .fg-project-card__media img,
.fg-project-card__inner:focus-within .fg-project-card__media img {
	transform: scale(1.04);
}

.fg-project-card__inner:hover .fg-project-card__link,
.fg-project-card__inner:focus-within .fg-project-card__link {
	color: var(--fg-color-accent);
}

.fg-project-card__inner:hover .fg-project-card__arrow,
.fg-project-card__inner:focus-within .fg-project-card__arrow {
	transform: translateX(-5px);
}

.fg-project-card__link:focus-visible {
	outline: 3px solid var(--fg-color-primary);
	outline-offset: 3px;
	border-radius: 2px;
}

@keyframes fg-card-ring {
	to {
		background-position: 220% 0;
	}
}

/* Token-aligned pagination (only appears past one page of records). */
.fg-projects .th-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-projects .th-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.85rem;
	border: 1px solid var(--fg-color-border);
	border-radius: var(--fg-radius-sm);
	color: var(--fg-color-text);
	font-family: var(--title-font, "Cairo", sans-serif);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.fg-projects .th-pagination .page-numbers:hover {
	border-color: var(--fg-color-accent);
	color: var(--fg-color-accent);
}

.fg-projects .th-pagination .page-numbers.current {
	background: var(--fg-color-accent);
	border-color: var(--fg-color-accent);
	color: var(--fg-color-on-dark);
}

/* Touch / no-hover: photos show in colour at rest (there is no hover to reveal). */
@media (hover: none) {
	.fg-project-card__media img {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fg-project-card__inner,
	.fg-project-card__media img,
	.fg-project-card__arrow {
		transition: none !important;
	}

	.fg-project-card__inner:hover::before,
	.fg-project-card__inner:focus-within::before {
		animation: none;
	}

	.fg-project-card__inner:hover,
	.fg-project-card__inner:focus-within,
	.fg-project-card__inner:hover .fg-project-card__media img,
	.fg-project-card__inner:focus-within .fg-project-card__media img,
	.fg-project-card__inner:hover .fg-project-card__arrow,
	.fg-project-card__inner:focus-within .fg-project-card__arrow {
		transform: none;
	}
}