/*!
Theme Name: allveri
Theme URI: https://github.com/hreilly/design.gvhomes.com
Author: Hannah Reilly
Author URI: https://github.com/hreilly
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: allveri

allveri is based on Underscores https://underscores.me/, (C) 2012-2025 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*! modern-normalize (v3.x style) | MIT License | https://github.com/sindresorhus/modern-normalize */

/* -------------------------------------------------------------
   Document
------------------------------------------------------------- */

/**
 * Use a better box model (opinionated).
 */
*,
::before,
::after {
	box-sizing: border-box;
}

/**
 * 1. Improve consistency of default fonts in all browsers.
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in iOS.
 * 4. Use a more readable tab size (opinionated).
 */
html {
	font-family:
		system-ui,
		-apple-system,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji";
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
}

html {
	scroll-behavior: smooth;
}

html, body {
  overflow-x: clip;
  overscroll-behavior-y: none;
}

/* -------------------------------------------------------------
   Sections
------------------------------------------------------------- */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/* -------------------------------------------------------------
   Grouping content
------------------------------------------------------------- */

/**
 * 1. Add the correct height in Firefox.
 * 2. Correct the inheritance of border color in Firefox.
 */
hr {
	height: 0;
	color: inherit;
}

/* -------------------------------------------------------------
   Text-level semantics
------------------------------------------------------------- */

/**
 * Add the correct text decoration in Chrome, Edge, and Safari.
 */
