/*
Theme Name: Assurance Ally
Theme URI: https://www.assuranceally.com/
Author: Assurance Ally
Description: A boutique life insurance and annuity IMO built on Virtual Family Office collaboration. Dark navy canvas, gold as a scarce accent, a WebGL hexagonal lattice behind every hero, and scroll choreography throughout. Honours prefers-reduced-motion everywhere.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: assurance-ally
*/

/* ==========================================================================
   1. Tokens
   The palette is the live brand, deepened. #07244A is the existing navy and
   stays the mid tone; the surface below it and the two above it were added so
   sections can stack without every one of them being the same flat blue.
   Gold is deliberately scarce: it marks a call to action, a live number, or a
   single word in a heading, and nothing else.
   ========================================================================== */

:root {
	--ink: #020B1B;
	--navy-900: #04162F;
	--navy-800: #07244A;
	--navy-700: #0B3268;
	--navy-600: #11417F;

	--azure-600: #1C74C4;
	--azure-500: #2491EB;
	--azure-400: #4FA6EF;
	--azure-300: #78BAF0;
	--azure-200: #B9E1FF;
	--azure-100: #E3F2FF;
	--mist: #EEF8FF;

	--gold-300: #FFE985;
	--gold-400: #FFDD55;
	--gold-500: #F5CB30;
	--gold-600: #D9A916;

	--paper: #FFFFFF;
	--paper-2: #F5F9FE;
	--paper-3: #E7F0FA;

	--text-on-dark: #E8F2FD;
	--text-on-dark-dim: rgba(232, 242, 253, 0.66);
	--text-on-dark-faint: rgba(232, 242, 253, 0.42);
	--text-on-light: #0A2143;
	--text-on-light-dim: #4A607E;

	--line-dark: rgba(120, 186, 240, 0.18);
	--line-dark-soft: rgba(120, 186, 240, 0.1);
	--line-light: rgba(10, 33, 67, 0.1);

	--glass: rgba(255, 255, 255, 0.045);
	--glass-2: rgba(255, 255, 255, 0.075);

	--font-display: circular-std, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-body: circular-std, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-serif: Lora, "Iowan Old Style", Georgia, serif;

	--aa-card-pad: 22px;

	--shell: 1240px;
	--shell-wide: 1420px;
	--gutter: clamp(20px, 5vw, 48px);
	--header-h: 84px;

	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-xl: 34px;

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

	--shadow-lift: 0 30px 70px -30px rgba(2, 11, 27, 0.75);
	--shadow-card: 0 24px 60px -34px rgba(2, 11, 27, 0.9);
	--shadow-gold: 0 18px 46px -18px rgba(255, 221, 85, 0.45);
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--navy-900);
	color: var(--text-on-dark);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.62;
	font-weight: 400;
	letter-spacing: -0.006em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.aa-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.032em;
	margin: 0;
	text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--gold-400); color: var(--navy-900); }

:focus-visible {
	outline: 2px solid var(--gold-400);
	outline-offset: 3px;
	border-radius: 4px;
}

.aa-skip {
	position: absolute;
	left: -9999px;
	top: 12px;
	z-index: 200;
	padding: 12px 20px;
	background: var(--gold-400);
	color: var(--navy-900);
	font-weight: 600;
	border-radius: var(--r-sm);
}
.aa-skip:focus { left: 12px; }

.aa-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.aa-shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.aa-shell-wide { max-width: var(--shell-wide); }

.aa-section {
	position: relative;
	padding-block: clamp(76px, 10vw, 148px);
	isolation: isolate;
}

.aa-section-dark { background: var(--navy-900); color: var(--text-on-dark); }
.aa-section-deep { background: var(--ink); color: var(--text-on-dark); }

.aa-section-light {
	background: var(--paper-2);
	color: var(--text-on-light);
}
.aa-section-light .aa-lede { color: var(--text-on-light-dim); }

.aa-section-paper { background: var(--paper); color: var(--text-on-light); }

/* A hairline that fades out at both ends, used between stacked dark sections. */
.aa-rule {
	height: 1px;
	border: 0;
	margin: 0;
	background: linear-gradient(90deg, transparent, var(--line-dark), transparent);
}

/* ==========================================================================
   4. Typography scale
   ========================================================================== */

.aa-h1, .aa-hero-title {
	font-size: clamp(2.6rem, 6.4vw, 5.1rem);
	letter-spacing: -0.042em;
	line-height: 0.98;
}

.aa-h2 {
	font-size: clamp(2rem, 4.3vw, 3.5rem);
	letter-spacing: -0.036em;
	line-height: 1.02;
}

.aa-h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); letter-spacing: -0.026em; }

.aa-lede {
	font-size: clamp(1.02rem, 1.5vw, 1.22rem);
	line-height: 1.6;
	color: var(--text-on-dark-dim);
	max-width: 62ch;
	font-weight: 400;
}

.aa-head { margin-bottom: clamp(40px, 5vw, 68px); max-width: 860px; }
.aa-head-center { margin-inline: auto; text-align: center; }
.aa-head-center .aa-lede { margin-inline: auto; }
.aa-head-center .aa-kicker { justify-content: center; }
.aa-head.is-light { color: var(--text-on-dark); }

/* The gold word. Applied to a <span> inside a heading, never to the whole. */
.aa-gold {
	color: var(--gold-400);
	position: relative;
	white-space: nowrap;
}

.aa-serif {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
}

.aa-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--azure-300);
	margin-bottom: 20px;
}
.aa-section-light .aa-kicker,
.aa-section-paper .aa-kicker { color: var(--azure-600); }

.aa-kicker-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--gold-400);
	box-shadow: 0 0 0 4px rgba(255, 221, 85, 0.16);
	flex: none;
}

/* ==========================================================================
   5. Buttons
   The gold button is the only filled button in the theme. Everything else is
   a ghost or a link, so the eye always knows where the conversion is.
   ========================================================================== */

.aa-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	/* Every variant carries the same 1px box, so a filled button and a ghost
	 * button sitting side by side are exactly the same height. */
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
		background-color 0.35s var(--ease-out), color 0.35s var(--ease-out),
		border-color 0.35s var(--ease-out);
	will-change: transform;
	overflow: hidden;
}

.aa-btn-lg { padding: 17px 34px; font-size: 1rem; }
.aa-btn-sm { padding: 11px 20px; font-size: 0.875rem; }

.aa-btn-label { position: relative; z-index: 2; }

.aa-btn-arrow {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 16px; height: 16px;
	transition: transform 0.45s var(--ease-out);
}
.aa-btn-arrow svg { width: 16px; height: 16px; }
.aa-btn:hover .aa-btn-arrow { transform: translateX(4px); }

.aa-btn-gold {
	background: var(--gold-400);
	color: var(--navy-900);
	box-shadow: var(--shadow-gold);
}
/* A slow specular sweep across the face, triggered on hover. */
.aa-btn-gold::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.72) 48%, transparent 64%);
	transform: translateX(-120%);
	transition: transform 0.85s var(--ease-out);
	z-index: 1;
}
.aa-btn-gold:hover {
	background: var(--gold-300);
	transform: translateY(-2px);
	box-shadow: 0 24px 56px -16px rgba(255, 221, 85, 0.55);
}
.aa-btn-gold:hover::after { transform: translateX(120%); }
.aa-btn-gold:active { transform: translateY(0); }

.aa-btn-ghost {
	color: var(--text-on-dark);
	border: 1px solid var(--line-dark);
	background: var(--glass);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.aa-btn-ghost:hover {
	border-color: rgba(120, 186, 240, 0.44);
	background: var(--glass-2);
	transform: translateY(-2px);
}

.aa-section-light .aa-btn-ghost,
.aa-section-paper .aa-btn-ghost {
	color: var(--text-on-light);
	border-color: var(--line-light);
	background: rgba(10, 33, 67, 0.03);
}
.aa-section-light .aa-btn-ghost:hover,
.aa-section-paper .aa-btn-ghost:hover { border-color: rgba(10, 33, 67, 0.28); }

.aa-btn-navy { background: var(--navy-800); color: #fff; }
.aa-btn-navy:hover { background: var(--navy-700); transform: translateY(-2px); }

/* A text link that draws its own underline on hover. */
.aa-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--azure-300);
	position: relative;
}
.aa-link::after {
	content: "";
	position: absolute;
	left: 0; right: 100%;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transition: right 0.5s var(--ease-out);
}
.aa-link:hover::after { right: 0; }
.aa-link svg { width: 14px; height: 14px; transition: transform 0.45s var(--ease-out); }
.aa-link:hover svg { transform: translateX(3px); }
.aa-section-light .aa-link, .aa-section-paper .aa-link { color: var(--azure-600); }

/* ==========================================================================
   6. Header
   Transparent over every hero, solid on scroll. The mega panels are pure CSS
   with a JS-driven open state so a keyboard can drive them too.
   ========================================================================== */

.aa-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 90;
	height: var(--header-h);
	display: flex;
	align-items: center;
	transition: background-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out),
		height 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
	border-bottom: 1px solid transparent;
}

