/*
 * AscendServ — main stylesheet
 *
 * Structure: tokens, reset, layout, typography, components, page blocks,
 * then a small utilities block. Breakpoints are 600 / 860 / 1080px.
 */

/* ==================================================================
   1. Tokens
   ================================================================== */

:root {
	/* Brand — indigo/aubergine, descended from the AscendServ purple so the
	   rebrand stays recognisable to existing clients. */
	--brand-900: #1e1230;
	--brand-800: #2e1a4a;
	--brand-700: #3f2566;
	--brand-600: #4e2f7d;

	/* Interactive. 9.04:1 on paper. */
	--link: #5a3392;
	--link-soft: #7b5bb0;
	--brand-100: #ded4ee;
	--brand-50:  #f4f0fa;

	/* Accent — Axcelasia crimson, tying this site to the parent brand.
	   Ornament and emphasis only, never a status colour. 5.49:1 on paper. */
	--accent:    #c1343e;
	--accent-50: #fcedee;

	/* Text on the brand-800/900 grounds: header bar, hero, footer, dark bands.
	   All four clear 4.5:1 on brand-800 and brand-900. */
	--on-dark:        #e9e3f4;
	--on-dark-2:      #cabddf;
	--on-dark-3:      #a08fbe;
	--on-dark-accent: #eb9aa2;

	--paper:  #ffffff;
	--mist:   #f6f4fa;
	--mist-2: #ebe6f3;
	--line:   #dcd5e8;

	--ink:   #1a1622;
	--ink-2: #4a4355;
	--ink-3: #6e6680;

	--ok:      #17693f;
	--ok-bg:   #e2f1e8;
	--warn:    #8a5709;
	--warn-bg: #fbf0da;
	--stop:    #8a1f29;
	--stop-bg: #fae7e9;

	--serif: "Newsreader", Georgia, "Times New Roman", serif;
	--sans:  "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--mono:  "IBM Plex Mono", ui-monospace, Consolas, monospace;

	--wrap: 1200px;
	--gutter: 24px;

	--shadow-sm: 0 1px 2px rgba(46, 26, 74, .06);
	--shadow:    0 2px 4px rgba(46, 26, 74, .06), 0 12px 28px -20px rgba(46, 26, 74, .4);
	--shadow-lg: 0 4px 8px rgba(46, 26, 74, .07), 0 24px 48px -28px rgba(46, 26, 74, .45);

	--radius: 4px;

	/* --header-h is the design constant the header sizes itself to.
	   --header-actual is written by main.js from the rendered height and used
	   only by things that must sit clear of the header. They must stay separate:
	   feeding a measured height back into the element being measured makes the
	   ResizeObserver grow it on every tick. */
	--header-h: 76px;
	--header-actual: 76px;
}

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

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-actual) + 16px);
	/* The off-canvas nav sits just outside the viewport when closed. `clip`
	   contains it without making the root a scroll container, which `hidden`
	   would do — and that would break the sticky header and IPO tabs. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

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

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: -.012em;
	color: var(--brand-800);
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--brand-700); }

:focus-visible {
	outline: 3px solid var(--link-soft);
	outline-offset: 2px;
	border-radius: 2px;
}

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

strong { font-weight: 600; color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--brand-100); color: var(--brand-900); }

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

.as-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Narrow measures keep the page's single left edge instead of re-centring,
   which would put a second, wider margin under the page header. The container
   stays full width and the content inside it is capped to a readable measure. */
.as-wrap--narrow,
.as-wrap--mid { max-width: var(--wrap); }

.as-wrap--narrow > * { max-width: 880px; }
.as-wrap--mid > *    { max-width: 1020px; }

/* The 404 is the one place a centred measure is right. */
.as-wrap--narrow.as-error > * { max-width: 720px; margin-inline: auto; }

