@layer pages {
	.haf-about-page,
	.haf-qualifications-page {
		--haf-about-section-gap: clamp(var(--haf-space-7), 8vw, var(--haf-space-9));
	}

	.haf-about-page__article,
	.haf-qualifications-page__article {
		width: min(100%, var(--haf-content-width));
		margin-inline: auto;
	}

	.haf-about-page__content,
	.haf-qualifications-page__content {
		margin-block-end: var(--haf-about-section-gap);
	}

	.haf-about-section {
		margin-block-start: var(--haf-about-section-gap);
	}

	.haf-about-section__header {
		width: min(100%, var(--haf-content-width));
		margin-block-end: var(--haf-space-5);
	}

	.haf-about-section__header p {
		margin: 0;
		color: var(--haf-color-muted);
		font-size: var(--haf-font-size-lg);
	}

	.haf-team-grid,
	.haf-credential-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--haf-space-5);
	}

	.haf-team-card,
	.haf-credential-card {
		display: flex;
		min-width: 0;
		flex-direction: column;
		overflow: hidden;
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-xl);
		background: var(--haf-color-base);
		box-shadow: var(--haf-shadow-sm);
	}

	.haf-team-card__media,
	.haf-credential-card__media {
		position: relative;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: var(--haf-color-surface-strong);
	}

	.haf-team-card__media > img,
	.haf-credential-card__media > img,
	.haf-team-card__media > .haf-media--placeholder,
	.haf-credential-card__media > .haf-media--placeholder,
	.haf-credential-card__zoom {
		width: 100%;
		height: 100%;
	}

	.haf-team-card__media > img {
		object-fit: cover;
	}

	.haf-credential-card__zoom {
		display: block;
		position: relative;
		color: inherit;
		text-decoration: none;
	}

	.haf-credential-card__zoom > img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.haf-credential-card__zoom-label {
		position: absolute;
		right: var(--haf-space-3);
		bottom: var(--haf-space-3);
		min-height: 2.75rem;
		padding: var(--haf-space-2) var(--haf-space-3);
		border-radius: var(--haf-radius-pill);
		background: rgb(17 24 32 / 84%);
		color: var(--haf-color-base);
		font-size: var(--haf-font-size-sm);
		font-weight: 750;
	}

	.haf-team-card__body,
	.haf-credential-card__body {
		display: flex;
		min-width: 0;
		flex: 1;
		flex-direction: column;
		gap: var(--haf-space-3);
		padding: var(--haf-space-5);
	}

	.haf-team-card__header h3,
	.haf-credential-card__body h3 {
		margin: 0;
		overflow-wrap: anywhere;
	}

	.haf-team-card__position,
	.haf-team-card__experience {
		margin: 0;
		color: var(--haf-color-muted);
	}

	.haf-team-card__experience strong {
		color: var(--haf-color-primary);
		font-size: var(--haf-font-size-xl);
	}

	.haf-team-card__bio,
	.haf-credential-card__description {
		min-width: 0;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	.haf-team-card__bio > :last-child,
	.haf-credential-card__description > :last-child {
		margin-block-end: 0;
	}

	.haf-team-card__list {
		padding-block-start: var(--haf-space-3);
		border-block-start: 1px solid var(--haf-color-border);
	}

	.haf-team-card__list h4 {
		margin-block-end: var(--haf-space-2);
		font-size: var(--haf-font-size-md);
	}

	.haf-team-card__list ul {
		display: flex;
		flex-wrap: wrap;
		gap: var(--haf-space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.haf-team-card__list li {
		max-width: 100%;
		padding: var(--haf-space-2) var(--haf-space-3);
		border-radius: var(--haf-radius-pill);
		background: var(--haf-color-primary-soft);
		color: var(--haf-color-ink);
		overflow-wrap: anywhere;
	}

	.haf-credential-card__body > .haf-tag {
		align-self: flex-start;
	}

	.haf-credential-card__facts {
		display: grid;
		gap: var(--haf-space-3);
		margin: 0;
	}

	.haf-credential-card__facts > div {
		display: grid;
		grid-template-columns: minmax(7.5rem, 0.8fr) minmax(0, 1.2fr);
		gap: var(--haf-space-3);
		padding-block: var(--haf-space-3);
		border-block-start: 1px solid var(--haf-color-border);
	}

	.haf-credential-card__facts dt {
		color: var(--haf-color-muted);
		font-weight: 700;
	}

	.haf-credential-card__facts dd {
		margin: 0;
		font-weight: 700;
		overflow-wrap: anywhere;
	}

	.haf-timeline {
		position: relative;
		display: grid;
		gap: var(--haf-space-5);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.haf-timeline::before {
		position: absolute;
		inset-block: var(--haf-space-4);
		inset-inline-start: 0.625rem;
		width: 0.125rem;
		background: var(--haf-color-border);
		content: '';
	}

	.haf-timeline__item {
		position: relative;
		min-width: 0;
		padding: var(--haf-space-5) var(--haf-space-5) var(--haf-space-5) calc(var(--haf-space-6) + var(--haf-space-3));
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-base);
		box-shadow: var(--haf-shadow-sm);
	}

	.haf-timeline__item::before {
		position: absolute;
		inset-block-start: var(--haf-space-5);
		inset-inline-start: 0.125rem;
		width: 1rem;
		height: 1rem;
		border: 0.25rem solid var(--haf-color-base);
		border-radius: 50%;
		background: var(--haf-color-primary);
		box-shadow: 0 0 0 1px var(--haf-color-primary);
		content: '';
	}

	.haf-timeline__date {
		margin: 0 0 var(--haf-space-2);
		color: var(--haf-color-primary);
		font-weight: 800;
	}

	.haf-timeline__item h3,
	.haf-timeline__item p:last-child {
		overflow-wrap: anywhere;
	}

	.haf-timeline__item h3 {
		margin-block-end: var(--haf-space-2);
	}

	.haf-timeline__item p:last-child {
		margin-block-end: 0;
		color: var(--haf-color-muted);
	}

	.haf-about-page__actions {
		display: flex;
		justify-content: center;
		margin-block-start: var(--haf-about-section-gap);
	}

	.haf-credential-pagination {
		margin-block-start: var(--haf-space-6);
	}

	.haf-credential-dialog {
		width: min(92vw, 64rem);
		max-width: 64rem;
		max-height: 90vh;
		padding: 0;
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-xl);
		background: var(--haf-color-base);
		color: var(--haf-color-text);
		box-shadow: var(--haf-shadow-md);
	}

	.haf-credential-dialog::backdrop {
		background: rgb(17 24 32 / 76%);
	}

	.haf-credential-dialog__inner {
		max-height: 90vh;
		overflow: auto;
		padding: var(--haf-space-5);
	}

	.haf-credential-dialog__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--haf-space-4);
		margin-block-end: var(--haf-space-4);
	}

	.haf-credential-dialog__header h2 {
		margin: 0;
		overflow-wrap: anywhere;
	}

	.haf-credential-dialog__figure {
		margin: 0;
	}

	.haf-credential-dialog__figure img {
		width: 100%;
		max-height: 70vh;
		object-fit: contain;
		border-radius: var(--haf-radius-md);
		background: var(--haf-color-surface);
	}

	.haf-credential-dialog__figure figcaption {
		margin-block-start: var(--haf-space-3);
		color: var(--haf-color-muted);
		overflow-wrap: anywhere;
	}

	@media (min-width: 40rem) {
		.haf-team-grid,
		.haf-credential-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.haf-team-grid,
		.haf-credential-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (max-width: 39.99rem) {
		.haf-credential-card__facts > div {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--haf-space-1);
		}

		.haf-credential-dialog__header {
			align-items: stretch;
			flex-direction: column;
		}

		.haf-credential-dialog__header .haf-button {
			align-self: flex-start;
		}
	}
}

