/**
 * Reusable UI components.
 */

/* ------------------------------------------------------------- buttons */

/*
 * One button, four variants: primary, secondary, outline and text. Every
 * variant looks and moves the same way wherever it appears; the only thing a
 * context may change is which colours it draws with, and it does that through
 * the custom properties below, never by overriding `background` or `color`.
 *
 * That rule is the fix for the hover contrast failures. The filled buttons
 * paint their colour on a sliding layer (::before) that sits above the
 * button's own background. The header and dark-section overrides used to set
 * `background: white; color: navy` on hover, but the white was hidden under
 * the sliding layer, which had moved to its navy end, so "Talk to us" became
 * navy text on navy. Here the label colour is fixed per variant, and every
 * colour the layer passes through is checked against it:
 *
 *   filled, white label   navy 18:1, deep violet 12:1, violet 7.1:1,
 *                         berry 6.8:1, crimson 5.3:1: never below 4.5:1 at
 *                         any point of the slide
 *   outline, light ground navy label on white or on the pale spectrum tint,
 *                         15:1 or better throughout the wipe
 *   outline, dark ground  white label on navy under a 16% white veil, 12.5:1
 */
.a8-btn {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --a8-space-2 );
	overflow: hidden;
	padding: var( --a8-btn-pad );
	border: 2px solid transparent;
	border-radius: var( --a8-radius );
	font-size: var( --a8-btn-size );
	font-weight: var( --a8-weight-bold );
	letter-spacing: var( --a8-btn-tracking );
	line-height: var( --a8-btn-lh );
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition:
		color var( --a8-t-edge ) var( --a8-ease-card ),
		border-color var( --a8-t-edge ) var( --a8-ease-card ),
		box-shadow var( --a8-t-edge ) var( --a8-ease-card ),
		transform var( --a8-t-edge ) var( --a8-ease-card );
}

/* An icon or arrow inside a button sits on the label's centre line. */
.a8-btn svg {
	flex: none;
	width: 1.2em;
	height: 1.2em;
	fill: currentColor;
}

/* --- filled: primary and secondary --------------------------------------- */

/*
 * The wash is a gradient twice the button's width that slides across on
 * hover, so the colour moves while the label stays still.
 */