abbr[title] {
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Edge and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Improve consistency of default fonts in all browsers.
 * 2. Correct the odd 'em' font sizing in all browsers.
 */
code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		"Liberation Mono",
		Menlo,
		monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* -------------------------------------------------------------
   Tabular data
------------------------------------------------------------- */

/**
 * 1. Remove text indentation from table contents in Chrome and Safari.
 * 2. Correct table border color inheritance in Chrome and Safari.
 */
table {
	text-indent: 0;
	border-color: currentcolor;
}

/* -------------------------------------------------------------
   Forms
------------------------------------------------------------- */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font: inherit;
	line-height: 1.15;
	margin: 0;
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Remove the padding so developers are not caught out when they zero out 'fieldset' elements.
 */
legend {
	padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome and Firefox.
 */
progress {
	vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to 'inherit' in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* -------------------------------------------------------------
   Interactive
------------------------------------------------------------- */

/**
 * Add the correct display in Chrome and Safari.
 */
summary {
	display: list-item;
}

/*--------------------------------------------------------------
# Global Variables
--------------------------------------------------------------*/

:root {
    font-size: 16px;
    --dark-color: #000000;
    --medium-color: #aaaaaa;
    --light-color: #ffffff;
	--bright-color: #2962ff;
	--bright-color-half-op: rgba(41,98,255,.5);
	--bright-color-light: rgba(41,98,255,.2);
	--bright-color-deep: #1e40e0;
	--bright-color-cool: #1e6fe6;
	--accent-color-1: #00b0ff;
	--accent-color-2: #1de9b6;
	--accent-color-3: #ccff90;
	--accent-color-4: #ffb74d;
	--accent-color-5: #ff5722;
	--accent-color-6: #a329c1;

	/* Deep Purple lifted for small text on dark glass (4.6:1 on the
	   Health card, where --accent-color-6 is 2.5:1) */
	--accent-color-6-tint: #bb61d1;
	--accent-color-2-half-op: rgba(0,176,255,.5);
	--accent-color-3-half-op: rgba(29,233,182,.5);
	--element-shadow: 1px 1px 5px rgba(42, 39, 38, .2);
	--element-shadow-2: 0px 0px 15px rgba(42, 39, 38, .3);
	--accent-shadow-1: 0px 0px 15px rgba(41,98,255,.3);
	--max-characters: 72ch;
	--extra-wide-max-width: 1600px;
	--wide-max-width: 1280px;
	--mid-max-width: 1024px;
	--narrow-max-width: 720px;
	/* Prose bands (FAQ, rich-text, experience) match ogilvy / body copy */
	--prose-max-width: var(--narrow-max-width);

	/* Brand Light Gray: hairlines on light grounds (FAQ item rules) */
	--light-gray: #e5e7eb;

	/* Case-study / dark-section text & chip palette */
	--cs-ink: #0b0e14;
	--cs-body: #2a303c;
	--cs-muted: #c3cde4;
	--cs-muted-2: #c7d1e8;
    --primary-font: "Literata", sans-serif;
	--accent-font: "Poppins", sans-serif;
	--serif-font: "Literata", serif;
	--thin-border: 1px solid #000000;
	--transition-fast: 0.15s ease;
	
	/* Split-page insets */
	--sp-h1-inset: 7dvw;
	--sp-h2-inset: 4.5rem;
	--sp-body-inset-inner: 5dvw;
	--sp-body-inset-outer: 5dvw;
}

/* Desktop fluid scaling — ramps from 16px at mobile to 20px at 1920px */
@media screen and (min-width: 1024px) {
	:root {
		font-size: calc(4px + 0.833vw);
	}
}

/* Cap font scaling at extra-wide breakpoint */
@media screen and (min-width: 1920px) {
	:root {
		font-size: 20px;
	}
}

/*--------------------------------------------------------------
# Global Utilities (av-)
--------------------------------------------------------------*/

/* Background Colors */
.av-bg-1      { background-color: var(--accent-color-1); }
.av-bg-2      { background-color: var(--accent-color-2); }
.av-bg-3      { background-color: var(--accent-color-3); }
.av-bg-4      { background-color: var(--accent-color-4); }
.av-bg-5      { background-color: var(--accent-color-5); }
.av-bg-6      { background-color: var(--accent-color-6); }
.av-bg-bright { background-color: var(--bright-color); }
.av-bg-dark   { background-color: var(--dark-color); }
.av-bg-white  { background-color: var(--light-color); }

/* Page headline: the one h1 role for inner pages (shared hero, text hero,
   Contact). Declared before the text colours so a paired av-text-* wins. */
.av-headline {
	font-family: var(--accent-font);
	font-weight: 700;
	font-size: clamp(2rem, 6vw, 4rem);
	line-height: 1.15;
	max-width: 20ch;
	margin: 0;
	text-wrap: balance;
}

/* Statement line: one sentence that resolves a section (the bridge under a
   card row). Poppins 700, full measure. Element-qualified so a component's
   p rule at (0,1,1) does not outrank the role. */
:is(p, div).av-statement {
	font-family: var(--accent-font);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	text-wrap: pretty;
	margin: 0;
}

/* Lead paragraph: the brand guide's lead paragraphs in Literata 500. */
:is(p, div).av-lead {
	font-family: var(--primary-font);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.6;
	max-width: 60ch;
	text-wrap: pretty;
}

/* Dek: the hero sub-line values on a line inside a section (a sub-line
   that should sit under the answer, not above it). */
:is(p, div, h2, h3).av-dek {
	font-family: var(--accent-font);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.5;
	text-wrap: pretty;
}

@media screen and (min-width: 1024px) {

	:is(p, div).av-statement {
		font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	}

	:is(p, div).av-lead {
		font-size: 1.3125rem;
	}

	:is(p, div, h2, h3).av-dek {
		font-size: calc(1.2rem + 0.15vw);
	}
}

/* Text link: the one secondary-action style (hero, FAQ side link). Colour
   comes from a paired utility (av-text-light on dark, av-text-bright on
   light), which is declared below so it beats the inherit here. */
.av-link,
a.av-link:visited {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	font-family: var(--accent-font);
	font-size: 1rem;
	font-weight: 600;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.av-link:hover,
.av-link:focus-visible {
	text-decoration-thickness: 2px;
}

.av-link i {
	color: inherit;
}

/* Text Colors (+ :visited so link utility classes beat a:visited) */
.av-text-dark,
a.av-text-dark:visited   { color: var(--dark-color); }
.av-text-light,
a.av-text-light:visited  { color: var(--light-color); }
.av-text-bright,
a.av-text-bright:visited { color: var(--bright-color); }
.av-text-1,
a.av-text-1:visited      { color: var(--accent-color-1); }
.av-text-2,
a.av-text-2:visited      { color: var(--accent-color-2); }
.av-text-3,
a.av-text-3:visited      { color: var(--accent-color-3); }
.av-text-4,
a.av-text-4:visited      { color: var(--accent-color-4); }
.av-text-5,
a.av-text-5:visited      { color: var(--accent-color-5); }
.av-text-6,
a.av-text-6:visited      { color: var(--accent-color-6); }

/* Deep Purple tint: small text on dark glass (--accent-color-6 is too dark) */
.av-text-6-tint,
a.av-text-6-tint:visited {
	color: var(--accent-color-6-tint);
}

/* Text Colors — cascade to child elements */
.av-text-dark p, .av-text-dark h2   { color: var(--dark-color); }
.av-text-light p, .av-text-light h2  { color: var(--light-color); }
.av-text-bright p, .av-text-bright h2 { color: var(--bright-color); }
.av-text-1 p, .av-text-1 h2      { color: var(--accent-color-1); }
.av-text-2 p, .av-text-2 h2      { color: var(--accent-color-2); }
.av-text-3 p, .av-text-3 h2      { color: var(--accent-color-3); }
.av-text-4 p, .av-text-4 h2      { color: var(--accent-color-4); }
.av-text-5 p, .av-text-5 h2      { color: var(--accent-color-5); }
.av-text-6 p, .av-text-6 h2      { color: var(--accent-color-6); }

/* Shadows */
.av-shadow        { box-shadow: var(--element-shadow); }
.av-shadow-2      { box-shadow: var(--element-shadow-2); }
.av-shadow-accent { box-shadow: var(--accent-shadow-1); }

/* Border Colors */
.av-border-1      { border-color: var(--accent-color-1); }
.av-border-2      { border-color: var(--accent-color-2); }
.av-border-3      { border-color: var(--accent-color-3); }
.av-border-4      { border-color: var(--accent-color-4); }
.av-border-5      { border-color: var(--accent-color-5); }
.av-border-6      { border-color: var(--accent-color-6); }
.av-border-bright { border-color: var(--bright-color); }
.av-border-dark   { border-color: var(--dark-color); }
.av-border-white  { border-color: var(--light-color); }

/* CTA (Call-to-Action) Base & Modifiers */
.av-cta {
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	font-family: var(--accent-font);
	font-weight: 700;
	line-height: 1.5;
	border-radius: 999px;
	padding: 10px 20px;
	transition: background-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.av-cta:hover {
	filter: brightness(0.85);
}

/* No filter on CTA inside clickable cards - card handles hover */
a.cd .av-cta:hover,
a.cd:hover .av-cta {
	filter: none;
}

/* CTA scales subtly + color shifts on card hover (ogilvy-style) */
a.cd:hover .av-cta {
	transform: scale(1.03);
}

/* CTA gradient on card hover */
a.cd:hover .av-cta.av-bg-bright { background: linear-gradient(135deg, var(--bright-color), var(--accent-color-1)); }
a.cd:hover .av-cta.av-bg-1 { background: linear-gradient(135deg, var(--accent-color-1), var(--accent-color-2)); }
a.cd:hover .av-cta.av-bg-2 { background: linear-gradient(135deg, var(--accent-color-2), var(--accent-color-3)); }
a.cd:hover .av-cta.av-bg-3 { background: linear-gradient(135deg, var(--accent-color-3), var(--accent-color-4)); }
a.cd:hover .av-cta.av-bg-4 { background: linear-gradient(135deg, var(--accent-color-4), var(--accent-color-5)); }
a.cd:hover .av-cta.av-bg-5 { background: linear-gradient(135deg, var(--accent-color-5), var(--accent-color-6)); }
a.cd:hover .av-cta.av-bg-6 { background: linear-gradient(135deg, var(--accent-color-6), var(--bright-color)); }
a.cd:hover .av-cta.av-bg-dark { background-color: var(--bright-color); color: var(--light-color); }

/* The same hover for a button outside a card (the hero's primary button),
   as a.cd:hover gives its CTA: the subtle scale on the card's transition,
   the gradient (its colour into the next on the wheel), no brightness dip,
   and its own label colour held (the global a:hover would turn it teal). */
.av-cta--hover-grad {
	transition: color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.av-cta--hover-grad:hover {
	filter: none;
	transform: scale(1.03);
}

.av-cta--hover-grad.av-text-light:hover {
	color: var(--light-color);
}

.av-cta--hover-grad.av-text-dark:hover {
	color: var(--dark-color);
}

.av-cta--hover-grad.av-bg-bright:hover {
	background: linear-gradient(135deg, var(--bright-color), var(--accent-color-1));
}

.av-cta--hover-grad.av-bg-1:hover {
	background: linear-gradient(135deg, var(--accent-color-1), var(--accent-color-2));
}

.av-cta--hover-grad.av-bg-2:hover {
	background: linear-gradient(135deg, var(--accent-color-2), var(--accent-color-3));
}

.av-cta--hover-grad.av-bg-3:hover {
	background: linear-gradient(135deg, var(--accent-color-3), var(--accent-color-4));
}

.av-cta--hover-grad.av-bg-4:hover {
	background: linear-gradient(135deg, var(--accent-color-4), var(--accent-color-5));
}

.av-cta--hover-grad.av-bg-5:hover {
	background: linear-gradient(135deg, var(--accent-color-5), var(--accent-color-6));
}

.av-cta--hover-grad.av-bg-6:hover {
	background: linear-gradient(135deg, var(--accent-color-6), var(--bright-color));
}

/* Outline CTA fills on card hover */
a.cd:hover .av-cta--outline.av-border-bright { background-color: var(--bright-color); color: var(--light-color); }
a.cd:hover .av-cta--outline.av-border-1 { background-color: var(--accent-color-1); color: var(--light-color); }
a.cd:hover .av-cta--outline.av-border-2 { background-color: var(--accent-color-2); color: var(--light-color); }
a.cd:hover .av-cta--outline.av-border-3 { background-color: var(--accent-color-3); color: var(--dark-color); }
a.cd:hover .av-cta--outline.av-border-4 { background-color: var(--accent-color-4); color: var(--dark-color); }
a.cd:hover .av-cta--outline.av-border-5 { background-color: var(--accent-color-5); color: var(--dark-color); }
a.cd:hover .av-cta--outline.av-border-6 { background-color: var(--accent-color-6); color: var(--light-color); }

/* Outline button hover - fill with color */
.av-cta--outline:hover {
	filter: none;
}

.av-cta--outline.av-border-bright:hover { background-color: var(--bright-color); color: var(--light-color); }
.av-cta--outline.av-border-dark:hover { background-color: var(--dark-color); color: var(--light-color); }
.av-cta--outline.av-border-1:hover { background-color: var(--accent-color-1); color: var(--light-color); }
.av-cta--outline.av-border-2:hover { background-color: var(--accent-color-2); color: var(--light-color); }
.av-cta--outline.av-border-3:hover { background-color: var(--accent-color-3); color: var(--dark-color); }
.av-cta--outline.av-border-4:hover { background-color: var(--accent-color-4); color: var(--dark-color); }
.av-cta--outline.av-border-5:hover { background-color: var(--accent-color-5); color: var(--dark-color); }
.av-cta--outline.av-border-6:hover { background-color: var(--accent-color-6); color: var(--light-color); }

.av-cta--lg {
	padding: 16px 32px;
	font-size: calc(1rem + .2vw);
}

.av-cta--sm {
	padding: 6px 14px;
	font-size: .85rem;
}

.av-cta--uppercase {
	text-transform: uppercase;
	letter-spacing: 1px;
}

.av-cta--block {
	display: block;
	width: 100%;
	text-align: center;
}

.av-cta--outline {
	background-color: transparent;
	border-width: 2px;
	border-style: solid;
}

.av-cta--grad {
	background: linear-gradient(90deg, var(--accent-color-1), var(--accent-color-2) 55%, var(--accent-color-3));
	color: var(--dark-color);
}

.av-cta--grad:hover {
	filter: brightness(1.05);
}

/* Container Widths */
.av-container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.av-container--xs     { max-width: var(--narrow-max-width); }
.av-container--sm     { max-width: var(--mid-max-width); }
.av-container--md     { max-width: var(--wide-max-width); }
.av-container--lg     { max-width: var(--extra-wide-max-width); }
.av-container--prose  { max-width: var(--max-characters); }
.av-container--full   { max-width: 100%; padding-left: 0; padding-right: 0; }

/* Gutter System — mobile-first: fixed gutters default, proportional at desktop */
.av-gutter-sm,
.av-gutter-md,
.av-gutter-lg,
.av-gutter-max {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
}

.av-gutter-sm > *,
.av-gutter-md > *,
.av-gutter-lg > *,
.av-gutter-max > * {
	grid-column: 2;
}

@media screen and (min-width: 1024px) {
	.av-gutter-sm  { grid-template-columns: 1fr minmax(0, 9fr) 1fr; }
	.av-gutter-md  { grid-template-columns: 2fr minmax(0, 9fr) 2fr; }
	.av-gutter-lg  { grid-template-columns: 3fr minmax(0, 9fr) 3fr; }
	.av-gutter-max { grid-template-columns: 1fr minmax(0, 60fr) 1fr; }
}

/* Section spacing scale (design audit 3.3). The section owns its vertical
   padding; a card grid, ct-header or rich-text column directly inside a
   padded section carries none. Mobile value by default, desktop at 1024px.
   Qualified with the element so the utility beats a component's own
   single-class padding declared later in this file. */
:is(section, div).av-py-s {
	padding-top: 32px;
	padding-bottom: 32px;
}

:is(section, div).av-py-m {
	padding-top: 56px;
	padding-bottom: 56px;
}

:is(section, div).av-py-l {
	padding-top: 80px;
	padding-bottom: 80px;
}

:is(section, div):is(.av-py-s, .av-py-m, .av-py-l) > :is(.cd-grid, .ct-header, .rich-text, .cd-grid-footer) {
	padding-bottom: 0;
}

/* A dotted-rule footer keeps the rule's own top padding. */
:is(section, div):is(.av-py-s, .av-py-m, .av-py-l) > :is(.cd-grid, .ct-header, .rich-text, .cd-grid-footer):not(.av-rule-dotted) {
	padding-top: 0;
}

/* With their own padding gone, a header and the content under it, and a
   grid and the footer line under it, keep the audit's 24 / 40px gap. */
:is(section, div):is(.av-py-s, .av-py-m, .av-py-l) > .ct-header:not(:last-child) {
	margin-bottom: 24px;
}

:is(section, div):is(.av-py-s, .av-py-m, .av-py-l) > * + .cd-grid-footer {
	margin-top: 24px;
}

@media screen and (min-width: 1024px) {

	:is(section, div).av-py-s {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	:is(section, div).av-py-m {
		padding-top: 96px;
		padding-bottom: 96px;
	}

	:is(section, div).av-py-l {
		padding-top: 128px;
		padding-bottom: 128px;
	}

	:is(section, div):is(.av-py-s, .av-py-m, .av-py-l) > .ct-header:not(:last-child) {
		margin-bottom: 40px;
	}

	:is(section, div):is(.av-py-s, .av-py-m, .av-py-l) > * + .cd-grid-footer {
		margin-top: 40px;
	}
}

/* Split: heading beside content. One column on mobile; 5:7 from 1024px.
   Carries no padding, so it needs no entry in the av-py-* child reset. */
.av-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 24px;
}

@media screen and (min-width: 1024px) {

	.av-split {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: 64px;
		align-items: start;
	}
}

/* A ct-header in a split column carries no padding: the section's
   av-py-* and the split's gaps own the spacing (as the av-py-* child
   reset does for a ct-header directly in a section). */
.av-split > .ct-header {
	padding: 0;
}

/* A lead that opens a split column starts flush with the other column. */
.av-split > * > :is(p, div).av-lead:first-child {
	margin-top: 0;
}

/* Dotted rule: the ogilvy and FAQ shelf above a line that resolves a
   section (a bridge, a proof row). Ink on light, 50% white on dark. */
:is(p, div).av-rule-dotted {
	border-top: 2px dotted var(--dark-color);
	padding-top: 24px;
}

.av-bg-dark :is(p, div).av-rule-dotted,
.av-dark-radial :is(p, div).av-rule-dotted {
	border-top-color: rgba(255, 255, 255, 0.5);
}

@media screen and (min-width: 1024px) {

	:is(p, div).av-rule-dotted {
		padding-top: 32px;
	}
}

/* Join a section to its neighbour on the same ground. */
.av-pt-0 {
	padding-top: 0 !important;
}

.av-pb-0 {
	padding-bottom: 0 !important;
}

/* Light band: one continuous light ground for a run of light sections.
   Same radial stack as ogilvy-layout; the sections inside drop their own. */
.av-light-band {
	background:
		radial-gradient(ellipse at 0% 0%, rgba(204, 255, 144, 0.2) 0%, transparent 50%),
		radial-gradient(ellipse at 100% 0%, rgba(163, 41, 193, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse at 100% 100%, rgba(255, 183, 77, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse at 0% 100%, rgba(0, 176, 255, 0.2) 0%, transparent 50%),
		var(--light-color);
}

.av-light-band .ogilvy-layout,
.av-light-band .cd-grid-section--light,
.av-light-band .rich-text-section--light {
	background: none;
}

/* Eyebrow label: the ct-header h2 values as a utility. Dark ink on light
   ground by default; 60% white inside a dark ground or light-text block. */
.av-eyebrow {
	font-family: var(--accent-font);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.2;
	color: rgba(0, 0, 0, 0.6);
	margin: 0 0 0.6rem;
}

@media screen and (min-width: 1024px) {

	.av-eyebrow {
		font-size: clamp(0.75rem, 1.2vw, 0.9rem);
	}
}

.av-bg-dark .av-eyebrow,
.av-dark-radial .av-eyebrow,
.av-text-light .av-eyebrow {
	color: rgba(255, 255, 255, 0.6);
}

.av-eyebrow.av-eyebrow--accent {
	color: var(--accent-color-1);
}

.av-eyebrow a,
.av-eyebrow a:visited {
	color: inherit;
	text-decoration: none;
}

.av-eyebrow a:hover,
.av-eyebrow a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Display size of an h1 on a lower-level heading, so a section can keep the
   h1 look while the page hero owns the only h1. Matches the base h1 rule. */
.av-h1 {
	font-size: calc(2rem + 0.5vw);
	margin-top: 0.67em;
	margin-bottom: 0.67em;
}

/* Transitions */
.av-transition { transition: var(--transition-fast); }

/* Gradients */
.av-grad-bright-6    { background: linear-gradient(135deg, var(--bright-color) 0%, var(--accent-color-6) 100%); }
.av-grad-1-2         { background: linear-gradient(135deg, var(--accent-color-1) 0%, var(--accent-color-2) 100%); }
.av-grad-2-3         { background: linear-gradient(135deg, var(--accent-color-2) 0%, var(--accent-color-3) 100%); }
.av-grad-3-4         { background: linear-gradient(135deg, var(--accent-color-3) 0%, var(--accent-color-4) 100%); }
.av-grad-4-5         { background: linear-gradient(135deg, var(--accent-color-4) 0%, var(--accent-color-5) 100%); }
.av-grad-5-6         { background: linear-gradient(135deg, var(--accent-color-5) 0%, var(--accent-color-6) 100%); }
.av-grad-dark-bright { background: linear-gradient(135deg, var(--dark-color) 0%, var(--bright-color) 100%); }
.av-grad-bright-dark { background: linear-gradient(135deg, var(--bright-color) 0%, var(--dark-color) 100%); }

/* Horizontal Gradients (left to right) */
.av-grad-h-bright-6    { background: linear-gradient(to right, var(--bright-color), var(--accent-color-6)); }
.av-grad-h-1-bright    { background: linear-gradient(to right, var(--accent-color-1), var(--bright-color)); }
.av-grad-h-bright-1    { background: linear-gradient(to right, var(--bright-color), var(--accent-color-1)); }
.av-grad-h-2-3         { background: linear-gradient(to right, var(--accent-color-2), var(--accent-color-3)); }
.av-grad-h-4-5         { background: linear-gradient(to right, var(--accent-color-4), var(--accent-color-5)); }

/* The home pipeline's spectrum (lime, teal, sky, Electric Blue, purple). */
.av-grad-h-spectrum {
	background: linear-gradient(to right, var(--accent-color-3), var(--accent-color-2), var(--accent-color-1), var(--bright-color), var(--accent-color-6));
}

/* Grid Overlay Base — sets up pseudo-element */
.av-grid {
	position: relative;
}

.av-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background-size: 30px 30px;
}

/* Grid Styles */
.av-grid--light::before {
	background-image:
		linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px);
}

.av-grid--light-solid::before {
	background-image:
		linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
}

.av-grid--dark::before {
	background-image:
		linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
}

.av-grid--dark-solid::before {
	background-image:
		linear-gradient(rgba(0,0,0,0.4) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,0,0,0.4) 1px, transparent 1px);
}

.av-grid--bright::before {
	background-image:
		linear-gradient(var(--bright-color-light) 1px, transparent 1px),
		linear-gradient(90deg, var(--bright-color-light) 1px, transparent 1px);
}

/* Grid Size Modifiers */
.av-grid--dense::before  { background-size: 15px 15px; }
.av-grid--large::before  { background-size: 60px 60px; }

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

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

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--primary-font);
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.5;
}

h1, h2, h3, h5, h6, h1 *, h2 *, h3 *, h5 *, h6 * {
	font-family: var(--accent-font);
	font-weight: 700;
}

h4, h4 * {
	font-family: var(--primary-font);
	font-size: calc(1rem + .2vw);
	font-weight: 400;
}

h1 {
	font-size: calc(2rem + .5vw);
}

h1.entry-title {
	text-decoration: underline;
	text-decoration-color: var(--bright-color);
	text-align: center;
	line-height: 1.3em;
	margin: 50px 20px;
}

h4.byline {
	margin: 50px auto; 
	text-align: center;
}

h6 {
	font-size: .8em;
}

p {
	margin-bottom: 1.5em;
	font-weight: 400;
	font-size: 1rem;
}

/* Brand rule: no italics anywhere on the site. */
em,
i,
cite,
dfn,
q,
var,
address {
	font-style: normal;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

.disclaimer {
	font-size: calc(.1vw + .7em);
	padding: 30px;
	font-weight: 300;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code, kbd, tt, var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr, acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark, ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

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

body {
	background: var(--light-color);
	margin: 0;
	padding: 0;
	max-width: 100vw;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul, ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: var(--dark-color);
	color: var(--light-color);
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1;
	padding: .6em 1em .4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active, button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Pagination
--------------------------------------------------------------*/

ul.page-numbers {
	list-style: none;
	margin: 40px 20px;
	display: flex;
	text-align: center;
	justify-content: center;
	padding-left: 0px;
}

a.page-numbers, span.page-numbers, a.page-numbers:visited {
	background-color: var(--bright-color);
	padding: 5px 12px 9px 12px;
	margin: 3px;
	text-decoration: none;
	color: var(--light-color);
	font-weight: bold;
	font-size: 1.1rem;
	border: var(--thin-border);
}

a.page-numbers:hover {
	opacity: .9;
	color: var(--light-color);
}

.page-numbers.current,
.page-numbers.current:hover {
	color: var(--light-color);
	background: var(--accent-color-2);
	text-decoration: none;
	cursor: default;
}

/*--------------------------------------------------------------
## Links & Buttons
--------------------------------------------------------------*/
a {
	color: var(--bright-color);
}

/* Visited = same as initial (never force dark/black on designed links) */
a:visited {
	color: var(--bright-color);
}

a:hover, a:focus, a:active {
	color: var(--accent-color-2);
}

a:focus {
	outline: 2px dotted #00B8D4;
}

a:hover, a:active {
	outline: 0;
}

/* Tag cloud (WordPress) */
.tag-cloud-link, .tag-cloud-link:focus, .tag-cloud-link:visited, .tag-cloud-link:active {
	background-color: var(--accent-color-2);
	padding: 5px 12px;
	margin: 3px;
	text-decoration: none;
	color: var(--light-color);
	font-size: .8rem;
	font-weight: 300;
}

.tag-cloud-link:hover {
	opacity: .9;
	color: var(--light-color);
}

.image-tile-link {
	transition: var(--transition-fast);
}

.image-tile-link:hover {
	opacity: .8;
}

/* Main nav CTA button */

#menu-item-47 a,
.main-navigation ul.menu > li:last-child > a {
	background-color: var(--bright-color);
    border-radius: 999px;
    padding: 8px 16px;
	transition: var(--transition-fast);
}

#menu-item-47 a:hover,
.main-navigation ul.menu > li:last-child > a:hover {
	background-color: var(--accent-color-6);
	transition: var(--transition-fast);
	color: var(--light-color);
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Main Navigation
--------------------------------------------------------------*/

.main-navigation {
	font-family: var(--accent-font);
	margin: 18px 0 auto auto;
	width: 60%;
	text-align: right;
	z-index: 1000000;
}

/* Hamburger button - visible on mobile */
.main-navigation button.menu-toggle {
	all: unset;
	cursor: pointer;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10001;
	line-height: 1;
}

.main-navigation button.menu-toggle::before {
	content: "☰";
	font-size: 32px;
	color: var(--light-color);
	transition: color 0.2s ease;
}

.main-navigation button.menu-toggle:hover::before {
	color: var(--bright-color);
}

.main-navigation button.menu-toggle[aria-expanded="true"]::before {
	content: "✕";
	font-size: 26px;
}

/* Overlay */
.nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.6);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 9998;
}

.nav-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Mobile menu panel - slides in from right */
.main-navigation .menu-header-menu-container {
	position: fixed;
	top: 0;
	right: 0;
	width: min(320px, 85vw);
	height: 100vh;
	height: 100dvh;
	background-color: rgba(0,0,0,.9);
	z-index: 9999;
	overflow-y: auto;
	overflow-x: hidden;
	box-shadow: -4px 0 20px rgba(0,0,0,0.15);
	border-left: 4px solid var(--accent-color-6);
	padding-left: 15px;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	-webkit-overflow-scrolling: touch;
}

.main-navigation.toggled .menu-header-menu-container {
	transform: translateX(0);
}

/* Mobile menu list */
.main-navigation ul.menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 70px 0 20px 20px; /* Top padding for close button clearance, left padding for spacing */
}

.main-navigation.toggled ul.menu {
	display: block;
}

.main-navigation li {
	text-transform: uppercase;
	position: relative;
}

/* Mobile menu links - right aligned to edge, text left aligned */
.main-navigation ul.menu > li > a,
.main-navigation ul.menu > li > a:visited {
	display: block;
	color: var(--dark-color);
	text-decoration: none;
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 700;
	padding: 14px 20px 14px 20px;
	margin: 0 0 8px 0;
	background-color: var(--accent-color-2);
	border-radius: 40px 0 0 40px;
	border-bottom: 4px solid var(--bright-color);
	transition: color 0.2s ease;
	text-align: left;
}

.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li > a:visited:hover {
	color: var(--bright-color);
}

/* Items with children */
.main-navigation li.menu-item-has-children {
	display: block;
	position: relative;
}

/* Link in items with children - make room for button */
.main-navigation li.menu-item-has-children > a {
	margin-right: 50px;
}

/* Mobile submenu toggle - absolutely positioned to the right of link */
.main-navigation button.mobile-submenu-toggle {
	all: unset;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 56px; /* Match link height */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: var(--accent-color-2);
	border-bottom: 4px solid var(--bright-color);
	color: var(--bright-color);
	font-size: 24px;
	font-weight: 700;
	transition: background-color 0.2s ease, color 0.2s ease;
	box-sizing: border-box;
}

.main-navigation button.mobile-submenu-toggle:hover {
	background-color: var(--bright-color);
	color: var(--light-color);
}

/* Mobile submenus - hidden by default with transition */
.main-navigation ul.sub-menu {
	list-style: none;
	margin: 0 0 0 40px;
	padding: 0;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
}

.main-navigation ul.sub-menu.is-open {
	max-height: 500px; /* Arbitrary large value */
	opacity: 1;
	padding: 10px 0;
}

/* Mobile submenu links - indented, text left aligned */
.main-navigation ul.sub-menu > li > a {
	display: block;
	color: var(--light-color);
	text-decoration: none;
	font-family: var(--accent-font);
	font-size: 14px;
	font-weight: 700;
	padding: 10px 15px;
	margin: 0 0 4px 0;
	background-color: transparent;
	border-radius: 0;
	border-bottom: none;
	border-left: 5px solid var(--accent-color-1);
	transition: color 0.2s ease, border-color 0.2s ease, padding-left 0.2s ease;
	text-align: left;
}

.main-navigation ul.sub-menu > li > a:hover {
	color: var(--accent-color-2);
	border-left-color: var(--accent-color-2);
	padding-left: 20px;
}

/* CTA button on mobile - with gap above, centered */
.main-navigation ul.menu > li#menu-item-47,
.main-navigation ul.menu > li:last-child {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.1);
}

.main-navigation ul.menu > li#menu-item-47 > a,
.main-navigation ul.menu > li:last-child > a {
	background-color: var(--bright-color);
	color: var(--light-color);
	border-radius: 40px;
	border-bottom: 4px solid var(--accent-color-6);
	text-align: center;
	margin-right: 32px;
}

/* Hide desktop toggle on mobile */
.main-navigation button.submenu-toggle {
	display: none;
}

/*--------------------------------------------------------------
## Desktop Navigation (1024px+)
--------------------------------------------------------------*/
@media screen and (min-width: 1024px) {
	
	.main-navigation {
		clear: both;
		margin-left: auto;
		margin-top: 0;
		margin-right: 0;
		width: auto;
		padding-right: 20px;
		box-sizing: border-box;
		align-self: center;
	}
	
	/* Reset mobile panel */
	.main-navigation .menu-header-menu-container {
		position: relative;
		top: auto;
		right: auto;
		width: auto;
		height: auto;
		background-color: transparent;
		transform: none;
		transition: none;
		overflow: visible;
		box-shadow: none;
		border-left: none;
		padding-left: 0;
	}
	
	/* Hide mobile elements */
	.main-navigation button.menu-toggle,
	.main-navigation button.mobile-submenu-toggle,
	.nav-overlay {
		display: none !important;
	}

	/* Desktop menu */
	.main-navigation ul.menu {
		display: flex !important;
		justify-content: flex-end;
		align-items: center;
		margin: 0;
		padding: 0;
		gap: 10px;
	}

	.main-navigation ul.menu > li {
		position: relative;
		margin: 10px 0;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-top: none;
	}
	
	/* Reset mobile CTA spacing for desktop */
	.main-navigation ul.menu > li#menu-item-47,
	.main-navigation ul.menu > li:last-child {
		margin-top: 10px;
		padding-top: 0;
		border-top: none;
	}
	
	.main-navigation li.menu-item-has-children > a {
		margin-right: 0;
		max-width: none;
		width: auto;
	}

	/* Desktop links */
	.main-navigation ul.menu > li > a,
	.main-navigation ul.menu > li > a:visited {
		padding: 12px 16px;
		display: block;
		color: var(--light-color);
		margin: 0;
		background-color: transparent;
		border-bottom: none;
		border-radius: 0;
		white-space: nowrap;
		transition: color 0.2s ease;
	}
	
	.main-navigation ul.menu > li > a:hover,
	.main-navigation ul.menu > li > a:visited:hover {
		color: var(--bright-color);
	}

	/* Round top-right corner of first submenu item */
	.main-navigation ul.menu > li > ul.sub-menu > li:first-child > a {
		border-radius: 0 10px 0 0;
	}

	/* Round bottom-right corner of last submenu item */
	.main-navigation ul.menu > li > ul.sub-menu > li:last-child > a {
		border-radius: 0 0 10px 0;
	}

	/* Dim sibling menu items when a submenu is open */
	.main-navigation ul.menu > li {
		transition: opacity 0.2s ease;
	}

	.main-navigation ul.menu > li.submenu-sibling-dimmed {
		opacity: 0.5;
	}

	.main-navigation ul.menu > li.submenu-sibling-dimmed:hover {
		opacity: 1;
	}
	
	/* CTA button */
	.main-navigation ul.menu > li#menu-item-47 > a,
	.main-navigation ul.menu > li:last-child > a {
		background-color: var(--bright-color);
		border-radius: 999px;
		padding: 8px 16px;
		border-bottom: none;
		text-align: left;
		color: var(--light-color);
		transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
		margin-right: 0;
		font-size: 14px;
	}
	
	.main-navigation ul.menu > li#menu-item-47 > a:hover,
	.main-navigation ul.menu > li:last-child > a:hover {
		background-color: var(--accent-color-6);
		color: var(--light-color);
		transform: scale(1.03);
	}

	/* Desktop submenu toggle */
	.main-navigation button.submenu-toggle {
		all: unset;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		width: 36px;
		height: 36px;
		margin-left: -6px;
		margin-top: -2px;
		color: var(--light-color);
		border-radius: 4px;
		transition: color 0.2s ease, background-color 0.2s ease;
	}
	
	.main-navigation button.submenu-toggle:hover {
		color: var(--bright-color);
		background-color: rgba(255, 255, 255, 0.1);
	}

	.main-navigation button.submenu-toggle:focus-visible {
		outline: 2px solid var(--bright-color);
		outline-offset: 2px;
	}
	
	.main-navigation button.submenu-toggle span {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 0;
		line-height: 1;
		transition: transform 0.25s ease;
	}
	
	.main-navigation button.submenu-toggle span::after {
		content: "▾";
		font-size: 24px;
		transition: transform 0.25s ease;
	}
	
	.main-navigation button.submenu-toggle:hover span::after {
		content: "+";
		font-weight: 700;
	}
	
	.main-navigation button.submenu-toggle[aria-expanded="true"] span::after {
		content: "−";
		font-weight: 700;
	}
	
	.main-navigation button.submenu-toggle[aria-expanded="true"]:hover span::after {
		content: "−";
	}
	
	.main-navigation button.submenu-toggle[aria-expanded="true"] span {
		transform: rotate(180deg);
	}

	/* Desktop submenu dropdown */
	.main-navigation ul.menu > li > ul.sub-menu {
		display: block !important;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 9999;
		min-width: 12rem;
		text-align: left;
		margin: 0;
		padding: 0;
		background-color: transparent;
		opacity: 0;
		transform: translateY(-10px);
		transition: opacity 0.2s ease, transform 0.2s ease;
		max-height: none;
		overflow: visible;
		pointer-events: none; /* Prevent clicks when hidden */
		margin-top: -3px;
	}

	.main-navigation ul.menu > li > ul.sub-menu.is-open {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto; /* Allow clicks when visible */
	}
	
	.main-navigation ul.menu > li > ul.sub-menu[hidden] {
		display: block !important;
	}

	.main-navigation ul.menu > li > ul.sub-menu > li {
		display: block;
		margin: 0;
		padding: 0;
	}

	.main-navigation ul.menu > li > ul.sub-menu > li > a {
		padding: 10px 15px;
		display: block;
		background-color: var(--bright-color);
		border-bottom: 2px solid var(--accent-color-1);
		border-radius: 0;
		color: var(--light-color);
		margin: 0;
		font-size: 14px;
		transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
	}

	.main-navigation ul.menu > li > ul.sub-menu > li > a:hover {
		background-color: var(--accent-color-6);
		color: var(--light-color);
		padding-left: 20px; /* Bump effect */
	}

	/* Gradient border on parent link when submenu is open */
	.main-navigation ul.menu > li.menu-item-has-children > a {
		position: relative;
	}

	.main-navigation ul.menu > li.menu-item-has-children > a::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 5px;
		background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, var(--accent-color-1) 50%);
		opacity: 0;
		transition: opacity 0.1s ease;
	}

	.main-navigation ul.menu > li.menu-item-has-children:has(.submenu-toggle[aria-expanded="true"]) > a::before {
		opacity: 1;
		transition: opacity 0.1s ease;
	}
	.main-navigation ul.menu > li > ul.sub-menu::before {
		content: "";
		position: absolute;
		top: 0px; /* Extend up behind the parent link */
		left: 0px;
		right: 0px;
		bottom: 0px;
		background: transparent;
		box-shadow: var(--element-shadow-2);
		border-radius: 12px;
		z-index: -1;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.main-navigation ul.menu > li > ul.sub-menu.is-open::before {
		opacity: 1;
	}
}

/*--------------------------------------------------------------
## Post Navigation
--------------------------------------------------------------*/

.nav-links {
    display: flex;
    justify-content: space-around;
    margin: 0 20px 0 20px;
    padding-bottom: 20px;
}
.post-navigation .nav-previous, .post-navigation .nav-next {
    margin: 20px;
    max-width: 200px;
    float: none;
    text-align: center;
}
.post-navigation a {
    background-color: var(--bright-color);
    color: var(--light-color);
    padding: 10px 20px;
    text-decoration: none;
    box-shadow: var(--element-shadow);
    transition: var(--transition-fast);
}
.post-navigation a:hover {
    background-color: var(--accent-color-2);
}

.post-navigation .nav-previous a {
    border-radius: 30px 0px 0px 30px;
}
.post-navigation .nav-next a {
    border-radius: 0px 30px 30px 0px;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.post,
.page {
	margin: auto;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/

.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

embed,
iframe,
object {
	max-width: 100%;
}

.custom-logo-link {
	display: inline-block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## General
--------------------------------------------------------------*/

.flex-row-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.flex-column {
	display: flex;
	flex-direction: column;
}

/*--------------------------------------------------------------
## Header Layout
--------------------------------------------------------------*/

.site-header {
	display: flex;
	flex-direction: row;
	position: fixed;
  	top: 0;
    width: 100%;
    z-index: 10000;
	background-color: var(--dark-color);
    height: 65px;
  	border-bottom: 1px solid rgba(255,255,255,.08);
	transition: background 160ms ease, border-color 160ms ease, backdrop-filter 160ms ease, box-shadow 160ms ease;
}
.site-branding {
	justify-self: left;
	margin: auto 0;
}
.site-header .site-branding a {
	display: block;
}
.site-header .site-branding img {
	display: block;
	max-height: 30px;
	width: auto;
}
.main-navigation {
	justify-self: right;
}
.site-content {
	margin-top: -65px;
}

/* JS + at top: transparent */
html.at-top .site-header {
  background-color: transparent;
  border-bottom-color: transparent;
  backdrop-filter: blur(1px);
}

/* JS + not at top: liquid glass */
html:not(.at-top) .site-header {
  background:
    linear-gradient(135deg, rgba(41, 98, 255, 0.10) 0%, rgba(163, 41, 193, 0.08) 100%),
    rgba(0, 0, 0, 0.70);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html:not(.at-top) .site-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

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

/*--------------------------------------------------------------
## Body
--------------------------------------------------------------*/

article {
	max-width: var(--wide-max-width); 
	margin: auto;
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/

.site-footer {
	background: var(--dark-color);
	color: var(--light-color);
	position: relative;
}

/* A thin spectrum line just inside the footer's top edge (Hannah, 2026-10-28) */
.site-footer::before {
	content: "";
	display: block; /* the underscores clearfix sets display: table, which collapses the width */
	position: absolute;
	top: 16px;
	left: 0;
	right: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(to right, var(--accent-color-3), var(--accent-color-2), var(--accent-color-1), var(--bright-color), var(--accent-color-6));
	pointer-events: none;
}
/* ft: brand, Pages, The proof, Reach us; stacked, 2 up at 700px, 4 up at 1024px */
.ft-grid {
	display: grid;
	gap: 32px;
	max-width: var(--extra-wide-max-width);
	margin: 0 auto;
	padding: 56px 30px 32px;
}

.ft-brand .custom-logo-link {
	display: block;
	width: 100px;
}

.ft-brand .custom-logo {
	display: block;
	width: 100%;
	height: auto;
}

.ft-line {
	max-width: 30ch;
	margin: 16px 0 20px;
	font-family: var(--accent-font);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.ft-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-list a,
.ft-list a:visited {
	display: inline-flex;
	align-items: baseline;
	gap: 0.35em;
	font-family: var(--accent-font);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	text-underline-offset: 4px;
	overflow-wrap: anywhere;
}

.ft-list a:hover,
.ft-list a:focus-visible,
.site-info a:hover,
.site-info a:focus-visible {
	color: var(--light-color);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.ft-bar {
	max-width: var(--extra-wide-max-width);
	margin: 0 auto;
	padding: 16px 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.site-info {
	margin: 0;
	font-family: var(--accent-font);
	font-weight: 300;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
}

/* The Privacy link beside the copyright: the footer links' colour and hover
   (above), at the copyright line's size. */
.site-info a,
.site-info a:visited {
	margin-left: 1em;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	text-underline-offset: 4px;
}

/* Footer colour and lines (Hannah, 2026-10-30: more colour, light division
   lines, icons, no serif): each column label wears one palette colour with
   an icon, the contact links carry their icon, and hairlines divide the
   stacked columns (phones) or stand between them (desktop). */
.ft-eyebrow i {
	margin-right: 0.5em;
}

.site-footer .ft-eyebrow--1 {
	color: var(--accent-color-1);
}

.site-footer .ft-eyebrow--2 {
	color: var(--accent-color-2);
}

.site-footer .ft-eyebrow--3 {
	color: var(--accent-color-3);
}

.ft-list .fa-solid {
	flex: none;
	width: 1.25em;
	color: var(--accent-color-3);
}

.ft-grid > * + * {
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-legal {
	margin: 10px 0;
	font-size: 0.75rem;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.6);
}

.site-eho {
	margin: 10px 0;
}

.site-eho img {
	max-width: 50px;
}

.main-disclaimer {
	max-width: var(--extra-wide-max-width);
	margin: auto;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding: 20px 30px;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
	width: 100%;
	box-sizing: border-box;
}

@media screen and (min-width: 700px) {

	.ft-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
	}

	.ft-grid > * + * {
		padding-top: 0;
		border-top: 0;
	}
}

@media screen and (min-width: 1024px) {

	/* Reach us never squeezes: its longest line (the email with its icon) sets
	   its width; the gaps open up from 1200px. */
	.ft-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.9fr) max-content;
		gap: 36px;
		padding: 48px 30px 32px;
	}

	.ft-list {
		gap: 6px;
	}

	.ft-grid > * + * {
		padding-left: 32px;
		border-left: 1px solid rgba(255, 255, 255, 0.12);
	}

	.ft-brand .custom-logo-link {
		width: 120px;
	}

	/* eight proof links read as two short columns, so the footer stays low */
	.ft-proof .ft-list {
		display: block;
		columns: 2;
		column-gap: 32px;
	}

	.ft-proof .ft-list li {
		break-inside: avoid;
		margin-bottom: 6px;
	}
}

@media screen and (min-width: 1200px) {

	.ft-grid {
		gap: 48px;
	}

	.ft-grid > * + * {
		padding-left: 40px;
	}
}

/*--------------------------------------------------------------
## Decorative
--------------------------------------------------------------*/

/* Underlines -----*/

.deco-underline {
	border-bottom-width: 5px;
	border-bottom-style: solid;
	padding-bottom: 2px;
}

/* Borders -----*/

.deco-border-left {
	border-left-width: 5px;
	border-left-style: solid;
}

.deco-border-right {
	border-right-width: 5px;
	border-right-style: solid;
}

.deco-border-outline {
	border-width: 2px;
	border-style: solid;
	border-radius: 5px;
}

/* Background Text Highlights -----*/

.deco-background {
	padding-left: 10px; 
	padding-right: 10px; 
}

.deco-background-bright-to-a1 {
	padding-left: 10px; 
	padding-right: 10px; 
	background-image: linear-gradient(to right, var(--bright-color), var(--accent-color-1)); 
	color: var(--dark-color);
}

.deco-background-a1-to-bright {
	padding-left: 12px; 
	padding-right: 12px; 
	background-image: linear-gradient(to right, var(--accent-color-1), var(--bright-color)); 
	color: var(--light-color);
	text-shadow: 0px 0px 8px var(--bright-color-half-op);
}

.deco-background-a4-to-a5 {
	padding-left: 10px; 
	padding-right: 10px; 
	background-image: linear-gradient(to right, var(--accent-color-4), var(--accent-color-5)); 
	color: var(--dark-color);
}

.deco-background-a2-to-a3 {
	padding-left: 12px;
	padding-right: 12px;
	background-image: linear-gradient(to right, var(--accent-color-2), var(--accent-color-3));
	color: var(--dark-color);
}

.deco-background-bright-to-a6 {
	padding: 0 12px;
	background-image: linear-gradient(135deg, rgba(41, 98, 255, 0.85), rgba(163, 41, 193, 0.85), rgba(255, 87, 34, 0.85));
	color: var(--light-color);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Health Systems category chip on the Industries cards:
   purple to Electric Blue, white text, AA along the chip */
.deco-background-a6-to-bright {
	padding-left: 12px;
	padding-right: 12px;
	background-image: linear-gradient(to right, var(--accent-color-6), var(--bright-color));
	color: var(--light-color);
}

.deco-background-a4-a5-a6 {
	padding-left: 12px;
	padding-right: 12px;
	background-image: linear-gradient(to right, var(--accent-color-4), var(--accent-color-5), var(--accent-color-6));
	color: var(--light-color);
}

/* Highlight chips off the home page carry the slight shave the card titles
   and the hero use (4px) and round each line when they wrap; the home keeps
   its square chips (Hannah, 2026-10-30). :where() keeps this at the
   attribute's own specificity so the card-title, eyebrow and hero chip
   rules still win where they differ. */
:where(body:not(.home)) [class*="deco-background-"] {
	border-radius: 4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Callout (Padded) Borders -----*/

.deco-callout-left {
	border-left-width: 5px;
	border-left-style: solid;
	padding-left: 10px;
}

.deco-callout-right {
	border-right-width: 5px;
	border-right-style: solid;
	padding-right: 10px;
}

/* Overlapping Bordered Box Label */
.callout-boxes {
	max-width: 260px; 
	height: auto; 
	margin: 75px auto 35px auto;
}
.callout-boxes-text {
	margin: auto; 
	text-align: center; 
	margin-bottom: -60px; 
	font-weight: bold; 
	letter-spacing: 3px;
}
.callout-sub-box-1, .callout-sub-box-2 {
	position: relative; 
	display: block; height: 70px;
	outline: var(--thin-border);
}
.callout-sub-box-1 {
	border: 4px solid var(--accent-color-2); 
	margin-right: -20px;
}
.callout-sub-box-2 {
	border: 4px solid var(--bright-color); 
	margin-left: -20px; 
	margin-top: -50px;
}

.dot-divider {
	text-align: center;
	margin: auto;
}
.dot-divider div {
	border: 1px solid black; 
	display: inline-block; 
	height: 15px; 
	width: 15px; 
	border-radius: 20px; 
	background-color: var(--accent-color-2);
}

/* Gradient Dividers -----*/

.deco-divider {
	border-bottom: 1px solid black;
	border-top: 1px solid black;
	height: 50px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Section 3 Wrapper -----
   Purple gradient hint from top-right over the
   combined header + card grid.
*/

.section-3-wrap {
	background: var(--dark-color);
	background-image: linear-gradient(to bottom left, rgba(163,41,193,0.12), transparent 50%);
	padding-bottom: 0;
	position: relative;
	clip-path: inset(0);
	overflow: hidden;
}

/* Aurora — color layer */
.section-3-wrap::after {
	content: "";
	position: fixed;
	top: 0;
	left: -50%;
	width: 200%;
	height: 100vh;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse at 15% 30%, var(--bright-color) 0%, transparent 45%),
		radial-gradient(ellipse at 35% 55%, var(--accent-color-1) 0%, transparent 40%),
		radial-gradient(ellipse at 50% 25%, var(--accent-color-2) 0%, transparent 45%),
		radial-gradient(ellipse at 65% 50%, var(--accent-color-6) 0%, transparent 40%),
		radial-gradient(ellipse at 25% 70%, var(--accent-color-4) 0%, transparent 35%),
		radial-gradient(ellipse at 90% 65%, var(--accent-color-5) 0%, transparent 35%);
	filter: blur(60px);
	animation: aurora 20s ease-in-out infinite alternate;
}

/* Aurora — dark overlay to control intensity (sits above color layer) */
.section-3-wrap::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	pointer-events: none;
	z-index: 1;
	background: rgba(0, 0, 0, 0.75);
}

@keyframes aurora {
	0% {
		transform: translateX(0%) skewX(0deg);
	}
	33% {
		transform: translateX(5%) skewX(-2deg);
	}
	66% {
		transform: translateX(-3%) skewX(1deg);
	}
	100% {
		transform: translateX(2%) skewX(-1deg);
	}
}

.section-3-wrap > section {
	position: relative;
	z-index: 2;
	background: transparent;
}

/* Wave Divider -----
   Canvas-based sine waves that flatten on scroll.
*/

.wave-divider {
	position: relative;
	height: 4.5rem;
	background: var(--dark-color);
	margin-top: auto;
	box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.3);
	z-index: 1;
	clip-path: inset(0 0 -20px 0);
}

.wave-divider canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Star Strip -----
   Flexible starfield — all rendering on canvas.
   Height set via modifier or inline style.
*/

.star-strip {
	position: relative;
	height: 50px;
	overflow: hidden;
	background: #020408;
}

.star-strip--sm  { height: 50px; }
.star-strip--md  { height: 150px; }
.star-strip--lg  { height: 250px; }
.star-strip--xl  { height: 400px; }

/* Framed: black top and bottom borders, for a strip between two sections of different grounds */
.star-strip--framed {
	border-top: 1px solid var(--dark-color);
	border-bottom: 1px solid var(--dark-color);
}

.star-strip canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Sticker Effect -----
   Uses stacked drop-shadow to create a die-cut border that
   follows the SVG/image contour, not the bounding box.
   --sticker-border: border color (default white)
   --sticker-shadow: shadow color (default black @ 20%)
*/

.sticker {
	--sticker-border: var(--light-color);
	--sticker-shadow: rgba(0,0,0,0.2);
	filter:
		drop-shadow(6px 0 0 var(--sticker-border))
		drop-shadow(-6px 0 0 var(--sticker-border))
		drop-shadow(0 6px 0 var(--sticker-border))
		drop-shadow(0 -6px 0 var(--sticker-border))
		drop-shadow(3px 4px 5px var(--sticker-shadow));
	transition: filter 0.3s ease, transform 0.3s ease;
}

/* Thickness */
.sticker--thick {
	filter:
		drop-shadow(10px 0 0 var(--sticker-border))
		drop-shadow(-10px 0 0 var(--sticker-border))
		drop-shadow(0 10px 0 var(--sticker-border))
		drop-shadow(0 -10px 0 var(--sticker-border))
		drop-shadow(3px 5px 6px var(--sticker-shadow));
}

.sticker--thin {
	filter:
		drop-shadow(2px 0 0 var(--sticker-border))
		drop-shadow(-2px 0 0 var(--sticker-border))
		drop-shadow(0 2px 0 var(--sticker-border))
		drop-shadow(0 -2px 0 var(--sticker-border))
		drop-shadow(2px 3px 4px var(--sticker-shadow));
}

/* Border color overrides */
.sticker--border-dark   { --sticker-border: var(--dark-color); }
.sticker--border-bright { --sticker-border: var(--bright-color); }
.sticker--border-1      { --sticker-border: var(--accent-color-1); }
.sticker--border-2      { --sticker-border: var(--accent-color-2); }
.sticker--border-3      { --sticker-border: var(--accent-color-3); }
.sticker--border-4      { --sticker-border: var(--accent-color-4); }
.sticker--border-5      { --sticker-border: var(--accent-color-5); }
.sticker--border-6      { --sticker-border: var(--accent-color-6); }

/* Tilt — slight rotation for a "stuck on" feel */
.sticker--tilt {
	transform: rotate(-3deg);
}

.sticker--tilt-r {
	transform: rotate(3deg);
}

/* Hover: Peel — lifts + tilts like peeling off a surface */
.sticker--hover-peel:hover {
	transform: rotate(-2deg) translateY(-4px) scale(1.03);
	filter:
		drop-shadow(6px 0 0 var(--sticker-border))
		drop-shadow(-6px 0 0 var(--sticker-border))
		drop-shadow(0 6px 0 var(--sticker-border))
		drop-shadow(0 -6px 0 var(--sticker-border))
		drop-shadow(4px 8px 10px var(--sticker-shadow));
}

/* Hover: Pop — scales up in place */
.sticker--hover-pop:hover {
	transform: scale(1.08);
	filter:
		drop-shadow(6px 0 0 var(--sticker-border))
		drop-shadow(-6px 0 0 var(--sticker-border))
		drop-shadow(0 6px 0 var(--sticker-border))
		drop-shadow(0 -6px 0 var(--sticker-border))
		drop-shadow(5px 8px 12px var(--sticker-shadow));
}

/* Drawn sticker: the outline is part of the asset (allveri_icon_outline.svg), so only the soft shadow and the hover pop apply */
.sticker--drawn {
	filter: drop-shadow(3px 4px 5px rgba(0, 0, 0, 0.2));
	transition: filter 0.3s ease, transform 0.3s ease;
}

.sticker--drawn:hover {
	transform: scale(1.08);
	filter: drop-shadow(5px 8px 12px rgba(0, 0, 0, 0.2));
}

/* Hover: Wobble — playful wiggle */
.sticker--hover-wobble:hover {
	animation: sticker-wobble 0.4s ease;
}

@keyframes sticker-wobble {
	0%   { transform: rotate(0deg); }
	25%  { transform: rotate(-4deg); }
	50%  { transform: rotate(3deg); }
	75%  { transform: rotate(-2deg); }
	100% { transform: rotate(0deg); }
}

/* Compose: tilt + peel keeps the tilt origin */
.sticker--tilt.sticker--hover-peel:hover {
	transform: rotate(-5deg) translateY(-4px) scale(1.03);
}

.sticker--tilt-r.sticker--hover-peel:hover {
	transform: rotate(1deg) translateY(-4px) scale(1.03);
}

/*--------------------------------------------------------------
# Modules
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Card Grid — Flexible Icon Cards
--------------------------------------------------------------*/

/* Mobile: every grid is one column. Fixed column counts step up at 721px,
   then 3-up at 951px and 4-up at 1201px; odd counts skip the 2-up step. */
.cd-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	padding: 40px 0;
}

@media screen and (min-width: 721px) {

	.cd-grid {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		padding: 30px 0 60px;
	}

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

	.cd-grid--5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.cd-grid--3:has(.cd:last-child:nth-child(odd)),
	.cd-grid--3.cd-grid--odd,
	.cd-grid--4:has(.cd:last-child:nth-child(odd)),
	.cd-grid--4.cd-grid--odd {
		grid-template-columns: 1fr;
	}
}

@media screen and (min-width: 951px) {

	.cd-grid--3,
	.cd-grid--3:has(.cd:last-child:nth-child(odd)),
	.cd-grid--3.cd-grid--odd {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (min-width: 1201px) {

	.cd-grid--4,
	.cd-grid--4:has(.cd:last-child:nth-child(odd)),
	.cd-grid--4.cd-grid--odd {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Card */
.cd {
	display: flex;
	flex-direction: column;
	padding: 40px;
	border-radius: 16px;
	text-decoration: none;
	overflow: hidden;
	min-width: 0; /* Prevent grid blowout */
	transition: box-shadow 0.3s ease, padding 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Glass card variant */
.cd--glass {
	position: relative;
	--glass-tint: rgba(41, 98, 255, 0.08);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, var(--glass-tint) 50%, rgba(255, 255, 255, 0.03) 100%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.9);
}

.cd--glass::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
	pointer-events: none;
	border-radius: 16px 16px 0 0;
}

.cd--glass h2,
.cd--glass h3 {
	color: rgba(255, 255, 255, 0.95);
}

.cd--glass p {
	color: rgba(255, 255, 255, 0.7);
}

.cd--glass.cd--hover-bright { --glass-tint: rgba(41, 98, 255, 0.1); }
.cd--glass.cd--hover-6      { --glass-tint: rgba(163, 41, 193, 0.1); }
.cd--glass.cd--hover-2      { --glass-tint: rgba(29, 233, 182, 0.08); }
.cd--glass.cd--hover-1      { --glass-tint: rgba(0, 176, 255, 0.1); }
.cd--glass.cd--hover-4      { --glass-tint: rgba(204, 255, 144, 0.1); }

a.cd--glass:hover {
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.18);
}

/* Light panel cards — handoff .step / white cards on light continuum */
.cd-grid-section--light {
	background: linear-gradient(135deg, #f2fbf4 0%, #f7f8fc 30%, #f3f0fb 70%, #fbf3ec 100%);
}

/* .cd-grid default is 30/60; light steps need equal vertical pad */
.cd-grid-section--light .cd-grid {
	padding-top: 60px;
	padding-bottom: 60px;
}

/* Inset shell — handoff .after-dark (self-contained dark panel, not full-bleed) */
.cd-grid-shell--inset {
	background: linear-gradient(135deg, #f2fbf4 0%, #f7f8fc 30%, #f3f0fb 70%, #fbf3ec 100%);
	padding-top: 1.5rem;
	padding-bottom: 2.5rem;
}

.cd-grid-inset {
	background: #000;
	border-radius: 14px;
	padding: 32px 22px;
}

@media screen and (min-width: 701px) {

	.cd-grid-inset {
		border-radius: 18px;
		padding: 44px 40px;
	}
}

.cd-grid-inset .ct-header {
	margin-bottom: 0;
}

.cd-grid-shell--inset > .ct-header {
	margin-bottom: 0;
	padding-bottom: 8px;
}

.cd-grid-inset .cd-grid {
	padding-top: 20px;
	padding-bottom: 0;
}

.cd--panel {
	background: #fff;
	border: 1px solid #e5e2f2;
	box-shadow: 0 14px 40px rgba(18, 21, 28, 0.07);
	color: #12151c;
}

.cd--panel h2,
.cd--panel h3 {
	color: #12151c;
	margin-top: 0;
}

.cd--panel p {
	color: #3a4150;
}

/* Light OM / panel lists — handoff .om li em-dashes */
.cd--panel .cd-list li {
	color: #3a4150;
	font-family: var(--primary-font);
	padding-left: 22px;
}

.cd--panel .cd-list li::before {
	content: "—";
	top: 0;
	font-size: inherit;
	line-height: inherit;
	color: rgba(18, 21, 28, 0.35);
}

.cd--panel .cd-close {
	color: #12151c;
}

a.cd--panel:hover {
	box-shadow: 0 18px 48px rgba(18, 21, 28, 0.12);
	border-color: #d5d0e6;
}

/* Capability list + close (handoff .cap ul / .close) */
.cd-lede {
	margin: 0 0 20px;
}

/* Quote line: the lede as a Literata pull line (a trigger, a remark). Full
   white on glass; .cd .cd-lede--quote beats .cd--glass p (70% white). */
.cd .cd-lede--quote {
	font-family: var(--serif-font);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.45;
	color: var(--light-color);
}

@media screen and (min-width: 901px) {

	.cd .cd-lede--quote {
		font-size: 1.3rem;
	}
}

.cd-list {
	list-style: none;
	display: grid;
	gap: 12px;
	margin: 0 0 22px;
	padding: 0;
}

.cd-list li {
	position: relative;
	padding-left: 26px;
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(199, 209, 232, 0.95);
}

.cd-list li::before {
	content: "◆";
	position: absolute;
	left: 0;
	top: 5px;
	font-size: 11px;
	line-height: 1;
}

.cd-list--bright li::before,
.cd-list--bright > div::before {
	color: var(--bright-color);
}

.cd-list--1 li::before,
.cd-list--1 > div::before {
	color: var(--accent-color-1);
}

.cd-list--2 li::before,
.cd-list--2 > div::before {
	color: var(--accent-color-2);
}

.cd-list--4 li::before,
.cd-list--4 > div::before {
	color: var(--accent-color-4);
}

.cd-list--6 li::before,
.cd-list--6 > div::before {
	color: var(--accent-color-6);
}

.cd-list--3 li::before,
.cd-list--3 > div::before {
	color: var(--accent-color-3);
}

/* Pipeline rail: the home pl-* marks at home scale as a card's first child.
   in = dashed line into a hollow ring (raw, incoming); out = a lime diamond
   into the spectrum line (governed, outgoing). From 1024px each rail runs
   to the card edge on the gap side, so two side-by-side cards read as one
   line: ring, gap, diamond. */
.cd-rail {
	display: flex;
	align-items: center;
	height: 24px;
	margin: 0 0 24px;
}

@media screen and (min-width: 1024px) {

	.cd-rail {
		margin-bottom: 32px;
	}

	.cd-rail--in {
		margin-right: -40px;
	}

	.cd-rail--out {
		margin-left: -36px;
	}
}

/* Labelled capabilities in a card (cards-grid card facts): each fact is
   a marked item, the label in the eyebrow role over a Literata value.
   The marker colour comes from the card's cd-list--{color} key. */
.cd-facts--marked {
	gap: 12px;
	margin: 0 0 22px;
}

.cd-facts--marked > div {
	position: relative;
	padding-left: 22px;
}

.cd-facts--marked > div::before {
	content: "◆";
	position: absolute;
	left: 0;
	top: 2px;
	font-size: 11px;
	line-height: 1;
}

.av-dark-radial .cd-facts dt {
	color: rgba(255, 255, 255, 0.6);
}

.av-dark-radial .cd-facts dd {
	color: rgba(255, 255, 255, 0.85);
}

/* Client inputs: hollow rings in place of the panel em-dash. */
.cd--panel .cd-rail--in ~ .cd-facts--marked > div::before,
.cd--panel .cd-rail--in ~ .cd-list li::before {
	content: "";
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	border: 2px solid var(--dark-color);
	border-radius: 50%;
	top: 7px;
}

.cd--panel .cd-rail--in ~ .cd-facts--marked > div::before {
	top: 2px;
}

.cd-close {
	margin: 0;
	font-weight: 700;
	font-size: 0.95rem;
	color: #fff;
}

.cd-close + .cd-tags {
	margin-top: 16px;
}

/* Step number badge (handoff .step .num) */
.cd-num {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--accent-font);
	font-weight: 800;
	font-size: 15px;
	color: #fff;
	margin: 0 0 18px;
	flex-shrink: 0;
}

.cd-num--bright {
	background: var(--bright-color);
}

.cd-num--1 {
	background: var(--accent-color-1);
}

.cd-num--2 {
	background: linear-gradient(135deg, var(--accent-color-2), var(--accent-color-1));
	color: var(--dark-color);
}

.cd-num--4 {
	background: var(--accent-color-4);
	color: var(--dark-color);
}

.cd-num--6 {
	background: var(--accent-color-6);
}

.cd-grid-footer {
	max-width: 62ch;
	margin: 0 auto;
	padding: 0 0 2.5rem;
	text-align: center;
	font-family: var(--primary-font);
	font-size: 1.05rem;
	line-height: 1.7;
}

.cd-grid-footer--left {
	max-width: none;
	margin: 1.75rem 0 0; /* handoff .pa: 28px above In Practice */
	text-align: left;
}

/* Default .cd-grid padding-bottom is 60px. When an In Practice footer
   follows, that space sits in the gap — drop it and keep the 28px .pa. */
.cd-grid:has(+ .cd-grid-footer--left) {
	padding-bottom: 0;
}

.cd-grid-footer p {
	margin: 0 0 0.75rem;
}

.cd-grid-footer p:last-child {
	margin-bottom: 0;
}

/* Handoff .pa-lead — In Practice callout label (rich-text + footers) */
.pa-lead {
	font-family: var(--accent-font);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.av-bg-dark .cd-grid-footer {
	color: rgba(255, 255, 255, 0.85);
}

.av-bg-dark .cd-grid-footer a {
	color: var(--accent-color-1);
	font-weight: 700;
}

/* A labelled footer row (proof): the eyebrow sits 8px over its line, at
   the eyebrow's 60% (the section's av-text-* p cascade would ink it). */
.cd-grid-footer > .av-eyebrow {
	margin-bottom: 8px;
	color: rgba(0, 0, 0, 0.6);
}

.av-bg-dark .cd-grid-footer > .av-eyebrow,
.av-dark-radial .cd-grid-footer > .av-eyebrow {
	color: rgba(255, 255, 255, 0.6);
}

/* Ruled rows (template-parts/sections/ruled-rows.php): one item per row on
   the FAQ's shelf (2px dotted) with hairlines between, no frames. The head
   (label, title, bar) sits above the facts, and hangs in a 13rem column
   beside them from 1200px. */
.cd-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px dotted var(--dark-color);
}

.cd-row {
	padding-block: 24px;
}

.cd-row + .cd-row {
	border-top: 1px solid var(--light-gray);
}

.cd-row:last-child {
	padding-bottom: 0;
}

.cd-row-head {
	min-width: 0;
	margin-bottom: 16px;
}

/* The FAQ number role, so "Tier 1" pairs with the FAQ's "01". Qualified
   so a section's av-text-dark p cascade does not ink it. */
.cd-row .cd-row-label {
	font-family: var(--accent-font);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	color: var(--bright-color);
	margin: 0 0 8px;
}

/* The FAQ question role. Not a link: no hover underline. */
.cd-row-head .cd-title {
	font-family: var(--accent-font);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--dark-color);
	text-decoration: none;
	margin: 0;
}

/* Segmented bar in the tier colours (Connect teal, Foundation purple,
   Intelligence Electric Blue, Horizon Deep Orange): each row's bar holds
   the segments of the rows before it. */
.cd-steps {
	display: block;
	width: 22px;
	height: 4px;
	margin-top: 12px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--accent-color-2) 0 22px, transparent 22px 24px, var(--accent-color-6) 24px 46px, transparent 46px 48px, var(--bright-color) 48px 70px, transparent 70px 72px, var(--accent-color-5) 72px 94px);
}

.cd-steps--2 {
	width: 46px;
}

.cd-steps--3 {
	width: 70px;
}

.cd-steps--4 {
	width: 94px;
}

/* Ruled rows on a dark ground (ground => 'dark'): the FAQ's dark recipe.
   White shelf at half strength, light hairlines, Sky Blue labels, white
   titles; the facts take the av-bg-dark cd-facts colours. */
.cd-rows-section--dark .cd-rows,
.cd-rows-section--dark .cd-rows-header {
	border-top-color: rgba(255, 255, 255, 0.5);
}

.cd-rows-section--dark .cd-row + .cd-row {
	border-top-color: rgba(255, 255, 255, 0.15);
}

.cd-rows-section--dark .cd-row .cd-row-label {
	color: var(--accent-color-1);
}

.cd-rows-section--dark .cd-row-head .cd-title {
	color: var(--light-color);
}

.cd-rows-section--dark .cd-row .cd-facts > div:first-child dd {
	color: rgba(255, 255, 255, 0.92);
}

.cd-rows-section--dark .cd-rows-header > span {
	color: rgba(255, 255, 255, 0.6);
}

.cd-rows-section--dark .cd-grid-footer,
.cd-rows-section--dark .cd-grid-footer p {
	color: rgba(255, 255, 255, 0.85);
}

/* Ruled rows at the prose measure (section_class cd-rows-section--measure):
   each row's facts stop at the av-container--prose cap, so a long lede
   beside the head column reads at about 70ch instead of the full width.
   Bites from about 700px. The case-study engagement. */
.cd-rows-section--measure .cd-row .cd-facts {
	max-width: var(--max-characters);
}

/* Label / value facts (ruled rows, the metric record). Labels in the
   eyebrow role, values in Literata. */
.cd-facts {
	display: grid;
	gap: 16px;
	margin: 0;
}

.cd-facts > div {
	min-width: 0;
}

.cd-facts dt {
	font-family: var(--accent-font);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1.2;
	color: rgba(0, 0, 0, 0.6);
	margin: 0 0 4px;
}

.cd-facts dd {
	font-family: var(--primary-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.8);
	margin: 0;
}

/* The row's first fact (the deliverable) outranks the rest by a step. */
.cd-row .cd-facts > div:first-child dd {
	font-weight: 500;
	color: rgba(0, 0, 0, 0.9);
}

.av-bg-dark .cd-facts dt {
	color: rgba(255, 255, 255, 0.6);
}

.av-bg-dark .cd-facts dd {
	color: rgba(255, 255, 255, 0.85);
}

/* A link inside a fact keeps the fact's serif and colour; the av-link
   underline recipe without its font change. */

/* Key facts (split-facts facts_class cd-facts--key, the case-study thesis):
   the label on a chip and the value in Poppins 500, full black, so the three
   lines that turn the story stand out from the lead above them. */
.cd-facts dt > [class*="deco-background-"] {
	display: inline-block;
	padding: 3px 8px;
	letter-spacing: 0.08em;
}

.cd-facts--key dd {
	font-family: var(--accent-font);
	font-weight: 500;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--dark-color);
}

.cd-facts dd a,
.cd-facts dd a:visited {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.cd-facts dd a:hover,
.cd-facts dd a:focus-visible {
	text-decoration-thickness: 2px;
}

/* Chips as a fact's value: the dd sets the spacing. */
.cd-facts dd .cd-tags {
	margin-bottom: 0;
}

/* Ledger ruled rows (layout 'ledger'): the fact labels print once, as a
   header row on the shelf, from 1200px. Hidden below that. */
.cd-rows-header {
	display: none;
}

/* Ruled facts: a dotted shelf, hairlines between facts. */
.cd-facts--ruled {
	row-gap: 0;
	border-top: 2px dotted var(--dark-color);
}

.cd-facts--ruled > div {
	padding-block: 14px;
}

.cd-facts--ruled > div + div {
	border-top: 1px solid var(--light-gray);
}

.cd-facts--ruled > div:last-child {
	padding-bottom: 0;
}

.av-bg-dark .cd-facts--ruled {
	border-top-color: rgba(255, 255, 255, 0.5);
}

.av-bg-dark .cd-facts--ruled > div + div {
	border-top-color: rgba(255, 255, 255, 0.12);
}

@media screen and (min-width: 700px) {

	.cd-facts--2,
	.cd-facts--3 {
		column-gap: 32px;
	}

	.cd-facts--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cd-facts--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* 2-up: the first two facts sit on the shelf; the hairline runs
	   between the two rows only. */
	.cd-facts--ruled.cd-facts--2 > div + div {
		border-top: 0;
	}

	.cd-facts--ruled.cd-facts--2 > div:nth-child(n+3) {
		border-top: 1px solid var(--light-gray);
	}

	.av-bg-dark .cd-facts--ruled.cd-facts--2 > div:nth-child(n+3) {
		border-top-color: rgba(255, 255, 255, 0.12);
	}

	.cd-facts--ruled.cd-facts--2 > div:nth-last-child(-n+2) {
		padding-bottom: 0;
	}

	/* Ledger: the lede runs full width, the other facts 2-up beneath. */
	.cd-rows--ledger .cd-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
	}

	.cd-rows--ledger .cd-facts > div:first-child {
		grid-column: 1 / -1;
	}

	/* Two-fact ledger: the one fact under the lede runs full width too. */
	.cd-rows-section--2 .cd-rows--ledger .cd-facts {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media screen and (min-width: 1024px) {

	.cd-facts dt {
		font-size: clamp(0.75rem, 1.2vw, 0.9rem);
	}

	/* Inline facts (cards-grid card facts_class, the case-study panel's
	   systems): label above value below 1024px (the base cd-facts); from
	   1024px the label takes a fixed first column and the value (often
	   chips) wraps in the second, so the rows read as a small ledger. A
	   fact with no label keeps its value in the second column. */
	.cd-facts--inline > div {
		display: grid;
		grid-template-columns: 180px minmax(0, 1fr);
		column-gap: 24px;
		align-items: baseline;
	}

	.cd-facts--inline dt {
		margin: 0;
	}

	.cd-facts--inline dd {
		grid-column: 2;
	}
}

@media screen and (min-width: 1200px) {

	.cd-row {
		display: grid;
		grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
		column-gap: 32px;
		padding-block: 32px;
	}

	.cd-row:last-child {
		padding-bottom: 0;
	}

	.cd-row-head {
		margin-bottom: 0;
	}

	/* Ledger header: the row's frame (13rem head column, then the facts
	   columns) with the same 32px gaps, so each label sits on its column
	   to the pixel. The leading span is the empty head cell. It carries
	   the shelf; the list's top becomes the hairline. */
	.cd-rows-header {
		display: grid;
		grid-template-columns: minmax(0, 13rem) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 32px;
		padding-block: 12px 10px;
		border-top: 2px dotted var(--dark-color);
	}

	/* The cd-facts dt eyebrow role. */
	.cd-rows-header > span {
		min-width: 0;
		font-family: var(--accent-font);
		font-size: clamp(0.75rem, 1.2vw, 0.9rem);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		line-height: 1.2;
		color: rgba(0, 0, 0, 0.6);
	}

	.cd-rows--ledger {
		border-top: 1px solid var(--light-gray);
	}

	.cd-rows-section--dark .cd-rows--ledger {
		border-top-color: rgba(255, 255, 255, 0.15);
	}

	.cd-rows--ledger .cd-facts {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
	}

	.cd-rows--ledger .cd-facts > div:first-child {
		grid-column: auto;
	}

	.cd-rows--ledger .cd-facts > div {
		position: relative;
	}

	/* Two-fact ledger (cd-rows-section--2 on the section): the lede and one
	   fact share the row, the answer column wider than the question's. */
	.cd-rows-section--2 .cd-rows--ledger .cd-facts {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}

	.cd-rows-section--2 .cd-rows-header {
		grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) minmax(0, 1.4fr);
	}

	/* Per-row labels stay for screen readers; the header shows them. */
	.cd-rows--ledger .cd-facts dt {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* CTA styling */
.cd .av-cta {
	align-self: flex-start;
	margin-top: auto;
	transition: color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}

.cd--center .av-cta {
	align-self: center;
}

/*--------------------------------------------------------------
# Card Hover — Inner Zoom
# Card border box stays fixed. Icon scales, h2 shifts color,
# CTA does ogilvy-style color swap + subtle scale, padding
# breathes so content expands within the fixed shell.
--------------------------------------------------------------*/

/* Clickable card base */
a.cd,
a.cd:visited,
a.cd:hover,
a.cd:focus,
a.cd:active {
	color: inherit;
	cursor: pointer;
}

/* Inner zoom: shadow deepens + content breathes */
a.cd:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,0.14);
	padding: 36px 40px 44px;
}

/* Dark card hover: colored shadow glow */
a.cd.av-bg-dark:hover {
	box-shadow: 0 8px 32px rgba(204,255,144,0.08);
}

/* Card hover underline colors — match icon/CTA accent */
a.cd.cd--hover-bright:hover h2,
a.cd.cd--hover-bright:hover h3 {
	text-decoration-color: var(--bright-color);
}

a.cd.cd--hover-1:hover h2,
a.cd.cd--hover-1:hover h3 {
	text-decoration-color: var(--accent-color-1);
}

a.cd.cd--hover-2:hover h2,
a.cd.cd--hover-2:hover h3 {
	text-decoration-color: var(--accent-color-2);
}

a.cd.cd--hover-3:hover h2,
a.cd.cd--hover-3:hover h3 {
	text-decoration-color: var(--accent-color-3);
}

a.cd.cd--hover-4:hover h2,
a.cd.cd--hover-4:hover h3 {
	text-decoration-color: var(--accent-color-4);
}

a.cd.cd--hover-5:hover h2,
a.cd.cd--hover-5:hover h3 {
	text-decoration-color: var(--accent-color-5);
}

a.cd.cd--hover-6:hover h2,
a.cd.cd--hover-6:hover h3 {
	text-decoration-color: var(--accent-color-6);
}

/* Option B: Gradient border animation on hover */
.cd--glow {
	position: relative;
	z-index: 0;
	overflow: visible; /* Override hidden — glow extends outside card */
}

.cd--glow::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 19px;
	background: linear-gradient(
		135deg,
		var(--bright-color),
		var(--accent-color-2),
		var(--accent-color-6),
		var(--bright-color)
	);
	background-size: 300% 300%;
	opacity: 0;
	transition: opacity var(--transition-fast);
	z-index: -2;
}

.cd--glow::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: inherit;
	z-index: -1;
}

.cd--glow:hover::before {
	opacity: 1;
	animation: cd-glow-flow 2s linear infinite;
}

@keyframes cd-glow-flow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Icon */
.cd-icon {
	width: 72px;
	height: 72px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem; /* For Font Awesome icons */
	transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Icon scales on card hover */
a.cd:hover .cd-icon {
	transform: scale(1.15);
}

.cd-icon svg,
.cd-icon img {
	width: 100%;
	height: 100%;
}

/* Font Awesome icon sizing */
.cd-icon i,
.cd-icon .fa,
.cd-icon .fas,
.cd-icon .far,
.cd-icon .fab {
	font-size: inherit;
	line-height: 1;
}

.cd-icon--lg {
	width: 96px;
	height: 96px;
	font-size: 4rem;
}

.cd-icon--sm {
	width: 48px;
	height: 48px;
	font-size: 2rem;
}

/* Center alignment modifier */
.cd--center {
	align-items: center;
	text-align: center;
}

.cd--center .cd-icon {
	margin-left: auto;
	margin-right: auto;
}

/* Content */
.cd h2,
.cd .cd-title {
	font-size: 1.35rem;
	margin: 0 0 12px 0;
	line-height: 1.2;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
	transition: text-decoration-color 0.3s ease;
}

/* A highlight chip (deco-background-*) on a card title: each wrapped row
   gets its own padded, rounded piece, and the span's line-height opens the
   line box past Poppins' content area (about 1.4em) so the rows do not
   overlap. The chip classes keep their gradients and text colours. */
.cd-title > [class*="deco-background"] {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0 10px;
	border-radius: 4px;
	line-height: 1.55;
}

/* Optional token-colored titles (handoff .eng h3). Beats .cd--glass h2. */
.cd h2.av-text-bright,
.cd h3.av-text-bright {
	color: var(--bright-color);
}

.cd h2.av-text-1,
.cd h3.av-text-1 {
	color: var(--accent-color-1);
}

.cd h2.av-text-2,
.cd h3.av-text-2 {
	color: var(--accent-color-2);
}

.cd h2.av-text-3,
.cd h3.av-text-3 {
	color: var(--accent-color-3);
}

.cd h2.av-text-4,
.cd h3.av-text-4 {
	color: var(--accent-color-4);
}

.cd h2.av-text-6,
.cd h3.av-text-6 {
	color: var(--accent-color-6);
}

.cd p {
	font-size: 0.95rem;
	margin: 0 0 24px 0;
	line-height: 1.7;
	flex-grow: 1;
}

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

/* The lede and the close stay at their content height so what follows them
   (a list, the close, tags) stays with the text; the CTA's margin-top: auto
   takes the spare height. */
.cd .cd-lede,
.cd .cd-close {
	flex-grow: 0;
}

/* An eyebrow inside a card keeps the eyebrow role (.cd p would set it in
   body size). */
.cd p.av-eyebrow {
	font-size: 0.75rem;
	line-height: 1.2;
	margin: 0 0 0.6rem;
	flex-grow: 0;
}

@media screen and (min-width: 1024px) {

	.cd p.av-eyebrow {
		font-size: clamp(0.75rem, 1.2vw, 0.9rem);
	}
}

/* Role labels on a card (cards-grid section arg labels): a small uppercase
   line naming the element after it. The label carries the gap above; the
   element it names sits 6px under it. Ink on light, 55% white on glass or
   a dark-surface card. */
.cd-label {
	display: block;
	flex: 0 0 auto;
	margin: 20px 0 6px;
	font-family: var(--accent-font);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.6);
}

.cd--glass .cd-label,
.cd.av-text-light .cd-label {
	color: rgba(255, 255, 255, 0.55);
}

/* Inline: the first child of p.cd-subtitle, on the line with the text. */
.cd-label--inline {
	display: inline-block;
	margin: 0 8px 0 0;
	vertical-align: baseline;
}

.cd-eyebrow + .cd-label {
	margin-top: 6px;
}

.cd-label + .cd-close,
.cd-label + .cd-tags {
	margin-top: 0;
}

/* Subtitle: a short Poppins line under the title (cards-grid card arg
   subtitle). Keeps its height (.cd p grows). Colour inherits unless a text
   utility is given; the utilities are restated here because .cd--glass p
   would outrank them. */
.cd .cd-subtitle {
	flex: 0 0 auto;
	margin: 10px 0 0;
	font-family: var(--accent-font);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
}

.cd p.cd-subtitle.av-text-bright {
	color: var(--bright-color);
}

.cd p.cd-subtitle.av-text-1 {
	color: var(--accent-color-1);
}

.cd p.cd-subtitle.av-text-2 {
	color: var(--accent-color-2);
}

.cd p.cd-subtitle.av-text-3 {
	color: var(--accent-color-3);
}

.cd p.cd-subtitle.av-text-4 {
	color: var(--accent-color-4);
}

.cd p.cd-subtitle.av-text-5 {
	color: var(--accent-color-5);
}

.cd p.cd-subtitle.av-text-6 {
	color: var(--accent-color-6);
}

.cd p.cd-subtitle.av-text-6-tint {
	color: var(--accent-color-6-tint);
}

/* Serif title (cards-grid section arg title_class): Literata 600, for a
   sentence-length title. Beats .cd .cd-title and the h3 font rule; colour
   stays with .cd--glass h3 / .cd--panel h3 or a title colour utility. The
   subtitle's top margin sets the gap under it. */
.cd .cd-title.cd-title--serif {
	margin-bottom: 0;
	font-family: var(--serif-font);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Eyebrow chip (cards-grid card arg eyebrow_chip): the deco-background
   class sets the gradient and text colour on the span, so the eyebrow's
   grey on the parent does not reach it. Inline with cloned decoration: a
   wrapped category gets one rounded piece per line, line-height opening a
   gap between them. */
.cd .cd-eyebrow > [class*="deco-background"] {
	display: inline;
	padding: 3px 8px;
	border-radius: 4px;
	line-height: 2;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.cd .cd-eyebrow:has(> [class*="deco-background"]) {
	margin-bottom: 14px;
}

/* The chip's 14px is the whole gap to a label under it (the 6px above a
   label after a plain eyebrow would make it 20). */
.cd .cd-eyebrow:has(> [class*="deco-background"]) + .cd-label {
	margin-top: 0;
}

/*--------------------------------------------------------------
## Image Flex Layout
--------------------------------------------------------------*/

.image-flex-container {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;
	align-content: flex-start; 
	margin: auto; 
	padding: 20px; 
	max-width: var(--wide-max-width);
	background-color: var(--light-color);
	box-shadow: var(--element-shadow);
	margin-bottom: 40px;
	border: var(--thin-border);
	position: relative;
}

.image-flex-item {
	flex: 1 1 auto; 
	width: 20%; 
	max-width: 320px; 
	min-width: 160px; 
	padding: 10px; 
	margin: 0;
}

.image-flex-item img {
	display: block;
}

@media screen and (min-width: 541px) {

	.image-flex-container {
		justify-content: flex-start;
	}
}

/*--------------------------------------------------------------
## Options Cards
--------------------------------------------------------------*/

.options-container {
	padding: 0 0 20px;
	margin: -10px auto 0px;
	border-radius: 0;
    position: relative;
    background-color: var(--light-color);
    box-shadow: var(--element-shadow-2);
}
.options-container h2 {
	display: inline-block; 
	margin-left: 20px;
}
.all-options {
	padding: 10px; 
	align-items: stretch; 
	flex: 1 1 0;
	flex-direction: column;
}
.single-option {
	min-width: 0;
	width: 100%;
	flex: 1 1 0;
}
.single-option>a {
	display: flex;
	border: 1px solid var(--dark-color); 
	margin: 10px; 
	border-radius: 5px; 
	box-shadow: none; 
	overflow: hidden; 
	height: auto; 
	color: var(--dark-color); 
	text-decoration: none;
	transition: var(--transition-fast);
}
.single-option>a {
	box-shadow: var(--element-shadow);
	transition: var(--transition-fast);
}
.single-option>a:hover {
	box-shadow: var(--element-shadow-2);
}
.single-option img {
	display: block; 
	position: relative;
	height: 150px; 
	width: auto;
	opacity: 1;
	transition: var(--transition-fast);
	z-index: 1;
}
.single-option>a:hover img {
	opacity: .8;
}
.option-breakout img {
	border-radius: 0px 0px 70px 0px;
}
.single-option div:first-of-type {
	display: block; 
}
.single-option div:last-of-type {
	padding: 20px;
	height: 150px; 
}
.option-breakout div:last-of-type {
	padding: 25px 30px;
	height: auto;
}
.single-option p:first-of-type {
	margin: 0;
	font-weight: 700;
}
.single-option p {
	font-size: calc(.8rem + .1vw);
	margin: 10px 0;
	font-weight: 300;
}

@media screen and (min-width: 601px) {

	.options-container {
		padding: 0 20px 20px;
	}

	.all-options {
		flex-direction: row;
	}

	.single-option {
		min-width: 400px;
		width: auto;
	}
}

@media screen and (min-width: 1241px) {

	.options-container {
		border-radius: 20px 20px 0 0;
	}
}

/*--------------------------------------------------------------
## Ogilvy 
--------------------------------------------------------------*/

.ogilvy-layout {
	width: 100%;
	height: auto;
	background:
		radial-gradient(ellipse at 0% 0%, rgba(204, 255, 144, 0.20) 0%, transparent 50%),
		radial-gradient(ellipse at 100% 0%, rgba(163, 41, 193, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse at 100% 100%, rgba(255, 183, 77, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse at 0% 100%, rgba(0, 176, 255, 0.20) 0%, transparent 50%),
		var(--light-color);
}

.ogilvy-content {
	z-index: 1;
	overflow: visible;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 48px auto auto auto auto auto 48px;
	grid-template-areas:
		"."
		"a"
		"b"
		"c"
		"d"
		"e"
		".";
}

.ogilvy-layout h1,
.ogilvy-layout .ogilvy-title {
	grid-area: a;
}

/* The section title is an h2 now; keep it out of the subheading's rule. */
.ogilvy-layout .ogilvy-title {
	border-top: 0;
	margin-top: 0.67em;
	padding-top: 0;
}

.ogilvy-layout h2 {
	grid-area: b;
	border-top: 2px dotted var(--dark-color);
	margin-top: 0;
	padding-top: 20px;
}

.ogilvy-layout p {
	grid-area: c;
	margin-bottom: 50px;
}

/* No CTA row (no h3, no .ogilvy-cta): the body is the last item, so its
   CTA spacing would only add dead space above the section's bottom row. */
.ogilvy-content:not(:has(> h3, > .ogilvy-cta)) > p {
	margin-bottom: 0;
}

.ogilvy-layout h3 {
	grid-area: d;
	margin-right: 0;
	border-top: 2px solid black;
	padding-top: 50px;
	text-align: center;
}

.ogilvy-cta {
	grid-area: e;
	z-index: 1;
	display: block;
	overflow: visible;
}

.ogilvy-cta > a {
	grid-area: e;
	background-color: var(--bright-color);
	border-radius: 999px;
	z-index: 2;
	height: 100%;
	width: 100%;
	display: grid;
  	align-items: center;
	text-align: center;
	color: var(--light-color);
	text-decoration: none;
	font-size: calc(1rem + .4vw);
	font-weight: 900;
	font-family: var(--accent-font);
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
	padding: 20px;
	max-width: 300px;
	margin: 0 auto;
}

.ogilvy-cta > a:hover {
	background-color: var(--accent-color-6);
	color: var(--light-color);
	transform: scale(1.03);
}

.two-column {
	column-count: 2;
	column-gap: 30px;
	column-width: 300px;
}

@media screen and (min-width: 1025px) {

	.ogilvy-content {
		grid-template-columns: 6fr 3fr;
		grid-template-rows: 80px auto auto auto auto 80px;
		grid-template-areas:
			". ."
			"a a"
			"b b"
			"c c"
			"d e"
			". .";
	}

	.ogilvy-layout h3 {
		margin-right: -20px;
		padding-top: 5px;
		text-align: inherit;
	}

	.ogilvy-cta {
		z-index: 2;
	}

	.ogilvy-cta > a {
		padding: 0;
		max-width: none;
		margin: 0;
	}
}

/* ogilvy-layout--flush (design audit C4): an Ogilvy with no CTA. The 48 /
   80px spacer rows and the empty CTA rows drop out, the body loses its
   CTA-row margin, and the section's av-py-* class supplies the padding.
   Never on home (its Ogilvy has a CTA). */
.ogilvy-layout--flush .ogilvy-content {
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"a"
		"b"
		"c";
}

.ogilvy-layout--flush .ogilvy-content > p {
	margin-bottom: 0;
}

.ogilvy-layout--flush .ogilvy-title {
	margin-top: 0;
}

@media screen and (min-width: 1025px) {

	.ogilvy-layout--flush .ogilvy-content {
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"a a"
			"b b"
			"c c";
	}
}

/*--------------------------------------------------------------
## Full-Width Utility Class
--------------------------------------------------------------*/

.full-width {
	width: 100dvw;
	position: relative;
	overflow-x: hidden;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/*--------------------------------------------------------------
## Image Grid Header
--------------------------------------------------------------*/

.grid-image-header {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
}
.flush-image img {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}

@media screen and (min-width: 1025px) {

	.grid-image-header {
		grid-template-columns: repeat(8, 1fr);
	}
}

/*--------------------------------------------------------------
## Split Page — Modular Component System
## Abbreviated: .sp = split-page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Split Page — Layered Grid Structure
--------------------------------------------------------------*/

/* Mobile: one column, image panel stacked above the content panel.
   Side by side from 1025px. */
.sp {
	display: grid;
	grid-template-columns: 1fr;
	border-bottom: var(--thin-border);
}

.sp--rev {
	direction: ltr;
}

@media screen and (min-width: 1025px) {

	.sp {
		grid-template-columns: 1fr 1fr;
	}

	.sp--rev {
		direction: rtl;
	}
}

.sp--rev > * {
	direction: ltr;
}

/*--------------------------------------------------------------
# Left Panel (Image Side)
--------------------------------------------------------------*/
.sp-left,
.sp--rev .sp-left {
	display: grid;
	position: relative;
	height: 100%;
	min-height: clamp(300px, 40dvh, 500px);
	grid-template-columns: 1fr 5fr 1fr;
	grid-template-rows: 1fr auto 2fr;
	grid-template-areas:
		". . ."
		". b ."
		". . .";
	background-color: var(--bright-color-light);
	border-right: none;
	border-left: none;
	border-bottom: var(--thin-border);
}

@media screen and (min-width: 1025px) {

	.sp-left,
	.sp--rev .sp-left {
		min-height: clamp(350px, 45dvh, 550px);
		grid-template-columns: 1fr 7fr;
		grid-template-rows: 3fr 2fr 6fr;
		grid-template-areas:
			". ."
			"a b"
			". .";
		border-right: var(--thin-border);
		border-bottom: none;
	}

	.sp--rev .sp-left {
		grid-template-columns: 7fr 1fr;
		grid-template-areas:
			". ."
			"b a"
			". .";
		border-right: none;
		border-left: var(--thin-border);
	}
}

/* Background image */
.sp-left::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: center / cover no-repeat;
}

/* Overlay */
.sp-left::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--bright-color-light);
}

.sp-left.sp-img--no-overlay::after { display: none; }
.sp-left.sp-img--soft-overlay::after { opacity: 0.7; }

/* Background Image Presets
 *
 * Commented out, not deleted: these hardcode http://localhost:8144, which 404s
 * on any other host and is blocked as mixed content on an HTTPS site. The
 * classes are currently unused in every template, so nothing renders differently.
 *
 * To be replaced with ACF-driven images emitted through a function, so each
 * section can carry its own background instead of six rules pointing at one
 * stock file.
 *
.sp-left.sp-img--bg-1::before { background-image: url('http://localhost:8144/wp-content/uploads/2026/01/AdobeStock_217762893_Preview.jpeg'); }
.sp-left.sp-img--bg-2::before { background-image: url('http://localhost:8144/wp-content/uploads/2026/01/AdobeStock_217762893_Preview.jpeg'); }
.sp-left.sp-img--bg-3::before { background-image: url('http://localhost:8144/wp-content/uploads/2026/01/AdobeStock_217762893_Preview.jpeg'); }
.sp-left.sp-img--bg-4::before { background-image: url('http://localhost:8144/wp-content/uploads/2026/01/AdobeStock_217762893_Preview.jpeg'); }
.sp-left.sp-img--bg-5::before { background-image: url('http://localhost:8144/wp-content/uploads/2026/01/AdobeStock_217762893_Preview.jpeg'); }
.sp-left.sp-img--bg-6::before { background-image: url('http://localhost:8144/wp-content/uploads/2026/01/AdobeStock_217762893_Preview.jpeg'); }
 */

/* Background Position */
.sp-left.sp-img--pos-top::before    { background-position: center top; }
.sp-left.sp-img--pos-bottom::before { background-position: center bottom; }
.sp-left.sp-img--pos-left::before   { background-position: left center; }
.sp-left.sp-img--pos-right::before  { background-position: right center; }

/* Grid overlay support */
.sp-left.av-grid::before { content: none; }
.sp-left.av-grid::after {
	display: block;
	background-color: transparent;
	background-size: 30px 30px;
}

.sp-left.av-grid--light::after {
	background-image:
		linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px);
}

.sp-left.av-grid--dense::after { background-size: 15px 15px; }

/*--------------------------------------------------------------
# H1 — Layered Elements
--------------------------------------------------------------*/
.sp-h1-ext {
	display: none;
	grid-area: a;
	position: relative;
	z-index: 100;
	border-top: var(--thin-border);
	border-bottom: var(--thin-border);
}

.sp-h1-bg,
.sp--rev .sp-h1-bg {
	grid-area: b;
	position: relative;
	z-index: 100;
	margin: 0;
	border: var(--thin-border);
	border-radius: 12px;
}

.sp-h1,
.sp--rev .sp-h1 {
	grid-area: b;
	position: relative;
	display: grid;
	place-items: center;
	z-index: 200;
	margin: 0;
	padding: 1rem 1.5rem;
}

@media screen and (min-width: 1025px) {

	.sp-h1-ext {
		display: block;
	}

	.sp-h1-bg,
	.sp--rev .sp-h1-bg {
		margin-right: var(--sp-h1-inset);
		border-left: none;
		border-radius: 0;
	}

	.sp--rev .sp-h1-bg {
		margin-right: 0;
		margin-left: var(--sp-h1-inset);
		border-right: none;
		border-left: var(--thin-border);
	}

	.sp-h1,
	.sp--rev .sp-h1 {
		place-items: center end;
		margin: 0 var(--sp-h1-inset) 0 0;
	}

	.sp--rev .sp-h1 {
		margin: 0 0 0 var(--sp-h1-inset);
		place-items: center start;
	}
}

/*--------------------------------------------------------------
# Right Panel (Content Side)
--------------------------------------------------------------*/
.sp-right,
.sp--rev .sp-right {
	display: grid;
	height: 100%;
	grid-template-columns: 4dvh 1fr 0;
	grid-template-rows: 4dvh auto auto 4dvh;
	grid-template-areas:
		". . ."
		". c d"
		". e e"
		". . .";
}

@media screen and (min-width: 1025px) {

	.sp-right,
	.sp--rev .sp-right {
		grid-template-columns: 7fr 1fr;
		grid-template-rows: 2fr 2fr 8fr 2fr;
		grid-template-areas:
			". ."
			"c d"
			"e e"
			". .";
	}

	.sp--rev .sp-right {
		grid-template-columns: 1fr 7fr;
		grid-template-areas:
			". ."
			"d c"
			"e e"
			". .";
	}
}

/*--------------------------------------------------------------
# H2 — Layered Elements
--------------------------------------------------------------*/
.sp-h2-ext {
	display: none;
	grid-area: d;
	position: relative;
	z-index: 100;
	border-top: var(--thin-border);
	border-bottom: var(--thin-border);
}

.sp-h2-ext--plain {
	display: none;
	grid-area: d;
	border: none;
}

.sp-h2-bg,
.sp--rev .sp-h2-bg {
	grid-area: c;
	position: relative;
	z-index: 100;
	margin: 0;
	border-top: var(--thin-border);
	border-bottom: var(--thin-border);
	border-left: var(--thin-border);
	border-right: none;
	border-radius: 12px 0 0 12px;
}

@media screen and (min-width: 1025px) {

	.sp-h2-ext,
	.sp-h2-ext--plain {
		display: block;
	}

	.sp-h2-bg,
	.sp--rev .sp-h2-bg {
		margin-left: var(--sp-h2-inset);
	}

	.sp--rev .sp-h2-bg {
		margin-left: 0;
		margin-right: var(--sp-h2-inset);
		border-left: none;
		border-right: var(--thin-border);
		border-radius: 0 12px 12px 0;
	}
}

.sp-h2-bg--plain {
	grid-area: c;
	border: none;
	border-radius: 0;
}

.sp-h2,
.sp--rev .sp-h2 {
	grid-area: c;
	position: relative;
	display: grid;
	place-items: center start;
	z-index: 200;
	margin: 0;
	padding: 20px 20px 20px 30px;
}

/* Plain h2 - no background card, text aligns with body */
.sp-h2--plain,
.sp--rev .sp-h2--plain {
	grid-area: c;
	display: block;
	position: relative;
	z-index: 200;
	margin: 0;
	padding: 20px 4dvh 20px 0;
}

.sp--rev .sp-h2--plain {
	text-align: right;
}

@media screen and (min-width: 1025px) {

	.sp-h2,
	.sp--rev .sp-h2 {
		margin: 0 0 0 var(--sp-h2-inset);
		padding: 1rem 1rem 1rem 1.5rem;
	}

	.sp--rev .sp-h2 {
		margin: 0 var(--sp-h2-inset) 0 0;
		padding: 1rem 1.5rem 1rem 1rem;
		place-items: center end;
	}

	.sp-h2--plain,
	.sp--rev .sp-h2--plain {
		padding: 1rem 1rem 1rem var(--sp-body-inset-inner);
	}

	.sp--rev .sp-h2--plain {
		padding: 1rem var(--sp-body-inset-inner) 1rem 1rem;
	}
}

/* Compact variant — both sides size to content */
.sp--compact .sp-left {
	min-height: clamp(300px, 40dvh, 500px);
	grid-template-rows: 1fr auto 1fr;
}

@media screen and (min-width: 1025px) {

	.sp--compact .sp-left {
		min-height: 0;
	}
}

.sp--compact .sp-right {
	grid-template-rows: 4.5rem auto auto 8rem;
}

.sp--compact .sp-h2--plain {
	margin-bottom: 0;
	padding-bottom: 0;
}

.sp--compact .sp-body {
	padding-top: 0.2rem;
}

.sp--compact .sp-body .av-cta {
	margin-top: 1rem !important;
}

/* H1 top-aligned — pushes the heading band toward the top of the image panel */
.sp--h1-top .sp-left {
	grid-template-rows: 2fr auto 6fr;
}

/* H1 no band — hide ext and bg elements, larger text */
.sp--h1-bare .sp-h1-ext,
.sp--h1-bare .sp-h1-bg {
	display: none;
}

.sp--h1-bare .sp-h1 {
	display: block;
	text-align: right;
	font-size: clamp(2.8rem, 5vw, 3.8rem);
}

/* H1 band color — purple at 85% opacity */
.sp--h1-purple .sp-h1-ext,
.sp--h1-purple .sp-h1-bg {
	background-color: rgba(163, 41, 193, 0.85);
}

/* Light right panel with extra breathing room */
.sp--right-light .sp-right {
	background-color: rgba(255, 255, 255, 0.85);
	padding: 1rem;
}

@media screen and (min-width: 1024px) {
	.sp--right-light .sp-right {
		padding: 2rem 2rem 0 0;
	}
}

/*--------------------------------------------------------------
# Body Text
--------------------------------------------------------------*/
.sp-body,
.sp--rev .sp-body {
	grid-area: e;
	padding: 20px 0 0 0;
	text-align: left;
}

@media screen and (min-width: 1025px) {

	.sp-body,
	.sp--rev .sp-body {
		padding: 1rem var(--sp-body-inset-outer) 0 var(--sp-body-inset-inner);
		text-align: inherit;
	}

	.sp--rev .sp-body {
		text-align: right;
		padding: 1rem var(--sp-body-inset-inner) 0 var(--sp-body-inset-outer);
	}
}

.sp-text {
	line-height: 1.8;
	margin: 0 4dvh 1em 0;
	max-width: 60ch;
	text-align: left;
}

@media screen and (min-width: 1025px) {

	.sp-text {
		margin: 1em 0;
	}
}

.sp-text:last-child {
	margin-bottom: 0;
}

.sp--rev .sp-text {
	margin-left: 0;
}

@media screen and (min-width: 1025px) {

	.sp--rev .sp-text {
		margin-left: auto;
	}
}

/*--------------------------------------------------------------
## Spotlight — Icon/Logo + Content Card
--------------------------------------------------------------*/

/* Mobile: icon panel stacked above the content card.
   Side by side from 901px. */
.sl,
.sl--rev {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: auto;
	padding: 2rem 1rem;
	position: relative;
}

/* Icon/Logo Panel */
.sl-icon {
	flex: none;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
	position: relative;
	z-index: 2;
}

.sl-icon svg,
.sl-icon img {
	max-width: 160px; /* was an inline style on the img; the maze closer enlarges it at desktop below */
	max-height: 180px;
	width: auto;
	height: auto;
}

/* Content Card */
.sl-content,
.sl--rev .sl-content {
	flex: 1;
	padding: 2rem;
	margin: 0 1rem;
	border-radius: 24px;
	position: relative;
	z-index: 2;
}

@media screen and (min-width: 901px) {

	.sl,
	.sl--rev {
		flex-direction: row;
		min-height: clamp(300px, 50dvh, 500px);
		padding: 0;
	}

	.sl--rev {
		flex-direction: row-reverse;
	}

	.sl-icon {
		flex: 0 0 40%;
		width: auto;
		padding: 2rem;
	}

	.sl-icon svg,
	.sl-icon img {
		max-height: 14rem;
	}

	.sl-content,
	.sl--rev .sl-content {
		padding: 2rem 2.5rem;
		margin: 2rem 0;
		border-radius: 24px 0 0 24px;
	}

	.sl--rev .sl-content {
		border-radius: 0 24px 24px 0;
	}
}

.sl-content h2 {
	margin-top: 0;
	margin-bottom: 0.8rem;
}

/* The statement size on the closer heading takes the statement line-height. */
.sl-content h2.av-h1 {
	line-height: 1.15;
}

.sl-content p {
	line-height: 1.8;
	max-width: 55ch;
}

.sl-content p:last-child {
	margin-bottom: 0;
}

/* The CTA and a secondary text link on one line (spotlight secondary_label),
   wrapping under each other when the card is narrow. */
.sl-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 12px;
}

/* On a grid-footer shelf (the case-study ask) the row follows an av-lead
   with no bottom margin, so it takes the gap the spotlight's body gives. */
.cd-grid-footer > .sl-actions {
	margin-top: 28px;
}

/* Bright surface for the content card: deep to Electric Blue to a cooler
   blue, white text, a hairline. Every stop holds white body text at 4.5:1 or
   better (no sky stop: white on sky is 2.4:1). Radius and padding stay
   .sl-content's. .sl .sl-content--bright beats av-bg-dark if it is still on
   the element. */
.sl .sl-content--bright {
	background: linear-gradient(135deg, var(--bright-color-deep) 0%, var(--bright-color) 60%, var(--bright-color-cool) 100%);
	color: var(--light-color);
	border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Tall closer: the maze closer's room without its ground. Vertical padding
   on the section and a larger sticker from 1024px; the aurora, grid or any
   other ground comes from the wrapper or section_class as before. Sits after
   the 901px .sl rule (padding: 0) so it wins at equal specificity. */
.sl--tall {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

@media screen and (min-width: 901px) {

	.sl--tall {
		padding-top: 4.5rem;
		padding-bottom: 4.5rem;
	}
}

@media screen and (min-width: 1024px) {

	.sl--tall .sl-icon img {
		max-width: 260px;
		max-height: 240px;
	}
}

/* Proof chart (template-parts/sections/proof-chart.php): one sourced
   benchmark as a grouped column chart, CSS only. A 7 / 5 body (chart, then an
   aside of cards) from 1024px, stacked below; light ground only. Bar heights
   come from the inline --bc-v over --bc-max; the bar area is --bc-h tall
   under 28px of room for the value labels, and one 2px dotted baseline (the
   ogilvy shelf) runs the chart's full width under the bars. Text never wears
   a series colour. */
.bc-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 32px;
	margin-top: 8px; /* With the ct-header's 24px: 32px to the chart. */
}

.bc {
	--bc-h: 220px;
	margin: 0;
}

.bc-caption {
	font-family: var(--accent-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.7);
	max-width: 60ch;
	margin: 0 0 16px;
}

.bc-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.bc-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--accent-font);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	color: #12151c;
}

.bc-series-1 {
	--bc-color: var(--accent-color-5);
}

.bc-series-2 {
	--bc-color: var(--accent-color-6);
}

.bc-swatch {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var(--bc-color);
}

.bc-chart {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--bc-n, 3), minmax(0, 1fr));
	column-gap: 16px;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The baseline: one continuous line at the foot of every group's bar area
   (label room plus --bc-h from the top), so the gaps do not break it. */
.bc-chart::before {
	content: "";
	position: absolute;
	top: calc(var(--bc-h) + 28px);
	left: 0;
	right: 0;
	border-top: 2px dotted var(--dark-color);
	pointer-events: none;
}

.bc-group {
	display: grid;
	grid-template-rows: auto auto;
	min-width: 0;
}

.bc-bars {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 4px;
	height: calc(var(--bc-h) + 28px);
	margin: 0;
	padding: 28px 0 0;
	list-style: none;
}

.bc-bar {
	position: relative;
	flex: 0 0 36px;
	height: calc(var(--bc-v) / var(--bc-max) * 100%);
	border-radius: 4px 4px 0 0;
	background: var(--bc-color);
}

.bc-value {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 6px;
	font-family: var(--accent-font);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	color: #12151c;
	white-space: nowrap;
}

.bc-group-label {
	font-family: var(--accent-font);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-wrap: balance;
	color: #12151c;
	margin: 12px 0 0;
}

.bc-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 16px;
}

.bc-card {
	padding: 24px;
	border-radius: 16px;
}

.bc-guide {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	font-family: var(--primary-font);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.5;
	color: #12151c;
}

.bc-guide li + li {
	margin-top: 12px;
}

.bc-guide b {
	font-family: var(--accent-font);
	font-weight: 600;
}

/* .cd p and .cd--panel p set body size, margin, growth and grey; the note
   keeps its own. */
.bc-card p.bc-note {
	font-family: var(--primary-font);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(18, 21, 28, 0.6);
	margin: 16px 0 0;
	flex-grow: 0;
}

.bc-quote {
	margin: 0;
}

.bc-card .bc-quote p {
	font-family: var(--primary-font);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.92);
	margin: 0 0 16px;
	flex-grow: 0;
}

