/* ==========================================================================
   ABOUT US — redesign layer
   Loaded after css/pages/about-us/about-us.css AND after css/blocks-wwa.css,
   both of which style these same sections; this is last so it wins without
   !important except where noted.

   The page was ten stacked text sections. The three blocks that now carry a
   picture — hero, capability card, market card — each render `.has-media`
   only when an image has actually been chosen, so every rule here that
   depends on a photograph is scoped to that class and the text-only version
   of each block is left exactly as it was.
   ========================================================================== */

.page-about-redesign {
	--ab-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ab-shadow: 0 24px 56px -28px rgba(var(--ink-rgb), 0.4);
	--ab-shadow-lift: 0 38px 80px -30px rgba(var(--ink-rgb), 0.52);
	--ab-radius: 20px;
}

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

   With a photograph it becomes a full-bleed cover like the article hero, and
   the type goes white over a scrim. Without one it keeps the existing orbs
   and grid on the page background, so nothing regresses before an image is
   picked.
   -------------------------------------------------------------------------- */
.page-about-redesign .about-hero.has-media {
	position: relative;
	display: flex;
	align-items: center;
	/*
	 * A whole screen: the photograph and the headline are all there is until
	 * the reader scrolls. svh, not vh, so a phone's address bar does not push
	 * the section below into view under it.
	 *
	 * !important because an earlier layer pins this element with
	 * `.about-hero { min-height: 0 !important; padding-block: … !important }`
	 * -- a plain declaration here lost to it and the hero sat at its content
	 * height, 729px in a 900px window.
	 */
	min-height: 100vh !important;
	min-height: 100svh !important;
	padding-block: clamp(7.5rem, 13vw, 10rem) clamp(3rem, 6vw, 5rem) !important;
	overflow: hidden;
	isolation: isolate;
}

/*
 * Leaving for the background.
 *
 * js/blocks-wwa.js writes --ab-hero-p, 0 while the hero is at rest and rising
 * to 1 as it scrolls away. Everything below reads that one number, so the whole
 * effect is declared here and the script only has to measure. With the script
 * blocked the property is absent and the fallback 0 in each var() leaves the
 * hero exactly as it looks on arrival.
 *
 * The photograph sinks and grows while the type lifts and fades ahead of it,
 * and the scrim deepens -- so by the time the statement below is under the
 * header the picture reads as backdrop rather than as subject.
 */
.page-about-redesign .about-hero-media {
	position: absolute;
	inset: 0;
	z-index: -2;
	transform: translate3d(0, calc(var(--ab-hero-p, 0) * 12%), 0) scale(calc(1 + var(--ab-hero-p, 0) * 0.14));
	will-change: transform;
}
.page-about-redesign .about-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	animation: ab-hero-drift 24s var(--ab-ease) forwards;
}
@keyframes ab-hero-drift {
	from { transform: scale(1.09); }
	to   { transform: scale(1); }
}

.page-about-redesign .about-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: calc(0.78 + var(--ab-hero-p, 0) * 0.22);
	background:
		linear-gradient(to top, rgba(5, 12, 10, 0.92) 0%, rgba(5, 12, 10, 0.6) 45%, rgba(5, 12, 10, 0.3) 100%),
		linear-gradient(to right, rgba(5, 12, 10, 0.78) 0%, rgba(5, 12, 10, 0.12) 72%);
}

/* The orbs and the grid belong to the text-only hero; over a photograph they
   only muddy it. */
.page-about-redesign .about-hero.has-media .about-hero-orb,
.page-about-redesign .about-hero.has-media .about-hero-grid { display: none; }

/* White in BOTH themes: the scrim is a fixed dark gradient, so a theme-aware
   colour would vanish in light mode. */
.page-about-redesign .about-hero.has-media h1,
.page-about-redesign .about-hero.has-media p,
.page-about-redesign .about-hero.has-media .about-eyebrow { color: #fff; }
.page-about-redesign .about-hero.has-media p { color: rgba(255, 255, 255, 0.82); }
.page-about-redesign .about-hero.has-media .container {
	position: relative;
	z-index: 1;
	/* Multiplied by more than 1 so the type is gone before the hero is, which
	   is what makes it read as a handover rather than a fade-out. */
	opacity: calc(1 - var(--ab-hero-p, 0) * 1.45);
	transform: translate3d(0, calc(var(--ab-hero-p, 0) * -56px), 0);
	will-change: transform, opacity;
}

/*
 * The secondary action is a dark-on-light ghost button by default, which is
 * invisible on the photograph. Over the scrim it becomes a light outline.
 */
.page-about-redesign .about-hero.has-media .btn-ghost {
	border: 1px solid rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background-color 0.35s var(--ab-ease), border-color 0.35s var(--ab-ease),
	            transform 0.35s var(--ab-ease);
}
.page-about-redesign .about-hero.has-media .btn-ghost:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: #fff;
	transform: translateY(-2px);
}

