/* Block: qoob/growth-framework — white section with an interactive stage selector. */
.qoob-growth-framework {
	background: var(--white);
	padding: 108px 0;
}

/* ---------- Intro header ---------- */
.qoob-growth-framework__intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: flex-end;
	margin-bottom: 54px;
}

.qoob-growth-framework .qoob-growth-framework__eyebrow {
	color: var(--teal);
	margin: 0;
}

.qoob-growth-framework__eyebrow-icon { color: var(--coral); }

.qoob-growth-framework__heading {
	margin: 16px 0 0;
	font-weight: var(--w-medium);
	letter-spacing: -0.02em;
	line-height: 1.02;
	font-size: clamp(38px, 4.4vw, 64px);
}

.qoob-growth-framework__lede {
	margin: 0;
	font-size: 19px;
	line-height: 1.55;
	color: var(--grey-3);
}

/* ---------- Widget ---------- */
/* --qoob-gf-count / --qoob-gf-steps are set inline by render.php from the
   number of stages; --qoob-tab-index is set by the tab widget in main.js. */
.qoob-growth-framework__widget { display: block; }

/* ---------- Horizontal numbered stepper ---------- */
.qoob-growth-framework__stepper {
	--qoob-gf-dot: 66px;
	position: relative;
	margin-bottom: 46px;
	/* No horizontal padding: the track/fill are positioned in percentages
	   against this box, so any padding here would offset them from the node
	   centres they are supposed to line up with. Node breathing room comes
	   from the per-node padding instead. */
}

/* Track and fill run between the first and last node centres, i.e. inset by
   half a column at each end, and sit on the dots' centre line. */
.qoob-growth-framework__track,
.qoob-growth-framework__progress {
	position: absolute;
	top: calc(var(--qoob-gf-dot) / 2 - 1.5px);
	height: 3px;
	border-radius: 3px;
	left: calc(50% / var(--qoob-gf-count, 1));
}

.qoob-growth-framework__track {
	right: calc(50% / var(--qoob-gf-count, 1));
	background: var(--grey-7);
}

.qoob-growth-framework__progress {
	width: calc(
		(100% - 100% / var(--qoob-gf-count, 1)) *
		var(--qoob-tab-index, 0) / var(--qoob-gf-steps, 1)
	);
	background: var(--coral);
	transition: width 0.5s var(--ease);
}

.qoob-growth-framework__nodes {
	position: relative;
	display: flex;
	justify-content: space-between;
}

.qoob-growth-framework__node {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0;
	padding: 0 6px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.qoob-growth-framework__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--qoob-gf-dot);
	height: var(--qoob-gf-dot);
	flex: none;
	border-radius: 50%;
	font-size: 22px;
	font-weight: var(--w-bold);
	transition: background 0.3s var(--ease), color 0.3s var(--ease),
		border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.qoob-growth-framework__node-name {
	display: block;
	margin-top: 16px;
	font-size: 16px;
	font-weight: var(--w-semibold);
	letter-spacing: -0.01em;
	transition: color 0.22s var(--ease);
}

.qoob-growth-framework__node-tag {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	transition: color 0.22s var(--ease);
}

/* Three node states without any extra JS bookkeeping: nodes default to
   "completed", the active one is styled by .is-active, and everything that
   follows the active node is "upcoming" via the sibling combinator. */
.qoob-growth-framework__node .qoob-growth-framework__dot {
	background: var(--midnight);
	color: #fff;
	border: 3px solid var(--midnight);
}

.qoob-growth-framework__node .qoob-growth-framework__node-name { color: var(--grey-2); }
.qoob-growth-framework__node .qoob-growth-framework__node-tag { color: var(--grey-3); }

.qoob-growth-framework__node.is-active .qoob-growth-framework__dot {
	background: var(--coral);
	color: var(--midnight);
	border-color: var(--coral);
	transform: scale(1.06);
}

.qoob-growth-framework__node.is-active .qoob-growth-framework__node-name { color: var(--midnight); }
.qoob-growth-framework__node.is-active .qoob-growth-framework__node-tag { color: var(--coral-4); }

.qoob-growth-framework__node.is-active ~ .qoob-growth-framework__node .qoob-growth-framework__dot {
	background: #fff;
	/* grey-3 not grey-4: at the 560px breakpoint the number drops to 15px, which
	   is normal-size text, and grey-4 on white is only 4.03:1. */
	color: var(--grey-3);
	border-color: var(--grey-7);
	transform: none;
}

.qoob-growth-framework__node.is-active ~ .qoob-growth-framework__node .qoob-growth-framework__node-name { color: var(--grey-3); }
.qoob-growth-framework__node.is-active ~ .qoob-growth-framework__node .qoob-growth-framework__node-tag { color: var(--grey-3); }

/* No focus override here on purpose. main.css sets the site-wide keyboard focus
   indicator (3px aqua outline, WCAG 2.4.7/2.4.13) via a :where() selector, so it
   carries no specificity and any block rule would silently replace it — and an
   outline is honoured in forced-colors mode where a box-shadow ring is not. */

/* ---------- Detail panel ---------- */
.qoob-growth-framework__detail {
	position: relative;
	overflow: hidden;
	background: var(--midnight);
	color: #fff;
	border-radius: 26px;
	padding: 52px 54px;
	box-shadow: 0 18px 54px rgba(22, 21, 30, 0.14);
}