.bc-quote cite {
	display: block;
	font-style: normal;
}

.bc-quote cite .av-eyebrow {
	margin: 0;
	text-decoration: none;
}

.bc-quote cite a.av-eyebrow:hover,
.bc-quote cite a.av-eyebrow:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bc-source {
	font-family: var(--primary-font);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.6);
	max-width: 72ch;
	margin: 32px 0 0;
}

.bc-source a,
.bc-source a:visited {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.bc-source a:hover,
.bc-source a:focus-visible {
	text-decoration-thickness: 2px;
}

@media screen and (min-width: 1024px) {

	.bc-body {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: 64px;
		align-items: start;
		margin-top: 0;
	}

	.bc {
		--bc-h: 280px;
	}

	.bc-chart {
		column-gap: 24px;
	}

	.bc-bars {
		gap: 6px;
	}

	.bc-bar {
		flex-basis: 48px;
	}

	.bc-value {
		font-size: 0.9375rem;
	}

	.bc-group-label {
		font-size: 1rem;
	}

	.bc-aside {
		row-gap: 24px;
	}

	.bc-card {
		padding: 32px;
	}

	.bc-card .bc-quote p {
		font-size: 1.25rem;
	}

	.bc-source {
		margin-top: 40px;
	}
}

/* Spotlight motto line between the body and the CTA. */
.motto {
	margin: 14px 0 4px;
}

/* Extra-wide — floating card, background stays full-bleed */
@media screen and (min-width: 1600px) {
	.sl,
	.sl--rev {
		padding-left: calc((100vw - 1600px) / 2);
		padding-right: calc((100vw - 1600px) / 2);
	}

	.sl-content,
	.sl--rev .sl-content {
		border-radius: 24px;
		margin: 2rem;
	}
}

/*--------------------------------------------------------------
## Hero Image Header Format
--------------------------------------------------------------*/

section.hero-image-mosaic {
	overflow: hidden;
	background: var(--bright-color-light);
	position: relative;
	display: grid;
	grid-template-columns: 2fr 9fr 2fr;
	box-sizing: border-box;
	/* Mobile: ~70vh, not full viewport. Grows if heading + extras need more.
	   site-content -65px is added so the painted band ends at 70% of the viewport. */
	height: auto;
	min-height: calc(70dvh + 65px);
	grid-template-rows: auto auto auto;
	grid-template-areas:
		". a ."
		". b ."
		". c .";
	align-content: center;
	padding-top: 130px;
	padding-bottom: 32px;
}

@media screen and (min-width: 1024px) {
	section.hero-image-mosaic {
		height: clamp(400px, 100dvh, 1100px);
		min-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		align-content: normal;
		grid-template-rows: 3fr 1fr 1fr 1fr;
		grid-template-areas:
			". . ."
			". a ."
			". b ."
			". . .";
	}
}

section.hero-image-mosaic::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,.05) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,.55) 100%);
	z-index: 100;
}