/* The stat row under the actions, if the block is given figures. */
.page-about-redesign .about-hero.has-media .ahs-num { color: #fff; }
.page-about-redesign .about-hero.has-media .ahs-label { color: rgba(255, 255, 255, 0.7); }

/* The header floats over the photo here, so its links must be light while the
   bar is still transparent. Matches the treatment on single posts. */
.page-about-redesign:has(.about-hero.has-media) .site-header:not(.scrolled-solid) .nav-list .nav-item .nav-link,
.page-about-redesign:has(.about-hero.has-media) .site-header:not(.scrolled-solid) nav .nav-link,
.page-about-redesign:has(.about-hero.has-media) .site-header:not(.scrolled-solid) .nav-chevron {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
.page-about-redesign:has(.about-hero.has-media) .site-header:not(.scrolled-solid) .nav-list .nav-item:hover > .nav-link {
	color: var(--color-accent) !important;
	text-shadow: none !important;
}
.page-about-redesign:has(.about-hero.has-media) .site-header:not(.scrolled-solid) .hamburger .bar {
	background-color: #fff !important;
}

/* --------------------------------------------------------------------------
   Section rhythm
   Alternating grounds, so ten sections read as a sequence rather than one
   long scroll of the same colour.
   -------------------------------------------------------------------------- */
.page-about-redesign .wwa-capability,
.page-about-redesign .wwa-models,
.page-about-redesign .wwa-markets {
	background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
	border-block: 1px solid var(--color-border);
}

/* One eyebrow treatment for every section that has one. */
.page-about-redesign .section-tag-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.9rem;
	padding: 0.3rem 0.85rem;
	border: 1px solid rgba(var(--color-accent-rgb), 0.35);
	border-radius: 100px;
	background: rgba(var(--color-accent-rgb), 0.08);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent-hover);
}

/* --------------------------------------------------------------------------
   Capability — photo cards

   Six icon-and-text boxes become six photo cards. The icon stays, lifted onto
   the picture as a chip, so the discipline is still identifiable at a glance
   when the photographs are all of drawings and screens.
   -------------------------------------------------------------------------- */
.page-about-redesign .capability-grid {
	gap: clamp(1rem, 2vw, 1.5rem);
}

.page-about-redesign .cap-card.has-media {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	border-radius: var(--ab-radius);
	transition: transform 0.5s var(--ab-ease), box-shadow 0.5s var(--ab-ease),
	            border-color 0.5s var(--ab-ease);
}
.page-about-redesign .cap-card.has-media:hover {
	transform: translateY(-6px);
	border-color: rgba(var(--color-accent-rgb), 0.45);
	box-shadow: var(--ab-shadow-lift);
}

.page-about-redesign .cap-media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-surface);
}
.page-about-redesign .cap-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ab-ease);
}
.page-about-redesign .cap-card.has-media:hover .cap-media img { transform: scale(1.06); }

/* A wash over the photo so the icon chip reads on any of them. */
.page-about-redesign .cap-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5, 12, 10, 0.55) 0%, rgba(5, 12, 10, 0.05) 55%);
}

.page-about-redesign .cap-card.has-media .cap-icon {
	position: absolute;
	top: clamp(0.8rem, 2vw, 1rem);
	left: clamp(0.8rem, 2vw, 1rem);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	border-radius: 12px;
	/* Black rather than the white badge this started as -- requested
	   directly. var(--color-accent), not -hover: the hover variant (teal)
	   was tuned for a WHITE background and reads dim on black. The outline
	   is the same accent colour darkened toward black as the plain variant
	   in css/blocks-wwa.css, so the two stay in step automatically. */
	background: #0d0d0d;
	border: 1.5px solid color-mix(in srgb, var(--color-accent) 55%, black);
	color: var(--color-accent);
	box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.55);
	transition: transform 0.5s var(--ab-ease);
}
.page-about-redesign .cap-card.has-media:hover .cap-icon { transform: translateY(-2px) rotate(-4deg); }
.page-about-redesign .cap-card.has-media .cap-icon svg { width: 19px; height: 19px; }
.page-about-redesign .cap-card.has-media .cap-icon img { width: 19px; height: 19px; object-fit: contain; }

.page-about-redesign .cap-card.has-media h3 {
	margin: clamp(1.1rem, 2.5vw, 1.4rem) clamp(1.1rem, 2.5vw, 1.4rem) 0.45rem;
	font-size: 1.05rem;
	letter-spacing: -0.015em;
}
.page-about-redesign .cap-card.has-media p {
	margin: 0 clamp(1.1rem, 2.5vw, 1.4rem) clamp(1.2rem, 2.5vw, 1.5rem);
	font-size: 0.9rem;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Markets — photo header on each card
   -------------------------------------------------------------------------- */
.page-about-redesign .market-card.has-media {
	position: relative;
	padding: 0;
	overflow: hidden;
	border-radius: var(--ab-radius);
	transition: transform 0.5s var(--ab-ease), box-shadow 0.5s var(--ab-ease),
	            border-color 0.5s var(--ab-ease);
}
.page-about-redesign .market-card.has-media:hover {
	transform: translateY(-5px);
	border-color: rgba(var(--color-accent-rgb), 0.45);
	box-shadow: var(--ab-shadow-lift);
}

.page-about-redesign .market-media {
	position: relative;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	background: var(--color-surface);
}
.page-about-redesign .market-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ab-ease);
}
.page-about-redesign .market-card.has-media:hover .market-media img { transform: scale(1.05); }
.page-about-redesign .market-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5, 12, 10, 0.5), transparent 60%);
}

