/*
 * CellQual — signature layer (2.9).
 *
 * Sits on top of every component sheet and restyles them; nothing underneath
 * was rewritten, so removing this file (and signature.js) returns the theme to
 * its 2.8 look exactly.
 *
 *   1. Typography      Orbitron for display lines only, Rajdhani for the rest
 *   2. Buttons         chamfered plates: lit cut edges, flowing fill
 *   3. Header & nav
 *   4. Home hero       wipe-in artwork, word-by-word headline, signal waves
 *   5. About accordion vertical spines, numbered columns, the flying aircraft
 *   6. Cards & sections
 *   7. Details         scrollbar, selection
 *   9. Inner pages     banner, capability blocks, FAQ, CTA band
 *   8. Reduced motion  (last, so it wins)
 *
 * Direction: engineered and calm — the language of a coverage map or a
 * systems diagram, not a game HUD. No neon halos, no flicker, no scanlines;
 * motion is slow, eased and purposeful.
 *
 * Motion follows the theme's rules: transform, opacity, clip-path and filter
 * only, and everything decorative is gated on .cq-motion--full.
 */

/* Registered so they can be animated. */
@property --sig-wipe { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
	--font-ui: var(--font-body);
	--sig-hi: #a9de8e;                       /* the light accent green */
	--sig-glow: rgba(105, 185, 75, .5);
	--e-sig: cubic-bezier(.16, 1, .3, 1);
	--e-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ==================================================================
 * 1. Typography
 *
 * Orbitron is ~15% wider than the face the sizes were tuned with, and
 * Rajdhani's x-height is ~12% smaller. font-size-adjust normalises both to
 * the same x-height, so every px size in the theme keeps its visual weight:
 * Rajdhani renders ~1.12x, Orbitron ~0.98x. One line instead of 200 overrides.
 * ================================================================== */
html { font-size-adjust: .57; }

body {
	font-weight: 500;
	letter-spacing: .008em;
	font-feature-settings: "kern", "liga";
}

/* Orbitron is drawn wide and square: negative tracking from the old face
   makes it collide, so titles get a hair of air instead. */
.cq-display, .cq-h1, .cq-h2, .cq-card__t, .cq-step__t, .cq-why__t,
.cq-faq__title, .cq-prose h2, .cq-prose h3, .cq-prose h4,
.qb-hh__title, .qb-wwd__t, .qb-car__title, .qb-car__t, .qb-ban__t,
.qb-bl__title, .qb-bl__t, .qb-grid__t, .qb-roles__t, .cq-mega__title {
	letter-spacing: .012em;
}
.cq-display, .cq-h1 { line-height: 1.06; }
.cq-h2, .qb-car__title, .qb-bl__title, .qb-ban__t { line-height: 1.16; }

/* Reading text: Rajdhani at a weight that holds up on dark backgrounds. */
.cq-lede, .cq-sub, .cq-prose, .qb-hh__sub, .qb-wwd__d, .qb-car__lede,
.qb-ban__d, .qb-bl__d, .cq-card__d, .cq-v-card__d {
	font-family: var(--font-body);
	font-weight: 500;
	line-height: 1.6;
}

/* Small labels and navigation read better narrow: Rajdhani, tracked caps. */
.cq-ni__link, .cq-util__menu a, .cq-util__pill, .cq-dd__a,
.cq-mega__iT, .cq-mm__label, .qb-wwd__link, .qb-car__link,
.qb-bl__link, .qb-bl__all, .qb-bl__k, .cq-ft__menu a {
	font-family: var(--font-ui);
}

/*
 * Orbitron is the display face — and only that. It is kept for the lines
 * that carry a page: the hero headline, the H1, section titles and the CTA
 * title. Everything at card, label and UI scale (titles inside cards, column
 * spines, numbers, footer headings, FAQ questions, form labels) is set in
 * Rajdhani, which reads as engineered rather than stylised at small sizes.
 */
.cq-card__t, .cq-step__t, .cq-why__t, .cq-ft__h, .cq-faq__title,
.cq-eyebrow, .cq-mega__eyebrow, .cq-mega__iT, .cq-mega__title,
.cq-util__pill, .cq-ph__label, .cq-prose th, .cq-ft__trust p,
.cq-brand__word, .cq-so__rt, .cq-acc__q, .cq-crumb,
.qb-wwd__t, .qb-car__t, .qb-bl__t, .qb-grid__t, .qb-roles__t,
.qb-legal__tocT, .qb-legal__toc a::before, .qb-legal__stamp strong,
.qb-contact__l, .qb-contact__v, .qb-roles__emptyT,
.cq-v-panel__h, .cq-v-panel__tag strong, .cq-v-rail__n, .cq-v-rail__t,
.cq-v-slat__index, .cq-v-slat__spineT, .cq-v-slat__t,
.cq-v-ghost__t, .cq-v-car__t, .cq-v-cases__n, .cq-v-cols__t,
.cq-v-badge strong, .cq-hero__stat strong, .cq-stat__n,
.cq-cf7 label {
	font-family: var(--font-ui);
}
/* Rajdhani is narrow; titles at card scale need its heavier cuts. */
.qb-car__t, .qb-bl__t, .qb-grid__t, .qb-roles__t, .cq-card__t, .cq-v-car__t,
.cq-v-ghost__t, .cq-v-cols__t, .cq-v-rail__t, .cq-v-slat__t, .cq-v-panel__h,
.cq-step__t, .cq-why__t, .cq-ft__h, .cq-acc__q {
	font-weight: 700;
	letter-spacing: .02em;
}
.cq-eyebrow, .cq-mega__eyebrow, .cq-ft__h, .cq-ft__trust p {
	font-weight: 700;
	letter-spacing: .24em;
}
/* The open About column keeps the display face; the closed spines do not. */
.qb-wwd__item.is-open .qb-wwd__t { font-family: var(--font-head); }

/* ==================================================================
 * 2. HUD buttons — chamfered plates
 *
 * Every call to action is a plate with its top-left and bottom-right corners
 * cut, and a bright edge that runs along both cuts.
 *
 * The shape lives on the two pseudo-elements, not on the button:
 *   ::before  the edge — the full plate, in the edge colour
 *   ::after   the face — the same plate inset 1px, carrying the fill
 * Clipping the button itself would also clip its glow. With the shape on the
 * layers, the glow is a drop-shadow on the button and follows the cut corners.
 *
 * Motion:
 *   primary    the gradient flows, a soft light sweep crosses, the edge
 *              comes up evenly, the plate lifts
 *   secondary  glass; the green charges in from the left
 *   bare       text, an underline that draws, a chevron
 * ================================================================== */
.cq-btn,
.qb-hh__btn,
.qb-ban__btn,
.cq-cf7 .wpcf7-submit {
	--cut: 12px;
	--plate: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 17px 32px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
	isolation: isolate;
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition:
		color 320ms var(--e-ui),
		transform 420ms var(--e-sig),
		filter 420ms var(--e-sig);
}

/* Both layers: the plate shape, behind the label. Every property the motion
   layer set on its old sweep pseudo-element is reset here. */
.cq-btn::before,
.qb-hh__btn::before,
.qb-ban__btn::before,
.cq-btn::after,
.qb-hh__btn::after,
.qb-ban__btn::after {
	content: "";
	position: absolute;
	z-index: -1;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	filter: none;
	opacity: 1;
	transform: none;
	animation: none;
	clip-path: var(--plate);
	pointer-events: none;
}

/* The motion options that hide the old sweep must not hide the face. */
:is(.cq-no-sheen, .cq-motion--off) :is(.cq-btn, .qb-hh__btn, .qb-ban__btn)::after { display: block; }

/* Edge. */
.cq-btn::before,
.qb-hh__btn::before,
.qb-ban__btn::before {
	inset: 0;
	background: linear-gradient(135deg,
		rgba(184, 245, 154, .8) 0%,
		rgba(184, 245, 154, .26) 20%,
		rgba(184, 245, 154, .12) 50%,
		rgba(184, 245, 154, .26) 80%,
		rgba(255, 255, 255, .75) 100%);
	transition: opacity 320ms var(--e-ui);
}

/* Face. */
.cq-btn::after,
.qb-hh__btn::after,
.qb-ban__btn::after {
	inset: 1px;
	transition:
		background-position 900ms var(--e-sig),
		background-size 560ms var(--e-sig);
}

/* On hover the whole edge comes up evenly. */
.cq-btn:hover::before,
.qb-hh__btn:hover::before,
.qb-ban__btn:hover::before,
.cq-btn:focus-visible::before,
.qb-hh__btn:focus-visible::before,
.qb-ban__btn:focus-visible::before {
	background: linear-gradient(135deg, #fff 0%, rgba(184, 245, 154, .7) 22%, rgba(184, 245, 154, .45) 50%, rgba(184, 245, 154, .7) 78%, #fff 100%);
}
/* The old sweep moved its pseudo-element on hover; the face stays put. */
.cq-btn:hover::after,
.qb-hh__btn:hover::after,
.qb-ban__btn:hover::after { transform: none; }

/* ---------------------------------------------------------- Primary */
.cq-btn--p,
.qb-hh__b1,
.qb-ban__btn {
	color: #fff;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
}

/* Face: a soft light sweep over a slowly flowing gradient. */
.cq-btn--p::after,
.qb-hh__b1::after,
.qb-ban__btn::after {
	background:
		linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .24) 46%, transparent 62%) -150% 0 / 60% 100% no-repeat,
		linear-gradient(120deg, var(--green-deep) 0%, var(--green) 42%, var(--green-br) 72%, var(--green) 100%) 0 0 / 220% 100%;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .24),
		inset 0 -2px 0 rgba(0, 0, 0, .22);
}
.cq-btn--p:hover,
.qb-hh__b1:hover,
.qb-ban__btn:hover {
	color: #fff;
	transform: translate3d(0, -3px, 0);
	filter: drop-shadow(0 14px 22px rgba(45, 162, 55, .38));
}
.cq-btn--p:hover::after,
.qb-hh__b1:hover::after,
.qb-ban__btn:hover::after { background-position: 260% 0, 100% 0; }
.cq-btn--p:active,
.qb-hh__b1:active,
.qb-ban__btn:active { transform: translate3d(0, -1px, 0); }