/* av-scrim: inner-page hero contrast (design audit 4). Mobile text spans
   the width, so the scrim rises from the bottom; on desktop a left-to-right
   fade layers over the bottom fade and reaches 85% so it covers a 20ch h1
   that starts at the 2fr gutter (theme-lead decision, Phase 0). */
section.hero-image-mosaic.av-scrim::after {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.48) 55%, rgba(0, 0, 0, 0.44) 100%);
}

@media screen and (min-width: 1024px) {

	section.hero-image-mosaic.av-scrim::after {
		background:
			linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.48) 40%, rgba(0, 0, 0, 0.1) 85%, rgba(0, 0, 0, 0.04) 100%),
			linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 40%, rgba(0, 0, 0, 0.55) 100%);
	}
}

section.hero-image-mosaic::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

section.hero-image-mosaic > * {
	position: relative;
	z-index: 200;
	margin-top: 0;
}

section.hero-image-mosaic > h1 {
	grid-area: a;
	align-self: end;
	font-size: clamp(2rem, 6vw, 4rem);
	margin-bottom: 1rem;
}

/* Hero with a back-link eyebrow (case-study singles): eyebrow + h1 share
   area a, in normal flow. */
section.hero-image-mosaic > hgroup {
	grid-area: a;
	align-self: end;
	margin-bottom: 1rem;
}

