/*
 * Section treatments.
 *
 * Each band can render in one of several layouts, taken from the approved
 * designs. Nothing here touches the words — a treatment only arranges what the
 * renderer already has, so switching one changes the composition and leaves
 * the approved copy exactly as imported.
 *
 * House rules kept throughout:
 *  - hover is always a transform/opacity/filter change, never a layout one
 *  - every treatment has an explicit behaviour at 1080 / 860 / 620
 *  - anything that relies on width (slats, spines) restructures on mobile
 *    rather than shrinking into something unreadable
 */

/* Sections whose treatment runs edge to edge. */
.cq-sec--flush > .cq-in { max-width: none; padding-inline: 0; }
.cq-sec--flush .cq-head { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ==================================================================
 * INTRODUCTION — statement
 * ================================================================== */
.cq-v-statement {
	margin: 0 0 clamp(26px, 3.2vw, 46px);
	font-family: var(--font-head);
	font-size: clamp(24px, 3vw, 40px);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.02em;
	color: #fff;
	max-width: 26ch;
	text-wrap: balance;
}
.cq-v-stmt__cols { border-top: 1px solid rgba(255,255,255,.08); padding-top: clamp(24px, 3vw, 40px); }

.cq-v-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4.5vw, 76px);
}
.cq-v-two__c p {
	margin: 0 0 1.3em;
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--muted-dark);
}
.cq-v-two__c p:last-child { margin-bottom: 0; }

/* ==================================================================
 * INTRODUCTION — split (copy left, image + figure badge right)
 * ================================================================== */
.cq-v-split {
	display: grid;
	grid-template-columns: 1fr 1.06fr;
	gap: clamp(30px, 4.4vw, 76px);
	align-items: start;
}
.cq-v-split__h { margin-bottom: 20px; font-size: clamp(22px, 2.4vw, 32px); }
.cq-v-split__copy p { font-size: 14.5px; line-height: 1.78; color: var(--muted-dark); }

.cq-v-split__media {
	position: relative;
	margin: 0;
	border-radius: var(--r-card);
	overflow: hidden;
	isolation: isolate;
}
.cq-v-split__media img,
.cq-v-split__media .cq-ph {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 900ms var(--e-card), filter 620ms var(--e-ui);
}
/* A thin tint edge on the right, as the approved page shows. */
.cq-v-split__media::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: 3px;
	background: var(--green-br);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 620ms var(--e-card);
}
.cq-v-split__media:hover::after { transform: scaleY(1); }
.cq-v-split__media:hover img,
.cq-v-split__media:hover .cq-ph { transform: scale(1.05); }

.cq-v-badge {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 15px 22px;
	background: var(--green);
	color: #fff;
	transition: background var(--d-btn) var(--e-ui), transform 460ms var(--e-card);
}
.cq-v-badge strong { font-family: var(--font-head); font-size: 26px; font-weight: 800; line-height: 1; }
.cq-v-badge span { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .92; }
.cq-v-split__media:hover .cq-v-badge { background: var(--green-br); transform: translate3d(0, -3px, 0); }

/* ==================================================================
 * INTRODUCTION — panel (heading + image left, ruled copy right)
 * ================================================================== */
.cq-v-panel {
	display: grid;
	grid-template-columns: .92fr 1.08fr;
	gap: clamp(30px, 4.6vw, 82px);
	align-items: start;
}
.cq-v-panel__h {
	margin: 0 0 24px;
	font-family: var(--font-head);
	font-size: clamp(21px, 2.3vw, 30px);
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.018em;
	color: #fff;
	max-width: 18ch;
}
.cq-v-panel__media {
	position: relative;
	border-radius: var(--r-card);
	overflow: hidden;
	isolation: isolate;
}
.cq-v-panel__media img,
.cq-v-panel__media .cq-ph {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 900ms var(--e-card);
}
.cq-v-panel__media:hover img,
.cq-v-panel__media:hover .cq-ph { transform: scale(1.05); }

.cq-v-panel__tag {
	position: absolute;
	inset-inline-start: 14px;
	inset-block-end: 14px;
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 7px 13px;
	background: rgba(5,7,10,.72);
	border: 1px solid rgba(105,185,75,.42);
	border-radius: 2px;
	backdrop-filter: blur(6px);
}
.cq-v-panel__tag strong { font-family: var(--font-head); font-size: 14px; font-weight: 700; color: var(--green-br); }
.cq-v-panel__tag em { font-style: normal; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dark); }

/* Each paragraph sits in its own ruled block. */
.cq-v-panel__body { display: grid; }
.cq-v-panel__p {
	margin: 0;
	padding-block: clamp(20px, 2.4vw, 30px);
	border-top: 1px solid rgba(255,255,255,.09);
	font-size: 14.5px;
	line-height: 1.78;
	color: var(--muted-dark);
	transition: color 340ms var(--e-ui), border-color 340ms var(--e-ui);
}
.cq-v-panel__p:first-child { border-top: 0; padding-top: 0; }
.cq-v-panel__p:hover { color: #cfd8dd; border-color: rgba(105,185,75,.3); }

/* ==================================================================
 * PROVIDE — numbered rail in a frame
 * ================================================================== */
.cq-v-rail {
	border: 1px solid rgba(255,255,255,.09);
	border-radius: var(--r-card);
	overflow: hidden;
}
.cq-v-rail__row {
	position: relative;
	display: grid;
	grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1.25fr);
	gap: clamp(16px, 2.4vw, 40px);
	align-items: center;
	padding: clamp(22px, 2.6vw, 34px) clamp(18px, 2.4vw, 34px);
	border-top: 1px solid rgba(255,255,255,.07);
	transition: background 380ms var(--e-ui);
}
.cq-v-rail__row:first-child { border-top: 0; }
/* A tint bar wipes in from the left on hover. */
.cq-v-rail__row::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 3px;
	background: var(--tint, var(--green-br));
	transform: scaleY(0);
	transition: transform 460ms var(--e-card);
}
.cq-v-rail__row:hover { background: rgba(255,255,255,.028); }
.cq-v-rail__row:hover::before { transform: scaleY(1); }

