/*
Theme Name: Hark Child
Template: astra
Description: Child theme for the Hark landing page. All custom code lives here.
Version: 0.2.0
Text Domain: hark-child
Author: WooSimon
Author URI: https://woosimon.com
*/

/* Astra sets the root font size from the Customizer body size (and a different % on tablet/mobile).
   Pin it so 1rem is always 16px, as the type tokens below assume. */
html {
	font-size: 100%;
}

/* Design tokens (from design-tokens.md) */
:root {
	/* Colours */
	--hark-black: #000000;
	--hark-white: #ffffff;
	--hark-ink: #1a1a1a;
	--hark-pink: #cc2968;
	--hark-pink-light: #ee6a9a; /* pink text on black or the glow (the original is 3.6 to 4.1:1 there, this is 5:1 or better) */
	--hark-purple: #7b378c;
	--hark-purple-light: #dbb2ec; /* purple text on dark or blue backgrounds (the original fails contrast) */
	--hark-blue: #344999;
	--hark-glass: rgba(127, 127, 127, 0.2);

	/* Fonts */
	--hark-font-body: "Inter", sans-serif;
	--hark-font-mono: "IBM Plex Mono", monospace;

	/* Type sizes (desktop) */
	--hark-text-h1: 3rem;
	--hark-text-h2: 2.25rem;
	--hark-text-card-title: 2rem;
	--hark-text-h3: 1.5rem;
	--hark-text-lead: 1.25rem;
	--hark-text-body: 1rem;
	--hark-text-eyebrow: 1.25rem;
	--hark-text-step-number: 6rem;

	/* Layout */
	--hark-container: 1290px;
	--hark-container-narrow: 1196px;
	--hark-radius-card: 19px;
	--hark-radius-image: 15px;
	--hark-radius-panel: 8px;
	--hark-radius-pill: 30px;
	--hark-gap-card: 18px;
}

/* Mobile type sizes (Astra mobile breakpoint) */
@media (max-width: 544px) {
	:root {
		--hark-text-h1: 2rem;
		--hark-text-h2: 1.5rem;
		--hark-text-lead: 1.125rem;
		--hark-text-eyebrow: 1.125rem;
	}
}

/* ==========================================================================
   Shared: eyebrow, lead text, glass buttons
   ========================================================================== */
:root {
	--hark-glass-border: rgba(255, 255, 255, 0.4);
	--hark-focus: 2px solid var(--hark-white);
}

.hark-eyebrow {
	margin: 0;
	color: var(--hark-pink-light);
	font-family: var(--hark-font-mono);
	font-size: var(--hark-text-eyebrow);
	font-weight: 400;
	line-height: 1.25;
	text-transform: uppercase;
}

.hark-lead {
	font-size: var(--hark-text-lead);
	line-height: 1.4;
}

/* Glass pill button (Buttons block, class "hark-btn") */
.hark-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 32px;
	border: 1px solid var(--hark-glass-border);
	border-radius: var(--hark-radius-pill);
	background: var(--hark-glass);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--hark-white);
	font-family: var(--hark-font-mono);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s, border-color 0.2s;
}

.hark-btn .wp-block-button__link:hover,
.hark-btn .wp-block-button__link:focus-visible {
	border-color: var(--hark-pink);
	background: var(--hark-pink);
	color: var(--hark-white);
}

.hark-btn .wp-block-button__link:focus-visible {
	outline: var(--hark-focus);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.hark-landing *,
	.site-header *,
	.site-footer * {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Header (Astra Header Builder, menu "Main menu")
   Astra's transparent header is switched on per page, so the header sits over the hero.
   Menu links with no class join the pill. Give a menu item the CSS class hark-nav-cta or
   hark-nav-lang to make it stand alone (Appearance > Menus > Screen Options > CSS Classes).
   ========================================================================== */
.site-header .main-header-bar,
.site-header .ast-mobile-header-content {
	border: 0;
	background: transparent;
}

.site-header .site-branding {
	padding: 0;
}

.site-header .site-logo-img img {
	display: block;
	height: auto;
}

.site-header .custom-logo-link:focus-visible {
	outline: var(--hark-focus);
	outline-offset: 4px;
}

/* Astra hides the desktop header at 921px in its own stylesheet, so repeat the switch at 1180px */
@media (max-width: 1180px) {
	#ast-desktop-header {
		display: none;
	}

	#ast-mobile-header {
		display: block;
	}
}

@media (min-width: 1181px) {
	#ast-mobile-header {
		display: none;
	}
}

/* Desktop */
#ast-desktop-header .ast-primary-header-bar {
	min-height: 0;
	padding: 37px 0 0;
}

#ast-desktop-header .site-primary-header-wrap {
	width: min(var(--hark-container-narrow), 100% - 48px);
	max-width: none;
	min-height: 48px;
	margin-inline: auto;
	padding-inline: 0;
}

#ast-desktop-header #ast-hf-menu-1 {
	flex-wrap: nowrap;
	gap: 0;
	align-items: center;
}

/* Glass look, shared by desktop and mobile menus */
#ast-hf-menu-1 > .menu-item,
#ast-hf-mobile-menu > .menu-item {
	box-sizing: border-box;
	border: 1px solid var(--hark-glass-border);
	background: var(--hark-glass);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	line-height: 1.5;
}