section.hero-image-mosaic > hgroup > h1 {
	font-size: clamp(2rem, 6vw, 4rem);
	margin: 0;
}

/* The highlighted part of the headline (Page Header highlight trio): the
   card titles' 4px shave on the corners (fixed on purpose, Hannah), one
   rounded piece per line when it wraps, and painted behind the headline's
   text: inline backgrounds paint in line order, so a chip on the second
   line would cover the first line's descenders. The h1 (home) or hgroup
   (inner pages) is a stacking context (position relative, z-index 200), so
   the negative z-index stays above the hero's image and scrim. */
section.hero-image-mosaic h1 > [class*="deco-background"] {
	position: relative;
	z-index: -1;
	border-radius: 4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Hero subheading: a p.hero-sub (the h2 selector stays for any old markup).
   margin-bottom keeps the h2's browser-default 0.83em so nothing moves. */
section.hero-image-mosaic > h2,
section.hero-image-mosaic > .hero-sub {
	grid-area: b;
	align-self: start;
	max-width: 45ch;
	font-size: calc(1.2rem + 0.15vw);
	font-weight: 400;
	font-family: var(--accent-font);
	margin-bottom: 0.83em;
}

section.hero-image-mosaic > .hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

/* Hero parallax: the image (or video) lags the page by a quarter of the
   hero's height while the hero leaves the viewport, a hint of depth under
   the static scrim. The hero sits at the top of the page, so its exit range
   starts at scroll 0 and the layer only ever moves down, into space the
   scroll has already carried above the viewport: nothing uncovers.
   --hero-parallax is the full travel, as a share of the hero's height.
   Browsers without scroll-driven animations, and readers who reduce motion,
   keep the static layer. */
section.hero-image-mosaic {
	--hero-parallax: 25%;
}

@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		section.hero-image-mosaic {
			/* stylelint-disable-next-line property-no-unknown */
			view-timeline: --hero-band block;
		}

		section.hero-image-mosaic::before,
		section.hero-image-mosaic > .hero-video {
			animation: hero-parallax linear both;
			/* stylelint-disable-next-line property-no-unknown */
			animation-timeline: --hero-band;
			/* stylelint-disable-next-line property-no-unknown */
			animation-range: exit;
			will-change: transform;
		}
	}
}

@keyframes hero-parallax {

	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(var(--hero-parallax));
	}
}

/* Inner-page hero: hero-image-mosaic--page (shared hero spec 3 and 4).
   Set by image-header.php on every page except home, so the home hero keeps
   the base rules above untouched. Height grows with content, never fixed;
   the text block sits at the bottom where the scrim is densest. Row 1 is a
   spacer that absorbs the has-media min-height and collapses to 0 in the
   text state. Background colour (not the shorthand) so the ::before image
   still paints; black while the image loads and as the text-state ground.
   Top padding is the spec's nav clearance (65px nav + the av-py-m step,
   120 / 160) plus 65px, because .site-content pulls the hero 65px up
   under the fixed nav. */
section.hero-image-mosaic.hero-image-mosaic--page {
	background-color: var(--dark-color);
	height: auto;
	min-height: 0;
	padding-top: 185px;
	padding-bottom: 56px;
	grid-template-columns: 40px minmax(0, 1fr) 40px;
	grid-template-rows: minmax(0, 1fr) auto auto;
	grid-template-areas:
		". . ."
		". a ."
		". c .";
	align-content: normal;
}

section.hero-image-mosaic.hero-image-mosaic--page.has-media {
	min-height: 700px;
}

/* Text state (no image or video): no overlay, sizes to its content. */
section.hero-image-mosaic.hero-image-mosaic--page:not(.has-media)::after {
	content: none;
}

section.hero-image-mosaic--page > hgroup {
	grid-area: a;
	align-self: end;
	margin: 0;
}

/* Eyebrow and dek are full white, not the spec's 0.8 / 0.9: at those
   alphas the About dek (4.1:1) and the case-study eyebrow (4.3:1) measured
   under the 4.5:1 target over the brightest pixel behind them. */
section.hero-image-mosaic--page > hgroup > .av-eyebrow {
	color: var(--light-color);
	margin: 0 0 12px;
}

section.hero-image-mosaic--page > hgroup > .hero-sub {
	font-family: var(--accent-font);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--light-color);
	margin: 16px 0 0;
	text-wrap: pretty;
}

section.hero-image-mosaic--page > .hero-extras {
	grid-area: c;
	align-self: start;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	max-width: 60ch;
	margin-top: 32px;
}

section.hero-image-mosaic--page > .hero-extras > .cd-tags {
	flex: 1 1 100%;
	margin: 0;
}

section.hero-image-mosaic--page > .hero-extras > a + .cd-tags {
	margin-top: 4px;
}

section.hero-image-mosaic--page .cd-tags li.cat {
	color: rgba(255, 255, 255, 0.8);
}

@media screen and (min-width: 1024px) {

	section.hero-image-mosaic.hero-image-mosaic--page {
		padding-top: 225px;
		padding-bottom: 96px;
		grid-template-columns: 2fr minmax(0, 9fr) 2fr;
	}

	section.hero-image-mosaic.hero-image-mosaic--page.has-media {
		min-height: clamp(600px, 82dvh, 880px);
	}

	section.hero-image-mosaic--page > hgroup > .av-eyebrow {
		margin-bottom: 16px;
	}

	section.hero-image-mosaic--page > hgroup > .hero-sub {
		font-size: calc(1.2rem + 0.15vw);
		max-width: 50ch;
		margin-top: 24px;
	}

	section.hero-image-mosaic--page > .hero-extras {
		gap: 16px;
		margin-top: 40px;
	}
}

.av-cta--ghost,
a.av-cta--ghost:visited {
	background: transparent;
	color: #fff;
	border: 2px solid rgba(234, 240, 255, 0.38);
	padding: 14px 30px;
}

.av-cta--ghost:hover,
a.av-cta--ghost:visited:hover,
a.av-cta--ghost:focus,
a.av-cta--ghost:active {
	color: #fff;
	border-color: rgba(234, 240, 255, 0.7);
	filter: none;
}

/*--------------------------------------------------------------
## Header and Paragraph Section
--------------------------------------------------------------*/

section.header-and-paragraph {
	overflow: hidden; 
	/*height: clamp(400px, 80dvh, 1100px);*/
    position: relative;
	display: grid;  
    grid-template-columns: 1fr 6fr 1fr;
    grid-template-rows: 1fr 1fr 2fr 1fr;
    grid-template-areas:
        ". . ."
		". a ."
		". b ."
		". . .";
}

section.header-and-paragraph::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

section.header-and-paragraph > * {
	position: relative;
	z-index: 200;
	margin-top: 0;
}

section.header-and-paragraph > h2 {
	grid-area: a;
	align-self: end;
}

section.header-and-paragraph > p {
	grid-area: b;
	align-self: start;
	max-width: 60ch;
}

/*--------------------------------------------------------------
## Pipeline — Centered Header with Decorative Lines
--------------------------------------------------------------*/

.pl {
	padding: 80px 0 16px;
	overflow: hidden;
}

.pl-eyebrow {
	margin: 0 0 8px;
	text-align: center;
	font-family: var(--accent-font);
	font-size: clamp(0.72rem, 1.1vw, 0.9rem);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.72;
}

/* Mobile: heading alone, centred. The side lines appear from 701px. */
.pl-header {
	display: block;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	text-align: center;
	padding: 0 20px;
}

@media screen and (min-width: 701px) {

	.pl-header {
		display: grid;
		text-align: inherit;
		padding: 0;
	}
}

.pl-header h1,
.pl-header h2 {
	margin: 30px;
	padding-bottom: 1rem;
}

/* Left and right line containers */
.pl-left,
.pl-right {
	display: none;
	align-items: center;
	height: 24px;
}

@media screen and (min-width: 701px) {

	.pl-left,
	.pl-right {
		display: flex;
	}
}

.pl-left {
	justify-content: flex-end;
}

/* Line base */
.pl-line {
	flex: 1;
	height: 5px;
}

/* Dashed line modifier — uses currentColor */
.pl-line--dashed {
	background: repeating-linear-gradient(
		90deg,
		currentColor 0,
		currentColor 10px,
		transparent 10px,
		transparent 20px
	);
}

/* Animated dashed line */
.pl-line--animated {
	background-size: 20px 100%;
	animation: pl-flow 1s linear infinite;
}

@keyframes pl-flow {
	from { background-position: 0 0; }
	to { background-position: 20px 0; }
}

/* Dot — uses border-color and background-color from utilities */
.pl-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border-width: 5px;
	border-style: solid;
	flex-shrink: 0;
	margin-left: -12px;
}

/* Arrow — uses border-color and background-color from utilities */
.pl-arrow {
	width: 20px;
	height: 20px;
	border-width: 5px;
	border-style: solid;
	border-radius: 4px;
	transform: rotate(45deg);
	flex-shrink: 0;
	margin-right: -10px;
}

.pl-content {
	max-width: 65ch;
	margin: 1.5rem 40px 0;
	text-align: center;
	padding: 0 2rem;
	position: relative;
}

.pl-content::before,
.pl-content::after {
	content: "";
	position: absolute;
	top: -1rem;
	bottom: -1rem;
	width: 0.6rem;
}

.pl-content::before {
	left: 0;
	border-left: 5px solid;
	border-top: 5px solid;
	border-bottom: 5px solid;
	border-right: none;
	border-image: linear-gradient(
		to bottom,
		rgba(163, 41, 193, 0.25),
		rgba(41, 98, 255, 0.4) 50%,
		rgba(0, 176, 255, 0.25)
	) 1;
}

.pl-content::after {
	right: 0;
	border-right: 5px solid;
	border-top: 5px solid;
	border-bottom: 5px solid;
	border-left: none;
	border-image: linear-gradient(
		to bottom,
		rgba(163, 41, 193, 0.25),
		rgba(41, 98, 255, 0.4) 50%,
		rgba(0, 176, 255, 0.25)
	) 1;
}

.pl-content p {
	font-family: var(--accent-font);
	font-size: 0.95rem;
	line-height: 1.8;
	text-align: left;
}

@media screen and (min-width: 701px) {

	.pl-content {
		margin-left: auto;
		margin-right: auto;
	}
}

/*--------------------------------------------------------------
## Image CTA — .ic
--------------------------------------------------------------*/

.ic {
	position: relative;
	min-height: 28rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* The photo layer. Static by default: the band's own box, cover, position
   from the part's inline style (center unless the view model says otherwise).
   The ::after scrim paints above it (same z-index, later in paint order). */
.ic-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

/* Classic parallax: the layer is half a band taller than the band and lags
   the page by that half while the band crosses the viewport, so the photo's
   lower part shows as the band enters and its upper part as it leaves. The
   band's view timeline drives it (not the layer's, which overruns the band).
   Browsers without scroll-driven animations, and readers who reduce motion,
   keep the static layer above. */
@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		.ic {
			/* stylelint-disable-next-line property-no-unknown */
			view-timeline: --ic-band block;
		}

		.ic-bg {
			bottom: auto;
			height: 150%;
			animation: ic-parallax linear both;
			/* stylelint-disable-next-line property-no-unknown */
			animation-timeline: --ic-band;
			will-change: transform;
		}
	}
}

@keyframes ic-parallax {

	from {
		transform: translateY(-33.333%);
	}

	to {
		transform: translateY(0);
	}
}

.ic::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65));
	z-index: 0;
}

.ic-content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wide-max-width);
	padding: 60px 24px;
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: center;
	text-align: center;
}

.ic-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ic-headline {
	font-family: var(--accent-font);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	font-weight: 700;
	color: var(--accent-color-3);
	margin: 0;
	line-height: 1.15;
}

.ic-sub {
	font-family: var(--primary-font);
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 2.2;
	margin: 0;
}

.ic-sub span {
	color: var(--dark-color);
	background: rgba(29, 233, 182, 0.85);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 4px 10px;
}

