@charset "UTF-8";
/*
 * Ascenthya — site header
 * Apollo layout: utility row with a centred wordmark, a hairline rule, then a
 * centred navigation row. Hand-authored, no framework, no inline styles.
 * Everything is scoped under .asc-* so it cannot leak into Elementor content.
 * 2026-09-02: touched twice to purge the page cache after the Insights launch.
 */

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

:root {
	/* Must match the boxed width the page containers use (Elementor: 1280px on
	   every section of every page). When these two disagree the wordmark and
	   nav sit wider than the content beneath them on every page — nobody names
	   it, it just reads as slightly off. */
	--asc-shell: 1280px;
	--asc-gutter: clamp(18px, 3.2vw, 44px);

	--asc-top-h: 70px;
	--asc-nav-h: 52px;
	--asc-top-h-stuck: 56px;
	--asc-nav-h-stuck: 44px;

	/* Brand palette, set by the CTO 1 Sep 2026. White, green, gold — nothing else. */
	--asc-ink: #1F2933;
	--asc-ink-soft: #56646F;
	--asc-green: #11676A;
	--asc-green-deep: #0B4749;
	--asc-gold: #C99331;
	--asc-cream: #FFFFFF;

	--asc-line: rgba(31, 41, 51, .16);
	--asc-line-strong: rgba(31, 41, 51, .26);
	--asc-surface: #FFFFFF;
	--asc-surface-alt: #F3F6F4;

	--asc-ease: cubic-bezier(.22, .61, .36, 1);
	--asc-serif: "EB Garamond", Georgia, "Times New Roman", serif;
	--asc-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- skip link */

.asc-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--asc-green-deep);
	color: #fff;
	font: 500 14px/1 var(--asc-sans);
	text-decoration: none;
}
.asc-skip:focus { left: 0; }

/* -------------------------------------------------------------------- shell */

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

/* Reserves the header's height in normal flow (solid mode only). */
.asc-header-spacer { height: calc(var(--asc-top-h) + var(--asc-nav-h)); }

.asc-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 900;
	font-family: var(--asc-sans);
	color: var(--asc-ink);
	background: var(--asc-surface);
	border-bottom: 1px solid var(--asc-line);
	-webkit-font-smoothing: antialiased;
}

/* :where() keeps these resets at zero specificity so component rules below
   always win. Plain element selectors here would outrank single-class rules. */
.asc-header :where(a) { text-decoration: none; color: inherit; }
.asc-header :where(button) { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
.asc-header :where(ul) { list-style: none; margin: 0; padding: 0; }
.asc-header :where(p) { margin: 0; }
.asc-header :where(img) { max-width: 100%; }

.asc-header :focus-visible,
.asc-skip:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ------------------------------------------------------------------ top row */

.asc-top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	height: var(--asc-top-h);
	gap: 16px;
	/* keeps the Log In panel above the navigation row it opens over */
	position: relative;
	z-index: 3;
	transition: height .28s var(--asc-ease);
}

.asc-top__left { justify-self: start; min-width: 0; }
.asc-top__right { justify-self: end; }

.asc-context {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .01em;
	color: var(--asc-ink);
	white-space: nowrap;
}

.asc-brand { justify-self: center; display: inline-flex; align-items: center; }
.asc-brand img {
	display: block;
	width: auto;
	height: clamp(26px, 2.6vw, 36px);
	transition: height .28s var(--asc-ease);
}
.asc-brand__text {
	font-family: var(--asc-serif);
	font-weight: 400;
	font-size: clamp(21px, 2.4vw, 31px);
	line-height: 1;
	letter-spacing: .2em;
	text-indent: .2em; /* balances the trailing letter-space so it reads centred */
	text-transform: uppercase;
	color: var(--asc-ink);
	white-space: nowrap;
	transition: font-size .28s var(--asc-ease);
}

/* --------------------------------------------------------------- login menu */

.asc-login { position: relative; }
/*
 * min-height, not height. ascenthya-responsive.css sets a 44px tap-target floor
 * on every `button` via :where(), which beats a plain `height` and was stretching
 * both header controls to 44px — visibly taller than the type around them.
 * Pointer devices get the designed height; touch widths keep the 44px floor.
 */