#ast-hf-menu-1 > .menu-item > .menu-link,
#ast-hf-mobile-menu > .menu-item > .menu-link {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 0 20px;
	border-radius: inherit;
	color: var(--hark-white);
	font-family: var(--hark-font-mono);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s;
}

#ast-hf-menu-1 > .menu-item > .menu-link:hover,
#ast-hf-menu-1 > .menu-item > .menu-link:focus-visible,
#ast-hf-mobile-menu > .menu-item > .menu-link:hover,
#ast-hf-mobile-menu > .menu-item > .menu-link:focus-visible {
	background: var(--hark-pink);
	color: var(--hark-white);
}

#ast-hf-menu-1 > .menu-item > .menu-link:focus-visible,
#ast-hf-mobile-menu > .menu-item > .menu-link:focus-visible {
	outline: var(--hark-focus);
	outline-offset: -4px;
}

/* Desktop: the first links form one pill, then Contact and the language buttons stand alone */
#ast-hf-menu-1 > .menu-item:where(:not(.hark-nav-cta):not(.hark-nav-lang)) {
	border-inline-width: 0;
	border-radius: 0;
}

#ast-hf-menu-1 > .menu-item:first-child {
	border-inline-start-width: 1px;
	border-radius: 30px 0 0 30px;
}

#ast-hf-menu-1 > .menu-item:first-child > .menu-link {
	padding-inline-start: 32px;
}

#ast-hf-menu-1 > .menu-item:has(+ .hark-nav-cta) {
	border-inline-end-width: 1px;
	border-radius: 0 30px 30px 0;
}

#ast-hf-menu-1 > .menu-item:has(+ .hark-nav-cta) > .menu-link {
	padding-inline-end: 40px;
}

#ast-hf-menu-1 > .hark-nav-cta,
#ast-hf-mobile-menu > .hark-nav-cta {
	border-radius: 30px;
}

#ast-hf-menu-1 > .hark-nav-cta > .menu-link,
#ast-hf-mobile-menu > .hark-nav-cta > .menu-link {
	padding-inline: 32px;
}

#ast-hf-menu-1 > .hark-nav-lang,
#ast-hf-mobile-menu > .hark-nav-lang {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

#ast-hf-menu-1 > .hark-nav-lang > .menu-link,
#ast-hf-mobile-menu > .hark-nav-lang > .menu-link {
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0;
}

#ast-hf-menu-1 > .hark-nav-cta,
#ast-hf-menu-1 > .hark-nav-cta + .hark-nav-lang {
	margin-inline-start: 60px;
}

#ast-hf-menu-1 > .hark-nav-lang + .hark-nav-lang {
	margin-inline-start: 12px;
}

/* Mobile and tablet (Astra switches at 1180px, set in the Customizer) */
#ast-mobile-header .ast-primary-header-bar {
	min-height: 0;
	padding: 18px 28px 0;
}

#ast-mobile-header .ast-mobile-menu-trigger-minimal {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--hark-glass-border);
	border-radius: 50%;
	background: var(--hark-glass);
	color: var(--hark-white);
	transition: background-color 0.2s, border-color 0.2s;
}

#ast-mobile-header .ast-mobile-menu-trigger-minimal .ahfb-svg-iconset,
#ast-mobile-header .ast-mobile-menu-trigger-minimal svg {
	color: var(--hark-white);
	fill: currentColor;
}

#ast-mobile-header .ast-mobile-menu-trigger-minimal:hover,
#ast-mobile-header .ast-mobile-menu-trigger-minimal:focus-visible {
	border-color: var(--hark-pink);
	background: var(--hark-pink);
}

#ast-mobile-header .ast-mobile-menu-trigger-minimal:focus-visible {
	outline: var(--hark-focus);
	outline-offset: 3px;
}

/* Opened menu: black panel, links as centred pills */
#ast-mobile-header .ast-mobile-header-content {
	padding: 16px 28px 32px;
	background: var(--hark-black);
}

#ast-hf-mobile-menu {
	flex-direction: column;
	align-items: center;
	gap: 16px;
	background: transparent;
}

#ast-hf-mobile-menu > .menu-item {
	width: auto;
	border-radius: 30px;
}

#ast-hf-mobile-menu > .hark-nav-lang {
	width: 48px;
	border-radius: 50%;
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Astra adds 100px padding to every top-level Group block, so section padding needs the extra class to win.
   The top padding leaves room for the transparent header (37px + 48px). */
.wp-block-group.hark-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 85px 24px 181px;
	color: var(--hark-white);
}

/* Pink glow at the top centre */
.hark-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -368px;
	left: 50%;
	width: 684px;
	height: 684px;
	transform: translateX(-50%);
	background: url("assets/hero-glow-desktop.svg") center / 100% 100% no-repeat;
	pointer-events: none;
}

/* Wavy lines behind the buttons. The artwork is drawn on a 1440px canvas, so it stays centred on it. */
.hark-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 319px;
	left: calc(50% - 1384px);
	width: 3174px;
	height: 553px;
	background: url("assets/hero-waves-desktop.svg") 0 0 / 100% 100% no-repeat;
	pointer-events: none;
}