.as-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.as-section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.as-section--mist { background: var(--mist); }
.as-section--navy { background: var(--brand-800); color: var(--on-dark-2); }
.as-section--navy h2, .as-section--navy h3 { color: #fff; }

.as-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--brand-800);
	color: #fff;
	padding: 12px 20px;
	font-weight: 600;
}
.as-skip:focus { left: 8px; top: 8px; color: #fff; }

/* ==================================================================
   4. Shared typographic pieces
   ================================================================== */

.as-eyebrow {
	font-family: var(--mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 .75rem;
	display: flex;
	align-items: center;
	gap: .6rem;
}

.as-eyebrow::after {
	content: "";
	flex: 0 0 32px;
	height: 1px;
	background: currentColor;
	opacity: .5;
}

.as-section--navy .as-eyebrow { color: var(--on-dark-accent); }

.as-lead {
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	line-height: 1.62;
	color: var(--ink-2);
	max-width: 62ch;
}

/* Interior page header. Full-width container so the title lines up with the
   content beneath it; the text itself is held to a readable measure. */
.as-pagehead {
	padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.25rem);
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}

.as-pagehead__title {
	margin: 0;
	max-width: 20ch;
}

.as-pagehead__lead {
	margin: 1rem 0 0;
	font-size: clamp(1.02rem, 1.5vw, 1.14rem);
	line-height: 1.6;
	color: var(--ink-2);
	max-width: 64ch;
}

.as-sectionhead { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 70ch; }
.as-sectionhead p { color: var(--ink-2); }

/* Buttons */

.as-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	padding: .78rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--sans);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.as-btn--primary { background: var(--link); color: #fff; }
.as-btn--primary:hover { background: var(--brand-700); color: #fff; }

.as-btn--dark { background: var(--brand-800); color: #fff; }
.as-btn--dark:hover { background: var(--brand-700); color: #fff; }

.as-btn--ghost {
	background: transparent;
	border-color: var(--line);
	color: var(--brand-800);
}
.as-btn--ghost:hover { border-color: var(--brand-700); background: var(--mist); color: var(--brand-800); }

.as-btn--light { background: #fff; color: var(--brand-800); }
.as-btn--light:hover { background: var(--brand-50); color: var(--brand-800); }

.as-btn--wide { width: 100%; }

.as-btn .as-icon { flex: none; }

/* Text link with arrow */

.as-textlink {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
}
.as-textlink .as-icon { transition: transform .18s ease; }
.as-textlink:hover .as-icon { transform: translateX(3px); }

/* Pills */

.as-pill {
	display: inline-block;
	padding: .2rem .55rem;
	border-radius: 2px;
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	white-space: nowrap;
}

.as-pill--upcoming  { background: var(--mist-2); color: var(--ink-2); }
.as-pill--open      { background: var(--ok-bg);  color: var(--ok); }
.as-pill--balloting { background: var(--warn-bg); color: var(--warn); }
.as-pill--listed    { background: var(--brand-50); color: var(--brand-700); }

/* ==================================================================
   5. Header
   ================================================================== */

.as-topbar {
	background: var(--brand-900);
	color: var(--on-dark-2);
	font-size: .82rem;
}

.as-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.25rem;
	min-height: 38px;
	flex-wrap: wrap;
}

.as-topbar a {
	color: var(--on-dark);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 500;
}
.as-topbar a:hover { color: #fff; text-decoration: underline; }
.as-topbar .as-icon { color: var(--accent); }

.as-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var(--line);
	/* No backdrop-filter on this element. An element with a backdrop-filter
	   becomes the containing block for its position:fixed descendants, which
	   would resolve the off-canvas nav against the header box instead of the
	   viewport — collapsing the mobile menu to the height of the header. The
	   frosted effect goes on a backdrop layer underneath instead. */
	background: transparent;
	isolation: isolate;
}

.as-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(150%) blur(8px);
}

.as-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: var(--header-h);
}

.as-wordmark {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	text-decoration: none;
	line-height: 1;
}

.as-wordmark__name {
	font-family: var(--serif);
	font-size: 1.55rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--brand-800);
}

.as-wordmark__rule {
	display: block;
	width: 34px;
	height: 2px;
	background: var(--accent);
}

.custom-logo-link { display: block; }
.custom-logo { max-height: 52px; width: auto; }

.as-nav { margin-left: auto; }

.as-nav__list {
	display: flex;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.as-nav__list a {
	display: block;
	padding: .3rem 0;
	font-size: .95rem;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	position: relative;
}

.as-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}

.as-nav__list a:hover { color: var(--brand-700); }
.as-nav__list a:hover::after,
.as-nav__list .current-menu-item > a::after,
.as-nav__list .current_page_item > a::after { transform: scaleX(1); }

.as-nav__list .current-menu-item > a,
.as-nav__list .current_page_item > a { color: var(--brand-800); font-weight: 600; }

.as-header__cta { flex: none; }

.as-navtoggle {
	display: none;
	margin-left: auto;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 9px;
	color: var(--brand-800);
	cursor: pointer;
	line-height: 0;
}

.as-navtoggle:hover { border-color: var(--brand-700); }

@media (max-width: 1079px) {
	.as-navtoggle { display: block; }
	.as-header__cta { display: none; }

	.as-nav {
		position: fixed;
		inset: 0 0 0 auto;
		z-index: 101;
		width: min(380px, 88vw);
		background: var(--paper);
		border-left: 1px solid var(--line);
		box-shadow: var(--shadow-lg);
		padding: calc(var(--header-actual) + 24px) 28px 32px;
		transform: translateX(100%);
		/* visibility keeps the closed menu out of the tab order — an off-screen
		   transform alone leaves its links focusable. */
		visibility: hidden;
		transition: transform .26s ease, visibility 0s linear .26s;
		overflow-y: auto;
		margin-left: 0;
	}

	.as-nav.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform .26s ease, visibility 0s;
	}

	.as-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.as-nav__list li { border-bottom: 1px solid var(--line); }

	.as-nav__list a { padding: .95rem 0; font-size: 1.05rem; }
	.as-nav__list a::after { display: none; }

	.as-nav__cta { margin-top: 1.5rem; }

	.as-navscrim {
		position: fixed;
		inset: 0;
		background: rgba(30, 18, 48, .55);
		opacity: 0;
		pointer-events: none;
		transition: opacity .26s ease;
		z-index: 99;
	}

	/* The scrim must never sit over the panel it is dimming behind. */
	.as-nav.is-open { z-index: 101; }

	.as-navscrim.is-open { opacity: 1; pointer-events: auto; }
}