.asc-login__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	min-height: 34px;
	padding: 0;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .01em;
	white-space: nowrap;
	transition: opacity .18s var(--asc-ease);
}
.asc-login__toggle:hover { opacity: .68; }

.asc-caret { width: 10px; height: 10px; flex: 0 0 auto; transition: transform .26s var(--asc-ease); }
.asc-login.is-open .asc-caret,
.asc-nav__item.is-open .asc-caret { transform: rotate(180deg); }

/* Apollo marks the open state by underlining the label itself. */
.asc-login.is-open .asc-login__word {
	box-shadow: inset 0 -1px 0 0 currentColor;
	padding-bottom: 2px;
}

/*
 * A rounded white card with one row per destination and a circled arrow — the
 * shape apollo.com uses. Each row is a place to go, not an action: signing in
 * and registering are decided on the portal's own page.
 */
.asc-login__menu {
	position: absolute;
	top: calc(100% + 13px);
	right: 0;
	min-width: 288px;
	padding: 10px;
	background: var(--asc-surface);
	border: 0;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(15, 40, 34, .06), 0 18px 44px -18px rgba(15, 40, 34, .28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(.985);
	transform-origin: top right;
	transition: opacity .22s var(--asc-ease), transform .28s var(--asc-ease), visibility .28s;
}
.asc-login.is-open .asc-login__menu { opacity: 1; visibility: visible; transform: none; }

.asc-login__menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 14px;
	border-radius: 7px;
	font-size: 16px;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--asc-ink);
	transition: background-color .16s var(--asc-ease), color .16s var(--asc-ease);
}
.asc-login__menu a:hover { background: var(--asc-surface-alt); color: var(--asc-green); }

.asc-login__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border: 1px solid var(--asc-line-strong);
	border-radius: 50%;
	transition: border-color .16s var(--asc-ease), background-color .16s var(--asc-ease), color .16s var(--asc-ease);
}
.asc-login__go svg { width: 12px; height: 12px; }
.asc-login__menu a:hover .asc-login__go { border-color: var(--asc-green); background: var(--asc-green); color: #fff; }

/* The helper line stays in the markup for assistive tech and for anywhere else
   these links are listed; it is the card that has no room for it. */
.asc-login__menu small { display: none; }

/* ---------------------------------------------------------------- hairline */

.asc-rule { height: 1px; background: var(--asc-line-strong); }

/* ------------------------------------------------------------------ nav row */

.asc-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: var(--asc-nav-h);
	gap: 12px;
	transition: min-height .28s var(--asc-ease);
}

.asc-nav { grid-column: 2; justify-self: center; min-width: 0; }
.asc-nav__list {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 clamp(16px, 2.6vw, 42px);
}
.asc-nav__item { display: flex; align-items: stretch; }

/*
 * A nav item that owns a panel is a <button>, so Hello Elementor's reset skins
 * it. This is the source of the magenta that has now appeared twice, and it is
 * worth writing down because it is not obvious: it is in the THEME, in
 * `hello-elementor/assets/css/reset.css`, minified onto one line, which is why
 * an earlier search for `rgb(204, 51, 102)` found nothing.
 *
 *   [type=button],[type=submit],button {
 *       background-color: transparent;
 *       border: 1px solid #c36;      ← the box around the titles
 *       border-radius: 3px;
 *       color: #c36;
 *       padding: .5rem 1rem;         ← and the padding that makes it a box
 *   }
 *   [type=button]:focus,[type=button]:hover,[type=submit]:focus,
 *   [type=submit]:hover,button:focus,button:hover {
 *       background-color: #c36;      ← a solid magenta fill on hover or focus
 *       color: #fff;
 *   }
 *
 * `#c36` is `rgb(204, 51, 102)`.
 *
 * THE SPECIFICITY POINT. The state rules carry (0,1,1), which outranks a
 * single class. A one-class component rule cannot hold them, no matter how
 * many states it lists. Two classes, (0,2,0), beats (0,1,1) outright, in every
 * state at once, which is why the block below is written that way and why
 * `.asc-login__toggle` and `.asc-iconbtn` further down are too. The overlay
 * rules that paint the chrome white over the hero are three classes, (0,3,0),
 * so they still win where they should.
 *
 * `appearance: none` is stated as well, so the browser's own button chrome does
 * not step in once the theme's is gone.
 */
