/**
 * Reset, element defaults and layout primitives.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc( var( --a8-header-h ) + 20px );
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var( --a8-white );
	color: var( --a8-text );
	font-family: var( --a8-font );
	font-size: var( --a8-body );
	font-weight: var( --a8-weight-light );
	line-height: var( --a8-body-lh );
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

/* ------------------------------------------------------------ headings */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var( --a8-space-4 );
	color: var( --a8-brand );
	font-weight: var( --a8-weight-bold );
	line-height: var( --a8-h2-lh );
	letter-spacing: -.02em;
	text-wrap: balance;
}

h1 {
	font-size: var( --a8-h1 );
	line-height: var( --a8-h1-lh );
}

h2 {
	font-size: var( --a8-h2 );
}

h3 {
	font-size: var( --a8-h3 );
	line-height: var( --a8-h3-lh );
}

h4 {
	font-size: var( --a8-h4 );
	line-height: 1.3;
}

h5 {
	font-size: var( --a8-h5 );
	line-height: 1.3;
}

h6 {
	font-size: var( --a8-h6 );
	line-height: 1.4;
}

p {
	margin: 0 0 var( --a8-space-4 );
}

p:last-child,
ul:last-child,
ol:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- links */

a {
	color: var( --a8-black );
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color var( --a8-transition );
}

/*
 * Plain links only, and on keyboard focus rather than any focus. As `a:focus`
 * this outranked every button's own label colour (0,1,1 against 0,1,0), and a
 * mouse click leaves a link focused: "Email your CV" and every other button
 * that is an <a> turned its white label navy on its own navy fill after being
 * clicked, and stayed that way on the way back to the page. `:where()` keeps
 * the old specificity so no other link rule changes.
 */
a:where( :not( .a8-btn ) ):hover,
a:where( :not( .a8-btn ) ):focus-visible {
	/* Lilac falls short of 4.5:1 on white; the brand purple clears it. */
	color: var( --a8-brand );
}

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 3px solid var( --a8-accent );
	outline-offset: 2px;
	border-radius: 2px;
}

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

img,
picture,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

figure {
	margin: 0;
}

/* --------------------------------------------------------------- lists */

ul,
ol {
	margin: 0 0 var( --a8-space-4 );
	padding-left: 1.25em;
}

li + li {
	margin-top: var( --a8-space-1 );
}

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

input,
button,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* -------------------------------------------------------------- tables */

table {
	width: 100%;
	border-collapse: collapse;
}

/* --------------------------------------------------------- primitives */

.a8-container {
	width: 100%;
	max-width: calc( var( --a8-container ) + var( --a8-gutter ) * 2 );
	margin-inline: auto;
	padding-inline: var( --a8-gutter );
}

.a8-container--narrow {
	max-width: calc( 860px + var( --a8-gutter ) * 2 );
}

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

.a8-section--tight {
	padding-block: var( --a8-section-y-sm );
}

.a8-section--purple {
	background: var( --a8-brand );
	color: var( --a8-text-invert );
}

.a8-section--purple :is( h1, h2, h3, h4, h5, h6 ) {
	color: var( --a8-text-invert );
}

.a8-section--grey {
	background: var( --a8-off-white );
}

/*
 * Two sections on the same ground read as one band, so the padding between
 * them is counted once. Otherwise the gap doubles to 180px with nothing to
 * mark it — the space between Explore our core features and Work culture on
 * the homepage, and between a service page's FAQs and the trust panel.
 */
.a8-section--grey + .a8-section--grey,
.a8-section--purple + .a8-section--purple,
.a8-section:not( .a8-section--grey, .a8-section--purple ) + .a8-section:not( .a8-section--grey, .a8-section--purple ) {
	padding-top: 0;
}

/* Screen-reader-only text that becomes visible on keyboard focus. */
.screen-reader-text {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	background: var( --a8-white );
	color: var( --a8-brand );
	display: block;
	font-size: var( --a8-small );
	font-weight: var( --a8-weight-bold );
	height: auto;
	left: var( --a8-space-4 );
	line-height: normal;
	padding: var( --a8-space-3 ) var( --a8-space-5 );
	top: var( --a8-space-4 );
	text-decoration: none;
	width: auto;
	z-index: 100000;
	border-radius: var( --a8-radius-sm );
	box-shadow: var( --a8-shadow );
}

/* Entrance animations must never hide content when JS fails. The .js states
   live with the rest of the animation system in sections.css. */
.a8-reveal {
	opacity: 1;
}