.cq-v-rail__n {
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--muted-dark);
	transition: color 340ms var(--e-ui), transform 460ms var(--e-card);
}
.cq-v-rail__row:hover .cq-v-rail__n { color: var(--green-br); transform: translateX(4px); }

.cq-v-rail__t {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(15px, 1.35vw, 18px);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #fff;
}
.cq-v-rail__d { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--muted-dark); }

/* ==================================================================
 * PROVIDE — vertical slats
 * ================================================================== */
.cq-v-slats {
	display: flex;
	align-items: stretch;
	height: clamp(400px, 46vw, 520px);
	--slat-speed: 620ms;
}

.cq-v-slat {
	position: relative;
	flex: 0 1 96px;
	min-width: 0;
	overflow: hidden;
	isolation: isolate;
	border-inline-start: 1px solid rgba(255,255,255,.1);
	transition: flex-grow var(--slat-speed) var(--e-card), flex-basis var(--slat-speed) var(--e-card);
}
.cq-v-slat:first-child { border-inline-start: 0; }
.cq-v-slat.is-open { flex-grow: 6; flex-basis: 360px; }

.cq-v-slat__media { position: absolute; inset: 0; z-index: 0; }
.cq-v-slat__media img,
.cq-v-slat__media .cq-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: auto;
	filter: grayscale(.72) brightness(.62);
	transform: scale(1.04);
	transition: filter var(--slat-speed) var(--e-ui), transform 1100ms var(--e-card);
}
.cq-v-slat.is-open .cq-v-slat__media img,
.cq-v-slat.is-open .cq-v-slat__media .cq-ph {
	filter: grayscale(0) brightness(.86);
	transform: scale(1);
}
.cq-v-slat:hover .cq-v-slat__media img,
.cq-v-slat:hover .cq-v-slat__media .cq-ph { filter: grayscale(.3) brightness(.78); }

.cq-v-slat__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5,7,10,.94) 4%, rgba(5,7,10,.5) 42%, rgba(5,7,10,.16) 100%);
}

.cq-v-slat__index {
	position: absolute;
	z-index: 3;
	inset-block-end: 16px;
	inset-inline-start: 0;
	right: 0;
	text-align: center;
	font-family: var(--font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--green-br);
}
.cq-v-slat.is-open .cq-v-slat__index { text-align: start; padding-inline-start: 24px; }

/* The closed spine: the title stands upright, which is the only way a 96px
   column can carry a real service name legibly. */
.cq-v-slat__spine {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0 0 52px;
}
.cq-v-slat__spineT {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--font-head);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	transition: color 340ms var(--e-ui), letter-spacing 460ms var(--e-card);
}
.cq-v-slat:hover .cq-v-slat__spineT { color: var(--green-br); letter-spacing: .21em; }
.cq-v-slat.is-open .cq-v-slat__spine { opacity: 0; pointer-events: none; }
.cq-v-slat__spine:focus-visible { outline: 2px solid var(--green-br); outline-offset: -6px; }

/* The open panel. */
.cq-v-slat__open {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 26px 24px 46px;
	opacity: 0;
	transform: translate3d(-14px, 0, 0);
	transition: opacity 420ms var(--e-ui), transform var(--slat-speed) var(--e-card);
	pointer-events: none;
}
.cq-v-slat.is-open .cq-v-slat__open {
	opacity: 1;
	transform: none;
	transition-delay: 180ms;
	pointer-events: auto;
}
.cq-v-slat__t {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(15px, 1.4vw, 19px);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}
.cq-v-slat__d {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.62;
	color: var(--muted-dark);
	max-width: 46ch;
}
/* The open slat is marked with a rule along its top edge. */
.cq-v-slat.is-open::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--green-br);
	z-index: 5;
	animation: cq-v-wipe 620ms var(--e-card) both;
}
@keyframes cq-v-wipe { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }

/* ==================================================================
 * PROVIDE — ghost cards
 * ================================================================== */
