/**
 * Header, navigation and footer.
 */

/* -------------------------------------------------------------- header */

/*
 * The SpectraTech logo is a colour gradient on a light ground, so the bar it
 * sits on has to be light too — a knockout version would throw away the part
 * of the mark that carries the brand. The navy moves to the hero directly
 * below, which keeps the dark band the layout was built around.
 */
.a8-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var( --a8-white );
	border-bottom: 1px solid var( --a8-border );
	color: var( --a8-brand );
}

.a8-site-header__inner {
	display: flex;
	align-items: center;
	gap: var( --a8-space-6 );
	min-height: var( --a8-header-h );
}

.a8-brand {
	flex: none;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	font-size: var( --a8-h5 );
	font-weight: var( --a8-weight-bold );
	letter-spacing: -.02em;
}

/* One step smaller than it was (64 / 48px): the lockup carries its own
   wordmark, so it reads at this size without crowding the menu. */
.a8-brand img {
	max-height: 56px;
	width: auto;
}

@media ( max-width: 1024px ) {
	.a8-brand img {
		max-height: 42px;
	}
}

.a8-site-header__nav {
	margin-left: auto;
}

/*
 * The header CTA is printed twice: once in the actions bar for desktop and
 * once inside the nav panel, where the actions bar is hidden on touch. Only
 * one of the two is ever visible.
 */
.a8-site-header__nav > .a8-btn {
	display: none;
}

.a8-site-header__actions {
	display: flex;
	align-items: center;
	gap: var( --a8-space-3 );
}

/*
 * The header CTA is an ordinary secondary button and styles itself: crimson
 * sliding to navy under a white label. It used to override the colours here
 * with a white hover background and a navy label, but the button's sliding
 * layer paints over its background, so on hover the label went navy on navy
 * and "Talk to us" disappeared. It also carried its own padding, which made it
 * the one 46px button on a site of 44px ones.
 */

/* ---------------------------------------------------------- main menu */

.a8-nav__list {
	display: flex;
	align-items: center;
	gap: var( --a8-space-6 );
	margin: 0;
	padding: 0;
	list-style: none;
}

.a8-nav__list li {
	margin: 0;
	position: relative;
}

/*
 * Menu links only, and at the same specificity as before (`:where` adds
 * none), so nothing else in the menu cascade moves. The header CTA is also
 * an <a> inside .a8-nav on a phone,
 * and these rules used to restyle it as a link: link padding made it the one
 * 59px button on the site, and the menu's azure link hover turned its white
 * label blue on the crimson fill, about 1.2:1.
 */
.a8-nav a:where( :not( .a8-btn ) ) {
	display: inline-block;
	padding-block: var( --a8-space-2 );
	color: var( --a8-brand );
	font-size: var( --a8-btn-size );
	font-weight: var( --a8-weight-bold );
	letter-spacing: var( --a8-btn-tracking );
	text-transform: uppercase;
	text-decoration: none;
	transition: color var( --a8-transition );
}

.a8-nav a:where( :not( .a8-btn ) ):hover,
.a8-nav a:where( :not( .a8-btn ) ):focus-visible,
.a8-nav .current-menu-item > a,
.a8-nav .current-menu-parent > a,
.a8-nav .current_page_item > a {
	/* Crimson marks the current page: 6.1:1 on the white bar. */
	color: var( --a8-accent );
}

/*
 * Submenu toggle. The walker emits it so dropdowns and the services panel can
 * be opened without a hover device.
 */
.a8-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	vertical-align: middle;
}

.a8-nav__chevron {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY( -2px ) rotate( 45deg );
	transition: transform var( --a8-transition );
}

.a8-nav__toggle[aria-expanded="true"] .a8-nav__chevron {
	transform: translateY( 1px ) rotate( -135deg );
}

/* Submenus */
.a8-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 230px;
	margin: 0;
	padding: var( --a8-space-3 ) 0;
	list-style: none;
	background: var( --a8-white );
	border-radius: var( --a8-radius-sm );
	box-shadow: var( --a8-shadow );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 8px );
	transition: opacity var( --a8-transition ), transform var( --a8-transition ), visibility var( --a8-transition );
}

.a8-nav li:hover > .sub-menu,
.a8-nav li:focus-within > .sub-menu,
/* The toggle button is the way in without a hover device. */
.a8-nav li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.a8-nav .sub-menu li + li {
	margin-top: 0;
}

