/*
 * Components: buttons, labels, section headings, media treatments, calls to
 * action, process steps, breadcrumbs, accordion, social links, and the shared
 * page furniture (hero scaffold, entry content, pagination, search, empty state).
 *
 * Cards live in cards.css. Motion lives in motion.css.
 */

/* ===========================================================================
 * Accent line
 *
 * Plain brand red hairline used above section headings. One class everywhere.
 * ======================================================================== */

.afc-accent-line {
	display: block;
	inline-size: 3.5rem;
	block-size: 3px;
	margin: 0 0 var(--afc-space-md);
	background-color: var(--afc-color-brand-red);
}

/* ===========================================================================
 * A. Buttons
 * ======================================================================== */

.afc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-block-size: var(--afc-tap-target);
	padding: 0.85em 1.6em;
	border: 2px solid transparent;
	border-radius: var(--afc-radius-xs);
	background: var(--afc-color-brand-red);
	color: var(--afc-white);
	font-family: var(--afc-font-body);
	font-size: var(--afc-text-button);
	font-weight: var(--afc-weight-bold);
	line-height: 1.2;
	letter-spacing: var(--afc-tracking-button);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--afc-duration-fast) var(--afc-ease-standard),
		border-color var(--afc-duration-fast) var(--afc-ease-standard),
		color var(--afc-duration-fast) var(--afc-ease-standard),
		transform var(--afc-duration-fast) var(--afc-ease-standard);
}

.afc-btn:hover {
	background: var(--afc-color-brand-red-dark);
	color: var(--afc-white);
}

.afc-btn:active {
	transform: translateY(1px);
}

.afc-btn .afc-icon {
	transition: transform var(--afc-duration) var(--afc-ease-standard);
}

/* The directional icon leans forward on hover. Small, and it stops for anyone
   who asked for reduced motion because the duration token collapses. */
.afc-btn:hover .afc-icon--arrow-right,
.afc-btn:hover .afc-icon--arrow-up-right {
	transform: translateX(3px);
}

.afc-btn--primary {
	background: var(--afc-color-brand-red);
	color: var(--afc-white);
}

.afc-btn--secondary {
	background: var(--afc-color-brand-navy);
	color: var(--afc-white);
}

.afc-btn--secondary:hover {
	background: var(--afc-color-brand-navy-dark);
	color: var(--afc-white);
}

.afc-btn--outline {
	background: transparent;
	border-color: var(--afc-color-brand-navy);
	color: var(--afc-color-brand-navy);
}

.afc-btn--outline:hover {
	background: var(--afc-color-brand-navy);
	color: var(--afc-white);
}

/* For placement on photography or a dark section. */
.afc-btn--light {
	background: var(--afc-white);
	color: var(--afc-color-brand-navy-dark);
}

.afc-btn--light:hover {
	background: var(--afc-color-surface-stone);
	color: var(--afc-color-brand-navy-dark);
}

.afc-btn--ghost-on-dark {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--afc-white);
}

.afc-btn--ghost-on-dark:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--afc-white);
	color: var(--afc-white);
}

/* Text link with a directional icon. Underlined, so it does not rely on colour
   alone to read as a link. */
.afc-btn--text {
	min-block-size: 0;
	padding: 0.25em 0;
	border: 0;
	background: none;
	color: var(--afc-color-brand-red);
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

.afc-btn--text:hover {
	background: none;
	color: var(--afc-color-brand-red-dark);
}

.afc-surface--dark .afc-btn--text,
.afc-surface--darker .afc-btn--text,
.afc-cta--dark .afc-btn--text {
	color: var(--afc-white);
}

.afc-btn--icon {
	inline-size: var(--afc-tap-target);
	min-inline-size: var(--afc-tap-target);
	padding: 0;
}

.afc-btn--large {
	padding: 1.05em 2em;
	font-size: 1.0625rem;
}

.afc-btn--small {
	min-block-size: 0;
	padding: 0.6em 1.1em;
	font-size: 0.875rem;
}

.afc-btn--block {
	display: flex;
	inline-size: 100%;
}

.afc-btn[disabled],
.afc-btn[aria-disabled="true"] {
	background: var(--afc-color-disabled-surface);
	border-color: transparent;
	color: var(--afc-color-disabled-text);
	cursor: not-allowed;
	pointer-events: none;
}

.afc-btn--loading {
	position: relative;
	color: transparent;
}

.afc-btn--loading::after {
	content: "";
	position: absolute;
	inline-size: 1.1em;
	block-size: 1.1em;
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: 50%;
	color: var(--afc-white);
	animation: afc-spin 700ms linear infinite;
}

@keyframes afc-spin {
	to {
		transform: rotate(360deg);
	}
}

.afc-btn__number {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.afc-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afc-space-xs);
	align-items: center;
}

/* ===========================================================================
 * B. Eyebrow labels
 * ======================================================================== */

.afc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	margin-block-end: var(--afc-space-xs);
	color: var(--afc-color-brand-red);
	font-family: var(--afc-font-body);
	font-size: var(--afc-text-eyebrow);
	font-weight: var(--afc-weight-bold);
	line-height: 1.2;
	letter-spacing: var(--afc-tracking-eyebrow);
	text-transform: uppercase;
}

