/**
 * Arca Secure — base styles.
 *
 * Design is TBA (see build brief). These are structural/functional styles
 * only — controlled, minimal, precise, in the spirit of the current
 * Squarespace site — meant to be replaced once a design direction is agreed.
 */

/* Montserrat, self-hosted. Variable fonts (weight 100–900 in one file each)
   so there's no build step and no separate file per weight. */
@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Colour — Arca Secure brand guidelines.
	   Bright teal (#00ab8f) only reaches ~2.9:1 contrast against white at any
	   text size or weight, so per WCAG it's used for decorative/dark-background
	   accents, not as a text/link colour on light backgrounds. Dark green
	   (#004e42) carries that role instead — 9.4:1 against white. */
	--color-ink: #585856; /* PANTONE Cool Grey 11 C */
	--color-ink-muted: color-mix(in srgb, #585856 65%, white);
	--color-paper: #ffffff;
	--color-paper-alt: color-mix(in srgb, #00ab8f 6%, white);
	--color-border: color-mix(in srgb, #585856 25%, white);
	--color-accent: #00ab8f; /* PANTONE 3268 C — decorative/dark-bg accent */
	--color-accent-strong: #004e42; /* PANTONE 3305 C — links, emphasis on light bg */
	--color-accent-contrast: #ffffff;
	--color-dark: #00372f; /* default .block background */
	--color-on-dark: rgba(255, 255, 255, 0.8); /* body text on --color-dark */
	--color-button-bg: #af272f; /* PANTONE 1805 C — button fill, per client direction */
	--color-danger: #af272f; /* PANTONE 1805 C — errors/alerts (same swatch as buttons, separate token in case that changes) */

	/* Type scale */
	--font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: "kallisto", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-size-base: 1rem;
	--font-size-sm: 0.875rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.75rem;
	--font-size-2xl: 2.5rem;
	--line-height-base: 1.6;
	--line-height-tight: 1.2;

	/* Spacing scale */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;

	/* Layout */
	--wrap-max-width: 72rem;
}

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-ink);
	background: var(--color-paper);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	/* Kallisto's kit ships Bold (800) and Heavy (900) — pinned to Bold (800)
	   for all heading levels rather than the browser's default 700, which
	   would fall outside those two available cuts. */
	font-weight: 800;
	line-height: var(--line-height-tight);
	margin: 0 0 var(--space-2);
}

h1,
h2,
h3 {
	color: var(--color-accent-strong); /* #004E42 */
}

h1 {
	font-size: var(--font-size-2xl);
}

@media (min-width: 786px) {
	h1 {
		font-size: 54px;
	}
}

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

@media (min-width: 768px) {
	h2 {
		font-size: 32px;
	}
}

h3 {
	font-size: var(--font-size-lg);
}

p {
	margin: 0 0 var(--space-2);
	color: var(--color-ink);
}

/* Paragraphs on dark/teal backgrounds keep inheriting their section's light
   text colour (grey ink would be hard to read there). :where() keeps this at
   the same specificity as the bare p rule above, so any p with its own class
   colour still wins over it. */
:where(.site-header, .site-footer, .block, .page-header) p {
	color: inherit;
}

a {
	color: var(--color-accent-strong);
}

a:hover {
	color: var(--color-accent);
}

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

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: var(--space-1);
	left: var(--space-1);
	width: auto;
	height: auto;
	clip: auto;
	padding: var(--space-1) var(--space-2);
	background: var(--color-ink);
	color: var(--color-paper);
	z-index: 100;
}

.wrap {
	max-width: var(--wrap-max-width);
	margin-inline: auto;
	padding-inline: var(--space-2);
}

@media (min-width: 768px) {
	.wrap {
		padding-inline: 2rem;
	}
}

@media (min-width: 1024px) {
	.wrap {
		padding-inline: 3rem;
	}
}

/* Header */

.site-header {
	/* Stacked above the hero so .block--hero__eye, which can extend up past
	   the hero's top edge, goes behind the header rather than over it. */
	position: relative;
	z-index: 10;
	background: var(--color-accent-strong); /* #004E42 */
	color: #fff;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding-block: var(--space-2);
}

.site-branding {
	margin: 0;
	width: 75%;
	/* Flex (rather than relying on the <a>/<img> baseline) avoids the extra
	   few px of "descender" space a block normally reserves below inline
	   content, which was throwing the logo off-centre against the nav. */
	display: flex;
	align-items: center;
}

@media (min-width: 768px) {
	.site-branding {
		max-width: 300px;
	}
}

/* Narrower cap from 1024px up, where the logo, full nav and header CTA all
   have to share one line. */
@media (min-width: 1024px) {
	.site-branding {
		max-width: 220px;
	}
}

/* 10% bigger from 1200px up, where there's room to spare. */
@media (min-width: 1200px) {
	.site-branding {
		max-width: 242px;
	}
}

.site-branding a {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: var(--font-size-lg);
}

.site-branding img {
	display: block;
	height: 2.75rem;
	width: auto;
}

@media (min-width: 1200px) {
	.site-branding img {
		height: 3.025rem;
	}
}

.site-header__nav-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-2);
}

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

@media (min-width: 1024px) {
	.site-header__nav-group {
		gap: var(--space-3);
	}

	.site-nav__list {
		gap: var(--space-2);
	}
}

@media (min-width: 1200px) {
	.site-nav__list {
		gap: var(--space-3);
	}
}

.site-nav__list a {
	text-decoration: none;
	color: #fff;
}

.site-nav__list a:hover {
	color: var(--color-accent);
}

@media (min-width: 1024px) {
	.site-nav__list a {
		font-size: 13px;
		text-transform: uppercase;
	}
}

/* Mobile menu toggle — hidden on desktop, shown below 1024px (see media query). */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-1);
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
}

