/* ==========================================================================
   Success Stories - listing (/success-stories/) and story pages
   ==========================================================================

   Written mobile-first: the base rules are the phone layout and the two
   min-width blocks at the end widen it. Nothing here needs a correction in
   the refinements files.

   Design language is taken from the case study detail page rather than
   invented - #18181B hero over a scrim, orange eyebrow with its square marker,
   #FAFAFA cards with a 16px radius and a 1px #E4E4E7 border. The contact band
   is `.a3-contact-cta`, styled elsewhere and deliberately untouched here.

   Two global.css rules bite every button on this page and are overridden
   where they land: `border-radius: 0 !important` and `min-height: 56px`.
   ========================================================================== */

.a3-ss-single,
.a3-ss-listing {
	--a3-ss-ink: #18181b;
	--a3-ss-body: #3f3f46;
	--a3-ss-muted: #52525b;
	--a3-ss-line: #e4e4e7;
	--a3-ss-surface: #fafafa;
	--a3-ss-brand: #ff6900;
	background: #fff;
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

.a3-ss-hero {
	position: relative;
	z-index: 1;
	padding: 56px 0 48px;
	background: var(--a3-ss-ink);
	overflow: hidden;
}

/* The photograph, when there is one, sits behind a scrim rather than being
   darkened in the file - an unretouched library image still reads.
   Anchored right: the title occupies the left half, so the subject of the
   photograph is kept in the half that stays clear of it. */
.a3-ss-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--a3-ss-hero-bg);
	background-size: cover;
	background-position: center right;
	opacity: 0.62;
}

/* Opaque behind the text, thin over the picture. A flat 0.9 scrim at the
   case study's opacity swallowed these images whole - most of them are light,
   where the case study's own banner is dark. */
.a3-ss-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(
		to right,
		rgba(24, 24, 27, 0.96) 0%,
		rgba(24, 24, 27, 0.9) 38%,
		rgba(24, 24, 27, 0.55) 72%,
		rgba(24, 24, 27, 0.4) 100%
	);
}

/* No photograph: a flat band, no gradient banding to give it away. */
.a3-ss-hero:not(.a3-ss-hero--photo)::after {
	background-image: none;
	background-color: var(--a3-ss-ink);
}

.a3-ss-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 860px;
}

.a3-ss-crumbs {
	margin-bottom: 20px;
	font-size: 13px;
	letter-spacing: 0.02em;
}

.a3-ss-crumbs a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: var(--transition);
}

.a3-ss-crumbs a:hover,
.a3-ss-crumbs a:focus-visible {
	color: #fff;
	border-bottom-color: var(--a3-ss-brand);
}

.a3-ss-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	margin-bottom: 16px;
	padding: 5px 12px;
	border: 1px solid rgba(255, 105, 0, 0.45);
	border-radius: 999px;
	background: rgba(255, 105, 0, 0.14);
	color: #ffb27a;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 16px;
	text-transform: uppercase;
}