.hark-hero .hark-hero__content {
	margin-top: 130px;
	text-align: center;
}

.hark-hero .hark-hero__title {
	margin: 46px 0 26px;
	color: var(--hark-white);
	font-size: var(--hark-text-h1);
	font-weight: 700;
	line-height: 1.2;
	text-transform: capitalize;
}

.hark-hero .hark-lead {
	max-width: 681px;
	margin: 0 auto;
	color: var(--hark-white);
}

.hark-hero .hark-hero__buttons {
	margin-top: 64px;
	gap: 60px;
}

/* Mobile (Astra's 544px breakpoint) */
@media (max-width: 544px) {
	.wp-block-group.hark-hero {
		padding: 62px 16px 70px;
	}

	.hark-hero::before {
		top: -315px;
		width: 565px;
		height: 565px;
		background-image: url("assets/hero-glow-mobile.svg");
	}

	.hark-hero::after {
		top: 185px;
		left: calc(50% - 677.5px);
		width: 1579px;
		height: 598px;
		background-image: url("assets/hero-waves-mobile.svg");
	}

	.hark-hero .hark-hero__content {
		margin-top: 54px;
	}

	.hark-hero .hark-hero__title {
		margin-top: 17px;
	}

	.hark-hero .hark-hero__buttons {
		flex-direction: column;
		margin-top: 38px;
		gap: 23px;
	}

	.hark-hero .hark-hero__buttons .wp-block-button__link {
		width: 180px;
	}
}

/* ==========================================================================
   About cards (four cards under the hero)
   ========================================================================== */
.wp-block-group.hark-about {
	padding: 0 24px 108px;
	color: var(--hark-white);
}

.hark-cards {
	display: grid;
	grid-template-columns: 517fr 368fr 368fr;
	grid-template-rows: minmax(337px, auto) minmax(179px, auto);
	gap: var(--hark-gap-card);
	max-width: var(--hark-container);
	margin-inline: auto;
}

.hark-cards > .hark-card--map {
	grid-area: 1 / 1 / span 2 / 2;
}

.hark-cards > .hark-card--head {
	grid-area: 1 / 2 / span 2 / 3;
}

.hark-cards > .hark-card--hand {
	grid-area: 1 / 3;
}

.hark-cards > .hark-card--quality {
	grid-area: 2 / 3;
}

.hark-cards .hark-card {
	margin: 0; /* WordPress adds a gap above every block after the first; the grid gap does that job */
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 48px 32px;
	border-radius: var(--hark-radius-card);
	color: var(--hark-white);
}

.hark-card .hark-card__title {
	position: relative;
	z-index: 2;
	margin: 0 0 24px;
	color: var(--hark-white);
	font-size: var(--hark-text-h3);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}

.hark-card .hark-card__text {
	position: relative;
	z-index: 2;
	max-width: 19.5rem;
	margin: 0;
	line-height: 1.4;
}

/* Photo cards: the image sits behind the text and can be swapped in the editor */
.hark-card--head .hark-card__media,
.hark-card--hand .hark-card__media {
	position: absolute;
	z-index: 0;
	inset: 0;
	margin: 0;
}

.hark-card--head .hark-card__media img,
.hark-card--hand .hark-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card 1: pink gradient, map along the bottom edge */
.hark-card--map .hark-card__title {
	max-width: 19.5rem;
}

.hark-cards .hark-card--map {
	padding-inline: 40px;
	background: radial-gradient(ellipse 205% 197% at 6% -75%, #e600b6 20%, #cc0196 30%, #b30175 40.5%, #990255 50.7%, #7f0234 61%, rgba(102, 21, 52, 0.7) 100%);
}

.hark-card--map .hark-card__media {
	position: absolute;
	z-index: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	aspect-ratio: 515 / 427;
}

.hark-card--map .hark-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 41% 50%;
	opacity: 0.9;
	/* Fade the top of the map so the text above it stays readable */
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 60%);
}

/* Card 2: purple gradient, the head blends into it */
.hark-cards .hark-card--head {
	background: linear-gradient(168.65deg, #7b378c 18.58%, #210f26 51.27%, #000000 112.7%);
}

.hark-card--head .hark-card__media {
	mix-blend-mode: exclusion;
}

.hark-card--head .hark-card__media img {
	object-position: 50% 44%;
}

/* Card 3: photo with a blue tint */
.hark-cards .hark-card--hand {
	background-color: var(--hark-blue);
}

.hark-card--hand .hark-card__media img {
	object-position: 4% 50%;
}

.hark-card--hand::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	/* Blue tint from the design, plus a darker band at the top behind the text (contrast) */
	background: linear-gradient(to bottom, rgba(18, 26, 72, 0.75) 0%, rgba(18, 26, 72, 0) 80%), rgba(52, 73, 153, 0.6);
	pointer-events: none;
}

/* Card 4: plain glass */
.hark-cards .hark-card--quality {
	padding-block: 32px;
	background: rgba(111, 111, 111, 0.4);
}