/* ---------------------------------------------------------- Secondary */
.cq-btn--s,
.qb-hh__b2.is-outline,
.cq-btn--d {
	color: #fff;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35));
}
.cq-btn--s::before,
.qb-hh__b2.is-outline::before,
.cq-btn--d::before {
	background: linear-gradient(135deg,
		var(--sig-hi) 0%,
		rgba(255, 255, 255, .3) 20%,
		rgba(255, 255, 255, .18) 50%,
		rgba(255, 255, 255, .3) 80%,
		#fff 100%);
}
.cq-btn--s::after,
.qb-hh__b2.is-outline::after,
.cq-btn--d::after {
	background:
		linear-gradient(90deg, rgba(105, 185, 75, .36), rgba(105, 185, 75, .1)) 0 0 / 0% 100% no-repeat,
		rgba(10, 14, 19, .6);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.cq-btn--s:hover,
.qb-hh__b2.is-outline:hover,
.cq-btn--d:hover {
	color: #fff;
	transform: translate3d(0, -3px, 0);
	filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .4));
}
.cq-btn--s:hover::after,
.qb-hh__b2.is-outline:hover::after,
.cq-btn--d:hover::after { background-size: 100% 100%, auto; }

/* On a light section the ghost plate needs ink, not white. */
.cq-sec--light .cq-btn--d,
.cq-sec--soft .cq-btn--d { color: var(--text); filter: none; }
.cq-sec--light .cq-btn--d::before,
.cq-sec--soft .cq-btn--d::before { background: linear-gradient(135deg, var(--green) 0%, var(--line) 22% 78%, var(--green) 100%); }
.cq-sec--light .cq-btn--d::after,
.cq-sec--soft .cq-btn--d::after {
	background: linear-gradient(90deg, rgba(45, 162, 55, .14), rgba(45, 162, 55, .04)) 0 0 / 0% 100% no-repeat, #fff;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ---------------------------------------------------------- Bare */
/* A text link, not a plate: no edge, and the face layer becomes a chevron. */
.qb-hh__b2.is-bare {
	padding: 17px 20px;
	color: #fff;
	filter: none;
	background: linear-gradient(var(--green-br), var(--green-br)) left 20px bottom 10px / 0 1px no-repeat;
	transition: background-size 520ms var(--e-sig), color 320ms var(--e-ui);
}
.qb-hh__b2.is-bare::before { display: none; }
.qb-hh__b2.is-bare::after {
	position: static;
	z-index: auto;
	width: 7px;
	height: 7px;
	margin-inline-start: 2px;
	background: none;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	clip-path: none;
	transform: rotate(45deg);
	animation: none;
	transition: transform 420ms var(--e-sig);
}
.qb-hh__b2.is-bare:hover {
	color: var(--sig-hi);
	background-size: calc(100% - 40px) 1px;
	transform: none;
	filter: none;
}
.qb-hh__b2.is-bare:hover::after { transform: translateX(5px) rotate(45deg); }

/* ---------------------------------------------------------- Form submit */
/* An <input> has no pseudo-elements, so it is clipped directly, and its cut
   edges are drawn as two hairlines on the cut lines (cut / √2 along 45°). */
.cq-cf7 .wpcf7-submit {
	padding-inline: 36px;
	color: #fff;
	clip-path: var(--plate);
	background:
		linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--sig-hi) 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / 100% 100% no-repeat,
		linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), #fff 0 calc(var(--cut) * .7071 + 1.2px), transparent 0) 0 0 / 100% 100% no-repeat,
		linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .42) 46%, transparent 62%) -150% 0 / 60% 100% no-repeat,
		linear-gradient(120deg, var(--green-deep) 0%, var(--green) 42%, var(--green-br) 72%, var(--green) 100%) 0 0 / 220% 100%;
	transition: background-position 900ms var(--e-sig), transform 420ms var(--e-sig);
}
.cq-cf7 .wpcf7-submit:hover {
	color: #fff;
	background-position: 0 0, 0 0, 260% 0, 100% 0;
	transform: translate3d(0, -3px, 0);
}
.cq-cf7 .wpcf7-submit:active { transform: translate3d(0, -1px, 0); }