.a8-nav .sub-menu a {
	display: block;
	padding: var( --a8-space-3 ) var( --a8-space-5 );
	color: var( --a8-brand );
	text-transform: none;
	font-size: var( --a8-small );
	letter-spacing: 0;
}

.a8-nav .sub-menu a:hover,
.a8-nav .sub-menu a:focus-visible {
	background: var( --a8-off-white );
	color: var( --a8-brand );
}

/* ------------------------------------------------------------ mega menu */

/*
 * The services panel spans the header rather than its menu item, so the item
 * stops being the positioning context for it.
 */
.a8-nav__list li.a8-nav__has-mega {
	position: static;
}

.a8-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 30;
	/* The reference popup opens 80px down the viewport; our header is 67px. */
	margin-top: 13px;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 8px );
	transition: opacity var( --a8-transition ), transform var( --a8-transition ), visibility var( --a8-transition );
}

.a8-nav__has-mega:hover > .a8-mega,
.a8-nav__has-mega:focus-within > .a8-mega,
.a8-nav__has-mega.is-open > .a8-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.a8-mega__panel {
	columns: 5;
	column-gap: 36px;
	column-rule: 1px solid var( --a8-border );
	padding: 50px 5.5%;
	background: var( --a8-off-white );
	border-radius: var( --a8-radius-lg );
	box-shadow: var( --a8-shadow );
	/* Measured from the reference panel, which is neither black nor body grey. */
	color: #383838;
}

.a8-mega__group {
	break-inside: avoid;
	margin-bottom: var( --a8-space-5 );
}

.a8-mega__heading {
	margin-bottom: 10px;
	color: inherit;
	font-size: var( --a8-body );
	font-weight: var( --a8-weight-normal );
	line-height: 1;
	letter-spacing: normal;
}

.a8-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.a8-mega__list li {
	margin: 0 0 10px;
}

.a8-mega__list a {
	display: flex;
	align-items: center;
	border-radius: var( --a8-radius-sm );
	color: inherit;
	font-size: var( --a8-body );
	font-weight: var( --a8-weight-normal );
	line-height: 1.15;
	text-transform: none;
	letter-spacing: normal;
	padding: 0;
	transition: background-color var( --a8-transition ), color var( --a8-transition );
}

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

.a8-mega__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 45px;
	height: 45px;
}

.a8-mega__icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* --------------------------------------------------------- menu toggle */

/*
 * It stays on the white header bar when the panel is open, so it is the one
 * control here that is not on a dark ground. Navy on white is 18:1; the
 * explicit colour means it does not depend on what it inherits.
 */
.a8-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var( --a8-radius-sm );
	color: var( --a8-brand );
	transition: background-color var( --a8-transition ), color var( --a8-transition );
}

.a8-menu-toggle:hover,
.a8-menu-toggle:focus-visible {
	background: var( --a8-off-white );
	color: var( --a8-accent );
}

/* Open, it is a close button — crimson on white is 6.1:1. */
.a8-menu-toggle[aria-expanded="true"] {
	color: var( --a8-accent );
}

.a8-menu-toggle span {
	display: block;
	height: 2px;
	width: 24px;
	margin-inline: auto;
	background: currentColor;
	transition: transform var( --a8-transition ), opacity var( --a8-transition );
}

.a8-menu-toggle[aria-expanded="true"] span:nth-child( 1 ) {
	transform: translateY( 7px ) rotate( 45deg );
}

.a8-menu-toggle[aria-expanded="true"] span:nth-child( 2 ) {
	opacity: 0;
}

.a8-menu-toggle[aria-expanded="true"] span:nth-child( 3 ) {
	transform: translateY( -7px ) rotate( -45deg );
}

/* ------------------------------------------------------- mobile layout */