@media (min-width: 1080px) {
	.as-nav__cta { display: none; }
}

/* ==================================================================
   6. Hero
   ================================================================== */

.as-hero {
	position: relative;
	background: linear-gradient(160deg, var(--brand-900) 0%, var(--brand-800) 45%, var(--brand-700) 100%);
	color: var(--on-dark-2);
	overflow: hidden;
}

.as-hero::after {
	/* A faint ascending rule motif, drawn rather than imported. */
	content: "";
	position: absolute;
	right: -140px;
	top: -80px;
	width: 620px;
	height: 620px;
	background:
		repeating-linear-gradient(115deg, rgba(235, 154, 162, .14) 0 2px, transparent 2px 26px);
	transform: rotate(-8deg);
	pointer-events: none;
}

/* The hero sits on the same 1200px grid as the header and every section
   below it, so its first character lines up with the logo. Line length is
   held back on the children instead — constraining the wrapper would centre
   it in a narrower column and leave the text visibly off the page grid. */
.as-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.as-hero__inner > * { max-width: 46rem; }
.as-hero__inner > .as-hero__triad { max-width: 20ch; }

/* Headline words switched off in Page settings. The h1 stays — it holds the
   screen-reader title and is the page's only top-level heading — but with no
   visible words the flex box has no in-flow children and collapses on its own;
   only the bottom margin is left to clear. */
.as-hero h1.as-hero__triad--bare { margin-bottom: 0; }

.as-hero h1 { color: #fff; margin-bottom: 1.1rem; }

/* Scoped to .as-hero so it outranks the `.as-hero p` size rule below. */
.as-hero p.as-hero__triad,
.as-hero h1.as-hero__triad {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.75rem;
	font-family: var(--serif);
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	font-weight: 500;
	letter-spacing: -.015em;
	color: #fff;
	max-width: none;
	margin: 0 0 1.5rem;
	line-height: 1.1;
}

/* The three words are separated by the flex gap rather than a punctuation mark:
   an absolutely-positioned separator orphans to the start of the line whenever
   the headline wraps. Nothing here may set `position` on the spans — that would
   outrank .as-screenreader and turn the hidden label into a visible flex item. */

.as-hero p { color: var(--on-dark-2); font-size: 1.08rem; max-width: 58ch; }

.as-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	margin-top: 2rem;
}

/* Credentials band */

.as-stats {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

/* Three figures, so three tracks — auto-fit would leave empty cells at width. */
.as-stats__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--line);
	border-inline: 1px solid var(--line);
}

@media (min-width: 720px) {
	.as-stats__grid { grid-template-columns: repeat(3, 1fr); }
}

.as-stat {
	background: var(--paper);
	padding: 1.75rem 1.5rem;
}

.as-stat__figure {
	font-family: var(--serif);
	font-size: clamp(2.1rem, 4vw, 2.9rem);
	font-weight: 600;
	line-height: 1;
	color: var(--brand-800);
	font-variant-numeric: tabular-nums;
	display: block;
	margin-bottom: .35rem;
}

.as-stat__label {
	font-weight: 600;
	font-size: .95rem;
	color: var(--brand-700);
	display: block;
	margin-bottom: .3rem;
}

.as-stat__note {
	font-size: .88rem;
	color: var(--ink-3);
	line-height: 1.5;
	margin: 0;
}

/* ==================================================================
   7. Services
   ================================================================== */

/* Six services divide cleanly into three columns, then two, then one — so no
   row is ever left with a dead track beside it. */
/* The separators are drawn by the cards, not by the grid.
   This used to be a grid with a 1px gap over a --line background, which is a
   neat way to get hairlines — until a row is not full. The leftover cell then
   shows as a solid block of the line colour, which is what happened when the
   published services dropped from six to two. Giving each card its own 1px
   ring instead means an empty cell paints nothing at all, whatever the count. */
.as-services {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.as-services { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
	.as-services { grid-template-columns: repeat(3, 1fr); }

	/* The grid draws its hairlines by showing its own background through a 1px
	   gap, so a row that is not filled leaves a solid block of that colour
	   where a card should be. Match the columns to how many services are
	   actually published, and hold the narrower grids to a width that still
	   looks composed on a wide screen rather than two enormous cards. */
	.as-services--2 {
		grid-template-columns: repeat(2, 1fr);
		max-width: 880px;
		margin-inline: auto;
	}

	.as-services--1 {
		grid-template-columns: 1fr;
		max-width: 460px;
		margin-inline: auto;
	}
}

.as-servicecard {
	background: var(--paper);
	padding: 1.9rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	transition: background-color .18s ease;
	/* Outset ring rather than a border: it takes no layout space, so adjacent
	   cards share a single 1px line exactly as the old grid gap did. */
	box-shadow: 0 0 0 1px var(--line);
}

.as-servicecard:hover { background: var(--brand-50); }

.as-servicecard__icon {
	color: var(--accent);
	line-height: 0;
	margin-bottom: .25rem;
}

.as-servicecard h3 { margin: 0; font-size: 1.22rem; }

.as-servicecard p {
	color: var(--ink-2);
	font-size: .95rem;
	margin: 0;
	flex: 1;
}

.as-servicecard .as-textlink { margin-top: .5rem; }

/* Accordion used on the services page */

.as-accordion { border-top: 1px solid var(--line); }

.as-accordion__item { border-bottom: 1px solid var(--line); }

.as-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.5rem 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: var(--serif);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-weight: 500;
	color: var(--brand-800);
	line-height: 1.25;
}