.menu-toggle__icon {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

@media (max-width: 1023px) {
	.menu-toggle {
		display: inline-flex;
	}

	.site-nav {
		display: none;
		width: 100%;
		order: 3;
	}

	.site-nav.is-open {
		display: block;
	}

	.site-nav__list {
		flex-direction: column;
		gap: 0;
		padding-block: var(--space-1) var(--space-2);
	}

	.site-nav__list a {
		display: block;
		padding-block: var(--space-1);
	}
}

/* Buttons */

/* .gform_button covers Gravity Forms' <input type="submit">/<button> submit
   control — folded into the same rule (rather than a separate near-duplicate
   block) so the two can never visually drift apart. Gravity Forms ships its
   own themed button CSS with a more specific/later-loaded rule for nearly
   every one of these properties (confirmed: it was winning on border-radius,
   padding, font-size, font-weight and line-height, not just colour) — so
   everything but layout-neutral properties is !important here. */
/* Arrow Forward, inlined as a background-image (not ::after content — CSS
   generated content doesn't render on replaced elements, and Gravity Forms'
   submit renders as <input type="submit">, which can't take HTML children
   either). One background-image rule is the only approach that works
   uniformly across <a>, <button> and <input>. Fill is hardcoded to white
   since a data-URI SVG can't inherit currentColor — fine here since .button
   text is always white. Source: Google Material Symbols "arrow_forward". */
.button,
.scr-consent-open,
.gform_wrapper .gform_button {
	display: inline-block;
	padding: var(--space-1) calc(var(--space-3) + 1.5em) var(--space-1) var(--space-3) !important;
	background-color: var(--color-button-bg) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='white'%3E%3Cpath d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right var(--space-3) center !important;
	background-size: 1em 1em !important;
	transition: background-position 0.15s ease;
	color: var(--color-accent-contrast) !important;
	border: none !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	font-family: var(--font-body) !important;
	font-size: var(--font-size-base) !important;
	font-weight: 600 !important;
	line-height: normal !important;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.button:hover,
.scr-consent-open:hover,
.gform_wrapper .gform_button:hover {
	background-color: color-mix(in srgb, var(--color-button-bg) 85%, black 15%) !important;
	background-position: right calc(var(--space-3) - 0.25rem) center !important;
	color: var(--color-accent-contrast) !important;
}

@media (max-width: 767px) {
	.site-header__cta {
		display: none;
	}
}

.button.site-header__cta {
	padding: var(--space-1) calc(var(--space-2) + 1.5em) var(--space-1) var(--space-1) !important;
	background-position: right var(--space-2) center !important;
	font-size: 13px !important;
}

.button.site-header__cta:hover {
	background-position: right calc(var(--space-2) - 0.25rem) center !important;
}

/* Blocks (flexible content) */

/* Blocks are dark by default: near-black ground, white text at 80%, white
   headings and links. Teal (#00ab8f) text keeps its own colour because it is
   set on specific classes, not inherited. A block that sets its own
   background (the hero, tinted sections, the teal testimonial, the green CTA
   band) keeps that colour scheme instead - see the "light" list below.

   --heading-color / --link-color are custom properties so any light element
   inside a block (a white card, a tinted panel) can opt back out just by
   redefining them, without re-styling every heading and link in it. */
.block {
	--heading-color: #fff;
	--link-color: #fff;
	padding-block: var(--space-5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--color-dark);
	color: var(--color-on-dark);
}

/* Stacked blocks meet on fractional pixels, and the anti-aliased seam lets the
   white page background show through as a hairline between two dark blocks.
   On pages built from blocks, put the dark colour behind them instead. */
.site-main:has(> .block) {
	background: var(--color-dark);
}

.block h1,
.block h2,
.block h3,
.block h4 {
	color: var(--heading-color);
}

.block a:not(.button) {
	color: var(--link-color);
}

.block a:not(.button):hover {
	color: var(--color-accent);
}

/* Sections that sit on the brand green (#004e42, the hero colour) instead of the
   default dark. Same text scheme as every other dark block. */
.block--tier-highlights,
.block--numbered-steps,
.block--scored-list,
.block--comparison-table,
.block--credentials-stats,
#tier-compliance_frameworks {
	background: var(--color-accent-strong);
}

.block--credentials-stats {
	border-bottom: none;
}

/* Nothing is light by default any more. To make a block (or a panel inside
   one) light, give it its own background and set color to the ink colour and
   --heading-color / --link-color to var(--color-accent-strong). */

/* Scroll reveal: sections (below the hero, on any page that has one) fade/
   slide up into place as they enter the viewport — see initScrollReveal() in
   main.js,
   which adds .is-visible via IntersectionObserver. Blocks start hidden only
   once JS confirms it's running (.js-scroll-reveal, added by that same
   function before it observes anything), so content isn't lost if JS fails
   to load. */
.js-scroll-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-scroll-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.js-scroll-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.block--hero {
	position: relative; /* containing block for the ::before top fade below */
	text-align: left;
	background-color: var(--color-accent-strong); /* #004E42 */
	color: #fff;
	border-bottom: none;
	/* The eye image can be taller than a short (inner-page) hero; clip it at
	   the hero's own edges so it never bleeds into the header or the next
	   section. */
	overflow: hidden;
	/* Vertically centres the .wrap content block once min-height (below)
	   makes this section taller than its content — harmless at smaller
	   sizes where content already fills the box. --site-header-height is
	   set in main.js (measured from the real rendered header, since its
	   height isn't a fixed constant — it changes at the 1024px nav
	   breakpoint); the fallback covers the instant before JS runs. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Soft fade into the hero green along the top edge, over the hero image and
   under the text. A taller image is clipped by the hero's top edge, and any
   artwork that runs up to that edge (cracks, say) would otherwise show as a
   hard line against the header. */
.block--hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;
	height: 8rem;
	background: linear-gradient(to bottom, var(--color-accent-strong), transparent);
	pointer-events: none;
}

/* An <img>, not a background-image, so it can be seen in full — a
   background-image is clipped to .wrap's own box, but this needs to extend
   above/below .wrap whenever the image (at .wrap's width) is taller than
   .wrap itself. Sized to .wrap's own width so it always matches the content
   column, regardless of viewport — sits behind .wrap's own content
   (h1/subheading/CTAs). */
.block--hero .wrap {
	position: relative;
	/* A flex item with auto side margins would otherwise shrink to its
	   content (a short heading) and centre itself. */
	width: 100%;
}

.block--hero .wrap > :not(.block--hero__eye) {
	position: relative;
	z-index: 2;
}

.block--hero__eye {
	position: absolute;
	top: calc(50% - 100px);
	left: 0;
	z-index: 0;
	width: 100%;
	height: auto;
	--eye-shift: -50%;
	transform: translateY(var(--eye-shift));
	pointer-events: none;
	/* Very slow horizontal drift. */
	animation: hero-eye-drift 22s ease-in-out infinite;
}

/* The 100px lift above was tuned for the default eye image (which has empty
   green at its top). Inner-page hero images sit flush with the top of the hero
   itself, so .wrap (which is inset by the hero's padding, and centred when the
   hero is taller than its content) stops being its positioning parent and the
   image keeps the wrap's width and centring on its own. */
.block--hero:has(.block--hero__eye--flush) .wrap {
	position: static;
}

.block--hero__eye--flush {
	top: 0;
	right: 0;
	left: 0;
	width: min(100%, var(--wrap-max-width));
	margin-inline: auto;
	--eye-shift: 0%;
}

@keyframes hero-eye-drift {
	0%,
	100% {
		transform: translate(0, var(--eye-shift));
	}

	50% {
		transform: translate(16px, var(--eye-shift));
	}
}

@media (max-width: 991px) {
	.block--hero__eye {
		display: none;
	}
}

.block--hero h1 {
	/* Overrides the global h1/h2/h3 heading colour (dark green), which would
	   be invisible against this section's now-matching dark green background. */
	color: #fff;
}

/* Staggered entrance on load (not scroll-triggered, unlike .js-scroll-reveal
   elsewhere — the hero is always in view on load, so there's no "enters the
   viewport" moment to key off). */
@keyframes hero-fade-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.block--hero .eyebrow,
.block--hero h1,
.block--hero__subheading,
.hero-cta-group {
	opacity: 0;
	animation: hero-fade-up 0.7s ease forwards;
}

.block--hero h1 {
	animation-delay: 0.1s;
}

.block--hero__subheading {
	animation-delay: 0.3s;
}

.hero-cta-group {
	animation-delay: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
	.block--hero__eye {
		animation: none;
	}

	.block--hero .eyebrow,
	.block--hero h1,
	.block--hero__subheading,
	.hero-cta-group {
		opacity: 1;
		animation: none;
	}
}

.block--hero a {
	color: #fff;
}

.block--hero__heading-accent {
	color: #00ab8f;
}

@media (min-width: 768px) {
	.block--hero h1,
	.block--hero__subheading {
		max-width: 66%;
	}

	/* Inner pages (About, Crisis Simulation): a shorter hero, so the page's
	   real content isn't pushed below the fold by a lone heading. */
	.block--hero {
		min-height: clamp(20rem, calc(55svh - var(--site-header-height, 80px)), 32rem);
	}

	.home .block--hero {
		min-height: calc(50svh - var(--site-header-height, 80px));
	}
}

/* Inner pages share one hero height wherever the image shows, so About matches
   Crisis Simulation (whose content makes it about this tall). */
@media (min-width: 992px) {
	body:not(.home) .block--hero {
		min-height: 34rem;
	}
}

/* Home: fills the viewport below the header (svh, so mobile/tablet browser
   toolbars don't push it past the fold), but is capped so it doesn't
   balloon on very tall or 4K screens. The cap is on min-height, not a
   max-height, so a long heading can still grow the hero instead of
   overflowing it. */
@media (min-width: 1024px) {
	.home .block--hero {
		min-height: clamp(28rem, calc(100svh - var(--site-header-height, 80px)), 56rem);
	}
}

.block--hero__subheading {
	color: #fff;
	font-size: 18px;
	text-wrap: balance;
}

/* Hero CTAs — primary/secondary, both optional independently. Standalone
   classes (not built on .button) since these have their own fixed colour
   scheme, distinct from .button's brand-red fill used everywhere else. */
.hero-cta-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	margin-top: var(--space-5);
}