.aa-header.is-scrolled {
	height: 68px;
	background: rgba(4, 22, 47, 0.82);
	backdrop-filter: blur(18px) saturate(150%);
	-webkit-backdrop-filter: blur(18px) saturate(150%);
	border-bottom-color: var(--line-dark-soft);
	box-shadow: 0 18px 50px -30px rgba(2, 11, 27, 0.9);
}

/* Hide on scroll down, show on scroll up, but never while a panel is open. */
.aa-header.is-hidden { transform: translateY(-104%); }
.aa-header { transition-property: background-color, box-shadow, height, border-color, transform; }

.aa-header-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	width: 100%;
	max-width: var(--shell-wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.aa-brand { flex: none; display: block; }
.aa-brand img {
	height: 38px;
	width: auto;
	transition: height 0.5s var(--ease-out);
}
.aa-header.is-scrolled .aa-brand img { height: 32px; }

.aa-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.aa-nav-item { position: relative; }

.aa-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 0.925rem;
	font-weight: 500;
	color: var(--text-on-dark);
	transition: color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.aa-nav-link:hover,
.aa-nav-item.is-open > .aa-nav-link { color: #fff; background: var(--glass-2); }

.aa-nav-caret {
	width: 9px; height: 9px;
	transition: transform 0.4s var(--ease-out);
	opacity: 0.6;
}
.aa-nav-item.is-open .aa-nav-caret { transform: rotate(180deg); opacity: 1; }

.aa-mega {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	translate: -50% 0;
	width: max-content;
	max-width: min(92vw, 780px);
	padding: 12px;
	border-radius: var(--r-lg);
	background: rgba(6, 26, 56, 0.94);
	backdrop-filter: blur(26px) saturate(160%);
	-webkit-backdrop-filter: blur(26px) saturate(160%);
	border: 1px solid var(--line-dark);
	box-shadow: 0 40px 90px -36px rgba(2, 11, 27, 0.95);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.985);
	transform-origin: top center;
	transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0.35s;
}
.aa-nav-item.is-open .aa-mega {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.aa-mega-grid { display: grid; gap: 4px; }
.aa-mega-grid-2 { grid-template-columns: 1fr 1fr; }

.aa-mega-group + .aa-mega-group { margin-top: 10px; }

.aa-mega-label {
	display: block;
	padding: 10px 14px 6px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-on-dark-faint);
}

.aa-mega-link {
	display: block;
	padding: 11px 14px;
	border-radius: var(--r-md);
	transition: background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.aa-mega-link:hover { background: var(--glass-2); transform: translateX(3px); }

.aa-mega-title {
	display: block;
	font-weight: 600;
	font-size: 0.94rem;
	color: #fff;
	margin-bottom: 2px;
}
.aa-mega-desc {
	display: block;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--text-on-dark-dim);
}

.aa-header-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.aa-signin {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--text-on-dark-dim);
	transition: color 0.3s var(--ease-out);
}
.aa-signin:hover { color: #fff; }
.aa-signin svg { width: 15px; height: 15px; }

/* Burger */
.aa-burger {
	display: none;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--line-dark);
	background: var(--glass);
	place-items: center;
}
.aa-burger span {
	display: block;
	width: 17px; height: 1.5px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.45s var(--ease-out), opacity 0.3s;
}
.aa-burger span + span { margin-top: 5px; }
.aa-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.aa-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.aa-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Scroll progress hairline along the bottom of the header. */
.aa-progress {
	position: absolute;
	left: 0; bottom: -1px;
	height: 2px;
	width: 100%;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--azure-500), var(--gold-400));
	opacity: 0;
	transition: opacity 0.4s;
}
.aa-header.is-scrolled .aa-progress { opacity: 1; }

/* ==========================================================================
   7. Mobile drawer
   ========================================================================== */

.aa-drawer {
	position: fixed;
	inset: 0;
	z-index: 95;
	display: grid;
	grid-template-columns: 1fr min(460px, 92vw);
}
.aa-drawer[hidden] { display: none; }

.aa-drawer-backdrop {
	background: rgba(2, 11, 27, 0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.5s var(--ease-out);
}
.aa-drawer.is-open .aa-drawer-backdrop { opacity: 1; }

.aa-drawer-panel {
	position: relative;
	background: var(--navy-900);
	border-left: 1px solid var(--line-dark);
	padding: calc(var(--header-h) + 16px) 24px 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform 0.6s var(--ease-out);
}
.aa-drawer.is-open .aa-drawer-panel { transform: translateX(0); }

.aa-drawer-link {
	display: block;
	padding: 15px 4px;
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	border-bottom: 1px solid var(--line-dark-soft);
}

.aa-drawer-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px 4px;
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	text-align: left;
	border-bottom: 1px solid var(--line-dark-soft);
}
.aa-drawer-chev {
	width: 11px; height: 11px;
	transition: transform 0.4s var(--ease-out);
	opacity: 0.55;
}
.aa-drawer-toggle[aria-expanded="true"] .aa-drawer-chev { transform: rotate(180deg); opacity: 1; }

.aa-drawer-children { padding: 6px 0 14px 4px; }
.aa-drawer-children[hidden] { display: none; }
.aa-drawer-children a {
	display: block;
	padding: 10px 0 10px 16px;
	font-size: 0.96rem;
	color: var(--text-on-dark-dim);
	border-left: 1px solid var(--line-dark);
	transition: color 0.3s, border-color 0.3s, padding-left 0.35s var(--ease-out);
}
.aa-drawer-children a:hover {
	color: #fff;
	border-left-color: var(--gold-400);
	padding-left: 20px;
}

.aa-drawer-foot { margin-top: 26px; display: grid; gap: 12px; }
.aa-drawer-foot .aa-btn { width: 100%; }

/* ==========================================================================
   8. Hero
   Three stacked layers behind the copy: the WebGL lattice canvas, a static
   hexagonal plate that stands in for it when WebGL is unavailable, and a
   radial glow. All three are decorative and marked aria-hidden.
   ========================================================================== */

.aa-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 50% -10%, var(--navy-700) 0%, transparent 62%),
		linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 58%, var(--navy-900) 100%);
	padding-top: calc(var(--header-h) + clamp(56px, 9vw, 120px));
	padding-bottom: clamp(72px, 10vw, 148px);
	min-height: clamp(560px, 78vh, 860px);
	display: flex;
	align-items: center;
}

.aa-hero-home {
	min-height: min(100svh, 960px);
	padding-bottom: clamp(100px, 12vw, 180px);
}

.aa-hero-lattice {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -3;
	opacity: 0;
	transition: opacity 1.4s var(--ease-out);
}
.aa-hero-lattice.is-live { opacity: 1; }

/*
 * The static plate. It is the fallback, so it is visible by default and only
 * fades once the canvas has actually painted a frame. Nothing is hidden by
 * CSS that only JavaScript can bring back.
 */
.aa-hero-plate {
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: 0.5;
	transition: opacity 1.2s var(--ease-out);
	background-image:
		linear-gradient(transparent 0 0),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%232491EB' stroke-width='1' stroke-opacity='0.34'%3E%3Cpath d='M30 2 L60 19 L60 53 L30 70 L0 53 L0 19 Z'/%3E%3Cpath d='M90 2 L120 19 L120 53 L90 70 L60 53 L60 19 Z'/%3E%3Cpath d='M60 53 L90 70 L90 104 L60 121 L30 104 L30 70 Z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: auto, 120px 104px;
	-webkit-mask-image: radial-gradient(75% 60% at 50% 100%, #000 0%, transparent 74%);
	mask-image: radial-gradient(75% 60% at 50% 100%, #000 0%, transparent 74%);
}
.aa-hero.is-lattice-live .aa-hero-plate { opacity: 0; }

.aa-hero-glow {
	position: absolute;
	left: 50%; top: -10%;
	width: min(1100px, 120vw);
	aspect-ratio: 1;
	translate: -50% 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(circle, rgba(36, 145, 235, 0.2) 0%, transparent 62%);
	filter: blur(20px);
}

.aa-hero-fade {
	position: absolute;
	inset: auto 0 0 0;
	height: 180px;
	background: linear-gradient(180deg, transparent, var(--navy-900));
	pointer-events: none;
	z-index: -1;
}

.aa-hero-inner { position: relative; z-index: 1; }
.aa-hero-home .aa-hero-inner { text-align: center; }
.aa-hero-home .aa-hero-lede { margin-inline: auto; }
.aa-hero-home .aa-kicker { justify-content: center; }

.aa-hero-title { max-width: 18ch; }
.aa-hero-home .aa-hero-title { max-width: 21ch; margin-inline: auto; }

.aa-hero-lede {
	margin-top: 26px;
	max-width: 58ch;
	font-size: clamp(1.05rem, 1.65vw, 1.3rem);
	line-height: 1.55;
	color: var(--text-on-dark-dim);
}

.aa-hero-actions {
	margin-top: 38px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}
.aa-hero-home .aa-hero-actions { justify-content: center; }

.aa-hero-stats {
	margin-top: clamp(48px, 6vw, 82px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	background: var(--line-dark-soft);
	border: 1px solid var(--line-dark-soft);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.aa-stat {
	padding: 26px 22px;
	background: rgba(4, 22, 47, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	text-align: center;
	transition: background-color 0.5s var(--ease-out);
}
.aa-stat:hover { background: rgba(11, 50, 104, 0.5); }

.aa-stat-value {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 3.4vw, 2.85rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--gold-400);
	font-variant-numeric: tabular-nums;
}

.aa-stat-label {
	display: block;
	margin-top: 9px;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-on-dark-faint);
}

/* ==========================================================================
   9. The hexagonal field, used as a section backdrop
   ========================================================================== */

.aa-hex-field {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%232491EB' stroke-width='1' stroke-opacity='0.3'%3E%3Cpath d='M30 2 L60 19 L60 53 L30 70 L0 53 L0 19 Z'/%3E%3Cpath d='M90 2 L120 19 L120 53 L90 70 L60 53 L60 19 Z'/%3E%3Cpath d='M60 53 L90 70 L90 104 L60 121 L30 104 L30 70 Z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 120px 104px;
	-webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 72%);
	mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 72%);
	animation: aa-drift 44s linear infinite;
}
.aa-hex-field-soft { opacity: 0.22; }

@keyframes aa-drift {
	to { background-position: 240px 208px; }
}

/* ==========================================================================
   10. Motion primitives
   Everything below is additive: the base state is the finished state, and the
   pre-animation state is only applied once JavaScript has confirmed it can
   run and the visitor has not asked for reduced motion. With JS off, or with
   reduced motion on, the page simply renders.
   ========================================================================== */

.aa-motion .aa-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
	transition-delay: var(--aa-delay, 0ms);
}
.aa-motion .aa-reveal.is-in { opacity: 1; transform: none; }