@media ( max-width: 1024px ) {
	:root {
		--a8-header-h: var( --a8-header-h-sm );
	}

	.a8-menu-toggle {
		display: flex;
		order: 3;
	}

	/*
	 * On desktop the nav's `margin-left: auto` is what pushes the actions to
	 * the right edge. Here the nav is a fixed panel and takes no room in the
	 * row, so without this the menu toggle sat straight after the logo — a
	 * third of the way across a phone and a quarter of the way across a
	 * tablet — instead of in the corner where a menu button is looked for.
	 */
	.a8-site-header__actions {
		margin-left: auto;
	}

	/*
	 * The panel is the brand navy and the menu it contains was still using the
	 * desktop link colour — which is the same brand navy. Navy on navy: the
	 * labels, the chevrons and the current-page marker were all at 1:1 and
	 * invisible, not merely low-contrast. Everything inside the panel is set
	 * for a dark ground from here down.
	 */
	.a8-site-header__nav {
		position: fixed;
		inset: var( --a8-header-h-sm ) 0 0 0;
		z-index: 90;
		margin: 0;
		padding: var( --a8-space-6 ) var( --a8-gutter ) var( --a8-space-8 );
		background: var( --a8-brand );
		color: var( --a8-text-invert );
		overflow-y: auto;
		transform: translateX( 100% );
		visibility: hidden;
		transition: transform var( --a8-transition ), visibility var( --a8-transition );
	}

	/* The panel arrives out of the header, so it opens on the logo's run of
	   colour rather than on a flat edge. */
	.a8-site-header__nav::before {
		content: '';
		position: fixed;
		inset: var( --a8-header-h-sm ) 0 auto 0;
		height: 3px;
		background: var( --a8-spectrum );
	}

	.a8-site-header__nav.is-open {
		transform: none;
		visibility: visible;
	}

	/* --- the menu on a dark ground --- */

	/* White on the navy is 18:1. */
	.a8-nav a:where( :not( .a8-btn ) ) {
		color: var( --a8-text-invert );
	}

	/*
	 * Crimson is 2.5:1 on the navy and was marking the current page with it.
	 * The light pink is 8.6:1, and the bar down the left says the same thing
	 * without relying on colour at all.
	 */
	.a8-nav .current-menu-item > a,
	.a8-nav .current-menu-parent > a,
	.a8-nav .current_page_item > a,
	.a8-nav .current-menu-ancestor > a {
		color: var( --a8-pink-light );
	}

	.a8-nav__list > li.current-menu-item,
	.a8-nav__list > li.current-menu-parent,
	.a8-nav__list > li.current_page_item,
	.a8-nav__list > li.current-menu-ancestor {
		box-shadow: inset 3px 0 0 var( --a8-pink-light );
		background: rgba( 255, 255, 255, .05 );
	}

	.a8-nav__list > li.current-menu-item > a,
	.a8-nav__list > li.current-menu-parent > a,
	.a8-nav__list > li.current_page_item > a,
	.a8-nav__list > li.current-menu-ancestor > a {
		padding-left: var( --a8-space-3 );
	}

	/* Azure is 5.8:1 on the navy; the crimson the desktop bar uses is not. */
	.a8-nav a:where( :not( .a8-btn ) ):hover,
	.a8-nav a:where( :not( .a8-btn ) ):focus-visible {
		color: var( --a8-brand-light );
	}

	/* An open row is tinted, so the panel below it reads as belonging to it. */
	.a8-nav__list > li.is-open {
		background: rgba( 255, 255, 255, .06 );
	}

	/* Inherited `currentColor` made these navy on navy as well. */
	.a8-nav__toggle {
		color: var( --a8-text-invert );
		border-radius: var( --a8-radius-sm );
	}

	.a8-nav__toggle:hover,
	.a8-nav__toggle:focus-visible {
		background: rgba( 255, 255, 255, .1 );
		color: var( --a8-brand-light );
	}

	.a8-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Label on the left, a full-height toggle on the right, panel below. */
	.a8-nav__list > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid rgba( 255, 255, 255, .14 );
	}

	.a8-nav__list > li > .sub-menu,
	.a8-nav__list > li > .a8-mega {
		flex-basis: 100%;
	}

	.a8-nav__toggle {
		width: 44px;
		height: 44px;
	}

	.a8-nav a:where( :not( .a8-btn ) ) {
		padding-block: var( --a8-space-4 );
		font-size: var( --a8-small );
	}

	/* Submenus become always-open blocks on touch. */
	.a8-nav .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 var( --a8-space-3 ) var( --a8-space-4 );
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/*
	 * A step down from the white of the level above so the two levels are
	 * still told apart, but only one step: at .75 these were reading as
	 * disabled next to the parent item.
	 */
	.a8-nav .sub-menu a {
		padding-block: var( --a8-space-3 );
		color: rgba( 255, 255, 255, .86 );
	}

	.a8-nav .sub-menu a:hover,
	.a8-nav .sub-menu a:focus-visible {
		background: none;
		color: var( --a8-brand-light );
	}

	/*
	 * The mega list is inside .a8-nav, so the white above would win over the
	 * panel's own colour and flatten the group heading and its items into one
	 * tone. Specific enough to put the items back a step below the heading.
	 */
	.a8-nav .a8-mega__list a {
		color: rgba( 255, 255, 255, .86 );
	}

	.a8-nav .sub-menu .current-menu-item > a,
	.a8-nav .sub-menu .current_page_item > a,
	.a8-nav .a8-mega__list .current-menu-item > a,
	.a8-nav .a8-mega__list .current_page_item > a {
		color: var( --a8-pink-light );
		font-weight: var( --a8-weight-bold );
	}

	/* The list is indented off the parent, so the rule marks where it starts. */
	.a8-nav .sub-menu,
	.a8-mega__panel {
		border-left: 1px solid rgba( 255, 255, 255, .18 );
	}

	/* The panel becomes part of the menu list, opened by its toggle. */
	.a8-mega {
		position: static;
		display: none;
		margin-top: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.a8-nav__has-mega.is-open > .a8-mega {
		display: block;
	}

	.a8-mega__panel {
		columns: 1;
		padding: 0 0 var( --a8-space-3 ) var( --a8-space-4 );
		background: none;
		border-radius: 0;
		box-shadow: none;
		color: rgba( 255, 255, 255, .86 );
	}

	.a8-mega__heading {
		color: var( --a8-text-invert );
		font-weight: var( --a8-weight-bold );
	}

	.a8-mega__list a:hover,
	.a8-mega__list a:focus-visible {
		background: none;
		color: var( --a8-brand-light );
	}

	.a8-mega__icon {
		width: 32px;
		height: 32px;
	}

	/*
	 * The service links picked up the top-level row padding (16px a side) on
	 * top of the list's own 10px gap and the 32px icon cell, so each link was
	 * a 74px band and the Services list ran to three screens. Still a 40px
	 * touch target; the group heading gets the space instead, so the groups
	 * read as groups.
	 */
	.a8-nav .a8-mega__list li {
		margin: 0;
	}

	.a8-nav .a8-mega__list a {
		padding-block: 4px;
	}

	.a8-mega__group {
		margin-bottom: var( --a8-space-3 );
	}

	.a8-mega__heading {
		margin: var( --a8-space-4 ) 0 var( --a8-space-2 );
	}

	.a8-site-header__actions .a8-btn {
		display: none;
	}

	/* The panel is navy, so the CTA inside it draws with the dark-ground
	   colours from components.css. */
	.a8-site-header__nav :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 );
	}

	.a8-site-header__nav .a8-btn:focus-visible {
		outline-color: var( --a8-white );
	}

	.a8-site-header__nav > .a8-btn {
		display: inline-flex;
		margin-top: var( --a8-space-6 );
		width: 100%;
	}
}