/* The theme's own arrow icon inside .cq-btn travels a little further. */
.cq-btn:hover .cq-arw { transform: translateX(6px); }

/* ---------------------------------------------------------- Small controls */
/*
 * Same plate, smaller cut. These are clipped directly (their own pseudo-
 * elements are already in use), with the cut edges drawn as hairlines like
 * the submit. A clip also clips an outer glow, so the glow here is inset.
 */
.cq-util__pill,
.qb-car__nav,
.cq-top {
	--cut: 7px;
	--cutline: rgba(184, 245, 154, .95);
	border-radius: 0;
	clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
	/* Kept in a variable: the theme's hover rules use the background
	   shorthand, which would erase the edges unless they are re-applied. */
	--cutlines:
		linear-gradient(135deg, transparent calc(var(--cut) * .7071 - .5px), var(--cutline) 0 calc(var(--cut) * .7071 + 1px), transparent 0),
		linear-gradient(315deg, transparent calc(var(--cut) * .7071 - .5px), #fff 0 calc(var(--cut) * .7071 + 1px), transparent 0);
	background-image: var(--cutlines);
	background-repeat: no-repeat;
}
.cq-util__pill:hover,
.qb-car__nav:hover,
.cq-top:hover { background-image: var(--cutlines); background-repeat: no-repeat; }

.cq-util__pill {
	letter-spacing: .18em;
	border-color: rgba(184, 245, 154, .45);
	box-shadow: inset 0 0 12px rgba(105, 185, 75, .14);
	transition: border-color 320ms var(--e-ui), box-shadow 420ms var(--e-sig), color 320ms var(--e-ui);
}
.cq-util__pill:hover { border-color: var(--sig-hi); box-shadow: inset 0 0 18px rgba(105, 185, 75, .5); }

.qb-car__nav {
	width: 44px;
	height: 38px;
	background-color: rgba(255, 255, 255, .03);
	border: 1px solid rgba(105, 185, 75, .55);
	color: var(--sig-hi);
	transition: background-color 320ms var(--e-ui), border-color 320ms var(--e-ui), color 320ms var(--e-ui), box-shadow 420ms var(--e-sig), transform 420ms var(--e-sig);
}
.qb-car__nav:hover:not([disabled]) {
	background-color: var(--green);
	border-color: var(--sig-hi);
	color: #fff;
	box-shadow: inset 0 0 16px rgba(184, 245, 154, .45);
}

.cq-top {
	--cut: 8px;
	border: 1px solid rgba(184, 245, 154, .45);
	box-shadow: inset 0 0 14px rgba(184, 245, 154, .25);
}
.cq-top:hover { border-color: var(--sig-hi); box-shadow: inset 0 0 18px rgba(255, 255, 255, .35); }


/* Text links: tracked caps and an underline that draws. */
.qb-wwd__link,
.qb-car__link,
.qb-bl__link,
.qb-bl__all {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	padding-bottom: 3px;
	transition: color 320ms var(--e-ui), background-size 520ms var(--e-sig);
}
.qb-wwd__link:hover,
.qb-bl__all:hover,
.qb-car__item:hover .qb-car__link,
.qb-bl__card:hover .qb-bl__link {
	color: var(--sig-hi);
	background-size: 100% 1px;
}

/* ==================================================================
 * 3. Header & navigation
 * ================================================================== */
.cq-ni__link {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: color 320ms var(--e-ui);
}
.cq-ni:hover > .cq-ni__link,
.cq-ni.is-open > .cq-ni__link { color: var(--green-br); }
.cq-ni__link::after {
	height: 1.5px;
	background: var(--green-br);
}
.cq-util__menu a { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; }

/* Once scrolled, the solid header is closed by a single tinted hairline. */
.cq-head-wrap.is-scrolled::after {
	background:
		linear-gradient(90deg, transparent, rgba(105, 185, 75, .4), transparent) 0 100% / 100% 1px no-repeat,
		rgba(5, 7, 10, .9);
}

/* ==================================================================
 * 4. Home hero
 * ================================================================== */
.qb-hh__title {
	line-height: 1.08;
	text-transform: uppercase;
}
.qb-hh__t1 { font-weight: 500; }
.qb-hh__t2 { font-weight: 800; }

/* Words rise out of their own baseline, one after another. --wi is the word
   index, written by the widget (or by signature.js on older markup). */
.qb-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-block: .08em;
	margin-block: -.08em;
}
.qb-w > span { display: inline-block; }

.cq-motion--full .qb-hh__title.is-split {
	opacity: 1;
	animation: none;
}
.cq-motion--full .qb-hh__title.is-split .qb-w > span {
	transform: translate3d(0, 108%, 0);
	animation: sig-word 1200ms var(--e-sig) forwards;
	animation-delay: calc(380ms + var(--wi, 0) * 90ms);
}
@keyframes sig-word { to { transform: none; } }

.cq-motion--full .qb-hh__sub {
	animation: sig-blurin 1200ms var(--e-sig) 950ms both;
}
.cq-motion--full .qb-hh__btns {
	opacity: 1;
	animation: none;
}
.cq-motion--full .qb-hh__btns > .qb-hh__btn {
	animation: sig-pop 900ms var(--e-sig) both;
}
.cq-motion--full .qb-hh__btns > .qb-hh__btn:nth-child(1) { animation-delay: 1250ms; }
.cq-motion--full .qb-hh__btns > .qb-hh__btn:nth-child(2) { animation-delay: 1380ms; }

@keyframes sig-blurin {
	from { opacity: 0; filter: blur(12px); transform: translate3d(0, 16px, 0); }
	to   { opacity: 1; filter: none; transform: none; }
}
@keyframes sig-pop {
	from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.94); }
	to   { opacity: 1; transform: none; }
}

/* The artwork wipes in along its own diagonal, then settles from a zoom.
   --sig-wipe offsets both edges of the existing polygon, so the client's
   clip slider still sets the final shape. */