@layer pages {
	.haf-about-page {
		--haf-about-section-gap: clamp(var(--haf-space-6), 5vw, var(--haf-space-8));
		padding-block: var(--haf-space-2) var(--haf-space-6);
	}

	.haf-about-page .haf-breadcrumb {
		margin-block-end: 0;
	}

	.haf-about-hero {
		display: grid;
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
		align-items: stretch;
		gap: clamp(var(--haf-space-5), 4vw, var(--haf-space-8));
		margin-block-start: 0;
	}

	.haf-about-hero__content {
		align-self: center;
		padding-block: var(--haf-space-5);
	}

	.haf-about-hero__content h1 {
		margin-block-end: var(--haf-space-3);
	}

	.haf-about-hero__accent {
		display: block;
		width: 2.5rem;
		height: 0.25rem;
		margin-block-end: var(--haf-space-5);
		border-radius: var(--haf-radius-pill);
		background: var(--haf-color-accent);
	}

	.haf-about-hero__copy {
		color: var(--haf-color-text);
	}

	.haf-about-hero__copy h2 {
		margin-block-end: var(--haf-space-4);
		font-size: clamp(var(--haf-font-size-xl), 2.3vw, var(--haf-font-size-2xl));
	}

	.haf-about-hero__copy > :last-child {
		margin-block-end: 0;
	}

	.haf-about-hero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--haf-space-4);
		margin-block-start: var(--haf-space-5);
	}

	.haf-about-hero__media {
		height: 22rem;
		min-height: 0;
		margin: 0 !important;
		overflow: hidden;
		border-radius: var(--haf-radius-md);
		background: var(--haf-color-surface-strong);
	}

	.haf-about-hero__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.haf-about-page .haf-about-section {
		margin-block-start: var(--haf-space-5);
	}

	.haf-about-page .haf-about-section > h2 {
		margin-block-end: var(--haf-space-5);
		font-size: var(--haf-font-size-xl);
	}

	.haf-about-page .haf-about-timeline {
		position: relative;
		overflow: hidden;
		padding: clamp(var(--haf-space-5), 4vw, var(--haf-space-8));
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-xl);
		background: linear-gradient(135deg, var(--haf-color-primary-soft), var(--haf-color-base) 70%);
	}

	.haf-about-page .haf-about-timeline > h2 {
		margin-block-end: var(--haf-space-2);
		font-size: clamp(var(--haf-font-size-xl), 3vw, var(--haf-font-size-2xl));
	}

	.haf-about-timeline__intro {
		width: min(100%, 44rem);
		margin: 0 0 var(--haf-space-6);
		color: var(--haf-color-muted);
	}

	.haf-about-page .haf-timeline {
		width: min(100%, 54rem);
		gap: 0;
	}

	.haf-about-page .haf-timeline::before {
		inset-block: 1.3rem 2.75rem;
		inset-inline-start: 6.75rem;
		background: var(--haf-color-primary);
	}

	.haf-about-page .haf-timeline__item {
		display: grid;
		grid-template-columns: 5.5rem minmax(0, 1fr);
		gap: 2.5rem;
		min-height: 6.25rem;
		padding: 0 0 var(--haf-space-5);
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.haf-about-page .haf-timeline__item::before {
		inset-block-start: 1.15rem;
		inset-inline-start: 6.3rem;
		width: 1rem;
		height: 1rem;
		border: 0.25rem solid var(--haf-color-base);
		box-shadow: 0 0 0 2px var(--haf-color-primary);
	}

	.haf-about-page .haf-timeline__item:last-child {
		padding-block-end: 0;
	}

	.haf-about-page .haf-timeline__item:last-child::before {
		background: var(--haf-color-accent);
	}

	.haf-about-page .haf-timeline__date {
		align-self: start;
		margin: var(--haf-space-3) 0 0;
		font-size: clamp(var(--haf-font-size-lg), 2vw, var(--haf-font-size-xl));
		line-height: 1;
		letter-spacing: -0.03em;
	}

	.haf-about-page .haf-timeline__item > div {
		min-width: 0;
		padding: var(--haf-space-4) var(--haf-space-5);
		border: 1px solid var(--haf-color-border);
		border-radius: var(--haf-radius-lg);
		background: var(--haf-color-base);
		box-shadow: var(--haf-shadow-sm);
		transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
	}

	.haf-about-page .haf-timeline__item:hover > div {
		border-color: var(--haf-color-primary);
		box-shadow: var(--haf-shadow-md);
		transform: translateY(-0.125rem);
	}

	.haf-about-page .haf-timeline__item h3 {
		margin: 0 0 var(--haf-space-1);
		font-size: var(--haf-font-size-md);
	}

	.haf-about-page .haf-timeline__item p:last-child {
		margin: 0;
		font-size: var(--haf-font-size-sm);
	}

	.haf-about-page .haf-timeline--single {
		width: min(100%, 44rem);
	}

	.haf-about-page .haf-timeline--single::before,
	.haf-about-page .haf-timeline--single .haf-timeline__item::before {
		display: none;
	}

	.haf-about-page .haf-timeline--single .haf-timeline__item {
		grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
		min-height: 0;
		gap: var(--haf-space-4);
		padding: 0;
	}

	.haf-about-animations-ready .haf-about-timeline .haf-timeline::before {
		transform: scaleY(0);
		transform-origin: top;
		transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.haf-about-animations-ready .haf-about-timeline .haf-timeline__item {
		opacity: 0;
		transform: translateY(1rem);
		transition: opacity 520ms ease var(--haf-timeline-delay, 0ms), transform 520ms cubic-bezier(0.22, 1, 0.36, 1) var(--haf-timeline-delay, 0ms);
	}

	.haf-about-animations-ready .haf-about-timeline.is-visible .haf-timeline::before {
		transform: scaleY(1);
	}

	.haf-about-animations-ready .haf-about-timeline.is-visible .haf-timeline__item {
		opacity: 1;
		transform: translateY(0);
	}

	@media (max-width: 63.99rem) {
		.haf-about-hero {
			grid-template-columns: minmax(0, 1fr);
		}

		.haf-about-hero__media {
			height: auto;
			aspect-ratio: 16 / 9;
		}
	}

	@media (max-width: 39.99rem) {
		.haf-about-hero__content {
			padding-block-end: 0;
		}

		.haf-about-hero__actions {
			display: grid;
			grid-template-columns: minmax(0, 1fr);
		}

		.haf-about-hero__actions .haf-button {
			width: 100%;
		}

		.haf-about-page .haf-timeline__item {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--haf-space-2);
			padding-inline-start: var(--haf-space-6);
		}

		.haf-about-page .haf-timeline::before {
			inset-inline-start: 0.45rem;
		}

		.haf-about-page .haf-timeline__item::before {
			inset-block-start: 0.35rem;
			inset-inline-start: 0;
		}

		.haf-about-page .haf-timeline__date {
			margin-block-start: 0;
		}

		.haf-about-page .haf-timeline__item > div {
			padding: var(--haf-space-4);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.haf-about-animations-ready .haf-about-timeline .haf-timeline::before,
		.haf-about-animations-ready .haf-about-timeline .haf-timeline__item,
		.haf-about-page .haf-timeline__item > div {
			transition: none;
		}
	}
}