.a8-btn--primary,
.a8-btn--secondary {
	/* Light ground: primary runs navy to crimson, secondary crimson to navy. */
	--a8-btn-wash: linear-gradient( 100deg, var( --a8-brand ) 0%, #3A1580 32%, var( --a8-violet ) 58%, var( --a8-accent ) 100% );
	--a8-btn-edge-hover: transparent;
	background: var( --a8-brand );
	color: var( --a8-white );
}

.a8-btn--secondary {
	--a8-btn-wash: linear-gradient( 100deg, var( --a8-accent ) 0%, var( --a8-violet ) 42%, #3A1580 68%, var( --a8-brand ) 100% );
	background: var( --a8-accent );
}

.a8-btn--primary::before,
.a8-btn--secondary::before {
	content: '';
	position: absolute;
	inset: -2px;
	z-index: -1;
	background: var( --a8-btn-wash );
	background-size: 220% 100%;
	background-position: 0% 0;
	transition: background-position var( --a8-t-edge ) var( --a8-ease-card );
}

.a8-btn--primary:hover::before,
.a8-btn--primary:focus-visible::before,
.a8-btn--secondary:hover::before,
.a8-btn--secondary:focus-visible::before {
	background-position: 100% 0;
}

.a8-btn--primary:hover,
.a8-btn--primary:focus-visible,
.a8-btn--secondary:hover,
.a8-btn--secondary:focus-visible {
	border-color: var( --a8-btn-edge-hover );
	color: var( --a8-white );
}

/* --- outline ------------------------------------------------------------- */

/*
 * Fills from the left with a pale run of the brand colours. The label keeps
 * its colour the whole way: it used to flip to white as the fill arrived, and
 * because the colour change finished before the wipe did, the right-hand half
 * of the label was white on white for most of the transition.
 */
.a8-btn--outline {
	--a8-btn-fill: linear-gradient( 100deg, var( --a8-tint ) 0%, #F1E9FF 55%, var( --a8-tint-pink ) 100% );
	background: transparent;
	border-color: currentColor;
	color: var( --a8-brand );
}

.a8-btn--outline::before {
	content: '';
	position: absolute;
	inset: -2px;
	z-index: -1;
	background: var( --a8-btn-fill );
	clip-path: inset( 0 100% 0 0 );
	transition: clip-path var( --a8-t-edge ) var( --a8-ease-card );
}

.a8-btn--outline:hover::before,
.a8-btn--outline:focus-visible::before {
	clip-path: inset( 0 0 0 0 );
}

.a8-btn--outline:hover,
.a8-btn--outline:focus-visible {
	color: var( --a8-brand );
}

/* --- the shared lift and press -------------------------------------------- */

/* `:focus-visible`, not `:focus`: a mouse click used to leave the button
   lifted until something else was clicked. */
.a8-btn--primary:hover,
.a8-btn--primary:focus-visible,
.a8-btn--secondary:hover,
.a8-btn--secondary:focus-visible,
.a8-btn--outline:hover,
.a8-btn--outline:focus-visible {
	transform: translateY( -2px );
	box-shadow: var( --a8-lift );
}

.a8-btn--primary:active,
.a8-btn--secondary:active,
.a8-btn--outline:active {
	transform: translateY( 0 ) scale( .98 );
	box-shadow: var( --a8-shadow-sm );
	transition-duration: 90ms;
}

/* --- text ---------------------------------------------------------------- */

/* The text button grows a spectrum underline rather than a fill. Navy to
   pink ink is 18:1 to 6.2:1 on white, so every step between reads. */
.a8-btn--text {
	padding-inline: 0;
	overflow: visible;
	background: none;
	border-color: transparent;
	color: var( --a8-brand );
}

.a8-btn--text::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 2px;
	left: 0;
	height: 2px;
	background: var( --a8-spectrum );
	transform: scaleX( .32 );
	transform-origin: left;
	transition: transform var( --a8-t-edge ) var( --a8-ease-card );
}

.a8-btn--text:hover,
.a8-btn--text:focus-visible {
	color: var( --a8-pink-ink );
}

.a8-btn--text:hover::after,
.a8-btn--text:focus-visible::after {
	transform: scaleX( 1 );
}

.a8-btn--text:active {
	opacity: .8;
}

/*
 * Motion off: the colour change still has to happen, because it is the only
 * hover affordance some of these carry. Only the travel is dropped.
 */
@media ( prefers-reduced-motion: reduce ) {
	.a8-btn--primary:hover,
	.a8-btn--primary:focus-visible,
	.a8-btn--secondary:hover,
	.a8-btn--secondary:focus-visible,
	.a8-btn--outline:hover,
	.a8-btn--outline:focus-visible,
	.a8-btn:active {
		transform: none;
	}
}

/*
 * Dark grounds.
 *
 * Every navy panel on the site is listed here once: the dark hero, the trust
 * band, any section set to the brand colour, the map card, the two event page
 * heads and the footer. The mobile menu panel joins them in layout.css. On
 * navy a navy button disappears, so both filled variants run crimson to
 * violet instead: white on either end, and violet is still 2.6:1 against the
 * navy, with a white edge arriving on hover so the shape never dissolves into
 * the panel. Only the custom properties change; the rules above do the rest.
 */
:is( .a8-hero:not( .a8-hero--light ), .a8-band, .a8-map__card, .a8-section--purple, .a8-pagehead--events, .a8-pagehead--event, .a8-site-footer ) :is( .a8-btn--primary, .a8-btn--secondary ) {
	--a8-btn-wash: linear-gradient( 100deg, var( --a8-accent ) 0%, #B0115F 45%, var( --a8-violet ) 100% );
	--a8-btn-edge-hover: rgba( 255, 255, 255, .85 );
	background: var( --a8-accent );
}

/* White edge and label; the fill is a veil of white, not a colour swap. */
:is( .a8-hero:not( .a8-hero--light ), .a8-band, .a8-map__card, .a8-section--purple, .a8-pagehead--events, .a8-pagehead--event, .a8-site-footer ) .a8-btn--outline,
:is( .a8-hero:not( .a8-hero--light ), .a8-band, .a8-map__card, .a8-section--purple, .a8-pagehead--events, .a8-pagehead--event, .a8-site-footer ) .a8-btn--outline:is( :hover, :focus-visible ) {
	--a8-btn-fill: rgba( 255, 255, 255, .16 );
	color: var( --a8-white );
}

/* Pink light is 9.2:1 on the brand navy and white is 18:1; navy would be 1:1. */
:is( .a8-hero:not( .a8-hero--light ), .a8-band, .a8-map__card, .a8-section--purple, .a8-pagehead--events, .a8-pagehead--event, .a8-site-footer ) .a8-btn--text {
	color: var( --a8-pink-light );
}

:is( .a8-hero:not( .a8-hero--light ), .a8-band, .a8-map__card, .a8-section--purple, .a8-pagehead--events, .a8-pagehead--event, .a8-site-footer ) .a8-btn--text:is( :hover, :focus-visible ) {
	color: var( --a8-white );
}

/* The crimson focus ring is 2.5:1 on navy; white is 18:1. */
:is( .a8-hero:not( .a8-hero--light ), .a8-band, .a8-map__card, .a8-section--purple, .a8-pagehead--events, .a8-pagehead--event, .a8-site-footer ) .a8-btn:focus-visible {
	outline-color: var( --a8-white );
}

/* ------------------------------------------------------------- eyebrow */

.a8-eyebrow {
	display: block;
	margin-bottom: var( --a8-space-3 );
	color: var( --a8-accent );
	font-size: var( --a8-eyebrow );
	font-weight: var( --a8-weight-bold );
	line-height: var( --a8-eyebrow-lh );
	letter-spacing: .02em;
	text-transform: uppercase;
}

.a8-eyebrow--dark {
	color: var( --a8-brand );
}

/* Crimson is 2.9:1 on the brand navy; the light pink is 9.2:1. */
.a8-hero:not( .a8-hero--light ) .a8-eyebrow,
.a8-band .a8-eyebrow,
.a8-map__card .a8-eyebrow,
.a8-section--purple .a8-eyebrow,
.a8-pagehead--events .a8-eyebrow,
.a8-pagehead--event .a8-eyebrow,
.a8-site-footer .a8-eyebrow {
	color: var( --a8-pink-light );
}

/* ------------------------------------------------- section heading pair */

.a8-heading {
	max-width: 46ch;
}

.a8-heading--center {
	margin-inline: auto;
	text-align: center;
}

.a8-heading__title {
	margin-bottom: var( --a8-space-4 );
}

.a8-heading__body {
	color: inherit;
	font-size: var( --a8-body );
}

/* --------------------------------------------------------------- cards */

.a8-grid {
	display: grid;
	gap: var( --a8-space-5 );
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
}

.a8-grid--2 {
	grid-template-columns: repeat( 2, 1fr );
}

.a8-grid--3 {
	grid-template-columns: repeat( 3, 1fr );
}

.a8-grid--4 {
	grid-template-columns: repeat( 4, 1fr );
}

@media ( max-width: 1024px ) {
	.a8-grid--3,
	.a8-grid--4 {
		grid-template-columns: repeat( 2, 1fr );
	}

	/* Three plain cards in two columns left the third alone beside a hole; it
	   takes the row instead. A photo card keeps its column, or its picture
	   would be twice the height of its neighbours'. */
	.a8-grid--3 > .a8-card:not( .a8-card--photo ):last-child:nth-child( odd ) {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 620px ) {
	.a8-grid--3 > .a8-card:last-child:nth-child( odd ) {
		grid-column: auto;
	}
}

@media ( max-width: 620px ) {
	.a8-grid--2,
	.a8-grid--3,
	.a8-grid--4 {
		grid-template-columns: 1fr;
	}
}

/*
 * The card system: one card, two tiers.
 *
 *   .a8-card               every card on the site. Plain white ground, a
 *                          tinted edge, a soft organic shape in the top
 *                          corner, a rounded-square icon tile.
 *   .a8-card--feature      a card that goes somewhere. Adds a small category
 *                          label, a bigger title, an optional photograph
 *                          across the top (.a8-card--photo) and the
 *                          label-and-round-arrow call to action.
 *
 * Each card takes one of the three logo hues (blue, violet, pink) in turn
 * across its grid. The hue drives the icon tile, the label, the arrow, the
 * corner shape and the edge, and nothing else: headings and copy stay navy
 * and grey, so a coloured card is never harder to read than a plain one.
 * Every text use of a hue is 6:1 or better on white and on its own tint.
 *
 * Hover, the spectrum edge and the lift are in "The card design language" at
 * the end of sections.css, shared with the team, event and quote cards.
 */
:is( .a8-card, .a8-quote ) {
	/* Blue: the logo azure, darkened for text. 6.9:1 on white. */
	--a8-tone: var( --a8-brand-ink );
	--a8-tone-soft: var( --a8-tint );
	--a8-tone-edge: var( --a8-border-card );
	--a8-tone-line: rgba( 0, 147, 255, .55 );
	--a8-tone-halo: rgba( 0, 147, 255, .07 );
}

/* Violet, from the middle of the ring. 7.1:1 on white. */
:is( .a8-card, .a8-quote ):nth-child( 3n + 2 ) {
	--a8-tone: var( --a8-violet );
	--a8-tone-soft: #F1E9FF;
	--a8-tone-edge: #DCCDF3;
	--a8-tone-line: rgba( 123, 44, 191, .45 );
	--a8-tone-halo: rgba( 123, 44, 191, .06 );
}

/* Pink ink, the text-safe end of the logo magenta. 6.2:1 on white. */
:is( .a8-card, .a8-quote ):nth-child( 3n ) {
	--a8-tone: var( --a8-pink-ink );
	--a8-tone-soft: var( --a8-tint-pink );
	--a8-tone-edge: #F4CADA;
	--a8-tone-line: rgba( 242, 2, 93, .40 );
	--a8-tone-halo: rgba( 242, 2, 93, .06 );
}

.a8-card {
	display: flex;
	flex-direction: column;
	gap: var( --a8-space-4 );
	/* The corner shape and the photo are clipped by the card's own curve. */
	overflow: hidden;
	isolation: isolate;
	padding: var( --a8-card-pad );
	height: 100%;
	background: var( --a8-white );
	border: var( --a8-card-border-w ) solid var( --a8-tone-edge );
	border-radius: var( --a8-radius-lg );
	box-shadow: var( --a8-card-rest );
}

/*
 * The organic shape: a disc of the card's tint in the top corner, ringed by a
 * fainter halo. Behind everything in the card (the card is its own stacking
 * context) and clear of the copy at rest; on hover it grows a little way in.
 */
:is( .a8-card, .a8-quote )::before {
	content: '';
	position: absolute;
	top: -76px;
	right: -76px;
	z-index: -1;
	width: 184px;
	aspect-ratio: 1;
	background: var( --a8-tone-soft );
	border-radius: 50%;
	box-shadow: 0 0 0 18px var( --a8-tone-halo );
	opacity: .72;
	transform-origin: 100% 0;
	transition:
		transform var( --a8-t-image ) var( --a8-ease-card ),
		opacity var( --a8-t-image ) var( --a8-ease-card );
}

:is( .a8-card, .a8-quote ):is( :hover, :focus-within )::before {
	opacity: 1;
	transform: scale( 1.14 );
}

/* A rounded square, not a disc: the same corner language as the card. */
.a8-card__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 56px;
	height: 56px;
	/* The gap alone puts the tile too close to the title under it. */
	margin-bottom: var( --a8-space-1 );
	background: var( --a8-tone-soft );
	border-radius: 16px;
	color: var( --a8-tone );
}

.a8-card__icon svg {
	width: 26px;
	height: 26px;
}

/* Small capitals in the card's hue, directly over the title. */
.a8-card__label {
	display: block;
	margin-bottom: calc( var( --a8-space-2 ) * -1 );
	color: var( --a8-tone );
	font-size: 12px;
	font-weight: var( --a8-weight-bold );
	line-height: 1.4;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.a8-card__title {
	margin: 0;
	font-size: var( --a8-h5 );
}

.a8-card__title a {
	color: inherit;
	text-decoration: none;
}

.a8-card__title a:hover,
.a8-card__title a:focus-visible {
	color: var( --a8-brand );
}

.a8-card__body {
	margin: 0;
	color: var( --a8-text-muted );
	font-size: var( --a8-small );
}

/* Card that is entirely a link: stretch the anchor over the whole card. */
.a8-card--linked {
	position: relative;
}

/*
 * Raised above the card's content. The call to action and the service lines
 * come after the title in the markup, and anything positioned among them
 * would otherwise paint over the overlay and swallow the click.
 */
.a8-card--linked .a8-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

/* --- the feature card ----------------------------------------------------- */

/* A larger shape: this card has more room and less copy to protect. */
.a8-card--feature::before {
	top: -104px;
	right: -104px;
	width: 248px;
	box-shadow: 0 0 0 22px var( --a8-tone-halo );
}

.a8-card--feature .a8-card__title {
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -.5px;
}

.a8-card--feature .a8-card__body {
	font-size: 15px;
}

/*
 * The call to action: the label, then a disc in the card's hue with the arrow
 * in white (6.2:1 or better on every hue). At the foot of the card whatever
 * the copy above it runs to, so a row of cards lines its arrows up.
 */
.a8-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var( --a8-space-3 );
	margin-top: auto;
	padding-top: var( --a8-space-2 );
	color: var( --a8-tone );
	font-size: 15px;
	font-weight: var( --a8-weight-bold );
	line-height: 1.3;
	letter-spacing: -.1px;
}

.a8-card__arrow {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	background: var( --a8-tone );
	border-radius: 50%;
	box-shadow: 0 8px 18px -8px var( --a8-tone-line );
	color: var( --a8-white );
	transition:
		transform var( --a8-t-edge ) var( --a8-ease-card ),
		box-shadow var( --a8-t-edge ) var( --a8-ease-card );
}

.a8-card__arrow svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	transition: transform var( --a8-t-edge ) var( --a8-ease-card );
}

.a8-card--linked:is( :hover, :focus-within ) .a8-card__arrow {
	box-shadow: 0 12px 24px -8px var( --a8-tone-line );
	transform: translateX( 4px );
}

.a8-card--linked:is( :hover, :focus-within ) .a8-card__arrow svg {
	transform: translateX( 2px );
}

/* --- the photograph -------------------------------------------------------
 *
 * Across the top of the card, edge to edge, 2.2:1. A wide band rather than the
 * tall side panel of a brochure layout, because these are photographs of
 * people: a narrow crop of a group cuts them in half, a wide one keeps them.
 * Its lower edge sweeps up to the right, and a tinted copy of the same shape
 * shows beneath it as a second, offset curve.
 */
.a8-card__art {
	--a8-art-curve: 0 0 100% 0 / 0 0 24% 0;
	position: relative;
	display: block;
	flex: none;
	/* 2.2:1 keeps a row of cards from running tall without cropping heads. */
	aspect-ratio: 11 / 5;
	margin: calc( var( --a8-card-pad ) * -1 ) calc( var( --a8-card-pad ) * -1 ) 0;
}

.a8-card__art::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var( --a8-tone-soft );
	border-radius: var( --a8-art-curve );
	transform: translateY( 10px );
	transition: transform var( --a8-t-image ) var( --a8-ease-card );
}

.a8-card__art-frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var( --a8-tone-soft );
	border-radius: var( --a8-art-curve );
}