@media (min-width: 861px) {
	.qb-hh__media {
		clip-path: polygon(
			calc(var(--qb-clip) + var(--sig-wipe)) 0,
			100% 0,
			100% 100%,
			var(--sig-wipe) 100%
		);
	}
	.cq-motion--full .qb-hh__media { animation: sig-wipe 1700ms var(--e-sig) 120ms both; }
}
@keyframes sig-wipe { from { --sig-wipe: 100%; } }

.qb-hh__media img {
	transform-origin: 70% 30%;
	translate: var(--hx, 0) var(--hy, 0);
	transition: translate 1200ms var(--e-sig);
}
.cq-motion--full .qb-hh__media img {
	animation:
		sig-settle 2600ms var(--e-sig) 120ms both,
		sig-drift 26s ease-in-out 2.8s infinite alternate;
}
@keyframes sig-settle {
	from { transform: scale(1.22); filter: brightness(1.7) saturate(1.3); }
	to   { transform: scale(1); filter: none; }
}
@keyframes sig-drift {
	from { transform: scale(1); }
	to   { transform: scale(1.07) translate3d(-1.2%, 1%, 0); }
}

/* The diagonal draws itself down; a soft light then travels along it now
   and again, like a signal on a line. */
.cq-motion--full .qb-hh__glow {
	transform-origin: top;
	animation:
		sig-draw 1300ms var(--e-sig) 900ms both,
		cq-pulse 6s ease-in-out 2.2s infinite;
}
@keyframes sig-draw {
	from { transform: skewX(-13deg) scaleY(0); }
	to   { transform: skewX(-13deg) scaleY(1); }
}
.qb-hh__glow::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 3px;
	height: 22%;
	margin-left: -1.5px;
	border-radius: 3px;
	background: linear-gradient(transparent, rgba(236, 255, 228, .9) 70%, transparent);
	box-shadow: 0 0 10px 2px rgba(160, 235, 130, .45);
	opacity: 0;
}
.cq-motion--full .qb-hh__glow::after { animation: sig-comet 8s cubic-bezier(.45, 0, .3, 1) 3s infinite; }
@keyframes sig-comet {
	0%        { transform: translate3d(0, -110%, 0); opacity: 0; }
	10%       { opacity: .8; }
	55%       { transform: translate3d(0, 460%, 0); opacity: .8; }
	65%, 100% { transform: translate3d(0, 460%, 0); opacity: 0; }
}

/* Ambient layer: a faint engineering grid, the node network, and signal
   waves propagating from a source point. */
.qb-hh__fx {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.qb-hh__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(105, 185, 75, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(105, 185, 75, .07) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(65% 75% at 72% 40%, #000 0%, transparent 72%);
	mask-image: radial-gradient(65% 75% at 72% 40%, #000 0%, transparent 72%);
	opacity: .5;
}

.qb-hh__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 2000ms var(--e-ui);
}
.qb-hh__canvas.is-on { opacity: .75; }

/*
 * Signal propagation. Three hairline rings leave a source point in turn and
 * spread across the band, slowing as they go — the way a transmission is
 * drawn on a coverage map. The band fades them out toward the copy side so
 * they never cross the headline at strength. --wave-x / --wave-y place the
 * source: on the home hero it sits on the apex of the artwork's light.
 */
.qb-hh__waves {
	position: absolute;
	inset: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 12%, #000 58%);
	mask-image: linear-gradient(90deg, transparent 12%, #000 58%);
}
.qb-hh__waves::before {
	content: "";
	position: absolute;
	left: var(--wave-x, 74%);
	top: var(--wave-y, 42%);
	width: 520px;
	height: 520px;
	margin: -260px 0 0 -260px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(105, 185, 75, .16), transparent);
}
.qb-hh__waves i {
	position: absolute;
	left: var(--wave-x, 74%);
	top: var(--wave-y, 42%);
	width: 160vmax;
	height: 160vmax;
	margin: -80vmax 0 0 -80vmax;
	border: 1.5px solid rgba(150, 222, 120, .55);
	border-radius: 50%;
	opacity: 0;
	transform: scale(.02);
}
.cq-motion--full .qb-hh__waves::before { animation: sig-breathe 8s ease-in-out infinite; }
.cq-motion--full .qb-hh__waves i { animation: sig-wave 9s cubic-bezier(.22, .6, .35, 1) infinite; }
.cq-motion--full .qb-hh__waves i:nth-child(1) { animation-delay: 2.2s; }
.cq-motion--full .qb-hh__waves i:nth-child(2) { animation-delay: 5.2s; }
.cq-motion--full .qb-hh__waves i:nth-child(3) { animation-delay: 8.2s; }
@keyframes sig-wave {
	0%   { transform: scale(.02); opacity: 0; }
	6%   { opacity: .9; }
	45%  { opacity: .5; }
	100% { transform: scale(1); opacity: 0; }
}
.qb-hh { --wave-x: 43%; --wave-y: 24%; }

.qb-hh__cue {
	position: absolute;
	left: 50%;
	bottom: 30px;
	width: 22px;
	height: 36px;
	margin-left: -11px;
	border: 1.5px solid rgba(255, 255, 255, .3);
	border-radius: 12px;
}
.qb-hh__cue i {
	position: absolute;
	left: 50%;
	top: 7px;
	width: 3px;
	height: 7px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: var(--green-br);
}
.cq-motion--full .qb-hh__cue { animation: sig-pop 900ms var(--e-sig) 2s both; }
.cq-motion--full .qb-hh__cue i { animation: sig-cue 2.2s var(--e-sig) 2.6s infinite; }
@keyframes sig-cue {
	0%   { transform: translate3d(0, 0, 0); opacity: 1; }
	70%  { transform: translate3d(0, 12px, 0); opacity: 0; }
	100% { transform: translate3d(0, 0, 0); opacity: 0; }
}

@media (max-width: 860px), (max-height: 640px) {
	.qb-hh__cue { display: none; }
}


/* ==================================================================
 * 5. About accordion (QB What We Do)
 * ================================================================== */
.qb-wwd__row { counter-reset: wwd; }
/* clip, not hidden: hidden makes the item a scroll container, which drops its
   automatic minimum height and collapses the open panel in the phone layout. */
.qb-wwd__item { counter-increment: wwd; overflow: clip; }

/* Column index: 01, 02 … */
.qb-wwd__in::before {
	content: counter(wwd, decimal-leading-zero);
	display: block;
	margin-bottom: 14px;
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--green-br);
	opacity: .7;
	transition: opacity 320ms var(--e-ui), color 320ms var(--e-ui);
}

/* A wash rises in a closed column on hover, and the column title lights. */
.qb-wwd__item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(to top, rgba(105, 185, 75, .16), transparent 62%),
		linear-gradient(90deg, rgba(105, 185, 75, .45), transparent) left top / 1.5px 100% no-repeat;
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity 420ms var(--e-ui), transform 620ms var(--e-sig);
	pointer-events: none;
}
.qb-wwd__item:not(.is-open):hover::before { opacity: 1; transform: none; }
.qb-wwd__item:not(.is-open):hover .qb-wwd__t { color: var(--sig-hi); }
.qb-wwd__item:not(.is-open):hover .qb-wwd__in::before { opacity: 1; color: var(--sig-hi); }
.qb-wwd__in { z-index: 1; }