.as-accordion__trigger:hover { color: var(--link); }

.as-accordion__trigger .as-icon {
	flex: none;
	margin-left: auto;
	color: var(--accent);
	transition: transform .22s ease;
}

.as-accordion__trigger[aria-expanded="true"] .as-icon { transform: rotate(90deg); }

.as-accordion__badge {
	flex: none;
	color: var(--accent);
	line-height: 0;
}

.as-accordion__panel { padding: 0 0 1.9rem; }

.as-accordion__panel[hidden] { display: none; }

.as-accordion__intro {
	color: var(--ink-2);
	max-width: 68ch;
	margin-bottom: 1.25rem;
}

/* Checked bullet lists */

.as-points { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }

.as-points--two { grid-template-columns: 1fr; }

@media (min-width: 860px) {
	.as-points--two { grid-template-columns: 1fr 1fr; gap: .8rem 2.5rem; }
}

.as-points__item {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	font-size: .95rem;
	color: var(--ink-2);
	line-height: 1.6;
}

.as-points__mark {
	flex: none;
	line-height: 0;
	margin-top: .3rem;
	color: var(--link);
}

.as-points__body strong { color: var(--brand-800); }

/* ==================================================================
   8. Why us
   ================================================================== */

.as-whygrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem 2.5rem;
}

@media (min-width: 620px) {
	.as-whygrid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
	.as-whygrid--3 { grid-template-columns: repeat(3, 1fr); }
	.as-whygrid--2 { grid-template-columns: repeat(2, 1fr); }
}

.as-why__title {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 700;
	color: var(--brand-800);
	margin: 0 0 .4rem;
}

.as-why__title .as-icon { color: var(--accent); flex: none; }

.as-why p { font-size: .95rem; color: var(--ink-2); margin: 0; }

.as-section--navy .as-why__title { color: #fff; }
.as-section--navy .as-why p { color: var(--on-dark-2); }

/* ==================================================================
   9. IPO News
   ================================================================== */

.as-ipotabs {
	position: sticky;
	top: var(--header-actual);
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
}

.as-ipotabs__list {
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: thin;
}

.as-ipotabs__list a {
	display: block;
	padding: 1rem 1.15rem;
	font-size: .92rem;
	font-weight: 600;
	color: var(--ink-2);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.as-ipotabs__list a:hover { color: var(--brand-700); background: var(--mist); }
.as-ipotabs__list a.is-active { color: var(--brand-800); border-bottom-color: var(--accent); }

.as-ipotabs__list a span {
	font-family: var(--mono);
	font-size: .75rem;
	color: var(--ink-3);
	margin-left: .4rem;
	font-weight: 500;
}

.as-ipoblock { padding-block: clamp(2.75rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.as-ipoblock:last-of-type { border-bottom: 0; }

.as-ipoblock__head { margin-bottom: 1.75rem; max-width: 72ch; }
.as-ipoblock__head h2 { margin-bottom: .5rem; }
.as-ipoblock__head p { color: var(--ink-2); margin: 0; }

/* Data tables */

.as-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--line);
	background: var(--paper);
}

.as-table { min-width: 640px; font-size: .93rem; }

.as-table thead th {
	background: var(--mist);
	border-bottom: 1px solid var(--line);
	font-family: var(--mono);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-3);
	text-align: left;
	padding: .8rem 1rem;
	white-space: nowrap;
}

.as-table tbody td {
	border-bottom: 1px solid var(--mist-2);
	padding: 1rem;
	vertical-align: top;
	color: var(--ink-2);
}

.as-table tbody tr:last-child td { border-bottom: 0; }
.as-table tbody tr:hover { background: var(--brand-50); }

.as-table__company {
	color: var(--brand-800);
	font-weight: 600;
	font-size: .98rem;
	line-height: 1.35;
}

.as-table__meta {
	display: block;
	font-size: .8rem;
	color: var(--ink-3);
	font-weight: 400;
	margin-top: .2rem;
}

.as-num {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.as-doc {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 600;
	font-size: .88rem;
	text-decoration: none;
	color: var(--link);
}

.as-doc:hover { color: var(--brand-700); text-decoration: underline; }
.as-doc .as-icon { flex: none; }
.as-doc--none { color: var(--ink-3); }

/* Tables collapse into cards on narrow screens */

@media (max-width: 859px) {
	.as-tablewrap { border: 0; overflow: visible; }
	.as-table { min-width: 0; }
	.as-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.as-table, .as-table tbody, .as-table tr, .as-table td { display: block; width: 100%; }

	.as-table tr {
		border: 1px solid var(--line);
		background: var(--paper);
		margin-bottom: .85rem;
		padding: .35rem 0;
	}

	.as-table tbody tr:hover { background: var(--paper); }

	.as-table tbody td {
		border-bottom: 1px solid var(--mist-2);
		padding: .7rem 1rem;
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 1rem;
		text-align: right;
	}

	.as-table tbody td:last-child { border-bottom: 0; }

	.as-table tbody td::before {
		content: attr(data-label);
		font-family: var(--mono);
		font-size: .68rem;
		letter-spacing: .09em;
		text-transform: uppercase;
		color: var(--ink-3);
		text-align: left;
		flex: none;
	}

	.as-table td[data-label=""]::before { display: none; }

	.as-table__company { text-align: right; }
}

/* Offering cards */

.as-offers { display: grid; gap: 1.25rem; }

.as-offer {
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent);
	background: var(--paper);
	padding: 1.6rem 1.75rem;
	box-shadow: var(--shadow-sm);
}

.as-offer__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .75rem;
	margin-bottom: 1.1rem;
}