.a8-card__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Faces sit in the upper half of most frames. */
	object-position: 50% 38%;
	transition: transform var( --a8-t-image ) cubic-bezier( .2, .6, .2, 1 );
}

/* The corner shape moves to the foot of a photo card; the top is the photo's. */
.a8-card--photo::before {
	top: auto;
	bottom: -120px;
	transform-origin: 100% 100%;
}

/* The icon tile sits on the photograph's edge, ringed in white. */
.a8-card--photo .a8-card__icon {
	position: relative;
	z-index: 1;
	margin-top: -44px;
	box-shadow: 0 0 0 5px var( --a8-white ), var( --a8-shadow-sm );
}

.a8-card--photo:is( :hover, :focus-within ) .a8-card__art img {
	transform: scale( 1.06 );
}

.a8-card--photo:is( :hover, :focus-within ) .a8-card__art::before {
	transform: translateY( 16px );
}

@media ( prefers-reduced-motion: reduce ) {
	:is( .a8-card, .a8-quote ):is( :hover, :focus-within )::before,
	.a8-card--linked:is( :hover, :focus-within ) .a8-card__arrow,
	.a8-card--linked:is( :hover, :focus-within ) .a8-card__arrow svg,
	.a8-card--photo:is( :hover, :focus-within ) .a8-card__art img {
		transform: none;
	}

	.a8-card--photo:is( :hover, :focus-within ) .a8-card__art::before {
		transform: translateY( 10px );
	}
}