.cq-v-ghost {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
}
.cq-v-ghost__c {
	position: relative;
	padding: 30px 26px 28px;
	background: var(--ink2);
	border: 1px solid rgba(255,255,255,.07);
	border-radius: var(--r-card);
	overflow: hidden;
	isolation: isolate;
	transition: transform 460ms var(--e-card), border-color 340ms var(--e-ui), box-shadow 460ms var(--e-card);
}
.cq-v-ghost__n {
	position: absolute;
	inset-block-start: 6px;
	inset-inline-start: 20px;
	z-index: -1;
	font-family: var(--font-head);
	font-size: 74px;
	font-weight: 800;
	line-height: 1;
	color: rgba(105,185,75,.09);
	transition: color 460ms var(--e-ui), transform 620ms var(--e-card);
}
.cq-v-ghost__c:hover {
	transform: translate3d(0, -6px, 0);
	border-color: rgba(105,185,75,.3);
	box-shadow: 0 26px 50px -20px rgba(0,0,0,.7);
}
.cq-v-ghost__c:hover .cq-v-ghost__n {
	color: rgba(105,185,75,.19);
	transform: translate3d(0, -5px, 0) scale(1.05);
}
.cq-v-ghost__t {
	margin: 34px 0 0;
	font-family: var(--font-head);
	font-size: clamp(14.5px, 1.25vw, 17px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
}
.cq-v-ghost__d { margin: 13px 0 0; font-size: 13px; line-height: 1.62; color: var(--muted-dark); }

/* ==================================================================
 * PROVIDE — image carousel
 * ================================================================== */
.cq-v-car { position: relative; }
.cq-v-car__navs {
	position: absolute;
	inset-block-start: calc(-1 * clamp(48px, 5vw, 68px));
	inset-inline-end: 0;
	display: flex;
	gap: 8px;
	z-index: 3;
}
.cq-v-car__track { padding-inline: 0; }
.cq-v-car__i {
	position: relative;
	flex: 0 0 clamp(230px, 24vw, 296px);
	scroll-snap-align: start;
	overflow: hidden;
	isolation: isolate;
	transition: transform 460ms var(--e-card);
}
.cq-v-car__media { position: relative; }
.cq-v-car__media img,
.cq-v-car__media .cq-ph {
	width: 100%;
	height: clamp(300px, 30vw, 360px);
	object-fit: cover;
	aspect-ratio: auto;
	transition: transform 900ms var(--e-card), filter 460ms var(--e-ui);
}
.cq-v-car__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5,7,10,.92) 6%, rgba(5,7,10,.34) 48%, transparent 82%);
}
.cq-v-car__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 2;
	padding: 20px;
}
.cq-v-car__t {
	margin: 0;
	font-family: var(--font-head);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.32;
	color: #fff;
	max-width: 22ch;
}
.cq-v-car__d {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--muted-dark);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 520ms var(--e-card), opacity 380ms var(--e-ui), margin 520ms var(--e-card);
}
/* The description is held back until hover so the row stays scannable. */
.cq-v-car__i:hover .cq-v-car__d { max-height: 8em; opacity: 1; }
.cq-v-car__i:hover .cq-v-car__media img,
.cq-v-car__i:hover .cq-v-car__media .cq-ph { transform: scale(1.07); }
.cq-v-car__i::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--green-br);
	z-index: 3;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 520ms var(--e-card);
}
.cq-v-car__i:hover::before { transform: scaleX(1); }

/* ==================================================================
 * PROVIDE — discipline rail
 * ================================================================== */
.cq-v-disc { position: relative; }
.cq-v-disc__row {
	position: relative;
	display: grid;
	grid-template-columns: 62px minmax(0, .9fr) minmax(0, 1.3fr);
	gap: clamp(14px, 2.2vw, 34px);
	align-items: center;
	padding-block: clamp(20px, 2.3vw, 30px);
	border-bottom: 1px solid rgba(255,255,255,.07);
	transition: background 380ms var(--e-ui);
}
.cq-v-disc__row:last-child { border-bottom: 0; }
/* The connecting line between the circles. */
.cq-v-disc__row::before {
	content: "";
	position: absolute;
	inset-inline-start: 21px;
	inset-block-start: 50%;
	height: 100%;
	width: 1px;
	background: rgba(105,185,75,.26);
}
.cq-v-disc__row:last-child::before { display: none; }
.cq-v-disc__row:hover { background: rgba(255,255,255,.026); }

.cq-v-disc__n {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 43px;
	height: 43px;
	border: 1px solid rgba(105,185,75,.45);
	border-radius: 50%;
	background: var(--void);
	font-family: var(--font-head);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--green-br);
	transition: background 340ms var(--e-ui), transform 460ms var(--e-card), box-shadow 460ms var(--e-card), color 340ms var(--e-ui);
}
.cq-v-disc__row:hover .cq-v-disc__n {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
	transform: scale(1.1);
	box-shadow: 0 0 0 6px rgba(45,162,55,.14);
}
.cq-v-disc__t {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(14.5px, 1.25vw, 17px);
	font-weight: 700;
	line-height: 1.32;
	color: #fff;
}
.cq-v-disc__d { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--muted-dark); }

/* ==================================================================
 * WORK — explore cards
 * ================================================================== */
.cq-v-explore {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.07);
	border-radius: var(--r-card);
	overflow: hidden;
}
.cq-v-explore__c {
	position: relative;
	padding: clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 34px) clamp(30px, 3.2vw, 42px);
	background: var(--ink2);
	overflow: hidden;
	isolation: isolate;
	transition: background 380ms var(--e-ui);
}
.cq-v-explore__c:hover { background: #16202a; }
.cq-v-explore__rule {
	display: block;
	width: 32px;
	height: 2px;
    background: var(--green-br);
	transition: width 520ms var(--e-card);
}
.cq-v-explore__c:hover .cq-v-explore__rule { width: 74px; }
.cq-v-explore__step {
	display: block;
	margin-block-start: 18px;
	font-family: var(--font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--green-br);
}
.cq-v-explore__t {
	margin: 14px 0 0;
	font-family: var(--font-head);
	font-size: clamp(15px, 1.4vw, 19px);
	font-weight: 800;
	line-height: 1.24;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #fff;
	max-width: 22ch;
}
.cq-v-explore__d { margin: 12px 0 0; font-size: 13.5px; line-height: 1.62; color: var(--muted-dark); max-width: 48ch; }
.cq-v-explore__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-start: 24px;
	font-family: var(--font-head);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--green-br);
}
.cq-v-explore__link .cq-arw { transition: transform var(--d-btn) var(--e-ui); }
.cq-v-explore__c:hover .cq-v-explore__link .cq-arw { transform: translateX(5px); }