.afc-eyebrow::before {
	content: "";
	inline-size: 24px;
	block-size: 2px;
	background: currentColor;
	flex: 0 0 auto;
}

.afc-eyebrow--plain::before {
	display: none;
}

.afc-eyebrow--navy {
	color: var(--afc-color-brand-navy);
}

.afc-surface--dark .afc-eyebrow,
.afc-surface--darker .afc-eyebrow,
.afc-cta--dark .afc-eyebrow,
.afc-eyebrow--on-dark {
	color: var(--afc-color-text-muted-on-dark);
}

.afc-eyebrow--center {
	justify-content: center;
}

/* ===========================================================================
 * C. Section heading and introduction
 * ======================================================================== */

.afc-section-head {
	max-inline-size: 46rem;
	margin-block-end: var(--afc-space-xl);
}

.afc-section-head__title {
	margin-block-end: var(--afc-space-xs);
}

.afc-section-head__intro {
	margin-block-end: 0;
	font-size: var(--afc-text-body-lg);
	line-height: var(--afc-leading-snug);
	color: var(--afc-color-text-muted);
	text-wrap: pretty;
}

.afc-surface--dark .afc-section-head__intro,
.afc-surface--darker .afc-section-head__intro,
.afc-section-head--on-dark .afc-section-head__intro {
	color: var(--afc-color-text-muted-on-dark);
}

.afc-section-head--center {
	margin-inline: auto;
	text-align: center;
}

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

/* Split variant: heading on the left, introduction and action on the right. */
.afc-section-head--split {
	display: grid;
	gap: var(--afc-space-md) var(--afc-space-xl);
	max-inline-size: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
	align-items: end;
}

.afc-section-head__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afc-space-xs);
	margin-block-start: var(--afc-space-sm);
}

/* ===========================================================================
 * Image treatments
 * ======================================================================== */

.afc-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--afc-color-surface-stone);
	border-radius: var(--afc-radius-sm);
	aspect-ratio: var(--afc-media-ratio, 4 / 3);
}

.afc-media img,
.afc-media__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: var(--afc-object-position, 50% 50%);
	display: block;
}

.afc-media--4-3 {
	--afc-media-ratio: 4 / 3;
}

.afc-media--3-2 {
	--afc-media-ratio: 3 / 2;
}

.afc-media--1-1 {
	--afc-media-ratio: 1 / 1;
}

.afc-media--4-5 {
	--afc-media-ratio: 4 / 5;
}

.afc-media--16-9 {
	--afc-media-ratio: 16 / 9;
}

.afc-media--pano {
	--afc-media-ratio: 21 / 9;
}

.afc-media--hero {
	--afc-media-ratio: 16 / 9;
	border-radius: 0;
}

@media (max-width: 767px) {
	/* A cinematic crop is unreadable on a narrow screen, so panoramic and hero
	   frames become taller rather than the image being scaled down. */
	.afc-media--pano {
		--afc-media-ratio: 16 / 10;
	}

	.afc-media--hero {
		--afc-media-ratio: 4 / 3;
	}
}

/* Natural geometry. Nothing is cropped and nothing is stretched. */
.afc-media--natural {
	aspect-ratio: auto;
}

.afc-media--natural img {
	block-size: auto;
	object-fit: none;
}

/* Fit the whole image inside the frame, for logos and older narrow artwork. */
.afc-media--contain {
	background: var(--afc-color-surface-subtle);
}

.afc-media--contain img {
	object-fit: contain;
}

/* Gradient scrim, so text placed over a photograph stays readable. */
.afc-media--scrim::after,
.afc-media--scrim-left::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--afc-scrim-bottom);
}

.afc-media--scrim-left::after {
	background: var(--afc-scrim-left);
}

.afc-media--scrim-full::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--afc-scrim-full);
}

/* Architectural frame: a thin offset outline, like a drawing border. */
.afc-media-frame {
	position: relative;
	display: block;
}

.afc-media-frame::before {
	content: "";
	position: absolute;
	inset-block-start: var(--afc-space-md);
	inset-inline-start: var(--afc-space-md);
	inline-size: 100%;
	block-size: 100%;
	border: 1px solid var(--afc-color-border-strong);
	pointer-events: none;
	z-index: 0;
}

.afc-media-frame > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 599px) {
	.afc-media-frame::before {
		display: none;
	}
}

/* Gate geometry: a chamfered corner drawn from the shape of a mitred gate
   frame. Unsupported browsers simply get the plain rectangle. */
@supports (clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) {
	.afc-media--chamfer {
		border-radius: 0;
		clip-path: polygon(
			var(--afc-chamfer) 0,
			100% 0,
			100% calc(100% - var(--afc-chamfer)),
			calc(100% - var(--afc-chamfer)) 100%,
			0 100%,
			0 var(--afc-chamfer)
		);
	}
}