.as-offer__name {
	font-family: var(--serif);
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	color: var(--brand-800);
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.as-offer__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem 1.5rem;
	padding: 1.1rem 0;
	border-block: 1px solid var(--mist-2);
	margin-bottom: 1.1rem;
}

.as-fact__label {
	display: block;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: .2rem;
}

.as-fact__value {
	display: block;
	font-weight: 600;
	color: var(--brand-800);
	font-variant-numeric: tabular-nums;
}

.as-offer__docs {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.as-offer__banks {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--mist-2);
}

.as-offer__banks h4 {
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 .6rem;
}

.as-banklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	font-size: .9rem;
}

.as-banklist li::after { content: ""; }

.as-banklist a { text-decoration: none; font-weight: 500; }
.as-banklist a:hover { text-decoration: underline; }

/* Balloting callout */

.as-balloting {
	background: var(--brand-800);
	color: var(--on-dark-2);
	padding: clamp(1.75rem, 4vw, 2.75rem);
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

@media (min-width: 860px) {
	.as-balloting { grid-template-columns: 1fr auto; }
}

.as-balloting h3 { color: #fff; margin: 0 0 .5rem; }
.as-balloting p { margin: 0; max-width: 60ch; }

.as-balloting__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Year groups on past IPOs */

.as-yeargroup + .as-yeargroup { margin-top: 2.5rem; }

.as-yeargroup__label {
	font-family: var(--mono);
	font-size: .95rem;
	font-weight: 500;
	color: var(--brand-700);
	letter-spacing: .06em;
	margin: 0 0 .85rem;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--accent);
	display: inline-block;
}

/* Empty states */

.as-empty {
	border: 1px dashed var(--line);
	background: var(--mist);
	padding: 2rem 1.75rem;
	color: var(--ink-2);
	font-size: .95rem;
}

.as-empty p:last-child { margin: 0; }
.as-empty strong { display: block; color: var(--brand-800); margin-bottom: .3rem; }

/* ==================================================================
   9b. Page banner and credentials
   ================================================================== */

/* The banner crops once, here, and never at upload — see the note on
   `ascendserv-banner` in inc/setup.php. The focal point is a custom property
   so an editor can move it per page from Page settings; 18% keeps the back
   row of a group photograph safely inside the frame. */
.as-banner {
	position: relative;
	background: var(--mist-2);
	overflow: hidden;
	/* An explicit height, not aspect-ratio with a max-height: when the height
	   is clamped, the browser narrows the box to keep the ratio and the banner
	   stops spanning the page. */
	height: clamp(260px, 42vw, 600px);
}

.as-banner__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% var(--as-banner-focus, 18%);
	display: block;
}

/* Give the parallax somewhere to travel. Only with JS on, so the still
   version is never nudged off its focal point — and only at the widths where
   the parallax actually runs, since on a phone the extra height would just
   crop the top of the picture for nothing. */
@media (min-width: 700px) {
	.as-js .as-banner__img {
		height: calc(100% + 44px);
		margin-top: -22px;
	}
}

/* On a phone the frame follows the photograph's own proportions, so a wide
   group shot loses nobody off the sides. */
@media (max-width: 700px) {
	.as-banner {
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

.as-credgrid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.as-credgrid { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); }
}

.as-credgrid > * { max-width: none; }

.as-credentials {
	border-left: 3px solid var(--accent);
	padding-left: clamp(1.25rem, 2.5vw, 1.75rem);
}

.as-credentials__figure {
	font-family: var(--serif);
	font-size: clamp(3rem, 6vw, 4.25rem);
	font-weight: 600;
	line-height: 1;
	color: var(--brand-800);
	margin: 0 0 .4rem;
	font-variant-numeric: tabular-nums;
}

.as-credentials__caption {
	font-size: .95rem;
	color: var(--ink-2);
	margin: 0 0 2rem;
	max-width: 30ch;
	line-height: 1.5;
}

.as-credentials__title {
	font-family: var(--mono);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin: 0 0 1rem;
}

.as-accreditations {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2rem;
}

.as-accreditations__logo {
	width: auto;
	max-width: 150px;
	max-height: 56px;
	object-fit: contain;
	display: block;
}

/* ==================================================================
   10. Team
   ================================================================== */

.as-teamgroup + .as-teamgroup { margin-top: clamp(2.5rem, 5vw, 4rem); }

.as-teamgroup__head {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: .65rem;
	border-bottom: 1px solid var(--line);
}