.cq-v-explore__n {
	position: absolute;
	z-index: -1;
	inset-block-end: -14px;
	inset-inline-end: 18px;
	font-family: var(--font-head);
	font-size: clamp(74px, 8vw, 118px);
	font-weight: 800;
	line-height: 1;
	color: rgba(105,185,75,.07);
	transition: color 520ms var(--e-ui), transform 700ms var(--e-card);
}
.cq-v-explore__c:hover .cq-v-explore__n {
	color: rgba(105,185,75,.15);
	transform: translate3d(-6px, -6px, 0);
}

/* ==================================================================
 * WORK — horizontal stepper
 * ================================================================== */
.cq-v-stepper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(16px, 2vw, 28px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.cq-v-stepper__s { position: relative; }
/* The line that joins one circle to the next. */
.cq-v-stepper__s::after {
	content: "";
	position: absolute;
	inset-block-start: 22px;
	inset-inline-start: 52px;
	width: calc(100% - 20px);
	height: 1px;
	background: rgba(105,185,75,.26);
}
.cq-v-stepper__s:last-child::after { display: none; }

.cq-v-stepper__n {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(105,185,75,.45);
	border-radius: 50%;
	background: var(--ink);
	font-family: var(--font-head);
	font-size: 11.5px;
	font-weight: 700;
	color: var(--green-br);
	transition: background 340ms var(--e-ui), color 340ms var(--e-ui), transform 460ms var(--e-card), box-shadow 460ms var(--e-card);
}
.cq-v-stepper__s.is-first .cq-v-stepper__n { background: var(--green); border-color: var(--green); color: #fff; }
.cq-v-stepper__s:hover .cq-v-stepper__n {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
	transform: scale(1.1);
	box-shadow: 0 0 0 7px rgba(45,162,55,.14);
}
.cq-v-stepper__label {
	display: block;
	margin-block-start: 22px;
	font-family: var(--font-head);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted-dark);
}
.cq-v-stepper__t {
	margin: 10px 0 0;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}
.cq-v-stepper__d { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-dark); }

/* ==================================================================
 * USE CASES — grids
 * ================================================================== */
.cq-v-cases {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}
.cq-v-cases__i {
	position: relative;
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 16px;
	align-items: start;
	padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.6vw, 38px);
	border-block-end: 1px solid rgba(255,255,255,.07);
	transition: background 380ms var(--e-ui);
}
/* The centre divider, drawn only between the two columns. */
.cq-v-cases__i:nth-child(odd) { border-inline-end: 1px solid rgba(255,255,255,.07); }
.cq-v-cases__i:nth-last-child(-n+2) { border-block-end: 0; }
.cq-v-cases__i:hover { background: rgba(255,255,255,.026); }

.cq-v-cases__n {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid rgba(105,185,75,.4);
	border-radius: 2px;
	font-family: var(--font-head);
	font-size: 9.5px;
	font-weight: 700;
	color: var(--green-br);
	transition: background 340ms var(--e-ui), color 340ms var(--e-ui), transform 460ms var(--e-card);
}
.cq-v-cases__i:hover .cq-v-cases__n { background: var(--green); border-color: var(--green); color: #fff; transform: rotate(-6deg) scale(1.08); }

.cq-v-cases__tick { width: 24px; height: 24px; color: var(--green-br); transition: transform 460ms var(--e-card); }
.cq-v-cases__tick svg { width: 100%; height: 100%; }
.cq-v-cases__i:hover .cq-v-cases__tick { transform: scale(1.15) rotate(-8deg); }

.cq-v-cases__d { margin: 0; font-size: 14px; line-height: 1.65; color: var(--muted-dark); }

/* ==================================================================
 * WHY — ghost columns
 * ================================================================== */
.cq-v-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0;
}
.cq-v-cols__i {
	position: relative;
	padding: clamp(24px, 2.8vw, 34px) clamp(18px, 2.2vw, 28px) clamp(46px, 5vw, 66px);
	border-inline-start: 1px solid rgba(255,255,255,.07);
	overflow: hidden;
	isolation: isolate;
	transition: background 380ms var(--e-ui);
}
.cq-v-cols__i:first-child { border-inline-start: 0; }
.cq-v-cols__i:hover { background: rgba(255,255,255,.026); }

.cq-v-cols__rule {
	display: block;
	width: 30px;
	height: 2px;
	background: var(--green-br);
	margin-block-end: 20px;
	transition: width 520ms var(--e-card);
}
.cq-v-cols__i:hover .cq-v-cols__rule { width: 72px; }

.cq-v-cols__t {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(13px, 1.15vw, 15px);
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #fff;
}
.cq-v-cols__d { margin: 12px 0 0; font-size: 12.8px; line-height: 1.62; color: var(--muted-dark); }
.cq-v-cols__n {
	position: absolute;
	z-index: -1;
	inset-block-end: 4px;
	inset-inline-start: clamp(18px, 2.2vw, 28px);
	font-family: var(--font-head);
	font-size: clamp(54px, 5.4vw, 76px);
	font-weight: 800;
	line-height: 1;
	color: rgba(255,255,255,.045);
	transition: color 520ms var(--e-ui), transform 700ms var(--e-card);
}
.cq-v-cols__i:hover .cq-v-cols__n { color: rgba(105,185,75,.14); transform: translate3d(0, -6px, 0); }

