/* ⚠ Display measures are in `em`, never `ch`. `ch` is the width of the "0"
   glyph; in this condensed display face that is 0.648em, so `Nch` is barely
   two thirds of the N characters it reads as. Every value below is the exact
   equivalent of the `ch` value it replaced (×0.648), so nothing moved — the
   numbers just stopped lying. See `.axn-exch__head h2` for the case where it
   did move. */
/* Isolated presentation for the homepage comparison template. */
.axn-home {
	--axn-section-y: clamp(56px, 6vw, 84px);
}
.axn-home .axn-header__in { min-height: 90px; }

/* ---- 80vh hero: copy held at optical centre, figures along the base ---- */
.axn-home .axn-hero {
	min-height: 80vh;
	padding-block: clamp(32px, 3.4vw, 52px) clamp(20px, 2.2vw, 30px);
	display: grid;
}
.axn-home .axn-hero__in {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: clamp(24px, 3vw, 44px);
	width: 100%;
}
/* No max-width here. The H1's three lines are their own block elements, so a
   measure on this wrapper wraps every one of them into a narrow column. */
.axn-home .axn-hero__copy { align-self: center; }
/* Scaled off --fs-hero, so the Customizer's hero-size control still drives
   this page — just proportionally smaller, because the base row shares the
   hero and the full 6.5rem would push it well past 80vh. */
/* 15px under the pill. Set on the hero's own H1 rather than on .axn-pillbrow,
   which the "Who we are" section also uses with its own rhythm. */
.axn-home .axn-hero__h { margin-top: 15px; font-size: calc(var(--fs-hero) * .86); line-height: 1.0; letter-spacing: -.035em; max-width: none; }
/* Both set per image from the page editor; the literals are the fallbacks.

   ⚠ The default is 1 — the picture is NOT pre-dimmed any more. The overlay is
   a diagonal now and does the darkening where the words are, so dimming the
   image as well darkens it twice and the "almost transparent" right-hand side
   never appears. Turn a specific bright photo down with the per-page control;
   do not put a blanket dim back here. */
.axn-home .axn-hero__img {
	opacity: var(--axn-hero-strength, 1);
	object-position: var(--axn-hero-focal, 75% 50%);
}
.axn-home .axn-hero__lead {
	max-width: 56ch; margin-top: clamp(20px, 2.4vw, 30px);
	font-size: clamp(.9375rem, .9rem + .3vw, 1.0625rem);
	line-height: 1.6; color: rgba(255,255,255,.86);
}

/* ---- The pill eyebrow from the reference: white chip, small square, mono. */
/* Metrics come from `.axn-eyebrow, .axn-pillbrow, …` in main.css — one eyebrow
   site-wide. Only the ground differs per context. */

/* ---- The base row: counted figures left, the offer and both buttons right. */
.axn-home .axn-hero__base {
	align-self: end;
	border-top: 1px solid rgba(255,255,255,.2);
	padding-top: clamp(18px, 2.2vw, 28px);
	display: grid; gap: clamp(20px, 2.6vw, 34px); align-items: end;
}
.axn-home .axn-hero__marks {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: clamp(16px, 3.4vw, 56px);
}
.axn-home .axn-hero__marks li {
	display: inline-flex; align-items: baseline; gap: 8px;
	/* ⚠ Was 11px at 62% white — under 3:1 on the plate and hard to read at a
	   glance. 12px at 82% clears AA for non-body text and still reads as a
	   quiet technical label rather than as copy. */
	font-family: var(--ff-mono); font-size: 12px; letter-spacing: .07em;
	text-transform: uppercase; color: rgba(255,255,255,.82);
	font-variant-numeric: tabular-nums;
}
.axn-home .axn-hero__marks span { color: var(--axn-gold); }

.axn-home .axn-hero__side { display: grid; gap: 18px; justify-items: start; }
/* Two rows in the field, so a <br> guarantees two lines. The measure has to
   clear the LONGER of the two (56 characters) or that row wraps and the block
   becomes three lines — which is what it was doing. Sized down to match. */
/* ⚠ This line sits bottom-RIGHT, which is exactly the corner the diagonal
   overlay leaves almost clear so the photograph can show. On a bright picture
   white-on-light is unreadable there. The shadow protects this one paragraph
   instead of darkening the whole right-hand side, which would undo the point
   of the diagonal. Keep it if the overlay is ever retuned. */
.axn-home .axn-hero__offer {
	margin: 0; max-width: 58ch;
	font-size: clamp(.875rem, .83rem + .26vw, 1rem);
	line-height: 1.45; letter-spacing: -.01em; color: #fff;
	text-shadow: 0 1px 2px rgba(6, 5, 3, .9), 0 0 16px rgba(6, 5, 3, .75);
}
/* ---- The three routes, under the paragraph that explains the business -----
   They used to live in the base row, 209px below the lede with the counted
   figures in between, so the sentence that says what Axion does and the doors
   that act on it were read as two unrelated blocks. */
.axn-home .axn-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 2.2vw, 28px); }