/* -------------------------------------------------------- media object */

/* Reference proportions: 578px of copy, a 137px gutter, then a 482px picture. */
.a8-media-text {
	display: grid;
	row-gap: var( --a8-space-6 );
	column-gap: 11.4%;
	/* Picture first in the markup, so the narrow column leads. */
	grid-template-columns: minmax( 0, 482fr ) minmax( 0, 578fr );
	align-items: center;
}

/* Flipped rows put the copy first, so the wide column leads instead. */
.a8-media-text--flip {
	grid-template-columns: minmax( 0, 578fr ) minmax( 0, 482fr );
}

.a8-media-text .a8-heading__title {
	/* 40px in the reference; it has to come down on a phone. */
	font-size: clamp( 28px, 4vw, 40px );
	line-height: 1;
	letter-spacing: -2px;
}

.a8-media-text--flip .a8-media-text__media {
	order: 2;
}

.a8-media-text__img {
	width: 100%;
	border-radius: var( --a8-radius-panel );
	object-fit: cover;
}

@media ( max-width: 860px ) {
	.a8-media-text,
	.a8-media-text--flip {
		grid-template-columns: 1fr;
		gap: var( --a8-space-6 );
	}

	.a8-media-text--flip .a8-media-text__media {
		order: 0;
	}
}