/* The cut reveal: each line of a heading rises out of its own clipped band. */
.aa-line { display: block; overflow: hidden; }
.aa-line-inner { display: block; }
.aa-motion .aa-line-inner {
	transform: translateY(105%);
	transition: transform 1s var(--ease-out);
	transition-delay: var(--aa-delay, 0ms);
}
.aa-motion .aa-cut.is-in .aa-line-inner { transform: none; }

/* 3D pointer tilt on cards. The values are set by JS as custom properties. */
.aa-tilt-wrap { perspective: 1100px; }
[data-aa-tilt] {
	transform: perspective(1100px)
		rotateX(var(--aa-rx, 0deg))
		rotateY(var(--aa-ry, 0deg))
		translateZ(0);
	transform-style: preserve-3d;
	transition: transform 0.6s var(--ease-out);
}
[data-aa-tilt].is-tilting { transition: transform 0.12s linear; }

/* The sheen that tracks the pointer across a tilted card. */
.aa-card-sheen, .aa-path-sheen {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.5s var(--ease-out);
	background: radial-gradient(
		420px circle at var(--aa-mx, 50%) var(--aa-my, 50%),
		rgba(120, 186, 240, 0.16),
		transparent 62%
	);
}
[data-aa-tilt]:hover .aa-card-sheen,
[data-aa-tilt]:hover .aa-path-sheen { opacity: 1; }

/* ==========================================================================
   11. Cards
   ========================================================================== */

.aa-cards { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.aa-cards-two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.aa-cards-three { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.aa-cards-four { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

.aa-card {
	position: relative;
	padding: clamp(24px, 2.6vw, 34px);
	border-radius: var(--r-lg);
	border: 1px solid var(--line-dark);
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	overflow: hidden;
	transition: border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out),
		transform 0.6s var(--ease-out);
}
.aa-card:hover {
	border-color: rgba(120, 186, 240, 0.4);
	box-shadow: var(--shadow-card);
}

/* A hairline that runs along the top edge and lights up gold on hover. */
.aa-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
	opacity: 0;
	transition: opacity 0.5s var(--ease-out);
}
.aa-card:hover::before { opacity: 1; }

.aa-card-index {
	display: block;
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--azure-400);
	opacity: 0.6;
	margin-bottom: 18px;
}

.aa-card-title {
	font-size: clamp(1.08rem, 1.5vw, 1.28rem);
	letter-spacing: -0.026em;
	margin-bottom: 11px;
	color: #fff;
}

.aa-card-body {
	font-size: 0.945rem;
	line-height: 1.6;
	color: var(--text-on-dark-dim);
}

/* Light-section variant */
.aa-section-light .aa-card,
.aa-section-paper .aa-card {
	background: var(--paper);
	border-color: var(--line-light);
	box-shadow: 0 2px 4px -2px rgba(10, 33, 67, 0.08);
}
.aa-section-light .aa-card:hover,
.aa-section-paper .aa-card:hover {
	border-color: rgba(36, 145, 235, 0.4);
	box-shadow: 0 30px 60px -32px rgba(10, 33, 67, 0.4);
}
.aa-section-light .aa-card-title,
.aa-section-paper .aa-card-title { color: var(--text-on-light); }
.aa-section-light .aa-card-body,
.aa-section-paper .aa-card-body { color: var(--text-on-light-dim); }
.aa-section-light .aa-card-index,
.aa-section-paper .aa-card-index { color: var(--azure-600); }

/* ==========================================================================
   12. The strategy chart
   ========================================================================== */

.aa-strategies { overflow: hidden; }

.aa-tabs { max-width: 1080px; margin-inline: auto; }

.aa-tablist {
	position: relative;
	display: flex;
	gap: 4px;
	padding: 5px;
	margin-inline: auto;
	width: max-content;
	max-width: 100%;
	border-radius: 999px;
	border: 1px solid var(--line-dark);
	background: rgba(2, 11, 27, 0.5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	overflow-x: auto;
	scrollbar-width: none;
}
.aa-tablist::-webkit-scrollbar { display: none; }

/* The pill slides between tabs; JS sets its width and offset. */
.aa-tab-pill {
	position: absolute;
	top: 5px;
	left: 0;
	height: calc(100% - 10px);
	width: var(--aa-pill-w, 0px);
	transform: translateX(var(--aa-pill-x, 0px));
	border-radius: 999px;
	background: var(--gold-400);
	transition: transform 0.6s var(--ease-out), width 0.6s var(--ease-out);
	pointer-events: none;
}

.aa-tab {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 22px;
	border-radius: 999px;
	font-family: var(--font-display);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: -0.014em;
	white-space: nowrap;
	color: var(--text-on-dark-dim);
	transition: color 0.4s var(--ease-out);
}
.aa-tab:hover { color: #fff; }
.aa-tab.is-active { color: var(--navy-900); }

.aa-tab-count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 20px;
	padding-inline: 6px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	background: var(--glass-2);
	color: inherit;
	transition: background-color 0.4s var(--ease-out);
}
.aa-tab.is-active .aa-tab-count { background: rgba(4, 22, 47, 0.16); }

.aa-tabpanel { margin-top: clamp(32px, 4vw, 52px); }
.aa-tabpanel[hidden] { display: none; }

.aa-tabpanel-blurb {
	text-align: center;
	max-width: 58ch;
	margin: 0 auto clamp(28px, 3.4vw, 44px);
	color: var(--text-on-dark-dim);
	font-size: 1.02rem;
}

.aa-strategy-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
	gap: 10px;
}

.aa-strategy {
	position: relative;
	border-radius: var(--r-md);
	border: 1px solid var(--line-dark-soft);
	background: rgba(255, 255, 255, 0.028);
	transition: border-color 0.45s var(--ease-out), background-color 0.45s var(--ease-out),
		transform 0.45s var(--ease-out);
}
.aa-strategy:hover,
.aa-strategy:focus-within {
	border-color: rgba(120, 186, 240, 0.45);
	background: rgba(255, 255, 255, 0.07);
	/* No lift here: the description panel is anchored to this card, so moving it would drag the panel with it. */
	z-index: 4;
}
.aa-strategy.is-inhouse { border-left: 2px solid var(--gold-500); }

.aa-motion .aa-tabpanel:not([hidden]) .aa-strategy {
	animation: aa-pop 0.6s var(--ease-out) both;
	animation-delay: calc(var(--aa-i) * 14ms);
}
@keyframes aa-pop {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

.aa-strategy-face {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 15px 16px;
	text-align: left;
	font-size: 0.89rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--text-on-dark);
}

.aa-strategy-flag {
	flex: none;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 3px 7px;
	border-radius: 999px;
	background: rgba(255, 221, 85, 0.14);
	color: var(--gold-400);
}

/*
 * The description. It is in the DOM and readable by a screen reader at all
 * times; only its visual presentation is deferred to hover or focus, which is
 * what keeps sixty of these from reading as a wall of text.
 *
 * It is positioned out of flow on purpose. Expanded in flow, the grid reflowed
 * under the pointer while scrolling, so every card the cursor passed over
 * shoved its neighbours down the page. As an overlay it covers the cards below
 * instead of moving them, and the grid never changes height.
 */
