/*
Theme Name: KRM Capital Block Theme
Theme URI: https://agileangel.com/
Author: Zambezi Creative
Author URI: https://zambezicreative.com/
Description: A Gutenberg-first block theme for the KRM Capital site.
Version: 3.8.1
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: agileangel
License: GPL-2.0-or-later
*/

:root {
	--aa-navy-950: #010815;
	--aa-navy-900: #020d22;
	--aa-navy-800: #05204b;
	--aa-blue: #278cff;
	--aa-blue-soft: #62b1ff;
	--aa-ink: #06142e;
	--aa-muted: #60708b;
	--aa-line: #d9e2f0;
	--aa-surface: #f4f7fb;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { text-underline-offset: 0.18em; }

.aa-site-header {
	position: relative;
	z-index: 40;
	background: linear-gradient(180deg, rgba(1, 8, 21, 0.99), rgba(2, 13, 34, 0.96));
	border-bottom: 1px solid rgba(98, 177, 255, 0.16);
}

.home .aa-site-header {
	position: absolute;
	inset: 0 0 auto;
	background: linear-gradient(180deg, rgba(1, 8, 21, 0.82), transparent);
	border-bottom: 0;
}

.aa-header-inner {
	min-height: 96px;
}

.aa-logo-link {
	display: inline-flex;
	width: min(220px, 42vw);
	color: #fff;
}

.aa-logo-link svg {
	display: block;
	width: 100%;
	height: auto;
overflow: visible;
}

.aa-site-header .wp-block-navigation-item__content {
	position: relative;
	padding: 0.75rem 0;
	color: #fff;
	text-decoration: none;
}

.aa-site-header .wp-block-navigation-item__content::after {
	position: absolute;
	right: 50%;
	bottom: 0.25rem;
	left: 50%;
	height: 2px;
	content: "";
	background: var(--aa-blue);
	transition: right 180ms ease, left 180ms ease;
}

.aa-site-header .wp-block-navigation-item__content:hover::after,
.aa-site-header .wp-block-navigation-item__content:focus-visible::after,
.aa-site-header .current-menu-item .wp-block-navigation-item__content::after {
	right: 0;
	left: 0;
}

.aa-page-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	align-items: end;
	min-height: clamp(310px, 42vw, 500px);
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(circle at 72% 54%, rgba(39, 140, 255, 0.28), transparent 23%),
		linear-gradient(115deg, #020b1c 0%, #061a3b 62%, #03235a 100%);
}

.aa-page-hero::before,
.aa-page-hero::after {
	position: absolute;
	z-index: -1;
	content: "";
	pointer-events: none;
}

.aa-page-hero::before {
	inset: 0;
	opacity: 0.34;
	background-image:
		radial-gradient(circle, #54a8ff 0 1px, transparent 2px),
		linear-gradient(115deg, transparent 49.3%, rgba(84, 168, 255, 0.18) 49.7%, transparent 50.2%);
	background-size: 74px 74px, 164px 164px;
	mask-image: linear-gradient(90deg, transparent, #000 55%);
}

.aa-page-hero::after {
	right: -11vw;
	bottom: -28vw;
	width: min(760px, 72vw);
	aspect-ratio: 1;
	border: 2px solid rgba(82, 162, 255, 0.55);
	border-radius: 50%;
	box-shadow: 0 0 55px rgba(39, 140, 255, 0.25), inset 0 0 55px rgba(39, 140, 255, 0.18);
}

.aa-page-hero__inner {
	width: min(90%, 1320px);
	margin-inline: auto;
	padding: clamp(5rem, 9vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.aa-page-hero h1 {
	max-width: 980px;
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(3rem, 6vw, 6rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.035em;
}

.aa-page-hero .aa-eyebrow { color: var(--aa-blue-soft); }

.aa-eyebrow {
	margin: 0 0 0.85rem;
	font-size: 0.78rem;
	font-weight: 750;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #1878e9;
}

.aa-accent-rule {
	display: block;
	width: 58px;
	height: 3px;
	margin: 1.7rem 0 0;
	border: 0;
	opacity: 1;
	background: var(--aa-blue);
}

.aa-section {
	padding-top: clamp(4rem, 7vw, 7rem);
	padding-bottom: clamp(4rem, 7vw, 7rem);
}

.aa-section--soft { background: var(--aa-surface); }
.aa-section--dark { color: #fff; background: var(--aa-navy-900); }

.aa-copy {
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.78;
	color: #253752;
}

.aa-copy p { margin-top: 0; margin-bottom: 1.35em; }

.aa-section-title {
	margin-top: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.25rem, 4vw, 4rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

.aa-section-title strong { color: #1779ec; }

.aa-testimonial-grid { align-items: stretch; }


.aa-strategy-card {
	height: 100%;
	padding: clamp(1.75rem, 4vw, 3rem);
	background: #fff;
	border: 1px solid var(--aa-line);
	border-top: 3px solid var(--aa-blue);
	box-shadow: 0 18px 50px rgba(5, 31, 71, 0.07);
}

.aa-strategy-card h2,
.aa-strategy-card h3 {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 500;
}

.aa-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(3.5rem, 7vw, 6rem) 5%;
	text-align: center;
	color: #fff;
	background: linear-gradient(135deg, #03142f, #062c69);
}

.aa-cta::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	content: "";
	opacity: 0.25;
	background-image: radial-gradient(circle, #5eafff 0 1px, transparent 2px);
	background-size: 60px 60px;
}

.aa-cta h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(2.3rem, 4.5vw, 4.5rem);
	font-weight: 500;
}

.aa-cta p { margin: 0.75rem auto 1.6rem; opacity: 0.82; }

.aa-news-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.aa-news-grid .wp-block-post {
	padding: 1.7rem;
	background: #fff;
	border: 1px solid var(--aa-line);
	border-radius: 8px;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.aa-news-grid .wp-block-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 46px rgba(8, 35, 77, 0.12);
}

.aa-news-grid .wp-block-post-title a { text-decoration: none; }

.aa-site-footer {
	color: rgba(255, 255, 255, 0.72);
	background: #010817;
	border-top: 1px solid rgba(98, 177, 255, 0.16);
}

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

.aa-footer-grid {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

@media (max-width: 900px) {
	.aa-header-inner { min-height: 78px; }
	.aa-site-header .wp-block-navigation__responsive-container-open { color: #fff; }
	.aa-site-header .wp-block-navigation__responsive-container.is-menu-open {
		padding: 1.5rem;
		color: #fff;
		background: var(--aa-navy-950);
	}
	.aa-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: #fff; }
	.aa-news-grid .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.aa-page-hero { min-height: 300px; }
	.aa-news-grid .wp-block-post-template { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   Header navigation spacing.
   The generated layout class that carries blockGap is a single-class selector,
   so this two-class rule wins — which keeps the spacing correct even if the
   header template part has been edited in the Site Editor.
   -------------------------------------------------------------------------- */

.aa-site-header nav.wp-block-navigation,
.aa-site-header .wp-block-navigation .wp-block-navigation__container {
	gap: clamp(1.75rem, 3.4vw, 3.5rem);
}

.aa-site-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-inline: 0.15rem;
	letter-spacing: 0.012em;
	white-space: nowrap;
}

/* Keep the logo from crowding the menu on mid-size screens. */
@media (min-width: 782px) and (max-width: 1200px) {
	.aa-logo-link { width: min(180px, 34vw); }
	.aa-site-header nav.wp-block-navigation,
	.aa-site-header .wp-block-navigation .wp-block-navigation__container { gap: clamp(1.25rem, 2.4vw, 2rem); }
}

/* ==========================================================================
   Interior page heroes — Portfolio, News, Investment Strategy
   ========================================================================== */

/*
 * The inner group uses a constrained layout, so WordPress caps its children at
 * the 780px contentSize and centres them. That is what pushes the label and
 * heading in from the left. Two classes beats WordPress's generated
 * .wp-container-xxx > * rule regardless of stylesheet order.
 */
.aa-page-hero .aa-page-hero__inner > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Hero band at 60% of the standard height. */
.aa-page-hero--tight {
	min-height: clamp(260px, 30vw, 380px);
}

/*
 * Top padding has to clear the nav, which is absolutely positioned over the
 * hero. The generic .aa-page-hero__inner clearance rule further down is a
 * single-class selector and loses to this two-class one, so the value is
 * restated here rather than relying on source order.
 */
.aa-page-hero--tight .aa-page-hero__inner {
	padding: clamp(7rem, 11vw, 9rem) 0 clamp(2.1rem, 4.2vw, 3.6rem);
}

/* Headings stay on a single line on desktop, as asked. */
.aa-page-hero--tight h1 {
	max-width: none;
	font-size: clamp(2.25rem, 4.4vw, 4rem);
	white-space: nowrap;
}

.aa-page-hero--tight .aa-accent-rule {
	margin-top: 1.15rem;
}

@media (max-width: 900px) {
	/* Below this the long titles cannot fit on one line — let them wrap. */
	.aa-page-hero--tight h1 {
		font-size: clamp(1.9rem, 6.4vw, 2.6rem);
		white-space: normal;
	}
}

/* ==========================================================================
   Header merged into the page heroes (Carlos, 5 Aug).

   Interior pages should not show a separate top bar — the menu sits inside
   the hero graphic, like the homepage. Rather than building a header into
   every hero and deleting the real one, the single site header is floated
   transparently over the hero. One header, still editable in one place, and
   the heroes below simply leave room for it.

   The homepage is untouched: the plugin already hides the standalone header
   there and renders its own copy inside the video container.
   ========================================================================== */

/*
 * Scoped with :has() so it only applies on templates that actually contain a
 * hero. Single posts, search and 404 have no hero for the nav to sit on, and
 * would have their content slide underneath an absolutely positioned header.
 */
.wp-site-blocks:has(.aa-page-hero) .aa-site-header,
.wp-site-blocks:has(.aa-about-hero) .aa-site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 30;
	background: transparent;
}

/* The heroes clear the overlaid nav instead of sliding under it. */
.aa-page-hero__inner {
	padding-top: clamp(8rem, 13vw, 11rem);
}

.aa-about-hero__grid {
	padding-top: clamp(5.5rem, 9vw, 8rem);
}

/* Compact heroes (contact) keep their reduced height but still clear the nav. */
.aa-page-hero--compact .aa-page-hero__inner {
	padding-top: clamp(6.5rem, 10vw, 8.5rem);
}

/* -------------------------------------------------- News list titles  */
/* Carlos: two pixels smaller, and less bold. */

.aa-news-grid .wp-block-post-title {
	font-size: calc(var(--wp--preset--font-size--large, 1.25rem) - 2px);
	font-weight: 400;
}

.aa-news-grid .wp-block-post-title a {
	font-weight: inherit;
}

/* ==========================================================================
   ABOUT PAGE

   Lives here rather than in a wp:html block on the page: a <style> tag inside
   a Custom HTML block never reaches the editor canvas, so the page would look
   broken while editing even though the front end was fine.

   Every rule is scoped under .aa-about-page. Class names like .aa-cta and
   .aa-accent-rule are shared with Investment Strategy, Portfolio and News,
   and these rules carry !important — unscoped they would override those pages.
   ========================================================================== */

.aa-about-page {
	--aa-navy: #071a33;
	--aa-ink: #0f2340;
	--aa-blue: #1878e9;
	--aa-blue-bright: #2994ff;
	--aa-copy: #3e4a5d;
	--aa-line: #dce4ef;
	overflow: clip;
	color: var(--aa-copy);
}

.aa-about-page *,
.aa-about-page *::before,
.aa-about-page *::after { box-sizing: border-box; }

.aa-about-page :where(h1, h2, h3, p, figure) { margin-top: 0; }
.aa-about-page :where(h1, h2, h3) { font-family: Georgia, "Times New Roman", serif; }

.aa-about-page .aa-label {
	margin: 0 0 14px !important;
	color: var(--aa-blue-bright) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	line-height: 1.2 !important;
	text-transform: uppercase;
}

.aa-about-page .aa-accent-rule {
	width: 46px !important;
	height: 3px !important;
	margin: 24px 0 !important;
	border: 0 !important;
	background: var(--aa-blue-bright) !important;
	opacity: 1 !important;
}

/* ------------------------------------------------------------------ Hero */

.aa-about-page .aa-about-hero {
	min-height: 660px;
	background-color: var(--aa-navy);
}

.aa-about-page .aa-about-hero__grid {
	width: min(1280px, 90vw);
	min-height: 660px;
	margin: 0 auto !important;
	/* Clears the navigation, which is positioned over the hero. */
	padding-top: 96px;
	gap: clamp(30px, 4vw, 64px) !important;
}

.aa-about-page .aa-about-hero__copy { position: relative; z-index: 3; }

.aa-about-page .aa-about-hero__title {
	margin: 0 !important;
	color: #fff !important;
	font-size: clamp(46px, 4.8vw, 68px) !important;
	font-weight: 400 !important;
	letter-spacing: -0.02em;
	line-height: 1.12 !important;
}

.aa-about-page .aa-about-hero__intro {
	max-width: 470px;
	margin: 0 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: clamp(16px, 1.25vw, 18px) !important;
	line-height: 1.75 !important;
}

/* ----------------------------------------------------- Hexagon photo cards */

.aa-about-page .aa-hexcluster {
	position: relative;
	width: 100%;
	max-width: 560px;
	height: 470px;
	margin: 0 0 0 auto !important;
}

/*
 * Each shape is a single Image block. clip-path discards borders, so the thin
 * blue edge is a gradient on the figure showing through 2px of padding, with
 * the image clipped to the same polygon inside it.
 */
.aa-about-page .aa-hex {
	position: absolute;
	width: 232px;
	aspect-ratio: 0.9;
	margin: 0 !important;
	padding: 2px;
	overflow: hidden;
	background: linear-gradient(155deg, rgba(116, 183, 255, 0.9), rgba(38, 92, 162, 0.45));
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.38));
}

.aa-about-page .aa-hex img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	transition: transform 0.35s ease;
}

.aa-about-page .aa-hex img:hover { transform: scale(1.04); }

/* An empty slot still shows the shape, so it is obvious where to upload. */
.aa-about-page .aa-hex:not(:has(img))::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(160deg, rgba(16, 47, 92, 0.92), rgba(8, 26, 54, 0.94));
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.aa-about-page .aa-hex--top { top: 0; left: 50%; transform: translateX(-50%); }

/*
 * Editor only.
 *
 * An empty Image block renders WordPress's media placeholder with its Upload
 * and Media Library buttons. Inside a 232px hexagon with clip-path and
 * overflow:hidden those controls get cut off, and the absolute positioning
 * stacks them on top of each other — so there is nothing clickable.
 *
 * .components-placeholder only ever exists in the block editor, never on the
 * front end, so it is a safe hook: while any slot is still empty, the cluster
 * falls back to a plain row of upload boxes. Fill all three and the editor
 * shows the real composition again.
 */
.aa-about-page .aa-hexcluster:has(.components-placeholder) {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	height: auto;
	max-width: 100%;
	margin: 0 !important;
}

.aa-about-page .aa-hex:has(.components-placeholder) {
	position: static;
	flex: 1 1 210px;
	width: auto;
	max-width: 260px;
	aspect-ratio: auto;
	min-height: 190px;
	padding: 0;
	overflow: visible;
	background: none;
	clip-path: none;
	filter: none;
	transform: none;
}

.aa-about-page .aa-hex:has(.components-placeholder)::before { content: none; }

/* Give the placeholder room to show its buttons. */
.aa-about-page .aa-hex .components-placeholder {
	min-height: 190px;
	background: rgba(16, 47, 92, 0.55);
	border: 1px dashed rgba(150, 200, 255, 0.7);
	color: #fff;
}
.aa-about-page .aa-hex--left { top: 200px; left: 3%; }
.aa-about-page .aa-hex--right { top: 200px; right: 3%; }

/* ------------------------------------------------ Biography and statistics */

.aa-about-page .aa-bio-grid { gap: clamp(48px, 6vw, 86px) !important; }

.aa-about-page .aa-bio-title {
	max-width: 720px;
	margin: 0 0 26px !important;
	color: var(--aa-ink) !important;
	font-size: clamp(36px, 3.6vw, 52px) !important;
	font-weight: 500 !important;
	letter-spacing: -0.025em;
	line-height: 1.08 !important;
}

.aa-about-page .aa-bio-copy {
	max-width: none !important;
	color: var(--aa-copy) !important;
	font-size: 16px !important;
	line-height: 1.72 !important;
}

.aa-about-page .aa-bio-copy p { margin-bottom: 1.25em; }
.aa-about-page .aa-bio-copy p:last-child { margin-bottom: 0; }
.aa-about-page .aa-bio-copy a { color: #176fd4; }

.aa-about-page .aa-stat-stack {
	padding-left: clamp(26px, 3vw, 48px);
	border-left: 1px solid var(--aa-line);
}

.aa-about-page .aa-stat {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: 22px !important;
	margin: 0 !important;
	padding: 28px 0;
	border-bottom: 1px solid var(--aa-line);
}

.aa-about-page .aa-stat:first-child { padding-top: 8px; }
.aa-about-page .aa-stat:last-child { border-bottom: 0; }

.aa-about-page .aa-stat__icon {
	flex: 0 0 44px;
	width: 44px;
	margin: 2px 0 0 !important;
}

.aa-about-page .aa-stat__icon img {
	display: block;
	width: 44px !important;
	height: 44px !important;
	object-fit: contain;
}

.aa-about-page .aa-stat__icon:not(:has(img))::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	border: 2px solid var(--aa-blue);
	border-radius: 50%;
	opacity: 0.4;
}

.aa-about-page .aa-stat__body { flex: 1 1 auto; min-width: 0; margin: 0 !important; }

.aa-about-page .aa-stat__figure {
	margin: 0 0 6px !important;
	color: var(--aa-blue) !important;
	font-size: clamp(30px, 3vw, 42px) !important;
	font-weight: 500 !important;
	line-height: 1 !important;
}

.aa-about-page .aa-stat__label {
	max-width: 210px;
	margin: 0 !important;
	color: var(--aa-ink) !important;
	font-size: 16px !important;
	line-height: 1.45 !important;
}

/* ------------------------------------------------------------------- CTA */

.aa-about-page .aa-cta {
	background-color: var(--aa-navy);
	background-position: center;
	background-size: cover;
	color: #fff;
}

.aa-about-page .aa-cta__inner { padding: 76px 5%; }

.aa-about-page .aa-cta__icon { width: 46px; margin: 0 auto 14px !important; }

.aa-about-page .aa-cta__icon img {
	display: block;
	width: 46px !important;
	height: 46px !important;
	margin: 0 auto;
}

.aa-about-page .aa-cta__icon:not(:has(img))::before {
	content: "";
	display: block;
	width: 46px;
	height: 46px;
	margin: 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
}

.aa-about-page .aa-cta h2 {
	margin: 0 0 8px !important;
	color: #fff !important;
	font-size: clamp(34px, 4vw, 48px) !important;
	font-weight: 400 !important;
	line-height: 1.1 !important;
}

.aa-about-page .aa-cta p {
	margin: 0 0 26px !important;
	color: rgba(255, 255, 255, 0.9) !important;
	font-size: 17px !important;
}

.aa-about-page .aa-btn-solid .wp-block-button__link {
	padding: 14px 30px !important;
	border: 0 !important;
	border-radius: 4px !important;
	background: var(--aa-blue) !important;
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.aa-about-page .aa-btn-solid .wp-block-button__link:hover {
	background: #0f65c7 !important;
	transform: translateY(-1px);
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1080px) {
	.aa-about-page .aa-about-hero__grid { width: min(1180px, 92vw); }
	.aa-about-page .aa-hexcluster { transform: scale(0.86); transform-origin: right center; }
	.aa-about-page .aa-bio-grid { gap: 44px !important; }
}

@media (max-width: 781px) {
	.aa-about-page .aa-about-hero { min-height: auto; }

	.aa-about-page .aa-about-hero__grid {
		width: 100%;
		min-height: auto;
		padding: 120px 6% 48px;
	}

	.aa-about-page .aa-about-hero__grid > .wp-block-column { flex-basis: 100% !important; }
	.aa-about-page .aa-about-hero__title { font-size: clamp(42px, 10vw, 60px) !important; }

	/* Absolute positioning does not survive a narrow column — stack instead. */
	.aa-about-page .aa-hexcluster {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 18px;
		height: auto;
		max-width: 100%;
		margin: 40px auto 0 !important;
		transform: none;
	}

	.aa-about-page .aa-hex,
	.aa-about-page .aa-hex--top,
	.aa-about-page .aa-hex--left,
	.aa-about-page .aa-hex--right {
		position: static;
		top: auto;
		left: auto;
		right: auto;
		transform: none;
	}

	.aa-about-page .aa-bio-section,
	.aa-about-page .aa-cta__inner { padding-left: 6% !important; padding-right: 6% !important; }

	.aa-about-page .aa-bio-grid > .wp-block-column { flex-basis: 100% !important; }

	.aa-about-page .aa-stat-stack {
		margin-top: 44px;
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 560px) {
	.aa-about-page .aa-about-hero__grid { padding-top: 104px; }
	.aa-about-page .aa-about-hero__title { font-size: 40px !important; }
	.aa-about-page .aa-hex { width: 196px; }
	.aa-about-page .aa-bio-title { font-size: 33px !important; }
	.aa-about-page .aa-bio-copy { font-size: 15px !important; }
	.aa-about-page .aa-stat { gap: 17px !important; }
	.aa-about-page .aa-cta__inner { padding: 56px 5%; }
}

/* ==========================================================================
   CLIENT FEEDBACK — round 2

   Appended deliberately: at equal specificity these override the earlier
   declarations by source order, which keeps the originals readable instead of
   editing the same values in six places.
   ========================================================================== */

/* ------------------------------------------- 1. Mobile pop-out menu ------
   The Navigation block has no overlay colours set, so WordPress renders the
   pop-out on white. The header links are white for the dark bar, which left
   them invisible once the overlay opened. Dark text is forced only while the
   overlay is open, so the desktop bar is untouched.
   ------------------------------------------------------------------------ */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 5rem 1.75rem 2.5rem;
	color: #0f2340;
	background-color: #fff;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:visited,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link__content,
.wp-block-navigation__responsive-container.is-menu-open a {
	color: #0f2340 !important;
	font-size: 1.125rem;
	font-weight: 600;
	text-decoration: none;
	opacity: 1;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
	color: #1878e9 !important;
}

/* The underline animation is built for a dark bar; it is noise on white. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid #1878e9;
	outline-offset: 3px;
	border-radius: 2px;
}

/* Close button and submenu arrows must read on white. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	color: #0f2340 !important;
	fill: currentColor;
}

.wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid #1878e9;
	outline-offset: 3px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.35rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
}

/* -------------------------------------- 2. Landscape phone navigation ---
   Phone-sized landscape only: short viewport AND landscape AND wide enough
   that the pop-out is not in play (the overlay takes over at 600px). Scoped
   to .aa-site-header so the footer and pop-out menus keep their first item.
   ------------------------------------------------------------------------ */

@media (orientation: landscape) and (max-height: 500px) and (min-width: 601px) {
	.aa-site-header .wp-block-navigation__container > .wp-block-navigation-item:first-child {
		display: none;
	}

	.aa-site-header .wp-block-navigation__container {
		flex-wrap: nowrap !important;
		gap: 1.4rem !important;
	}

	.aa-site-header .wp-block-navigation-item__content {
		font-size: 0.85rem;
		white-space: nowrap;
	}

	.aa-header-inner { min-height: 60px; }
	.aa-logo-link { width: min(150px, 30vw); }
}

/* --------------------------- 3 & 5. Shorter heroes + 7. 1024px inner ---- */

.aa-page-hero {
	min-height: clamp(220px, 24vw, 320px);
}

.aa-page-hero__inner {
	width: min(100% - 40px, 1024px);
	margin-inline: auto;
	padding: clamp(5.5rem, 8vw, 6.5rem) 0 clamp(1.75rem, 3vw, 2.5rem);
}

.aa-page-hero--tight {
	min-height: clamp(200px, 22vw, 290px);
}

.aa-page-hero--tight .aa-page-hero__inner,
.aa-page-hero--compact .aa-page-hero__inner {
	padding: clamp(5.5rem, 8vw, 6.5rem) 0 clamp(1.6rem, 2.8vw, 2.25rem);
}

.aa-page-hero--compact {
	min-height: clamp(190px, 20vw, 270px);
}

/* Body content stops at 1024px; the section keeps its full-width background. */
.aa-section > .wp-block-columns,
.aa-section > .wp-block-group,
.aa-section > .wp-block-buttons,
.aa-section > h1,
.aa-section > h2,
.aa-section > h3,
.aa-section > p,
.aa-section > ul,
.aa-section > ol,
.aa-section > hr {
	width: min(100%, 1024px);
	margin-inline: auto;
}

/* --------------------------- 6. Smaller desktop hero typography --------- */

.aa-page-hero h1 {
	/* Was clamp(3rem, 6vw, 6rem) — top end down from 96px to 84px. */
	font-size: clamp(2.6rem, 5vw, 5.25rem);
}

.aa-page-hero--tight h1,
.aa-page-hero--compact h1 {
	font-size: clamp(2.4rem, 4.4vw, 4.5rem);
	white-space: normal;
}

@media (max-width: 640px) {
	/* Mobile stays close to where it was. */
	.aa-page-hero h1,
	.aa-page-hero--tight h1,
	.aa-page-hero--compact h1 {
		font-size: clamp(2.2rem, 9vw, 3rem);
	}

	.aa-page-hero,
	.aa-page-hero--tight,
	.aa-page-hero--compact { min-height: 190px; }

	.aa-page-hero__inner { padding-top: 5rem; }
}

/* ------------------------------ 3 & 4. About hero: shorter + collage ---- */

.aa-about-page .aa-about-hero {
	min-height: 440px;
}

.aa-about-page .aa-about-hero__grid {
	width: min(100% - 40px, 1024px);
	min-height: 440px;
	padding-top: 78px;
	padding-bottom: 34px;
}

.aa-about-page .aa-about-hero__title {
	font-size: clamp(38px, 3.9vw, 54px) !important;
}

.aa-about-page .aa-about-hero__intro {
	max-width: 420px;
	font-size: 16px !important;
	line-height: 1.65 !important;
}

.aa-about-page .aa-bio-grid,
.aa-about-page .aa-cta__inner {
	width: min(100%, 1024px);
	margin-inline: auto;
}

/*
 * Compact scattered collage rather than a stack. Each shape keeps a slight
 * rotation and horizontal offset; the cluster never exceeds its column, so
 * nothing here can cause sideways scrolling.
 */
.aa-about-page .aa-hexcluster {
	height: 300px;
	max-width: 460px;
}

.aa-about-page .aa-hex {
	width: 168px;
}

/* Keeps faces clear of the clipped corners. */
.aa-about-page .aa-hex img {
	object-position: center 32%;
}

.aa-about-page .aa-hex--top {
	top: 0;
	left: 40%;
	transform: translateX(-50%) rotate(-4deg);
}

.aa-about-page .aa-hex--left {
	top: 118px;
	left: 0;
	transform: rotate(3deg);
}

.aa-about-page .aa-hex--right {
	top: 92px;
	right: 2%;
	transform: rotate(-2deg);
}

@media (max-width: 1080px) {
	.aa-about-page .aa-hexcluster {
		transform: scale(0.9);
		transform-origin: right center;
	}
}

@media (max-width: 781px) {
	.aa-about-page .aa-about-hero,
	.aa-about-page .aa-about-hero__grid { min-height: 0; }

	.aa-about-page .aa-about-hero__grid { padding: 96px 6% 36px; }

	/* Simplified on phones: a centred wrapping row, all photos kept. */
	.aa-about-page .aa-hexcluster {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		height: auto;
		max-width: 100%;
		margin: 28px auto 0 !important;
		transform: none;
	}

	.aa-about-page .aa-hex,
	.aa-about-page .aa-hex--top,
	.aa-about-page .aa-hex--left,
	.aa-about-page .aa-hex--right {
		position: static;
		width: 132px;
		transform: none;
	}
}

/* ----------------------------------------- Guard against sideways scroll */

.aa-about-page,
.aa-page-hero { overflow-x: clip; }

/* ------------------------------------------- 8. Contact section balance -- */

.aa-contact-grid { gap: clamp(2rem, 4vw, 3.5rem) !important; }

@media (max-width: 781px) {
	.aa-contact-grid > .wp-block-column { flex-basis: 100% !important; }
	.aa-contact-grid > .wp-block-column + .wp-block-column { margin-top: 2.5rem; }
}

/* ==========================================================================
   CLIENT FEEDBACK — round 3
   ========================================================================== */

/* --- 1. No rule between the navigation bar and the page hero ------------- */

.aa-site-header {
	border-bottom: 0;
}

/* --- 2. Page hero title at 52px ----------------------------------------- */

.aa-page-hero h1,
.aa-page-hero--tight h1,
.aa-page-hero--compact h1 {
	font-size: 52px;
}

@media (max-width: 640px) {
	/* 52px overflows a 320px screen, so scale down only where it has to. */
	.aa-page-hero h1,
	.aa-page-hero--tight h1,
	.aa-page-hero--compact h1 {
		font-size: clamp(2rem, 8.5vw, 52px);
	}
}

/* --- 3. Contact intro above the form, title at 48px --------------------- */

.aa-contact-intro {
	width: min(100%, 1024px);
	margin: 0 auto 2.5rem;
}

.aa-contact-intro__title {
	margin: 0 0 0.75rem !important;
	font-size: 48px !important;
	line-height: 1.12 !important;
}

.aa-contact-intro .aa-copy {
	max-width: 68ch;
	margin-bottom: 0.75rem;
}

.aa-contact-form-wrap {
	width: min(100%, 1024px);
	margin-inline: auto;
}

@media (max-width: 640px) {
	.aa-contact-intro__title { font-size: clamp(1.9rem, 8vw, 48px) !important; }
}

/* --- 4. News item titles at 32px ---------------------------------------- */

.aa-news-grid .wp-block-post-title,
.aa-news-grid .wp-block-post-title a {
	font-size: 32px;
	line-height: 1.25;
}

@media (max-width: 640px) {
	.aa-news-grid .wp-block-post-title,
	.aa-news-grid .wp-block-post-title a {
		font-size: clamp(1.35rem, 6.5vw, 32px);
	}
}

/* --- 5. News pagination: breathing room and spaced numbers -------------- */

.aa-news-grid .wp-block-query-pagination {
	margin-top: 3.5rem;
	gap: 1.25rem;
	align-items: center;
}

.aa-news-grid .wp-block-query-pagination-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.aa-news-grid .wp-block-query-pagination-numbers .page-numbers {
	display: inline-block;
	min-width: 2.25rem;
	padding: 0.35rem 0.6rem;
	text-align: center;
	text-decoration: none;
	border: 1px solid var(--aa-line);
	border-radius: 4px;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.aa-news-grid .wp-block-query-pagination-numbers .page-numbers:hover {
	color: #fff;
	background: var(--aa-blue);
	border-color: var(--aa-blue);
}

.aa-news-grid .wp-block-query-pagination-numbers .page-numbers.current {
	color: #fff;
	background: var(--aa-blue);
	border-color: var(--aa-blue);
	font-weight: 600;
}

.aa-news-grid .wp-block-query-pagination-numbers .page-numbers.dots {
	border-color: transparent;
	padding-inline: 0.25rem;
	min-width: 0;
}

.aa-news-grid .wp-block-query-pagination-previous,
.aa-news-grid .wp-block-query-pagination-next {
	text-decoration: none;
	font-weight: 600;
}

/* --- 6. Investment Strategy: one text size throughout ------------------- */

.aa-section .aa-copy,
.aa-section .aa-copy p,
.aa-strategy-card p,
.aa-strategy-card li,
.aa-section .aa-copy.has-large-font-size,
.aa-section p.has-large-font-size {
	font-size: 16px !important;
	line-height: 1.72;
}

/* --- 7. Spacing in the Late Stage Strategy section ---------------------- */

.aa-section .aa-section-title {
	margin-bottom: 1.5rem;
}

.aa-section .aa-copy {
	margin-bottom: 1.5rem;
}

.aa-section .aa-copy:last-child {
	margin-bottom: 0;
}

.aa-section .aa-copy p {
	margin-bottom: 1.35em;
}

.aa-section .aa-copy p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   CLIENT FEEDBACK — round 4

   Editing the About hexagons in the block editor.

   On the front end the three shapes are absolutely positioned, rotated and
   overlapping — that is the collage, and it stays exactly as it is.

   Inside the editor canvas that same positioning stacks them on top of one
   another, so only the topmost figure could be clicked and the other two were
   unreachable. An earlier fix only unclipped *empty* slots, so once photos
   were uploaded the problem came back.

   .block-editor-block-list__block is added to every block by the editor and
   never exists on the front end, which makes it a reliable discriminator that
   survives WordPress prefixing editor styles. Filled or empty, the cluster now
   lays out as a plain row while editing.
   ========================================================================== */

.aa-about-page .aa-hexcluster:has(.block-editor-block-list__block) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
	height: auto;
	min-height: 0;
	max-width: 100%;
	margin: 0 !important;
	transform: none;
}

.aa-about-page .aa-hex.block-editor-block-list__block,
.aa-about-page .aa-hex.block-editor-block-list__block.aa-hex--top,
.aa-about-page .aa-hex.block-editor-block-list__block.aa-hex--left,
.aa-about-page .aa-hex.block-editor-block-list__block.aa-hex--right {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	width: 168px;
	max-width: 45%;
	transform: none;
	/* Rotation and drop shadow make the click target harder to judge. */
	filter: none;
}

/* Empty slots need room for the Upload and Media Library buttons. */
.aa-about-page .aa-hex:has(.components-placeholder) {
	width: auto;
	min-width: 210px;
	max-width: 260px;
	aspect-ratio: auto;
	min-height: 190px;
	padding: 0;
	overflow: visible;
	background: none;
	clip-path: none;
}

.aa-about-page .aa-hex:has(.components-placeholder)::before { content: none; }

.aa-about-page .aa-hex .components-placeholder {
	min-height: 190px;
	background: rgba(16, 47, 92, 0.55);
	border: 1px dashed rgba(150, 200, 255, 0.7);
	color: #fff;
}

/* A filled slot keeps its shape so the composition is still recognisable. */
.aa-about-page .aa-hex.block-editor-block-list__block:has(img) {
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

/* The editor's selection outline is clipped away by clip-path, so give the
   selected shape a visible frame of its own. */
.aa-about-page .aa-hex.block-editor-block-list__block.is-selected,
.aa-about-page .aa-hex.block-editor-block-list__block.is-hovered {
	outline: 2px solid #1878e9;
	outline-offset: 3px;
	clip-path: none;
}

/* The column holding the cluster does not need hero height while editing. */
.aa-about-page .aa-about-hero__grid:has(.block-editor-block-list__block) {
	min-height: 0;
}

/* ==========================================================================
   CLIENT FEEDBACK — round 5
   ========================================================================== */

/* --- 1. About hero text sits further left ------------------------------- */

/*
 * The hero grid was centred inside a 1024px box, which pushed the copy well
 * inboard on a wide monitor. It now hugs the left with the same 5% gutter the
 * rest of the page uses, while still capping its width so the line length
 * stays readable.
 */
.aa-about-page .aa-about-hero__grid {
	width: min(100% - 10%, 1180px);
	margin-inline: 5% auto !important;
}

.aa-about-page .aa-about-hero__copy {
	padding-left: 0;
}

@media (min-width: 1600px) {
	/* Keep it anchored left rather than drifting with the viewport. */
	.aa-about-page .aa-about-hero__grid {
		margin-left: max(5%, calc((100vw - 1600px) / 2 + 40px)) !important;
	}
}

@media (max-width: 781px) {
	.aa-about-page .aa-about-hero__grid {
		width: 100%;
		margin-inline: 0 !important;
	}
}

/* --- 2. Testimonials without portraits ---------------------------------- */

/*
 * The avatars were showing as empty rings with alt text, and the client does
 * not want photographs here. Hidden rather than deleted from the markup so
 * the saved page content is untouched and they can be restored by removing
 * this rule.
 */
.aa-about-page .aa-quote-card__avatar {
	display: none !important;
}

.aa-about-page .aa-quote-card {
	display: block !important;
	grid-template-columns: none !important;
	padding: 22px 26px;
}

.aa-about-page .aa-quote-card__body {
	padding-left: 46px;
}

@media (max-width: 560px) {
	.aa-about-page .aa-quote-card { padding: 18px 16px; }
	.aa-about-page .aa-quote-card__body { padding-left: 0; padding-top: 30px; }
}

/* --- 3. Shorter closing call to action ---------------------------------- */

.aa-about-page .aa-cta { min-height: 0; }

.aa-about-page .aa-cta__inner {
	padding: 44px 5% !important;
}

.aa-about-page .aa-cta h2 {
	margin: 0 0 6px !important;
	font-size: clamp(28px, 3vw, 38px) !important;
}

.aa-about-page .aa-cta p {
	margin: 0 0 20px !important;
	font-size: 15px !important;
}

.aa-about-page .aa-cta__icon {
	width: 38px;
	margin: 0 auto 10px !important;
}

.aa-about-page .aa-cta__icon img,
.aa-about-page .aa-cta__icon:not(:has(img))::before {
	width: 38px !important;
	height: 38px !important;
}

.aa-about-page .aa-btn-solid .wp-block-button__link {
	padding: 11px 24px !important;
	font-size: 15px;
}

@media (max-width: 560px) {
	.aa-about-page .aa-cta__inner { padding: 34px 5% !important; }
}

/* ==========================================================================
   CLIENT FEEDBACK — round 6
   ========================================================================== */

/* --- Logo in the navigation bar ----------------------------------------- */

/*
 * parts/header.html already ships the real logo, but a header edited in the
 * Site Editor is stored in the database and overrides the theme file — which
 * is why the footer picked up the new logo and the navbar did not.
 *
 * This paints the logo over the old inline SVG so the navbar is correct either
 * way. Once the header customisation is cleared, the :has(svg) condition stops
 * matching and the <img> in the template file takes over on its own.
 */
.aa-logo-link:has(svg) {
	display: block;
	width: min(200px, 42vw);
	aspect-ratio: 360 / 240;
	background-image: url("assets/images/logo.png?v=krm3");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.aa-logo-link:has(svg) svg {
	display: none;
}

.aa-logo-link img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Homepage social icons ---------------------------------------------- */

/* Five links now, so they need to wrap gracefully and stay tappable. */
.aa-video-hero__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 100%;
}

.aa-video-hero__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #fff;
	border: 1px solid rgba(140, 190, 255, 0.55);
	border-radius: 6px;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.aa-video-hero__social a:hover,
.aa-video-hero__social a:focus-visible {
	background: rgba(39, 140, 255, 0.22);
	border-color: #278cff;
	transform: translateY(-2px);
}

.aa-video-hero__social a:focus-visible {
	outline: 2px solid #8bccff;
	outline-offset: 2px;
}

.aa-video-hero__social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

@media (max-width: 560px) {
	.aa-video-hero__social { gap: 8px; }
	.aa-video-hero__social a { width: 40px; height: 40px; }
	.aa-video-hero__social svg { width: 18px; height: 18px; }
}

/* ==========================================================================
   CLIENT FEEDBACK — round 7
   ========================================================================== */

/* --- Smaller logo in the navbar and the footer -------------------------- */

/*
 * Both the <img> version from the template file and the :has(svg) background
 * fallback are covered, so the size is the same whichever the header is
 * currently rendering.
 */
.aa-site-header .aa-logo-link,
.aa-site-header .aa-logo-link:has(svg),
.aa-video-hero__topbar .aa-logo-link,
.aa-video-hero__topbar .aa-logo-link:has(svg) {
	width: min(148px, 34vw);
}

.aa-site-footer .aa-logo-link,
.aa-site-footer .aa-logo-link:has(svg) {
	width: min(132px, 40vw);
}

@media (max-width: 781px) {
	.aa-site-header .aa-logo-link,
	.aa-site-header .aa-logo-link:has(svg),
	.aa-video-hero__topbar .aa-logo-link,
	.aa-video-hero__topbar .aa-logo-link:has(svg) {
		width: min(126px, 40vw);
	}

	.aa-site-footer .aa-logo-link,
	.aa-site-footer .aa-logo-link:has(svg) {
		width: min(118px, 42vw);
	}
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 601px) {
	/* Landscape phones already run a tighter bar. */
	.aa-site-header .aa-logo-link,
	.aa-site-header .aa-logo-link:has(svg) {
		width: min(112px, 24vw);
	}
}

/* ==========================================================================
   CLIENT FEEDBACK — round 8
   ========================================================================== */

/* --- Smaller logo again -------------------------------------------------- */

.aa-site-header .aa-logo-link,
.aa-site-header .aa-logo-link:has(svg),
.aa-video-hero__topbar .aa-logo-link,
.aa-video-hero__topbar .aa-logo-link:has(svg) {
	width: min(124px, 30vw);
}

.aa-site-footer .aa-logo-link,
.aa-site-footer .aa-logo-link:has(svg) {
	width: min(112px, 36vw);
}

@media (max-width: 781px) {
	.aa-site-header .aa-logo-link,
	.aa-site-header .aa-logo-link:has(svg),
	.aa-video-hero__topbar .aa-logo-link,
	.aa-video-hero__topbar .aa-logo-link:has(svg) {
		width: min(108px, 36vw);
	}

	.aa-site-footer .aa-logo-link,
	.aa-site-footer .aa-logo-link:has(svg) {
		width: min(102px, 38vw);
	}
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 601px) {
	.aa-site-header .aa-logo-link,
	.aa-site-header .aa-logo-link:has(svg) {
		width: min(96px, 20vw);
	}
}

/* --- About hero: name, role, background --------------------------------- */

/* The name replaces the old three-word headline, so it needs less leading. */
.aa-about-page .aa-about-hero__title {
	margin-bottom: 0 !important;
	font-size: clamp(40px, 4.2vw, 58px) !important;
	line-height: 1.08 !important;
}

/* Current role, immediately under the name. */
.aa-about-page .aa-about-hero__role {
	margin: 14px 0 0 !important;
	color: #ffffff !important;
	font-size: clamp(17px, 1.5vw, 20px) !important;
	line-height: 1.4 !important;
}

.aa-about-page .aa-about-hero__role strong {
	font-weight: 700;
}

/* Career background, quieter than the role above it. */
.aa-about-page .aa-about-hero__intro {
	max-width: 460px;
	margin: 6px 0 0 !important;
	color: rgba(255, 255, 255, 0.78) !important;
	font-size: clamp(15px, 1.25vw, 17px) !important;
	line-height: 1.55 !important;
}

/* Sits between the name and the role line. */
.aa-about-page .aa-accent-rule {
	margin: 18px 0 0 !important;
}

/* ==========================================================================
   CLIENT FEEDBACK — round 9
   ========================================================================== */

/* --- New logo artwork: 500x177 instead of 426x246 ----------------------- */

/*
 * The replacement mark is much wider and shorter, so the same width reads as a
 * smaller logo. These nudge the width back up slightly to keep the visual
 * weight the client signed off on, while staying smaller than the original.
 */
.aa-site-header .aa-logo-link,
.aa-site-header .aa-logo-link:has(svg),
.aa-video-hero__topbar .aa-logo-link,
.aa-video-hero__topbar .aa-logo-link:has(svg) {
	width: min(150px, 34vw);
}

.aa-site-footer .aa-logo-link,
.aa-site-footer .aa-logo-link:has(svg) {
	width: min(136px, 40vw);
}

@media (max-width: 781px) {
	.aa-site-header .aa-logo-link,
	.aa-site-header .aa-logo-link:has(svg),
	.aa-video-hero__topbar .aa-logo-link,
	.aa-video-hero__topbar .aa-logo-link:has(svg) {
		width: min(128px, 40vw);
	}

	.aa-site-footer .aa-logo-link,
	.aa-site-footer .aa-logo-link:has(svg) {
		width: min(120px, 42vw);
	}
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 601px) {
	.aa-site-header .aa-logo-link,
	.aa-site-header .aa-logo-link:has(svg) {
		width: min(112px, 24vw);
	}
}

/* --- About hero: 40px shorter again ------------------------------------- */

.aa-about-page .aa-about-hero {
	min-height: 400px;
}

.aa-about-page .aa-about-hero__grid {
	min-height: 400px;
	padding-top: 62px;
	padding-bottom: 26px;
}

/* The collage comes down with it, otherwise it overflows the shorter hero. */
.aa-about-page .aa-hexcluster {
	height: 264px;
}

.aa-about-page .aa-hex {
	width: 150px;
}

.aa-about-page .aa-hex--left { top: 104px; }
.aa-about-page .aa-hex--right { top: 82px; }

@media (max-width: 781px) {
	.aa-about-page .aa-about-hero,
	.aa-about-page .aa-about-hero__grid { min-height: 0; }

	.aa-about-page .aa-about-hero__grid { padding: 84px 6% 30px; }
}

/* --- Investment Strategy headings at 48px ------------------------------- */

.aa-section .aa-section-title,
.aa-section-title {
	font-size: 48px;
	line-height: 1.12;
}

.aa-strategy-card h3 {
	font-size: 24px;
	line-height: 1.25;
}

@media (max-width: 640px) {
	.aa-section .aa-section-title,
	.aa-section-title { font-size: clamp(1.85rem, 7.5vw, 48px); }
	.aa-strategy-card h3 { font-size: clamp(1.15rem, 5vw, 24px); }
}

/* --- News item titles at 28px ------------------------------------------- */

.aa-news-grid .wp-block-post-title,
.aa-news-grid .wp-block-post-title a {
	font-size: 28px;
	line-height: 1.3;
}

@media (max-width: 640px) {
	.aa-news-grid .wp-block-post-title,
	.aa-news-grid .wp-block-post-title a {
		font-size: clamp(1.25rem, 6vw, 28px);
	}
}

/* ==========================================================================
   CLIENT FEEDBACK — round 10

   Testimonials restored. Carlos asked for them in the original brief
   ("Also bring in the testimonials from that page"); they were dropped in a
   later round and are now back, using the seven real ones from the live site.

   The base card styling was removed when the About page was rewritten, so it
   is rebuilt here rather than relying on the leftover round-5 overrides.
   ========================================================================== */

.aa-about-page .aa-testimonials__title {
	max-width: 20ch;
	margin: 0 0 2rem !important;
	color: var(--aa-ink, #0f2340) !important;
	font-size: clamp(30px, 3.4vw, 42px) !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em;
	line-height: 1.12 !important;
}

.aa-about-page .aa-quote-list {
	display: grid;
	gap: 1rem;
}

.aa-about-page .aa-quote-card {
	position: relative;
	display: block !important;
	margin: 0 !important;
	padding: 22px 26px 22px 62px;
	background: #fff;
	border: 1px solid #e0e7f0;
	border-radius: 7px;
	box-shadow: 0 6px 20px rgba(17, 43, 75, 0.04);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.aa-about-page .aa-quote-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(17, 43, 75, 0.08);
}

/* Quotation mark sits in the padding rather than in the flow. */
.aa-about-page .aa-quote-card::before {
	position: absolute;
	top: 12px;
	left: 22px;
	content: "\201C";
	color: #2994ff;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
}

.aa-about-page .aa-quote-card__text {
	margin: 0 0 10px !important;
	color: #334154 !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
}

.aa-about-page .aa-quote-card__cite {
	margin: 0 !important;
	color: #5b6676 !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
}

.aa-about-page .aa-quote-card__cite strong {
	color: var(--aa-ink, #0f2340);
}

@media (max-width: 560px) {
	.aa-about-page .aa-quote-card {
		padding: 40px 18px 18px;
	}

	.aa-about-page .aa-quote-card::before {
		top: 8px;
		left: 16px;
		font-size: 40px;
	}

	.aa-about-page .aa-quote-card__text { font-size: 15px !important; }
	.aa-about-page .aa-testimonials__title { font-size: 28px !important; }
}

/* ==========================================================================
   CLIENT FEEDBACK — round 11
   ========================================================================== */

/* --- Shorter hero, larger hexagons -------------------------------------- */

/*
 * These pull against each other: a taller collage needs a taller hero. Solved
 * by flattening the arrangement — the shapes sit closer to a row with a light
 * stagger rather than a tall pyramid, so they grow while the hero shrinks.
 *
 * 186px wide at the 0.9 ratio is 207px tall; the lowest shape starts at 50px,
 * so the cluster needs 257px. The hero allows 260px between its paddings.
 */
.aa-about-page .aa-about-hero {
	min-height: 340px;
}

.aa-about-page .aa-about-hero__grid {
	min-height: 340px;
	padding-top: 58px;
	padding-bottom: 22px;
}

.aa-about-page .aa-hexcluster {
	height: 258px;
	max-width: 500px;
}

.aa-about-page .aa-hex {
	width: 186px;
}

.aa-about-page .aa-hex--top {
	top: 0;
	left: 50%;
	transform: translateX(-50%) rotate(-4deg);
}

.aa-about-page .aa-hex--left {
	top: 50px;
	left: 0;
	transform: rotate(3deg);
}

.aa-about-page .aa-hex--right {
	top: 34px;
	right: 0;
	transform: rotate(-2deg);
}

@media (max-width: 1080px) {
	.aa-about-page .aa-hexcluster {
		transform: scale(0.92);
		transform-origin: right center;
	}
}

@media (max-width: 781px) {
	.aa-about-page .aa-about-hero,
	.aa-about-page .aa-about-hero__grid { min-height: 0; }

	.aa-about-page .aa-about-hero__grid { padding: 80px 6% 28px; }

	.aa-about-page .aa-hex,
	.aa-about-page .aa-hex--top,
	.aa-about-page .aa-hex--left,
	.aa-about-page .aa-hex--right {
		width: 150px;
	}
}

/* --- Testimonials carry no portraits ------------------------------------ */

/* Portraits restored in round 13 — the blanket hide has been removed. */

/* ==========================================================================
   CLIENT FEEDBACK — round 12
   ========================================================================== */

/* --- Four hexagons, hero 40px shorter again ----------------------------- */

/*
 * A fourth shape and a shorter hero pull opposite ways, so the cluster is now
 * a staggered row rather than a pyramid: four shapes overlap horizontally
 * while the vertical spread stays small.
 *
 * 168px wide at the 0.9 ratio is 187px tall. The lowest shape starts at 26px,
 * so the cluster needs 213px; the hero leaves 220px between its paddings.
 */
.aa-about-page .aa-about-hero {
	min-height: 300px;
}

.aa-about-page .aa-about-hero__grid {
	min-height: 300px;
	padding-top: 56px;
	padding-bottom: 24px;
}

.aa-about-page .aa-hexcluster {
	height: 214px;
	max-width: 560px;
}

.aa-about-page .aa-hex {
	width: 168px;
}

.aa-about-page .aa-hex--1 { top: 0;    left: 0;    transform: rotate(-4deg); }
.aa-about-page .aa-hex--2 { top: 22px; left: 130px; transform: rotate(3deg); }
.aa-about-page .aa-hex--3 { top: 6px;  left: 260px; transform: rotate(-2deg); }
.aa-about-page .aa-hex--4 { top: 26px; left: 390px; transform: rotate(4deg); }

/* The shapes overlap, so a later one must sit above its neighbour. */
.aa-about-page .aa-hex--1 { z-index: 4; }
.aa-about-page .aa-hex--2 { z-index: 3; }
.aa-about-page .aa-hex--3 { z-index: 2; }
.aa-about-page .aa-hex--4 { z-index: 1; }

@media (max-width: 1180px) {
	.aa-about-page .aa-hexcluster {
		transform: scale(0.86);
		transform-origin: right center;
	}
}

@media (max-width: 781px) {
	.aa-about-page .aa-about-hero,
	.aa-about-page .aa-about-hero__grid { min-height: 0; }

	.aa-about-page .aa-about-hero__grid { padding: 78px 6% 28px; }

	/* Absolute positioning cannot survive a narrow column — wrap instead. */
	.aa-about-page .aa-hexcluster {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		height: auto;
		max-width: 100%;
		margin: 26px auto 0 !important;
		transform: none;
	}

	.aa-about-page .aa-hex,
	.aa-about-page .aa-hex--1,
	.aa-about-page .aa-hex--2,
	.aa-about-page .aa-hex--3,
	.aa-about-page .aa-hex--4 {
		position: static;
		top: auto;
		left: auto;
		width: 140px;
		transform: none;
	}
}

/* Editor: lay all four out in a plain, clickable row. */
.aa-about-page .aa-hex.block-editor-block-list__block.aa-hex--1,
.aa-about-page .aa-hex.block-editor-block-list__block.aa-hex--2,
.aa-about-page .aa-hex.block-editor-block-list__block.aa-hex--3,
.aa-about-page .aa-hex.block-editor-block-list__block.aa-hex--4 {
	position: static;
	top: auto;
	left: auto;
	transform: none;
}

/* ==========================================================================
   CLIENT FEEDBACK — round 13
   ========================================================================== */

/* --- Statistic icons ----------------------------------------------------- */

/*
 * These were empty Image blocks, which WordPress discards when the page is
 * saved — the same reason the hexagons vanished earlier. They now point at
 * SVGs shipped with the theme, so they survive and can still be replaced.
 */
.aa-about-page .aa-stat {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: 20px !important;
}

.aa-about-page .aa-stat__icon {
	flex: 0 0 44px;
	width: 44px;
	margin: 4px 0 0 !important;
}

.aa-about-page .aa-stat__icon img {
	display: block;
	width: 44px !important;
	height: 44px !important;
	object-fit: contain;
}

.aa-about-page .aa-stat__body {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
}

/* --- Testimonial portraits ---------------------------------------------- */

.aa-about-page .aa-quote-card {
	display: grid !important;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	padding: 22px 26px;
}

/* The quotation mark moves into the text column now the portrait holds the
   left edge; positioned against the card so it does not shift the copy. */
.aa-about-page .aa-quote-card::before {
	top: 16px;
	left: 96px;
}

.aa-about-page .aa-quote-card__avatar {
	display: block !important;
	width: 62px;
	height: 62px;
	margin: 0 !important;
	overflow: hidden;
	border: 2px solid #fff;
	border-radius: 50%;
	outline: 1px solid #1878e9;
	background: #e8eef7;
}

.aa-about-page .aa-quote-card__avatar img {
	display: block !important;
	width: 62px !important;
	height: 62px !important;
	border-radius: 50%;
	object-fit: cover;
}

.aa-about-page .aa-quote-card__text {
	padding-top: 26px;
}

@media (max-width: 560px) {
	.aa-about-page .aa-quote-card {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 14px;
		padding: 18px 16px;
	}

	.aa-about-page .aa-quote-card::before {
		top: 12px;
		left: 76px;
		font-size: 38px;
	}

	.aa-about-page .aa-quote-card__avatar,
	.aa-about-page .aa-quote-card__avatar img {
		width: 48px !important;
		height: 48px !important;
	}

	.aa-about-page .aa-quote-card__text { padding-top: 20px; }
}

/* ==========================================================================
   CLIENT FEEDBACK — round 14

   Two earlier rules were overriding what gets set in the block editor. Both
   are corrected here rather than edited in place, so the history of why they
   existed stays readable.
   ========================================================================== */

/* --- 1. Biography section goes full width ------------------------------- */

/*
 * Round 2 capped this at 1024px to stop content stretching on a wide monitor.
 * The section now carries its own contentSize set in the editor (1440px), so
 * the cap has to go or that setting is ignored. The section keeps its 5%
 * padding, so it still never touches the browser edge.
 */
.aa-about-page .aa-bio-grid {
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}

/* --- 2. Testimonial heading can be centred ------------------------------ */

/*
 * The 20ch max-width plus a hard-left margin meant "Align text centre" in the
 * editor had nothing to work with. Centring is now honoured when the block
 * carries has-text-align-center, and left alignment still works otherwise.
 */
.aa-about-page .aa-testimonials__title {
	max-width: 26ch;
	margin: 0 0 2rem;
}

.aa-about-page .aa-testimonials__title.has-text-align-center,
.aa-about-page .aa-testimonials .aa-label.has-text-align-center {
	max-width: none;
	margin-inline: auto !important;
	text-align: center;
}

.aa-about-page .aa-testimonials .aa-label.has-text-align-center {
	margin-bottom: 12px !important;
}

/* --- 3. Call to action icon with no image ------------------------------- */

/*
 * The CTA icon block is currently an <img> with no src, which renders as a
 * broken image. Hide it and show the ring placeholder instead until a real
 * icon is uploaded.
 */
.aa-about-page .aa-cta__icon img:not([src]),
.aa-about-page .aa-cta__icon img[src=""] {
	display: none;
}

.aa-about-page .aa-cta__icon:has(img:not([src]))::before,
.aa-about-page .aa-cta__icon:has(img[src=""])::before {
	content: "";
	display: block;
	width: 38px;
	height: 38px;
	margin: 0 auto;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
}

/* ==========================================================================
   CLIENT FEEDBACK — round 15
   ========================================================================== */

/* --- KRM Capital logo ---------------------------------------------------- */

/*
 * The new mark is 3:2 where the old wordmark was nearly 3:1, so the widths set
 * in rounds 7 and 8 would render it almost twice as tall in the bar. These
 * widths land it on a similar visual height instead, then add the 20% increase
 * asked for on review — the emblem carries finer detail than the old wordmark,
 * so it needs the extra room to stay legible.
 *
 * As before, both the <img> from the template file and the :has(svg) background
 * fallback are covered, so it is correct whether or not the header
 * customisation in the Site Editor has been cleared.
 */
.aa-site-header .aa-logo-link,
.aa-site-header .aa-logo-link:has(svg),
.aa-video-hero__topbar .aa-logo-link,
.aa-video-hero__topbar .aa-logo-link:has(svg) {
	width: min(101px, 26vw);
}

.aa-site-footer .aa-logo-link,
.aa-site-footer .aa-logo-link:has(svg) {
	width: min(91px, 34vw);
}

@media (max-width: 781px) {
	.aa-site-header .aa-logo-link,
	.aa-site-header .aa-logo-link:has(svg),
	.aa-video-hero__topbar .aa-logo-link,
	.aa-video-hero__topbar .aa-logo-link:has(svg) {
		width: min(86px, 31vw);
	}

	.aa-site-footer .aa-logo-link,
	.aa-site-footer .aa-logo-link:has(svg) {
		width: min(82px, 36vw);
	}
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 601px) {
	.aa-site-header .aa-logo-link,
	.aa-site-header .aa-logo-link:has(svg) {
		width: min(77px, 22vw);
	}
}

/* ==========================================================================
   CLIENT FEEDBACK — round 16
   ========================================================================== */

/* --- Navigation links back to white -------------------------------------- */

/*
 * The block library ships
 *   .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
 * with the class deliberately doubled, so at (0,3,0) it outranks the rule near
 * the top of this file that paints the links white and they fall back to the
 * body colour — dark navy on a dark bar. It resolves to `inherit`, so colouring
 * the bar itself is the dependable fix; this is how the footer has always
 * worked. The doubled-class rule is kept as a guard in case the container
 * colour is ever reset.
 *
 * The is-menu-open declarations in round 2 use !important, so the mobile
 * overlay on its white background is unaffected.
 */
.aa-site-header {
	color: #fff;
}

.aa-site-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content,
.aa-video-hero__topbar .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: #fff;
}