.as-teamgroup__head h3 { margin: 0; }

.as-teamgroup__count {
	font-family: var(--mono);
	font-size: .8rem;
	color: var(--ink-3);
	margin-left: auto;
}

.as-teamgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.75rem 1.5rem;
}

.as-member__photo {
	aspect-ratio: 4 / 5;
	background: var(--mist-2);
	margin-bottom: .85rem;
	overflow: hidden;
	position: relative;
}

/* A placeholder should not carry the visual weight of a real portrait, so the
   initials tile is square until a photograph is uploaded. */
.as-member__photo:has(.as-member__initials) { aspect-ratio: 1 / 1; }

.as-member__photo img { width: 100%; height: 100%; object-fit: cover; }

.as-member__initials {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-size: 2.4rem;
	color: var(--ink-3);
	background: linear-gradient(150deg, var(--mist-2), var(--brand-50));
}

.as-member__name {
	font-family: var(--serif);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--brand-800);
	margin: 0 0 .15rem;
	line-height: 1.25;
}

.as-member__role {
	font-size: .88rem;
	color: var(--ink-2);
	margin: 0 0 .3rem;
	line-height: 1.45;
}

.as-member__creds {
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .05em;
	color: var(--accent);
	margin: 0;
	text-transform: uppercase;
}

.as-member__bio {
	font-size: .88rem;
	color: var(--ink-2);
	margin: .5rem 0 0;
	line-height: 1.55;
}

.as-member__link {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-top: .5rem;
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
}

/* Full profile disclosure. A native <details> so it works without JavaScript
   and is announced correctly by screen readers. */
.as-profile { margin-top: .6rem; }

.as-profile__toggle {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	cursor: pointer;
	list-style: none;
	font-size: .82rem;
	font-weight: 600;
	color: var(--link);
	padding: .15rem 0;
}

.as-profile__toggle::-webkit-details-marker { display: none; }
.as-profile__toggle:hover { color: var(--brand-700); }

.as-profile__toggle .as-icon {
	transform: rotate(90deg);
	transition: transform .2s ease;
}

.as-profile[open] .as-profile__toggle .as-icon { transform: rotate(-90deg); }

.as-profile__body {
	margin-top: .75rem;
	padding-top: .75rem;
	border-top: 1px solid var(--line);
}

.as-profile__row {
	font-size: .87rem;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 .7rem;
}

.as-profile__label {
	display: block;
	font-family: var(--mono);
	font-size: .66rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: .15rem;
}

/* ==================================================================
   11. Careers
   ================================================================== */

.as-joblist { display: grid; gap: 1rem; }

.as-job {
	border: 1px solid var(--line);
	background: var(--paper);
	padding: 1.4rem 1.6rem;
	display: grid;
	gap: .65rem;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.as-job:hover { border-color: var(--link-soft); box-shadow: var(--shadow-sm); }

.as-job__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .6rem 1rem;
}

.as-job__title {
	font-family: var(--serif);
	font-size: 1.2rem;
	color: var(--brand-800);
	margin: 0;
	flex: 1 1 auto;
}

.as-job__title a { color: inherit; text-decoration: none; }
.as-job__title a:hover { color: var(--link); }

.as-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.1rem;
	font-family: var(--mono);
	font-size: .76rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.as-job__summary { font-size: .93rem; color: var(--ink-2); margin: 0; }

.as-job__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }

/* ==================================================================
   12. Forms
   ================================================================== */

.as-form { display: grid; gap: 1.25rem; }

.as-formgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 600px) {
	.as-formgrid--two { grid-template-columns: 1fr 1fr; }
	.as-formgrid--three { grid-template-columns: 1fr 1fr; }
	.as-field--wide { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
	.as-formgrid--three { grid-template-columns: repeat(3, 1fr); }
}

.as-field { display: grid; gap: .4rem; min-width: 0; }

.as-field > label,
.as-fieldset > legend {
	font-size: .88rem;
	font-weight: 600;
	color: var(--brand-800);
}

.as-field__req { color: var(--stop); }

.as-field__hint {
	font-size: .82rem;
	color: var(--ink-3);
	margin: 0;
	line-height: 1.5;
}

.as-input,
.as-form input[type="text"],
.as-form input[type="email"],
.as-form input[type="tel"],
.as-form input[type="url"],
.as-form select,
.as-form textarea {
	width: 100%;
	padding: .72rem .85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	font-family: var(--sans);
	font-size: .95rem;
	color: var(--ink);
	transition: border-color .16s ease, box-shadow .16s ease;
}

.as-form textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

.as-form input:focus,
.as-form select:focus,
.as-form textarea:focus {
	outline: none;
	border-color: var(--link-soft);
	box-shadow: 0 0 0 3px var(--brand-50);
}

.as-form input[type="file"] {
	width: 100%;
	padding: .6rem;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	background: var(--mist);
	font-size: .88rem;
}

.as-fieldset {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.1rem 1.25rem 1.25rem;
	margin: 0;
	min-width: 0;
}

.as-fieldset > legend { padding-inline: .4rem; }

/* A grouped form reads as several short sections; give each one air and let
   the hint sit directly under the legend rather than floating in the grid. */
.as-fieldset > .as-field__hint { margin: -.15rem 0 1rem; }
.as-fieldset + .as-fieldset { margin-top: .25rem; }
.as-fieldset > .as-formgrid { margin-top: .35rem; }
.as-fieldset > .as-field + .as-field { margin-top: 1.1rem; }

.as-form input[type="file"] {
	width: 100%;
	padding: .55rem .7rem;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	background: var(--mist);
	font-size: .9rem;
	color: var(--ink-2);
}

.as-form input[type="file"]:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 2px;
}