/* --------------------------------------------------------------- stats */

.a8-stat__value {
	display: block;
	color: var( --a8-accent );
	font-size: clamp( 40px, 6vw, 64px );
	font-weight: var( --a8-weight-bold );
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

.a8-stat__label {
	display: block;
	margin-top: var( --a8-space-2 );
	font-size: var( --a8-small );
	line-height: 1.4;
}

/* ----------------------------------------------------------- accordion */

.a8-accordion {
	border-top: 1px solid var( --a8-border );
}

/* The standfirst above a list of questions ran straight into its top rule. */
.a8-heading + .a8-accordion {
	margin-top: var( --a8-space-6 );
}

.a8-accordion__item {
	border-bottom: 1px solid var( --a8-border );
}

.a8-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --a8-space-4 );
	width: 100%;
	padding: var( --a8-space-5 ) 0;
	background: none;
	border: 0;
	color: var( --a8-brand );
	font-size: var( --a8-h5 );
	font-weight: var( --a8-weight-bold );
	line-height: 1.35;
	text-align: left;
}

.a8-accordion__icon {
	flex: none;
	position: relative;
	width: 20px;
	height: 20px;
}

.a8-accordion__icon::before,
.a8-accordion__icon::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: currentColor;
	transition: transform var( --a8-transition );
}