.a3-ss-hero__title {
	margin: 0;
	color: #fff;
	font-size: clamp(30px, 6.4vw, 56px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.a3-ss-hero__deck {
	margin: 18px 0 0;
	max-width: 60ch;
	color: rgba(255, 255, 255, 0.82);
	font-size: 17px;
	line-height: 1.7;
}

/* ==========================================================================
   2. Fact strip
   ========================================================================== */

.a3-ss-facts {
	border-bottom: 1px solid var(--a3-ss-line);
	background: #fff;
}

.a3-ss-facts__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 24px;
	padding: 22px 0;
}

.a3-ss-facts__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.a3-ss-facts__label {
	color: var(--a3-ss-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.a3-ss-facts__value {
	color: var(--a3-ss-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

/* ==========================================================================
   3. Body shell + jump nav
   ========================================================================== */

.a3-ss-body {
	padding: 44px 0 8px;
}

.a3-ss-body__grid {
	display: block;
}

/* The rail is desktop-only. On a phone the jump nav is noise above the article
   it indexes, and the enquiry card would be the second form on the page - the
   contact band at the foot already carries one. */
.a3-ss-aside {
	display: none;
}

.a3-ss-sections {
	min-width: 0;
}

/* ==========================================================================
   4. A section
   ========================================================================== */

.a3-ss-sec {
	padding-bottom: 44px;
	scroll-margin-top: 96px;
}

.a3-ss-sec:last-child {
	padding-bottom: 8px;
}

/* A sub-section belongs to the band above it, so it is pulled closer and
   loses the rule that separates top-level sections. */
.a3-ss-sec--h3 {
	padding-bottom: 32px;
}

.a3-ss-sec__head {
	margin-bottom: 18px;
}

.a3-ss-sec__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: var(--a3-ss-brand);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.a3-ss-sec__eyebrow::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	background: var(--a3-ss-brand);
}

.a3-ss-sec__heading {
	margin: 0;
	color: var(--a3-ss-ink);
	font-weight: 700;
	letter-spacing: -0.01em;
}

h2.a3-ss-sec__heading {
	font-size: clamp(24px, 4.6vw, 38px);
	line-height: 1.2;
}

h3.a3-ss-sec__heading {
	font-size: clamp(19px, 3.4vw, 24px);
	line-height: 1.3;
}

.a3-ss-sec__body > * + * {
	margin-top: 24px;
}

/* -------------------------------------------------------- paragraphs ----- */

.a3-ss-prose p {
	margin: 0 0 16px;
	color: var(--a3-ss-body);
	font-size: 16px;
	line-height: 1.8;
}

.a3-ss-prose p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------- numbered points ----- */

.a3-ss-points {
	counter-reset: a3ss;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 14px;
}

.a3-ss-point {
	counter-increment: a3ss;
	position: relative;
	padding: 18px 20px 18px 56px;
	border: 1px solid var(--a3-ss-line);
	border-radius: 14px;
	background: var(--a3-ss-surface);
}

.a3-ss-point::before {
	content: counter(a3ss);
	position: absolute;
	top: 18px;
	left: 18px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--a3-ss-brand);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.a3-ss-point__label {
	display: block;
	margin-bottom: 6px;
	color: var(--a3-ss-ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.a3-ss-point__text {
	display: block;
	color: var(--a3-ss-body);
	font-size: 15px;
	line-height: 1.75;
}

/* A point with only a label is a bullet in disguise - keep it compact. */
.a3-ss-point__label:only-child {
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 600;
}

/* ------------------------------------------------------------ cards ----- */

.a3-ss-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

.a3-ss-card {
	padding: 22px;
	border: 1px solid var(--a3-ss-line);
	border-radius: 16px;
	background: var(--a3-ss-surface);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: var(--transition);
}

.a3-ss-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
}

/* 44px tile with the line icon at 24px - the same proportion the tooling
   chips on the services pages use for a brand mark. */
.a3-ss-card__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border: 1px solid var(--a3-ss-line);
	border-radius: 12px;
	background: #fff;
}

.a3-ss-card__icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: block;
}

.a3-ss-card__title {
	margin: 0 0 10px;
	color: var(--a3-ss-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
}

.a3-ss-card__title::after {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	margin-top: 10px;
	background: var(--a3-ss-brand);
}

.a3-ss-card__text {
	margin: 0;
	color: var(--a3-ss-body);
	font-size: 15px;
	line-height: 1.75;
}

/* ---------------------------------------------------------- bullets ----- */

.a3-ss-bullets {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.a3-ss-bullets li {
	position: relative;
	padding-left: 30px;
	color: var(--a3-ss-body);
	font-size: 16px;
	line-height: 1.75;
}

.a3-ss-bullets li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--a3-ss-brand);
	border-bottom: 2px solid var(--a3-ss-brand);
	transform: rotate(-45deg);
}

/* ------------------------------------------------------------ stats ----- */

/* A results band, not four loose boxes.
 *
 * The whole section sits on a tinted, bordered panel so the numbers read as
 * one claim about the project; the cards go white on that tint, which is what
 * gives them separation now that they are no longer grey-on-white. The accent
 * rule between the figure and its explanation is the same 28px orange bar the
 * card grid uses further up the page, so the two bands look related. */
.a3-ss-sec--stats {
	/* The panel supplies its own padding, so the section's bottom padding has
	   to come off - left on, it opened a gap INSIDE the panel under the cards
	   and closed the one that should separate the panel from the heading
	   below it. The separation is a margin now, outside the border. */
	padding: 26px 20px 28px;
	margin-bottom: 44px;
	border: 1px solid var(--a3-ss-line);
	border-radius: 20px;
	background: var(--a3-ss-surface);
}

.a3-ss-sec--stats:last-child {
	margin-bottom: 8px;
}

.a3-ss-sec--stats .a3-ss-sec__head {
	margin-bottom: 22px;
}

/* One column on a phone. Two put ~128px of measure under the number, which
   broke "HIPAA-compliant" across lines; these descriptions are sentences, not
   labels. Two columns come back as soon as there is width for them. */
.a3-ss-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 560px) {

	.a3-ss-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.a3-ss-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 22px 20px 20px;
	border: 1px solid var(--a3-ss-line);
	border-radius: 14px;
	background: #fff;
	transition: var(--transition);
}

/* Top-right badge rather than above the number: the figure is what the eye
   should land on first, and an icon stacked over it competes for that. */
.a3-ss-stat__icon {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: rgba(255, 105, 0, 0.09);
	transition: var(--transition);
}

.a3-ss-stat__icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
	display: block;
	opacity: 0.85;
}

.a3-ss-stat:hover .a3-ss-stat__icon {
	background: rgba(255, 105, 0, 0.16);
}

/* Keep the figure clear of the badge. */
.a3-ss-stat__value {
	padding-right: 42px;
}

.a3-ss-stat:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 105, 0, 0.35);
	box-shadow: 0 14px 30px rgba(17, 24, 39, 0.07);
}