.as-form input[type="file"]::file-selector-button {
	margin-right: .75rem;
	padding: .35rem .8rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	color: var(--brand-800);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.as-form input[type="file"]::file-selector-button:hover {
	border-color: var(--link-soft);
	color: var(--link);
}

.as-checkgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: .55rem 1.25rem;
	margin-top: .75rem;
}

.as-check {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	font-size: .9rem;
	color: var(--ink-2);
	line-height: 1.5;
	cursor: pointer;
}

.as-check input { margin-top: .28rem; flex: none; accent-color: var(--link); }

.as-consent {
	background: var(--mist);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1rem 1.15rem;
}

.as-consent .as-check { font-size: .88rem; }

.as-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.as-formresult {
	border: 1px solid var(--line);
	border-left-width: 3px;
	padding: 1.1rem 1.25rem;
	border-radius: var(--radius);
	margin-bottom: 1.5rem;
}

.as-formresult:focus { outline: none; }

.as-formresult--success { background: var(--ok-bg); border-color: var(--ok); color: #10502f; }
.as-formresult--error   { background: var(--stop-bg); border-color: var(--stop); color: #7a2530; }

.as-formresult__title { font-weight: 700; margin: 0 0 .3rem; }
.as-formresult p:last-child, .as-formresult ul:last-child { margin-bottom: 0; }
.as-formresult ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* Contact layout */

.as-contactgrid {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}

@media (min-width: 900px) {
	.as-contactgrid { grid-template-columns: 1fr minmax(0, 1.35fr); }
}

.as-contactcard {
	background: var(--mist);
	border: 1px solid var(--line);
	padding: 1.75rem;
}

.as-contactcard h2 { font-size: 1.3rem; margin-bottom: 1rem; }

.as-detaillist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }

.as-detail { display: flex; gap: .8rem; align-items: flex-start; }

.as-detail__icon { flex: none; color: var(--accent); line-height: 0; margin-top: .2rem; }

.as-detail__label {
	display: block;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: .15rem;
}

.as-detail__value { font-size: .95rem; color: var(--ink); line-height: 1.5; }
.as-detail__value a { text-decoration: none; }
.as-detail__value a:hover { text-decoration: underline; }
.as-detail__value address { font-style: normal; }

/* ==================================================================
   13. Footer
   ================================================================== */

.as-footer {
	background: var(--brand-900);
	color: var(--on-dark-3);
	font-size: .92rem;
	padding-block: clamp(3rem, 6vw, 4.5rem) 0;
}

.as-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2.5rem;
	padding-bottom: 2.75rem;
}

.as-footer__brandname {
	font-family: var(--serif);
	font-size: 1.45rem;
	font-weight: 600;
	color: #fff;
	margin: 0 0 .35rem;
	letter-spacing: -.02em;
}

.as-footer__rule { display: block; width: 34px; height: 2px; background: var(--accent); margin-bottom: 1rem; }

.as-footer__heading {
	font-family: var(--mono);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--on-dark-3);
	margin: 0 0 1rem;
}