/* A light pass crosses the panel the moment it opens. */
.qb-wwd__item.is-open::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 45%;
	z-index: 0;
	background: linear-gradient(90deg, transparent, rgba(105, 185, 75, .14), transparent);
	transform: translate3d(-110%, 0, 0);
	pointer-events: none;
}
.cq-motion--full .qb-wwd__item.is-open::after { animation: sig-pass 1300ms var(--e-sig) 120ms both; }
@keyframes sig-pass { to { transform: translate3d(260%, 0, 0); } }

/* Closed columns read as vertical spines on a desktop. */
@media (min-width: 861px) {
	.qb-wwd__item:not(.is-open) .qb-wwd__t {
		position: absolute;
		left: 50%;
		bottom: 82px;
		max-height: calc(100% - 160px);
		writing-mode: vertical-rl;
		transform: translateX(-50%) rotate(180deg);
		font-size: 12.5px;
		font-weight: 700;
		letter-spacing: .16em;
		text-transform: uppercase;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		animation: sig-spine 620ms var(--e-sig) both;
	}
	.qb-wwd__item:not(.is-open) .qb-wwd__in::before { text-align: center; }
	.qb-wwd__item:not(.is-open) .qb-wwd__toggle {
		inset-inline-start: 50%;
		margin-inline-start: -13px;
	}
	.qb-wwd__item.is-open .qb-wwd__t {
		font-size: 26px;
		text-transform: uppercase;
		animation: sig-tin 760ms var(--e-sig) both;
	}
}
@keyframes sig-spine {
	from { opacity: 0; transform: translateX(-50%) rotate(180deg) translate3d(0, -18px, 0); }
	to   { opacity: 1; transform: translateX(-50%) rotate(180deg); }
}
@keyframes sig-tin {
	from { opacity: 0; transform: translate3d(-18px, 0, 0); filter: blur(6px); }
	to   { opacity: 1; transform: none; filter: none; }
}

/* Toggle: a radar ping invites the click on closed columns. */
.qb-wwd__toggle { z-index: 2; }
.qb-wwd__toggle::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1px solid var(--green-br);
	opacity: 0;
	pointer-events: none;
}
.cq-motion--full .qb-wwd__item:not(.is-open) .qb-wwd__toggle::after { animation: sig-ping 4.5s ease-out infinite; }
.cq-motion--full .qb-wwd__item:not(.is-open):nth-child(2n) .qb-wwd__toggle::after { animation-delay: 2.2s; }
@keyframes sig-ping {
	0%   { transform: scale(1); opacity: .45; }
	60%, 100% { transform: scale(1.8); opacity: 0; }
}

/* ------------------------------------------------ The aircraft
 *
 * Layers, back to front: glow halo, radar sweep, dashed orbit with a
 * satellite, speed streaks, the open-arc ring, the craft itself. The craft
 * flies in on open (img), then hovers on its own loop (wrapper), and tilts
 * toward the pointer (media, via --rx/--ry from signature.js) — three
 * separate elements so the three motions never fight over one transform.
 */
.qb-wwd__media {
	perspective: 900px;
	isolation: isolate;
}
.qb-wwd__media::before {
	content: "";
	position: absolute;
	inset: -24%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(105, 185, 75, .32), rgba(105, 185, 75, .08) 60%, transparent);
	animation: sig-breathe 4.6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes sig-breathe {
	0%, 100% { opacity: .65; transform: scale(.96); }
	50%      { opacity: 1;   transform: scale(1.04); }
}

.qb-wwd__radar {
	position: absolute;
	inset: 4%;
	z-index: 0;
	border-radius: 50%;
	background:
		conic-gradient(from 0deg, transparent 0 280deg, rgba(105, 185, 75, .04) 300deg, rgba(160, 225, 130, .2) 358deg, transparent 360deg),
		repeating-radial-gradient(circle, transparent 0 23px, rgba(105, 185, 75, .13) 23px 24px);
	pointer-events: none;
}
.qb-wwd__item.is-open .qb-wwd__radar { animation: sig-spin 8s linear infinite; }

.qb-wwd__orbit {
	position: absolute;
	inset: -30px;
	z-index: 0;
	border-radius: 50%;
	border: 1px dashed rgba(105, 185, 75, .32);
	pointer-events: none;
}
.qb-wwd__orbit i {
	position: absolute;
	top: -4px;
	left: 50%;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: 50%;
	background: var(--sig-hi);
	box-shadow: 0 0 8px 1px rgba(184, 245, 154, .5);
}
.qb-wwd__item.is-open .qb-wwd__orbit { animation: sig-spin 16s linear infinite reverse; }

.qb-wwd__ring { z-index: 3; }
.qb-wwd__item.is-open .qb-wwd__ring {
	animation:
		sig-ring-in 1100ms var(--e-sig) 200ms both,
		sig-spin 14s linear 1300ms infinite;
}
@keyframes sig-ring-in {
	from { transform: rotate(-200deg) scale(.55); opacity: 0; }
	to   { transform: rotate(0) scale(1); opacity: 1; }
}
@keyframes sig-spin { to { transform: rotate(360deg); } }

/* Wind streaks run tail-ward (down-left), so the craft reads as flying up and
   to the right — the way the artwork faces. */
.qb-wwd__streaks {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.qb-wwd__streaks i {
	position: absolute;
	width: 90px;
	height: 1.5px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, rgba(184, 245, 154, .5));
	transform: rotate(-45deg);
	opacity: 0;
}
.qb-wwd__streaks i:nth-child(1) { top: 30%; left: 2%;  width: 110px; }
.qb-wwd__streaks i:nth-child(2) { top: 55%; left: 22%; width: 70px; }
.qb-wwd__streaks i:nth-child(3) { top: 42%; left: -12%; width: 90px; }
.qb-wwd__item.is-open .qb-wwd__streaks i { animation: sig-streak 2.6s cubic-bezier(.4, 0, .6, 1) infinite; }
.qb-wwd__item.is-open .qb-wwd__streaks i:nth-child(2) { animation-delay: .9s; }
.qb-wwd__item.is-open .qb-wwd__streaks i:nth-child(3) { animation-delay: 1.7s; }
@keyframes sig-streak {
	0%   { transform: rotate(-45deg) translate3d(70px, 0, 0) scaleX(.4); opacity: 0; }
	30%  { opacity: .6; }
	100% { transform: rotate(-45deg) translate3d(-90px, 0, 0) scaleX(1); opacity: 0; }
}