.ic-btn {
	display: inline-block;
	padding: 1.2rem 2rem;
	font-family: var(--accent-font);
	font-size: clamp(1rem, 3vw, 1.4rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--dark-color);
	background: linear-gradient(135deg, var(--accent-color-1), var(--accent-color-2), var(--accent-color-3));
	text-decoration: none;
	border-radius: 12px;
	white-space: nowrap;
	flex-shrink: 0;
	border: 2px solid var(--dark-color);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Designed buttons keep their colour when visited; a:visited (0,1,1) would otherwise beat .ic-btn */
a.ic-btn:visited {
	color: var(--dark-color);
}

.ic-btn i {
	margin-left: 10px;
}

.ic-btn:hover {
	opacity: 0.85;
	color: var(--dark-color);
	transform: scale(1.05);
}

@media screen and (min-width: 700px) {
	.ic {
		min-height: 35rem;
	}
}

@media screen and (min-width: 1024px) {
	.ic-btn {
		padding: 2.2rem 3.6rem;
	}

	.ic-content {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
		padding: 80px 40px;
		gap: 60px;
	}
}

/* Panel variant — handoff .stack-note (dark inset, body + CTA) */
.ic-panel-wrap {
	padding-top: 1.5rem;
	padding-bottom: 2.5rem;
	background: linear-gradient(135deg, #f2fbf4 0%, #f7f8fc 30%, #f3f0fb 70%, #fbf3ec 100%);
}

.ic.ic--panel {
	min-height: 0;
	display: block;
	background: linear-gradient(120deg, #0e1d52 0%, #101a33 60%, #0b2b2b 100%);
	border-radius: 18px;
	overflow: hidden;
}

.ic.ic--panel::after {
	display: none;
}

.ic.ic--panel .ic-content {
	max-width: none;
	padding: 30px 34px;
	flex-direction: column;
	align-items: stretch;
	text-align: left;
	gap: 22px;
}

.ic.ic--panel .ic-body {
	font-family: var(--primary-font);
	font-size: 1.05rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

.ic.ic--panel .ic-body p {
	margin: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.ic.ic--panel .ic-body strong,
.ic.ic--panel .ic-body b {
	color: #fff;
	font-weight: 700;
}

.ic.ic--panel .av-cta {
	align-self: flex-start;
	flex-shrink: 0;
	white-space: nowrap;
}

@media screen and (min-width: 900px) {
	.ic.ic--panel .ic-content {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 28px;
	}

	.ic.ic--panel .av-cta {
		align-self: center;
	}
}

/*--------------------------------------------------------------
## Comparison Table — .ct
--------------------------------------------------------------*/

.ct-section {
	padding: 2rem 0 6rem;
	background:
		radial-gradient(ellipse at bottom right, rgba(163, 41, 193, 0.18) 0%, transparent 60%),
		var(--dark-color);
}

/* Lift content above grid ::before (z-index: 1) */
.ct-section > * {
	position: relative;
	z-index: 2;
}

.ct-header {
	padding: 4rem 2rem 2.4rem;
	text-align: center;
}

.ct-header--center {
	text-align: center;
}

.ct-header--left {
	text-align: left;
	padding-left: 0;
	padding-right: 0;
}

.ct-header .av-eyebrow {
	font-family: var(--accent-font);
	font-size: clamp(0.75rem, 1.2vw, 0.9rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 0.6rem;
	line-height: 1.2;
}

.ct-header .ct-title {
	font-family: var(--primary-font);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 700;
	color: var(--light-color);
	margin: 0;
	line-height: 1.2;
}

/* Mid-section title — handoff weight (~22px sans), same <p> markup */
.ct-header--sub {
	padding: 0.5rem 0 1rem;
}

.ct-header--sub > .ct-title {
	font-family: var(--accent-font);
	font-size: clamp(1.25rem, 2vw, 1.375rem);
	font-weight: 700;
	line-height: 1.25;
}

.ct-header-intro {
	margin-top: 1rem;
	max-width: 62ch;
	font-family: var(--accent-font);
	font-size: calc(1rem + 0.05vw);
	font-weight: 400;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
}

/* Left bands: one column at the prose measure. Splitting a single intro
   paragraph across two columns broke sentences mid-line. */
.ct-header--left .ct-header-intro {
	max-width: 65ch;
}

.ct-header--center .ct-header-intro {
	margin-inline: auto;
}

.ct-header--sub .ct-header-intro {
	margin-top: 0.5rem;
}

.ct-header-intro p {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	margin: 0;
	line-height: inherit;
}

/* Two or more intro paragraphs keep a line between them. */
.ct-header-intro p + p {
	margin-top: 1em;
}

/* Eyebrow-only label (handoff .adk-eyebrow) — no main heading line */
.ct-header--label {
	padding: 2.5rem 0 1.25rem;
}

.ct-header--label .av-eyebrow {
	color: var(--accent-color-1);
	margin-bottom: 0;
}

/* Light continuum — same markup, dark text (Operating model) */
.ct-header--on-light {
	padding-top: 3.5rem;
	padding-bottom: 1.25rem;
}

.ct-header--on-light .av-eyebrow {
	color: rgba(18, 21, 28, 0.6);
}

.ct-header--on-light .ct-title,
.ct-header--on-light .ct-header-intro p {
	color: var(--dark-color);
}

.ct-header--on-light .ct-header-intro {
	color: rgba(18, 21, 28, 0.72);
}

.ct-header--on-light.ct-header--label .av-eyebrow {
	color: var(--accent-color-1);
}

/* The response line of a call-and-response title (a span after a break)
   keeps the title's face (the global h2 * rule would set it in Poppins)
   and is its own line box, so balance evens it on its own. Limited to that
   span: chips in Literata titles (Taming AI) keep their Poppins until a
   ruling. Off the home. */
:where(body:not(.home)) .ct-header .ct-title > br + span {
	display: block;
	font-family: inherit;
}

/* Section-title roles break evenly (no one-word last line). Off the home
   until its pass (home lock). av-headline carries its own. */
:where(body:not(.home)) :is(.ct-header .ct-title, .ogilvy-layout .ogilvy-title, .faq-title, .sl-content h2) {
	text-wrap: balance;
}

/* Statement title: the Poppins statement role (home "We do data
   differently."), for a header that carries the section's thesis. */
.ct-header--statement > .ct-title {
	font-family: var(--accent-font);
	font-size: calc(2rem + 0.5vw);
	line-height: 1.15;
}

/* A highlight chip (deco-background-*) in a light-ground section title:
   each wrapped row gets its own padded, rounded piece, and the span's
   line-height opens the line box so the rows do not overlap (as the
   cd-title chip). Light headers only: the single-word chips in dark
   statement titles keep their current box until a ruling. */
.ct-header--on-light > .ct-title > [class*="deco-background"] {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0 10px;
	border-radius: 4px;
	line-height: 1.3;
}

/* Split header: eyebrow and title beside the intro, 5 / 7 (the av-split
   values), the intro's last line level with the title's. Stacked below
   1024px. */
@media screen and (min-width: 1024px) {

	.ct-header--split {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: 64px;
	}

	.ct-header--split > .av-eyebrow,
	.ct-header--split > .ct-title {
		grid-column: 1;
	}

	.ct-header--split > .ct-header-intro {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: end;
		margin-top: 0;
	}
}

.ct {
	padding: 0;
	overflow-x: auto;
}

.ct-card {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 50%, rgba(41, 98, 255, 0.06) 100%);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

/* Top-edge refraction highlight */
.ct-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
	pointer-events: none;
	border-radius: 20px 20px 0 0;
}

/* Mobile: thead hidden, each row is a two-column grid with the row label
   above and the column labels inside the cells. Real table from 701px. */
.ct-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 0;
}

.ct-table thead tr {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ct-table thead th {
	padding: 1rem 1rem 0.8rem;
	text-align: left;
	font-family: var(--accent-font);
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

.ct-table thead .ct-label-col {
	width: 15%;
	padding-left: 1rem;
}

.ct-table thead .ct-col--ei {
	color: var(--accent-color-1);
	width: 47%;
}

.ct-table thead .ct-col--trad {
	color: rgba(255, 255, 255, 0.6);
	width: 38%;
}

.ct-table tbody tr {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Mobile row layout (overrides the table defaults above until 701px). */
.ct-table thead {
	display: none;
}

.ct-table tbody {
	display: flex;
	flex-direction: column;
}

.ct-table tbody tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-top: none;
	padding: 1rem;
	gap: 0;
}

.ct-table tbody tr:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ct-table tbody tr:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ct-label {
	font-family: var(--accent-font);
	font-weight: 700;
	color: rgba(200, 145, 230, 0.9);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	grid-column: 1 / -1;
	padding: 0 0 0.6rem;
	text-align: left;
	font-size: 0.85rem;
	vertical-align: middle;
}

.ct-trad {
	font-family: var(--primary-font);
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.85rem;
	padding: 0.5rem 1rem;
	vertical-align: middle;
	line-height: 1.5;
}

.ct-ei {
	font-family: var(--primary-font);
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.85rem;
	font-weight: 500;
	padding: 0.5rem 1rem;
	vertical-align: middle;
	line-height: 1.5;
	border-left: 2px solid rgba(41, 98, 255, 0.25);
	margin-bottom: 0.5rem;
}

/* Footer line beneath table */
.ct-footer {
	border-top: none;
	background-image: radial-gradient(circle, rgba(255,255,255,0.45) 1px, transparent 1px);
	background-size: 8px 2px;
	background-repeat: repeat-x;
	background-position: top left;
	margin: 2rem 1.5rem 0;
	padding: 1.2rem 0 0.4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 1.2rem;
	text-align: center;
}

.ct-footer-text {
	font-family: var(--accent-font);
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
	text-align: center;
}

.ct-footer-divider {
	display: none;
	width: 2px;
	align-self: stretch;
	background: rgba(255, 255, 255, 0.3);
	flex-shrink: 0;
}

.ct-footer-link,
.ct-footer-link:visited {
	font-family: var(--accent-font);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--accent-color-1);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
	transition: color 0.3s ease;
}

.ct-footer-link:hover,
.ct-footer-link:visited:hover {
	color: var(--accent-color-6);
}

.ct-footer > .av-link {
	flex-shrink: 0;
	white-space: nowrap;
}

.ct-footer-link i {
	margin-left: 0.4rem;
	font-size: 1.15rem;
	vertical-align: middle;
	display: inline-block;
	animation: ct-arrow-nudge 2s ease-in-out infinite;
}

@keyframes ct-arrow-nudge {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(4px); }
}

@media screen and (min-width: 701px) {

	.ct-footer {
		flex-direction: row;
		text-align: inherit;
	}

	.ct-footer-divider {
		display: block;
	}

	.ct-footer-text {
		text-align: right;
	}

	.ct-table {
		min-width: 24rem;
	}

	.ct-table thead {
		display: table-header-group;
	}

	.ct-table tbody {
		display: table-row-group;
		flex-direction: row;
	}

	.ct-table tbody tr {
		display: table-row;
		grid-template-columns: none;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		padding: 0;
		gap: normal;
	}

	.ct-table tbody tr:not(:last-child) {
		border-bottom: none;
	}

	.ct-label {
		grid-column: auto;
		padding: 1rem 0.8rem 1rem 1rem;
		text-align: inherit;
		font-size: 0.72rem;
		white-space: nowrap;
	}

	.ct-trad,
	.ct-ei {
		padding: 1rem;
		font-size: 0.95rem;
	}

	.ct-ei {
		border-left: 0;
		border-right: 2px solid rgba(41, 98, 255, 0.25);
		margin-bottom: 0;
	}
}

/* Column label inside each cell (comparison-table.php). Mobile shows it
   because the thead is hidden; desktop hides it because the thead shows. */
.ct-col-label {
	display: block;
	font-family: var(--accent-font);
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	margin-bottom: 0.3rem;
}

.ct-ei .ct-col-label {
	color: var(--accent-color-1);
}

.ct-trad .ct-col-label {
	color: rgba(255, 255, 255, 0.6);
}

@media screen and (min-width: 701px) {

	.ct-col-label {
		display: none;
	}
}

/*--------------------------------------------------------------
## Compare Slider — Before/After Image Comparison
--------------------------------------------------------------*/
.cmp {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	max-width: var(--extra-wide-max-width);
	margin: 0 auto;
	--pos: 50%;
	cursor: col-resize;
	/* Prevent text selection while dragging */
	-webkit-user-select: none;
	user-select: none;
}

/* Images */
.cmp img {
	display: block;
	width: 100%;
	height: auto;
}

.cmp-after {
	position: relative;
	z-index: 1;
}

.cmp-before {
	position: absolute;
	inset: 0;
	z-index: 2;
	clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.cmp-before img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Handle — vertical divider line + drag circle */
.cmp-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	z-index: 4;
	width: 3px;
	background: var(--light-color);
	transform: translateX(-50%);
	pointer-events: none;
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.cmp-handle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--light-color);
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.cmp-handle::after {
	content: "◀  ▶";
	font-size: 0.6rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--dark-color);
	letter-spacing: 6px;
	z-index: 1;
	white-space: nowrap;
	opacity: 0.6;
}

/* Range input — invisible, covers full area */
.cmp input[type="range"] {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: col-resize;
	-webkit-appearance: none;
	appearance: none;
}

/* Labels */
.cmp-label {
	position: absolute;
	z-index: 3;
	padding: 6px 12px;
	border-radius: 999px;
	font-family: var(--accent-font);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	pointer-events: none;
	opacity: 0.9;
}

.cmp-label--before {
	top: 20px;
	left: 20px;
}

.cmp-label--after {
	top: 20px;
	right: 20px;
}

/* Section wrapper — adds padding + optional heading */
.cmp-section {
	padding: 40px 20px;
}

.cmp-section h2 {
	text-align: center;
	margin-bottom: 40px;
}

/* Rounded corners modifier */
.cmp--square {
	border-radius: 0;
}

/* Shadow modifier */
.cmp--shadow {
	box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

/* Responsive */
@media screen and (min-width: 721px) {

	.cmp-section {
		padding: 60px max(40px, calc((100vw - var(--extra-wide-max-width)) / 2 + 40px));
	}

	.cmp-handle::before {
		width: 48px;
		height: 48px;
	}

	.cmp-handle::after {
		font-size: 0.7rem;
		letter-spacing: 4px;
	}

	.cmp-label {
		font-size: 0.85rem;
		padding: 8px 18px;
	}
}

/*--------------------------------------------------------------
## Convergence Diagram
--------------------------------------------------------------*/

.cv {
	padding: 80px 20px;
	position: relative;
	overflow: hidden;
	font-family: var(--accent-font);
}

@media screen and (min-width: 1024px) {

	.cv {
		padding: 80px 40px;
	}
}

.cv-diagram {
	max-width: 780px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

/* Section header */
.cv-header {
	text-align: center;
	margin-bottom: 50px;
}

.cv-header h2 {
	font-family: var(--accent-font);
	font-weight: 700;
	font-size: 1.8rem;
	color: var(--light-color);
	margin: 0 0 12px;
}

.cv-header p {
	font-family: var(--accent-font);
	font-size: 1.05rem;
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
	max-width: 55ch;
	margin-inline: auto;
}

/* Rows */
.cv-row {
	display: grid;
	position: relative;
	z-index: 2;
}

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

.cv-row--platforms {
	grid-template-columns: repeat(5, 1fr);
}

.cv-row--allveri {
	grid-template-columns: 1fr;
	justify-items: center;
}

/* Nodes */
.cv-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.cv-node--client,
.cv-node--platform {
	min-width: 0;
	overflow-wrap: anywhere;
}

@media screen and (min-width: 1024px) {

	.cv-node--client {
		min-width: 140px;
	}

	.cv-node--platform {
		min-width: 100px;
	}
}

.cv-node--client .cv-icon {
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: var(--light-color);
	margin-bottom: 10px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

.cv-node--client .cv-label {
	font-family: var(--accent-font);
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--light-color);
	text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

.cv-node--client .cv-sublabel {
	font-family: var(--accent-font);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 2px;
	text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

.cv-node--platform .cv-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 8px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

.cv-node--platform .cv-label {
	font-family: var(--accent-font);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
	text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

.cv-node--allveri {
	align-items: center;
}

.cv-allveri-mark {
	width: 72px;
	height: auto;
	margin-bottom: 12px;
	filter: drop-shadow(0 0 20px rgba(41, 98, 255, 0.4));
}

.cv-node--allveri .cv-label {
	font-family: var(--accent-font);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--bright-color);
	letter-spacing: 0.02em;
	text-shadow: 0 0 16px rgba(0, 0, 0, 0.8);
}

/* SVG lines */
.cv-lines {
	display: block;
	width: 100%;
	position: relative;
	z-index: 1;
}

.cv-lines--upper {
	height: 90px;
}

.cv-lines--lower {
	height: 110px;
}

.cv-path {
	fill: none;
	stroke: rgba(255, 255, 255, 0.12);
	stroke-width: 1.5;
	stroke-dasharray: 6 4;
}

.cv-path--bright { stroke: var(--bright-color); opacity: 0.4; }
.cv-path--1      { stroke: var(--accent-color-1); opacity: 0.4; }
.cv-path--2      { stroke: var(--accent-color-2); opacity: 0.4; }

/* Color-coded platform nodes */
.cv-node--color-bright .cv-icon { border-color: rgba(41, 98, 255, 0.3); }
.cv-node--color-1 .cv-icon      { border-color: rgba(0, 176, 255, 0.3); }
.cv-node--color-2 .cv-icon      { border-color: rgba(29, 233, 182, 0.3); }

.cv-node--color-bright .cv-label { color: var(--bright-color); opacity: 0.7; }
.cv-node--color-1 .cv-label      { color: var(--accent-color-1); opacity: 0.7; }
.cv-node--color-2 .cv-label      { color: var(--accent-color-2); opacity: 0.7; }

.cv-node--color-bright .cv-icon { color: var(--bright-color); }
.cv-node--color-1 .cv-icon      { color: var(--accent-color-1); }
.cv-node--color-2 .cv-icon      { color: var(--accent-color-2); }

/* Branch labels */
.cv-branch-labels {
	position: relative;
	height: 0;
	z-index: 3;
}

.cv-branch-labels span {
	position: absolute;
	top: -14px;
	font-family: var(--accent-font);
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.3);
	white-space: nowrap;
}

.cv-branch-labels--upper span {
	transform: translateX(-50%);
}

/* CTA */
.cv-cta {
	text-align: center;
	margin-top: 40px;
	position: relative;
	z-index: 3;
}

.cv-cta::before {
	content: "";
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);
	width: 300px;
	height: calc(100% + 40px);
	background: radial-gradient(ellipse, rgba(0, 0, 0, 0.7) 0%, transparent 70%);
	pointer-events: none;
	z-index: -1;
}

/* Floating cloud of other systems. Mobile: no room beside the diagram, so
   the cloud would sit behind the heading and nodes. It only appears once
   the side margins exist. */
.cv-cloud {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

@media screen and (min-width: 1024px) {

	.cv-cloud {
		display: block;
	}
}

.cv-cloud-tag {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--accent-font);
	font-size: 0.75rem;
	color: var(--light-color);
	white-space: nowrap;
	opacity: 0.15;
	animation: cv-float 16s ease-in-out infinite;
}

.cv-cloud-tag i {
	font-size: 0.85rem;
}

@keyframes cv-float {
	0%, 100% { transform: translateY(0); opacity: 0.15; }
	50%      { transform: translateY(-10px); opacity: 0.25; }
}

/* Hourglass variant (cv-hourglass-spec): sources converge through the stack
   caption into the meaning layer, then fan out to the consumers. Static.
   Every rule is scoped to .cv--hourglass so the default render is untouched. */
.cv--hourglass .ct-header {
	padding: 0 0 32px;
}

/* One centred sentence above the diagram, balanced. 66ch, not the spec's
   52ch: at 52ch the 140-character sentence ran three lines at 1440, and
   the spec's intent (and fold budget) is two. */
.cv--hourglass .ct-header-intro {
	max-width: 66ch;
	text-wrap: balance;
}

.cv--hourglass .cv-diagram > .av-eyebrow {
	text-align: center;
	margin: 0 0 20px;
}

.cv--hourglass .cv-diagram > .cv-row + .av-eyebrow {
	margin: 20px 0 0;
}

/* Mobile: 3 x 2, capped at 420px with its lines so the curves stay under
   the nodes. From 700px: one row, one column per node. */
.cv--hourglass .cv-row--platforms {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	row-gap: 20px;
}

.cv--hourglass .cv-row--platforms,
.cv--hourglass .cv-lines--lower,
.cv--hourglass .cv-lines--fan {
	max-width: 420px;
	margin-inline: auto;
}

/* The raw half: dashed and neutral, but legible. */
.cv--hourglass .cv-lines--lower .cv-path {
	stroke: rgba(255, 255, 255, 0.24);
}

.cv--hourglass .cv-row--sources .cv-label {
	color: rgba(255, 255, 255, 0.75);
}

.cv--hourglass .cv-row--sources .cv-icon {
	color: rgba(255, 255, 255, 0.8);
	border-color: rgba(255, 255, 255, 0.16);
}

/* Consumer sublabels break evenly (no one-word last line). */
.cv--hourglass .cv-row--consumers .cv-sublabel {
	text-wrap: balance;
}

/* The neck node (Snowflake and dbt): the client node's glass tile, white,
   above the blue layer badge. */
.cv--hourglass .cv-row--stack .cv-node--client .cv-label {
	text-shadow: none;
}

.cv--hourglass .cv-lines--lower,
.cv--hourglass .cv-lines--fan {
	height: 48px;
}

.cv--hourglass .cv-lines--neck {
	height: 24px;
}

/* Dashed above the layer (raw), solid below (governed). */
.cv--hourglass .cv-lines--fan .cv-path {
	stroke-dasharray: none;
}

.cv--hourglass .cv-label,
.cv--hourglass .cv-sublabel {
	opacity: 1;
	text-shadow: none;
}

.cv--hourglass .cv-sublabel {
	display: block;
	font-family: var(--accent-font);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
	margin-top: 2px;
}

/* Stack node sublabel: a short line under the label. */
.cv--hourglass .cv-row--stack .cv-sublabel {
	max-width: 32ch;
}

.cv--hourglass .cv-node--allveri .cv-label {
	color: var(--light-color);
}

/* The stratum: a 1px Electric Blue line across the section at the badge's
   centre (72px badge), behind the node, fading at both ends. .cv clips it. */
.cv--hourglass .cv-row--layer::before {
	content: "";
	position: absolute;
	top: 36px;
	left: 50%;
	z-index: -1;
	width: 100vw;
	height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(90deg, transparent 0%, var(--bright-color) 15%, var(--bright-color) 85%, transparent 100%);
	pointer-events: none;
}

.cv--hourglass > .av-container {
	margin-top: 56px;
}

.cv--hourglass > .av-container > * + * {
	margin-top: 32px;
}

.cv--hourglass .cd > :last-child {
	margin-bottom: 0;
}

/* The example as a metric record. */
.cv--hourglass .cd--glass {
	padding: 24px;
}

@media screen and (min-width: 700px) {

	.cv--hourglass .cv-row--platforms {
		grid-template-columns: none;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.cv--hourglass .cv-row--platforms,
	.cv--hourglass .cv-lines--lower,
	.cv--hourglass .cv-lines--fan {
		max-width: none;
	}
}

@media screen and (min-width: 1024px) {

	/* After the anchor jump the eyebrow lands 80px under the viewport top
	   (the 96px section padding less 16), so the whole diagram fits 900. */
	.cv--hourglass {
		scroll-margin-top: -16px;
	}

	.cv--hourglass .ct-header {
		padding-bottom: 24px;
	}

	/* Fold fallbacks 2 and 3: wider columns, so the consumer sublabels wrap
	   less, and a 64px badge with the stratum on its centre. */
	.cv--hourglass .cv-diagram {
		max-width: 880px;
	}

	.cv--hourglass .cv-allveri-mark {
		width: 64px;
	}

	.cv--hourglass .cv-row--layer::before {
		top: 32px;
	}

	.cv--hourglass .cv-lines--lower,
	.cv--hourglass .cv-lines--fan {
		height: 48px;
	}

	.cv--hourglass .cv-lines--neck {
		height: 16px;
	}

	.cv--hourglass > .av-container {
		margin-top: 64px;
	}

	.cv--hourglass .cd--glass {
		padding: 32px;
	}
}

/*--------------------------------------------------------------
## Industry Cards
--------------------------------------------------------------*/

.ind {
	padding: 70px 0;
	background:
		radial-gradient(ellipse at 0% 0%, rgba(204, 255, 144, 0.20) 0%, transparent 50%),
		radial-gradient(ellipse at 100% 0%, rgba(163, 41, 193, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse at 100% 100%, rgba(255, 183, 77, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse at 0% 100%, rgba(0, 176, 255, 0.20) 0%, transparent 50%),
		var(--light-color);
}

.ind-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

/* Desktop: 3 equal columns — text | cards | cards */
@media screen and (min-width: 1024px) {
	.ind-inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px 40px;
	}

	.ind-heading {
		grid-column: 1;
	}

	.ind-cards {
		grid-column: 2 / 4;
	}
}

.ind-heading {
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.ind-heading {
		position: sticky;
		top: 100px;
		text-align: left;
	}
}

.ind-eyebrow {
	font-family: var(--accent-font);
	font-size: clamp(0.75rem, 1.2vw, 0.9rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(18, 21, 28, 0.6);
	margin: 0 0 0.6rem;
}

.ind-heading h2 {
	font-family: var(--primary-font);
	font-weight: 800;
	font-size: 2.2rem;
	line-height: 1.25;
	color: var(--dark-color);
	margin: 0 0 12px;
}

.ind-heading p {
	font-family: var(--accent-font);
	font-size: 1rem;
	color: rgba(0, 0, 0, 0.4);
	margin: 0;
}

.ind-heading .ind-lead {
	margin-bottom: 0.75rem;
	color: rgba(18, 21, 28, 0.72);
}

.ind-cta {
	margin-top: 2.5rem;
	text-align: center;
}

@media screen and (min-width: 1024px) {
	.ind-cta {
		grid-column: 2 / 4;
	}
}

.ind-cta-note {
	font-family: var(--accent-font);
	font-size: 0.875rem;
	color: rgba(18, 21, 28, 0.45);
	max-width: 44ch;
	margin: 0.75rem auto 0;
}

/* Card grid — 2x2 */
.ind-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media screen and (min-width: 700px) {
	.ind-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Image card — glass treatment */
.ind-card {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.3) 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow:
		0 4px 20px rgba(0, 0, 0, 0.08),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ind-card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 12px 32px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Image area with overlaid title */
.ind-img {
	position: relative;
	height: 8rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 18px 24px;
	overflow: hidden;
}

.ind-img::before {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	transition: transform 0.4s ease;
	z-index: 0;
}

.ind-card:hover .ind-img::before {
	transform: scale(1.06);
}

.ind-img::after {
	content: "Learn more →";
	position: absolute;
	top: 14px;
	right: 14px;
	font-family: var(--accent-font);
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--light-color);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.ind-card:hover .ind-img::after {
	opacity: 1;
}

.ind-img > * {
	position: relative;
	z-index: 1;
}

/* Card body */
.ind-body {
	padding: 1.4rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Each Who/What/Why row */
.ind-row {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 12px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1.5px solid rgba(0, 0, 0, 0.08);
}

.ind-row:first-child {
	padding-top: 0;
}

.ind-row--last {
	border-bottom: none;
	padding-bottom: 0;
}

/* Tier label — overlaid on image with color highlight */
.ind-tier {
	align-self: flex-start;
	font-family: var(--accent-font);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--light-color);
	padding: 2px 8px;
	margin-bottom: 4px;
}

.ind-card--1 .ind-tier { background-color: rgba(29, 233, 182, 0.5); color: var(--light-color); }
.ind-card--2 .ind-tier { background-color: rgba(163, 41, 193, 0.5); }
.ind-card--3 .ind-tier { background-color: rgba(0, 176, 255, 0.5); }
.ind-card--5 .ind-tier { background-color: rgba(255, 87, 34, 0.5); }

/* Card title — overlaid on image */
.ind-card h3 {
	font-family: var(--accent-font);
	font-weight: 900;
	font-size: 1.5rem;
	color: var(--light-color);
	margin: 0;
	line-height: 1.3;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Who/What/Why label */
.ind-label {
	font-family: var(--accent-font);
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.55;
	padding: 3px 6px;
	white-space: nowrap;
	justify-self: end;
	align-self: start;
	margin-top: 4px;
}

/* Who/What/Why value */
.ind-value {
	font-family: var(--serif-font);
	font-size: 0.8rem;
	color: rgba(0, 0, 0, 0.55);
	line-height: 1.55;
}

/* Per-card tinted glass — droplet optics */
.ind-card--1 {
	background:
		radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.95) 0%, transparent 30%),
		radial-gradient(ellipse at 70% 85%, rgba(255,255,255,0.5) 0%, transparent 20%),
		radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.4) 0%, transparent 60%),
		radial-gradient(ellipse at -5% -5%, rgba(204,255,144,0.10) 0%, transparent 40%),
		radial-gradient(ellipse at 105% 105%, rgba(29,233,182,0.12) 0%, transparent 40%),
		radial-gradient(ellipse at 105% -5%, rgba(204,255,144,0.05) 0%, transparent 35%),
		rgba(240,255,248,0.5);
}
.ind-card--2 {
	background:
		radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.95) 0%, transparent 30%),
		radial-gradient(ellipse at 70% 85%, rgba(255,255,255,0.5) 0%, transparent 20%),
		radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.4) 0%, transparent 60%),
		radial-gradient(ellipse at -5% -5%, rgba(255,87,34,0.10) 0%, transparent 40%),
		radial-gradient(ellipse at 105% 105%, rgba(163,41,193,0.12) 0%, transparent 40%),
		radial-gradient(ellipse at 105% -5%, rgba(255,87,34,0.05) 0%, transparent 35%),
		rgba(252,245,255,0.5);
}
.ind-card--3 {
	background:
		radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.95) 0%, transparent 30%),
		radial-gradient(ellipse at 70% 85%, rgba(255,255,255,0.5) 0%, transparent 20%),
		radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.4) 0%, transparent 60%),
		radial-gradient(ellipse at -5% -5%, rgba(0,176,255,0.10) 0%, transparent 40%),
		radial-gradient(ellipse at 105% 105%, rgba(41,98,255,0.07) 0%, transparent 40%),
		radial-gradient(ellipse at 105% -5%, rgba(0,176,255,0.05) 0%, transparent 35%),
		rgba(240,245,255,0.5);
}
.ind-card--5 {
	background:
		radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.95) 0%, transparent 30%),
		radial-gradient(ellipse at 70% 85%, rgba(255,255,255,0.5) 0%, transparent 20%),
		radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.4) 0%, transparent 60%),
		radial-gradient(ellipse at -5% -5%, rgba(255,87,34,0.10) 0%, transparent 40%),
		radial-gradient(ellipse at 105% 105%, rgba(255,183,77,0.12) 0%, transparent 40%),
		radial-gradient(ellipse at 105% -5%, rgba(255,87,34,0.05) 0%, transparent 35%),
		rgba(255,248,242,0.5);
}