/* Tablet: map across the top, head on the left, the other two stacked on the right */
@media (max-width: 921px) {
	.hark-cards {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}

	.hark-cards > .hark-card--map {
		grid-area: 1 / 1 / 2 / 3;
		min-height: 440px;
	}

	.hark-card--map .hark-card__media {
		height: 320px;
		aspect-ratio: auto;
	}

	.hark-cards > .hark-card--head {
		grid-area: 2 / 1 / span 2 / 2;
		min-height: 580px;
	}

	.hark-cards > .hark-card--hand {
		grid-area: 2 / 2;
		min-height: 337px;
	}

	.hark-cards > .hark-card--quality {
		grid-area: 3 / 2;
		min-height: 179px;
	}
}

/* Mobile (Astra's 544px breakpoint): one column */
@media (max-width: 544px) {
	.wp-block-group.hark-about {
		padding: 0 14px 62px;
	}

	.hark-cards {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.hark-cards > .hark-card--map,
	.hark-cards > .hark-card--head,
	.hark-cards > .hark-card--hand,
	.hark-cards > .hark-card--quality {
		grid-area: auto;
	}

	.hark-cards .hark-card {
		padding: 36px 28px;
	}

	.hark-cards .hark-card--map {
		min-height: 358px;
		padding-block-start: 32px;
	}

	.hark-card--map .hark-card__media {
		height: auto;
		aspect-ratio: 515 / 427;
	}

	.hark-cards .hark-card--head {
		min-height: 500px;
	}

	.hark-cards .hark-card--hand {
		min-height: 316px;
	}

	.hark-cards .hark-card--quality {
		min-height: 168px;
		padding-block: 32px;
	}
}

/* ==========================================================================
   Shared: section heading (eyebrow + title), used by most sections
   ========================================================================== */
.hark-section-head {
	text-align: center;
}

.hark-section-head .hark-section-title {
	text-wrap: balance;
	margin: 30px auto 0;
	color: var(--hark-white);
	font-size: var(--hark-text-h2);
	font-weight: 700;
	line-height: 1.2;
	text-transform: capitalize;
}

@media (max-width: 544px) {
	.hark-section-head .hark-section-title {
		margin-top: 20px;
	}
}

/* ==========================================================================
   Client logos
   ========================================================================== */
.wp-block-group.hark-clients {
	padding: 0 24px 108px;
	color: var(--hark-white);
}

.hark-clients .hark-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 37px 47px;
	max-width: 660px;
	margin: 52px auto 0;
}

.hark-logos .hark-logos__item {
	margin: 0;
}

.hark-logos .hark-logos__item img {
	display: block;
	max-width: none;
	height: auto;
}

@media (max-width: 544px) {
	.wp-block-group.hark-clients {
		padding: 0 16px 94px;
	}

	.hark-clients .hark-logos {
		margin-top: 51px;
	}
}

/* Logos use the narrow arrangement (3 + 3 + 2 + 2) up to 680px, where 5 + 5 no longer fits */
@media (max-width: 680px) {
	.hark-clients .hark-logos {
		gap: 21px 24px;
		max-width: 300px;
	}
}

/* ==========================================================================
   Whole page: black base with the big blue and pink glow from Figma
   The glow artwork is drawn on a 1440px canvas (375px on mobile), so it is placed by pixel offsets.
   ========================================================================== */
.wp-block-group.hark-landing > * {
	margin-block: 0; /* sections space themselves; WordPress adds 24px above every block after the first */
}

.wp-block-group.hark-landing {
	padding: 0; /* Astra adds 100px / 80px padding to top-level groups */
	/* Glow is 8438px tall in Figma. On screens wide enough to make the page taller than that, it stretches to keep covering the page instead of stopping in a hard edge. */
	background: var(--hark-black) url("assets/page-glow-desktop.svg") 0 61px / 100% max(8438px, calc(100% - 61px)) no-repeat;
	color: var(--hark-white);
}

@media (max-width: 544px) {
	.wp-block-group.hark-landing {
		background-image: url("assets/page-glow-mobile.svg");
		background-position: 50% -3796px;
		background-size: 1064px 16093px;
	}
}

/* Shared: lead paragraph under a section title */
.hark-section-head .hark-lead {
	max-width: 605px;
	margin: 28px auto 0;
	color: var(--hark-white);
}

.hark-section-head .hark-section-title.hark-section-title--first {
	margin-top: 0;
}

@media (max-width: 544px) {
	.hark-section-head .hark-lead {
		margin-top: 20px;
	}
}

/* ==========================================================================
   Video band (embedded YouTube video, edge to edge, 16:9)
   ========================================================================== */
.wp-block-group.hark-video {
	padding: 0;
}

.hark-video .wp-block-embed {
	margin: 0;
}

.hark-video .wp-block-embed iframe:focus-visible {
	outline: var(--hark-focus);
	outline-offset: -4px;
}

/* ==========================================================================
   Services cards
   ========================================================================== */
.wp-block-group.hark-services {
	padding: 117px 24px 161px;
}

.hark-services .hark-service-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 17px;
	max-width: var(--hark-container);
	margin: 49px auto 0;
}