@media (min-width: 768px) {
	.hero-cta-group {
		flex-direction: row;
		align-items: center;
	}
}

.hero-cta {
	display: inline-block;
	padding: var(--space-1) calc(var(--space-3) + 1.5em) var(--space-1) var(--space-3);
	border-radius: 2px;
	font-weight: 600;
	text-decoration: none;
	/* Both variants share this so a solid-fill button and an outlined one
	   sit at the same height/width when placed side by side. */
	border: 2px solid transparent;
	/* Arrow Forward (Google Material Symbols) — same technique as .button:
	   background-image rather than ::after or an inline SVG, so it works
	   the same way everywhere. Fill is hardcoded white since a data-URI
	   can't inherit currentColor — fine here, both variants use white text. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='white'%3E%3Cpath d='M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--space-3) center;
	background-size: 1em 1em;
	transition: background-color 0.15s ease, background-position 0.15s ease;
}

.hero-cta--primary {
	background-color: #00ab8f;
	border-color: #00ab8f;
	color: #fff;
}

.hero-cta--primary:hover {
	background-color: color-mix(in srgb, #00ab8f 85%, black 15%);
	border-color: color-mix(in srgb, #00ab8f 85%, black 15%);
	background-position: right calc(var(--space-3) - 0.25rem) center;
}

.hero-cta--secondary {
	background-color: #004e42;
	border-color: #00ab8f;
	color: #fff;
}

.hero-cta--secondary:hover {
	background-color: color-mix(in srgb, #004e42 80%, #00ab8f 20%);
	background-position: right calc(var(--space-3) - 0.25rem) center;
}

.page-header {
	padding-block: var(--space-4);
	background-color: var(--color-accent-strong); /* #004E42, matches .block--hero */
	background-image: url("../images/arca-repeat-green-grad.svg");
	background-repeat: repeat-x;
	background-position: left top;
	background-size: auto 100%;
	color: #fff;
}