.asc-header .asc-nav__link,
.asc-header .asc-nav__link:hover,
.asc-header .asc-nav__link:focus,
.asc-header .asc-nav__link:active,
.asc-header .asc-nav__item.is-open > .asc-nav__link {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0 2px;
	box-shadow: none;
	color: var(--asc-ink);
	text-transform: none;
	text-decoration: none;
}

/* Our own focus ring, in place of the theme's black outline over a white
   box-shadow, which is unreadable against the hero. */
.asc-header .asc-nav__link:focus-visible {
	outline: 2px solid var(--asc-gold);
	outline-offset: 2px;
	box-shadow: none;
}

/* This is a <button> on any item that owns a panel, so it states its own
   colour, border and background rather than inheriting them. */
.asc-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: var(--asc-nav-h);
	padding: 0 2px;
	border: 0;
	background: none;
	border-radius: 0;
	cursor: pointer;
	position: relative;
	font-size: clamp(14px, 1.15vw, 16px);
	font-weight: 400;
	letter-spacing: .005em;
	color: var(--asc-ink);
	white-space: nowrap;
	transition: color .18s var(--asc-ease), opacity .18s var(--asc-ease);
}
/*
 * The hover, Apollo's way: a hairline that draws itself out from the centre
 * under the label, and nothing else. No fill, no colour change, no movement of
 * the label itself. It is the whole of the interaction, which is why it is
 * worth getting the details right.
 *
 * `bottom` is measured from the middle of the button rather than from its
 * floor. The button is 52px tall so that the whole nav row is one tap target,
 * but the label sits centred inside that, and a rule pinned to the floor
 * floated well clear of the words. Half the line box is about .62em; four
 * pixels under that puts the rule where a text-underline-offset would.
 *
 * `em` is safe here, unlike on an Elementor widget: this element carries the
 * font-size the label is set in.
 */
.asc-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(50% - .62em - 4px);
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .24s var(--asc-ease);
}
.asc-nav__link:hover::after,
.asc-nav__link:focus-visible::after,
.asc-nav__item.is-open > .asc-nav__link::after,
.asc-nav__item.is-current > .asc-nav__link::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.asc-nav__link::after { transition: none; }
}

.asc-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; }

.asc-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	min-height: 34px;
	padding: 0;
	color: inherit;
	transition: opacity .18s var(--asc-ease);
}

/*
 * Colour and border are stated outright rather than left to inherit. An
 * inherited value loses to any direct `button { … }` declaration, and the
 * header controls were picking up a magenta text-and-border default from
 * outside the site's own stylesheets.
 */