.hark-service-cards .hark-svc {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	padding: 39px 30px 0;
	border-radius: var(--hark-radius-card);
	background: var(--hark-white);
	color: var(--hark-ink);
	text-align: center;
}

.hark-svc .hark-svc__label {
	margin: 0;
	color: var(--hark-ink);
	font-family: var(--hark-font-mono);
	line-height: 1.6;
	text-transform: uppercase;
}

.hark-svc .hark-svc__title {
	margin: 14px 0 14px;
	color: var(--hark-pink);
	font-size: var(--hark-text-card-title);
	font-weight: 700;
	line-height: 1.2;
}

.hark-svc .hark-svc__text {
	max-width: 316px;
	margin: 0 auto 24px;
	color: var(--hark-ink);
	line-height: 1.4;
}

/* Media area: embedded YouTube video, own aspect ratio (portrait for Vertical Content, 16:9 for the others).
   The wrapper's height comes from a percentage padding-top (core WordPress's responsive-embed trick), which
   can round to a fraction of a pixel taller than the iframe's own height:100%, leaving a hairline of the
   card's white background showing at the bottom edge. Fixed with a dark background behind the iframe (so any
   rounding gap is invisible) and by sizing the iframe 1px oversized on every side (the rounded corners still
   clip cleanly, since overflow:hidden on the figure is what actually shapes the visible edge). */
.hark-svc .hark-svc__media.wp-block-embed {
	margin: auto -30px 0;
	border-radius: 0 0 var(--hark-radius-card) var(--hark-radius-card);
	overflow: hidden;
	background: var(--hark-black);
}

.hark-svc .hark-svc__media.wp-block-embed .wp-block-embed__wrapper {
	border-radius: inherit;
	overflow: hidden;
}

.hark-svc .hark-svc__media.wp-block-embed .wp-block-embed__wrapper iframe {
	inset: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
}

.hark-svc__media .wp-block-embed__wrapper iframe:focus-visible {
	outline: var(--hark-focus);
	outline-offset: -4px;
}

@media (max-width: 921px) {
	.hark-services .hark-service-cards {
		grid-template-columns: minmax(0, 560px);
		justify-content: center;
	}
}

@media (max-width: 544px) {
	.wp-block-group.hark-services {
		padding: 57px 13px 57px;
	}

	.hark-services .hark-service-cards {
		gap: 19px;
		margin-top: 40px;
	}

	.hark-service-cards .hark-svc {
		padding: 35px 26px 0;
	}

	.hark-svc .hark-svc__title {
		font-size: 1.75rem;
	}

	.hark-svc .hark-svc__media.wp-block-embed {
		margin-inline: -26px;
	}
}

/* ==========================================================================
   Studio photo band
   ========================================================================== */
.wp-block-group.hark-studio {
	padding: 0 0 116px;
}

.hark-studio figure {
	margin: 0;
}

.hark-studio img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1440 / 637;
	object-fit: cover;
	object-position: 50% 72%;
}

@media (max-width: 544px) {
	.wp-block-group.hark-studio {
		padding-bottom: 131px;
	}
}

/* ==========================================================================
   Solutions suite (two columns of six)
   ========================================================================== */
.wp-block-group.hark-suite {
	padding: 0 24px 145px;
}

.hark-suite .hark-suite__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 184px;
	max-width: var(--hark-container-narrow);
	margin: 81px auto 0;
}

.hark-suite__cols > .hark-suite__col {
	margin: 0;
}

.hark-suite__col .hark-suite__title {
	margin: 0 0 50px;
	font-size: var(--hark-text-card-title);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-transform: capitalize;
}

.hark-suite__col--media .hark-suite__title {
	color: var(--hark-pink);
}

.hark-suite__col--post .hark-suite__title {
	color: var(--hark-purple-light);
}

.hark-suite__col .hark-suite__items {
	display: grid;
	grid-template-columns: repeat(2, 223px);
	gap: 34px 60px;
	justify-content: center;
}

.hark-suite__items > .hark-feature {
	margin: 0;
}

.hark-feature .hark-feature__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 57px;
	height: 57px;
	margin: 0 0 21px;
	border: 1px solid var(--hark-glass-border);
	border-radius: var(--hark-radius-panel);
	background: var(--hark-glass);
}

.hark-feature .hark-feature__icon img {
	display: block;
	width: auto;
	max-width: none;
	height: auto;
}

.hark-feature .hark-feature__title {
	margin: 0 0 16px;
	color: var(--hark-white);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
}

.hark-feature .hark-feature__text {
	margin: 0;
	color: var(--hark-white);
	line-height: 1.4;
}

@media (max-width: 1244px) {
	.hark-suite .hark-suite__cols {
		grid-template-columns: 1fr;
		row-gap: 72px;
	}

	/* Stacked, the headings can land on the bright part of the page glow, so use white with a coloured underline */
	.hark-suite__col .hark-suite__title {
		display: table;
		margin-inline: auto;
		padding-bottom: 10px;
		border-bottom: 3px solid var(--hark-pink);
		color: var(--hark-white);
	}

	.hark-suite__col--post .hark-suite__title {
		border-bottom-color: var(--hark-purple-light);
		color: var(--hark-white);
	}
}