.a8-accordion__icon::after {
	transform: rotate( 90deg );
}

.a8-accordion__trigger[aria-expanded="true"] .a8-accordion__icon::after {
	transform: rotate( 0 );
}

.a8-accordion__panel {
	padding-bottom: var( --a8-space-5 );
	color: var( --a8-text-muted );
}

.a8-accordion__panel[hidden] {
	display: none;
}

/* ---------------------------------------------------------------- tabs */

.a8-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --a8-space-2 );
	margin: 0 0 var( --a8-space-6 );
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var( --a8-border );
}

.a8-tabs__list li {
	margin: 0;
}

.a8-tabs__tab {
	padding: var( --a8-space-3 ) var( --a8-space-5 );
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var( --a8-text-muted );
	font-size: var( --a8-small );
	font-weight: var( --a8-weight-bold );
	text-transform: uppercase;
	letter-spacing: .03em;
	transition: color var( --a8-transition ), border-color var( --a8-transition );
}

.a8-tabs__tab[aria-selected="true"] {
	border-bottom-color: var( --a8-accent );
	color: var( --a8-brand );
}

.a8-tabs__panel[hidden] {
	display: none;
}

/* --------------------------------------------------------------- forms */

.a8-form__grid {
	display: grid;
	gap: var( --a8-space-4 );
	grid-template-columns: repeat( 2, 1fr );
}

.a8-form__field--full {
	grid-column: 1 / -1;
}

@media ( max-width: 620px ) {
	.a8-form__grid {
		grid-template-columns: 1fr;
	}
}

.a8-form__label {
	display: block;
	margin-bottom: var( --a8-space-2 );
	font-size: var( --a8-small );
	font-weight: var( --a8-weight-medium );
}

.a8-form__required {
	color: var( --a8-accent );
}

.a8-input {
	width: 100%;
	padding: 13px 18px;
	background: var( --a8-white );
	border: 1px solid var( --a8-border );
	border-radius: var( --a8-radius );
	color: var( --a8-black );
	font-size: var( --a8-small );
	transition: border-color var( --a8-transition ), box-shadow var( --a8-transition );
}

.a8-input::placeholder {
	color: rgba( 0, 0, 0, .4 );
}

.a8-input:focus {
	border-color: var( --a8-brand-light );
	box-shadow: var( --a8-ring );
	outline: none;
}