/* Layered editorial pair. Stacks on small screens rather than overlapping. */
.afc-media-stack {
	/* How far the foreground frame hangs below the background frame. One value
	   drives both the offset and the space reserved for it, so the two cannot
	   drift apart. */
	--afc-stack-overhang: calc(var(--afc-space-xl) * 0.5);

	display: grid;
	gap: var(--afc-space-sm);
}

@media (min-width: 768px) {
	.afc-media-stack {
		grid-template-columns: repeat(12, 1fr);
		gap: 0;

		/* The offset below is a negative margin, and a negative margin adds nothing
		   to the height of the grid, so the frame would otherwise hang outside this
		   container and sit on top of whatever follows. The overhang is reserved
		   here instead. The small extra allowance is for the drop shadow, which is
		   painted outside the border box. */
		padding-block-end: calc(var(--afc-stack-overhang) + var(--afc-space-sm));
	}

	.afc-media-stack__primary {
		grid-column: 1 / span 8;
		grid-row: 1;
	}

	.afc-media-stack__secondary {
		grid-column: 7 / span 6;
		grid-row: 1;
		align-self: end;
		margin-block-end: calc(var(--afc-stack-overhang) * -1);
		border: 6px solid var(--afc-color-surface);
		box-shadow: var(--afc-shadow-md);
	}
}

/* Subtle zoom on hover, only where a card opts in. */
.afc-media--zoom img {
	transition: transform var(--afc-duration-slow) var(--afc-ease-standard);
}

.afc-zoom-parent:hover .afc-media--zoom img,
.afc-zoom-parent:focus-within .afc-media--zoom img {
	transform: scale(1.045);
}

/* Flag for artwork that is too small for its intended slot. Visible only to
   signed in editors, never to visitors, and never altering the image itself. */
.afc-media--needs-upscale {
	outline: 2px dashed transparent;
	outline-offset: -2px;
}

.afc-editor-view .afc-media--needs-upscale {
	outline-color: var(--afc-color-error);
}

.afc-editor-view .afc-media--needs-upscale::before {
	content: "Low resolution source. Manual upscale recommended.";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 2;
	padding: 0.35em 0.6em;
	background: var(--afc-color-error);
	color: var(--afc-white);
	font-size: 0.75rem;
	line-height: 1.3;
}

.afc-figure {
	margin: 0;
}

.afc-figure figcaption,
.afc-figure__caption {
	margin-block-start: var(--afc-space-2xs);
	font-size: var(--afc-text-caption);
	color: var(--afc-color-text-muted);
}

/* ===========================================================================
 * J. Process steps
 * ======================================================================== */

.afc-process {
	display: grid;
	gap: var(--afc-gap-grid);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	counter-reset: afc-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.afc-process__step {
	position: relative;
	padding-block-start: var(--afc-space-md);
	border-block-start: 2px solid var(--afc-color-border);
}

.afc-process__step::before {
	content: "";
	position: absolute;
	inset-block-start: -2px;
	inset-inline-start: 0;
	inline-size: var(--afc-line-progress, 0%);
	block-size: 2px;
	background: var(--afc-color-brand-red);
	transition: inline-size var(--afc-duration-reveal) var(--afc-ease-entrance);
}

.afc-process__step.is-revealed::before {
	--afc-line-progress: 100%;
}

.afc-process__number {
	display: block;
	margin-block-end: var(--afc-space-2xs);
	color: var(--afc-color-brand-red);
	font-family: var(--afc-font-display);
	font-size: 0.875rem;
	font-weight: var(--afc-weight-bold);
	letter-spacing: var(--afc-tracking-eyebrow);
}

.afc-process__icon {
	display: block;
	margin-block-end: var(--afc-space-xs);
	color: var(--afc-color-brand-navy);
}

.afc-process__title {
	margin-block-end: var(--afc-space-2xs);
	font-size: var(--afc-text-h4);
}

.afc-process__text {
	margin: 0;
	color: var(--afc-color-text-muted);
}

/* ===========================================================================
 * Project image lightbox
 * ======================================================================== */

body.afc-lightbox-open {
	overflow: hidden;
}

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

.afc-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--afc-z-modal, 1000);
}

.afc-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(9, 15, 34, 0.88);
}

.afc-lightbox__dialog {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: min(100%, 96rem);
	block-size: 100%;
	margin-inline: auto;
	padding: clamp(4rem, 8vw, 5.5rem) clamp(1rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
}

.afc-lightbox__figure {
	display: grid;
	gap: var(--afc-space-sm);
	inline-size: min(100%, 88rem);
	max-block-size: calc(100vh - 7rem);
	margin: 0;
}

.afc-lightbox__image {
	display: block;
	inline-size: 100%;
	max-block-size: calc(100vh - 10rem);
	margin-inline: auto;
	object-fit: contain;
}

.afc-lightbox__caption {
	margin: 0;
	color: var(--afc-white);
	font-family: var(--afc-font-display);
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
	font-weight: var(--afc-weight-bold);
	line-height: 1.35;
	text-align: center;
}

.afc-lightbox__close,
.afc-lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	background-color: rgba(9, 15, 34, 0.72);
	color: var(--afc-white);
	cursor: pointer;
}