.ind-card--1 .ind-label { background: var(--accent-color-2); color: var(--dark-color); }
.ind-card--2 .ind-label { background: var(--accent-color-6); color: var(--light-color); }
.ind-card--3 .ind-label { background: var(--bright-color); color: var(--light-color); }
.ind-card--5 .ind-label { background: var(--accent-color-5); color: var(--light-color); }

/*--------------------------------------------------------------
## Section Separators
--------------------------------------------------------------*/

.sep {
	position: relative;
	overflow: hidden;
}

/* Maze separator */
.maze-sep {
	position: relative;
	height: 3.25rem;
	background: var(--dark-color);
	overflow: hidden;
}

.maze-sep::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background: rgba(0, 0, 0, 0.15);
	box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.6), inset 0 -10px 20px rgba(0, 0, 0, 0.6);
}

.maze-sep canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.maze-sep .maze-walls {
	z-index: 0;
}

.maze-sep .maze-ball {
	z-index: 2;
}

/* Maze as a section ground (spotlight ground => 'maze'): the divider canvases fill the section, dimmed so the content leads */
.sl--maze {
	background: var(--dark-color);
	overflow: hidden;
	padding-top: 3rem;
	padding-bottom: 3rem;
	border-top: 1px solid var(--dark-color);
	border-bottom: 1px solid var(--dark-color);
}

@media screen and (min-width: 901px) {
	.sl--maze {
		padding-top: 4.5rem;
		padding-bottom: 4.5rem;
	}
}

/* Overrun by one maze cell (16px) on every side so the maze's outer walls sit outside the clip */
.sl--maze .maze-sep--ground {
	position: absolute;
	inset: -16px;
	height: auto;
	z-index: 0;
}

.sl--maze .maze-sep--ground .maze-walls {
	opacity: 0.5; /* the walls recede; the ball keeps its full opacity */
}

@media screen and (min-width: 1024px) {
	.sl--maze .sl-icon img {
		max-width: 260px;
		max-height: 240px;
	}
}

.sl--maze .maze-sep--ground::after {
	box-shadow: none;
	background: rgba(0, 0, 0, 0.1);
}

/* Inset shadows top and bottom, as the divider has, so the closer separates from the sections around it */
.sl--maze::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	box-shadow:
		inset 0 16px 28px rgba(0, 0, 0, 0.55),
		inset 0 -16px 28px rgba(0, 0, 0, 0.55);
}

.sl--maze .maze-sep--ground .maze-ball {
	z-index: 1;
}

.sl--maze .sl-icon,
.sl--maze .sl-content {
	z-index: 3;
}

/* A lighter blur and tint so the maze reads faintly through the glass */
.sl--maze .sl-content.cd--glass {
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, var(--glass-tint) 50%, rgba(255, 255, 255, 0.02) 100%);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* --- OPTION 1: Aerial maze --- */
.sep--maze {
	height: 6rem;
}

.sep-maze-img {
	position: absolute;
	top: -2rem;
	left: 0;
	right: 0;
	height: 10rem;
	background-size: cover;
	background-position: center;
}

.sep-maze-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to right, var(--dark-color) 0%, transparent 20%, transparent 80%, var(--dark-color) 100%),
		linear-gradient(to bottom, var(--dark-color) 0%, transparent 25%, transparent 75%, var(--dark-color) 100%);
}

/* --- OPTION 2: Waveform band --- */
.sep--wave {
	height: 100px;
	background: var(--dark-color);
	display: flex;
	align-items: center;
	padding: 0 40px;
}

.sep-wave-svg {
	width: 100%;
	height: 80px;
}

.sep-wave-line {
	fill: none;
	stroke-linecap: round;
}

.sep-wave-line--1 {
	stroke: var(--bright-color);
	stroke-width: 2;
	opacity: 0.5;
	filter: drop-shadow(0 0 4px rgba(41, 98, 255, 0.4));
}

.sep-wave-line--2 {
	stroke: var(--accent-color-2);
	stroke-width: 1.5;
	opacity: 0.35;
	filter: drop-shadow(0 0 3px rgba(29, 233, 182, 0.3));
}

.sep-wave-line--3 {
	stroke: var(--accent-color-6);
	stroke-width: 2.5;
	opacity: 0.4;
	filter: drop-shadow(0 0 5px rgba(163, 41, 193, 0.35));
}

/* --- OPTION 3: Thread weave --- */
.sep--threads {
	height: 80px;
	background: var(--dark-color);
	background-image:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 18px,
			rgba(41, 98, 255, 0.18) 18px,
			rgba(41, 98, 255, 0.18) 19px
		),
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 22px,
			rgba(29, 233, 182, 0.14) 22px,
			rgba(29, 233, 182, 0.14) 23px
		),
		repeating-linear-gradient(
			30deg,
			transparent,
			transparent 32px,
			rgba(163, 41, 193, 0.12) 32px,
			rgba(163, 41, 193, 0.12) 33px
		),
		repeating-linear-gradient(
			-60deg,
			transparent,
			transparent 14px,
			rgba(0, 176, 255, 0.16) 14px,
			rgba(0, 176, 255, 0.16) 16px
		);
}

/*--------------------------------------------------------------
## Constellation Sky
--------------------------------------------------------------*/

.sky {
	position: relative;
	padding: 80px 0 60px;
	font-family: var(--accent-font);
	overflow: hidden;
	background: #020408;
}

/* Nebula depth layers */
.sky-nebula {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse at 18% 28%, rgba(0, 176, 255, 0.07) 0%, transparent 40%),
		radial-gradient(ellipse at 82% 22%, rgba(29, 233, 182, 0.06) 0%, transparent 35%),
		radial-gradient(ellipse at 50% 75%, rgba(41, 98, 255, 0.09) 0%, transparent 40%),
		radial-gradient(ellipse at 50% 45%, rgba(163, 41, 193, 0.05) 0%, transparent 50%),
		radial-gradient(ellipse at 30% 60%, rgba(41, 98, 255, 0.04) 0%, transparent 35%),
		radial-gradient(ellipse at 70% 55%, rgba(0, 176, 255, 0.03) 0%, transparent 30%),
		radial-gradient(ellipse at 10% 85%, rgba(0, 0, 20, 0.9) 0%, transparent 45%),
		radial-gradient(ellipse at 90% 80%, rgba(0, 0, 30, 0.8) 0%, transparent 45%),
		radial-gradient(ellipse at 50% 0%, rgba(10, 15, 40, 0.6) 0%, transparent 40%);
}

/* Shooting stars */
.sky-meteors {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}

/* Meteor canvas — positioned over the star field */
.sky-meteors canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.sky-header {
	text-align: center;
	position: relative;
	z-index: 3;
	margin-top: 1rem;
	margin-bottom: 4.5rem;
}

@media screen and (min-width: 701px) {

	.sky-header {
		margin-bottom: 2rem;
	}
}

.sky-header h2 {
	font-family: var(--accent-font);
	font-weight: 900; /* tuned against the synthesized weight before 800 was loaded; keeps the home wrap */
	font-size: 2.4rem;
	color: var(--light-color);
	margin: 0 0 0.7rem;
}

.sky-header p {
	font-family: var(--accent-font);
	font-size: 1.05rem;
	margin: 0;
	max-width: 55ch;
	margin-inline: auto;
	color: rgba(255, 255, 255, 0.55);
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.3),
		0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* Star field container */

/* Mobile: a taller field so the constellations can stack in a zigzag. */
.sky-field {
	position: relative;
	height: auto;
	min-height: 900px;
}

@media screen and (min-width: 701px) {

	.sky-field {
		height: 30rem;
		min-height: auto;
	}
}

/* Ambient background stars — tiny dots via box-shadow */
.sky-ambient {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 0;
}

/* Three layers of box-shadow stars, staggered twinkle */
.sky-ambient::before,
.sky-ambient::after {
	content: "";
	position: absolute;
	width: 1px;
	height: 1px;
	border-radius: 50%;
}

/* Layer 1 — bright scattered field */
.sky-ambient::before {
	box-shadow:
		/* Sparse upper field */
		45px 20px 0 0 rgba(255,255,255,0.3),
		180px 55px 0 0 rgba(255,255,255,0.15),
		310px 30px 0 0 rgba(255,255,255,0.22),
		490px 15px 0 0 rgba(255,255,255,0.18),
		620px 45px 0 0 rgba(255,255,255,0.12),
		780px 25px 0 0 rgba(255,255,255,0.25),
		920px 60px 0 0 rgba(255,255,255,0.14),
		1050px 35px 0 0 rgba(255,255,255,0.2),
		/* Upper-mid */
		70px 120px 0 0 rgba(255,255,255,0.16),
		210px 150px 0 0 rgba(255,255,255,0.28),
		385px 110px 0 0 rgba(255,255,255,0.12),
		530px 140px 0 0 rgba(255,255,255,0.2),
		710px 105px 0 0 rgba(255,255,255,0.15),
		850px 160px 0 0 rgba(255,255,255,0.22),
		1000px 130px 0 0 rgba(255,255,255,0.1),
		/* Mid band */
		30px 230px 0 0 rgba(255,255,255,0.18),
		160px 260px 0 0 rgba(255,255,255,0.12),
		290px 215px 0 0 rgba(255,255,255,0.25),
		440px 250px 0 0 rgba(255,255,255,0.14),
		580px 225px 0 0 rgba(255,255,255,0.2),
		720px 270px 0 0 rgba(255,255,255,0.16),
		880px 240px 0 0 rgba(255,255,255,0.22),
		1030px 210px 0 0 rgba(255,255,255,0.12),
		/* Lower-mid */
		80px 340px 0 0 rgba(255,255,255,0.2),
		230px 370px 0 0 rgba(255,255,255,0.14),
		400px 330px 0 0 rgba(255,255,255,0.18),
		550px 360px 0 0 rgba(255,255,255,0.1),
		690px 345px 0 0 rgba(255,255,255,0.24),
		840px 375px 0 0 rgba(255,255,255,0.12),
		980px 335px 0 0 rgba(255,255,255,0.16),
		/* Lower */
		50px 450px 0 0 rgba(255,255,255,0.15),
		200px 470px 0 0 rgba(255,255,255,0.22),
		350px 440px 0 0 rgba(255,255,255,0.12),
		510px 480px 0 0 rgba(255,255,255,0.18),
		660px 455px 0 0 rgba(255,255,255,0.14),
		810px 475px 0 0 rgba(255,255,255,0.2),
		960px 445px 0 0 rgba(255,255,255,0.16),
		/* Bottom */
		110px 540px 0 0 rgba(255,255,255,0.2),
		270px 560px 0 0 rgba(255,255,255,0.12),
		430px 535px 0 0 rgba(255,255,255,0.18),
		600px 555px 0 0 rgba(255,255,255,0.14),
		750px 545px 0 0 rgba(255,255,255,0.22),
		910px 565px 0 0 rgba(255,255,255,0.1),
		1060px 530px 0 0 rgba(255,255,255,0.16);
	animation: sky-twinkle-a 6s ease-in-out infinite;
}

/* Layer 2 — offset field + dense clusters */
.sky-ambient::after {
	box-shadow:
		/* Dense cluster — upper-left (near the medspa) */
		95px 85px 0 0 rgba(255,255,255,0.22),
		102px 92px 0 0 rgba(255,255,255,0.14),
		88px 98px 0 0 rgba(255,255,255,0.18),
		110px 82px 0 0 rgba(255,255,255,0.1),
		97px 105px 0 0 rgba(255,255,255,0.16),
		/* Dense cluster — center-right */
		830px 290px 0 0 rgba(255,255,255,0.2),
		838px 298px 0 0 rgba(255,255,255,0.12),
		822px 285px 0 0 rgba(255,255,255,0.16),
		845px 302px 0 0 rgba(255,255,255,0.1),
		826px 310px 0 0 rgba(255,255,255,0.18),
		840px 278px 0 0 rgba(255,255,255,0.14),
		/* Dense cluster — lower-center */
		480px 500px 0 0 rgba(255,255,255,0.18),
		490px 508px 0 0 rgba(255,255,255,0.12),
		475px 515px 0 0 rgba(255,255,255,0.22),
		498px 495px 0 0 rgba(255,255,255,0.1),
		470px 505px 0 0 rgba(255,255,255,0.16),
		/* General scatter */
		25px 170px 0 0 rgba(255,255,255,0.14),
		145px 200px 0 0 rgba(255,255,255,0.2),
		340px 180px 0 0 rgba(255,255,255,0.1),
		460px 195px 0 0 rgba(255,255,255,0.18),
		640px 175px 0 0 rgba(255,255,255,0.12),
		800px 190px 0 0 rgba(255,255,255,0.16),
		950px 170px 0 0 rgba(255,255,255,0.22),
		/* Mid scatter */
		55px 310px 0 0 rgba(255,255,255,0.16),
		190px 295px 0 0 rgba(255,255,255,0.1),
		350px 320px 0 0 rgba(255,255,255,0.2),
		500px 300px 0 0 rgba(255,255,255,0.14),
		650px 315px 0 0 rgba(255,255,255,0.18),
		780px 330px 0 0 rgba(255,255,255,0.12),
		1010px 305px 0 0 rgba(255,255,255,0.16),
		/* Lower scatter */
		100px 420px 0 0 rgba(255,255,255,0.18),
		260px 435px 0 0 rgba(255,255,255,0.12),
		410px 415px 0 0 rgba(255,255,255,0.2),
		570px 440px 0 0 rgba(255,255,255,0.14),
		730px 425px 0 0 rgba(255,255,255,0.16),
		870px 445px 0 0 rgba(255,255,255,0.22),
		1040px 420px 0 0 rgba(255,255,255,0.1),
		/* Bottom scatter */
		40px 570px 0 0 rgba(255,255,255,0.14),
		175px 580px 0 0 rgba(255,255,255,0.2),
		330px 575px 0 0 rgba(255,255,255,0.1),
		520px 590px 0 0 rgba(255,255,255,0.16),
		680px 570px 0 0 rgba(255,255,255,0.18),
		850px 585px 0 0 rgba(255,255,255,0.12),
		1000px 575px 0 0 rgba(255,255,255,0.2);
	animation: sky-twinkle-b 8s ease-in-out infinite;
}

@keyframes sky-twinkle-a {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}

@keyframes sky-twinkle-b {
	0%, 100% { opacity: 0.6; }
	50%      { opacity: 1; }
}

/* Constellation lines */
.sky-lines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

.sky-line {
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 2;
}

.sky-line--bright  { stroke: var(--bright-color); opacity: 0.25; }
.sky-line--1       { stroke: var(--accent-color-1); opacity: 0.25; }
.sky-line--6       { stroke: var(--accent-color-6); opacity: 0.25; }
.sky-line--3       { stroke: var(--accent-color-3); opacity: 0.25; }
.sky-line--2       { stroke: var(--accent-color-2); opacity: 0.25; }
.sky-line--converge { stroke: rgba(255, 255, 255, 0.06); stroke-dasharray: 4 6; }

/* Background constellations — very faint */
.sky-lines--bg line {
	stroke: rgba(255, 255, 255, 0.04);
	stroke-width: 0.5;
}

/* Background constellations only appear from 701px. */
.sky-lines--bg {
	display: none;
}

@media screen and (min-width: 701px) {

	.sky-lines--bg {
		display: inline;
	}
}

/* Stars — positioned absolutely in the field.
   translateX(-50%) centers horizontally on the coordinate.
   The dot/mark sits at the top, label hangs below. */
.sky-star {
	position: absolute;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 2;
}

/* Constellation link wrapper — covers the bounding box */
.sky-const {
	position: absolute;
	display: block;
	text-decoration: none;
	z-index: 2;
	cursor: pointer;
	transition: transform 0.3s ease;
	transform-origin: center center;
}

.sky-const:hover {
	transform: scale(1.08);
}

.sky-const:hover .sky-line {
	stroke-width: 3;
	opacity: 0.45;
}

/* Constellation lines inside wrapper */
.sky-const-lines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

/* Client mark centers on its vertex */
.sky-star--client {
	transform: translate(-50%, -50%);
}

/* "Read more" link — hidden until constellation hover */

/* CTA link always visible on mobile; revealed on hover from 701px. */
.sky-cta-link {
	font-family: var(--accent-font);
	font-size: 0.65rem;
	font-weight: 600;
	text-decoration: none;
	opacity: 1;
	margin-top: 4px;
	transition: opacity 0.3s ease;
}

@media screen and (min-width: 701px) {

	.sky-cta-link {
		opacity: 0;
	}
}

.sky-const:hover .sky-cta-link {
	opacity: 1;
}

/* Color-matched link colors */
.sky-const--2 .sky-cta-link      { color: var(--accent-color-2); }
.sky-const--3 .sky-cta-link      { color: var(--accent-color-3); }
.sky-const--bright .sky-cta-link  { color: var(--bright-color); }
.sky-const--2 .sky-cta-link       { color: var(--accent-color-2); }

/* Unlabeled shape/dust stars are small enough to center both axes */
.sky-star--shape,
.sky-star--dust {
	transform: translate(-50%, -50%);
}

/* Dots */
.sky-dot {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--light-color);
	box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.3);
	margin-bottom: 6px;
}

.sky-dot--lg {
	width: 12px;
	height: 12px;
	box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.4);
}

.sky-dot--md {
	width: 6px;
	height: 6px;
	box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.25);
	margin-bottom: 0;
}

.sky-dot--sm {
	width: 4px;
	height: 4px;
	box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.2);
	margin-bottom: 4px;
}

.sky-dot--xs {
	width: 2px;
	height: 2px;
	box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.15);
	margin-bottom: 0;
}

/* Star labels */
.sky-name {
	font-family: var(--accent-font);
	font-size: 0.75rem;
	color: rgba(200, 215, 255, 0.6);
	white-space: nowrap;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}

.sky-star--client .sky-name {
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--light-color);
}

.sky-sub {
	font-family: var(--accent-font);
	font-size: 0.65rem;
	color: rgba(200, 215, 255, 0.4);
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}

/* Color-coded system dots */
.sky-star--color-bright .sky-dot { background: var(--bright-color); box-shadow: 0 0 8px 2px rgba(41, 98, 255, 0.4); }
.sky-star--color-1 .sky-dot      { background: var(--accent-color-1); box-shadow: 0 0 8px 2px rgba(0, 176, 255, 0.4); }
.sky-star--color-2 .sky-dot      { background: var(--accent-color-2); box-shadow: 0 0 8px 2px rgba(29, 233, 182, 0.4); }
.sky-star--color-6 .sky-dot      { background: var(--accent-color-6); box-shadow: 0 0 8px 2px rgba(163, 41, 193, 0.4); }
.sky-star--color-3 .sky-dot      { background: var(--accent-color-3); box-shadow: 0 0 8px 2px rgba(204, 255, 144, 0.4); }

.sky-star--color-bright .sky-name { color: var(--bright-color); }
.sky-star--color-1 .sky-name      { color: var(--accent-color-1); }
.sky-star--color-2 .sky-name      { color: var(--accent-color-2); }
.sky-star--color-6 .sky-name      { color: var(--accent-color-6); }
.sky-star--color-3 .sky-name      { color: var(--accent-color-3); }

/* Ambient stars — dimmer, subtler */
.sky-star--ambient {
	z-index: 1;
}

.sky-star--ambient .sky-name {
	font-size: 0.65rem;
	color: rgba(160, 195, 255, 0.45);
}

.sky-star--ambient .sky-dot--sm {
	animation: sky-twinkle-star 4s ease-in-out infinite;
}

.sky-star--ambient:nth-child(odd) .sky-dot--sm {
	animation-delay: -2s;
}

@keyframes sky-twinkle-star {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.3; }
}

/* System star twinkle — periodic glow pulse */
.sky-star--system .sky-dot {
	animation: sky-twinkle-system 5s ease-in-out infinite;
}