.page-about-redesign .market-card.has-media .market-card-head,
.page-about-redesign .market-card.has-media > p,
.page-about-redesign .market-card.has-media .market-card-ctas {
	padding-inline: clamp(1.2rem, 3vw, 1.75rem);
}
.page-about-redesign .market-card.has-media .market-card-head { padding-top: clamp(1.2rem, 3vw, 1.6rem); }
.page-about-redesign .market-card.has-media .market-card-ctas { padding-bottom: clamp(1.3rem, 3vw, 1.75rem); }

/* --------------------------------------------------------------------------
   Models, pressure, integration — lift and accent on hover
   -------------------------------------------------------------------------- */
.page-about-redesign .model-card,
.page-about-redesign .pressure-card {
	transition: transform 0.5s var(--ab-ease), box-shadow 0.5s var(--ab-ease),
	            border-color 0.5s var(--ab-ease);
}
.page-about-redesign .model-card:hover,
.page-about-redesign .pressure-card:hover {
	transform: translateY(-5px);
	border-color: rgba(var(--color-accent-rgb), 0.45);
	box-shadow: var(--ab-shadow);
}

/* The numeral on each pressure card, enlarged and pushed behind the text so
   it reads as a graphic device rather than a label. */
.page-about-redesign .pressure-card { position: relative; overflow: hidden; }
.page-about-redesign .pc-index {
	font-size: clamp(2rem, 4vw, 2.9rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(var(--color-accent-rgb), 0.28);
	transition: color 0.5s var(--ab-ease), transform 0.5s var(--ab-ease);
}
.page-about-redesign .pressure-card:hover .pc-index {
	color: rgba(var(--color-accent-rgb), 0.55);
	transform: translateY(-2px);
}

/* The integration list ticks in one after another as the section arrives. */
.page-about-redesign .int-item {
	transition: transform 0.45s var(--ab-ease), color 0.45s var(--ab-ease);
}
.page-about-redesign .int-item:hover { transform: translateX(4px); }
.page-about-redesign .int-check {
	transition: transform 0.45s var(--ab-ease), background-color 0.45s var(--ab-ease);
}
.page-about-redesign .int-item:hover .int-check { transform: scale(1.12); }

/* --------------------------------------------------------------------------
   Experience — the picture box this section already had
   -------------------------------------------------------------------------- */
.page-about-redesign .experience-media {
	overflow: hidden;
	border-radius: var(--ab-radius);
	box-shadow: var(--ab-shadow);
	transition: transform 0.6s var(--ab-ease), box-shadow 0.6s var(--ab-ease);
}
.page-about-redesign .experience-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ab-ease);
}
.page-about-redesign .experience-media:hover { box-shadow: var(--ab-shadow-lift); }
.page-about-redesign .experience-media:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   Reveal

   js/blocks-wwa.js already adds .is-visible to each section on scroll; this
   only re-times what happens then, so nothing new can hide the page. The
   children stagger off the parent's state rather than needing observers of
   their own.
   -------------------------------------------------------------------------- */
.page-about-redesign .reveal-section .reveal-item,
.page-about-redesign .reveal-section .cap-card,
.page-about-redesign .reveal-section .model-card,
.page-about-redesign .reveal-section .pressure-card,
.page-about-redesign .reveal-section .market-card,
.page-about-redesign .reveal-section .int-item {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.65s var(--ab-ease), transform 0.65s var(--ab-ease);
}
.page-about-redesign .reveal-section.is-visible .reveal-item,
.page-about-redesign .reveal-section.is-visible .cap-card,
.page-about-redesign .reveal-section.is-visible .model-card,
.page-about-redesign .reveal-section.is-visible .pressure-card,
.page-about-redesign .reveal-section.is-visible .market-card,
.page-about-redesign .reveal-section.is-visible .int-item {
	opacity: 1;
	transform: none;
}

/* Stagger, by position. nth-child rather than a script: the counts here are
   fixed by the design (six capabilities, three pressure cards, four
   integration points) and a class per card would have to be maintained. */
.page-about-redesign .reveal-section.is-visible .cap-card:nth-child(1),
.page-about-redesign .reveal-section.is-visible .int-item:nth-child(1) { transition-delay: 0ms; }
.page-about-redesign .reveal-section.is-visible .cap-card:nth-child(2),
.page-about-redesign .reveal-section.is-visible .int-item:nth-child(2) { transition-delay: 80ms; }
.page-about-redesign .reveal-section.is-visible .cap-card:nth-child(3),
.page-about-redesign .reveal-section.is-visible .int-item:nth-child(3) { transition-delay: 160ms; }
.page-about-redesign .reveal-section.is-visible .cap-card:nth-child(4),
.page-about-redesign .reveal-section.is-visible .int-item:nth-child(4) { transition-delay: 240ms; }
.page-about-redesign .reveal-section.is-visible .cap-card:nth-child(5) { transition-delay: 320ms; }
.page-about-redesign .reveal-section.is-visible .cap-card:nth-child(6) { transition-delay: 400ms; }