.page-header h1 {
	/* Overrides the global h1/h2/h3 heading colour (dark green), which would
	   be invisible against this section's now-matching dark green background. */
	color: #fff;
	margin: 0;
}

/* Generic page content: the Privacy, Terms and Cookies pages. Styles the
   elements the editor produces (headings, lists, links, tables, quotes), so a
   legal page can be pasted in and look right with no extra classes. A readable
   measure, a clear heading hierarchy, and the brand's teal-square bullets. */

.block--page-content {
	border-bottom: none;
}

.page-content {
	max-width: 46rem;
	font-size: 0.8rem;
	line-height: 1.7;
}

.page-content > *:first-child {
	margin-top: 0;
}

.page-content > *:last-child {
	margin-bottom: 0;
}

.page-content p {
	margin: 0 0 var(--space-2);
}

.page-content strong,
.page-content b {
	color: #fff;
	font-weight: 700;
}

/* Headings: a rule above each main section so a long page scans in chunks. */
.page-content h2,
.page-content h3,
.page-content h4 {
	scroll-margin-top: var(--space-3);
}

.page-content h2 {
	margin: var(--space-4) 0 var(--space-2);
	padding-top: var(--space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 1.5rem;
}

.page-content > h2:first-child {
	padding-top: 0;
	border-top: none;
}

.page-content h3 {
	margin: var(--space-3) 0 var(--space-1);
	font-size: 1.125rem;
}

.page-content h4 {
	margin: var(--space-3) 0 var(--space-1);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Links: underlined so they're clear in running text, teal on hover. */
.page-content a:not(.button) {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.page-content a:not(.button):hover {
	color: var(--color-accent);
}

/* Lists: teal squares for bullets, teal numbers for numbered clauses. */
.page-content ul,
.page-content ol {
	margin: 0 0 var(--space-3);
	padding: 0;
}

.page-content ul {
	list-style: none;
}

.page-content ul > li {
	position: relative;
	padding-left: 1.25rem;
}

.page-content ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 2px;
	background: var(--color-accent);
}

.page-content ol {
	padding-left: 1.5rem;
}

.page-content ol > li {
	padding-left: 0.4rem;
}

.page-content ol > li::marker {
	color: var(--color-accent);
	font-weight: 700;
}

.page-content li + li {
	margin-top: var(--space-1);
}

/* Nested lists sit tighter under their parent item. */
.page-content li > ul,
.page-content li > ol {
	margin: var(--space-1) 0 0;
}

/* Quotes and notices. */
.page-content blockquote {
	margin: var(--space-3) 0;
	padding: var(--space-1) 0 var(--space-1) var(--space-3);
	border-left: 3px solid var(--color-accent);
}

.page-content blockquote > *:last-child {
	margin-bottom: 0;
}

.page-content hr {
	margin: var(--space-4) 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.page-content address {
	margin: 0 0 var(--space-3);
	font-style: normal;
}

.page-content code {
	font-size: 0.9em;
}

.page-content .scr-consent-open {
	margin-top: var(--space-4);
}

/* Tables (including the consent plugin's [scr_cookie_policy] list): full
   width, left-aligned, light row dividers. */
.page-content table,
.scr-cookie-table {
	width: 100%;
	margin-bottom: var(--space-3);
	border-collapse: collapse;
}

.page-content table,
.page-content th,
.page-content td,
.scr-cookie-table,
.scr-cookie-table th,
.scr-cookie-table td {
	text-align: left;
}

.page-content th,
.page-content td,
.scr-cookie-table th,
.scr-cookie-table td {
	padding: var(--space-1) var(--space-2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	vertical-align: top;
}

/* Line the first column up with the text above; the rest keep their gap. */
.page-content th:first-child,
.page-content td:first-child,
.scr-cookie-table th:first-child,
.scr-cookie-table td:first-child {
	padding-left: 0;
}

.page-content th,
.scr-cookie-table th {
	border-bottom-color: rgba(255, 255, 255, 0.3);
}

.scr-cookie-table th {
	white-space: nowrap;
}

.scr-cookie-table code {
	white-space: nowrap;
}

/* 404: a grid of cards that are links to the main sections. */

.block--not-found {
	border-bottom: none;
}

.link-grid {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

/* Two columns, so four cards sit as a tidy 2 x 2 rather than 3 + 1. */
@media (min-width: 768px) {
	.link-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.card--link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
}

.card--link,
.card--link:hover {
	color: var(--color-on-dark);
}

.card--link h3 {
	margin-bottom: var(--space-1);
}

.card--link p {
	margin: 0 0 var(--space-2);
}

.card--link__go {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	color: var(--color-accent);
	font-weight: 700;
	transition: gap 0.15s ease;
}

.card--link:hover .card--link__go {
	gap: 0.7rem;
}

.card--link__go svg {
	width: 1em;
	height: 1em;
}

/* Feature grid */

.feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--space-3);
}

.feature-grid__item {
	padding: var(--space-3);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-grid__item:hover {
	transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.feature-grid__item {
		transition: none;
	}

	.feature-grid__item:hover {
		transform: none;
	}
}

.feature-grid__icon {
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--space-1);
}

/* Credentials / stats */

.credentials-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--space-3);
	text-align: center;
}

.credentials-stats__stat {
	font-size: var(--font-size-2xl);
	font-weight: 700;
	color: var(--heading-color);
	margin: 0;
}

.credentials-stats__number {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.credentials-stats__label {
	margin: 0;
}

/* Eyebrow: small all-caps label above a section's heading. */
.eyebrow {
	margin: 0 0 var(--space-2);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Teal on dark backgrounds (every block, and the page header). It keeps the
   colour of its surroundings where teal would vanish: the teal testimonial
   block. */
.block .eyebrow,
.page-header .eyebrow {
	color: var(--color-accent);
}

.block--testimonial-slider .eyebrow {
	color: inherit;
}

/* Intro text (two-column) */

.block--intro-text {
	border-bottom: none;
}

.intro-text__grid {
	--intro-gap: var(--space-3);
	display: grid;
	gap: var(--intro-gap);
}

@media (min-width: 768px) {
	.intro-text__grid {
		--intro-gap: var(--space-4);
		grid-template-columns: 1fr 2fr;
	}
}

/* No heading (About, Crisis Simulation): the body would otherwise land in
   the narrow first column, so use one column at a readable measure instead. */
@media (min-width: 768px) {
	.intro-text__grid--no-heading {
		grid-template-columns: 1fr;
	}

	.intro-text__grid--no-heading .intro-text__content {
		max-width: 46rem;
	}
}

/* Spans both columns; the negative margin cancels the grid gap so the
   eyebrow sits the same distance above the heading as it does elsewhere. */
.intro-text__eyebrow {
	grid-column: 1 / -1;
	margin-bottom: calc(var(--space-2) - var(--intro-gap));
}

.intro-text__heading {
	margin: 0;
	font-size: var(--font-size-2xl);
	line-height: 1;
}

@media (min-width: 786px) {
	.intro-text__heading {
		font-size: 54px;
	}
}

.intro-text__heading span {
	display: block;
}

.intro-text__heading-accent {
	color: #00ab8f;
}

.intro-text__content > *:last-child {
	margin-bottom: 0;
}

/* Bullets in body copy match the Scored list: a small teal square, not a disc. */
.intro-text__content ul {
	margin: 0 0 var(--space-3);
	padding: 0;
	list-style: none;
}

.intro-text__content ul li {
	position: relative;
	padding-left: 1.25rem;
}

.intro-text__content ul li + li {
	margin-top: var(--space-1);
}

.intro-text__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 2px;
	background: #00ab8f;
}

.intro-text__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-2);
	font-weight: 600;
	text-decoration: none;
}