.qb-wwd__craft {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transform-style: preserve-3d;
	transition: transform 700ms var(--e-sig);
}
.qb-wwd__item.is-open .qb-wwd__craft { animation: sig-hover 5.2s ease-in-out 1.4s infinite; }
@keyframes sig-hover {
	0%, 100% { translate: 0 0;     rotate: 0deg; }
	25%      { translate: 3px -7px; rotate: 1.4deg; }
	50%      { translate: 0 -11px;  rotate: 0deg; }
	75%      { translate: -3px -6px; rotate: -1.2deg; }
}

/* Engine glow at the tail. */
.qb-wwd__craft::after {
	content: "";
	position: absolute;
	left: 14%;
	bottom: 12%;
	width: 26%;
	height: 26%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(220, 255, 200, .85), rgba(105, 185, 75, .45) 45%, transparent);
	filter: blur(6px);
	opacity: 0;
	pointer-events: none;
}
.qb-wwd__item.is-open .qb-wwd__craft::after { animation: sig-thrust 1.4s ease-out 1s both; }
@keyframes sig-thrust { from { opacity: 0; transform: scale(.4); } to { opacity: .8; transform: none; } }

.qb-wwd__item.is-open .qb-wwd__media img {
	animation: sig-fly 1500ms var(--e-sig) 180ms both;
}
@keyframes sig-fly {
	0%   { transform: translate3d(-120px, 120px, 0) scale(.35) rotate(-14deg); opacity: 0; filter: blur(6px); }
	55%  { opacity: 1; filter: none; }
	78%  { transform: translate3d(8px, -8px, 0) scale(1.04) rotate(2deg); }
	100% { transform: none; opacity: 1; }
}

/* Body copy follows the craft in. */
.cq-motion--full .qb-wwd__item.is-open .qb-wwd__d { animation: sig-blurin 900ms var(--e-sig) 520ms both; }
.cq-motion--full .qb-wwd__item.is-open .qb-wwd__link { animation: sig-pop 800ms var(--e-sig) 700ms both; }

@media (max-width: 860px) {
	.qb-wwd__orbit { inset: -20px; }
	.qb-wwd__in::before { display: inline-block; margin: 0 12px 0 0; }
	.qb-wwd__t { display: inline; }
}

/* ==================================================================
 * 6. Cards & sections
 * ================================================================== */

/* Section titles get an accent bar that draws in with the title. */
.qb-car__title::before,
.qb-bl__title::before {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-bottom: 16px;
	background: linear-gradient(90deg, var(--sig-hi), var(--green) 60%, transparent);
	transform-origin: left;
}
.cq-motion--full .qb-car__title[data-reveal]::before,
.cq-motion--full .qb-bl__title[data-reveal]::before {
	transform: scaleX(0);
	transition: transform 900ms var(--e-sig) 300ms;
}
.cq-motion--full .qb-car__title.is-in::before,
.cq-motion--full .qb-bl__title.is-in::before { transform: scaleX(1); }

/* Carousel cards: a gentle lift with a slight tilt, a fine tinted frame, and
   a soft band of light passing once over the photograph — glass, not a scan. */
.qb-car__item {
	transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, 0, 0);
	transition: transform 700ms var(--e-sig), box-shadow 600ms var(--e-sig);
}
.qb-car__item:hover {
	transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, -6px, 0);
	box-shadow: 0 30px 56px -22px rgba(0, 0, 0, .8), 0 0 0 1px rgba(105, 185, 75, .3);
}

.qb-car__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .13) 50%, transparent 62%);
	transform: translate3d(-100%, 0, 0);
	pointer-events: none;
}
.qb-car__item:hover .qb-car__media::before { animation: sig-glass 1400ms var(--e-sig) both; }
@keyframes sig-glass {
	from { transform: translate3d(-100%, 0, 0); }
	to   { transform: translate3d(100%, 0, 0); }
}

.qb-car__t { transition: transform 500ms var(--e-sig), color 320ms var(--e-ui); }
.qb-car__item:hover .qb-car__t { transform: translate3d(0, -4px, 0); }
.qb-car__item:hover .qb-car__media img { filter: saturate(1.15) contrast(1.05); }

/* Blog cards: a glow that follows the pointer (--mx/--my from signature.js). */
.qb-bl__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(105, 185, 75, .16), transparent 65%);
	opacity: 0;
	transition: opacity 420ms var(--e-ui);
	pointer-events: none;
}
.qb-bl__card:hover::after { opacity: 1; }
.qb-bl__card::before {
	height: 2px;
	background: linear-gradient(90deg, var(--sig-hi), var(--green), transparent);
}
.qb-bl__card:hover .qb-bl__t { color: var(--sig-hi); }
.qb-bl__t { transition: color 320ms var(--e-ui); }

/* Banner: the photograph drifts, the wash shimmers. */
.qb-ban__media img { transition: transform 1600ms var(--e-sig); }
.qb-ban__panel:hover .qb-ban__media img { transform: scale(1.06); }
.qb-ban__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .07) 50%, transparent 65%) -100% 0 / 60% 100% no-repeat;
	pointer-events: none;
}
.cq-motion--full .qb-ban__panel.is-in::after { animation: sig-sheen 1800ms var(--e-sig) 400ms both; }
@keyframes sig-sheen { to { background-position: 250% 0; } }

/* Card grids elsewhere in the theme get the same lift and fine frame. */
.cq-card:hover,
.cq-post:hover,
.cq-v-card:hover {
	box-shadow: 0 34px 64px -18px rgba(0, 0, 0, .72), 0 0 0 1px rgba(105, 185, 75, .28);
}

/* ==================================================================
 * 7. Details
 * ================================================================== */