@media (max-width: 560px) {
	.hark-suite__col .hark-suite__items {
		grid-template-columns: 223px;
		gap: 34px;
	}

	.hark-feature {
		text-align: center;
	}

	.hark-feature .hark-feature__icon {
		margin-inline: auto;
	}

	.hark-suite__col .hark-suite__title {
		margin-bottom: 40px;
	}
}

@media (max-width: 544px) {
	.wp-block-group.hark-suite {
		padding: 0 16px 73px;
	}

	.hark-suite .hark-suite__cols {
		margin-top: 60px;
	}
}

/* ==========================================================================
   Workflow: panel with a row of step cards that scrolls sideways
   ========================================================================== */
.wp-block-group.hark-workflow {
	padding: 0 0 184px;
}

.hark-workflow .hark-workflow__panel {
	box-sizing: border-box;
	width: min(var(--hark-container), 100% - 48px);
	min-height: 474px;
	margin-inline: auto;
	padding: 42px 62px 0;
	border-radius: var(--hark-radius-card);
	background: linear-gradient(180deg, #7b378c 0%, #482052 33%, #3a1a42 68%, #210f26 100%);
	color: var(--hark-white);
}

.hark-eyebrow.hark-eyebrow--light {
	color: var(--hark-white);
}

.hark-workflow .hark-workflow__title {
	text-wrap: balance;
	max-width: 825px;
	margin: 30px 0 0;
	color: var(--hark-white);
	font-size: var(--hark-text-h2);
	font-weight: 700;
	line-height: 1.2;
	text-transform: capitalize;
}

.hark-workflow .hark-workflow__lead {
	max-width: 702px;
	margin: 28px 0 0;
	color: var(--hark-white);
	font-size: 1.5rem;
	line-height: 1.3;
}

.hark-workflow .hark-steps {
	display: flex;
	gap: 24px;
	justify-content: safe center;
	position: relative;
	margin: -181px 0 0;
	padding: 0 24px 24px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
	scrollbar-width: thin;
}

.hark-steps:focus-visible {
	outline: var(--hark-focus);
	outline-offset: -4px;
}

.hark-steps .hark-step {
	box-sizing: border-box;
	flex: 0 0 306px;
	height: 306px;
	margin: 0;
	padding: 12px 24px 0;
	border-radius: var(--hark-radius-card);
	background: var(--hark-white);
	color: var(--hark-ink);
	text-align: center;
	scroll-snap-align: start;
}

.hark-step .hark-step__number {
	margin: 0;
	color: var(--hark-pink);
	font-family: var(--hark-font-mono);
	font-size: var(--hark-text-step-number);
	font-weight: 300;
	line-height: 1.24;
}

.hark-step .hark-step__title {
	margin: 27px 0 0;
	color: var(--hark-purple);
	font-size: var(--hark-text-h3);
	font-weight: 700;
	line-height: 1.2;
}

.hark-step .hark-step__text {
	margin: 19px auto 0;
	max-width: 232px;
	color: var(--hark-ink);
	line-height: 1.4;
}

@media (max-width: 544px) {
	.wp-block-group.hark-workflow {
		padding-bottom: 73px;
	}

	.hark-workflow .hark-workflow__panel {
		width: calc(100% - 28px);
		min-height: 406px;
		padding: 32px 17px 0;
	}

	.hark-workflow .hark-workflow__title {
		margin-top: 20px;
		font-size: var(--hark-text-h2);
	}

	.hark-workflow .hark-workflow__lead {
		margin-top: 20px;
		font-size: 1.125rem;
	}

	.hark-workflow .hark-steps {
		margin-top: -132px;
		padding-left: 31px;
		scroll-padding-inline-start: 31px;
	}

	.hark-steps .hark-step {
		flex-basis: 255px;
		height: 255px;
		padding: 10px 16px 0;
	}

	.hark-step .hark-step__number {
		font-size: 5rem;
	}

	.hark-step .hark-step__title {
		margin-top: 22px;
		font-size: 1.25rem;
	}

	.hark-step .hark-step__text {
		margin-top: 14px;
		font-size: 1rem;
	}
}

/* ==========================================================================
   Why choose Hark
   ========================================================================== */
.wp-block-group.hark-why {
	padding: 0 24px 185px;
}

.hark-why .hark-why__items {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 49px;
	max-width: var(--hark-container);
	margin: 41px auto 0;
}

.hark-why__items > .hark-why__item {
	margin: 0;
	text-align: center;
}

.hark-why .hark-why__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 112px;
	height: 112px;
	margin: 0 auto 21px;
	border: 1px solid var(--hark-glass-border);
	border-radius: var(--hark-radius-panel);
	background: var(--hark-glass);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.hark-why .hark-why__icon img {
	display: block;
	width: auto;
	max-width: none;
	height: auto;
}

.hark-why .hark-why__title {
	margin: 0;
	color: var(--hark-white);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}

.hark-why .hark-why__text {
	margin: 0 auto;
	max-width: 223px;
	color: var(--hark-white);
	line-height: 1.4;
}

.hark-why .hark-partners {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	margin-top: 103px;
}

.hark-partners .hark-partners__row,
.hark-partners .hark-partners__stack {
	margin: 0;
}

.hark-partners img {
	display: block;
	max-width: 100%;
	height: auto;
}

.hark-partners .hark-partners__stack {
	display: none;
}

@media (max-width: 1180px) {
	.hark-why .hark-why__items {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 56px;
	}
}

@media (max-width: 680px) {
	.hark-partners .hark-partners__row {
		display: none;
	}

	.hark-partners .hark-partners__stack {
		display: block;
	}
}

@media (max-width: 640px) {
	.hark-why .hark-why__items {
		grid-template-columns: minmax(0, 300px);
		justify-content: center;
		row-gap: 60px;
	}
}

@media (max-width: 544px) {
	.wp-block-group.hark-why {
		padding: 0 16px 60px;
	}

	.hark-why .hark-why__items {
		margin-top: 56px;
	}

	.hark-why .hark-partners {
		margin-top: 60px;
	}
}

/* ==========================================================================
   Contact
   ========================================================================== */
.wp-block-group.hark-contact {
	padding: 0 24px 185px;
}

.hark-contact .hark-contact__inner {
	display: grid;
	grid-template-columns: minmax(0, 416px) minmax(0, 456px); /* can shrink between 922px and about 990px */
	column-gap: 71px;
	align-items: start;
	justify-content: center;
	max-width: 943px;
	margin-inline: auto;
}

.hark-contact .hark-contact__title {
	text-wrap: balance;
	margin: 0 0 32px;
	color: var(--hark-white);
	font-size: var(--hark-text-h2);
	font-weight: 700;
	line-height: 1.2;
	text-transform: capitalize;
}

.hark-contact .hark-lead {
	margin: 0;
	color: var(--hark-white);
}

.hark-form {
	margin: 0;
}

.hark-form .hark-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hark-form .hark-form__panel {
	box-sizing: border-box;
	padding: 32px;
	border: 1px solid var(--hark-glass-border);
	border-radius: var(--hark-radius-panel);
	background: var(--hark-glass);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--hark-white);
}