.aa-strategy-blurb {
	position: absolute;
	left: -1px;
	right: -1px;
	top: calc(100% - 6px);
	z-index: 2;
	padding: 2px 16px 15px;
	border: 1px solid rgba(120, 186, 240, 0.45);
	border-top: 0;
	border-radius: 0 0 var(--r-md) var(--r-md);
	background: #0A2A54;
	box-shadow: 0 26px 50px -22px rgba(2, 11, 27, 0.95);
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--text-on-dark-dim);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s;
	pointer-events: none;
}

.aa-strategy:hover .aa-strategy-blurb,
.aa-strategy:focus-within .aa-strategy-blurb,
.aa-strategy .aa-strategy-face[aria-expanded="true"] + .aa-strategy-blurb {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* The card and its open panel read as one piece. */
.aa-strategy:hover,
.aa-strategy:focus-within {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.aa-strategy-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: clamp(28px, 3vw, 40px);
	font-size: 0.85rem;
	color: var(--text-on-dark-faint);
	text-align: center;
}

/* ==========================================================================
   13. The two partnership paths
   ========================================================================== */

.aa-paths { background: var(--navy-900); }

.aa-path-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: clamp(16px, 2vw, 26px);
}

.aa-path {
	position: relative;
	padding: clamp(28px, 3.2vw, 46px);
	border-radius: var(--r-xl);
	border: 1px solid var(--line-dark);
	background: linear-gradient(165deg, rgba(17, 65, 127, 0.4), rgba(4, 22, 47, 0.7));
	overflow: hidden;
	transition: border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.aa-path:hover {
	border-color: rgba(255, 221, 85, 0.36);
	box-shadow: var(--shadow-lift);
}

.aa-path-num {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 4.4vw, 3.6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(120, 186, 240, 0.4);
	margin-bottom: 20px;
	transition: -webkit-text-stroke-color 0.5s var(--ease-out);
}
.aa-path:hover .aa-path-num { -webkit-text-stroke-color: rgba(255, 221, 85, 0.6); }

.aa-path-title {
	font-size: clamp(1.32rem, 2.1vw, 1.75rem);
	color: #fff;
	margin-bottom: 12px;
}

.aa-path-lede {
	color: var(--text-on-dark-dim);
	font-size: 0.98rem;
	margin-bottom: 26px;
}

.aa-path-list { display: grid; gap: 14px; }
.aa-path-list li {
	display: flex;
	gap: 12px;
	font-size: 0.93rem;
	line-height: 1.55;
	color: var(--text-on-dark-dim);
}
.aa-path-list strong { color: #fff; font-weight: 600; }

.aa-tick {
	flex: none;
	display: grid;
	place-items: center;
	width: 20px; height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: rgba(255, 221, 85, 0.14);
	color: var(--gold-400);
}
.aa-tick svg { width: 11px; height: 11px; }

.aa-path-best {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--line-dark-soft);
	font-size: 0.9rem;
	color: var(--text-on-dark-dim);
}
.aa-path-best span {
	display: block;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--gold-400);
	margin-bottom: 6px;
}

/* ==========================================================================
   14. Split feature rows (image or figure beside copy)
   ========================================================================== */

.aa-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(32px, 5vw, 76px);
	align-items: center;
}
.aa-split-flip > *:first-child { order: 2; }

.aa-split-media {
	position: relative;
	border-radius: var(--r-xl);
	overflow: hidden;
	border: 1px solid var(--line-dark);
	background: var(--navy-800);
	aspect-ratio: 4 / 3;
}
.aa-split-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.02);
	transition: transform 1.2s var(--ease-out);
}
.aa-split-media:hover img { transform: scale(1.06); }

/* A gold corner bracket on the media, a quiet nod to the hexagon. */
.aa-split-media::after {
	content: "";
	position: absolute;
	left: 18px; bottom: 18px;
	width: 46px; height: 46px;
	border-left: 2px solid var(--gold-400);
	border-bottom: 2px solid var(--gold-400);
	border-bottom-left-radius: 8px;
	opacity: 0.8;
	pointer-events: none;
}

.aa-split-body h2 { margin-bottom: 20px; }
.aa-split-body p + p { margin-top: 16px; }
.aa-split-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* A numbered list used where copy has to stay long-form. */
.aa-steps { display: grid; gap: clamp(14px, 1.6vw, 20px); counter-reset: aa-step; }
.aa-step {
	position: relative;
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 20px;
	align-items: start;
	padding: clamp(20px, 2.2vw, 28px);
	border-radius: var(--r-lg);
	border: 1px solid var(--line-dark);
	background: rgba(255, 255, 255, 0.03);
	transition: border-color 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}
.aa-step:hover { border-color: rgba(120, 186, 240, 0.4); background: rgba(255, 255, 255, 0.055); }
.aa-step-num {
	counter-increment: aa-step;
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	border-radius: var(--r-md);
	background: rgba(36, 145, 235, 0.12);
	border: 1px solid var(--line-dark);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--gold-400);
}
.aa-step-num::before { content: counter(aa-step, decimal-leading-zero); }
.aa-step h3 { font-size: 1.12rem; margin-bottom: 8px; color: #fff; }
.aa-step p { font-size: 0.94rem; color: var(--text-on-dark-dim); }

.aa-section-light .aa-step,
.aa-section-paper .aa-step {
	background: var(--paper);
	border-color: var(--line-light);
}
.aa-section-light .aa-step h3, .aa-section-paper .aa-step h3 { color: var(--text-on-light); }
.aa-section-light .aa-step p, .aa-section-paper .aa-step p { color: var(--text-on-light-dim); }
.aa-section-light .aa-step-num, .aa-section-paper .aa-step-num {
	background: rgba(36, 145, 235, 0.09);
	border-color: var(--line-light);
	color: var(--azure-600);
}

/* ==========================================================================
   15. The case-size figure
   The one number on this site that does the selling. It deserves its own
   treatment rather than sitting in a card like everything else.
   ========================================================================== */

.aa-figure {
	position: relative;
	text-align: center;
	padding: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 56px);
	border-radius: var(--r-xl);
	border: 1px solid var(--line-dark);
	background:
		radial-gradient(90% 120% at 50% 0%, rgba(17, 65, 127, 0.6), transparent 70%),
		rgba(4, 22, 47, 0.7);
	overflow: hidden;
}

.aa-figure-label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-on-dark-faint);
	margin-bottom: 22px;
}

.aa-figure-range {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: clamp(12px, 2vw, 26px);
	flex-wrap: wrap;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 7vw, 5.4rem);
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--gold-400);
	font-variant-numeric: tabular-nums;
}
.aa-figure-to {
	font-size: clamp(1rem, 1.8vw, 1.5rem);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--text-on-dark-faint);
	font-family: var(--font-serif);
	font-style: italic;
}

.aa-figure-sub {
	margin-top: 26px;
	font-size: clamp(1rem, 1.5vw, 1.15rem);
	color: var(--text-on-dark);
	max-width: 46ch;
	margin-inline: auto;
}
.aa-figure-sub strong { color: var(--gold-300); font-weight: 600; }

.aa-figure-note {
	margin-top: 20px;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--text-on-dark-dim);
	max-width: 64ch;
	margin-inline: auto;
}

/* A scale bar that animates from the industry average to the Ally range. */
.aa-scale {
	margin-top: clamp(34px, 4vw, 52px);
	display: grid;
	gap: 12px;
	max-width: 620px;
	margin-inline: auto;
	text-align: left;
}
.aa-scale-row { display: grid; gap: 7px; }
.aa-scale-head {
	display: flex;
	justify-content: space-between;
	font-size: 0.8rem;
	color: var(--text-on-dark-dim);
}
.aa-scale-head b { color: #fff; font-weight: 600; }
.aa-scale-track {
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	overflow: hidden;
}
.aa-scale-fill {
	height: 100%;
	border-radius: 999px;
	width: var(--aa-w, 0%);
	background: linear-gradient(90deg, var(--azure-500), var(--azure-300));
	transform-origin: 0 50%;
}
.aa-scale-row.is-hero .aa-scale-fill {
	background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
}
.aa-motion .aa-scale-fill {
	width: 0;
	transition: width 1.6s var(--ease-out);
	transition-delay: var(--aa-delay, 0ms);
}
.aa-motion .aa-scale.is-in .aa-scale-fill { width: var(--aa-w, 0%); }

/* ==========================================================================
   16. Testimonials
   ========================================================================== */

.aa-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(14px, 1.8vw, 22px);
}