/* ==================================================================
 * WHY — bento
 * ================================================================== */
.cq-v-bento {
	display: grid;
	grid-template-columns: 1.05fr 1fr 1fr;
	grid-auto-rows: minmax(190px, auto);
	gap: 1px;
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.07);
	border-radius: var(--r-card);
	overflow: hidden;
}
/* One tall cell, two stacked, one tall — the approved arrangement. */
.cq-v-bento__c--1 { grid-row: span 2; }
.cq-v-bento__c--4 { grid-row: span 2; }

.cq-v-bento__c {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(22px, 2.6vw, 34px);
	background: var(--ink2);
	overflow: hidden;
	isolation: isolate;
	transition: background 380ms var(--e-ui);
}
.cq-v-bento__c:hover { background: #16202a; }

.cq-v-bento__rule {
	display: block;
	width: 28px;
	height: 2px;
	background: var(--green-br);
	transition: width 520ms var(--e-card);
}
.cq-v-bento__c:hover .cq-v-bento__rule { width: 66px; }

.cq-v-bento__n {
	display: block;
	margin-block-start: 16px;
	font-family: var(--font-head);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--muted-dark);
}
.cq-v-bento__t {
	margin: 12px 0 0;
	font-family: var(--font-head);
	font-size: clamp(15px, 1.5vw, 21px);
	font-weight: 600;
	line-height: 1.24;
	letter-spacing: .015em;
	text-transform: uppercase;
	color: #fff;
	max-width: 16ch;
}
.cq-v-bento__d { margin: 14px 0 0; font-size: 13px; line-height: 1.62; color: var(--muted-dark); max-width: 44ch; }

.cq-v-bento__ghost {
	position: absolute;
	z-index: -1;
	inset-block-end: -18px;
	inset-inline-start: 18px;
	font-family: var(--font-head);
	font-size: clamp(58px, 6vw, 92px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: rgba(255,255,255,.038);
	transition: color 520ms var(--e-ui), transform 700ms var(--e-card);
}
.cq-v-bento__c:hover .cq-v-bento__ghost { color: rgba(105,185,75,.11); transform: translate3d(0, -8px, 0); }

/* ==================================================================
 * RESPONSIVE
 * ================================================================== */
@media (max-width: 1080px) {
	.cq-v-split,
	.cq-v-panel { grid-template-columns: 1fr; }
	.cq-v-panel__h { max-width: none; }
	.cq-v-bento { grid-template-columns: 1fr 1fr; }
	.cq-v-bento__c--4 { grid-row: span 1; }
	.cq-v-rail__row { grid-template-columns: 56px minmax(0, 1fr); }
	.cq-v-rail__d { grid-column: 2; }
	.cq-v-disc__row { grid-template-columns: 52px minmax(0, 1fr); }
	.cq-v-disc__d { grid-column: 2; }
}

@media (max-width: 860px) {
	.cq-v-two,
	.cq-v-explore,
	.cq-v-cases { grid-template-columns: 1fr; }
	.cq-v-cases__i:nth-child(odd) { border-inline-end: 0; }
	.cq-v-cases__i:nth-last-child(-n+2) { border-block-end: 1px solid rgba(255,255,255,.07); }
	.cq-v-cases__i:last-child { border-block-end: 0; }

	.cq-v-cols { grid-template-columns: 1fr 1fr; }
	.cq-v-cols__i:nth-child(odd) { border-inline-start: 0; }

	.cq-v-stepper__s::after { display: none; }
	.cq-v-statement { max-width: none; }

	/*
	 * The slats cannot survive at phone width — 96px spines with rotated text
	 * stop being readable. Below this they become a plain vertical accordion:
	 * same data, same toggles, a shape that actually fits.
	 */
	.cq-v-slats { display: block; height: auto; }
	.cq-v-slat,
	.cq-v-slat.is-open {
		flex: none;
		width: 100%;
		height: auto;
		min-height: 92px;
		border-inline-start: 0;
		border-block-start: 1px solid rgba(255,255,255,.1);
	}
	.cq-v-slat:first-child { border-block-start: 0; }
	.cq-v-slat__spine { padding: 0; place-items: center start; padding-inline-start: 22px; }
	.cq-v-slat__spineT { writing-mode: horizontal-tb; transform: none; font-size: 12.5px; white-space: normal; }
	.cq-v-slat.is-open .cq-v-slat__spine { display: none; }
	.cq-v-slat__open { padding: 26px 22px 30px; min-height: 92px; }
	.cq-v-slat__index { inset-block-start: 14px; inset-block-end: auto; text-align: end; padding-inline-end: 20px; }
	.cq-v-slat.is-open .cq-v-slat__index { padding-inline-start: 0; text-align: end; }
	.cq-v-slat:not(.is-open) { min-height: 76px; }
}

@media (max-width: 620px) {
	.cq-v-bento,
	.cq-v-cols,
	.cq-v-ghost { grid-template-columns: 1fr; }
	.cq-v-bento__c--1 { grid-row: span 1; }
	.cq-v-cols__i { border-inline-start: 0; border-block-start: 1px solid rgba(255,255,255,.07); }
	.cq-v-cols__i:first-child { border-block-start: 0; }
	.cq-v-rail__row,
	.cq-v-disc__row { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
	.cq-v-car__i { flex-basis: min(74vw, 280px); }
	/* Descriptions are always visible on touch — there is no hover to reveal them. */
	.cq-v-car__d { max-height: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.cq-v-slat,
	.cq-v-slat__open,
	.cq-v-slat__media img { transition-duration: .01ms !important; }
	.cq-v-slat.is-open::before { animation: none; }
}

/* ==================================================================
 * PROVIDE — linked cards
 * The guide's own card table: title, description, destination.
 * ================================================================== */
.cq-v-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
	gap: 14px;
}

.cq-v-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 232px;
	padding: 26px 24px 24px;
	background: linear-gradient(168deg, var(--ink2), var(--void));
	border: 1px solid rgba(255,255,255,.07);
	border-radius: var(--r-card);
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 460ms var(--e-card),
		border-color 340ms var(--e-ui),
		box-shadow 460ms var(--e-card);
}
/* The tint bar draws itself across the top. */
.cq-v-card__rule {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--tint, var(--green-br));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 520ms var(--e-card);
}
.cq-v-card:hover .cq-v-card__rule,
.cq-v-card:focus-within .cq-v-card__rule { transform: scaleX(1); }