.hark-consent {
	margin-top: 32px;
	font-size: 0.875rem;
	line-height: 1.5;
}

.hark-consent p {
	margin: 0 0 16px;
}

.hark-consent p:last-child {
	margin-bottom: 0;
}

.hark-consent a {
	color: inherit;
	text-decoration: underline;
}

.hark-consent a:focus-visible,
.hark-consent__check input:focus-visible {
	outline: var(--hark-focus);
	outline-offset: 2px;
}

.hark-consent .hark-consent__check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 16px;
	color: var(--hark-white);
	font-size: inherit;
	cursor: pointer;
}

.hark-consent__check input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--hark-pink);
}

.hark-form .hark-form__title {
	margin: 0;
	color: var(--hark-white);
	font-size: var(--hark-text-h3);
	font-weight: 600;
	line-height: 1.2;
}

.hark-form .hark-form__sub {
	margin: 2px 0 32px;
	font-weight: 300;
	line-height: 1.2;
}

.hark-field {
	margin-bottom: 32px;
}

.hark-field:last-child {
	margin-bottom: 0;
}

.hark-field label {
	display: block;
	margin-bottom: 8px;
	color: var(--hark-white);
	font-size: 1rem;
	line-height: 1.25;
}

.hark-field input,
.hark-field textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 8px 16px;
	border: 0;
	border-bottom: 1px solid var(--hark-white);
	border-radius: 0;
	background: transparent;
	color: var(--hark-white);
	font-family: var(--hark-font-mono);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.55;
	resize: vertical;
}

.hark-field input::placeholder,
.hark-field textarea::placeholder {
	color: rgba(255, 255, 255, 0.85);
	opacity: 1;
}

.hark-field input:focus-visible,
.hark-field textarea:focus-visible {
	outline: var(--hark-focus);
	outline-offset: 2px;
	background: rgba(255, 255, 255, 0.08);
}

.hark-field--invalid input,
.hark-field--invalid textarea {
	border-bottom-color: #ffd6e4;
}

.hark-field .hark-field__error {
	margin: 8px 0 0;
	color: #ffd6e4;
	font-size: 0.9375rem;
}

.hark-form-wrap .hark-form__notice {
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid var(--hark-glass-border);
	border-radius: var(--hark-radius-panel);
	background: var(--hark-glass);
	color: var(--hark-white);
}

.hark-form__notice p {
	margin: 0;
}

.hark-form__notice .hark-form__notice-title {
	margin-bottom: 4px;
	font-weight: 600;
}

.hark-form__notice:focus-visible {
	outline: var(--hark-focus);
	outline-offset: 3px;
}

.hark-form .hark-form__turnstile {
	margin-top: 32px;
}

.hark-form .hark-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin-top: 32px;
	padding: 0 32px 0 24px;
	border: 1px solid var(--hark-glass-border);
	border-radius: var(--hark-radius-pill);
	background: var(--hark-glass);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--hark-white);
	font-family: var(--hark-font-mono);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
}

.hark-form .hark-form__submit:hover,
.hark-form .hark-form__submit:focus-visible {
	border-color: var(--hark-pink);
	background: var(--hark-pink);
	color: var(--hark-white);
}