/*
 * The CV field: the native control, restyled rather than replaced, so it keeps
 * its keyboard, screen-reader and mobile file-picker behaviour. The chooser
 * button is drawn as a small outline button in the form's own colours.
 */
.a8-input--file {
	padding: 9px 10px;
	color: var( --a8-text );
	cursor: pointer;
}

.a8-input--file::file-selector-button {
	margin-right: var( --a8-space-4 );
	padding: 7px 16px;
	background: var( --a8-white );
	border: 2px solid var( --a8-brand );
	border-radius: var( --a8-radius-sm );
	color: var( --a8-brand );
	font: inherit;
	font-size: var( --a8-btn-size );
	font-weight: var( --a8-weight-bold );
	letter-spacing: var( --a8-btn-tracking );
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var( --a8-transition );
}

/* Navy on the pale tint is 15:1. */
.a8-input--file:hover::file-selector-button,
.a8-input--file:focus-visible::file-selector-button {
	background: var( --a8-tint );
}

/* 4.7:1 on white, the same muted grey as the card copy. */
.a8-form__hint {
	margin: var( --a8-space-2 ) 0 0;
	color: var( --a8-text-muted );
	font-size: 13px;
}

textarea.a8-input {
	min-height: 130px;
	border-radius: var( --a8-radius-sm );
	resize: vertical;
}

.a8-input[aria-invalid="true"] {
	border-color: #C62828;
}

.a8-form__error {
	margin: var( --a8-space-2 ) 0 0;
	color: #C62828;
	font-size: 13px;
}

.a8-form__notice {
	padding: var( --a8-space-4 ) var( --a8-space-5 );
	border-radius: var( --a8-radius-sm );
	font-size: var( --a8-small );
}

.a8-form__notice--success {
	background: #E7F4EC;
	border: 1px solid #A8D5BC;
	color: #17603C;
}

.a8-form__notice--error {
	background: #FDECEA;
	border: 1px solid #F0B4AE;
	color: #A32219;
}

/* The honeypot must be reachable by bots but invisible to people. */
.a8-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------- pagination */

.a8-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --a8-space-2 );
	margin-top: var( --a8-space-8 );
}

.a8-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var( --a8-space-3 );
	border: 1px solid var( --a8-border );
	border-radius: var( --a8-radius-pill );
	color: var( --a8-brand );
	font-size: var( --a8-small );
	font-weight: var( --a8-weight-medium );
	text-decoration: none;
}

.a8-pagination .page-numbers:hover,
.a8-pagination .page-numbers:focus-visible {
	border-color: var( --a8-brand );
}

.a8-pagination .page-numbers.current {
	background: var( --a8-brand );
	border-color: var( --a8-brand );
	color: var( --a8-white );
}

/* -------------------------------------------------------- breadcrumbs */

.a8-breadcrumbs {
	margin-bottom: var( --a8-space-4 );
	font-size: 13px;
	color: var( --a8-text-muted );
}

.a8-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var( --a8-space-2 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.a8-breadcrumbs li {
	margin: 0;
}

.a8-breadcrumbs li + li::before {
	content: '/';
	margin-right: var( --a8-space-2 );
	color: var( --a8-border );
}

.a8-breadcrumbs a {
	color: inherit;
}

/* -------------------------------------------------------------- headings
 *
 * The logo wordmark is a heavy geometric sans set tight. Inter Tight at 700
 * with negative tracking is the closest the self-hosted family gets, so
 * section and card titles are pulled in to match it rather than sitting at
 * the looser default.
 */
.a8-heading__title,
.a8-card__title,
.a8-servicegroup__title,
.a8-person__name,
.a8-map__heading,
.a8-lead__form-heading {
	font-weight: var( --a8-weight-bold );
	letter-spacing: -.4px;
}

.a8-heading__title {
	letter-spacing: -1px;
}

/* The eyebrow is the one place the logo's spectrum reads as a rule. */
.a8-eyebrow {
	position: relative;
	padding-bottom: 10px;
}

.a8-eyebrow::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 44px;
	height: 3px;
	background: var( --a8-spectrum );
	border-radius: 2px;
}

/* Centred headings need the rule centred with them. */
.a8-heading--center .a8-eyebrow::after,
.a8-eyebrow--center::after {
	right: 0;
	margin-inline: auto;
}

/* The Other services panel is navy, so its heading trio inverts with it. */