/* ⚠ A THIRD button style was needed, not a third green one. Two solid greens
   plus a white would have read as two primaries and a secondary; the three
   routes are peers — a rep, a provider and a household — so the third is an
   outline in the same size. Size and padding still come from the shared
   `.axn-pill` rule; only the skin differs. */
.axn-home .axn-pill--ghost {
	background: transparent; color: #fff;
	border: 1px solid rgba(255,255,255,.45);
	box-shadow: none;
}
.axn-home .axn-pill--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }

/* What Axion legally is, said once and plainly, where it is actually read.
   It was an 11px mono chip at 62% white in the counted-figures row. */
.axn-home .axn-hero__dealer {
	margin: clamp(14px, 1.6vw, 20px) 0 0;
	font-family: var(--ff-tech); font-size: 11.5px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--axn-gold);
	display: inline-flex; align-items: center; gap: 10px;
}
.axn-home .axn-hero__dealer::before {
	content: ""; width: 22px; height: 1px; background: var(--axn-gold); flex: none;
}

@media (min-width: 900px) {
	.axn-home .axn-hero__base { grid-template-columns: 1fr auto; align-items: center; }
	.axn-home .axn-hero__side { justify-items: end; text-align: right; }
}

/* ---- Pill buttons with the corner arrow. */
/* Metrics come from `.axn-btn, .axn-pill` in main.css — one size site-wide.
   Only the colours differ here. */