.hark-form .hark-form__submit:focus-visible {
	outline: var(--hark-focus);
	outline-offset: 3px;
}

@media (max-width: 921px) {
	.hark-contact .hark-contact__inner {
		grid-template-columns: minmax(0, 456px);
		row-gap: 40px;
	}

	.hark-contact .hark-contact__intro {
		text-align: center;
	}

	.hark-contact .hark-lead {
		max-width: 540px;
		margin-inline: auto;
	}
}

@media (max-width: 544px) {
	.wp-block-group.hark-contact {
		padding: 0 16px 120px;
	}

	.hark-contact .hark-contact__title {
		margin-bottom: 26px;
		font-size: var(--hark-text-h2);
	}

	.hark-form .hark-form__panel {
		padding: 32px 31px;
	}

	.hark-form .hark-form__submit {
		display: flex;
		width: fit-content;
		margin-inline: auto;
	}
}

/* ==========================================================================
   Footer (Site Builder footer layout, one per language: offices, funding, copyright)
   ========================================================================== */
:root {
	--hark-focus-dark: 2px solid var(--hark-ink);
}

.site-footer,
.ast-custom-footer {
	position: relative;
	background: var(--hark-white);
	color: var(--hark-ink);
}

/* Wavy top edge that overlaps the page above */
.site-footer::before,
.ast-custom-footer::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -74px;
	right: 0;
	left: 0;
	height: 107px;
	background: url("assets/footer-wave.svg") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

.site-footer .site-primary-footer-wrap {
	padding: 0;
	border: 0;
	background: transparent;
}

.site-footer .footer-widget-area {
	padding: 0;
}

.hark-footer {
	box-sizing: border-box;
	width: min(var(--hark-container-narrow), 100% - 48px);
	margin: 0 auto;
	padding: 73px 0 104px;
	color: var(--hark-ink);
}

.hark-footer a {
	display: inline-block; /* at least 24px tall, so phone numbers and emails are easy to tap */
	min-height: 24px;
	line-height: 24px;
	color: var(--hark-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hark-footer a:hover {
	color: var(--hark-pink);
}

.hark-footer a:focus-visible {
	outline: var(--hark-focus-dark);
	outline-offset: 3px;
}

.hark-footer .hark-footer__title {
	margin: 0 0 26px;
	color: var(--hark-ink);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: capitalize;
}

.hark-footer .hark-offices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 81px;
}

.hark-offices > .hark-office {
	margin: 0;
}

.hark-office .hark-office__country {
	margin: 0 0 16px;
	color: var(--hark-ink);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
}

.hark-office .hark-office__details {
	margin: 0;
	color: var(--hark-ink);
	line-height: 1.4;
}

.hark-footer .hark-footer__legal {
	margin-top: 97px;
}

.hark-footer .hark-footer__logos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.hark-footer .hark-footer__logo,
.hark-footer .hark-footer__funding {
	margin: 0;
}

.hark-footer .hark-footer__logo img {
	display: block;
	width: 199px;
	height: auto;
}

.hark-footer .hark-footer__funding img {
	display: block;
	width: 799px;
	max-width: 100%;
	height: auto;
}

.hark-footer .hark-footer__text {
	max-width: 1138px;
	margin: 24px auto 0;
	color: var(--hark-ink);
	line-height: 1.4;
}

.hark-footer .hark-footer__legal-menu {
	max-width: 1138px;
	margin: 49px auto 0;
	color: var(--hark-ink);
	font-size: 0.875rem;
	line-height: 1.4;
}

.hark-footer .hark-footer__logos + .hark-footer__text {
	margin-top: 49px;
}

@media (max-width: 921px) {
	.hark-footer .hark-offices {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hark-footer .hark-footer__title {
		text-align: center;
	}

	.hark-footer .hark-footer__logos {
		flex-direction: column;
		gap: 40px;
	}
}

@media (max-width: 544px) {
	.site-footer::before,
	.ast-custom-footer::before {
		top: -30px;
		height: 42px;
	}

	.hark-footer {
		width: calc(100% - 32px);
		padding: 78px 0 90px;
	}

	.hark-footer .hark-footer__legal {
		margin-top: 90px;
	}
}

/* ==========================================================================
   Spanish page (lang="es")
   The English headings are typed in Title Case and the design capitalises them. Spanish uses
   normal sentence case, so leave the text as typed.
   ========================================================================== */
:lang(es) .hark-hero .hark-hero__title,
:lang(es) .hark-section-head .hark-section-title,
:lang(es) .hark-suite__col .hark-suite__title,
:lang(es) .hark-workflow .hark-workflow__title,
:lang(es) .hark-contact .hark-contact__title,
:lang(es) .hark-footer .hark-footer__title {
	text-transform: none;
}

/* Spanish menu labels are longer: switch to the menu button below 1240px instead of 1180px
   (the breakpoint itself is set in functions.php) */
@media (max-width: 1240px) {
	html:lang(es) #ast-desktop-header {
		display: none;
	}

	html:lang(es) #ast-mobile-header {
		display: block;
	}
}

@media (min-width: 1241px) {
	html:lang(es) #ast-mobile-header {
		display: none;
	}
}