.asc-header .asc-login__toggle,
.asc-header .asc-iconbtn,
.asc-header .asc-login__toggle:hover,
.asc-header .asc-login__toggle:focus,
.asc-header .asc-login__toggle:active,
.asc-header .asc-iconbtn:hover,
.asc-header .asc-iconbtn:focus,
.asc-header .asc-iconbtn:active {
	color: var(--asc-ink);
	border: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
}
.asc-header--overlay.is-clear .asc-login__toggle,
.asc-header--overlay.is-clear .asc-iconbtn,
.asc-header--overlay.is-clear .asc-login__toggle:hover,
.asc-header--overlay.is-clear .asc-login__toggle:focus,
.asc-header--overlay.is-clear .asc-login__toggle:active,
.asc-header--overlay.is-clear .asc-iconbtn:hover,
.asc-header--overlay.is-clear .asc-iconbtn:focus,
.asc-header--overlay.is-clear .asc-iconbtn:active { color: #fff; }

.asc-header .asc-search__submit { color: #fff; border: 0; }

/* Touch pointers get the WCAG target size back. */
@media (pointer: coarse) {
	.asc-login__toggle,
	.asc-iconbtn { min-height: 44px; height: 44px; }
	.asc-iconbtn { width: 44px; }
}
.asc-iconbtn:hover { opacity: .68; }
.asc-iconbtn svg { width: 17px; height: 17px; }

/* --------------------------------------------------------------- mega menu */

.asc-mega {
	position: fixed;
	left: 0;
	right: 0;
	top: calc(var(--asc-top-h) + var(--asc-nav-h) + 1px);
	background: var(--asc-surface);
	border-top: 1px solid var(--asc-line);
	box-shadow: 0 28px 56px -28px rgba(15, 40, 34, .4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	/*
	 * OPENING IS ANIMATED; CLOSING IS INSTANT, and that asymmetry is the whole
	 * point of writing the transition on the open state rather than the base.
	 *
	 * Every panel is fixed at the same place on the screen. With a fade on the
	 * closing state as well, moving from one nav item to the next put both
	 * panels on that spot for the length of the fade, and two sets of headings
	 * and sublines sat directly on top of each other — legible as neither, and
	 * indistinguishable from a rendering fault in a screenshot. Only one panel
	 * is ever drawn now.
	 */
	transition: opacity 0s, transform 0s, visibility 0s;
}
.asc-header.is-stuck .asc-mega { top: calc(var(--asc-top-h-stuck) + var(--asc-nav-h-stuck) + 1px); }
.asc-nav__item.is-open > .asc-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .2s var(--asc-ease), transform .2s var(--asc-ease), visibility .2s;
}

/*
 * ONE SHAPE FOR EVERY PANEL.
 *
 * The three dropdowns had drifted into three different objects: a compact
 * floating card under About Ascenthya, a two-column sheet under What We Offer,
 * a sheet with a stack of cards down its left side under Insights. A header
 * whose panels do not agree with each other reads as three different sites.
 *
 * They are all one object now, built the way apollo.com builds theirs: a white
 * sheet the width of the window, content boxed to the page shell, a card at
 * the left, link columns through the middle, and a picture card at the right
 * when there is something worth showing. Panels differ only in how many of
 * those three parts they fill, never in shape, inset, padding or type.
 */
.asc-mega__inner {
	width: 100%;
	max-width: var(--asc-shell);
	margin-inline: auto;
	padding: 34px var(--asc-gutter) 38px;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 44px;
	align-items: stretch;
	text-align: left;
}

/*
 * Track order is card, columns, picture. Markup order is columns, card,
 * picture — the columns are the substance of a navigation panel and should be
 * read first — so each part is placed with `order` rather than by moving it
 * in the DOM.
 */
.asc-mega--feature .asc-mega__inner { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
.asc-mega--feature.asc-mega--picture .asc-mega__inner { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(250px, 310px); }
.asc-mega--picture:not(.asc-mega--feature) .asc-mega__inner { grid-template-columns: minmax(0, 1fr) minmax(250px, 310px); }

.asc-mega__side { order: -1; }
.asc-mega__picture { order: 1; display: flex; }

/*
 * Columns are capped, not stretched. `1fr` tracks spread two short lists
 * across the whole sheet and set 60-character lines under each link. Apollo's
 * columns are a fixed measure packed to the left, and the space left over is
 * simply left over.
 */
.asc-mega__cols {
	order: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 264px));
	justify-content: start;
	align-content: start;
	gap: 26px 44px;
}
/* Without a picture card at the right there is a third of a sheet to fill, so
   the same columns are allowed a wider measure. Capped either way: what makes
   this legible is that the measure is fixed, not that it is any one number. */
.asc-mega:not(.asc-mega--picture) .asc-mega__cols { grid-template-columns: repeat(auto-fit, minmax(220px, 320px)); }

/*
 * A LONE COLUMN GETS A WIDER MEASURE.
 *
 * One group beside the card leaves most of the sheet empty at 264px and
 * squeezes every subline onto three ragged lines. 420px puts most of them on
 * one line, and still fits beside a picture card: 300 + 420 + 310, plus two
 * 44px gaps, is 1118 of the 1192 available at 1440.
 *
 * Falls back to the capped widths above wherever `:has()` is not understood,
 * which is a narrower column and nothing worse.
 */
.asc-mega .asc-mega__cols:has(> .asc-mega__col:only-child) { grid-template-columns: minmax(0, 420px); }

/*
 * A panel with no column headings runs its links as ONE stack, never as a grid
 * filled left to right. Three entries in two columns put a hole in the
 * bottom-right corner, and because entries are different heights it left a
 * ragged gap above the third: it read as items dropped on a sheet rather than
 * a list. Reading order and visual order disagreed as well, which is the half
 * of that a screen reader notices.
 *
 * No panel is flat today — About Ascenthya's entries were given a heading of
 * their own so that all three panels are built the same way — but the path is
 * kept, and kept correct, for the next one.
 */
.asc-mega--flat .asc-mega__cols { grid-template-columns: minmax(0, 420px); }
.asc-mega--flat .asc-mega__links { display: block; }

/*
 * NO KICKERS.
 *
 * The small uppercase label over each column — AREAS OF WORK, RESEARCH DESK —
 * is gone. It is the signature of a generated layout, and apollo.com's panels
 * carry nothing of the kind: their columns are lists of destinations and that
 * is all. The level-2 menu item still decides which links share a column and
 * still names it for assistive tech, as the list's `aria-label`.
 *
 * The rule below is a shim, not a style. `mega_group()` no longer prints the
 * element at all; this only covers markup already sitting in a browser or edge
 * cache from before the change, which would otherwise render as a stray line
 * of unstyled text above each column.
 */
.asc-mega__group-title { display: none; }

/*
 * Apollo sets everything in a panel except the left card's heading in the
 * grotesque, at one size, with nothing underneath it. Ascenthya's entries do
 * carry a line of explanation, which is worth keeping, so each is a crisp sans
 * title with a quieter line under it. Serif at 17-20px, one per row, read as a
 * stack of five headlines, and it fought the sans subline directly beneath it.
 */
.asc-mega__link {
	display: block;
	padding: 7px 0;
	font-family: var(--asc-sans);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .005em;
	color: var(--asc-ink);
	transition: color .16s var(--asc-ease);
}
.asc-mega__link:hover { color: var(--asc-green); }
.asc-mega__link small {
	display: block;
	margin-top: 3px;
	font-family: var(--asc-sans);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--asc-ink-soft);
}