.cq-v-card__n {
	position: absolute;
	inset-block-start: 18px;
	inset-inline-end: 20px;
	font-family: var(--font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	color: rgba(147,163,173,.42);
	transition: color 380ms var(--e-ui);
}
.cq-v-card:hover .cq-v-card__n { color: var(--green-br); }

.cq-v-card__t {
	margin: 8px 46px 0 0;
	font-family: var(--font-head);
	font-size: clamp(15px, 1.35vw, 18px);
	font-weight: 600;
	line-height: 1.28;
	color: #fff;
}
.cq-v-card__d {
	margin: 13px 0 0;
	font-size: 13.2px;
	line-height: 1.62;
	color: var(--muted-dark);
}
.cq-v-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-start: auto;
	padding-block-start: 22px;
	font-family: var(--font-head);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--green-br);
}
.cq-v-card__link .cq-arw { transition: transform var(--d-btn) var(--e-ui); }
.cq-v-card__hit { position: absolute; inset: 0; z-index: 4; }

.cq-v-card:hover {
	transform: translate3d(0, -7px, 0);
	border-color: rgba(105,185,75,.32);
	box-shadow: 0 30px 56px -22px rgba(0,0,0,.74);
}
.cq-v-card:hover .cq-v-card__link .cq-arw { transform: translateX(5px); }
.cq-v-card:focus-within { outline: 2px solid var(--green-br); outline-offset: 2px; }

/* ==================================================================
 * Two-column index — for lists too long to compose
 * ================================================================== */
.cq-v-index {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(28px, 4vw, 64px);
	border-top: 1px solid rgba(255,255,255,.08);
}
.cq-v-index__i {
	position: relative;
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) 16px;
	align-items: baseline;
	gap: 12px;
	padding-block: 17px;
	border-bottom: 1px solid rgba(255,255,255,.07);
	transition: background 320ms var(--e-ui), padding-inline-start 420ms var(--e-card);
}
.cq-v-index__i:hover {
	background: linear-gradient(90deg, rgba(105,185,75,.07), transparent 78%);
	padding-inline-start: 10px;
}
.cq-v-index__n {
	font-family: var(--font-head);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	color: rgba(147,163,173,.5);
	transition: color 320ms var(--e-ui);
}
.cq-v-index__i:hover .cq-v-index__n { color: var(--green-br); }
.cq-v-index__t {
	margin: 0;
	font-family: var(--font-head);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
}
.cq-v-index__d {
	margin: 6px 0 0;
	font-size: 12.8px;
	line-height: 1.6;
	color: var(--muted-dark);
}
.cq-v-index__arw { color: var(--green-br); opacity: 0; transform: translateX(-5px); transition: all 320ms var(--e-ui); }
.cq-v-index__i:hover .cq-v-index__arw { opacity: 1; transform: translateX(0); }
.cq-v-index__hit { position: absolute; inset: 0; z-index: 3; }

@media (max-width: 860px) {
	.cq-v-index { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.cq-v-cards { grid-template-columns: 1fr; }
	.cq-v-index__i { grid-template-columns: 30px minmax(0, 1fr) 14px; gap: 10px; }
}

/* The two Use Cases grids differ in their divider treatment: the numbered grid
   keeps a hard centre rule, the check grid uses a tinted one. */
.cq-v-cases--num .cq-v-cases__i:nth-child(odd) { border-inline-end-color: rgba(255,255,255,.1); }
.cq-v-cases--check .cq-v-cases__i:nth-child(odd) { border-inline-end-color: rgba(105,185,75,.24); }
.cq-v-index__body { min-width: 0; }
.cq-step__body { min-width: 0; }

/* ==================================================================
 * Image layer for the typographic treatments
 *
 * These layouts lead with type in the approved designs, so a photograph here
 * sits behind at low opacity with a gradient over it. The rule is that the
 * copy, the numeral and the hairline all stay exactly as legible as they are
 * without an image — the picture adds depth, it never competes.
 * ================================================================== */
.cq-v-cols__bg,
.cq-v-bento__bg,
.cq-v-explore__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
}
.cq-v-cols__bg img,
.cq-v-bento__bg img,
.cq-v-explore__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .16;
	filter: grayscale(.6) contrast(1.05);
	transform: scale(1.04);
	transition: opacity 620ms var(--e-ui), transform 1100ms var(--e-card), filter 620ms var(--e-ui);
}
/* The gradient is what guarantees the text contrast, not the opacity alone —
   opacity varies with the photograph, a gradient does not. */