html {
	scrollbar-width: thin;
	scrollbar-color: var(--green) #05070a;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #05070a; }
::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--green-br), var(--green-deep));
	border: 2px solid #05070a;
	border-radius: 6px;
}
::selection { background: var(--green-br); color: #05070a; }


/* ==================================================================
 * 9. Inner pages
 *
 * The same language as the home page, applied to the theme's own templates:
 * the banner (every treatment), the capability blocks (cq-v-*), the FAQ and
 * the call-to-action band.
 * ================================================================== */

/* ---------------------------------------------------------- Banner */

/* H1 capped at 50px in every treatment (it reached 80+ before). Orbitron
   caps are big for their size, so this still reads as a display line. */
.cq-hero .cq-hero__body .cq-display {
	font-size: clamp(30px, 3.7vw, 50px);
	line-height: 1.1;
}

.cq-hero__fx {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}
/* The signal source sits over the photograph, right of the copy. */
.cq-hero { --wave-x: 76%; --wave-y: 46%; }
.cq-hero__fx .qb-hh__grid {
	-webkit-mask-image: radial-gradient(60% 80% at 78% 45%, #000 0%, transparent 74%);
	mask-image: radial-gradient(60% 80% at 78% 45%, #000 0%, transparent 74%);
}

/* The photograph wipes in from the right and settles out of a zoom, then
   hands over to the theme's slow drift. */
.cq-motion--full .cq-hero__media {
	animation: sig-hwipe 1500ms var(--e-sig) both;
}
@keyframes sig-hwipe {
	from { clip-path: inset(0 0 0 100%); }
	to   { clip-path: inset(0 0 0 0); }
}
.cq-motion--full .cq-hero__media img,
.cq-motion--full .cq-hero__media .cq-ph {
	animation:
		sig-hsettle 2400ms var(--e-sig) both,
		cq-drift 26s ease-in-out 2.4s infinite alternate;
}
.cq-hero__media img,
.cq-hero__media .cq-ph {
	translate: var(--hx, 0) var(--hy, 0);
	transition: translate 1200ms var(--e-sig);
}
.cq-no-drift.cq-motion--full .cq-hero__media img,
.cq-no-drift.cq-motion--full .cq-hero__media .cq-ph { animation: sig-hsettle 2400ms var(--e-sig) both; }
@keyframes sig-hsettle {
	from { transform: scale(1.2); filter: brightness(1.2); }
	to   { transform: scale(1.04); filter: none; }
}

/* Scroll depth: the copy lifts and fades, the photograph pushes in.
   --hp (0 → 1 over the banner's height) is written by signature.js. */
.cq-motion--full .cq-hero__in {
	transform: translate3d(0, calc(var(--hp, 0) * 90px), 0);
	opacity: calc(1 - var(--hp, 0) * 1.15);
}
.cq-motion--full .cq-hero__media { scale: calc(1 + var(--hp, 0) * .08); }

/* Copy: breadcrumb slides in, H1 rises word by word, the rest follows. */
.cq-motion--full .cq-hero .cq-crumb { animation: sig-tin 900ms var(--e-sig) 150ms both; }
.cq-motion--full .cq-hero__body > .cq-display.is-split {
	opacity: 1;
	transform: none;
	animation: none;
}
.cq-motion--full .cq-display.is-split .qb-w > span {
	transform: translate3d(0, 108%, 0);
	animation: sig-word 1200ms var(--e-sig) forwards;
	animation-delay: calc(420ms + var(--wi, 0) * 85ms);
}
.cq-motion--full .cq-hero__body > .cq-sub { animation: sig-blurin 1100ms var(--e-sig) 800ms both; }
.cq-motion--full .cq-hero__body > .cq-btns {
	opacity: 1;
	transform: none;
	animation: none;
}
.cq-motion--full .cq-hero__body > .cq-btns > * { animation: sig-pop 900ms var(--e-sig) both; }
.cq-motion--full .cq-hero__body > .cq-btns > :nth-child(1) { animation-delay: 1050ms; }
.cq-motion--full .cq-hero__body > .cq-btns > :nth-child(2) { animation-delay: 1180ms; }

/* ---------------------------------------------------------- Section seams */
/* A hairline between bands; a faint light drifts slowly along it. */
.cq-sec + .cq-sec::before,
.cq-sec + .cq-ctab::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	width: min(var(--maxw), calc(100% - 2 * var(--gut)));
	height: 1px;
	translate: -50% 0;
	background:
		linear-gradient(90deg, transparent, rgba(184, 245, 154, .55), transparent) 0 0 / 26% 100% no-repeat,
		linear-gradient(90deg, transparent, rgba(105, 185, 75, .22), transparent);
	pointer-events: none;
}
.cq-motion--full .cq-sec + .cq-sec::before,
.cq-motion--full .cq-sec + .cq-ctab::before { animation: sig-seam 14s linear infinite; }
@keyframes sig-seam {
	from { background-position: -30% 0, 0 0; }
	to   { background-position: 130% 0, 0 0; }
}

/* ---------------------------------------------------------- Eyebrows */
/* The label unveils left to right while its rule draws (motion.css marks
   eyebrows for reveal and adds .is-in). Typographic and quiet.
   A mask, not a clip-path: IntersectionObserver treats a fully clipped
   element as invisible and would never reveal it. */
.cq-motion--full .cq-eyebrow[data-reveal] {
	opacity: 1;
	-webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
	mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
	-webkit-mask-size: 260% 100%;
	mask-size: 260% 100%;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.cq-motion--full .cq-eyebrow[data-reveal].is-in {
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
	transition: -webkit-mask-position 1400ms var(--e-sig) 120ms, mask-position 1400ms var(--e-sig) 120ms;
}

/* ---------------------------------------------------------- Image frames */
/* Panel and split images: revealed by a wipe; a fine frame on hover. */
.cq-motion--full [data-reveal="wipe"] {
	opacity: 1;
	clip-path: inset(0 100% 0 0);
}
.cq-motion--full [data-reveal="wipe"] img,
.cq-motion--full [data-reveal="wipe"] .cq-ph { transform: scale(1.25); }
.cq-motion--full [data-reveal="wipe"].is-in {
	clip-path: inset(0 0 0 0);
	transition: clip-path 1300ms var(--e-sig);
	transition-delay: var(--rd, 0ms);
}
.cq-motion--full [data-reveal="wipe"].is-in img,
.cq-motion--full [data-reveal="wipe"].is-in .cq-ph {
	transform: scale(1);
	transition: transform 1800ms var(--e-sig);
}

.cq-v-panel__media,
.cq-v-split__media {
	transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 700ms var(--e-sig), box-shadow 500ms var(--e-sig);
}
.cq-v-panel__media:hover,
.cq-v-split__media:hover { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(105, 185, 75, .3); }

/* The tag on the panel image carries a small status dot. */
.cq-v-panel__tag::before {
	content: "";
	align-self: center;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--green-br);
}

/* Ruled paragraphs: a bar draws down the left edge on hover. */
.cq-v-panel__p { position: relative; transition: color 340ms var(--e-ui), border-color 340ms var(--e-ui), transform 500ms var(--e-sig); }
.cq-v-panel__p::before {
	content: "";
	position: absolute;
	inset-inline-start: -12px;
	inset-block: clamp(20px, 2.4vw, 30px);
	width: 2px;
	background: var(--green-br);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 520ms var(--e-sig);
}
.cq-v-panel__p:first-child::before { inset-block-start: 0; }
.cq-v-panel__p:hover { transform: translate3d(12px, 0, 0); }
.cq-v-panel__p:hover::before { transform: scaleY(1); }

/* ---------------------------------------------------------- Carousel (cq-v-car) */
.cq-v-car__i {
	transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 700ms var(--e-sig), box-shadow 600ms var(--e-sig);
}
.cq-v-car__i:hover {
	transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, -6px, 0);
	box-shadow: 0 30px 56px -22px rgba(0, 0, 0, .8), 0 0 0 1px rgba(105, 185, 75, .3);
}
.cq-v-car__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .13) 50%, transparent 62%);
	transform: translate3d(-100%, 0, 0);
	pointer-events: none;
}
.cq-v-car__i:hover .cq-v-car__media::before { animation: sig-glass 1400ms var(--e-sig) both; }
.cq-v-car__t { transition: color 320ms var(--e-ui); }
.cq-v-car__i:hover .cq-v-car__t { color: var(--green-br); }
.cq-v-car__navs .qb-car__nav,
.cq-v-car__nav { border-radius: 2px; }

