/*
 * Hero treatments.
 *
 * The four-layer recipe is constant; only the composition of the copy changes.
 * Each treatment states its own scrim geometry, because a scrim tuned for
 * bottom-left copy is wrong for a centred headline or a solid-half split.
 */

/* --------------------------------------------------- Shared refinements */
.cq-hero__rule {
	transform-origin: left;
	animation: cq-hero-rule 820ms cubic-bezier(.16,1,.3,1) 120ms both;
}
@keyframes cq-hero-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* A figure the hero can carry, for pages that lead with a number. */
.cq-hero__stat {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	margin-block-start: 30px;
	padding: 12px 20px;
	background: rgba(5,7,10,.5);
	border: 1px solid rgba(105,185,75,.34);
	border-radius: 2px;
	backdrop-filter: blur(8px);
}
.cq-hero__stat strong {
	font-family: var(--font-head);
	font-size: 26px;
	font-weight: 800;
	line-height: 1;
	color: var(--green-br);
}
.cq-hero__stat span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted-dark);
}

/* Scroll cue — a line that runs down and repeats. It marks that there is more
   below without animating anything that costs layout. */
.cq-hero__cue {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-end: 22px;
	z-index: 5;
	width: 1px;
	height: 46px;
	background: rgba(255,255,255,.14);
	overflow: hidden;
	transform: translateX(-50%);
}
.cq-hero__cue i {
	position: absolute;
	inset-inline: 0;
	height: 18px;
	background: var(--green-br);
	animation: cq-cue 2.4s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cq-cue {
	0%   { transform: translateY(-100%); }
	100% { transform: translateY(260%); }
}

/* ================================================== Standard
 * Copy bottom-left, tall band, scrim heaviest on the left.
 * ================================================== */
.cq-hero--v-standard { align-items: flex-end; }
.cq-hero--v-standard .cq-hero__body { max-width: 60ch; }

/* ================================================== Compact
 * A shorter band with the copy high — for pages that open with a statement
 * rather than an image, like About.
 * ================================================== */
.cq-hero--v-compact {
	align-items: center;
	min-height: min(560px, 62vh);
}
.cq-hero--v-compact .cq-hero__in { padding-block: clamp(56px, 7vw, 92px) clamp(36px, 4vw, 60px); }
.cq-hero--v-compact .cq-display { font-size: clamp(32px, 4.6vw, 62px); }
.cq-hero--v-compact .cq-hero__body { max-width: 54ch; }
.cq-hero--v-compact .cq-hero__fade { --hero-fade: 22%; }

/* ================================================== Reveal
 * The image is pushed right and left uncovered, so the subject stays legible.
 * The scrim becomes a hard left column instead of a diagonal.
 * ================================================== */
.cq-hero--v-reveal { align-items: center; }
.cq-hero--v-reveal .cq-hero__media {
	inset-inline-start: auto;
	width: 68%;
}
.cq-hero--v-reveal .cq-hero__tint { inset-inline-start: 32%; }
.cq-hero--v-reveal .cq-hero__scrim {
	background:
		linear-gradient(90deg, var(--void) 0%, var(--void) 26%, rgba(5,7,10,.72) 46%, rgba(5,7,10,.22) 74%, rgba(5,7,10,.5) 100%);
}
.cq-hero--v-reveal .cq-hero__body { max-width: 46ch; }
.cq-hero--v-reveal .cq-display { font-size: clamp(30px, 4.4vw, 60px); }

/* ================================================== Framed
 * The copy sits on an inset panel. Used where the headline runs to two lines
 * and needs a surface of its own to stay readable.
 * ================================================== */
.cq-hero--v-framed { align-items: center; }
.cq-hero--v-framed .cq-hero__frame {
	position: absolute;
	inset-block: clamp(60px, 8vw, 110px);
	inset-inline-start: max(var(--gut), calc((var(--vw, 100vw) - var(--maxw)) / 2));
	z-index: 3;
	width: min(600px, 52%);
	background: linear-gradient(150deg, rgba(10,14,19,.9), rgba(5,7,10,.82));
	border: 1px solid rgba(255,255,255,.08);
	border-inline-start: 3px solid var(--tint);
	border-radius: var(--r-card);
	backdrop-filter: blur(10px);
}
.cq-hero--v-framed .cq-hero__body {
	max-width: min(540px, 48%);
	padding: clamp(22px, 2.6vw, 38px) clamp(24px, 2.8vw, 42px);
}
.cq-hero--v-framed .cq-hero__scrim {
	background: linear-gradient(105deg, rgba(5,7,10,.72) 0%, rgba(5,7,10,.4) 44%, rgba(5,7,10,.24) 70%, rgba(5,7,10,.52) 100%);
}
.cq-hero--v-framed .cq-crumb { padding-inline-start: clamp(24px, 2.8vw, 42px); }
.cq-hero--v-framed .cq-display { font-size: clamp(28px, 3.6vw, 50px); }

/* ================================================== Centred
 * ================================================== */
.cq-hero--v-centred { align-items: center; text-align: center; }
.cq-hero--v-centred .cq-hero__body { max-width: 62ch; margin-inline: auto; }
.cq-hero--v-centred .cq-eyebrow,
.cq-hero--v-centred .cq-btns { justify-content: center; }
.cq-hero--v-centred .cq-hero__rule { margin-inline: auto; }
.cq-hero--v-centred .cq-sub { margin-inline: auto; }
.cq-hero--v-centred .cq-crumb { justify-content: center; }
.cq-hero--v-centred .cq-hero__scrim {
	background: radial-gradient(120% 90% at 50% 40%, rgba(5,7,10,.52) 0%, rgba(5,7,10,.86) 62%, rgba(5,7,10,.94) 100%);
}

/* ================================================== Split
 * A solid half carries the copy, the image takes the other. The strongest
 * treatment for a page whose photograph is the point.
 * ================================================== */
.cq-hero--v-split { align-items: stretch; }
.cq-hero--v-split .cq-hero__media { inset-inline-start: auto; width: 50%; }
.cq-hero--v-split .cq-hero__tint { inset-inline-start: 50%; }
.cq-hero--v-split .cq-hero__scrim {
	background: linear-gradient(90deg, var(--void) 0%, var(--void) 49.6%, rgba(5,7,10,.28) 50%, rgba(5,7,10,.44) 100%);
}
/* A tint seam on the boundary. */
.cq-hero--v-split::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 50%;
	z-index: 4;
	width: 2px;
	background: var(--tint);
	opacity: .85;
}
.cq-hero--v-split .cq-hero__in {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.cq-hero--v-split .cq-hero__body { max-width: 44%; }
.cq-hero--v-split .cq-display { font-size: clamp(28px, 3.8vw, 54px); }
.cq-hero--v-split .cq-hero__fade { display: none; }

/* ------------------------------------------------------------ Breakpoints */
@media (max-width: 1080px) {
	.cq-hero--v-reveal .cq-hero__media { width: 78%; }
	.cq-hero--v-framed .cq-hero__frame { width: min(560px, 66%); }
	.cq-hero--v-framed .cq-hero__body { max-width: min(520px, 62%); }
	.cq-hero--v-split .cq-hero__body { max-width: 46%; }
}

@media (max-width: 860px) {
	/*
	 * Every treatment that relies on a horizontal division collapses to the
	 * standard stack here. A 50% copy column at phone width is four words per
	 * line — the layout has to give way, and the words stay untouched.
	 */
	.cq-hero--v-reveal .cq-hero__media,
	.cq-hero--v-split .cq-hero__media { inset-inline-start: 0; width: 100%; }
	.cq-hero--v-reveal .cq-hero__tint,
	.cq-hero--v-split .cq-hero__tint { inset-inline-start: 0; }
	.cq-hero--v-split::after { display: none; }
	.cq-hero--v-split .cq-hero__fade { display: block; }

	.cq-hero--v-reveal .cq-hero__scrim,
	.cq-hero--v-split .cq-hero__scrim,
	.cq-hero--v-framed .cq-hero__scrim {
		background: linear-gradient(180deg, rgba(5,7,10,.58) 0%, rgba(5,7,10,.86) 52%, rgba(5,7,10,.96) 100%);
	}

	.cq-hero--v-framed .cq-hero__frame { display: none; }
	.cq-hero--v-framed .cq-hero__body,
	.cq-hero--v-reveal .cq-hero__body,
	.cq-hero--v-split .cq-hero__body { max-width: 100%; padding: 0; }
	.cq-hero--v-framed .cq-crumb { padding-inline-start: 0; }

	.cq-hero--v-reveal,
	.cq-hero--v-split,
	.cq-hero--v-framed { align-items: flex-end; }
	.cq-hero--v-split .cq-hero__in { justify-content: flex-end; }

	.cq-hero__cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cq-hero__rule { animation: none; }
	.cq-hero__cue i { animation: none; opacity: .5; }
}