.afc-lightbox__close {
	inset-block-start: clamp(0.75rem, 2vw, 1.25rem);
	inset-inline-end: clamp(0.75rem, 2vw, 1.25rem);
}

.afc-lightbox__nav {
	inset-block-start: 50%;
	transform: translateY(-50%);
}

.afc-lightbox__nav--prev {
	inset-inline-start: clamp(0.5rem, 2vw, 1rem);
}

.afc-lightbox__nav--next {
	inset-inline-end: clamp(0.5rem, 2vw, 1rem);
}

.afc-lightbox__close:focus-visible,
.afc-lightbox__nav:focus-visible {
	outline: 2px solid var(--afc-white);
	outline-offset: 2px;
}

.afc-lightbox__nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.afc-surface--dark .afc-process__step,
.afc-surface--darker .afc-process__step {
	border-block-start-color: var(--afc-color-border-on-dark);
}

.afc-surface--dark .afc-process__text,
.afc-surface--darker .afc-process__text {
	color: var(--afc-color-text-muted-on-dark);
}

/* ===========================================================================
 * K. Call Now sections
 * ======================================================================== */

.afc-cta {
	position: relative;
	overflow: hidden;
	background: var(--afc-color-surface-subtle);
}

.afc-cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--afc-space-md) var(--afc-space-xl);
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	padding-block: var(--afc-section-y);
}

.afc-cta__title {
	margin-block-end: var(--afc-space-2xs);
}

.afc-cta__text {
	margin-block-end: 0;
	font-size: var(--afc-text-body-lg);
	color: var(--afc-color-text-muted);
	text-wrap: pretty;
}

.afc-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afc-space-xs);
	justify-content: flex-start;
}

@media (min-width: 900px) {
	.afc-cta__actions {
		justify-content: flex-end;
	}
}

.afc-cta--dark {
	background: var(--afc-color-surface-dark);
	color: var(--afc-color-text-on-dark);
}

.afc-cta--dark .afc-cta__title {
	color: var(--afc-color-text-on-dark);
}

.afc-cta--dark .afc-cta__text {
	color: var(--afc-color-text-muted-on-dark);
}

/* A single hairline of brand colour instead of a large red panel. */
.afc-cta--dark::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: var(--afc-rule-weight);
	background: var(--afc-color-brand-red);
}

/* Image variant. The photograph is a background layer with a scrim over it, so
   the copy keeps its contrast whatever the image is. */
.afc-cta--image {
	background: var(--afc-color-surface-darker);
	color: var(--afc-color-text-on-dark);
}

.afc-cta__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.afc-cta__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: var(--afc-object-position, 50% 50%);
}

.afc-cta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--afc-scrim-full);
}

.afc-cta--image .afc-cta__title,
.afc-cta--image .afc-cta__text {
	color: var(--afc-color-text-on-dark);
}

.afc-cta--image .afc-cta__inner {
	padding-block: calc(var(--afc-section-y) * 1.15);
}

/* Compact inline variant, for placement inside an article or a sidebar. */
.afc-cta--inline {
	border: var(--afc-border-hairline);
	border-inline-start: var(--afc-rule-weight) solid var(--afc-color-brand-red);
	border-radius: var(--afc-radius-sm);
	background: var(--afc-color-surface-subtle);
}

.afc-cta--inline .afc-cta__inner {
	padding: var(--afc-space-lg);
	gap: var(--afc-space-sm);
}

.afc-cta--inline .afc-cta__title {
	font-size: var(--afc-text-h4);
}

.afc-cta--inline .afc-cta__text {
	font-size: var(--afc-text-body);
}

/* ===========================================================================
 * L. Breadcrumbs
 * ======================================================================== */

.afc-breadcrumbs-wrap {
	padding-block: var(--afc-space-sm);
	border-block-end: var(--afc-border-hairline);
	background: var(--afc-color-surface-subtle);
}

/* Inside a page hero the trail sits on the hero's own surface, so it drops the
   band it would otherwise draw for itself. */
.afc-breadcrumbs-wrap--bare {
	padding-block: 0;
	border: 0;
	background: none;
}

.afc-breadcrumbs {
	font-size: var(--afc-text-body-sm);
	color: var(--afc-color-text-muted);
}

.afc-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em 0.6em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.afc-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

.afc-breadcrumbs__item:not(:last-child)::after {
	content: "";
	inline-size: 5px;
	block-size: 5px;
	border-block-start: 1px solid var(--afc-color-border-strong);
	border-inline-end: 1px solid var(--afc-color-border-strong);
	transform: rotate(45deg);
}

.afc-breadcrumbs a,
.afc-breadcrumbs .rank-math-breadcrumb a {
	color: var(--afc-color-text-muted);
	text-decoration: none;
}

.afc-breadcrumbs a:hover,
.afc-breadcrumbs .rank-math-breadcrumb a:hover {
	color: var(--afc-color-brand-red-dark);
	text-decoration: underline;
}

.afc-breadcrumbs [aria-current="page"] {
	color: var(--afc-color-text);
	font-weight: var(--afc-weight-medium);
}