.qoob-growth-framework__detail-circle {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.qoob-growth-framework__detail-circle--1 {
	width: 360px;
	height: 360px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	right: -150px;
	bottom: -160px;
}

.qoob-growth-framework__detail-circle--2 {
	width: 220px;
	height: 220px;
	border: 1px solid rgba(255, 108, 88, 0.28);
	right: 60px;
	bottom: -120px;
}

/* Copy on the left, "where we focus" card on the right — but only split when
   that card exists, otherwise the grid reserves an empty second column and the
   copy sits in ~53% of the panel for no reason. */
.qoob-growth-framework__panel {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
	align-items: start;
}

.qoob-growth-framework__panel--split {
	grid-template-columns: 1.15fr 1fr;
}

.qoob-growth-framework__panel-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12.5px;
	font-weight: var(--w-bold);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--coral-6);
}

.qoob-growth-framework__focus {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	padding: 30px;
}

/* Progressive enhancement: with JS active, only the active panel shows;
   with no JS every panel is visible. Mirrors the [data-reveal] pattern. */
.js .qoob-growth-framework__panel:not(.is-active) { display: none; }
.qoob-growth-framework__panel[hidden] { display: none; }

.qoob-growth-framework__panel-heading {
	margin: 16px 0 0;
	font-size: clamp(28px, 3vw, 38px);
	font-weight: var(--w-regular);
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: #fff;
}

.qoob-growth-framework__panel-sub {
	margin: 18px 0 0;
	max-width: 520px;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.74);
}

.qoob-growth-framework__focus-label {
	margin: 0 0 18px;
	font-size: 12.5px;
	font-weight: var(--w-bold);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--coral-6);
}

.qoob-growth-framework__focus-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.qoob-growth-framework__focus-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.92);
}

.qoob-growth-framework__focus-icon {
	flex: none;
	margin-top: 2px;
	color: var(--coral);
}

/* Outcome sits above the CTA, both under a hairline rule. */
.qoob-growth-framework__footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.qoob-growth-framework__outcome {
	margin: 0;
	max-width: 460px;
	font-size: 15.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
}

.qoob-growth-framework__outcome-label {
	font-weight: var(--w-semibold);
	color: var(--coral-6);
}

.qoob-growth-framework .qoob-growth-framework__cta {
	height: 48px;
	padding: 0 24px;
	font-size: 15px;
	font-weight: var(--w-medium);
}

/* ---------- Prev / next arrows ----------
   The stepper alone did not read as something that moves: people did not realise
   the numbers switch the panel. Two round buttons straddle the card's side edges,
   the usual carousel cue. They sit in .qoob-growth-framework__stage, outside the
   card, because the card's overflow: hidden (for its circles) would clip them.
   Half of each button hangs past the card, into the container gutter, which is
   36px or more at every width where this layout applies. */
.qoob-growth-framework__stage {
	position: relative;
}

.qoob-growth-framework__arrow {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 50%;
	background: #fff;
	color: var(--midnight);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.qoob-growth-framework__arrow--prev { left: 0; transform: translate(-50%, -50%); }
.qoob-growth-framework__arrow--next { right: 0; transform: translate(50%, -50%); }

.qoob-growth-framework__arrow:hover {
	background: var(--coral);
	border-color: var(--coral);
}

/* Shown by main.js; the class above would otherwise override the attribute. */
.qoob-growth-framework__arrow[hidden] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	/* Focus card drops beneath the copy. Targets the split variant explicitly so
	   it does not rely on source order against the same-specificity base rule. */
	.qoob-growth-framework__panel,
	.qoob-growth-framework__panel--split {
		grid-template-columns: 1fr;
		gap: 34px;
	}
}

@media (max-width: 900px) {
	.qoob-growth-framework { padding: 72px 0; }
	.qoob-growth-framework__intro {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 20px;
		margin-bottom: 40px;
	}
	.qoob-growth-framework__stepper {
		--qoob-gf-dot: 54px;
		margin-bottom: 36px;
	}
	.qoob-growth-framework__dot { font-size: 18px; }
	.qoob-growth-framework__node-name { margin-top: 12px; font-size: 14.5px; }
	.qoob-growth-framework__node-tag { font-size: 12px; }
	.qoob-growth-framework__detail { padding: 40px 28px; }

	/* The gutter is too narrow to hang the arrows over the card's edges here, so
	   they drop into a centred pair beneath it. Both modifiers are named so the
	   transform reset does not rely on source order against the base rules. */
	.qoob-growth-framework__stage {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 18px 14px;
	}
	.qoob-growth-framework__stage .qoob-growth-framework__detail { flex: 0 0 100%; }
	.qoob-growth-framework__arrow--prev,
	.qoob-growth-framework__arrow--next {
		position: static;
		transform: none;
	}
}

@media (max-width: 560px) {
	.qoob-growth-framework { padding: 56px 0; }
	.qoob-growth-framework__stepper {
		--qoob-gf-dot: 42px;
		margin-bottom: 30px;
	}
	.qoob-growth-framework__node .qoob-growth-framework__dot { font-size: 15px; border-width: 2px; }
	.qoob-growth-framework__node { padding: 0 3px; }
	.qoob-growth-framework__node-name { margin-top: 10px; font-size: 12.5px; }
	/* Tags are the first thing to go when there is no room for them. */
	.qoob-growth-framework__node-tag { display: none; }
	.qoob-growth-framework__detail { padding: 32px 24px; }
	.qoob-growth-framework__focus { padding: 24px 22px; }
	.qoob-growth-framework__footer { gap: 18px; }
	.qoob-growth-framework .qoob-growth-framework__cta { width: 100%; justify-content: center; }
}