.page-about-redesign .reveal-section.is-visible .pressure-card:nth-child(2),
.page-about-redesign .reveal-section.is-visible .model-card:nth-child(2),
.page-about-redesign .reveal-section.is-visible .market-card:nth-child(2) { transition-delay: 110ms; }
.page-about-redesign .reveal-section.is-visible .pressure-card:nth-child(3) { transition-delay: 220ms; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: portrait) {
	/*
	 * Same reasoning as the article hero: a full-bleed cover in a tall window
	 * crops a landscape photograph to a vertical sliver. The picture takes a
	 * band of its own and the headline sits below it.
	 */
	.page-about-redesign .about-hero.has-media {
		display: grid;
		grid-template-rows: auto auto;
		align-content: center;
		row-gap: clamp(1.25rem, 5vw, 2rem);
		padding-block: clamp(5rem, 13vw, 6rem) clamp(2rem, 7vw, 3rem) !important;
		background: var(--color-bg);
	}
	.page-about-redesign .about-hero.has-media .about-hero-media,
	.page-about-redesign .about-hero.has-media .about-hero-scrim {
		position: relative;
		inset: auto;
		grid-row: 1;
		grid-column: 1;
	}
	.page-about-redesign .about-hero.has-media .about-hero-media {
		z-index: 0;
		aspect-ratio: 4 / 3;
		width: 100%;
	}
	.page-about-redesign .about-hero.has-media .about-hero-media img { height: 100%; }
	.page-about-redesign .about-hero.has-media .about-hero-scrim {
		z-index: 1;
		background: linear-gradient(to bottom, rgba(5, 12, 10, 0.5) 0%, rgba(5, 12, 10, 0) 42%);
	}
	.page-about-redesign .about-hero.has-media .container {
		grid-row: 2;
		grid-column: 1;
		z-index: 2;
	}

	/* The handover moved a photograph that filled the screen. With the picture
	   in a band of its own there is nothing behind it to sink into, and the
	   transform only pushed it out of its own frame. */
	.page-about-redesign .about-hero.has-media .about-hero-media,
	.page-about-redesign .about-hero.has-media .container {
		transform: none;
		opacity: 1;
	}
	.page-about-redesign .about-hero.has-media .about-hero-scrim { opacity: 1; }
	.page-about-redesign .about-hero.has-media h1 { color: var(--color-text); }
	.page-about-redesign .about-hero.has-media p,
	.page-about-redesign .about-hero.has-media .about-eyebrow { color: var(--color-text-muted); }

	/* The ghost button is on the page background here, not the photograph. */
	.page-about-redesign .about-hero.has-media .btn-ghost {
		border-color: var(--color-border);
		background: transparent;
		color: var(--color-text);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.page-about-redesign .about-hero.has-media .ahs-num { color: var(--color-text); }
	.page-about-redesign .about-hero.has-media .ahs-label { color: var(--color-text-muted); }

	/* The bar is over the page background again, not the photograph. */
	.page-about-redesign:has(.about-hero.has-media) .site-header:not(.scrolled-solid) .nav-list .nav-item .nav-link,
	.page-about-redesign:has(.about-hero.has-media) .site-header:not(.scrolled-solid) nav .nav-link,
	.page-about-redesign:has(.about-hero.has-media) .site-header:not(.scrolled-solid) .nav-chevron {
		color: var(--color-text) !important;
		text-shadow: none !important;
	}
	.page-about-redesign:has(.about-hero.has-media) .site-header:not(.scrolled-solid) .hamburger .bar {
		background-color: var(--color-text) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-about-redesign .about-hero-media img { animation: none; }
	.page-about-redesign .about-hero-media,
	.page-about-redesign .about-hero.has-media .container {
		transform: none !important;
		opacity: 1 !important;
	}
	.page-about-redesign .reveal-section .reveal-item,
	.page-about-redesign .reveal-section .cap-card,
	.page-about-redesign .reveal-section .model-card,
	.page-about-redesign .reveal-section .pressure-card,
	.page-about-redesign .reveal-section .market-card,
	.page-about-redesign .reveal-section .int-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.page-about-redesign .cap-card.has-media:hover,
	.page-about-redesign .market-card.has-media:hover,
	.page-about-redesign .model-card:hover,
	.page-about-redesign .pressure-card:hover,
	.page-about-redesign .int-item:hover,
	.page-about-redesign .about-hero.has-media .btn-ghost:hover { transform: none; }
	.page-about-redesign .cap-card.has-media:hover .cap-media img,
	.page-about-redesign .market-card.has-media:hover .market-media img,
	.page-about-redesign .experience-media:hover img { transform: none; }
}


/* ==========================================================================
   ABOUT US v2 (client change request, Oct 2026)

   The page now reads: Who We Are (hero + statement + story), What Sets
   Realcognita Apart (four cards), Our Experience (experience, markets,
   disciplines) and Our Vision & Promise. The story and vision sections are
   core blocks (.about-story, .about-vision) styled here.
   ========================================================================== */

/* -------------------------------------------------- story: the "why"
   Kept simple so it reads: the opening statement, the five pressures from
   the copy on one quiet row with an icon each (icons are per list position,
   so the text stays editable), then the line that sums them up. A fine line
   hands down to "another way". */
.page-about-redesign { --ab-handoff: clamp(2.5rem, 4vw, 3rem); }

.page-about-redesign .about-story {
	padding: clamp(4.5rem, 9vw, 7rem) 1.5rem var(--ab-handoff);
	background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
}
.page-about-redesign .about-story .container { max-width: 1120px; margin: 0 auto; }
.page-about-redesign .about-story-grid { display: block; }
.page-about-redesign .about-story-context { text-align: center; }

.page-about-redesign .about-story-context .about-story-intro {
	max-width: 880px;
	margin: 0 auto;
	color: var(--color-text);
	font-size: clamp(1.35rem, 2.4vw, 1.85rem);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.page-about-redesign .about-story-forces {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: clamp(2.5rem, 4.5vw, 3.5rem) 0;
	padding: 0;
	list-style: none;
}
.page-about-redesign .about-story-forces li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.9rem;
	margin: 0;
	padding: 0.25rem 1rem;
	color: var(--color-text);
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.35;
}
.page-about-redesign .about-story-forces li + li { border-left: 1px solid var(--color-border); }
/* icon: a green glyph on a soft green disc */
.page-about-redesign .about-story-forces li::before {
	content: "";
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(var(--color-accent-rgb), 0.1);
	transition: background-color 0.4s var(--ab-ease), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-about-redesign .about-story-forces li::after {
	content: "";
	position: absolute;
	top: calc(0.25rem + 15px);
	left: 50%;
	width: 22px;
	height: 22px;
	margin-left: -11px;
	background: var(--color-accent);
	-webkit-mask: var(--force-icon) center / contain no-repeat;
	mask: var(--force-icon) center / contain no-repeat;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-about-redesign .about-story-forces li:hover::before {
	background-color: rgba(var(--color-accent-rgb), 0.18);
	transform: translateY(-3px);
}
.page-about-redesign .about-story-forces li:hover::after { transform: translateY(-3px); }
.page-about-redesign .about-story-forces li:nth-child(1) { --force-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2014l4-4'/%3E%3Cpath%20d='M3.34%2019a10%2010%200%201%201%2017.32%200'/%3E%3C/svg%3E"); } /* Productivity pressures */
.page-about-redesign .about-story-forces li:nth-child(2) { --force-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='9'%20cy='7'%20r='4'/%3E%3Cpath%20d='M22%2011h-6'/%3E%3C/svg%3E"); } /* Skills shortages */
.page-about-redesign .about-story-forces li:nth-child(3) { --force-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2012h-4l-3%209L9%203l-3%209H2'/%3E%3C/svg%3E"); } /* Changing workloads */
.page-about-redesign .about-story-forces li:nth-child(4) { --force-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2017l-8.5-8.5-5%205L2%207'/%3E%3Cpath%20d='M16%2017h6v-6'/%3E%3C/svg%3E"); } /* Tighter margins */
.page-about-redesign .about-story-forces li:nth-child(5) { --force-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='4'%20width='16'%20height='16'%20rx='2'/%3E%3Crect%20x='9'%20y='9'%20width='6'%20height='6'/%3E%3Cpath%20d='M9%201v3M15%201v3M9%2020v3M15%2020v3M20%209h3M20%2014h3M1%209h3M1%2014h3'/%3E%3C/svg%3E"); } /* Evolving technology */

/* the row arrives one by one */
.page-about-redesign .about-story.is-visible .about-story-forces li { animation: ab-rise 0.7s var(--ab-ease) 0.15s backwards; }
.page-about-redesign .about-story.is-visible .about-story-forces li:nth-child(2) { animation-delay: 0.25s; }
.page-about-redesign .about-story.is-visible .about-story-forces li:nth-child(3) { animation-delay: 0.35s; }
.page-about-redesign .about-story.is-visible .about-story-forces li:nth-child(4) { animation-delay: 0.45s; }
.page-about-redesign .about-story.is-visible .about-story-forces li:nth-child(5) { animation-delay: 0.55s; }
@keyframes ab-rise { from { opacity: 0; transform: translateY(14px); } }

.page-about-redesign .about-story-context p:last-child {
	max-width: 640px;
	margin: 0 auto;
	color: var(--color-text-muted);
	font-size: 1.05rem;
	line-height: 1.8;
}

/* -------------------------------------------------- another way
   The answer as a spread: the line on the left; the copy on the right on a
   thin rule, green beside the first paragraph. */
.page-about-redesign .about-way {
	position: relative;
	padding: calc(var(--ab-handoff) + 3.5rem) 1.5rem clamp(4.5rem, 8vw, 6.5rem);
	background: var(--color-bg);
}
/* the hand-off: a fine line down to a small arrow */
.page-about-redesign .about-way::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--ab-handoff));
	left: calc(50% - 0.5px);
	width: 1px;
	height: calc(var(--ab-handoff) - 18px);
	background: linear-gradient(transparent, rgba(var(--color-accent-rgb), 0.7));
}
.page-about-redesign .about-way::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 1px solid rgba(var(--color-accent-rgb), 0.45);
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2326d07c'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d=%22M12%205v14M6%2013l6%206%206-6%22/%3E%3C/svg%3E") center / 16px no-repeat var(--color-bg);
	animation: ab-bob 2.4s ease-in-out infinite;
}
@keyframes ab-bob { 50% { translate: 0 3px; } }

.page-about-redesign .about-way .container { max-width: 1120px; margin: 0 auto; }
.page-about-redesign .about-way-grid { display: block; }
.page-about-redesign .about-way-copy {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	column-gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}
.page-about-redesign .about-way .about-story-quote {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
	color: var(--color-text);
	font-size: clamp(2.3rem, 4.4vw, 3.4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.035em;
}
.page-about-redesign .about-way .about-story-quote .accent { color: var(--color-accent); }
.page-about-redesign .about-way-copy p:not(.about-story-quote) {
	grid-column: 2;
	margin: 0;
	padding-left: clamp(1.5rem, 3vw, 2.25rem);
	border-left: 2px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: 1.02rem;
	line-height: 1.8;
}
.page-about-redesign .about-way-copy .about-story-quote + p {
	padding-bottom: 1.4rem;
	border-left-color: var(--color-accent);
	color: var(--color-text);
	font-size: clamp(1.1rem, 1.5vw, 1.22rem);
	line-height: 1.7;
}
.page-about-redesign .about-way.is-visible .about-way-copy p:not(.about-story-quote) { animation: ab-rise 0.7s var(--ab-ease) 0.25s backwards; }
.page-about-redesign .about-way.is-visible .about-way-copy .about-story-quote + p + p { animation-delay: 0.4s; }

@media (max-width: 900px) {
	/* the pressures wrap three and two, centred */
	.page-about-redesign .about-story-forces { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 1.75rem; }
	.page-about-redesign .about-story-forces li { flex: 0 0 33.333%; }
	.page-about-redesign .about-story-forces li + li { border-left: 0; }

	.page-about-redesign .about-way-copy { grid-template-columns: minmax(0, 1fr); }
	.page-about-redesign .about-way .about-story-quote { grid-row: auto; margin-bottom: 1.6rem; }
	.page-about-redesign .about-way-copy p:not(.about-story-quote) { grid-column: auto; }
}
@media (max-width: 520px) {
	.page-about-redesign .about-story-forces li { flex-basis: 50%; padding-inline: 0.5rem; font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
	.page-about-redesign .about-story.is-visible .about-story-forces li,
	.page-about-redesign .about-way::after,
	.page-about-redesign .about-way.is-visible .about-way-copy p:not(.about-story-quote) { animation: none; }
	.page-about-redesign .about-story-forces li:hover::before,
	.page-about-redesign .about-story-forces li:hover::after { transform: none; }
}

/* -------------------------------------------------- What Sets Realcognita Apart: 2 x 2 */
.page-about-redesign .wwa-pressure .pressure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-about-redesign .pressure-grid .reveal-item:nth-child(4) { transition-delay: 0.35s; }
.page-about-redesign .pressure-card .pc-index {
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(var(--color-accent-rgb), 0.6);
}

/* -------------------------------------------------- Experience Across Markets
   A dark band. Under the heading, a dotted map centred on the Pacific: the
   two markets glow green and pulse, the team hubs sit opposite, and arcs
   draw in between them, each carrying a travelling signal (markup in
   rcn_wwa_markets_map()). The four cards below are glass panels with an icon
   each (per position, so the text stays editable). */
.page-about-redesign .wwa-markets {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(4.5rem, 9vw, 7rem);
	border: 0;
}
/* The ground is a layer, not the section's own background: main.css pins
   every <section> background to transparent with !important. */
.page-about-redesign .wwa-markets::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(60% 45% at 50% 0%, rgba(38, 208, 124, 0.16), transparent 70%),
		radial-gradient(45% 40% at 100% 100%, rgba(0, 164, 153, 0.16), transparent 70%),
		linear-gradient(170deg, #12211f 0%, #0d1719 55%, #0b1416 100%);
}
.page-about-redesign .wwa-markets .container { max-width: 1180px; }
.page-about-redesign .wwa-markets .wwa-head h2 { color: #fff; }
.page-about-redesign .wwa-markets .wwa-head h2 .accent { color: #26d07c; }
.page-about-redesign .wwa-markets .wwa-lede { color: rgba(255, 255, 255, 0.7); }

/* ---- the map */
.page-about-redesign .markets-map {
	position: relative;
	aspect-ratio: 1200 / 560;
	margin: clamp(1.5rem, 3vw, 2.5rem) auto clamp(2rem, 4vw, 3rem);
}
.page-about-redesign .markets-map img {
	display: block;
	width: 100%;
	height: 100%;
	-webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 60%, transparent 100%);
	mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, #000 60%, transparent 100%);
}
.page-about-redesign .markets-arcs {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.page-about-redesign .markets-arcs path {
	fill: none;
	stroke: #26d07c;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0.6;
	transition: stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.6s;
}
.page-about-redesign .markets-arcs path:nth-child(2) { transition-delay: 0.8s; }
.page-about-redesign .markets-arcs path:nth-child(3) { transition-delay: 1s; }
.page-about-redesign .markets-arcs path:nth-child(4) { transition-delay: 1.2s; }
.page-about-redesign .wwa-markets.is-visible .markets-arcs path { stroke-dashoffset: 0; }
.page-about-redesign .markets-arcs circle {
	fill: #fff;
	opacity: 0;
	filter: drop-shadow(0 0 5px #26d07c) drop-shadow(0 0 10px rgba(38, 208, 124, 0.7));
	transition: opacity 0.6s ease 2.3s;
}
.page-about-redesign .wwa-markets.is-visible .markets-arcs circle { opacity: 1; }

.page-about-redesign .markets-pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 0;
	height: 0;
	opacity: 0;
	transition: opacity 0.6s ease 0.3s;
}
.page-about-redesign .wwa-markets.is-visible .markets-pin { opacity: 1; }
.page-about-redesign .markets-pin i {
	position: absolute;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12);
}
.page-about-redesign .markets-pin.is-market i {
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	background: #26d07c;
	box-shadow: 0 0 0 5px rgba(38, 208, 124, 0.25), 0 0 18px 4px rgba(38, 208, 124, 0.6);
}
/* two rings ripple out from each market */
.page-about-redesign .markets-pin.is-market::before,
.page-about-redesign .markets-pin.is-market::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border: 1.5px solid rgba(38, 208, 124, 0.7);
	border-radius: 50%;
	animation: mk-ripple 2.6s ease-out infinite;
}
.page-about-redesign .markets-pin.is-market::after { animation-delay: 1.3s; }
@keyframes mk-ripple {
	from { opacity: 0.9; scale: 1; }
	to   { opacity: 0; scale: 4.2; }
}
.page-about-redesign .markets-pin b {
	position: absolute;
	top: 0;
	left: 14px;
	translate: 0 -50%;
	padding: 0.3rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 100px;
	background: rgba(10, 20, 23, 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.page-about-redesign .markets-pin.is-left b { left: auto; right: 14px; }
.page-about-redesign .markets-pin.is-market b {
	left: 20px;
	border-color: rgba(38, 208, 124, 0.55);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
}

/* ---- the cards */
.page-about-redesign .wwa-markets .markets-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem;
	margin-top: 0;
}
.page-about-redesign .wwa-markets .market-card {
	padding: 1.75rem 1.85rem 1.85rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.035);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
/* a green line draws across the top on hover */
.page-about-redesign .wwa-markets .market-card::before {
	right: auto;
	width: 0;
	height: 2px;
	transition: width 0.6s var(--ab-ease);
}
.page-about-redesign .wwa-markets .market-card::after {
	background: radial-gradient(120% 90% at 0% 0%, rgba(38, 208, 124, 0.14), transparent 65%);
}
.page-about-redesign .wwa-markets .market-card:hover {
	transform: translateY(-6px);
	border-color: rgba(38, 208, 124, 0.4);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}
.page-about-redesign .wwa-markets .market-card:hover::before { width: 100%; }
.page-about-redesign .wwa-markets .market-card-head {
	gap: 0.9rem;
	margin-bottom: 0.85rem;
}
.page-about-redesign .wwa-markets .market-card-head::before {
	content: "";
	flex: 0 0 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--mk-icon) center / 20px no-repeat, linear-gradient(135deg, #26d07c, #00a499);
	box-shadow: 0 10px 22px -10px rgba(38, 208, 124, 0.8);
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-about-redesign .wwa-markets .market-card:hover .market-card-head::before { transform: rotate(-8deg) scale(1.08); }
.page-about-redesign .wwa-markets .market-card:nth-child(1) { --mk-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206l6-3%206%203%206-3v15l-6%203-6-3-6%203z'/%3E%3Cpath%20d='M9%203v15M15%206v15'/%3E%3C/svg%3E"); } /* Every market is different */
.page-about-redesign .wwa-markets .market-card:nth-child(2) { --mk-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2'/%3E%3Ccircle%20cx='9'%20cy='7'%20r='4'/%3E%3Cpath%20d='M23%2021v-2a4%204%200%200%200-3-3.87'/%3E%3Cpath%20d='M16%203.13a4%204%200%200%201%200%207.75'/%3E%3C/svg%3E"); } /* So is every client */
.page-about-redesign .wwa-markets .market-card:nth-child(3) { --mk-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='10'/%3E%3Cpath%20d='m16.24%207.76-2.12%206.36-6.36%202.12%202.12-6.36z'/%3E%3C/svg%3E"); } /* Ready for new markets */
.page-about-redesign .wwa-markets .market-card:nth-child(4) { --mk-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='18'%20cy='5'%20r='3'/%3E%3Ccircle%20cx='6'%20cy='12'%20r='3'/%3E%3Ccircle%20cx='18'%20cy='19'%20r='3'/%3E%3Cpath%20d='m8.59%2013.51%206.83%203.98M15.41%206.51l-6.82%203.98'/%3E%3C/svg%3E"); } /* Shared knowledge */
.page-about-redesign .wwa-markets .market-card h3 {
	color: #fff;
	font-size: 1.14rem;
	font-weight: 700;
}
.page-about-redesign .wwa-markets .market-card > p {
	margin: 0;
	color: rgba(255, 255, 255, 0.66);
	font-size: 0.94rem;
	line-height: 1.75;
}

@media (max-width: 900px) {
	.page-about-redesign .wwa-markets .markets-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.page-about-redesign .markets-pin:not(.is-market) b { display: none; }
	.page-about-redesign .markets-pin:not(.is-market) i { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }
	.page-about-redesign .markets-pin.is-market b { left: 14px; padding: 0.2rem 0.5rem; font-size: 0.66rem; }
	.page-about-redesign .markets-pin.is-flip-sm b { left: auto; right: 14px; }
	.page-about-redesign .markets-pin.is-market::before,
	.page-about-redesign .markets-pin.is-market::after,
	.page-about-redesign .markets-pin.is-market i { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
}
@media (prefers-reduced-motion: reduce) {
	.page-about-redesign .markets-pin.is-market::before,
	.page-about-redesign .markets-pin.is-market::after { animation: none; display: none; }
	.page-about-redesign .markets-arcs path { stroke-dashoffset: 0; transition: none; }
	.page-about-redesign .markets-arcs circle { display: none; }
	.page-about-redesign .wwa-markets .market-card:hover,
	.page-about-redesign .wwa-markets .market-card:hover .market-card-head::before { transform: none; }
}

/* -------------------------------------------------- Our Vision & Promise */
.page-about-redesign .about-vision {
	padding: clamp(4.5rem, 9vw, 7rem) 1.5rem;
	background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-surface) 100%);
}
.page-about-redesign .about-vision .container { max-width: 1180px; margin: 0 auto; }
.page-about-redesign .about-vision .wwa-head h2 .accent { color: var(--color-accent); }
.page-about-redesign .about-vp-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 1.25rem;
	margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.page-about-redesign .about-vp-card {
	position: relative;
	overflow: hidden;
	padding: clamp(1.8rem, 3vw, 2.5rem);
	border: 1px solid var(--color-border);
	border-radius: var(--ab-radius);
	background: var(--card-bg);
	box-shadow: var(--ab-shadow);
}
.page-about-redesign .about-vp-card.is-vision {
	border-color: transparent;
	background:
		radial-gradient(circle at 100% 0%, rgba(38, 208, 124, 0.22), transparent 55%),
		linear-gradient(135deg, #17262b 0%, #0e181b 100%);
}
.page-about-redesign .about-vp-card .about-vp-label {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	background: rgba(var(--color-accent-rgb), 0.12);
	color: var(--color-accent-hover);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.page-about-redesign .about-vp-card h3 {
	margin: 0 0 1rem;
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-text);
}
.page-about-redesign .about-vp-card p:not(.about-vp-label) {
	margin: 0 0 0.9rem;
	color: var(--color-text-muted);
	font-size: 0.98rem;
	line-height: 1.75;
}
.page-about-redesign .about-vp-card p:last-child { margin-bottom: 0; }
.page-about-redesign .about-vp-card.is-vision h3 { color: #fff; }
.page-about-redesign .about-vp-card.is-vision p:not(.about-vp-label) { color: rgba(255, 255, 255, 0.76); }
.page-about-redesign .about-vp-card.is-vision .about-vp-label { background: rgba(38, 208, 124, 0.18); color: #26d07c; }

.page-about-redesign .about-vision .about-pillars-title {
	margin: 0 0 1.5rem;
	text-align: center;
	font-size: clamp(1.4rem, 2.4vw, 1.85rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-text);
}
.page-about-redesign .about-pillars {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1rem;
}
.page-about-redesign .about-pillar {
	position: relative;
	padding: 1.6rem 1.35rem 1.5rem;
	border: 1px solid var(--color-border);
	border-radius: 18px;
	background: var(--card-bg);
	text-align: center;
	transition: transform 0.5s var(--ab-ease), border-color 0.5s var(--ab-ease), box-shadow 0.5s var(--ab-ease);
}
.page-about-redesign .about-pillar:hover {
	transform: translateY(-6px);
	border-color: rgba(var(--color-accent-rgb), 0.45);
	box-shadow: var(--ab-shadow-lift);
}
.page-about-redesign .about-pillar .growth-card-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
	color: #fff;
	box-shadow: 0 12px 24px -12px rgba(var(--color-accent-rgb), 0.8);
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-about-redesign .about-pillar:hover .growth-card-icon { transform: scale(1.1) rotate(-6deg); }
.page-about-redesign .about-pillar .growth-card-icon svg { width: 24px; height: 24px; }
.page-about-redesign .about-pillar h4 {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text);
}
.page-about-redesign .about-pillar p {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.88rem;
	line-height: 1.6;
}
.page-about-redesign .about-pillars .reveal-item:nth-child(2) { transition-delay: 0.08s; }
.page-about-redesign .about-pillars .reveal-item:nth-child(3) { transition-delay: 0.16s; }
.page-about-redesign .about-pillars .reveal-item:nth-child(4) { transition-delay: 0.24s; }
.page-about-redesign .about-pillars .reveal-item:nth-child(5) { transition-delay: 0.32s; }

.page-about-redesign .about-vision .about-closing {
	max-width: 820px;
	margin: clamp(3rem, 6vw, 4.5rem) auto 0;
	text-align: center;
	color: var(--color-text);
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.015em;
}
.page-about-redesign .about-closing .accent { color: var(--color-accent); }

@media (max-width: 1100px) {
	.page-about-redesign .about-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.page-about-redesign .about-story-grid,
	.page-about-redesign .about-vp-grid,
	.page-about-redesign .wwa-pressure .pressure-grid,
	.page-about-redesign .markets-grid { grid-template-columns: minmax(0, 1fr); }
	.page-about-redesign .about-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.page-about-redesign .about-pillars { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.page-about-redesign .about-pillar:hover,
	.page-about-redesign .about-pillar:hover .growth-card-icon { transform: none; }
}

/* The disciplines heading is centred, so its button is too. */
.page-about-redesign .disciplines-cta { display: flex; justify-content: center; }