.intro-text__link:hover {
	text-decoration: underline;
}

.intro-text__link-icon {
	width: 1em;
	height: 1em;
}

/* Service tiers / cards */

.block--service-tier__intro {
	max-width: 46rem;
}

.block--service-tier__cta {
	margin-top: var(--space-4);
	margin-bottom: 0;
}

/* .button sets its size with !important, so these need it too. */
.block--service-tier__cta .button {
	padding: calc(var(--space-1) * 1.4) calc(var(--space-3) * 1.4 + 1.5em) calc(var(--space-1) * 1.4) calc(var(--space-3) * 1.4) !important;
	background-position: right calc(var(--space-3) * 1.4) center !important;
	font-size: 1.125rem !important;
}

.block--service-tier__cta .button:hover {
	background-position: right calc(var(--space-3) * 1.4 - 0.25rem) center !important;
}

/* Services page: no divider lines between sections. */
.page-services .site-main .block {
	border-bottom: none;
}

.service-grid,
.case-study-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--space-3);
	margin-top: var(--space-3);
}

/* Wide enough that the "Read the case study" button fits on one line; nowrap
   covers the last few pixels at exactly 1024px, where it can overhang the
   card's inner padding slightly but never wraps. */
.case-study-grid {
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

/* Cards in a row are the same height (grid stretch); a flex column lets the
   button's auto top margin pin it to the bottom whatever the text length. */
.card--case-study {
	display: flex;
	flex-direction: column;
}

.card--case-study__link {
	align-self: flex-start;
	margin-top: auto;
	white-space: nowrap;
}

.card {
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	background: var(--color-paper);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
	.card {
		transition: none;
	}

	.card:hover {
		transform: none;
	}
}

.card--service__icon {
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--space-1);
}

.card--service__sub-items {
	margin: 0 0 var(--space-2);
	padding: 0;
	color: var(--color-ink);
	list-style: none;
}

.card--service__sub-items li {
	position: relative;
	padding-left: 1.25rem;
}

.card--service__sub-items li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 2px;
	background: #00ab8f;
}

.card--case-study__number {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--font-size-sm);
}

/* Single case study (single-case_study.php) */

.case-study__header .eyebrow {
	margin-bottom: var(--space-1);
}

.case-study__sector {
	margin: var(--space-1) 0 0;
	font-size: var(--font-size-lg);
}

.block--case-study {
	border-bottom: none;
}

.case-study__layout {
	display: grid;
	gap: var(--space-4);
}

/* The key result comes first in the markup so it leads on mobile; from 768px
   it moves into a side column beside the story. */
@media (min-width: 768px) {
	.case-study__layout {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}

	.case-study__main {
		grid-column: 1;
		grid-row: 1;
	}

	.case-study__result {
		grid-column: 2;
		grid-row: 1;
	}
}

.case-study__result {
	padding: var(--space-3);
}

.case-study__key-result {
	margin: 0;
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	font-weight: 800;
	line-height: var(--line-height-tight);
	color: var(--heading-color);
}

.case-study__image {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--space-4);
	border-radius: 4px;
}

.case-study__section {
	margin-bottom: var(--space-4);
}

.case-study__back {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-weight: 600;
	text-decoration: none;
}

.case-study__back:hover {
	text-decoration: underline;
}

.case-study__back-icon {
	width: 1em;
	height: 1em;
}