/* On a dark hero. Steel grey rather than white for the links, so the current page
   remains the brightest item in the trail and the hierarchy still reads. Both
   clear AA against navy: steel 300 gives 8.4 to 1 and white gives 13.7. */
.afc-surface--dark .afc-breadcrumbs,
.afc-surface--darker .afc-breadcrumbs,
.afc-surface--dark .afc-breadcrumbs a,
.afc-surface--darker .afc-breadcrumbs a,
.afc-surface--dark .afc-breadcrumbs .rank-math-breadcrumb a,
.afc-surface--darker .afc-breadcrumbs .rank-math-breadcrumb a {
	color: var(--afc-color-text-muted-on-dark);
}

.afc-surface--dark .afc-breadcrumbs a:hover,
.afc-surface--darker .afc-breadcrumbs a:hover,
.afc-surface--dark .afc-breadcrumbs .rank-math-breadcrumb a:hover,
.afc-surface--darker .afc-breadcrumbs .rank-math-breadcrumb a:hover {
	color: var(--afc-color-text-on-dark);
}

.afc-surface--dark .afc-breadcrumbs [aria-current="page"],
.afc-surface--darker .afc-breadcrumbs [aria-current="page"] {
	color: var(--afc-color-text-on-dark);
}

.afc-surface--dark .afc-breadcrumbs__item:not(:last-child)::after,
.afc-surface--darker .afc-breadcrumbs__item:not(:last-child)::after,
.afc-surface--dark .afc-breadcrumbs .rank-math-breadcrumb .separator,
.afc-surface--darker .afc-breadcrumbs .rank-math-breadcrumb .separator {
	border-color: var(--afc-color-border-on-dark);
	color: var(--afc-steel-600);
}

/* Rank Math emits a plain sequence of links with a separator. Give it the same
   rhythm without touching the markup it produces. */
.afc-breadcrumbs .rank-math-breadcrumb p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em 0.6em;
	margin: 0;
}

.afc-breadcrumbs .rank-math-breadcrumb .separator {
	color: var(--afc-color-border-strong);
}

/* ===========================================================================
 * M. FAQ accordion
 * ======================================================================== */

.afc-faq {
	display: grid;
	gap: var(--afc-space-2xs);
	max-inline-size: var(--afc-width-narrow);
}

.afc-faq--wide {
	max-inline-size: none;
}

.afc-faq__item {
	border: var(--afc-border-hairline);
	border-radius: var(--afc-radius-sm);
	background: var(--afc-color-surface);
}

.afc-faq__item[open] {
	border-color: var(--afc-color-border-strong);
}

.afc-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--afc-space-sm);
	min-block-size: var(--afc-tap-target);
	padding: var(--afc-space-sm) var(--afc-space-md);
	color: var(--afc-color-text-strong);
	font-family: var(--afc-font-display);
	font-size: var(--afc-text-h4);
	font-weight: var(--afc-weight-semibold);
	line-height: var(--afc-leading-snug);
	cursor: pointer;
	list-style: none;
}

/* The question is a real heading inside the summary, so it appears in the document
   outline and in a screen reader's heading list. It inherits its appearance from
   the summary rather than setting its own. */
.afc-faq__question-text {
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/* Remove the default triangle in every engine, then supply our own indicator. */
.afc-faq__question::-webkit-details-marker {
	display: none;
}

.afc-faq__question::marker {
	content: "";
}

.afc-faq__indicator {
	position: relative;
	flex: 0 0 auto;
	inline-size: 20px;
	block-size: 20px;
}

.afc-faq__indicator::before,
.afc-faq__indicator::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	inline-size: 20px;
	block-size: 2px;
	background: var(--afc-color-brand-red);
	transition: transform var(--afc-duration-fast) var(--afc-ease-standard);
}

.afc-faq__indicator::after {
	transform: rotate(90deg);
}

.afc-faq__item[open] .afc-faq__indicator::after {
	transform: rotate(0deg);
}

.afc-faq__answer {
	padding: 0 var(--afc-space-md) var(--afc-space-md);
	color: var(--afc-color-text);
}

.afc-faq__answer > :last-child {
	margin-block-end: 0;
}

.afc-faq__item[open] .afc-faq__answer {
	animation: afc-faq-open var(--afc-duration) var(--afc-ease-entrance);
}

@keyframes afc-faq-open {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.afc-surface--dark .afc-faq__item,
.afc-surface--darker .afc-faq__item {
	border-color: var(--afc-color-border-on-dark);
	background: rgba(255, 255, 255, 0.04);
}

.afc-surface--dark .afc-faq__question,
.afc-surface--darker .afc-faq__question,
.afc-surface--dark .afc-faq__answer,
.afc-surface--darker .afc-faq__answer {
	color: var(--afc-color-text-on-dark);
}

/* ===========================================================================
 * N. Social and location links
 * ======================================================================== */

.afc-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afc-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.afc-social__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-block-size: var(--afc-tap-target);
	padding: 0.5em 0.9em;
	border: var(--afc-border-hairline);
	border-radius: var(--afc-radius-xs);
	color: var(--afc-color-text);
	font-size: var(--afc-text-body-sm);
	font-weight: var(--afc-weight-medium);
	text-decoration: none;
	transition:
		border-color var(--afc-duration-fast) var(--afc-ease-standard),
		background-color var(--afc-duration-fast) var(--afc-ease-standard);
}