.aa-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3vw, 38px);
	border-radius: var(--r-lg);
	border: 1px solid var(--line-dark);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
	overflow: hidden;
	transition: border-color 0.5s var(--ease-out), transform 0.6s var(--ease-out),
		box-shadow 0.5s var(--ease-out);
}
.aa-quote:hover {
	border-color: rgba(255, 221, 85, 0.34);
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

.aa-quote-mark {
	font-family: var(--font-serif);
	font-size: 4.6rem;
	line-height: 0.7;
	color: var(--gold-400);
	opacity: 0.28;
	margin-bottom: 8px;
	user-select: none;
}

.aa-quote-pull {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(1.1rem, 1.7vw, 1.4rem);
	line-height: 1.25;
	color: var(--gold-300);
	margin-bottom: 16px;
	letter-spacing: -0.015em;
}

.aa-quote-text {
	font-size: 0.95rem;
	line-height: 1.62;
	color: var(--text-on-dark-dim);
	flex: 1;
}

.aa-quote-by {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--line-dark-soft);
	display: flex;
	align-items: center;
	gap: 12px;
}

/* A monogram rather than a stock avatar; we do not have photos of the speakers. */
.aa-quote-mono {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	flex: none;
	border-radius: 50%;
	background: rgba(36, 145, 235, 0.16);
	border: 1px solid var(--line-dark);
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--azure-200);
}

.aa-quote-name { font-weight: 600; font-size: 0.93rem; color: #fff; }
.aa-quote-role { font-size: 0.8rem; color: var(--text-on-dark-faint); }

/* ==========================================================================
   17. Team
   ========================================================================== */

.aa-team {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(266px, 1fr));
	gap: clamp(16px, 2vw, 26px);
}

.aa-member {
	position: relative;
	/*
	 * A column, so the body can absorb the slack and the "Read full bio" row
	 * always sits on the card's bottom edge. Laid out as a block, a member
	 * with a two-line headline pulled their link 23px above everyone else's
	 * and the row read as ragged.
	 */
	display: flex;
	flex-direction: column;
	border-radius: var(--r-xl);
	overflow: hidden;
	border: 1px solid var(--line-dark);
	background: var(--navy-800);
	transition: border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.aa-member:hover { border-color: rgba(255, 221, 85, 0.34); box-shadow: var(--shadow-lift); }

.aa-member-photo {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--navy-700);
	flex: none;
}
.aa-member-photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	/*
	 * Biased just above centre. The source headshots frame their subjects
	 * differently, so a flat "top" crop put some faces at the very edge of
	 * the frame; this keeps every face inside the same band.
	 */
	object-position: center 22%;
	filter: saturate(0.82) contrast(1.04);
	transform: scale(1.01);
	transition: transform 1.1s var(--ease-out), filter 0.7s var(--ease-out);
}
.aa-member:hover .aa-member-photo img { transform: scale(1.055); filter: saturate(1) contrast(1); }

.aa-member-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 38%, rgba(4, 22, 47, 0.92) 100%);
	pointer-events: none;
}

.aa-member-metric {
	position: absolute;
	top: var(--aa-card-pad); right: var(--aa-card-pad);
	z-index: 2;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(2, 11, 27, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--line-dark);
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--gold-400);
}

/* One inset for everything in the card, so the name over the photo and the
   text beneath it share a single left edge. */
.aa-member-id {
	position: absolute;
	left: var(--aa-card-pad); right: var(--aa-card-pad); bottom: 18px;
	z-index: 2;
}
.aa-member-name { font-size: 1.18rem; color: #fff; letter-spacing: -0.028em; }
.aa-member-role {
	font-size: 0.79rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--azure-300);
	margin-top: 5px;
}

.aa-member-body {
	flex: 1;
	padding: var(--aa-card-pad) var(--aa-card-pad) 8px;
}
.aa-member-headline {
	font-size: 0.96rem;
	line-height: 1.5;
	color: var(--text-on-dark);
}

.aa-member-more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	flex: none;
	padding: 16px var(--aa-card-pad) var(--aa-card-pad);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--azure-300);
	transition: color 0.35s var(--ease-out);
}
.aa-member-more:hover { color: var(--gold-400); }
.aa-member-more svg { width: 13px; height: 13px; transition: transform 0.45s var(--ease-out); }
.aa-member-more:hover svg { transform: translateX(3px); }
/* ==========================================================================
   18. The carrier table
   ========================================================================== */

.aa-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 26px;
	align-items: center;
}

.aa-chip {
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--line-dark);
	font-size: 0.86rem;
	font-weight: 500;
	color: var(--text-on-dark-dim);
	background: rgba(255, 255, 255, 0.03);
	transition: all 0.4s var(--ease-out);
}
.aa-chip:hover { color: #fff; border-color: rgba(120, 186, 240, 0.45); }
.aa-chip.is-active {
	background: var(--gold-400);
	border-color: var(--gold-400);
	color: var(--navy-900);
	font-weight: 600;
}

.aa-search {
	margin-left: auto;
	position: relative;
	min-width: 220px;
}
.aa-search input {
	width: 100%;
	padding: 10px 16px 10px 40px;
	border-radius: 999px;
	border: 1px solid var(--line-dark);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text-on-dark);
	font: inherit;
	font-size: 0.88rem;
	transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.aa-search input::placeholder { color: var(--text-on-dark-faint); }
.aa-search input:focus { outline: none; border-color: var(--gold-400); background: rgba(255, 255, 255, 0.06); }
.aa-search svg {
	position: absolute;
	left: 15px; top: 50%;
	translate: 0 -50%;
	width: 14px; height: 14px;
	color: var(--text-on-dark-faint);
	pointer-events: none;
}

.aa-table-wrap {
	position: relative;
	border-radius: var(--r-lg);
	border: 1px solid var(--line-dark);
	background: rgba(4, 22, 47, 0.6);
	overflow: auto;
	max-height: 76vh;
	overscroll-behavior: contain;
}

.aa-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.84rem; }

.aa-table thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 14px 10px;
	background: rgba(7, 36, 74, 0.97);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--azure-200);
	text-align: center;
	white-space: nowrap;
	border-bottom: 1px solid var(--line-dark);
	vertical-align: bottom;
}
.aa-table thead th:first-child {
	left: 0;
	z-index: 4;
	text-align: left;
	padding-left: 20px;
	min-width: 230px;
}

.aa-table tbody th {
	position: sticky;
	left: 0;
	z-index: 2;
	padding: 13px 14px 13px 20px;
	background: rgba(4, 22, 47, 0.97);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	text-align: left;
	font-weight: 500;
	font-size: 0.87rem;
	color: var(--text-on-dark);
	border-bottom: 1px solid var(--line-dark-soft);
	min-width: 230px;
}

.aa-table tbody td {
	padding: 13px 10px;
	text-align: center;
	border-bottom: 1px solid var(--line-dark-soft);
	color: var(--text-on-dark-faint);
}

.aa-table tbody tr { transition: background-color 0.3s var(--ease-out); }
.aa-table tbody tr:hover > * { background: rgba(36, 145, 235, 0.1); }
.aa-table tbody tr[hidden] { display: none; }

.aa-rating {
	display: inline-grid;
	place-items: center;
	min-width: 34px;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	background: rgba(36, 145, 235, 0.16);
	color: var(--azure-200);
}
.aa-rating.is-top { background: rgba(255, 221, 85, 0.16); color: var(--gold-400); }

.aa-check {
	display: inline-grid;
	place-items: center;
	width: 19px; height: 19px;
	border-radius: 50%;
	background: rgba(255, 221, 85, 0.15);
	color: var(--gold-400);
}
.aa-check svg { width: 10px; height: 10px; }

.aa-table-count {
	margin-top: 16px;
	font-size: 0.85rem;
	color: var(--text-on-dark-faint);
}
.aa-table-empty {
	padding: 48px 20px;
	text-align: center;
	color: var(--text-on-dark-faint);
}
.aa-table-empty[hidden] { display: none; }

/* ==========================================================================
   19. Marquee
   ========================================================================== */

.aa-marquee {
	position: relative;
	overflow: hidden;
	padding-block: 6px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.aa-marquee-track { display: flex; width: max-content; animation: aa-marquee 52s linear infinite; }
.aa-marquee:hover .aa-marquee-track { animation-play-state: paused; }
.aa-marquee-run { display: flex; gap: 12px; padding-right: 12px; }

.aa-marquee-item {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 999px;
	border: 1px solid var(--line-dark-soft);
	background: rgba(255, 255, 255, 0.028);
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--text-on-dark-dim);
	white-space: nowrap;
	transition: color 0.35s, border-color 0.35s;
}
.aa-marquee-item:hover { color: #fff; border-color: rgba(120, 186, 240, 0.45); }

@keyframes aa-marquee {
	to { transform: translateX(-50%); }
}

/* ==========================================================================
   20. Technology
   ========================================================================== */

.aa-tools {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: clamp(14px, 1.8vw, 22px);
}

.aa-tool {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3vw, 36px);
	border-radius: var(--r-lg);
	border: 1px solid var(--line-dark);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
	overflow: hidden;
	transition: border-color 0.5s var(--ease-out), transform 0.6s var(--ease-out),
		box-shadow 0.5s var(--ease-out);
}
.aa-tool:hover {
	border-color: rgba(120, 186, 240, 0.44);
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

.aa-tool-kicker {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--azure-400);
	margin-bottom: 14px;
}

.aa-tool-name {
	font-size: clamp(1.2rem, 1.8vw, 1.45rem);
	color: #fff;
	margin-bottom: 10px;
}