/* Prevent background scroll while the mobile menu is open. */
body.a8-menu-open {
	overflow: hidden;
}

/* -------------------------------------------------------------- footer */

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

.a8-site-footer a {
	text-decoration: none;
}

/* ------------------------------------------------------ purple footer */

.a8-footer__main {
	/* The bar below overlaps this by 40px, curving into it. */
	margin-bottom: -40px;
	padding-block: 60px 120px;
	background: var( --a8-brand );
	border-radius: var( --a8-radius-panel ) var( --a8-radius-panel ) 0 0;
	color: var( --a8-text-invert );
}

/* Buttons carry their own colour; the link rule would tint their label. */
.a8-footer__main a:not( .a8-btn ) {
	color: var( --a8-border );
}

.a8-footer__main a:not( .a8-btn ):hover,
.a8-footer__main a:not( .a8-btn ):focus-visible {
	/* Crimson reads at 2.5:1 on the navy footer; azure reaches 6.9:1. */
	color: var( --a8-brand-light );
}

/* ------------------------------------------------- pitch and the form */

.a8-footer__lead {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 70px;
}

.a8-footer__pitch {
	/* 482px of the reference's 602px column. */
	max-width: 80%;
}

.a8-footer__headline {
	margin-bottom: 25px;
	font-size: var( --a8-h2 );
	letter-spacing: -2px;
}

.a8-footer__intro {
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid rgba( 226, 226, 226, .19 );
}

.a8-footer__points {
	margin: 0;
	padding: 0;
	list-style: none;
}

.a8-footer__points li {
	display: flex;
	gap: 15px;
	margin: 0;
}