.cq-v-cols__bg::after,
.cq-v-bento__bg::after,
.cq-v-explore__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(10,14,19,.9) 0%, rgba(5,7,10,.94) 62%, rgba(5,7,10,.97) 100%);
}

.cq-v-cols__i.has-img:hover .cq-v-cols__bg img,
.cq-v-bento__c.has-img:hover .cq-v-bento__bg img,
.cq-v-explore__c.has-img:hover .cq-v-explore__bg img {
	opacity: .3;
	filter: grayscale(0) contrast(1);
	transform: scale(1.1);
}

/* With an image behind it the cell needs its own stacking context, and the
   ghost numeral moves in front of the picture rather than behind it. */
.cq-v-cols__i.has-img,
.cq-v-bento__c.has-img,
.cq-v-explore__c.has-img { isolation: isolate; }

.cq-v-cols__i.has-img .cq-v-cols__n,
.cq-v-bento__c.has-img .cq-v-bento__ghost,
.cq-v-explore__c.has-img .cq-v-explore__n { z-index: 0; }

/* A tint hairline on the leading edge, so a cell with a photograph still reads
   as part of the set. */
.cq-v-cols__i.has-img::before,
.cq-v-bento__c.has-img::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 2px;
	background: var(--tint, var(--green-br));
	opacity: 0;
	transition: opacity 420ms var(--e-ui);
	z-index: 1;
}
.cq-v-cols__i.has-img:hover::before,
.cq-v-bento__c.has-img:hover::before { opacity: .8; }

@media (prefers-reduced-motion: reduce) {
	.cq-v-cols__bg img, .cq-v-bento__bg img,
	.cq-v-ghost__bg img, .cq-v-explore__bg img { transition: none; transform: none; }
}

/* ==================================================================
 * Image layers — the remaining treatments
 *
 * Two shapes are used, chosen by what the layout can carry:
 *   __bg    a full-bleed image behind the cell, for card-like layouts
 *   __thumb a small fixed thumbnail in the row, for list-like layouts
 *
 * A list row cannot take a background image without the copy fighting it, so
 * it gets a thumbnail instead of a worse version of the same idea.
 * ================================================================== */

/* ==================================================================
 * Linked cards — image as its own area
 *
 * The image used to sit behind the whole card at low opacity. That produces
 * two bad outcomes at once: the photograph is too faint to read as a picture,
 * and the copy sits on an uncontrolled background whose contrast changes with
 * every image.
 *
 * Now the image is a band at the top of the card at full strength, and the
 * copy sits on the card's own solid surface below it. The picture reads as a
 * picture and the text has a guaranteed background.
 * ================================================================== */
.cq-v-card.has-img {
	padding: 0;
	background: var(--ink2);
	overflow: hidden;
	isolation: isolate;
	min-height: 0;
}

.cq-v-card__bg {
	position: relative;
	display: block;
	height: clamp(150px, 15vw, 196px);
	flex: none;
	overflow: hidden;
	background: var(--ink3);
}
.cq-v-card__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
	filter: grayscale(.34) brightness(.88);
	transform: scale(1.03);
	transition: transform 1000ms var(--e-card), filter 620ms var(--e-ui);
}
/* A short fade at the foot of the image so the panel below joins it rather
   than cutting across it with a hard line. */
.cq-v-card__bg::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 46%;
	background: linear-gradient(to top, var(--ink2) 0%, rgba(17,25,33,.5) 52%, transparent 100%);
}

.cq-v-card.has-img:hover .cq-v-card__bg img {
	filter: grayscale(0) brightness(1);
	transform: scale(1.08);
}

/* The text panel. */
.cq-v-card.has-img .cq-v-card__t,
.cq-v-card.has-img .cq-v-card__d,
.cq-v-card.has-img .cq-v-card__link {
	position: relative;
	z-index: 2;
	margin-inline: 24px;
}
.cq-v-card.has-img .cq-v-card__t { margin-block: -14px 0; }
.cq-v-card.has-img .cq-v-card__d { margin-block: 12px 0; }
.cq-v-card.has-img .cq-v-card__link { margin-block: auto 0; padding-block: 22px 24px; }

/* The index moves onto the image, where it reads as a plate rather than
   floating over the copy. */
.cq-v-card.has-img .cq-v-card__n {
	inset-block-start: 14px;
	inset-inline-end: 14px;
	z-index: 3;
	padding: 4px 9px;
	background: rgba(5,7,10,.62);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 2px;
	color: #fff;
	backdrop-filter: blur(4px);
}
.cq-v-card.has-img:hover .cq-v-card__n {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
}

.cq-v-card.has-img .cq-v-card__rule { z-index: 4; }

/* Without an image the card keeps the original padded treatment. */
.cq-v-card:not(.has-img) { padding: 26px 24px 24px; }