.aa-tool-body {
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--text-on-dark-dim);
	flex: 1;
	margin-bottom: 22px;
}

/* A hexagon watermark in the corner of each tool card. */
.aa-tool::after {
	content: "";
	position: absolute;
	right: -30px; bottom: -30px;
	width: 130px; height: 130px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 68'%3E%3Cpath d='M30 2 L58 18 L58 50 L30 66 L2 50 L2 18 Z' fill='none' stroke='%232491EB' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
	opacity: 0.1;
	transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
	pointer-events: none;
}
.aa-tool:hover::after { opacity: 0.22; transform: rotate(18deg) scale(1.08); }

/* Feature and benefit lists on the tool detail pages. */
.aa-deflist { display: grid; gap: clamp(12px, 1.4vw, 18px); }
.aa-deflist-row {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
	gap: clamp(16px, 3vw, 40px);
	padding: clamp(20px, 2.4vw, 28px) 0;
	border-top: 1px solid var(--line-dark-soft);
	align-items: start;
}
.aa-deflist-row:last-child { border-bottom: 1px solid var(--line-dark-soft); }
.aa-deflist-term {
	font-family: var(--font-display);
	font-size: clamp(1.02rem, 1.5vw, 1.2rem);
	font-weight: 600;
	letter-spacing: -0.024em;
	color: #fff;
}
.aa-deflist-desc { font-size: 0.95rem; line-height: 1.62; color: var(--text-on-dark-dim); }

/* ==========================================================================
   21. Forms
   ========================================================================== */

.aa-form { display: grid; gap: 18px; }
.aa-field { display: grid; gap: 8px; }
.aa-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.aa-label {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--text-on-dark-dim);
}
.aa-label .aa-req { color: var(--gold-400); }

.aa-input,
.aa-select,
.aa-textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--r-md);
	border: 1px solid var(--line-dark);
	background: rgba(255, 255, 255, 0.035);
	color: var(--text-on-dark);
	font: inherit;
	font-size: 0.95rem;
	transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out),
		box-shadow 0.4s var(--ease-out);
	appearance: none;
}
.aa-input::placeholder, .aa-textarea::placeholder { color: var(--text-on-dark-faint); }
.aa-input:focus, .aa-select:focus, .aa-textarea:focus {
	outline: none;
	border-color: var(--gold-400);
	background: rgba(255, 255, 255, 0.07);
	box-shadow: 0 0 0 4px rgba(255, 221, 85, 0.1);
}
.aa-textarea { min-height: 128px; resize: vertical; }

.aa-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2378BAF0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	padding-right: 42px;
}
.aa-select option { background: var(--navy-800); color: var(--text-on-dark); }

/* Checkbox and radio pills */
.aa-options { display: flex; flex-wrap: wrap; gap: 8px; }
.aa-option { position: relative; }
.aa-option input {
	position: absolute;
	opacity: 0;
	width: 100%; height: 100%;
	inset: 0;
	cursor: pointer;
	margin: 0;
}
.aa-option span {
	display: block;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid var(--line-dark);
	background: rgba(255, 255, 255, 0.03);
	font-size: 0.88rem;
	color: var(--text-on-dark-dim);
	transition: all 0.35s var(--ease-out);
	pointer-events: none;
}
.aa-option input:checked + span {
	border-color: var(--gold-400);
	background: rgba(255, 221, 85, 0.13);
	color: var(--gold-300);
	font-weight: 500;
}
.aa-option input:focus-visible + span { outline: 2px solid var(--gold-400); outline-offset: 2px; }

/* The honeypot. It has to be hidden here, in CSS that always loads. */
.aa-hp {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.aa-form-note { font-size: 0.82rem; color: var(--text-on-dark-faint); }

/* Contact details rail */
.aa-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(28px, 5vw, 68px);
	align-items: start;
}

.aa-detail { padding-block: 22px; border-top: 1px solid var(--line-dark-soft); }
.aa-detail:first-of-type { border-top: 0; padding-top: 0; }
.aa-detail-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--azure-300);
	margin-bottom: 12px;
}
.aa-detail-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-block: 7px;
	font-size: 0.95rem;
}
.aa-detail-row dt { color: var(--text-on-dark-dim); }
.aa-detail-row dd { margin: 0; font-weight: 600; color: #fff; }
.aa-detail-row a:hover { color: var(--gold-400); }

.aa-form-card {
	padding: clamp(26px, 3.4vw, 44px);
	border-radius: var(--r-xl);
	border: 1px solid var(--line-dark);
	background: linear-gradient(165deg, rgba(17, 65, 127, 0.36), rgba(4, 22, 47, 0.7));
}

/* ==========================================================================
   22. Blog
   ========================================================================== */

.aa-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(16px, 2vw, 26px);
}

.aa-post {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--r-lg);
	border: 1px solid var(--line-dark);
	background: rgba(255, 255, 255, 0.03);
	overflow: hidden;
	transition: border-color 0.5s var(--ease-out), transform 0.6s var(--ease-out),
		box-shadow 0.5s var(--ease-out);
}
.aa-post:hover {
	border-color: rgba(255, 221, 85, 0.34);
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

.aa-post-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-700); }
.aa-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.aa-post:hover .aa-post-media img { transform: scale(1.055); }

.aa-post-body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; flex: 1; }

.aa-post-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--azure-300);
	margin-bottom: 14px;
}
.aa-post-meta span + span::before { content: "·"; margin-right: 10px; color: var(--text-on-dark-faint); }

.aa-post-title {
	font-size: clamp(1.1rem, 1.6vw, 1.32rem);
	color: #fff;
	margin-bottom: 11px;
	letter-spacing: -0.028em;
}
.aa-post-excerpt { font-size: 0.93rem; line-height: 1.6; color: var(--text-on-dark-dim); flex: 1; }
.aa-post-more { margin-top: 20px; }

/* The whole card is clickable, but the anchor stays on the title so the
   accessible name of the link is the article's own headline. */
.aa-post-link::after { content: ""; position: absolute; inset: 0; }

.aa-post-feature {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 0;
	border-radius: var(--r-xl);
	overflow: hidden;
	border: 1px solid var(--line-dark);
	background: linear-gradient(150deg, rgba(17, 65, 127, 0.4), rgba(4, 22, 47, 0.75));
	margin-bottom: clamp(32px, 4vw, 52px);
	position: relative;
}
.aa-post-feature .aa-post-media { aspect-ratio: auto; min-height: 280px; }
.aa-post-feature .aa-post-body { padding: clamp(28px, 4vw, 52px); justify-content: center; }
.aa-post-feature .aa-post-title { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }

/* Long-form article body, the one place on this site where prose runs long. */
.aa-prose { max-width: 68ch; margin-inline: auto; font-size: 1.05rem; line-height: 1.75; }
.aa-prose > * + * { margin-top: 1.35em; }
.aa-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2em; color: #fff; }
.aa-prose h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); margin-top: 1.7em; color: #fff; }
.aa-prose p { color: var(--text-on-dark-dim); }
.aa-prose a { color: var(--azure-300); text-decoration: underline; text-underline-offset: 3px; }
.aa-prose a:hover { color: var(--gold-400); }
.aa-prose strong { color: #fff; font-weight: 600; }
.aa-prose ul, .aa-prose ol { display: grid; gap: 0.7em; padding-left: 1.3em; }
.aa-prose ul { list-style: disc; }
.aa-prose ol { list-style: decimal; }
.aa-prose li { color: var(--text-on-dark-dim); }
.aa-prose li::marker { color: var(--gold-400); }
.aa-prose blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 26px;
	border-left: 2px solid var(--gold-400);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.2rem;
	color: var(--gold-300);
}
.aa-prose img, .aa-prose figure { border-radius: var(--r-lg); overflow: hidden; }
.aa-prose hr { border: 0; height: 1px; background: var(--line-dark); margin: 2.4em 0; }
.aa-prose code {
	font-size: 0.9em;
	padding: 2px 6px;
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.07);
}

/* ==========================================================================
   23. Closing CTA band
   ========================================================================== */

.aa-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(82px, 11vw, 160px);
	text-align: center;
	background:
		radial-gradient(90% 120% at 50% 110%, var(--navy-700) 0%, transparent 64%),
		var(--ink);
}

.aa-cta-orb {
	position: absolute;
	left: 50%; bottom: -46%;
	width: min(900px, 130vw);
	aspect-ratio: 1;
	translate: -50% 0;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 221, 85, 0.16) 0%, transparent 58%);
	filter: blur(32px);
	animation: aa-breathe 11s var(--ease-in-out) infinite;
}
@keyframes aa-breathe {
	0%, 100% { transform: translate(-50%, 0) scale(1); opacity: 0.85; }
	50% { transform: translate(-50%, -3%) scale(1.07); opacity: 1; }
}