/*
 * The card fills its track top to bottom and pins its button to the floor, so
 * panels whose descriptions run to different lengths still line their buttons
 * up with one another.
 */
.asc-mega__feature {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	height: 100%;
	padding: 26px 24px;
	background: var(--asc-green);
	color: #fff;
}
.asc-mega__feature h3 {
	margin: 0 0 12px;
	font-family: var(--asc-serif);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.15;
	color: #fff;
}
.asc-mega__feature p {
	margin: 0 0 auto;
	padding-bottom: 24px;
	font-family: var(--asc-sans);
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .84);
}
.asc-mega__feature-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: #fff;
	color: var(--asc-green-deep);
	font-size: 13.5px;
	font-weight: 500;
	border-radius: 999px;
	transition: background-color .18s var(--asc-ease);
}
.asc-mega__feature-cta:hover { background: var(--asc-cream); }

/*
 * THE PICTURE CARD — the day's Insight, in the right-hand shape Apollo uses.
 *
 * The first version set white type straight onto the photograph, and that
 * day's photograph was a white building under a bright sky: the headline was
 * not merely hard to read, it disappeared into the picture and looked like a
 * rendering fault. Legibility here cannot depend on what the picture happens
 * to be, so two things do that work and BOTH are needed — the image itself is
 * darkened, and a gradient deepens it further behind the words. The type sits
 * at the top, where the gradient is heaviest and where a photograph's subject
 * usually is not.
 *
 * `Ascenthya_Header::is_insights_panel()` only ever supplies a post here while
 * Insights is public, so this never advertises an article the viewer would
 * then be refused.
 */
.asc-mega__insight {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 220px;
	overflow: hidden;
	border-radius: 10px;
	background: #0E1A18;
	color: #fff;
}
.asc-mega__insight-shot { position: absolute; inset: 0; }
.asc-mega__insight-shot img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	filter: brightness(.52) saturate(.92);
	transition: transform .4s var(--asc-ease);
}
.asc-mega__insight:hover .asc-mega__insight-shot img { transform: scale(1.04); }
/* Painted over the image and under the words: it is the last child in the
   box, and the body carries a stacking level of its own. */