/* ---------------------------------------------------------- Use-case grid */
.cq-v-cases__i { overflow: clip; }
.cq-v-cases__i::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(105, 185, 75, .12), transparent 70%);
	transform: translate3d(-100%, 0, 0);
	transition: transform 700ms var(--e-sig);
	pointer-events: none;
}
.cq-v-cases__i { isolation: isolate; }
.cq-v-cases__i:hover::before { transform: none; }
.cq-v-cases__i:hover .cq-v-cases__tick { filter: drop-shadow(0 0 8px rgba(105, 185, 75, .9)); }
.cq-v-cases__d { transition: color 320ms var(--e-ui); }
.cq-v-cases__i:hover .cq-v-cases__d { color: #d6e0e5; }

/* ---------------------------------------------------------- Why columns */
.cq-v-cols__i::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--sig-hi), transparent);
	transform: scaleX(0);
	transition: transform 700ms var(--e-sig);
}
.cq-v-cols__i::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: radial-gradient(90% 70% at 50% 110%, rgba(105, 185, 75, .2), transparent 70%);
	opacity: 0;
	transition: opacity 500ms var(--e-ui);
}
.cq-v-cols__i:hover::before { transform: scaleX(1); }
.cq-v-cols__i:hover::after { opacity: 1; }
/* The ghost numeral turns into an outlined, lit figure. */
.cq-v-cols__i:hover .cq-v-cols__n,
.cq-v-ghost__c:hover .cq-v-ghost__n {
	color: transparent;
	-webkit-text-stroke: 1px rgba(184, 245, 154, .55);
}

/* ---------------------------------------------------------- Rail */
.cq-v-rail__t { transition: color 320ms var(--e-ui), transform 500ms var(--e-sig); }
.cq-v-rail__row:hover .cq-v-rail__t { color: var(--sig-hi); transform: translate3d(6px, 0, 0); }
/* Full shorthand on both states: the theme's own hover rule uses the
   shorthand too, which would otherwise reset the gradient layer away. */
.cq-v-rail__row {
	background: linear-gradient(90deg, rgba(105, 185, 75, .08), transparent 60%) 0 0 / 0% 100% no-repeat transparent;
	transition: background-size 700ms var(--e-sig), background-color 380ms var(--e-ui);
}
.cq-v-rail__row:hover {
	background: linear-gradient(90deg, rgba(105, 185, 75, .08), transparent 60%) 0 0 / 100% 100% no-repeat rgba(255, 255, 255, .028);
}

/* ---------------------------------------------------------- Slats */
.cq-motion--full .cq-v-slat.is-open .cq-v-slat__media img,
.cq-motion--full .cq-v-slat.is-open .cq-v-slat__media .cq-ph { animation: sig-drift 18s ease-in-out 1.2s infinite alternate; }
.cq-motion--full .cq-v-slat.is-open .cq-v-slat__t { animation: sig-tin 760ms var(--e-sig) 250ms both; }
.cq-motion--full .cq-v-slat.is-open .cq-v-slat__d { animation: sig-blurin 900ms var(--e-sig) 420ms both; }

/* ---------------------------------------------------------- FAQ */
.cq-motion--full .cq-acc.is-open .cq-acc__in { animation: sig-blurin 700ms var(--e-sig) 120ms both; }

/* ---------------------------------------------------------- CTA band */
.cq-ctab__in::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	width: min(720px, 90%);
	height: 260px;
	translate: -50% -50%;
	background: radial-gradient(closest-side, rgba(105, 185, 75, .2), transparent);
	pointer-events: none;
}
.cq-motion--full .cq-ctab__in::before { animation: sig-breathe 5s ease-in-out infinite; }
.cq-ctab::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	height: 1px;
	background:
		linear-gradient(90deg, transparent, var(--sig-hi), transparent) 0 0 / 30% 100% no-repeat,
		linear-gradient(90deg, transparent, rgba(105, 185, 75, .3), transparent);
	pointer-events: none;
}
.cq-motion--full .cq-ctab::after { animation: sig-seam 5s linear infinite reverse; }

@media (prefers-reduced-motion: reduce) {
	.cq-hero__fx,
	.cq-v-car__media::before { display: none; }
	.cq-hero__media,
	.cq-hero__media img,
	.cq-hero__media .cq-ph,
	.cq-hero .cq-crumb,
	.cq-hero__body > *,
	.cq-display.is-split .qb-w > span,
	.cq-v-slat__t,
	.cq-v-slat__d,
	.cq-acc__in,
	.cq-ctab__mesh,
	.cq-ctab__in::before,
	.cq-ctab::after,
	.cq-sec + .cq-sec::before { animation: none !important; opacity: 1; filter: none; }
	.cq-display.is-split .qb-w > span { transform: none !important; }
	.cq-hero__in { transform: none !important; opacity: 1 !important; }
	.cq-hero__media { scale: none !important; }
	[data-reveal="wipe"] { clip-path: none !important; }
}

/* ==================================================================
 * 8. Reduced motion — final states, nothing moving.
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
	.qb-hh__fx,
	.qb-hh__glow::after,
	.qb-wwd__streaks,
	.qb-wwd__toggle::after,
	.qb-wwd__item::after,
	.qb-car__media::before { display: none; }

	.qb-hh__media,
	.qb-hh__media img,
	.qb-hh__glow,
	.qb-hh__sub,
	.qb-hh__btn,
	.qb-w > span,
	.qb-wwd__t,
	.qb-wwd__ring,
	.qb-wwd__radar,
	.qb-wwd__orbit,
	.qb-wwd__craft,
	.qb-wwd__craft::after,
	.qb-wwd__media::before,
	.qb-wwd__media img,
	.qb-wwd__d,
	.qb-wwd__link,
	.cq-head-wrap::after,
	.cq-btn--p::after,
	.qb-hh__b1::after,
	.qb-ban__btn::after {
		animation: none !important;
		opacity: 1;
		filter: none;
	}
	.qb-w > span,
	.qb-wwd__media img { transform: none !important; }
	.qb-wwd__item:not(.is-open) .qb-wwd__t { transform: translateX(-50%) rotate(180deg); }
	.qb-wwd__craft::after { opacity: .6; }
}