.afc-social__link:hover {
	border-color: var(--afc-color-brand-navy);
	background: var(--afc-color-surface-subtle);
	color: var(--afc-color-text-strong);
}

.afc-social__link .afc-icon {
	color: var(--afc-color-brand-navy);
}

.afc-surface--dark .afc-social__link,
.afc-surface--darker .afc-social__link,
.afc-footer .afc-social__link {
	border-color: var(--afc-color-border-on-dark);
	color: var(--afc-color-text-on-dark);
}

.afc-surface--dark .afc-social__link:hover,
.afc-surface--darker .afc-social__link:hover,
.afc-footer .afc-social__link:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: var(--afc-white);
	color: var(--afc-white);
}

.afc-surface--dark .afc-social__link .afc-icon,
.afc-surface--darker .afc-social__link .afc-icon,
.afc-footer .afc-social__link .afc-icon {
	color: currentColor;
}

/* Icon only presentation still carries an accessible name in the markup. */
.afc-social--compact .afc-social__link {
	inline-size: var(--afc-tap-target);
	justify-content: center;
	padding: 0;
}

.afc-icon {
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.125em;
}

.afc-icon--flip {
	transform: scaleX(-1);
}

/* ===========================================================================
 * Chips, used for city links and any future filter control
 * ======================================================================== */

.afc-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afc-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.afc-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	min-block-size: 40px;
	padding: 0.45em 0.95em;
	border: var(--afc-border-hairline);
	border-radius: var(--afc-radius-pill);
	background: var(--afc-color-surface);
	color: var(--afc-color-text);
	font-size: var(--afc-text-body-sm);
	font-weight: var(--afc-weight-medium);
	text-decoration: none;
	white-space: nowrap;
	transition:
		border-color var(--afc-duration-fast) var(--afc-ease-standard),
		background-color var(--afc-duration-fast) var(--afc-ease-standard),
		color var(--afc-duration-fast) var(--afc-ease-standard);
}

.afc-chip:hover {
	border-color: var(--afc-color-brand-navy);
	background: var(--afc-color-brand-navy);
	color: var(--afc-white);
}

.afc-chip[aria-current="page"],
.afc-chip[aria-pressed="true"],
.afc-chip--active {
	border-color: var(--afc-color-brand-navy);
	background: var(--afc-color-brand-navy);
	color: var(--afc-white);
}

.afc-surface--dark .afc-chip,
.afc-surface--darker .afc-chip {
	border-color: var(--afc-color-border-on-dark);
	background: transparent;
	color: var(--afc-color-text-on-dark);
}

.afc-surface--dark .afc-chip:hover,
.afc-surface--darker .afc-chip:hover {
	background: var(--afc-white);
	color: var(--afc-color-brand-navy-dark);
}

/* ===========================================================================
 * Core block interop
 *
 * Block patterns are built from core blocks. These few rules give a core columns
 * row the same gutter as a theme grid and keep list spacing consistent, without
 * overriding anything an editor sets in the interface.
 * ======================================================================== */

.wp-block-columns.afc-grid-columns {
	gap: var(--afc-gap-grid);
}

.afc-local-list {
	padding-inline-start: 0;
	list-style: none;
}

.afc-local-list li {
	padding-block: 0.35rem;
	border-block-end: var(--afc-border-hairline);
}

/* A core image block used as a framed media slot should fill the frame. */
.wp-block-image.afc-media {
	margin: 0;
}

.wp-block-image.afc-media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* ===========================================================================
 * Shared page furniture
 * ======================================================================== */

.afc-hero {
	position: relative;
	padding-block: var(--afc-section-y);
	background: var(--afc-color-surface-subtle);
}

.afc-hero--scaffold {
	border-block-end: var(--afc-border-hairline);
}

.afc-hero__inner {
	position: relative;
	z-index: 1;
	max-inline-size: 52rem;
}

.afc-hero__title {
	margin-block-end: var(--afc-space-sm);
	font-size: var(--afc-text-display);
	line-height: var(--afc-leading-tight);
	letter-spacing: var(--afc-tracking-display);
}

.afc-hero__lead {
	font-size: var(--afc-text-body-lg);
	line-height: var(--afc-leading-snug);
	color: var(--afc-color-text-muted);
	text-wrap: pretty;
}

.afc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afc-space-xs);
	margin-block-start: var(--afc-space-md);
}

.afc-hero__meta {
	margin-block-start: var(--afc-space-md);
	font-size: var(--afc-text-body-sm);
	color: var(--afc-color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Page hero
 *
 * The opening band of a reconstructed page. It carries the trail, an eyebrow, the
 * single H1, an optional lead, an optional call action, and an optional featured
 * image. The dark surface and its architectural treatment come from classes in the
 * template, so the same structure can open on a light section where that suits the
 * page better.
 *
 * Two columns when there is an image and the viewport can hold them, one column
 * otherwise, and the text column always comes first in the document.
 * ------------------------------------------------------------------------ */

.afc-page-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--afc-section-y-tight) var(--afc-section-y);
}