.as-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.as-footer a { color: var(--on-dark-2); text-decoration: none; }
.as-footer a:hover { color: #fff; text-decoration: underline; }

.as-footer address { font-style: normal; line-height: 1.65; }

.as-footer__social {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: 1rem;
	font-weight: 500;
}

.as-footer__base {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-block: 1.5rem 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2rem;
	align-items: center;
	font-size: .82rem;
	color: var(--on-dark-3);
}

.as-footer__regs { display: grid; gap: .2rem; font-family: var(--mono); font-size: .76rem; }

.as-footer__legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.as-footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ==================================================================
   14. Prose (editor content) and utilities
   ================================================================== */

.as-prose > * + * { margin-top: 1.1rem; }
.as-prose h2 { margin-top: 2.25rem; }
.as-prose h3 { margin-top: 1.75rem; }
.as-prose p, .as-prose li { color: var(--ink-2); }
.as-prose ul, .as-prose ol { padding-left: 1.3rem; }
.as-prose li { margin-bottom: .45rem; }
.as-prose img { margin-block: 1.5rem; }

.as-prose blockquote {
	border-left: 3px solid var(--accent);
	margin: 1.75rem 0;
	padding: .25rem 0 .25rem 1.25rem;
	font-family: var(--serif);
	font-size: 1.15rem;
	color: var(--brand-700);
}

.as-cta {
	background: var(--accent-50);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.as-cta__inner {
	display: grid;
	gap: 1.5rem;
	align-items: center;
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

@media (min-width: 860px) {
	.as-cta__inner { grid-template-columns: 1fr auto; }
}

.as-cta h2 { margin: 0 0 .4rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.as-cta p { margin: 0; color: var(--ink-2); max-width: 58ch; }
.as-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.as-screenreader {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.as-error {
	text-align: center;
	padding-block: clamp(4rem, 12vw, 8rem);
}

.as-error__code {
	font-family: var(--mono);
	font-size: 3.5rem;
	color: var(--accent);
	margin: 0 0 .5rem;
	letter-spacing: .05em;
}

/* ==================================================================
   Insights — posts listing, cards and single post
   ================================================================== */

.as-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.as-chip {
	display: inline-block;
	padding: .4rem .9rem;
	border: 1px solid var(--line);
	border-radius: 100px;
	background: var(--paper);
	color: var(--ink-2);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.as-chip:hover { border-color: var(--link-soft); color: var(--link); }

.as-chip.is-active {
	background: var(--brand-800);
	border-color: var(--brand-800);
	color: #fff;
}

.as-postgrid {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2rem);
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.as-postcard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	background: var(--paper);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.as-postcard:hover { border-color: var(--link-soft); box-shadow: var(--shadow); }

.as-postcard__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--mist-2);
}

.as-postcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.as-postcard:hover .as-postcard__media img { transform: scale(1.03); }

.as-postcard__body {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.4rem 1.5rem 1.5rem;
	flex: 1;
}

.as-postcard__cat { margin: 0; }

.as-postcard__title {
	font-family: var(--serif);
	font-size: 1.2rem;
	line-height: 1.3;
	margin: 0;
}

.as-postcard__title a { color: var(--brand-800); text-decoration: none; }
.as-postcard__title a:hover { color: var(--link); }

.as-postcard__excerpt {
	margin: 0;
	color: var(--ink-2);
	font-size: .95rem;
}

.as-postcard__meta,
.as-postmeta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .02em;
	color: var(--ink-3);
}

.as-postcard__meta { margin-top: auto; padding-top: .35rem; }

.as-pagehead--post .as-eyebrow a { color: var(--accent); text-decoration: none; }
.as-pagehead--post .as-eyebrow a:hover { text-decoration: underline; }

.as-postmeta { margin-top: 1rem; }

.as-postfeature {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: clamp(-4rem, -6vw, -2.5rem);
	position: relative;
	z-index: 1;
}

.as-postfeature img {
	width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--line);
}

.as-pagelinks {
	margin-top: 2rem;
	font-family: var(--mono);
	font-size: .85rem;
}

/* Core pagination */
.as-section .navigation.pagination { margin-top: clamp(2rem, 4vw, 3rem); }

.as-section .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
}

.as-section .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 .6rem;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink-2);
	font-size: .9rem;
	text-decoration: none;
}

.as-section .page-numbers:hover { border-color: var(--link-soft); color: var(--link); }

.as-section .page-numbers.current {
	background: var(--brand-800);
	border-color: var(--brand-800);
	color: #fff;
}

.as-section .page-numbers.dots { border-color: transparent; }

@media (max-width: 600px) {
	.as-postfeature { margin-bottom: -1.5rem; }
}


/* ==================================================================
   Motion — scroll reveals, parallax, header state
   ==================================================================
   The hidden state is scoped to `.as-js`, which header.php adds before
   first paint and only when the reader has not asked for reduced motion.
   No JS, or reduced motion, means nothing is ever hidden.

   Reveals are one-shot: an element animates in the first time it is seen
   and then stays put. Re-animating on every scroll past is the thing that
   makes a corporate site feel like a brochure toy.
   ================================================================== */

.as-js [data-reveal] {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity .7s cubic-bezier(.22, .61, .36, 1),
		transform .7s cubic-bezier(.22, .61, .36, 1);
	transition-delay: calc(var(--reveal-i, 0) * 80ms);
}

.as-js [data-reveal="rise"]  { transform: translate3d(0, 22px, 0); }
.as-js [data-reveal="fade"]  { transform: none; }
.as-js [data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
.as-js [data-reveal="right"] { transform: translate3d(24px, 0, 0); }

/* A figure that scales up a hair reads as "settling into place" rather than
   sliding, which suits a number more than a card. */
.as-js [data-reveal="figure"] { transform: translate3d(0, 12px, 0) scale(.97); }

.as-js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Once it has arrived, drop the compositor hint. */
.as-js [data-reveal].is-revealed { will-change: auto; }

/* The banner drifts a little slower than the page. Amplitude is deliberately
   small — a few dozen pixels reads as depth, more reads as a parallax demo. */
.as-banner__img { will-change: transform; }

/* Header gains a hairline and a shadow once the page has moved, so it
   separates from the content without a permanent heavy border. */
.as-header { transition: box-shadow .25s ease, border-color .25s ease; }
.as-header.is-scrolled { box-shadow: var(--shadow-sm); border-bottom-color: var(--line); }

@media (prefers-reduced-motion: reduce) {
	.as-js [data-reveal],
	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.as-banner__img { transform: none !important; }
}


@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

@media print {
	.as-topbar, .as-header, .as-footer, .as-ipotabs, .as-cta, .as-navtoggle { display: none !important; }
	body { color: #000; }
	.as-tablewrap { border: 1px solid #999; }
}