.tier-highlights__number {
	font-family: var(--font-heading);
	font-size: 3rem;
	line-height: 1;
	color: #00ab8f;
	margin-bottom: var(--space-2);
}

.block--tier-highlights {
	border-bottom: none;
}

/* .block--tier-highlights scoped, not the base .card, since other cards
   (Services/Case Studies pages) reuse .card--service without this icon. */
/* Dark emerald gradient cards, each darker than the last (diagonal gradient,
   soft teal glow top-right, large radius, white text). Every .card gets this.
   The gradients are tuned to the section behind them: the default dark
   (#00372f) first, then a second set for sections on the brand green
   (#004e42, the home tiers and Services "Compliance & Frameworks"). On the
   green set the gradients start dark enough that the teal tier numbers keep
   at least 3:1 contrast. Each set repeats every three cards. The Crisis
   Simulation deliverables tiles and the case study "key result" box share
   the same look (the tiles use a four-step set, as there are four of them). */
.card,
.feature-grid__item,
.deliverables-grid__item,
.case-study__result {
	--heading-color: #fff;
	--link-color: #fff;
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 1.25rem;
	color: var(--color-on-dark);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.card:hover,
.feature-grid__item:hover {
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.card--service__sub-items {
	color: inherit;
}

/* On the default dark background (#00372f) */
.card:nth-child(3n + 1),
.feature-grid__item:nth-child(3n + 1) {
	background:
		radial-gradient(circle at 100% 0%, rgba(0, 171, 143, 0.3), transparent 60%),
		linear-gradient(145deg, #005548 0%, #003d34 55%, #00221c 100%);
}

.card:nth-child(3n + 2),
.feature-grid__item:nth-child(3n + 2) {
	background:
		radial-gradient(circle at 100% 0%, rgba(0, 171, 143, 0.22), transparent 60%),
		linear-gradient(145deg, #004a3e 0%, #00302a 55%, #001813 100%);
}

.card:nth-child(3n),
.feature-grid__item:nth-child(3n) {
	background:
		radial-gradient(circle at 100% 0%, rgba(0, 171, 143, 0.14), transparent 60%),
		linear-gradient(145deg, #003f35 0%, #00261f 55%, #000d0b 100%);
}

/* Deliverables tiles (four steps) and the key result box, on the default dark.
   The key result box starts at the section colour so its teal eyebrow keeps
   4.5:1, and gets a stronger glow instead of a lighter start. */
.deliverables-grid__item:nth-child(4n + 1) {
	background:
		radial-gradient(circle at 100% 0%, rgba(0, 171, 143, 0.3), transparent 60%),
		linear-gradient(145deg, #005548 0%, #003d34 55%, #00221c 100%);
}

.deliverables-grid__item:nth-child(4n + 2) {
	background:
		radial-gradient(circle at 100% 0%, rgba(0, 171, 143, 0.22), transparent 60%),
		linear-gradient(145deg, #004a3e 0%, #00302a 55%, #001813 100%);
}

.deliverables-grid__item:nth-child(4n + 3) {
	background:
		radial-gradient(circle at 100% 0%, rgba(0, 171, 143, 0.14), transparent 60%),
		linear-gradient(145deg, #003f35 0%, #00261f 55%, #000d0b 100%);
}

.deliverables-grid__item:nth-child(4n) {
	background:
		radial-gradient(circle at 100% 0%, rgba(0, 171, 143, 0.08), transparent 60%),
		linear-gradient(145deg, #00352d 0%, #001e19 55%, #000706 100%);
}

.case-study__result {
	background:
		radial-gradient(circle at 100% 0%, rgba(0, 171, 143, 0.35), transparent 65%),
		linear-gradient(145deg, #00372f 0%, #00231d 55%, #000d0b 100%);
}

/* On the brand green (#004e42) */
:is(.block--tier-highlights, #tier-compliance_frameworks) .card:nth-child(3n + 1) {
	background:
		radial-gradient(circle at 100% 0%, rgba(0, 171, 143, 0.3), transparent 60%),
		linear-gradient(145deg, #00544a 0%, #003f35 55%, #00261f 100%);
}

:is(.block--tier-highlights, #tier-compliance_frameworks) .card:nth-child(3n + 2) {
	background:
		radial-gradient(circle at 100% 0%, rgba(0, 171, 143, 0.22), transparent 60%),
		linear-gradient(145deg, #00463b 0%, #00312a 55%, #001b16 100%);
}

:is(.block--tier-highlights, #tier-compliance_frameworks) .card:nth-child(3n) {
	background:
		radial-gradient(circle at 100% 0%, rgba(0, 171, 143, 0.14), transparent 60%),
		linear-gradient(145deg, #00382f 0%, #00251f 55%, #000f0c 100%);
}

.tier-highlights__counter {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	width: 4rem;
	height: auto;
}

/* Testimonial slider */

.block--testimonial-slider {
	background: #00ab8f;
	color: #fff;
	border: none;
}

.testimonial-slider {
	max-width: 40rem;
	text-align: left;
}

.testimonial-slider__item {
	margin: 0;
	display: none;
}

.testimonial-slider__item.is-active {
	display: block;
}

.testimonial-slider__mark {
	display: block;
	font-family: var(--font-heading);
	font-size: 4rem;
	line-height: 1;
	color: color-mix(in srgb, #fff 35%, transparent);
}

.testimonial-slider__quote {
	margin-top: 0;
	font-size: var(--font-size-xl);
	font-weight: 500;
}

.testimonial-slider__attribution {
	color: color-mix(in srgb, #fff 75%, transparent);
	font-size: var(--font-size-sm);
}

/* CTA form */

.cta-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	align-items: start;
}

@media (max-width: 44rem) {
	.cta-form {
		grid-template-columns: 1fr;
	}
}

/* Footer — dark green, mirroring the brand's reversed logo treatment.
   Structure (layout modelled on wizardpi.co.uk's footer, not their styling):
   1. CTA strip  2. four-column link menu  3. social icon row  4. legal bar. */

.site-footer {
	background: var(--color-accent-strong);
	color: var(--color-accent-contrast);
}

.site-footer a {
	color: inherit;
}

/* 1. CTA strip */

.footer-cta {
	border-bottom: 1px solid color-mix(in srgb, var(--color-accent-contrast) 15%, transparent);
	background-image: url("../images/arca-icon-grad-right.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
}

.footer-cta__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding-block: var(--space-4);
}

.footer-cta__logo {
	display: block;
	flex-shrink: 0;
	width: 75%;
}

@media (min-width: 768px) {
	.footer-cta__logo {
		max-width: 300px;
	}
}

.footer-cta__logo img {
	display: block;
	/* width (not height) drives sizing here, since .footer-cta__logo now
	   controls the box via width: 75% / max-width: 300px — a fixed height
	   with width:auto would fight that constraint and distort the image
	   (confirmed: this logo file's wide aspect ratio was being squashed
	   once its auto-computed width got clamped by the global img max-width
	   reset without height following proportionally). */
	width: 100%;
	height: auto;
	max-height: 2rem;
}

.footer-cta__text {
	flex: 1 1 20rem;
	margin: 0;
	font-size: var(--font-size-lg);
}

/* 2. Four-column link menu */

.footer-columns {
	border-bottom: 1px solid color-mix(in srgb, var(--color-accent-contrast) 15%, transparent);
}

.footer-columns__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
	padding-block: var(--space-4);
}

.footer-column__heading {
	margin: 0 0 var(--space-2);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: 800;
	letter-spacing: 0.05em;
	color: rgb(0, 171, 143);
}

.footer-column__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-column__list li {
	font-size: 0.9rem;
	line-height: 1.4;
}

.footer-column__list a {
	text-decoration: none;
}

.footer-column__list a:hover {
	color: var(--color-accent);
}

/* 3. Social icon row */

.footer-social {
	padding-block: var(--space-3);
	border-bottom: 1px solid color-mix(in srgb, var(--color-accent-contrast) 15%, transparent);
}

.footer-social .social-links {
	justify-content: flex-start;
}

/* 4. Legal bar */

.footer-legal-bar {
	padding-block: var(--space-2);
}

/* 80% of the normal wrap width, still starting at the wrap's left edge so it
   lines up with the footer columns above (a plain centred 80% would not). */
.footer-legal-bar__inner {
	width: calc(min(100%, var(--wrap-max-width)) * 0.8);
	margin-left: calc((100% - min(100%, var(--wrap-max-width))) / 2);
	margin-right: auto;
}

.footer-legal-bar__copy {
	margin: 0;
	color: color-mix(in srgb, var(--color-accent-contrast) 70%, var(--color-accent-strong));
	font-size: var(--font-size-sm);
	text-align: left;
}

.footer-legal-bar__company {
	margin-top: var(--space-1);
	font-size: 0.6rem;
}

@media (max-width: 768px) {
	.footer-cta {
		background-image: none;
	}

	.footer-cta__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.footer-columns__inner {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
}

/* Gravity Forms — wire the brand's alert colour into validation states */

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors {
	color: var(--color-danger);
}

/* !important on both rules below: confirmed live (same as .gform_button
   earlier) that Gravity Forms' own CSS otherwise wins on border-color and
   background-color. Both are !important so normal specificity still decides
   between them — .gfield_error's selector is more specific, so an invalid
   field's red border correctly wins over the plain transparent one. */
.gform_wrapper .gfield_error .ginput_container input,
.gform_wrapper .gfield_error .ginput_container textarea,
.gform_wrapper .gfield_error .ginput_container select {
	border-color: var(--color-danger) !important;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea {
	border-color: transparent !important;
	background-color: color-mix(in srgb, #00ab8f 10%, white) !important;
	box-shadow: none !important;
}

/* Company Details shortcodes/functions — [company_address], [company_phone], etc. */

.company-address {
	font-style: normal;
}

.company-phone,
.company-email {
	color: var(--color-accent-strong);
	text-decoration: none;
}

.company-phone:hover,
.company-email:hover {
	color: var(--color-accent);
}

.company-registration-number {
	color: var(--color-ink-muted);
	font-size: var(--font-size-sm);
}

.social-links {
	display: flex;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links__item {
	display: inline-flex;
	color: var(--color-accent);
}

.social-links__item svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

.social-links__item:hover {
	color: #fff;
}

/* .site-footer a (colour: inherit) would otherwise win inside the footer. */
.site-footer .social-links__item {
	color: var(--color-accent);
}

.site-footer .social-links__item:hover {
	color: #fff;
}


/* Product page blocks (Iron Table): section head, problem list, numbered
   steps, stat row, scored list, deliverables grid, comparison table and CTA
   band. They use the default dark block scheme, with no divider lines
   between them. */

.block--problem-list,
.block--numbered-steps,
.block--stat-row,
.block--scored-list,
.block--deliverables-grid,
.block--comparison-table,
.block--cta-band {
	border-bottom: none;
}

.section-head {
	max-width: 46rem;
	margin-bottom: var(--space-4);
}

.section-head h2 {
	margin-bottom: var(--space-2);
}

.section-head__lead {
	margin: 0;
	font-size: var(--font-size-lg);
}

.section-head > :last-child {
	margin-bottom: 0;
}

/* Problem list */

.problem-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-4) var(--space-3);
}

.problem-list__item {
	padding-top: var(--space-2);
	border-top: 3px solid #00ab8f;
}

.problem-list__item h3 {
	margin-bottom: var(--space-1);
}

.problem-list__item p {
	margin: 0;
}

/* Numbered steps */

.numbered-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--space-4) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.numbered-steps__number {
	display: block;
	margin-bottom: var(--space-2);
	font-family: var(--font-heading);
	font-size: 3rem;
	line-height: 1;
	color: #00ab8f;
}

.numbered-steps__item h3 {
	margin-bottom: var(--space-1);
}

.numbered-steps__item p {
	margin: 0;
}

/* Stat row: left-aligned to sit under the left-aligned section head */

.block--stat-row .credentials-stats {
	text-align: left;
}

/* Scored list */

.scored-list {
	display: grid;
	gap: var(--space-4);
}

/* Two columns, so four items sit as a tidy 2 x 2 rather than 3 + 1. */
@media (min-width: 768px) {
	.scored-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.scored-list__item {
	position: relative;
	padding-left: 1.25rem;
}

.scored-list__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 2px;
	background: #00ab8f;
}

.scored-list__label {
	margin-bottom: var(--space-1);
	font-size: var(--font-size-lg);
}

.scored-list__item p {
	margin: 0;
}

/* Deliverables grid */

.deliverables-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--space-3);
}

.deliverables-grid__item {
	padding: var(--space-3);
}

/* The Arca mark (five blocks), in brand teal, at the top of each tile. The
   feature grid shows it too, unless an item has its own icon, and so do the
   case study cards. */
.deliverables-grid__item::before,
.feature-grid__item:not(:has(.feature-grid__icon))::before,
.card--case-study::before {
	content: "";
	display: block;
	width: 3rem;
	aspect-ratio: 152.4 / 62.8;
	margin-bottom: var(--space-2);
	background: url("../images/arca-five-blocks.svg") no-repeat left center / contain;
}

.deliverables-grid__item h3 {
	margin-bottom: var(--space-1);
}

.deliverables-grid__item p {
	margin: 0;
}

/* Comparison table */

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

.comparison-table th,
.comparison-table td {
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	text-align: left;
	vertical-align: top;
}

.comparison-table thead th {
	border-bottom-width: 2px;
	font-family: var(--font-heading);
	font-weight: 800;
	color: var(--heading-color);
}

.comparison-table tbody th {
	font-weight: 600;
	color: var(--heading-color);
}

.comparison-table__ours {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-weight: 600;
}

@media (max-width: 767px) {
	.comparison-table,
	.comparison-table tbody,
	.comparison-table tr,
	.comparison-table th,
	.comparison-table td {
		display: block;
	}

	/* The column headings are repeated on each cell via data-label instead. */
	.comparison-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.comparison-table tr {
		margin-bottom: var(--space-3);
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.06);
		overflow: hidden;
	}

	.comparison-table th,
	.comparison-table td {
		border-bottom: none;
	}

	.comparison-table tbody th {
		padding-bottom: 0;
	}

	.comparison-table td {
		padding-top: var(--space-1);
	}

	.comparison-table td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.75rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--color-on-dark);
	}

	.comparison-table__ours {
		background: rgba(255, 255, 255, 0.1);
	}
}

/* CTA band */

.block--cta-band {
	background: var(--color-accent-strong);
}

.cta-band {
	text-align: center;
}

.cta-band h2 {
	margin-bottom: var(--space-3);
	color: #fff;
}

/* Numbered steps with a demo video: steps (2 x 2) beside a portrait video
   card from 900px up; stacked, with the card centred below the steps, under
   that. Without a video the steps use the full row as before. */

.numbered-steps-layout {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 900px) {
	.numbered-steps-layout--with-media {
		grid-template-columns: 1fr minmax(16rem, 22rem);
		align-items: start;
		gap: var(--space-5);
	}

	.numbered-steps-layout--with-media .numbered-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

.demo-video {
	width: 100%;
	max-width: 22rem;
	margin: 0;
	justify-self: center;
}

.demo-video__frame {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.demo-video__player,
.demo-video__poster {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.demo-video__caption {
	margin-top: var(--space-2);
	font-size: var(--font-size-sm);
}

.demo-video__toggle {
	position: absolute;
	right: var(--space-1);
	bottom: var(--space-1);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	cursor: pointer;
}

.demo-video__toggle[hidden] {
	display: none;
}

.demo-video__toggle:hover {
	background: rgba(0, 0, 0, 0.8);
}

.demo-video__toggle:focus-visible {
	outline: 2px solid #00ab8f;
	outline-offset: 2px;
}

.demo-video__icon {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

.demo-video__icon--play,
.demo-video__toggle.is-paused .demo-video__icon--pause {
	display: none;
}

.demo-video__toggle.is-paused .demo-video__icon--play {
	display: block;
}

/* Gravity Forms text on the dark default block (the contact form block).
   !important throughout for the same reason as the rest of the Gravity Forms
   styling above: its own bundled CSS sets these colours with a more specific,
   later-loaded rule. The input fields themselves stay light (tinted), so
   only the text around them changes. Required markers and error messages
   use a lighter red, since the brand red (#af272f) is only ~2.7:1 on this
   background. */
.block--cta-form .gform_wrapper .gform-field-label,
.block--cta-form .gform_wrapper .gform-field-label__text,
.block--cta-form .gform_wrapper .gfield_label,
.block--cta-form .gform_wrapper legend,
.block--cta-form .gform_wrapper .gfield_description,
.block--cta-form .gform_wrapper .ginput_counter {
	color: var(--color-on-dark) !important;
}

.block--cta-form .gform_wrapper .gform-field-label__text,
.block--cta-form .gform_wrapper .gfield_label,
.block--cta-form .gform_wrapper legend {
	color: #fff !important;
}

.block--cta-form .gform_wrapper .gfield_required,
.block--cta-form .gform_wrapper .gfield_validation_message,
.block--cta-form .gform_wrapper .validation_message,
.block--cta-form .gform_wrapper .gform_validation_errors,
.block--cta-form .gform_wrapper .gform_validation_errors h2 {
	color: #ff8a80 !important;
}