.sky-star--system:nth-child(2n) .sky-dot  { animation-delay: -1.5s; }
.sky-star--system:nth-child(3n) .sky-dot  { animation-delay: -3s; }
.sky-star--system:nth-child(5n) .sky-dot  { animation-duration: 6s; }

@keyframes sky-twinkle-system {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.5); }
}

/* Shape stars — unlabeled constellation structure */
.sky-star--shape {
	z-index: 1;
}

/* Dust stars — atmospheric unlabeled scatter */
.sky-star--dust {
	z-index: 0;
}

.sky-star--dust .sky-dot--xs {
	animation: sky-twinkle-dust 5s ease-in-out infinite;
}

.sky-star--dust:nth-child(even) .sky-dot--xs { animation-delay: -2.5s; }
.sky-star--dust:nth-child(3n) .sky-dot--xs   { animation-duration: 7s; }
.sky-star--dust:nth-child(5n) .sky-dot--xs   { animation-duration: 4s; animation-delay: -1s; }

@keyframes sky-twinkle-dust {
	0%, 100% { opacity: 0.6; }
	50%      { opacity: 0.15; }
}

/* Tinted dust stars */
.sky-star--dust.sky-tint--blue .sky-dot--xs {
	background: var(--accent-color-1);
	box-shadow: 0 0 3px 1px rgba(0, 176, 255, 0.2);
}

.sky-star--dust.sky-tint--teal .sky-dot--xs {
	background: var(--accent-color-2);
	box-shadow: 0 0 3px 1px rgba(29, 233, 182, 0.2);
}

.sky-star--dust.sky-tint--purple .sky-dot--xs {
	background: var(--accent-color-6);
	box-shadow: 0 0 3px 1px rgba(163, 41, 193, 0.2);
}

.sky-star--dust.sky-tint--bright .sky-dot--xs {
	background: var(--bright-color);
	box-shadow: 0 0 3px 1px rgba(41, 98, 255, 0.2);
}

.sky-star--dust.sky-tint--warm .sky-dot--xs {
	background: var(--accent-color-4);
	box-shadow: 0 0 3px 1px rgba(255, 183, 77, 0.15);
}

/* Client logo placeholder — small glowing mark */
.sky-client-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	margin-bottom: 0.4rem;
	font-size: 0.8rem;
	color: var(--light-color);
	box-shadow:
		0 0 16px 4px rgba(255, 255, 255, 0.08),
		inset 0 0 8px rgba(255, 255, 255, 0.04);
}

/* Allveri convergence star */
.sky-star--allveri {
	z-index: 3;
}

.sky-av-mark {
	width: 2.8rem;
	height: auto;
	margin-bottom: 1rem;
	filter:
		drop-shadow(0 0 12px rgba(41, 98, 255, 0.6))
		drop-shadow(0 0 30px rgba(41, 98, 255, 0.35))
		drop-shadow(0 0 60px rgba(41, 98, 255, 0.2));
}

.sky-star--allveri .sky-name {
	font-weight: 700;
	font-size: 1rem;
	color: var(--accent-color-1);
}

/* CTA */
.sky-cta {
	text-align: center;
	margin-top: 1.5rem;
	padding-bottom: 6rem;
	position: relative;
	z-index: 3;
}

.sky-cta .av-cta {
	background-image: linear-gradient(135deg, var(--bright-color), var(--bright-color));
	transition: transform 0.25s ease, background-image 0.5s ease, filter 0.25s ease;
}

.sky-cta .av-cta:hover {
	background-image: linear-gradient(135deg, var(--bright-color), var(--accent-color-6));
	color: var(--light-color) !important;
	transform: scale(1.06);
	filter: none;
}

.sky-cta .av-cta i {
	margin-left: 6px;
	font-size: 0.85em;
}

/* Sky — mobile repositioning. Left as a max-width query on purpose: the
   constellations and ambient stars are positioned by inline styles in
   front-page.php, so these overrides need !important, and an !important
   default cannot hand control back to an inline style at desktop without
   copying every inline position into this file. The rest of the sky's
   mobile layout is mobile-first (see .sky-header, .sky-field). */
@media screen and (max-width: 700px) { /* conformance-allow: max-width (overrides inline styles) */

	.sky-const:nth-child(1) {
		top: 2% !important;
		left: 5% !important;
		width: 55% !important;
		height: 25% !important;
	}

	.sky-const:nth-child(2) {
		top: 30% !important;
		left: 45% !important;
		width: 50% !important;
		height: 22% !important;
	}

	.sky-const:nth-child(3) {
		top: 58% !important;
		left: 8% !important;
		width: 55% !important;
		height: 25% !important;
	}

	/* Allveri star repositioned */
	.sky-star--allveri {
		top: 88% !important;
		left: 50% !important;
	}

	/* Reposition ambient labeled stars into gaps around constellations */

	/* Ambient stars: children 5-20 of .sky-field
	   Stripe=5, Toast=6, Salesforce=7, Dynamics=8, Shopify=9,
	   PayPal=10, QuickBooks=11, Zoho=12, Aspire=13, Mindbody=14,
	   Authorize.net=15, Boulevard=16, BambooHR=17, Braintree=18,
	   Square=19, Xero=20

	   Open zones:
	   Top right: top 0-27%, left 62-95%
	   Middle left: top 30-52%, left 5-42%
	   Center gap: top 53-57%
	   Lower right: top 58-83%, left 65-95%
	   Bottom edges: top 85%+ */

	/* Top right — 5 stars, spread wider */

	/* Stripe */
	.sky-star--ambient:nth-child(5) {
		top: 1% !important;
		left: 68% !important;
	}

	/* Toast */
	.sky-star--ambient:nth-child(6) {
		top: 6% !important;
		left: 86% !important;
	}

	/* Salesforce */
	.sky-star--ambient:nth-child(7) {
		top: 12% !important;
		left: 74% !important;
	}

	/* Dynamics */
	.sky-star--ambient:nth-child(8) {
		top: 18% !important;
		left: 92% !important;
	}

	/* Shopify */
	.sky-star--ambient:nth-child(9) {
		top: 24% !important;
		left: 78% !important;
	}

	/* Middle left — 4 stars */

	/* PayPal */
	.sky-star--ambient:nth-child(10) {
		top: 32% !important;
		left: 10% !important;
	}

	/* QuickBooks */
	.sky-star--ambient:nth-child(11) {
		top: 38% !important;
		left: 30% !important;
	}

	/* Zoho */
	.sky-star--ambient:nth-child(12) {
		top: 44% !important;
		left: 8% !important;
	}

	/* Aspire */
	.sky-star--ambient:nth-child(13) {
		top: 50% !important;
		left: 25% !important;
	}

	/* Center gap — 1 star */

	/* Mindbody */
	.sky-star--ambient:nth-child(14) {
		top: 50% !important;
		left: 48% !important;
	}

	/* Lower right — 3 stars */

	/* Authorize.net */
	.sky-star--ambient:nth-child(15) {
		top: 62% !important;
		left: 72% !important;
	}

	/* Boulevard */
	.sky-star--ambient:nth-child(16) {
		top: 70% !important;
		left: 88% !important;
	}

	/* BambooHR */
	.sky-star--ambient:nth-child(17) {
		top: 78% !important;
		left: 70% !important;
	}

	/* Bottom edges — 3 stars */

	/* Braintree */
	.sky-star--ambient:nth-child(18) {
		top: 88% !important;
		left: 10% !important;
	}

	/* Square */
	.sky-star--ambient:nth-child(19) {
		top: 87% !important;
		left: 78% !important;
	}

	/* Xero */
	.sky-star--ambient:nth-child(20) {
		top: 87% !important;
		left: 35% !important;
	}
}

/*--------------------------------------------------------------
# Rich text prose band
--------------------------------------------------------------*/
.rich-text-section--light {
	background: linear-gradient(135deg, #f2fbf4 0%, #f7f8fc 30%, #f3f0fb 70%, #fbf3ec 100%);
}

.rich-text {
	padding-top: 3rem;
	padding-bottom: 3rem;
	max-width: var(--prose-max-width);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Handoff .pa / In Practice — same centered width as FAQ prose */
.rich-text--compact {
	box-sizing: border-box;
	max-width: var(--prose-max-width);
	width: 100%;
	margin: -1.5rem auto 0;
	padding: 0 0 2rem;
	text-align: center;
}

.rich-text-eyebrow {
	font-family: var(--accent-font);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bright-color);
	margin: 0 0 0.5rem;
}

.rich-text-body {
	font-family: var(--primary-font);
	font-size: 1rem;
	line-height: 1.75;
}

.rich-text-body > *:first-child {
	margin-top: 0;
}

.rich-text-body > *:last-child {
	margin-bottom: 0;
}

.rich-text-body a {
	color: var(--bright-color);
	font-weight: 700;
}

.av-bg-dark .rich-text-body {
	color: rgba(255, 255, 255, 0.85);
}

.av-bg-dark .rich-text-body a {
	color: var(--accent-color-1);
}

.rich-text--center {
	text-align: center;
}

.rich-text--center .rich-text-body {
	margin-inline: auto;
}

/* Resource article — handoff .art */
.rich-text-section--article {
	padding-top: 200px;
	padding-bottom: 5.625rem;
}

.rich-text--article {
	margin-left: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* The article body shares the text-state hero's left axis: the same 40px
   mobile gutter (from av-gutter-*) and 2fr / 9fr / 2fr from 1024px, with the
   column left-aligned at its max-width rather than centred. */
@media screen and (min-width: 1024px) {

	section.rich-text-section--article {
		grid-template-columns: 2fr minmax(0, 9fr) 2fr;
	}
}

.rich-text--article h1 {
	font-family: var(--primary-font);
	font-size: clamp(1.875rem, 4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 6px;
	color: var(--dark-color);
}

.rich-text-sub {
	font-family: var(--accent-font);
	font-size: 1rem;
	color: rgba(18, 21, 28, 0.55);
	margin: 0 0 2.125rem;
}

.rich-text--article .rich-text-body {
	font-size: 1.03rem;
	line-height: 1.75;
	color: var(--cs-body);
}

.rich-text--article .rich-text-body h2 {
	font-family: var(--accent-font);
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--dark-color);
	margin: 2.125rem 0 0.625rem;
}

.rich-text-cta {
	margin: 0.75rem 0 0;
}

/*--------------------------------------------------------------
# FAQ (template-parts/sections/faq.php)
--------------------------------------------------------------*/

/* Title beside a numbered, ruled list (faq-treatment-spec). Layout comes
   from av-split; light colours are the default, dark values are keyed on
   .faq.av-bg-dark. The legacy ground outputs no .faq class. */
.faq-title {
	font-family: var(--primary-font);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--dark-color);
	margin: 0;
}

.faq-intro {
	font-family: var(--accent-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.72);
	max-width: 40ch;
	margin: 16px 0 0;
}

/* Dotted rule (the ogilvy motif) is the shelf; hairlines between items. */
.faq-list {
	list-style: none;
	counter-reset: faq;
	margin: 0;
	padding: 0;
	border-top: 2px dotted var(--dark-color);
}

.faq-list > li {
	counter-increment: faq;
	padding-block: 24px;
}

.faq-list > li + li {
	border-top: 1px solid var(--light-gray);
}

.faq-list > li:last-child {
	padding-bottom: 0;
}

/* Ordinal of the ol, not copy: generated by the counter. */
.faq-list > li::before {
	content: counter(faq, decimal-leading-zero);
	display: block;
	font-family: var(--accent-font);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
	color: var(--bright-color);
	margin-bottom: 8px;
}

.faq-list h3 {
	font-family: var(--accent-font);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--dark-color);
	margin: 0 0 8px;
}

/* Anchored entries (items[].id, the FAQ page) land clear of the fixed nav. */
.faq-list > li[id] {
	scroll-margin-top: 100px;
}

.faq-list p {
	font-family: var(--primary-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(0, 0, 0, 0.8);
	max-width: 65ch;
	margin: 0;
}

/* The list and the side link share the right-hand cell; min-width stops
   a long word from widening the grid track. */
.faq-body {
	min-width: 0;
}

.faq-more {
	margin: 32px 0 0;
}

/* Star field as a FAQ layer (stars => true): the strip canvas over the top of the section, fading out */
.faq--stars {
	position: relative;
	overflow: hidden;
}

.faq--stars .faq-stars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 45%;
	grid-column: 1 / -1;
	z-index: 0;
	background: transparent;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.faq--stars > .av-split {
	position: relative;
	z-index: 1;
}

.faq.av-bg-dark .faq-title,
.faq.av-bg-dark .faq-list h3,
.faq.av-dark-radial .faq-title,
.faq.av-dark-radial .faq-list h3 {
	color: var(--light-color);
}

.faq.av-bg-dark .faq-intro,
.faq.av-dark-radial .faq-intro {
	color: rgba(255, 255, 255, 0.72);
}

.faq.av-bg-dark .faq-list p,
.faq.av-dark-radial .faq-list p {
	color: rgba(255, 255, 255, 0.8);
}

.faq.av-bg-dark .faq-list,
.faq.av-dark-radial .faq-list {
	border-top-color: rgba(255, 255, 255, 0.5);
}

.faq.av-bg-dark .faq-list > li + li,
.faq.av-dark-radial .faq-list > li + li {
	border-top-color: rgba(255, 255, 255, 0.12);
}

.faq.av-bg-dark .faq-list > li::before,
.faq.av-dark-radial .faq-list > li::before {
	color: var(--accent-color-1);
}

@media screen and (min-width: 1024px) {

	/* Same 100px as the home's sticky ind-heading (65px nav + 35). */
	.faq-head {
		position: sticky;
		top: 100px;
	}

	.faq-intro {
		font-size: 1.05rem;
	}

	/* Hanging number column; question and answer in column 2. */
	.faq-list > li {
		display: grid;
		grid-template-columns: 3.5rem minmax(0, 1fr);
		padding-block: 32px;
	}

	.faq-list > li:last-child {
		padding-bottom: 0;
	}

	.faq-list > li::before {
		grid-column: 1;
		grid-row: 1;
		align-self: baseline;
		margin-bottom: 0;
	}

	.faq-list > li > * {
		grid-column: 2;
	}

	.faq-list > li > h3 {
		grid-row: 1;
		align-self: baseline;
	}

	.faq-more {
		margin-top: 40px;
		padding-left: 3.5rem;
	}
}

/*--------------------------------------------------------------
# Contact band
--------------------------------------------------------------*/
.contact-band {
	/* Pages without a mosaic hero share 200px nav clearance */
	padding: 200px 0 6rem;
	border-top: 1px solid rgba(130, 150, 210, 0.14);
	background: linear-gradient(180deg, #000000, #0b0e17 60%, #000000);
}

.contact-band-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3.25rem;
	align-items: start;
}

@media screen and (min-width: 881px) {
	.contact-band-grid {
		grid-template-columns: 1fr 1fr;
		gap: 3.25rem;
	}
}

/* Page backdrop (Contact): the Page Header image as a fixed layer behind the
   band, so it stays with the reader while the page scrolls over it. The image
   is oversized by the drift so no edge shows, and moves two ways: a slow
   breath (the layer scales up and back over half a minute) and a gentle lag
   against the scroll (the image slides up a little as the page goes by).
   Both are off for readers who reduce motion; the lag also needs scroll-
   driven animations. Sections over it carry av-on-backdrop: they stack above
   the layer and drop their own ground; the text-state hero does the same from
   the body class. The scrim is on the layer, once, for the whole page. */
.page-backdrop {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: var(--dark-color);
}

.page-backdrop-image {
	position: absolute;
	inset: -6% 0;
	background: center / cover no-repeat;
}

/* One scrim for the whole page, on the layer itself, so the sections over it
   carry no ground of their own and nothing marks where one section ends. */
.page-backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.45));
}

.has-page-backdrop .site-footer {
	position: relative;
	z-index: 1;
}

.av-on-backdrop,
.has-page-backdrop section.hero-image-mosaic--page:not(.has-media) {
	position: relative;
	z-index: 1;
	background: transparent;
}

.contact-band.av-on-backdrop {
	border-top-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {

	.page-backdrop {
		animation: backdrop-breath 28s ease-in-out infinite alternate;
		will-change: transform;
	}
}

@supports (animation-timeline: scroll()) {

	@media (prefers-reduced-motion: no-preference) {

		.page-backdrop-image {
			animation: backdrop-lag linear both;
			/* stylelint-disable-next-line property-no-unknown */
			animation-timeline: scroll(root);
			will-change: transform;
		}
	}
}

@keyframes backdrop-breath {

	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.04);
	}
}

@keyframes backdrop-lag {

	from {
		transform: translateY(0);
	}

	to {
		transform: translateY(-4%);
	}
}

.contact-band-eyebrow {
	font-family: var(--accent-font);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9fb2dd;
	margin: 0 0 0.75rem;
}

.contact-band-intro .contact-band-title {
	margin: 0;
	font-size: 1.5em;
}

.contact-band-intro-text {
	font-family: var(--primary-font);
	font-size: 0.97rem;
	line-height: 1.7;
	color: #c7d1e8;
	max-width: 50ch;
	margin: 1rem 0 0;
}

.contact-band-list {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.contact-band-list li {
	position: relative;
	padding-left: 1.6rem;
	font-family: var(--accent-font);
	font-size: 0.94rem;
	color: #c7d1e8;
}

.contact-band-list li::before {
	content: "\25C6";
	position: absolute;
	left: 0;
	top: 0.3rem;
	font-size: 0.7rem;
	color: var(--accent-color-2);
}

.contact-band-meta {
	font-family: var(--accent-font);
	font-size: 0.9rem;
	color: #8d99b5;
	margin: 2rem 0 0;
}

.contact-band-meta a {
	color: #c7d1e8;
	text-decoration: none;
	border-bottom: 2px dotted #8d99b5;
}

.contact-band-meta a:hover {
	color: var(--accent-color-2);
}

.fcard {
	background: #fff;
	border-radius: 20px;
	padding: 2.125rem 2rem;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
	color: #12151c;
}

.fcard-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem;
}

@media screen and (min-width: 561px) {
	.fcard-row {
		grid-template-columns: 1fr 1fr;
	}
}

.fcard-field {
	margin-bottom: 0.875rem;
}

.fcard label {
	display: block;
	font-family: var(--accent-font);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #4b5464;
	margin-bottom: 0.375rem;
}

.fcard-req {
	color: var(--accent-color-5);
}

.fcard .fin,
.fcard .fcard-input {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 15px;
	border: 1.5px solid #d9dcea;
	border-radius: 10px;
	font-family: var(--primary-font);
	font-size: 15px;
	color: #12151c;
	background: #f7f8fc;
}

.fcard .fin:focus,
.fcard .fcard-input:focus {
	outline: none;
	border-color: var(--bright-color);
	background: #fff;
	color: #12151c;
}

.fcard textarea.fin,
.fcard textarea.fcard-input {
	min-height: 88px;
	resize: vertical;
}

.fcard-submit {
	width: 100%;
	text-align: center;
	margin-top: 0.375rem;
	justify-content: center;
}

.fcard .fnote,
.fcard .fcard-note {
	margin: 14px 0 0;
	font-family: var(--accent-font);
	font-size: 12.5px;
	color: #4b5464;
	text-align: center;
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.fcard .wpcf7-form-control-wrap {
	display: block;
}

.fcard .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--accent-font);
	font-size: 0.75rem;
	color: var(--accent-color-5);
}

.fcard .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	border: 1px solid transparent;
	font-family: var(--accent-font);
	font-size: 0.85rem;
}

.fcard.init .wpcf7-response-output,
.fcard.resetting .wpcf7-response-output,
.fcard.submitting .wpcf7-response-output {
	display: none;
}

.fcard.sent .wpcf7-response-output {
	border-color: var(--accent-color-2);
}

.fcard.failed .wpcf7-response-output,
.fcard.aborted .wpcf7-response-output,
.fcard.spam .wpcf7-response-output,
.fcard.invalid .wpcf7-response-output {
	border-color: var(--accent-color-5);
}

.fcard input.wpcf7-submit {
	cursor: pointer;
	border: 0;
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bright-color);
	color: var(--light-color);
	font-family: var(--accent-font);
	font-size: inherit;
	font-weight: 700;
	line-height: 1.5;
	padding: 10px 20px;
	border-radius: 999px;
}

/*--------------------------------------------------------------
# Enterprise Intelligence (Taming AI)
--------------------------------------------------------------*/
.av-dark-radial {
	background:
		radial-gradient(ellipse at bottom right, rgba(163, 41, 193, 0.18) 0%, transparent 60%),
		var(--dark-color);
}

.cd-text-link,
a.cd:visited .cd-text-link {
	display: inline-block;
	margin-top: auto;
	padding-top: 1rem;
	font-family: var(--accent-font);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--accent-color-2);
}

a.cd:hover .cd-text-link,
a.cd:visited:hover .cd-text-link {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cd-text-link.av-text-1,
a.cd:visited .cd-text-link.av-text-1 {
	color: var(--accent-color-1);
}

/* Trailing arrow on a card text link, glued by a no-break space. A text
   glyph: the Font Awesome kit swaps <i> for SVG, so it cannot sit in a
   pseudo-element. */
.cd-text-link--arrow::after {
	content: "\00a0\2192";
	font-weight: 700;
}

.cd--glass .cd-eyebrow {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.65625rem;
	letter-spacing: 0.12em;
	margin-bottom: 10px;
}

/* Trajectory ladder */
.ei-trajectory {
	padding: 4rem 0 5rem;
	background: linear-gradient(180deg, #000000, #0b0e17 55%, #000000);
}

.ei-trajectory .ct-header {
	padding-top: 0;
}

.ei-trajectory-ladder {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	max-width: 860px;
	margin: 1.75rem auto 0;
	width: 100%;
}

.ei-layer {
	display: flex;
	flex-direction: column;
	padding: 32px;
	border-radius: 16px;
	position: relative;
	--glass-tint: rgba(41, 98, 255, 0.08);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, var(--glass-tint) 50%, rgba(255, 255, 255, 0.03) 100%),
		rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(16px) saturate(1.3);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.ei-layer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
	pointer-events: none;
	border-radius: 16px 16px 0 0;
}

.ei-layer--t1 { --glass-tint: rgba(0, 176, 255, 0.1); }
.ei-layer--t2 { --glass-tint: rgba(29, 233, 182, 0.08); }
.ei-layer--t6 { --glass-tint: rgba(163, 41, 193, 0.1); }

.ei-layer--t4 {
	--glass-tint: rgba(204, 255, 144, 0.08);
}

.ei-layer h3 {
	font-family: var(--accent-font);
	font-weight: 700;
	font-size: 1.12rem;
	margin: 0 0 10px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.95);
	position: relative;
	z-index: 1;
}

.ei-layer p {
	font-size: 0.93rem;
	margin: 0 0 10px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.72);
	position: relative;
	z-index: 1;
}

.ei-layer p:last-child {
	margin-bottom: 0;
}

.ei-layer-unlock,
.ei-layer-extra {
	color: rgba(255, 255, 255, 0.85);
}

.ei-layer-unlock b,
.ei-layer-extra b {
	color: var(--accent-color-3);
	font-weight: 700;
}

.ei-trajectory-footer {
	text-align: center;
	max-width: 66ch;
	margin: 2rem auto 0;
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}

/* Stance */
.ei-stance {
	padding: 4.5rem 0 5rem;
}

.ei-stance-eyebrow {
	font-family: var(--accent-font);
	font-size: clamp(0.75rem, 1.2vw, 0.9rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.55);
	margin: 0 0 0.75rem;
}

.ei-stance-heading {
	font-family: var(--primary-font);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 1.4rem;
	color: var(--light-color);
}

.ei-stance-intro {
	font-family: var(--primary-font);
	font-size: 1.05rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
	margin: 0;
	max-width: var(--prose-max-width);
}

.ei-stance-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	margin-top: 2.75rem;
}

@media screen and (min-width: 800px) {
	.ei-stance-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.ei-stance-card {
	padding: 1.75rem 1.6rem;
	border-radius: 16px;
}

.ei-stance-card h3 {
	font-family: var(--accent-font);
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 1rem;
	color: var(--light-color);
}

.ei-stance-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ei-stance-card li {
	position: relative;
	padding: 0.45rem 0 0.45rem 1.25rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ei-stance-card li:last-child {
	border-bottom: none;
}

.ei-stance-card li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: rgba(255, 255, 255, 0.45);
}

.ei-stance-tags {
	margin-top: 2rem;
}

.ei-stance-close {
	margin-top: 2.5rem;
	font-family: var(--primary-font);
	font-size: 1.2rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.ei-stance-close b {
	background: var(--accent-color-3);
	color: var(--dark-color);
	padding: 0.05em 0.18em;
	font-weight: 700;
}

/* Sky closer */
.sky--closer {
	min-height: 0;
	padding: 120px 0 130px;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.sky-closer-content {
	position: relative;
	z-index: 2;
}

.sky-closer-eyebrow {
	font-family: var(--accent-font);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9fb2dd;
	margin: 0;
}

.sky-closer-heading {
	font-family: var(--primary-font);
	font-size: clamp(1.8rem, 3.5vw, 2.8rem);
	font-weight: 700;
	color: var(--light-color);
	margin: 14px 0 1rem;
}

.sky-closer-body {
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.75);
	max-width: 48ch;
	margin: 0 auto 1.25rem;
}

.sky-closer-motto {
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	font-weight: 700;
	margin: 0 0 2rem;
	color: var(--light-color);
}

.sky-closer-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
}