/* ------------------------------------------------------- Row thumbnails *//* ------------------------------------------------------- Row thumbnails */
.cq-v-rail__thumb,
.cq-v-disc__thumb,
.cq-v-index__thumb,
.cq-v-stepper__thumb {
	display: block;
	overflow: hidden;
	border-radius: 3px;
	flex: none;
	background: var(--ink3);
}
.cq-v-rail__thumb img,
.cq-v-disc__thumb img,
.cq-v-index__thumb img,
.cq-v-stepper__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(.55) brightness(.86);
	transform: scale(1.03);
	transition: filter 520ms var(--e-ui), transform 900ms var(--e-card);
}
.cq-v-rail__row:hover .cq-v-rail__thumb img,
.cq-v-disc__row:hover .cq-v-disc__thumb img,
.cq-v-index__i:hover .cq-v-index__thumb img,
.cq-v-stepper__s:hover .cq-v-stepper__thumb img {
	filter: grayscale(0) brightness(1);
	transform: scale(1.1);
}

/* The rail gains a thumbnail column; the row grid changes with it, which is
   why the class is on the row rather than the image. */
.cq-v-rail__row.has-img {
	grid-template-columns: 96px 60px minmax(0, 1fr) minmax(0, 1.15fr);
}
.cq-v-rail__thumb { width: 96px; height: 66px; }

.cq-v-disc__row.has-img {
	grid-template-columns: 62px 84px minmax(0, .82fr) minmax(0, 1.2fr);
}
.cq-v-disc__thumb { width: 84px; height: 60px; }
/* The connecting line still has to reach the next circle. */
.cq-v-disc__row.has-img::before { inset-inline-start: 21px; }

.cq-v-index__i.has-img {
	grid-template-columns: 56px 38px minmax(0, 1fr) 16px;
}
.cq-v-index__thumb { width: 56px; height: 42px; }

.cq-v-stepper__thumb {
	width: 100%;
	height: 92px;
	margin-block-start: 16px;
}

/* --------------------------------------------------- Use case cells */
.cq-v-cases__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
}
.cq-v-cases__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .14;
	filter: grayscale(.6);
	transform: scale(1.04);
	transition: opacity 620ms var(--e-ui), transform 1100ms var(--e-card);
}
.cq-v-cases__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(5,7,10,.92), rgba(5,7,10,.96));
}
.cq-v-cases__i.has-img { isolation: isolate; }
.cq-v-cases__i.has-img:hover .cq-v-cases__bg img { opacity: .28; transform: scale(1.09); }

@media (max-width: 1080px) {
	.cq-v-rail__row.has-img { grid-template-columns: 84px 48px minmax(0, 1fr); }
	.cq-v-rail__row.has-img .cq-v-rail__d { grid-column: 3; }
	.cq-v-disc__row.has-img { grid-template-columns: 52px 72px minmax(0, 1fr); }
	.cq-v-disc__row.has-img .cq-v-disc__d { grid-column: 3; }
}

@media (max-width: 620px) {
	/* A thumbnail in a phone-width row leaves four words per line. The image
	   moves above the copy instead of squeezing it. */
	.cq-v-rail__row.has-img,
	.cq-v-disc__row.has-img { grid-template-columns: 42px minmax(0, 1fr); }
	.cq-v-rail__row.has-img .cq-v-rail__thumb,
	.cq-v-disc__row.has-img .cq-v-disc__thumb {
		grid-column: 1 / -1;
		grid-row: 1;
		width: 100%;
		height: 132px;
		margin-block-end: 4px;
	}
	.cq-v-index__i.has-img { grid-template-columns: 44px minmax(0, 1fr) 14px; }
	.cq-v-index__thumb { display: none; }
	.cq-v-stepper__thumb { height: 120px; }
}


/* ==================================================================
 * Ghost cards — image band, matching the linked cards
 * ================================================================== */
.cq-v-ghost__c.has-img {
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	isolation: isolate;
	background: var(--ink2);
}
.cq-v-ghost__bg {
	position: relative;
	display: block;
	height: clamp(140px, 13vw, 178px);
	flex: none;
	overflow: hidden;
	background: var(--ink3);
}
.cq-v-ghost__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(.34) brightness(.88);
	transform: scale(1.03);
	transition: transform 1000ms var(--e-card), filter 620ms var(--e-ui);
}
.cq-v-ghost__bg::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 46%;
	background: linear-gradient(to top, var(--ink2) 0%, rgba(17,25,33,.5) 52%, transparent 100%);
}
.cq-v-ghost__c.has-img:hover .cq-v-ghost__bg img { filter: grayscale(0) brightness(1); transform: scale(1.08); }

/* The oversized numeral becomes a plate on the image. */
.cq-v-ghost__c.has-img .cq-v-ghost__n {
	inset-block-start: 14px;
	inset-inline-start: auto;
	inset-inline-end: 14px;
	z-index: 3;
	padding: 4px 10px;
	font-size: 12px;
	background: rgba(5,7,10,.62);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 2px;
	color: #fff;
	backdrop-filter: blur(4px);
}
.cq-v-ghost__c.has-img:hover .cq-v-ghost__n {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
	transform: none;
}
.cq-v-ghost__c.has-img .cq-v-ghost__t { margin: -12px 24px 0; position: relative; z-index: 2; }
.cq-v-ghost__c.has-img .cq-v-ghost__d { margin: 12px 24px 26px; position: relative; z-index: 2; }

/* An explore card whose entry resolved to a real page becomes clickable. */
.cq-v-explore__hit { position: absolute; inset: 0; z-index: 5; }
.cq-v-explore__c:focus-within { outline: 2px solid var(--green-br); outline-offset: -2px; }