.aa-cta-inner { position: relative; z-index: 1; }
.aa-cta-title {
	font-size: clamp(2.1rem, 5.2vw, 4.1rem);
	letter-spacing: -0.04em;
	max-width: 17ch;
	margin-inline: auto;
}
.aa-cta-body {
	margin: 24px auto 38px;
	max-width: 52ch;
	font-size: clamp(1rem, 1.5vw, 1.18rem);
	color: var(--text-on-dark-dim);
}
.aa-cta .aa-kicker { justify-content: center; }

/* ==========================================================================
   24. Newsletter strip
   ========================================================================== */

.aa-news {
	position: relative;
	padding-block: clamp(52px, 6vw, 82px);
	border-top: 1px solid var(--line-dark-soft);
	background: var(--navy-900);
}
.aa-news-inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.aa-news-title { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.aa-news-body { margin-top: 10px; color: var(--text-on-dark-dim); font-size: 0.98rem; }

/*
 * One line, always. Wrapping put the field and the button on separate flex
 * lines, where they stretched independently and stopped matching heights.
 * Below 480px they stack deliberately, both full width.
 */
.aa-news-form { display: flex; gap: 10px; flex-wrap: nowrap; align-items: stretch; }
.aa-news-form .aa-input { flex: 1 1 auto; min-width: 0; border-radius: 999px; }
.aa-news-form .aa-btn { flex: none; }

@media (max-width: 480px) {
	.aa-news-form { flex-wrap: wrap; }
	/* Stacked, the field and the button are the same size as each other. */
	.aa-news-form .aa-input,
	.aa-news-form .aa-btn { flex: 1 1 100%; min-height: 56px; }
}

/* ==========================================================================
   25. Footer
   ========================================================================== */

.aa-footer {
	position: relative;
	background: var(--ink);
	border-top: 1px solid var(--line-dark-soft);
	padding-block: clamp(56px, 7vw, 88px) 34px;
	overflow: hidden;
}

.aa-footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) repeat(auto-fit, minmax(140px, 1fr));
	gap: clamp(28px, 4vw, 56px);
	padding-bottom: clamp(40px, 5vw, 62px);
	border-bottom: 1px solid var(--line-dark-soft);
}

.aa-footer-brand img { height: 42px; width: auto; margin-bottom: 20px; }
.aa-footer-blurb {
	font-size: 0.93rem;
	line-height: 1.62;
	color: var(--text-on-dark-dim);
	max-width: 38ch;
}

.aa-footer-col h3 {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--azure-300);
	margin-bottom: 18px;
}
.aa-footer-col ul { display: grid; gap: 11px; }
.aa-footer-col a {
	font-size: 0.92rem;
	color: var(--text-on-dark-dim);
	transition: color 0.3s var(--ease-out), padding-left 0.35s var(--ease-out);
}
.aa-footer-col a:hover { color: #fff; padding-left: 5px; }

.aa-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-top: 28px;
	font-size: 0.84rem;
	color: var(--text-on-dark-faint);
}
.aa-footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.aa-footer-legal a:hover { color: #fff; }

.aa-social { display: flex; gap: 10px; }
.aa-social a {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid var(--line-dark);
	color: var(--text-on-dark-dim);
	transition: all 0.4s var(--ease-out);
}
.aa-social a:hover {
	color: var(--navy-900);
	background: var(--gold-400);
	border-color: var(--gold-400);
	transform: translateY(-2px);
}
.aa-social svg { width: 16px; height: 16px; }

/* An oversized wordmark bled off the bottom edge, at very low contrast. */
.aa-footer-mark {
	position: absolute;
	left: 50%; bottom: -3.5vw;
	translate: -50% 0;
	font-family: var(--font-display);
	font-size: clamp(4rem, 15vw, 13rem);
	font-weight: 700;
	letter-spacing: -0.06em;
	line-height: 1;
	color: rgba(120, 186, 240, 0.045);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	z-index: 0;
}
.aa-footer > .aa-shell { position: relative; z-index: 1; }

/* ==========================================================================
   26. Booking modal
   ========================================================================== */

.aa-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	padding: clamp(12px, 3vw, 40px);
}
.aa-modal[hidden] { display: none; }

.aa-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 11, 27, 0.78);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity 0.45s var(--ease-out);
	width: 100%;
	height: 100%;
}
.aa-modal.is-open .aa-modal-backdrop { opacity: 1; }