.afc-page-hero__inner {
	display: grid;
	gap: var(--afc-space-lg);
	align-items: center;
}

@media (min-width: 900px) {
	.afc-page-hero--media .afc-page-hero__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		gap: var(--afc-space-xl);
	}
}

/*
 * Immersive variant. The featured image becomes the plane rather than an ornament
 * beside the text, which is the difference between a page that opens with a picture
 * and a page that opens inside one.
 *
 * Three layers, back to front: the photograph, a directional scrim that carries the
 * text, and the content. The scrim is not a flat wash. It is heaviest at the left
 * where the words are, opens up across the middle so the subject of the photograph
 * survives, and closes again at the foot so the section can meet what follows.
 */
.afc-page-hero--immersive {
	display: grid;
	align-items: end;
	min-block-size: clamp(26rem, 56vh, 40rem);
	padding-block: calc(var(--afc-section-y) * 1.15) var(--afc-section-y);
}

.afc-page-hero--immersive .afc-page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	overflow: hidden;
}

.afc-page-hero--immersive .afc-page-hero__inner {
	position: relative;
	z-index: 2;
	grid-template-columns: minmax(0, 1fr);
}

.afc-page-hero--immersive .afc-page-hero__text {
	max-inline-size: 44rem;
}

.afc-page-hero--immersive .afc-page-hero__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 42%;
}

.afc-page-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.afc-page-hero__overlay--default.afc-page-hero__overlay--focal-protect-left {
	background-image:
		linear-gradient(96deg, rgba(9, 15, 34, 0.94) 0%, rgba(9, 15, 34, 0.86) 34%, rgba(9, 15, 34, 0.42) 66%, rgba(9, 15, 34, 0.1) 100%),
		linear-gradient(0deg, rgba(9, 15, 34, 0.7) 0%, rgba(9, 15, 34, 0.12) 34%, rgba(9, 15, 34, 0) 58%);
}

.afc-page-hero__overlay--default.afc-page-hero__overlay--standard.afc-page-hero__overlay--focal-protect-left {
	background-image:
		linear-gradient(96deg, rgba(9, 15, 34, 0.82) 0%, rgba(9, 15, 34, 0.72) 34%, rgba(9, 15, 34, 0.32) 66%, rgba(9, 15, 34, 0.08) 100%),
		linear-gradient(0deg, rgba(9, 15, 34, 0.55) 0%, rgba(9, 15, 34, 0.1) 34%, rgba(9, 15, 34, 0) 58%);
}

.afc-page-hero__overlay--default.afc-page-hero__overlay--focal-even {
	background-image: linear-gradient(180deg, rgba(9, 15, 34, 0.78) 0%, rgba(9, 15, 34, 0.9) 100%);
}

.afc-page-hero--immersive:has(.afc-page-hero__overlay--focal-even) .afc-page-hero__inner {
	justify-items: center;
	text-align: center;
}

.afc-page-hero--immersive:has(.afc-page-hero__overlay--focal-even) .afc-page-hero__text {
	max-inline-size: 38rem;
}

.afc-page-hero--immersive:has(.afc-page-hero__overlay--focal-even) .afc-page-hero__actions {
	justify-content: center;
}

@media (max-width: 767px) {
	.afc-page-hero__overlay--default.afc-page-hero__overlay--focal-protect-left {
		background-image: linear-gradient(180deg, rgba(9, 15, 34, 0.78) 0%, rgba(9, 15, 34, 0.9) 100%);
	}
}

.afc-page-hero__text {
	max-inline-size: 46rem;
}

.afc-page-hero__trail {
	margin-block-end: var(--afc-space-md);
}

.afc-page-hero__title {
	margin-block: var(--afc-space-2xs) 0;
	font-size: var(--afc-text-h1);
	line-height: var(--afc-leading-tight);
	letter-spacing: var(--afc-tracking-display);
	text-wrap: balance;
}

.afc-page-hero__lead {
	margin-block-start: var(--afc-space-sm);
	font-size: var(--afc-text-body-lg);
	line-height: var(--afc-leading-snug);
	text-wrap: pretty;
}

.afc-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--afc-space-xs) var(--afc-space-sm);
	margin-block-start: var(--afc-space-md);
}

.afc-page-hero__hours {
	margin: 0;
	font-size: var(--afc-text-body-sm);
}

.afc-page-hero__license {
	margin-block-start: var(--afc-space-xs);
	font-size: var(--afc-text-body-sm);
}

.afc-page-hero--immersive :where(.afc-page-hero__title, .afc-page-hero__lead, .afc-page-hero__license, .afc-page-hero__hours) {
	color: var(--afc-color-text-on-dark);
}

.afc-page-hero--immersive .afc-eyebrow {
	color: var(--afc-color-text-muted-on-dark);
}

.afc-page-hero--immersive .afc-page-hero__trail :where(a, span) {
	color: var(--afc-color-text-muted-on-dark);
}

.afc-page-hero__aside {
	margin: 0;
}