.asc-mega__insight::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7, 16, 14, .80) 0%, rgba(7, 16, 14, .44) 62%, rgba(7, 16, 14, .70) 100%);
}
.asc-mega__insight-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 20px 22px 22px;
}
.asc-mega__insight-eyebrow {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--asc-gold);
}
.asc-mega__insight-title {
	font-family: var(--asc-sans);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.28;
	color: #fff;
}
/* Three lines of the standfirst, clipped, rather than a card whose height is
   decided by how much the desk wrote that morning. */
.asc-mega__insight-stand {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .86);
}
.asc-mega__insight-date {
	margin-top: 2px;
	font-size: 11.5px;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .72);
}

/* Under this width three tracks leave nothing worth reading in the middle
   one, so the panel falls back to card plus columns. */
@media (max-width: 1160px) {
	.asc-mega--feature.asc-mega--picture .asc-mega__inner { grid-template-columns: minmax(240px, 290px) minmax(0, 1fr); }
	.asc-mega__picture { display: none; }
}

/* ------------------------------------------------------------------ search */

/*
 * The search panel collapses with `grid-template-rows: 0fr`, which takes the
 * CONTENT to zero height but leaves the element itself in the layout. Anything
 * painted on the element rather than on its content therefore keeps showing
 * while the panel is shut. That is what drew a second hairline across the
 * header, directly under the nav row, on every page, full width, because this
 * element is a child of <header> rather than of the 1280px shell.
 *
 * TWO THINGS DID IT, AND FIXING ONE IS NOT ENOUGH.
 *
 * 1. The border. Obvious.
 * 2. The white background UNDER the border. A border box counts toward the
 *    element's height even at zero content height, and `background-clip`
 *    defaults to `border-box`, so the background paints beneath the border.
 *    Making the border transparent therefore changed the line's colour and
 *    nothing else: a 1px strip of white surface was still being drawn, and
 *    over the hero that reads as a bright line rather than a grey one.
 *
 * So the border is `0` when shut, not transparent, and the background belongs
 * to the open state. Shut, this element has no border box and no fill, and
 * occupies nothing.
 */
.asc-search {
	background: transparent;
	border-top: 0 solid var(--asc-line);
	box-shadow: none;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s var(--asc-ease);
}
.asc-search.is-open {
	grid-template-rows: 1fr;
	background: var(--asc-surface);
	border-top-width: 1px;
	box-shadow: 0 22px 44px -26px rgba(15, 40, 34, .35);
}
.asc-search__wrap { overflow: hidden; }
.asc-search form {
	width: 100%;
	max-width: var(--asc-shell);
	margin-inline: auto;
	padding: 26px var(--asc-gutter) 30px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.asc-search__field { flex: 1 1 auto; min-width: 0; display: flex; border-bottom: 1px solid var(--asc-line-strong); }
.asc-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: var(--asc-serif);
	font-size: clamp(20px, 2.8vw, 32px);
	color: var(--asc-ink);
	padding: 2px 0 10px;
}
.asc-search input[type="search"]::placeholder { color: rgba(31, 41, 51, .3); }
.asc-search input[type="search"]:focus { outline: none; }
.asc-search__submit {
	flex: 0 0 auto;
	height: 40px;
	padding: 0 24px;
	background: var(--asc-green);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	border-radius: 999px;
	transition: background-color .18s var(--asc-ease);
}
.asc-search__submit:hover { background: var(--asc-green-deep); }

/* --------------------------------------------------------- overlay variant */

/*
 * Used on pages whose first section is a full-bleed hero. The header floats
 * over it with a soft scrim, then returns to the solid treatment as soon as
 * the page scrolls or a panel opens.
 *
 * `is-clear` is printed by PHP and removed by JS, so if the script never loads
 * the header stays transparent over the hero rather than flashing white.
 */
.asc-header--overlay { background: transparent; border-bottom-color: transparent; }

/* Once the hero has scrolled past, the overlay header becomes the ordinary
   white one. Without this it stayed transparent over the page below. */
.asc-header--overlay.is-stuck {
	background: var(--asc-surface);
	border-bottom-color: var(--asc-line);
}

.asc-header--overlay.is-clear::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(8, 26, 22, .72) 0%, rgba(8, 26, 22, .34) 60%, rgba(8, 26, 22, 0) 100%);
}