.aa-modal-panel {
	position: relative;
	width: min(920px, 100%);
	max-height: min(90vh, 900px);
	border-radius: var(--r-xl);
	background: var(--paper);
	overflow: hidden;
	box-shadow: 0 50px 110px -40px rgba(2, 11, 27, 0.95);
	opacity: 0;
	transform: translateY(18px) scale(0.985);
	transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.aa-modal.is-open .aa-modal-panel { opacity: 1; transform: none; }

.aa-modal-close {
	position: absolute;
	top: 12px; right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(4, 22, 47, 0.08);
	color: var(--navy-900);
	transition: background-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.aa-modal-close:hover { background: rgba(4, 22, 47, 0.16); transform: rotate(90deg); }
.aa-modal-close svg { width: 17px; height: 17px; }

.aa-modal-body { min-height: 620px; }
.aa-modal-body iframe { width: 100%; border: 0; display: block; min-height: 620px; }

@media (max-width: 640px) {
	.aa-modal { padding: 0; }
	.aa-modal-panel { width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
	.aa-modal-body, .aa-modal-body iframe { min-height: 100vh; }
}

/* ==========================================================================
   27. 404 and search
   ========================================================================== */

.aa-void {
	min-height: 78vh;
	display: grid;
	place-items: center;
	text-align: center;
	padding-top: var(--header-h);
}
.aa-void-code {
	font-family: var(--font-display);
	font-size: clamp(5rem, 20vw, 14rem);
	font-weight: 700;
	line-height: 0.85;
	letter-spacing: -0.06em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(120, 186, 240, 0.32);
	margin-bottom: 22px;
}

/* ==========================================================================
   28. Responsive
   ========================================================================== */

@media (max-width: 1140px) {
	.aa-nav, .aa-signin { display: none; }
	.aa-burger { display: grid; }
	.aa-header-actions { margin-left: auto; }
	.aa-contact-grid { grid-template-columns: 1fr; }
	.aa-deflist-row { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 860px) {
	:root { --header-h: 72px; }
	.aa-split-flip > *:first-child { order: 0; }
	.aa-hero-title { max-width: none; }
	.aa-footer-top { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	.aa-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	/*
	 * The brand lockup, the gold CTA and the menu button together overrun the
	 * bar on a phone, which pushed the menu button past the right edge where
	 * body overflow-x hid it entirely. The CTA yields: it is one tap away in
	 * the drawer and it repeats in the hero directly below.
	 */
	.aa-header-inner { gap: 14px; }
	.aa-brand img { height: 30px; }
	.aa-header.is-scrolled .aa-brand img { height: 27px; }
	.aa-header-actions > .aa-btn { display: none; }
}

@media (max-width: 640px) {
	body { font-size: 16px; }
	.aa-section { padding-block: clamp(58px, 13vw, 84px); }
	.aa-field-row { grid-template-columns: 1fr; }
	.aa-hero-stats { grid-template-columns: 1fr 1fr; }
	.aa-strategy-grid { grid-template-columns: 1fr; }
	.aa-search { margin-left: 0; width: 100%; }
	.aa-filters { gap: 6px; }
	.aa-chip { padding: 8px 14px; font-size: 0.82rem; }
	.aa-footer-bottom { flex-direction: column; align-items: flex-start; }
	.aa-figure-range { font-size: clamp(2rem, 11vw, 3rem); }
	.aa-step { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 420px) {
	.aa-hero-actions .aa-btn { width: 100%; }
}

/* ==========================================================================
   29. Reduced motion
   Everything that moves on its own stops. The reveal system is opt-in from
   JavaScript and is never enabled in this mode, so nothing needs undoing
   here beyond the ambient animations.
   ========================================================================== */

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

	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.aa-hex-field, .aa-cta-orb, .aa-marquee-track { animation: none; }
	.aa-marquee-track { transform: none; }
	.aa-hero-lattice { display: none; }
	.aa-hero-plate { opacity: 0.5 !important; }
	[data-aa-tilt] { transform: none !important; }
}

/* ==========================================================================
   30. Print
   ========================================================================== */

@media print {
	.aa-header, .aa-drawer, .aa-modal, .aa-cta, .aa-news, .aa-hero-lattice,
	.aa-hex-field, .aa-footer-mark { display: none !important; }
	body { background: #fff; color: #000; }
	.aa-hero { min-height: 0; padding-block: 24px; background: none; }
	.aa-card, .aa-path, .aa-quote { break-inside: avoid; border-color: #ccc; }
}

/* ==========================================================================
   31. Schedule a Call
   The one page every call to action on the site lands on, so the form sits in
   the hero rather than below it. No scrolling between wanting to act and
   being able to.
   ========================================================================== */

.aa-hero-split {
	align-items: flex-start;
	min-height: 0;
	padding-bottom: clamp(64px, 8vw, 110px);
}

.aa-book-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
	width: 100%;
}

.aa-book-pitch .aa-h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); }
.aa-book-pitch .aa-lede { margin-top: 20px; }

.aa-book-points { margin-top: clamp(28px, 3.4vw, 40px); gap: 16px; }
.aa-book-points li { font-size: 0.95rem; }

.aa-book-alt {
	margin-top: clamp(28px, 3.4vw, 40px);
	padding-top: 24px;
	border-top: 1px solid var(--line-dark-soft);
}
.aa-book-alt-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--azure-300);
	margin-bottom: 8px;
}
.aa-book-alt-rows { margin: 0; }

/* The form card carries its own scroll anchor: a failed submit returns to the
   top of the page, and this is what the visitor needs to see first. */
.aa-book-form { scroll-margin-top: 110px; }

/* ==========================================================================
   32. Form chrome shared by the contact and booking pages
   ========================================================================== */

.aa-form-title {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2vw, 1.55rem);
	font-weight: 700;
	letter-spacing: -0.028em;
	line-height: 1.1;
	color: #fff;
	margin-bottom: 8px;
}

.aa-form-note { font-size: 0.82rem; color: var(--text-on-dark-faint); margin-bottom: 26px; }
.aa-req { color: var(--gold-400); }

.aa-form-flash {
	margin-bottom: 18px;
	padding: 13px 16px;
	border-radius: var(--r-md);
	font-size: 0.9rem;
	line-height: 1.5;
	border: 1px solid transparent;
}
.aa-form-flash.is-good {
	background: rgba(52, 199, 123, 0.12);
	border-color: rgba(52, 199, 123, 0.4);
	color: #9EE9C4;
}
.aa-form-flash.is-bad {
	background: rgba(255, 107, 107, 0.12);
	border-color: rgba(255, 107, 107, 0.4);
	color: #FFB3B3;
}

/* Replaces the inline width:100% that was repeated on submit buttons. */
.aa-btn-block { width: 100%; }

@media (max-width: 900px) {
	.aa-book-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   33. Mobile touch and fit corrections
   Found by auditing every layout at 1440, 768 and 375.
   ========================================================================== */

@media (max-width: 560px) {
	/*
	 * "Charitable Planning / Regular Planning / Qualified Planning" cannot fit
	 * across 375px, and a horizontally scrolling pill bar hides two of the
	 * three families behind a gesture nobody is told about. The section
	 * heading already establishes that these are planning families, so the
	 * word is redundant at this width.
	 */
	.aa-tab-word { display: none; }

	/*
	 * Three equal columns rather than a scrolling strip. Even shortened, the
	 * three labels cannot fit a 375px row as flex items, and letting the strip
	 * scroll hid the third family behind a gesture nobody is told about.
	 */
	.aa-tablist {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: 100%;
		gap: 3px;
		padding: 4px;
		overflow: visible;
	}
	.aa-tab {
		min-width: 0;
		min-height: 44px;
		padding: 11px 4px;
		font-size: 0.8rem;
		gap: 5px;
		justify-content: center;
	}
	.aa-tab-count {
		min-width: 0;
		height: auto;
		padding: 0;
		font-size: 0.66rem;
		background: transparent;
		opacity: 0.65;
	}
	/*
	 * The sliding pill is measured from offsetLeft, which no longer describes a
	 * grid track cleanly. The active tab carries its own background instead.
	 */
	.aa-tab-pill { display: none; }
	.aa-tab.is-active { background: var(--gold-400); border-radius: 999px; }
	.aa-tab.is-active .aa-tab-count { opacity: 0.8; }

	/* Anything tappable clears the 44px target minimum. */
	.aa-btn, .aa-chip { min-height: 44px; }
	.aa-btn-sm { min-height: 40px; }
}

/* ==========================================================================
   34. Utilities
   These replace inline style attributes that had accumulated across the
   templates. The same spacing was being written as a literal in several
   files, which is how two sections end up 4px apart for no reason.
   ========================================================================== */

/* A hero with no stats and no lede: page title only. */
.aa-hero-compact {
	min-height: auto;
	padding-bottom: clamp(40px, 5vw, 64px);
}

/* Section that follows a compact hero, so the two do not double up on space. */
.aa-section-tight-top { padding-top: clamp(40px, 5vw, 64px); }
.aa-section-flush-top { padding-top: 0; }
.aa-section-slim { padding-block: clamp(40px, 5vw, 64px); }

/* A centred call to action closing a section. */
.aa-center-cta {
	margin-top: clamp(32px, 4vw, 44px);
	text-align: center;
}

.aa-center { text-align: center; }
.aa-center-flex { display: flex; justify-content: center; }

/* The hexagon plate standing in for a missing post thumbnail. */
.aa-post-fallback {
	position: absolute;
	inset: 0;
	opacity: 0.45;
}

.aa-lede-center {
	margin-top: clamp(32px, 4vw, 44px);
	margin-inline: auto;
	text-align: center;
}


/* ==========================================================================
   35. Team biography modal
   The live site opens each biography in a centred overlay card rather than
   expanding it in place, which keeps the grid from jumping when a card in the
   middle of a row grows by three paragraphs. Same behaviour here.
   ========================================================================== */

.aa-bio-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	padding: clamp(12px, 4vw, 48px);
}
.aa-bio-modal[hidden] { display: none; }

.aa-bio-backdrop {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	background: rgba(2, 11, 27, 0.8);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity 0.45s var(--ease-out);
}
.aa-bio-modal.is-open .aa-bio-backdrop { opacity: 1; }

.aa-bio-panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	width: min(880px, 100%);
	max-height: min(88vh, 720px);
	border-radius: var(--r-xl);
	border: 1px solid var(--line-dark);
	background: linear-gradient(165deg, rgba(17, 65, 127, 0.5), var(--navy-900) 60%);
	overflow: hidden;
	box-shadow: 0 50px 110px -40px rgba(2, 11, 27, 0.95);
	opacity: 0;
	transform: translateY(18px) scale(0.985);
	transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.aa-bio-modal.is-open .aa-bio-panel { opacity: 1; transform: none; }

.aa-bio-media { position: relative; background: var(--navy-700); }
.aa-bio-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 22%;
}
.aa-bio-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 60%, rgba(4, 22, 47, 0.5));
	pointer-events: none;
}

.aa-bio-content {
	padding: clamp(26px, 3.4vw, 44px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.aa-bio-metric {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	margin-bottom: 18px;
	padding: 6px 13px;
	border-radius: 999px;
	background: rgba(255, 221, 85, 0.12);
	border: 1px solid rgba(255, 221, 85, 0.28);
	font-size: 0.76rem;
	color: var(--gold-300);
}
.aa-bio-metric b { font-family: var(--font-display); font-weight: 700; color: var(--gold-400); }

.aa-bio-name {
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.032em;
	line-height: 1.05;
	color: #fff;
}
.aa-bio-role {
	margin-top: 7px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--azure-300);
}

.aa-bio-text {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--line-dark-soft);
	display: grid;
	gap: 14px;
	font-size: 0.94rem;
	line-height: 1.68;
	color: var(--text-on-dark-dim);
}

.aa-bio-close {
	position: absolute;
	top: 14px; right: 14px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid var(--line-dark);
	background: rgba(2, 11, 27, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff;
	transition: background-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.aa-bio-close:hover { background: var(--gold-400); color: var(--navy-900); transform: rotate(90deg); }
.aa-bio-close svg { width: 17px; height: 17px; }

@media (max-width: 760px) {
	.aa-bio-panel {
		grid-template-columns: 1fr;
		max-height: 92vh;
	}
	/* The portrait becomes a banner so the biography still gets the room. */
	.aa-bio-media { height: 210px; }
	.aa-bio-media::after {
		background: linear-gradient(180deg, transparent 40%, var(--navy-900));
	}
}

/* ==========================================================================
   36. One text edge per column
   In a prose column the heading, the lede and the body text all start on the
   same vertical line. A flex bullet row broke that: the tick took a 32px
   gutter and every line of the item sat 32px to the right of the heading,
   giving the column two competing left edges.
   The tick is now an inline marker on the first line, so wrapped lines return
   to the column edge and the block reads flush.
   ========================================================================== */

/*
 * A marker sharing the line with the text can only ever push that text to the
 * right of the heading. So the marker leaves the text column: it hangs in the
 * margin, every line of every item starts on the heading's edge, and the
 * column reads as one block.
 *
 * Only above 900px, where the space to the left of the column is guaranteed —
 * a 72px grid gap beside the split body, the page gutter beside the booking
 * column. Below that the marker returns to the flow, where a normal indent is
 * the right answer anyway.
 */
@media (min-width: 900px) {
	.aa-split-body .aa-path-list,
	.aa-book-points { margin-left: -31px; }

	.aa-split-body .aa-path-list li,
	.aa-book-points li {
		position: relative;
		display: block;
		padding-left: 31px;
	}

	.aa-split-body .aa-path-list .aa-tick,
	.aa-book-points .aa-tick {
		position: absolute;
		left: 0;
		top: 2px;
		margin: 0;
	}
}