.afc-page-hero__image {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Page and single entries */

/* Page and single entry wrappers only. Body uses .afc-singular for other hooks
   and must not receive entry padding. */
.afc-page,
.afc-single {
	padding-block: var(--afc-section-y-tight) var(--afc-section-y);
}

/* A page that opens with a hero has already had its top spacing set by the hero,
   so the body below starts from the section rhythm rather than adding to it. */
.afc-page--hero {
	padding-block-start: var(--afc-section-y);
}

.afc-page-head,
.afc-single__head {
	margin-block-end: var(--afc-space-lg);
}

.afc-page-title {
	margin-block-end: var(--afc-space-xs);
}

.afc-page-intro {
	font-size: var(--afc-text-body-lg);
	color: var(--afc-color-text-muted);
}

.afc-page-media,
.afc-single__media {
	margin-block-end: var(--afc-space-lg);
}

.afc-page-media__image,
.afc-single__image {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--afc-radius-sm);
}

.afc-single__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afc-space-2xs);
	margin-block-end: var(--afc-space-sm);
	font-size: var(--afc-text-body-sm);
	color: var(--afc-color-text-muted);
}

.afc-single__cta {
	margin-block-start: var(--afc-space-xl);
}

.afc-page-links {
	margin-block-start: var(--afc-space-lg);
	font-size: var(--afc-text-body-sm);
}

.afc-post-nav {
	display: grid;
	gap: var(--afc-space-sm);
	margin-block-start: var(--afc-space-xl);
	padding-block-start: var(--afc-space-lg);
	border-block-start: var(--afc-border-hairline);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.afc-post-nav a {
	display: block;
	text-decoration: none;
}

.afc-post-nav__label {
	display: block;
	margin-block-end: 0.2em;
	color: var(--afc-color-text-muted);
	font-size: var(--afc-text-eyebrow);
	font-weight: var(--afc-weight-bold);
	letter-spacing: var(--afc-tracking-eyebrow);
	text-transform: uppercase;
}

.afc-post-nav__title {
	color: var(--afc-color-text-strong);
	font-family: var(--afc-font-display);
	font-size: var(--afc-text-h4);
	font-weight: var(--afc-weight-semibold);
}

.afc-post-nav a:hover .afc-post-nav__title {
	color: var(--afc-color-brand-red-dark);
	text-decoration: underline;
}

/* Pagination */

.afc-pagination,
.navigation.pagination {
	margin-block-start: var(--afc-space-xl);
}

.afc-pagination .nav-links,
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afc-space-3xs);
	align-items: center;
}

.afc-pagination .page-numbers,
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--afc-tap-target);
	min-block-size: var(--afc-tap-target);
	padding-inline: 0.6em;
	border: var(--afc-border-hairline);
	border-radius: var(--afc-radius-xs);
	color: var(--afc-color-text);
	font-weight: var(--afc-weight-medium);
	text-decoration: none;
}

.afc-pagination .page-numbers:hover,
.navigation.pagination .page-numbers:hover {
	border-color: var(--afc-color-brand-navy);
	color: var(--afc-color-text-strong);
}

.afc-pagination .page-numbers.current,
.navigation.pagination .page-numbers.current {
	background: var(--afc-color-brand-navy);
	border-color: var(--afc-color-brand-navy);
	color: var(--afc-white);
}

.afc-pagination .page-numbers.dots,
.navigation.pagination .page-numbers.dots {
	border-color: transparent;
}

/* Search form */

.afc-search__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afc-space-2xs);
	align-items: stretch;
}

.afc-search__label {
	display: block;
	margin-block-end: 0.35em;
	font-size: var(--afc-text-body-sm);
	font-weight: var(--afc-weight-medium);
}

.afc-search__input {
	flex: 1 1 14rem;
	min-block-size: var(--afc-tap-target);
	padding: 0.6em 0.9em;
	border: var(--afc-border-strong);
	border-radius: var(--afc-radius-xs);
	background: var(--afc-white);
	color: var(--afc-color-text);
	font-family: inherit;
	font-size: 1rem;
}

.afc-search__input:focus-visible {
	outline: var(--afc-focus-ring-width) solid var(--afc-color-focus);
	outline-offset: 1px;
}

/* Empty states */

.afc-empty {
	max-inline-size: var(--afc-width-narrow);
	padding: var(--afc-space-lg);
	border: 1px dashed var(--afc-color-border-strong);
	border-radius: var(--afc-radius-sm);
	background: var(--afc-color-surface-subtle);
}

.afc-empty__title {
	margin-block-end: var(--afc-space-2xs);
	font-size: var(--afc-text-h4);
}

.afc-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afc-space-xs);
	margin-block-start: var(--afc-space-sm);
}

/* 404 */

.afc-404 {
	padding-block: var(--afc-section-y);
}

.afc-404__lead {
	max-inline-size: var(--afc-width-narrow);
	font-size: var(--afc-text-body-lg);
	color: var(--afc-color-text-muted);
}

.afc-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--afc-space-xs);
	margin-block: var(--afc-space-md);
}

.afc-404__links,
.afc-404__search {
	margin-block-start: var(--afc-space-lg);
}