.asc-header--overlay.is-clear,
.asc-header--overlay.is-clear .asc-context,
.asc-header--overlay.is-clear .asc-brand__text,
.asc-header--overlay.is-clear .asc-nav__link { color: #fff; }
.asc-header--overlay.is-clear .asc-rule { background: rgba(255, 255, 255, .5); }
.asc-header--overlay.is-clear .asc-nav__link { color: rgba(255, 255, 255, .94); }

/* The solid state is stated outright rather than left to fall back to the base
   rules. The two states are mutually exclusive, and spelling both out means a
   stray inherited or third-party colour cannot leave white type on white. */
.asc-header--overlay.is-stuck .asc-context,
.asc-header--overlay.is-stuck .asc-brand__text,
.asc-header--overlay.is-stuck .asc-nav__link,
.asc-header--overlay.is-stuck .asc-login__toggle,
.asc-header--overlay.is-stuck .asc-iconbtn { color: var(--asc-ink); }
.asc-header--overlay.is-stuck .asc-rule { background: var(--asc-line-strong); }

/* ----------------------------------------------------------- scrolled state */

.asc-header.is-stuck .asc-top { height: var(--asc-top-h-stuck); }
.asc-header.is-stuck .asc-row { min-height: var(--asc-nav-h-stuck); }
.asc-header.is-stuck .asc-nav__link { min-height: var(--asc-nav-h-stuck); }
.asc-header.is-stuck .asc-brand__text { font-size: clamp(19px, 2vw, 25px); }
.asc-header.is-stuck .asc-brand img { height: clamp(22px, 2.2vw, 30px); }
.asc-header.is-stuck { box-shadow: 0 10px 30px -20px rgba(15, 40, 34, .45); }

/* -------------------------------------------------------------- breakpoints */

@media (max-width: 1024px) {
	:root { --asc-top-h: 62px; --asc-nav-h: 46px; --asc-top-h-stuck: 54px; --asc-nav-h-stuck: 42px; }
	/* Panels are desktop-only; on touch the top-level links go straight to
	   their section page. */
	.asc-mega { display: none; }
	.asc-nav__link .asc-caret { display: none; }
}

@media (max-width: 860px) {
	/* No burger: the row wraps to two centred lines so nothing is hidden. */
	.asc-row { grid-template-columns: 1fr; padding-bottom: 10px; }
	.asc-nav { grid-column: 1; }
	.asc-nav__list { gap: 2px clamp(14px, 4vw, 26px); }
	.asc-nav__link { min-height: 34px; font-size: 13.5px; }
	.asc-actions { grid-column: 1; grid-row: 1; justify-self: end; position: absolute; right: var(--asc-gutter); top: 12px; }
	.asc-header-spacer { height: auto; min-height: calc(var(--asc-top-h) + 84px); }
}

@media (max-width: 560px) {
	/* Three items cannot share one 375px line. The wordmark drops to its own
	   centred row rather than colliding with the labels either side of it. */
	.asc-top {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		height: auto;
		padding: 9px 0 11px;
		row-gap: 9px;
	}
	.asc-header.is-stuck .asc-top { height: auto; }
	.asc-top__left { grid-area: 1 / 1 / 2 / 2; }
	.asc-top__right { grid-area: 1 / 2 / 2 / 3; }
	.asc-brand { grid-area: 2 / 1 / 3 / 3; justify-self: center; }

	.asc-brand__text,
	.asc-header.is-stuck .asc-brand__text { font-size: 18px; letter-spacing: .16em; text-indent: .16em; }
	.asc-context { font-size: 12.5px; }
	.asc-login__toggle { font-size: 12.5px; height: 26px; }
	.asc-login__menu { min-width: 228px; }
	.asc-actions { top: 8px; }
	.asc-header-spacer { min-height: 158px; }
}

/* ------------------------------------------------------ motion, print, a11y */

@media (prefers-reduced-motion: reduce) {
	.asc-header *,
	.asc-header *::before,
	.asc-header *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
	.asc-header,
	.asc-header-spacer,
	.asc-skip { display: none !important; }
}

/* Belt and braces: if the theme header is ever emitted as well, hide it. */
.asc-header ~ #site-header.site-header { display: none !important; }

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