.a8-footer__points li + li {
	margin-top: 25px;
}

.a8-footer__points svg {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	fill: var( --a8-brand-light );
}

/* --------------------------------------------------- the link columns */

.a8-footer__links {
	display: grid;
	/* The contact column is the widest thing in the row, so it gets the room:
	   at 1fr the address broke as "Nugegoda, Sri / Lanka". */
	grid-template-columns: repeat( 2, 165px ) minmax( 280px, 2fr ) repeat( 2, 1fr );
	gap: var( --a8-space-5 );
	/* On the container edge, like the pitch above it. It was inset 50px,
	   so the columns started to the right of everything else in the footer. */
	padding-inline: 0;
}

/* Small capitals over a list, the way the eyebrow labels a section. At -1px
   of tracking "GET IN TOUCH (SRI LANKA)" set as one word. */
.a8-footer__heading {
	margin-bottom: var( --a8-space-4 );
	font-size: var( --a8-small );
	font-weight: var( --a8-weight-bold );
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.a8-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.a8-footer__menu li {
	margin: 0;
}

/* --------------------------------------------------------- bottom bar */

.a8-footer__bar {
	position: relative;
	padding: 30px 0;
	background: var( --a8-white );
	border-radius: var( --a8-radius-panel ) var( --a8-radius-panel ) 0 0;
	color: var( --a8-text );
	font-size: var( --a8-body );
}

.a8-footer__bar a {
	color: var( --a8-text );
}

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

.a8-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --a8-space-4 );
}

.a8-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --a8-space-4 );
}

.a8-footer__legal p {
	margin: 0;
}

.a8-footer__menu--inline {
	flex-direction: row;
	gap: var( --a8-space-4 );
}

@media ( max-width: 1024px ) {
	.a8-footer__lead {
		grid-template-columns: 1fr;
		gap: var( --a8-space-8 );
	}

	.a8-footer__pitch {
		max-width: none;
	}

	.a8-footer__links {
		grid-template-columns: 1fr 1fr;
		gap: var( --a8-space-7 );
		padding-inline: 0;
	}
}

@media ( max-width: 620px ) {
	.a8-footer__main {
		padding-block: var( --a8-space-7 ) 80px;
	}

	.a8-footer__links {
		grid-template-columns: 1fr;
	}
}

.a8-social {
	display: flex;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.a8-social li {
	margin: 0;
}

.a8-social a {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	background: var( --a8-brand );
	border-radius: 50%;
	color: var( --a8-white );
	transition: background-color var( --a8-transition ), color var( --a8-transition );
}

.a8-footer__bar .a8-social a {
	color: var( --a8-white );
}

.a8-social a:hover,
.a8-social a:focus-visible,
.a8-footer__bar .a8-social a:hover,
.a8-footer__bar .a8-social a:focus-visible {
	background: var( --a8-accent );
	color: var( --a8-white );
}

.a8-social svg {
	width: 23px;
	height: 23px;
	fill: currentColor;
}

/* ---------------------------------------------------------- page head */

.a8-pagehead {
	padding-block: var( --a8-space-8 );
	background: var( --a8-off-white );
}

.a8-pagehead__title {
	margin: 0;
}

.a8-pagehead__intro {
	margin-top: var( --a8-space-4 );
	max-width: 62ch;
}

/* -------------------------------------------------- footer pitch (rebuilt)
 *
 * The proposal form that used to fill the right half is gone, so the pitch
 * gets a narrower measure and the checklist takes the space instead. One
 * button now carries the ask, pointing at the enquiry block.
 */
.a8-footer__lead {
	grid-template-columns: minmax( 0, 5fr ) minmax( 0, 6fr );
	gap: var( --a8-space-8 );
	align-items: start;
}

.a8-footer__pitch {
	max-width: none;
}

.a8-footer__cta {
	margin: var( --a8-space-6 ) 0 0;
}

.a8-footer__lead .a8-footer__points {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --a8-space-5 );
	padding-top: 6px;
}

.a8-footer__lead .a8-footer__points li + li {
	margin-top: 0;
}

.a8-footer__lead .a8-footer__points svg {
	fill: var( --a8-pink-light );
}

@media ( max-width: 900px ) {
	.a8-footer__lead {
		grid-template-columns: 1fr;
		gap: var( --a8-space-6 );
	}

	.a8-footer__lead .a8-footer__points {
		grid-template-columns: 1fr;
	}
}