.axn-pill:hover { transform: translateY(-2px); }
.axn-pill--green { background: var(--axn-green); color: #fff; }
.axn-pill--green:hover { background: var(--axn-green-bright); color: #fff; }
.axn-pill--light { background: #fff; color: var(--axn-ink); }
.axn-pill--light:hover { background: var(--axn-bg); color: var(--axn-ink); }

.axn-home .axn-eyebrow { letter-spacing: .16em; }
/* ---- Dealer strip: the reference's client bar — white, one line, the claim
   held on the left behind a rule, the names running past it on the right. ---- */
.axn-home .axn-provrow {
	background-color: #fff;
	background-image: none;
	border-bottom: 1px solid rgba(22,20,14,.1);
	padding-block: clamp(16px, 2vw, 24px);
	overflow: hidden;
}
.axn-home .axn-provrow__in {
	display: grid; gap: 14px; align-items: center;
	max-width: var(--axn-container); margin-inline: auto;
	padding-inline: var(--axn-gutter);
}
.axn-home .axn-provrow__label {
	display: flex; align-items: center; gap: 13px; margin: 0;
	font-family: var(--ff-mono); font-size: 10px; line-height: 1.6;
	letter-spacing: .1em; text-transform: uppercase; color: var(--axn-ink-2);
}
.axn-home .axn-provrow__star { font-size: 22px; color: var(--axn-ink); line-height: 1; flex: 0 0 auto; }
/* The track is `width: max-content`, so without its own clip it spills out of
   its grid column and runs straight over the label beside it. */
.axn-home .axn-marquee { position: relative; min-width: 0; overflow: hidden; }
.axn-home .axn-marquee::before,
.axn-home .axn-marquee::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: clamp(28px, 5vw, 90px); z-index: 2; pointer-events: none; display: block;
}
.axn-home .axn-marquee::before { left: 0; background: linear-gradient(90deg, #fff 0%, #fff 38%, transparent 100%); }
.axn-home .axn-marquee::after  { right: 0; background: linear-gradient(270deg, #fff 0%, #fff 38%, transparent 100%); }

.axn-home .axn-marquee__track {
	display: flex; align-items: center; width: max-content; flex-wrap: nowrap; gap: 0;
	animation: axn-slide 38s linear infinite;
}
.axn-home .axn-marquee:hover .axn-marquee__track,
.axn-home .axn-marquee:focus-within .axn-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.axn-home .axn-marquee__track { animation: none; }
	.axn-home .axn-marquee { overflow-x: auto; }
	.axn-home .axn-marquee__track [aria-hidden="true"] { display: none; }
}

.axn-home .axn-marquee__item {
	display: inline-flex; align-items: center; gap: clamp(22px, 2.6vw, 42px);
	padding-right: clamp(22px, 2.6vw, 42px);
	font-family: var(--ff-display); font-weight: 700;
	font-size: clamp(.9375rem, .88rem + .3vw, 1.125rem);
	letter-spacing: -.01em;
	color: var(--axn-ink); white-space: nowrap;
	transition: color var(--axn-dur) ease;
}
.axn-home .axn-marquee__item:hover { color: var(--axn-gold-deep); }
.axn-home .axn-marquee__item::after {
	content: ""; width: 5px; height: 5px; border-radius: 50%;
	background: rgba(22,20,14,.22); flex: 0 0 auto;
}
@media (min-width: 760px) {
	.axn-home .axn-provrow__in { grid-template-columns: minmax(0, 262px) minmax(0, 1fr); gap: clamp(20px, 3vw, 46px); }
	.axn-home .axn-provrow__label { border-right: 1px solid rgba(22,20,14,.14); padding-right: clamp(18px, 2.2vw, 32px); }
}

/* ---- "Who we are": the statement, and the link that answers it. ---- */
/* --onLight is the default ground now; the modifier is a no-op. */
.axn-home .axn-who { padding-block: clamp(62px, 8vw, 116px) clamp(34px, 4.4vw, 62px); }
/* The statement runs to roughly four-fifths of the column rather than a
   character measure, so it breaks where the client asked rather than wherever
   20ch happened to land. */
.axn-home .axn-who__h {
	margin: clamp(22px, 2.8vw, 34px) 0 0;
	font-size: clamp(1.875rem, .9rem + 3.6vw, 3.5rem);
	line-height: 1.12; letter-spacing: -.03em; max-width: 78%;
}
@media (max-width: 860px) { .axn-home .axn-who__h { max-width: none; } }
/* The sentence turns at the client's own em dash: the consequence drops to a
   lighter ink so the eye reads the claim first and the condition second. */
.axn-home .axn-who__tail { color: var(--axn-ink-3); }
.axn-home .axn-who__more {
	margin: clamp(22px, 3vw, 38px) 0 0;
	display: flex; flex-wrap: wrap; justify-content: flex-end;
	gap: clamp(18px, 3vw, 44px);
}
/* Metrics come from the shared inline-link rule in main.css — `.axn-link`,
   `.axn-dotlink` and `.axn-flink` are one treatment now. The arrow behaviour
   is shared too; see `.axn-ar`. */

/* ---- White variant: the moment a real provider mark is uploaded, the band
   turns over. Brand logos are drawn for a white ground and most are supplied
   as dark-on-transparent, so keeping the dark band would force every one of
   them into a knocked-out treatment the dealer agreements do not allow us to
   make. Until then, `--art` is never set and the dark wordmark band stands. ---- */
.axn-home .axn-provrow--art {
	background-color: #fff;
	background-image: none;
	border-block-color: rgba(22,20,14,.1);
	padding-block: 22px 24px;
}
.axn-home .axn-provrow--art .axn-provrow__label { color: var(--axn-gold-deep); }
.axn-home .axn-provrow--art .axn-marquee::before { background: linear-gradient(90deg, #fff 0%, #fff 38%, transparent 100%); }
.axn-home .axn-provrow--art .axn-marquee::after  { background: linear-gradient(270deg, #fff 0%, #fff 38%, transparent 100%); }
.axn-home .axn-provrow--art .axn-marquee__item { color: var(--axn-ink-2); }
.axn-home .axn-provrow--art .axn-marquee__item:hover { color: var(--axn-ink); }
.axn-home .axn-provrow--art .axn-marquee__item::after { background: rgba(22,20,14,.22); }

/* Logos arrive at every shape and weight. Fixing the HEIGHT and letting width
   run free is the only way a wide wordmark and a square mark read as the same
   size; `max-width` then stops an unusually long lockup dominating the rail. */
.axn-home .axn-marquee__item--logo { padding-right: clamp(20px, 2.6vw, 42px); }
.axn-home .axn-marquee__logo {
	height: clamp(22px, 2.2vw, 30px); width: auto; max-width: 168px;
	object-fit: contain; display: block;
	opacity: .82; transition: opacity var(--axn-dur) ease;
}
.axn-home .axn-marquee__item--logo:hover .axn-marquee__logo { opacity: 1; }

.axn-home .axn-career__copy--editorial { grid-column: 1 / -1; display: grid; grid-template-columns: .9fr 1.1fr; column-gap: clamp(32px, 6vw, 90px); align-items: start; }
.axn-home .axn-career__copy--editorial .axn-eyebrow { grid-column: 1; grid-row: 1; }
.axn-home .axn-career__copy--editorial h2 { grid-column: 1; grid-row: 2 / 5; max-width: 11.66em; }
.axn-home .axn-career__copy--editorial > p:not(.axn-eyebrow),
.axn-home .axn-career__copy--editorial > a { grid-column: 2; }
.axn-home .axn-career__copy--editorial .axn-lede { grid-row: 2; }
.axn-home .axn-career__copy--editorial > p:not(.axn-eyebrow):not(.axn-lede) { grid-row: 3; }
.axn-home .axn-career__copy--editorial > a { grid-row: 4; justify-self: start; }
.axn-home .axn-career__copy p { color: var(--axn-ink-2); }
.axn-home .axn-products .axn-sechead { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.axn-home .axn-products .axn-sechead .axn-eyebrow { grid-column: 1 / -1; }
.axn-home .axn-products .axn-sechead h2 { max-width: 14.9em; }
.axn-home .axn-products .axn-sechead .axn-lede { margin: 0; color: var(--axn-ink-2); }
.axn-home .axn-products__more { margin: clamp(20px, 2.4vw, 28px) 0 0; }

/* The numbered product rows are a shared component now (main.css) — the
   Products & Providers page uses the same list, so there is one definition. */

/* ---- Provider band: dark, with the A-mark bleeding off the right ----
   This is the one section on the page addressed to providers rather than
   recruits, so it wants to feel different from the warm career content either
   side of it. It was a gold plate; dark reads more serious, reuses the mark
   already loaded for the quote card, and keeps the page's white-on-dark rule.
   Scoped to .axn-home — the ISP page and Careers keep their gold bands. */
.axn-home .axn-gold {
	background-color: var(--axn-dark);
	background-image:
		url("../images/tex-grain.png"),
		linear-gradient(120deg, var(--axn-dark-2), var(--axn-dark) 62%);
	background-size: 240px 240px, cover;
}
/* The mark is anchored right so the burst sprays across the empty half rather
   than behind the copy. The `content:` swap that used to live here is gone —
   the <img> carries the right file now, so nothing is fetched twice. */
.axn-home .axn-gold__art {
	object-fit: contain; object-position: 100% 60%;
	opacity: .3;
	width: 52%; left: auto; right: -11%;
	/* Drifting, like every other burst on the site. Transform only, so it runs
	   on the compositor and never repaints the band underneath it. */
	will-change: transform;
	animation: axn-burst-drift 34s ease-in-out infinite alternate;
	/* Fades in from the left AND out at the top, so the numbered list on the
	   right keeps a quiet ground to sit on. Without this the burst runs straight
	   through the copy. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 52%), linear-gradient(180deg, transparent, #000 38%);
	        mask-image: linear-gradient(90deg, transparent, #000 52%), linear-gradient(180deg, transparent, #000 38%);
	-webkit-mask-composite: source-in;
	        mask-composite: intersect;
}
.axn-home .axn-gold__h { color: #fff; }
.axn-home .axn-gold__lede { color: var(--axn-dark-text); }
.axn-home .axn-gold__p { color: var(--axn-dark-dim); }
.axn-home .axn-gold .axn-eyebrow--onGold { color: var(--axn-gold); }
.axn-home .axn-gold .axn-eyebrow--onGold::before { background: var(--axn-gold); }
.axn-home .axn-gold__list li {
	color: var(--axn-dark-text);
	border-top-color: rgba(255,255,255,.16);
}
.axn-home .axn-gold__list li:last-child { border-bottom-color: rgba(255,255,255,.16); }
.axn-home .axn-gold__n { color: var(--axn-gold); }
/* A low gold glow rising from the bottom left, balancing the mark on the right
   so the band isn't weighted entirely to one side. Painted after .axn-gold__art
   in tree order, so it sits over the mark's faded edge rather than under it. */
.axn-home .axn-gold::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: clamp(-160px, -8vw, -60px); bottom: clamp(-190px, -20vw, -90px);
	width: clamp(320px, 44vw, 700px); aspect-ratio: 1.3;
	background: radial-gradient(closest-side, rgba(212,175,55,.19), rgba(246,226,155,.075) 52%, transparent 76%);
}

/* The black-on-gold button has nothing to sit on now. */
.axn-home .axn-gold .axn-btn--onGold { background: var(--axn-green); color: #fff; }
.axn-home .axn-gold .axn-btn--onGold:hover { background: var(--axn-green-hi); }
.axn-home .axn-person__ph { aspect-ratio: 1; background-image: url("../images/tex-grain.png"), linear-gradient(145deg, var(--axn-edge-soft), var(--axn-bg-2)); }
.axn-home .axn-person__initial { opacity: .65; }
/* The founder quote carries the hero's fiber burst, drifting slowly.
   Three layers: the burst (0) · a scrim and corner glow (1) · the words (2).
   The burst is a real element, not a background layer, so the movement is a
   `transform` the compositor handles rather than a background-position repaint. */
.axn-home .axn-dual__card .axn-btn { margin-top: auto; }
.axn-home .axn-footer__plate { opacity: .12; }
.axn-home .axn-fribbon { padding-block: 30px; }
.axn-home .axn-fribbon__item { font-size: clamp(1.4rem, 3vw, 2.3rem); }
.axn-home :is(.axn-hero, .axn-band, .axn-footer) :focus-visible { outline-color: var(--axn-gold-hi); }
@media (max-width: 760px) {
	.axn-home .axn-career__copy--editorial,
	.axn-home .axn-products .axn-sechead { display: block; }
	.axn-home .axn-career__copy--editorial h2 { max-width: 14.25em; }
	.axn-home .axn-products .axn-sechead .axn-lede { margin-top: 20px; }
	.axn-home .axn-hero__cta { gap: 12px; }
	.axn-home .axn-hero__cta .axn-btn { width: 100%; justify-content: center; }
	.axn-home .axn-provrow__label { line-height: 1.8; }
}

/* ---- The three routes, on a pinned media column (the Brevo pattern) ----
   The picture holds still while the copy scrolls past it and swaps as each
   block takes its turn. The active block is in full ink; the others sit back
   far enough to read as queued rather than disabled. ---- */
.axn-home .axn-stack {
	padding-block: clamp(38px, 4.6vw, 64px) clamp(44px, 5vw, 76px);
	/* The picture and each block of copy are the SAME height. That is what
	   keeps them level: both are centred on their own box, so the first row
	   lines up with the first picture from the very first frame instead of
	   sitting half a screen below it. */
	/* ⚠ This drives the WHOLE section's height: the pin lasts `list − picture`,
	   so the picture's height sets how far the page scrolls before the pin
	   releases. At 62vh the three routes cost 1,777px — 22% of the homepage for
	   content that is teased again in full further down. Shorter picture, same
	   arithmetic, same behaviour, materially less scrolling. */
	--axn-stack-h: clamp(360px, 48vh, 500px);
}
.axn-home .axn-stack__in { display: grid; gap: clamp(30px, 4vw, 64px); align-items: start; }

/* The media column. `align-self: start` matters: a grid item stretches by
   default, and a stretched item cannot stick. */
.axn-home .axn-stack__media {
	position: relative; align-self: start;
	border-radius: 22px; overflow: hidden;
	background: var(--axn-dark);
	height: var(--axn-stack-h);
}
.axn-home .axn-stack__shot {
	position: absolute; inset: 0; margin: 0;
	opacity: 0; transition: opacity .5s var(--axn-ease);
}
.axn-home .axn-stack__shot.is-on { opacity: 1; }
.axn-home .axn-stack__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.axn-home .axn-stack__list { list-style: none; margin: 0; padding: 0; display: grid; }
.axn-home .axn-stack__row {
	display: grid; align-content: center; gap: 14px;
	transition: opacity .45s var(--axn-ease);
}
/* Shares the one eyebrow; see main.css. */
.axn-home .axn-stack__eyebrow { justify-self: start; }
.axn-home .axn-stack__h {
	margin: 0; font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.75rem);
	line-height: 1.1; letter-spacing: -.03em; max-width: 11.66em;
}
.axn-home .axn-stack__p { margin: 0; font-size: var(--fs-lede); line-height: 1.65; color: var(--axn-ink-2); max-width: 52ch; }
.axn-home .axn-stack__cta { justify-self: start; margin-top: 4px; }

/* Below the breakpoint the media cannot pin against a single column, so the
   section becomes an ordinary stacked list and every row shows in full. */
@media (max-width: 900px) {
	.axn-home .axn-stack__media { height: auto; aspect-ratio: 16 / 10; }
	.axn-home .axn-stack__row { padding-block: clamp(26px, 5vw, 40px); }
	.axn-home .axn-stack__row + .axn-stack__row { border-top: 1px solid var(--axn-edge); }
}

@media (min-width: 901px) {
	.axn-home .axn-stack__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); }
	/* Pinned so its centre sits on the centre of the screen — the same line
	   every row centres on. */
	/* The pin is measured against .axn-stack__hold. It is the FULL height of the
	   list, and that is the arithmetic that makes the ending work: the pin lasts
	   `list - picture` = 2 rows + 2 gaps, which is exactly the distance from the
	   first row being centred to the last one being centred. So the picture lets
	   go at the instant the last row arrives, and from there the two rise
	   together. Shortening this releases the picture early and the last row is
	   left with nothing beside it. */
	.axn-home .axn-stack__hold { height: 100%; }
	.axn-home .axn-stack__media { position: sticky; top: calc((100vh - var(--axn-stack-h)) / 2); }
	.axn-home .axn-stack__row { min-height: var(--axn-stack-h); }
	/* Space BETWEEN the rows rather than inside them: padding would push the
	   copy off the centre line it is supposed to share with the picture. */
	.axn-home .axn-stack__row + .axn-stack__row { margin-top: clamp(80px, 14vh, 170px); }

	.axn-js .axn-home .axn-stack__row { opacity: .34; }
	.axn-js .axn-home .axn-stack__row.is-on { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.axn-home .axn-stack__shot, .axn-home .axn-stack__row { transition: none; }
	.axn-js .axn-home .axn-stack__row { opacity: 1; }
}


/* A rule under the statement, so it closes rather than running into the
   section beneath it. */
.axn-home .axn-who--ruled { border-bottom: 1px solid var(--axn-edge); }

/* ---- What Axion actually does: the page's one dark section --------------
   The proof behind the ISP row in the stack above, not a second pitch. Set in
   the hero's vocabulary — pill eyebrow, pill button, the mark drifting on the
   right — so the dark anchor belongs to the same page as everything else. ---- */
.axn-home .axn-does {
	position: relative; isolation: isolate; overflow: clip;
	background-color: var(--axn-dark);
	background-image: url("../images/tex-grain.png");
	background-size: 240px 240px;
	color: var(--axn-dark-text);
	padding-block: clamp(62px, 8vw, 116px);
}
/* The A-mark, drifting, masked away from the copy. */
.axn-home .axn-does__art {
	position: absolute; z-index: -1; pointer-events: none;
	top: 50%; right: -9%; translate: 0 -50%;
	width: 54%; max-width: 900px; height: auto;
	object-fit: contain; opacity: .3;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 54%);
	        mask-image: linear-gradient(90deg, transparent, #000 54%);
	will-change: transform;
	animation: axn-burst-drift 34s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) { .axn-home .axn-does__art { animation: none; } }

.axn-home .axn-does__in { display: grid; gap: clamp(32px, 4.4vw, 72px); align-items: center; }
.axn-home .axn-does__copy { display: grid; justify-items: start; gap: clamp(16px, 2vw, 24px); }
/* --onDark is handled by the shared rule in main.css. */
.axn-home .axn-does__h {
	margin: 0; color: #fff; max-width: 9.72em;
	font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
	line-height: 1.06; letter-spacing: -.03em;
}
.axn-home .axn-does__lede { margin: 0; max-width: 46ch; font-size: var(--fs-lede); line-height: 1.65; color: var(--axn-dark-dim); }
.axn-home .axn-does__cta { margin-top: 4px; }

/* Capabilities, not a sequence — hence ticks rather than 01–06. The products
   list immediately below IS numbered, and two numbered lists in a row read as
   one long list. */
.axn-home .axn-does__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.axn-home .axn-does__list li {
	display: flex; align-items: baseline; gap: 14px;
	padding-block: clamp(13px, 1.6vw, 18px);
	border-bottom: 1px solid rgba(255,255,255,.14);
	font-size: clamp(.9375rem, .9rem + .3vw, 1.0625rem);
	line-height: 1.45; color: var(--axn-dark-text);
}
.axn-home .axn-does__list li:first-child { border-top: 1px solid rgba(255,255,255,.14); }
.axn-home .axn-does__tick {
	flex: 0 0 auto; display: grid; place-items: center;
	width: 22px; height: 22px; border-radius: 50%;
	/* ⚠ Gold, not green. Green is reserved for things you can ACT on — the
	   three hero routes, the buttons. A tick is a statement of fact, and six of
	   them in green competed with the one green button on the page for the same
	   meaning. Gold is the accent role. */
	background: rgba(212,175,55,.92); color: var(--axn-dark); translate: 0 3px;
}
@media (min-width: 900px) {
	.axn-home .axn-does__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* ---- Ambient ground -----------------------------------------------------
   The statement and the three routes are long stretches of near-white with a
   lot of air in them. These are two soft blooms — the brand's gold and green —
   drifting slowly behind the copy so the space reads as lit rather than empty.

   Rules that keep it from becoming a distraction:
     · it sits at z-index -1 and never takes a pointer event;
     · it moves on TRANSFORM only, so it runs on the compositor and never
       repaints the text over it;
     · the cycles are long (48s and 62s) and deliberately different, so the two
       never fall into a visible rhythm together;
     · the alphas are low enough that the blooms read as warmth in the paper
       rather than as shapes you look at.
   ---------------------------------------------------------------------- */
/* ⚠ `overflow: clip`, NEVER `hidden`. `hidden` makes this section a scroll
   container, and a scroll container disables `position: sticky` inside it —
   adding the blooms with `hidden` silently un-pinned the media column and the
   whole three-route effect stopped working. `clip` crops the blooms without
   creating a scroll container, so the pin survives.
   (`.axn-who` has nothing sticky in it and keeps plain `hidden`, which has
   wider support on old Safari.) */
.axn-home .axn-ambient { position: relative; isolation: isolate; overflow: hidden; }
.axn-home .axn-stack.axn-ambient { overflow: clip; }
.axn-home .axn-ambient::before,
.axn-home .axn-ambient::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	border-radius: 50%;
	will-change: transform;
}
.axn-home .axn-ambient::before {
	top: -18%; left: -14%;
	width: clamp(420px, 52vw, 900px); aspect-ratio: 1;
	background: radial-gradient(closest-side, rgba(212,175,55,.20), rgba(246,226,155,.08) 52%, transparent 74%);
	animation: axn-drift-a 48s ease-in-out infinite alternate;
}
.axn-home .axn-ambient::after {
	bottom: -22%; right: -12%;
	width: clamp(380px, 46vw, 820px); aspect-ratio: 1;
	background: radial-gradient(closest-side, rgba(46,125,34,.16), rgba(87,179,59,.06) 52%, transparent 74%);
	animation: axn-drift-b 62s ease-in-out infinite alternate;
}
@keyframes axn-drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(9%, 7%, 0) scale(1.14); }
}
@keyframes axn-drift-b {
	from { transform: translate3d(0, 0, 0) scale(1.08); }
	to   { transform: translate3d(-8%, -6%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.axn-home .axn-ambient::before,
	.axn-home .axn-ambient::after { animation: none; }
}

/* ---- The call that opens out --------------------------------------------
   Container width at rest, full edge of the screen once you have scrolled it
   into view. `--axn-open` runs 0 → 1 and everything reads off it.

   ⚠ The widening is a CLIP, not a width. The panel is full-bleed the whole
   time and `clip-path` pulls its edges in; animating real width (or margin)
   would relayout the page on every frame of the scroll. Paint, not layout.

   It runs both ways: scroll back up and the panel draws in to the container's
   width and takes its rounded corners back.

   With no JavaScript `--axn-open` is never set, so the fallback value of 1
   applies and the panel simply renders full width. Nothing is hidden. ------- */
.axn-home .axn-xcta { padding-block: clamp(10px, 2vw, 26px) clamp(36px, 5vw, 70px); }
.axn-home .axn-xcta__panel {
	--o: var(--axn-open, 1);
	position: relative; isolation: isolate; overflow: hidden;
	/* The inset goes from the page's side margin down to nothing — but with a
	   floor of 5vw. On a 1440 laptop the container is 1340, so the true margin
	   is 50px a side and the panel would open by a barely visible 100px. The
	   floor keeps the gesture readable on a laptop while still resting at the
	   container's own edge on a wide monitor, where the margin is the larger
	   of the two. */
	--inset: calc(max((100vw - min(var(--axn-container), 100vw - var(--axn-gutter) * 2)) / 2, 5vw) * (1 - var(--o)));
	--r: calc(30px * (1 - var(--o)));
	clip-path: inset(0 var(--inset) 0 var(--inset) round var(--r));
	background-color: var(--axn-dark);
	background-image: url("../images/tex-grain.png");
	background-size: 240px 240px;
	padding-block: clamp(56px, 8vw, 120px);
	/* Short, and linear. The value is refreshed every frame from rAF, so this
	   only has to paper over a dropped frame — anything longer and the panel
	   lags behind the scroll instead of following it. */
	transition: clip-path .1s linear;
}

/* The burst: the mark's fibre spray, travelling.
   In the logo the light leaves the point inside the A as a DIRECTIONAL FAN of
   filaments — about a quarter turn of arc, thrown right, sown with sparkles.
   Here it also moves: the filaments run continuously outward from the point,
   the way light does out of the hole.

   How the travel works. The wrapper carries the MASKS and nothing else; its
   two pseudo-elements carry the paint and each scale up from the centre on the
   same loop, one half a cycle behind the other. Because the wrapper's centre
   IS the origin point, scaling from it reads as filaments running outward, and
   the second layer arrives before the first has faded so the stream never
   gaps. Transform and opacity only, so both layers stay on the compositor.

   The mask lives on the wrapper so it clips both layers at once — and clips
   them at a FIXED size, which is what stops the growing layers from spilling
   out of the arc as they expand. */
/* The xcta burst is the shared `.axn-rays` component (main.css) — only its
   placement and its tie to the panel's open state live here. */
.axn-home .axn-xcta__rays {
	top: 50%; left: 20%; translate: -50% -50%;
	width: 175vmax;
	opacity: calc(.5 + .5 * var(--o));
}

/* The point the spray leaves from, with the mark's ring around it. */
.axn-home .axn-xcta__core {
	position: absolute; z-index: -1; pointer-events: none;
	top: 50%; left: 20%; translate: -50% -50%;
	width: clamp(300px, 40vw, 720px); aspect-ratio: 1;
	background:
		radial-gradient(closest-side, rgba(255,255,255,.95), rgba(246,226,155,.5) 1.2%, rgba(246,226,155,.13) 2.6%, transparent 4%),
		radial-gradient(closest-side, transparent 5.4%, rgba(212,175,55,.3) 5.8%, transparent 6.4%),
		radial-gradient(closest-side, rgba(212,175,55,.15), rgba(46,125,34,.06) 38%, transparent 64%);
}
@media (prefers-reduced-motion: reduce) {
	.axn-home .axn-xcta__rays { animation: none; }
	/* One layer, held still and fully drawn — the spray still reads, it just
	   does not travel. */
	.axn-home .axn-xcta__rays::before { animation: none; transform: scale(1); opacity: 1; }
	.axn-home .axn-xcta__rays::after { display: none; }
	.axn-home .axn-xcta__panel { transition: none; }
}

.axn-home .axn-xcta__in { display: grid; justify-items: center; text-align: center; gap: clamp(16px, 2vw, 22px); }
/* ⚠ The eyebrow carries `justify-self: start` from the shared rule in main.css
   — that exists to stop pills stretching in grid parents, but it also beats
   this container's `justify-items: center`, which is why the pill sat off to
   the left of a centred panel. Centred contexts have to say so. */
.axn-home .axn-xcta__in .axn-pillbrow { justify-self: center; }
.axn-home .axn-xcta__h {
	margin: 0; color: #fff; max-width: 15.55em;
	font-size: clamp(1.625rem, 1.05rem + 2.1vw, 2.875rem);
	line-height: 1.08; letter-spacing: -.03em;
	/* ⚠ NOT `text-wrap: balance` here. Balance is free to pick the line count,
	   and at this measure it settled on two lines rather than the three that
	   were asked for. The `ch` measure is doing the work instead. */
}
.axn-home .axn-xcta__p { margin: 0; max-width: 58ch; font-size: var(--fs-lede); line-height: 1.65; color: var(--axn-dark-dim); }
.axn-home .axn-xcta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

/* The availability disclaimer under the call — his wording, set quiet. */
.axn-home .axn-xcta__note {
	margin: clamp(10px, 1.6vw, 16px) 0 0; max-width: 72ch;
	font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.52);
}

/* ---- Service areas, on the light ground --------------------------------
   This section used to be a dark band, which stacked it straight under the
   dark "We Meet the Market Where It Is" — two slabs with a seam between them.
   It is light here so the page keeps alternating: dark proof → light markets →
   alt founders → light close.

   ⚠ Scoped to `.axn-markets`. The `.axn-mk__*` classes underneath are SHARED
   with the Careers page, where this same list still runs on a dark band, so
   the dark values stay the default in main.css and only this page overrides
   them. Recolour the base classes and Careers goes white on white. ------- */
.axn-home .axn-markets .axn-markets__copy p { color: var(--axn-ink-2); }
.axn-home .axn-markets .axn-lede { color: var(--axn-ink-2); }
.axn-home .axn-markets__note {
	border-top-color: var(--axn-edge);
	color: var(--axn-ink-3) !important;
}
.axn-home .axn-markets .axn-mk { border-top-color: var(--axn-edge); }
.axn-home .axn-markets .axn-mk:last-child { border-bottom-color: var(--axn-edge); }
.axn-home .axn-markets .axn-mk__state { color: var(--axn-ink); }
.axn-home .axn-markets .axn-mk__state:hover { color: var(--axn-gold-deep); }
.axn-home .axn-markets .axn-mk__count { color: var(--axn-gold-deep); }
/* The arrow follows the site-wide rule now — it had its own opacity/translate
   hover here, which out-specified `.axn-ar` and left these the only arrows on
   the site behaving differently. */
.axn-home .axn-markets .axn-mk__state svg { color: var(--axn-gold-deep); opacity: 1; }
.axn-home .axn-markets .axn-mk__item a {
	border-color: var(--axn-edge); color: var(--axn-ink-3); background: var(--axn-surface);
}
.axn-home .axn-markets .axn-mk__item a:hover {
	color: var(--axn-ink); border-color: var(--axn-gold); background: rgba(212,175,55,.12);
}

/* ---- Questions ----------------------------------------------------------
   Built on <details>/<summary>: keyboard operable, openable by the browser's
   own find-in-page, and it works with JavaScript off — which also means the
   answers are real text in the DOM, not injected, so the FAQPage schema
   beside them describes something a crawler can actually see. ------------- */
.axn-home .axn-faq { padding-block: clamp(56px, 7vw, 100px); }
.axn-home .axn-faq__in { display: grid; gap: clamp(26px, 3.4vw, 52px); align-items: start; }
.axn-home .axn-faq__h {
	margin: clamp(16px, 2vw, 22px) 0 0;
	font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.75rem);
	line-height: 1.08; letter-spacing: -.03em; max-width: 8.42em;
}
.axn-home .axn-faq__list { display: grid; border-top: 1px solid var(--axn-edge); }
.axn-home .axn-faq__item { border-bottom: 1px solid var(--axn-edge); }
.axn-home .axn-faq__q {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
	padding: clamp(18px, 2.2vw, 24px) 0; cursor: pointer; list-style: none;
	font-family: var(--ff-display); font-weight: 600;
	font-size: clamp(1rem, .95rem + .4vw, 1.25rem);
	line-height: 1.35; letter-spacing: -.018em; color: var(--axn-ink);
	transition: color var(--axn-dur) ease;
}
/* Safari draws its own triangle; this is the documented way to remove it. */
.axn-home .axn-faq__q::-webkit-details-marker { display: none; }
.axn-home .axn-faq__q:hover { color: var(--axn-gold-deep); }
.axn-home .axn-faq__item:focus-within .axn-faq__q { color: var(--axn-gold-deep); }
/* A plus that becomes a minus — drawn, so there is no icon to load. */
.axn-home .axn-faq__sign {
	position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px;
}
.axn-home .axn-faq__sign::before,
.axn-home .axn-faq__sign::after {
	content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px;
	background: var(--axn-gold-deep); translate: 0 -50%;
	transition: transform var(--axn-dur-l) var(--axn-ease);
}
.axn-home .axn-faq__sign::after { transform: rotate(90deg); }
.axn-home .axn-faq__item[open] .axn-faq__sign::after { transform: rotate(0deg); }
.axn-home .axn-faq__a { padding: 0 0 clamp(18px, 2.2vw, 26px); max-width: 68ch; }
.axn-home .axn-faq__a p { margin: 0; line-height: 1.7; color: var(--axn-ink-2); }
@media (min-width: 900px) {
	.axn-home .axn-faq__in { grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr); column-gap: clamp(34px, 5vw, 80px); }
	.axn-home .axn-faq__head { position: sticky; top: calc(var(--axn-hdr, 92px) + 40px); }
}
@media (prefers-reduced-motion: reduce) {
	.axn-home .axn-faq__sign::before, .axn-home .axn-faq__sign::after { transition: none; }
	.axn-home .axn-faq__head { position: static; }
}