.a3-ss-stat__value {
	display: block;
	color: var(--a3-ss-ink);
	font-size: clamp(30px, 7vw, 42px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

/* The unit carries the colour so a row of four numbers does not read as four
   identical blocks of black. Baseline-aligned rather than superscript - these
   are figures, not footnotes. */
.a3-ss-stat__unit {
	color: var(--a3-ss-brand);
	font-size: 0.62em;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-left: 1px;
}

.a3-ss-stat__value::after {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	margin: 14px 0 0;
	background: var(--a3-ss-brand);
	border-radius: 2px;
}

.a3-ss-stat__text {
	margin-top: 12px;
	color: var(--a3-ss-muted);
	font-size: 14px;
	line-height: 1.7;
}

/* ------------------------------------------------------------ chips ----- */

.a3-ss-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.a3-ss-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px;
	border: 1px solid var(--a3-ss-line);
	border-radius: 999px;
	background: #fff;
	color: var(--a3-ss-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.a3-ss-chip__logo {
	width: 22px;
	height: 22px;
	object-fit: contain;
	flex: 0 0 auto;
}

.a3-ss-chip--plain {
	background: var(--a3-ss-surface);
}

/* ------------------------------------------------------------ quote ----- */

.a3-ss-quote {
	margin: 0;
	padding: 22px 24px;
	border-left: 3px solid var(--a3-ss-brand);
	background: var(--a3-ss-surface);
	border-radius: 0 14px 14px 0;
}

.a3-ss-quote blockquote {
	margin: 0;
	color: var(--a3-ss-ink);
	font-size: 18px;
	font-style: italic;
	line-height: 1.65;
}

.a3-ss-quote figcaption {
	margin-top: 12px;
	color: var(--a3-ss-muted);
	font-size: 13px;
	font-weight: 600;
}

/* ==========================================================================
   4b. Share block
   --------------------------------------------------------------------------
   The block the blog articles carry, restyled here rather than borrowed:
   `.a3-ba-share` lives in blog-article.css, 44 KB of article layout that would
   have to load on all 31 stories to reach about 60 lines of rail. The network
   list itself is genuinely shared - a3_ba_share_networks() reads the same
   Article Settings repeater - so adding a network there adds it to both.

   Measurements follow the blog block as built: 46px rows, a 1px rule, 14px/700
   labels, and the brand colour appearing only on the row being pointed at.
   ========================================================================== */

.a3-ss-share {
	position: relative;
	flex: 0 0 auto;
}

.a3-ss-share__btn {
	display: flex;
	align-items: center;
	/* global.css centres the contents of every button, and two of these three
	   are buttons while Email is a link - left alone the icons do not line up
	   with each other. It also floors every button at 56px, which is 10px too
	   tall for this row. Neither is inherited, so both are stated. */
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	height: 46px;
	min-height: 0;
	padding: 0 17px;
	background: transparent;
	border: 1px solid var(--a3-ss-line) !important;
	border-radius: 0 !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: normal;
	color: var(--a3-ss-muted);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition:
		color 0.2s ease,
		border-color 0.2s ease;
}

.a3-ss-share__btn + .a3-ss-share__btn {
	margin-top: 8px;
}

.a3-ss-share__btn:hover,
.a3-ss-share__btn:focus-visible {
	color: var(--a3-ss-ink);
	border-color: var(--a3-ss-ink) !important;
}

.a3-ss-share__btn[aria-expanded="true"] {
	color: var(--a3-ss-ink);
	border-color: var(--a3-ss-ink) !important;
}

/* Set by success-stories.js after a successful copy, cleared 2s later. */
.a3-ss-share__btn.is-copied {
	color: var(--a3-ss-brand);
	border-color: var(--a3-ss-brand) !important;
}

.a3-ss-share__btn svg {
	flex: 0 0 auto;
}

/* The list is plain links in the markup and merely `hidden`, so with the
   script gone every network is still reachable - the button just stops being
   a disclosure. */
.a3-ss-share__menu {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--a3-ss-line);
	background: #fff;
}

.a3-ss-share__menu[hidden] {
	display: none;
}

.a3-ss-share__net {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 46px;
	padding: 0 17px;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	color: var(--a3-ss-muted);
	text-decoration: none;
	transition:
		color 0.2s ease,
		background-color 0.2s ease;
}

.a3-ss-share__menu li + li .a3-ss-share__net {
	border-top: 1px solid var(--a3-ss-line);
}

.a3-ss-share__net:hover,
.a3-ss-share__net:focus-visible {
	background: var(--a3-ss-surface);
	color: var(--a3-ss-ink);
}

/* Each network in its own colour, and only on the row being pointed at. */
.a3-ss-share__net--facebook:hover { color: #1877f2; }
.a3-ss-share__net--x:hover { color: #000; }
.a3-ss-share__net--linkedin:hover { color: #0a66c2; }
.a3-ss-share__net--whatsapp:hover { color: #25d366; }
.a3-ss-share__net--telegram:hover { color: #229ed9; }
.a3-ss-share__net--reddit:hover { color: #ff4500; }

/* ==========================================================================
   5. Listing - numbers band
   ========================================================================== */

.a3-ss-figures {
	padding: 36px 0;
	border-bottom: 1px solid var(--a3-ss-line);
}

.a3-ss-figures__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	text-align: center;
}

.a3-ss-figure__value {
	display: block;
	color: var(--a3-ss-ink);
	font-size: clamp(28px, 6vw, 42px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.a3-ss-figure__text {
	display: block;
	margin-top: 6px;
	color: var(--a3-ss-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* ==========================================================================
   6. Listing - filter, grid, cards
   ========================================================================== */

.a3-ss-collection {
	padding: 40px 0 56px;
}

/* On a phone thirteen chips wrap to eight rows and push the first card off
   the screen, so the row scrolls sideways instead. It wraps again from the
   tablet breakpoint up, where there is width for two rows at most. */
.a3-ss-filter {
	display: flex;
	gap: 10px;
	margin-bottom: 24px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}

.a3-ss-filter::-webkit-scrollbar {
	display: none;
}

.a3-ss-filter__chip {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* global.css forces every button to a 0 radius and a 56px box - both are
   wrong for a filter chip, so both are answered here. */
.a3-ss-filter__chip {
	min-height: 0;
	padding: 9px 16px;
	border: 1px solid var(--a3-ss-line) !important;
	border-radius: 999px !important;
	background: #fff;
	color: var(--a3-ss-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: var(--transition);
}

.a3-ss-filter__chip:hover {
	border-color: #d4d4d8 !important;
	background: var(--a3-ss-surface);
	color: var(--a3-ss-ink);
}

.a3-ss-filter__chip.is-active {
	border-color: var(--a3-ss-brand) !important;
	background: var(--a3-ss-brand);
	color: #fff;
}

.a3-ss-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.a3-ss-tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--a3-ss-line);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: var(--transition);
}

.a3-ss-tile__cover {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--a3-ss-surface);
}

.a3-ss-tile__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

.a3-ss-tile:hover .a3-ss-tile__cover img {
	transform: scale(1.04);
}

.a3-ss-tile__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 24px 24px;
}

.a3-ss-tile:hover {
	transform: translateY(-4px);
	border-color: #d4d4d8;
	box-shadow: 0 18px 40px rgba(17, 24, 39, 0.08);
}

.a3-ss-tile--hidden,
.a3-ss-tile--folded {
	display: none !important;
}

.a3-ss-tile__cat {
	align-self: flex-start;
	margin-bottom: 14px;
	padding: 4px 11px;
	border-radius: 999px;
	background: rgba(255, 105, 0, 0.1);
	color: #c24f00;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.a3-ss-tile__title {
	margin: 0 0 12px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
}

.a3-ss-tile__title a {
	color: var(--a3-ss-ink);
	text-decoration: none;
}

/* The whole card is the hit area; the heading link is what carries it, so
   keyboard focus still lands on something meaningful. */
.a3-ss-tile__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.a3-ss-tile {
	position: relative;
}

.a3-ss-tile:hover .a3-ss-tile__title a {
	color: var(--a3-ss-brand);
}

.a3-ss-tile__summary {
	margin: 0 0 18px;
	color: var(--a3-ss-body);
	font-size: 15px;
	line-height: 1.7;
}

.a3-ss-tile__stat {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--a3-ss-line);
}

.a3-ss-tile__stat-value {
	display: block;
	color: var(--a3-ss-ink);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.a3-ss-tile__stat-text {
	display: block;
	margin-top: 4px;
	color: var(--a3-ss-muted);
	font-size: 12px;
	line-height: 1.5;
}

.a3-ss-tile__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	color: var(--a3-ss-brand);
	font-size: 14px;
	font-weight: 700;
}

.a3-ss-tile__more svg {
	transition: var(--transition);
}

.a3-ss-tile:hover .a3-ss-tile__more svg {
	transform: translate(2px, -2px);
}

.a3-ss-grid__empty {
	margin: 28px 0 0;
	color: var(--a3-ss-muted);
	text-align: center;
}

.a3-ss-more {
	margin-top: 28px;
	text-align: center;
}

.a3-ss-more__btn {
	min-height: 0;
	padding: 13px 30px;
	border: 1px solid var(--a3-ss-ink) !important;
	border-radius: 999px !important;
	background: #fff;
	color: var(--a3-ss-ink);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: var(--transition);
}

.a3-ss-more__btn:hover {
	background: var(--a3-ss-ink);
	color: #fff;
}

/* ==========================================================================
   7. Related band
   ========================================================================== */

.a3-ss-related {
	padding: 48px 0 56px;
	border-top: 1px solid var(--a3-ss-line);
	background: #fff;
}

.a3-ss-related__head {
	margin-bottom: 26px;
}

.a3-ss-related__head h2 {
	margin: 0;
	color: var(--a3-ss-ink);
	font-size: clamp(24px, 4.6vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.a3-ss-related__all {
	display: inline-flex;
	align-items: center;
	margin-top: 26px;
	color: var(--a3-ss-ink);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--a3-ss-brand);
	padding-bottom: 2px;
}

.a3-ss-related__all:hover {
	color: var(--a3-ss-brand);
}

/* ==========================================================================
   8. Tablet
   ========================================================================== */

@media (min-width: 768px) {

	.a3-ss-hero {
		padding: 76px 0 64px;
	}

	.a3-ss-facts__inner {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding: 26px 0;
	}

	.a3-ss-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.a3-ss-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}

	.a3-ss-sec--stats {
		padding: 32px 28px 34px;
	}

	.a3-ss-figures__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.a3-ss-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}

	.a3-ss-point {
		padding: 20px 24px 20px 62px;
	}

	.a3-ss-filter {
		flex-wrap: wrap;
		overflow-x: visible;
		margin-bottom: 28px;
	}
}

/* ==========================================================================
   9. Desktop - the jump nav appears and the body indents beside it
   ========================================================================== */

@media (min-width: 992px) {

	.a3-ss-hero {
		padding: 96px 0 84px;
	}

	.a3-ss-body {
		padding: 64px 0 16px;
	}

	.a3-ss-body--with-nav .a3-ss-body__grid {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		gap: 56px;
		align-items: start;
	}

	/* One column holding the nav and the enquiry card.
	 *
	 * The share rows are ~190px and a twelve-item nav is ~370px, so a long
	 * story's rail wants ~590px. Pinning a rail taller than the window would
	 * put its tail out of reach for good - a sticky element never scrolls its
	 * own bottom into view - so stickiness is spent only where there is room
	 * for it (the block at the end of this file), and on a short window the
	 * rail simply scrolls with the page. */
	.a3-ss-body--with-nav .a3-ss-aside {
		display: flex;
		flex-direction: column;
		gap: 22px;
	}

	.a3-ss-nav {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding-right: 8px;
	}

	.a3-ss-share {
		flex: 0 0 auto;      /* the share rows are never what gives way */
	}

	.a3-ss-nav__title {
		margin: 0 0 14px;
		color: var(--a3-ss-muted);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.16em;
		text-transform: uppercase;
	}

	.a3-ss-nav__list {
		margin: 0;
		padding: 0;
		list-style: none;
		border-left: 2px solid var(--a3-ss-line);
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: var(--a3-ss-line) transparent;
	}

	.a3-ss-nav__list a {
		display: block;
		padding: 9px 0 9px 16px;
		margin-left: -2px;
		border-left: 2px solid transparent;
		color: var(--a3-ss-muted);
		font-size: 14px;
		line-height: 1.5;
		text-decoration: none;
		transition: var(--transition);
	}

	.a3-ss-nav__list a:hover {
		color: var(--a3-ss-ink);
	}

	.a3-ss-nav__list a.is-current {
		border-left-color: var(--a3-ss-brand);
		color: var(--a3-ss-ink);
		font-weight: 700;
	}

	/* The measure is capped so long paragraphs stay readable even though the
	   column itself is wide. */
	.a3-ss-prose p,
	.a3-ss-bullets li {
		max-width: 74ch;
	}

	.a3-ss-sec {
		padding-bottom: 56px;
	}

	/* auto-fit rather than a fixed count: a band of four numbers fills the row
	   beside the nav instead of leaving a 3 + 1 orphan, and a band of two does
	   not stretch into half-empty cards. */
	.a3-ss-stats {
		grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
		gap: 16px;
	}

	.a3-ss-sec--stats {
		padding: 36px 32px 38px;
	}

	.a3-ss-stat {
		padding: 26px 22px 24px;
	}

	.a3-ss-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	.a3-ss-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.a3-ss-collection {
		padding: 56px 0 72px;
	}

	.a3-ss-related {
		padding: 64px 0 80px;
	}
}

/* ==========================================================================
   10. Tall enough windows only - pin the rail
   --------------------------------------------------------------------------
   Measured: nav plus share is ~533px on a six-section story, ~640px with the
   header offset. Above that the rail pins under the header and the nav list
   takes whatever height is left, scrolling inside itself on a very long story.
   Below it the rail stays in normal flow, because a pinned column taller than
   the window can never scroll its own bottom into view.
   ========================================================================== */

@media (min-width: 992px) and (min-height: 700px) {

	.a3-ss-body--with-nav .a3-ss-aside {
		position: sticky;
		top: 104px;
		max-height: calc(100vh - 128px);
	}
}