/* ==========================================================================
   HQDM — service pages: hero with illustration, big intro text, sticky stacking
   cards (React Bits ScrollStack), "why" rows, start-growing band (Formix service single)
   ========================================================================== */
.hq-hero--service { display: grid; justify-items: center; text-align: center; padding-bottom: clamp(2rem, 4vw, 3rem); isolation: isolate; overflow: clip; }
.hq-hero--service > * { max-width: none; margin: 0 !important; }
.hq-hero--service::before { content: ""; position: absolute; inset: -20% -10% auto 30%; height: 90%; background: radial-gradient(45% 50% at 70% 30%, rgba(151, 71, 255, .45), transparent 70%); z-index: -1; pointer-events: none; }
.hq-hero--service .hq-hero__content { display: grid; justify-items: center; position: relative; z-index: 1; }
.hq-hero--service .hq-hero__title { font-size: var(--wp--preset--font-size--heading-xl); max-width: 16ch; margin: 0 auto 1.5rem; }
.hq-hero--service .hq-hero__actions { justify-content: center; }
.hq-hero--service .hq-hero__lede { margin-inline: auto; max-width: 30ch; color: var(--hq-text); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.35; margin-bottom: 2rem; }
.hq-hero__art { position: absolute !important; inset: clamp(7rem, 12vw, 9rem) 0 auto; z-index: 0; pointer-events: none; display: flex; justify-content: center; }
.hq-hero__art img { width: min(100%, 1200px); opacity: .9; border-radius: 0; filter: drop-shadow(0 30px 60px rgba(113, 61, 223, .55)); animation: hq-float 9s ease-in-out infinite; }
@keyframes hq-float { 50% { transform: translateY(-14px) rotate(-1.5deg); } }
.hq-hero--service .hq-logos { grid-column: 1 / -1; margin-top: clamp(3.5rem, 7vw, 6rem) !important; }
@media (max-width: 900px) { .hq-hero__art { inset: auto 0 38%; opacity: .5; } }

/* Intro: large reading text scrubbed word by word (motion.js) */
.hq-intro__text { max-width: 1040px !important; font-size: clamp(1.35rem, 2.6vw, 2.15rem); line-height: 1.35; letter-spacing: -.02em; font-weight: 500; color: var(--hq-white); }
.hq-intro__text p { margin-bottom: 1.1em; }
.hq-intro__text a { color: var(--hq-accent); }

/* Proven wins: cards that pin and stack while scrolling (desktop) */
.hq-stack { display: grid; gap: 22px; }
.hq-stack-card {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: clamp(1.25rem, 3vw, 2.5rem);
	padding: clamp(1.75rem, 4vw, 3.25rem);
	border-radius: var(--hq-r-lg);
	background: linear-gradient(160deg, #24164a 0%, #140b2c 60%);
	box-shadow: inset 0 0 0 1px rgba(221, 218, 231, .12), 0 40px 80px -40px #000;
	transform-origin: 50% 0;
}
.hq-stack-card > * { margin: 0 !important; }
.hq-stack-card__icon { grid-row: 1 / span 2; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(180deg, var(--hq-p2), var(--hq-p1)); box-shadow: 0 14px 34px -10px rgba(113, 61, 223, .9); }
.hq-stack-card__icon img { width: 32px; height: 32px; border-radius: 0; }
.hq-stack-card h3 { font-size: var(--wp--preset--font-size--heading-md); margin-bottom: .6rem !important; }
.hq-stack-card p { color: var(--hq-muted); font-size: 1.0625rem; max-width: 62ch; }
@media (min-width: 1024px) {
	.hq-stack { gap: 0; }
	.hq-stack-card { position: sticky; top: calc(120px + var(--i, 0) * 22px); min-height: 300px; margin-bottom: 16vh !important; }
	.hq-stack-card:last-child { margin-bottom: 0 !important; }
}
@media (max-width: 600px) { .hq-stack-card { grid-template-columns: 1fr; } .hq-stack-card__icon { grid-row: auto; margin-bottom: 1.25rem !important; } }

/* Why choose: intro + rows with illustration */
.hq-why__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 6vw, 6rem); align-items: end; }
.hq-why__intro > * { margin: 0 !important; }
.hq-why__intro p { color: var(--hq-muted); }
.hq-why__rows { display: grid; gap: 16px; }
.hq-why-row { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--hq-r-lg); background: var(--hq-glass); box-shadow: inset 0 0 0 1px var(--hq-line); }
.hq-why-row__art { display: grid; place-items: center; min-height: 180px; border-radius: var(--hq-r); background: radial-gradient(60% 60% at 50% 50%, rgba(151, 71, 255, .3), transparent 70%); }
.hq-why-row__art img { width: min(100%, 220px); border-radius: 0; }
.hq-why-row__body p { color: var(--hq-muted); margin: 0; }
.hq-why__actions { justify-content: center; }
@media (max-width: 781px) { .hq-why__intro, .hq-why-row { grid-template-columns: 1fr; } }

/* Start growing band */
.hq-band__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	max-width: 1000px !important;
	text-align: center;
	padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 5vw, 4rem);
	border-radius: clamp(24px, 3vw, 36px);
	background: radial-gradient(70% 90% at 50% 120%, rgba(223, 170, 91, .28), transparent 60%), radial-gradient(70% 80% at 50% -20%, rgba(151, 71, 255, .45), transparent 70%), #120a26;
	box-shadow: inset 0 0 0 1px rgba(151, 71, 255, .3);
}
.hq-band__panel > * { max-width: 680px; margin-inline: auto; }
.hq-band__panel p { color: var(--hq-muted); font-size: var(--wp--preset--font-size--lead); }
.hq-band__panel .hq-split-title { margin-inline: auto; }
.hq-band__panel .wp-block-buttons { justify-content: center; margin-top: 1.75rem; }