/* ============================================================
   Cubiq Jobs — single job styles
   Brand: #020b31 bg · brand gradient · #65C8C0 teal · Open Sauce One
   ============================================================ */

.cqj-page {
	--c1: 79, 214, 241;
	--c2: 47, 143, 218;
	--c3: 43, 111, 208;
	--grad: linear-gradient(100deg, #4fd6f1, #2f8fda 55%, #2b6fd0);
	--ink: rgba(255,255,255,0.72);
	--shell: 84rem;

	/* Shared hero contract with cubiq-hero-glow: --mx/--my the ambient orbit,
	   --px/--py the pointer parallax, --scroll the module's offset from the
	   top of the viewport. All inert until cubiq-jobs.js runs. */
	--mx: 50%; --my: 46%;
	--px: 0; --py: 0;

	position: relative;
	background: #020b31;
	min-height: 100vh;
	font-family: "Open Sauce One", sans-serif;
	color: var(--ink);
}

html, body { overflow-x: clip; }

.cqj-shell {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 1.5rem;
	position: relative;
	z-index: 1;
}

/* ── Ambient background ──────────────────────────────────── */
.cqj-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.cqj-bg-glow {
	position: absolute;
	/* Sits over the LEFT-aligned copy, not the page centre — it is the soft
	   half of the hero's two-mass composition, with the orb limb holding the
	   right. Centring it would put a third mass down the middle and flatten
	   the asymmetry the layout is built on. */
	top: -14%; left: 34%;
	width: min(1100px, 96vw); height: 720px;
	/* Ambient orbit (--mx/--my) keeps the glow alive with no cursor present;
	   parallax and scroll ride on top of it. */
	transform:
		translateX(-50%)
		translateY(calc(var(--scroll, 0px) * 0.10))
		translate(calc(var(--px) * -2.4%), calc(var(--py) * -2.4%));
	background:
		radial-gradient(ellipse 46% 60% at calc(var(--mx) - 18%) calc(var(--my) - 6%), rgba(79,214,241,0.16), transparent 70%),
		radial-gradient(ellipse 50% 60% at calc(var(--mx) + 20%) calc(var(--my) - 16%), rgba(43,111,208,0.20), transparent 72%);
	filter: blur(8px);
	will-change: transform;
}

/* ── Buttons ─────────────────────────────────────────────── */
.cqj-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--grad);
	color: #041027;
	font-weight: 600; font-size: 0.98rem;
	letter-spacing: -0.01em;
	text-decoration: none;
	border: none; cursor: pointer;
	font-family: inherit;
	box-shadow: 0 10px 30px -10px rgba(79,214,241,0.55), inset 0 1px 0 rgba(255,255,255,0.35);
	transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, filter 0.3s ease;
}
.cqj-btn svg { width: 18px; height: 18px; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.cqj-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 42px -12px rgba(79,214,241,0.7), inset 0 1px 0 rgba(255,255,255,0.45); filter: saturate(1.06); }
.cqj-btn:hover svg { transform: translateX(4px); }
.cqj-btn-sm { padding: 10px 20px; font-size: 0.88rem; }
.cqj-btn-block { display: flex; justify-content: center; width: 100%; margin-top: 20px; }

/* ── Hero ────────────────────────────────────────────────── */
.cqj-hero { padding: 168px 0 64px; position: relative; }

/* ── Hero background: off-centre orb limb ─────────────────────────────
   Takes the orb device from cubiq-hero-glow, but recomposed for a
   LEFT-ALIGNED hero. hero-glow centres its sphere, which works there
   because the copy is centred too; dropped behind left-aligned copy that
   same symmetry reads as a backdrop borrowed from another page.

   So the sphere's centre is pushed off-canvas low and to the right, and
   what actually reads in the hero is its upper-left limb — a vast curve
   rising through the empty half beside the text, rather than a circle
   sitting behind it. Two masses, deliberately unbalanced: the soft
   ambient glow warms the copy on the left, the hard luminous limb holds
   the right.

   Geometry lives in the three custom properties below so the composition
   can be re-tuned in one place, and the whole thing is positioned against
   the content shell (.cqj-orb-anchor) rather than the viewport — the orb
   keeps a fixed relationship to the text column instead of sliding
   around under it as the window changes width. */
.cqj-orb-stage {
	position: absolute; inset: 0;
	z-index: 0;
	/* `clip` rather than `hidden`, with a margin, so the glow's falloff can
	   finish past the hero's bottom edge instead of being sliced by it. The
	   halo's alpha already decays to zero on its own; the only thing that was
	   truncating it was this box. Keeping the box at inset:0 matters — the
	   anchor below resolves its percentages against it, so resizing the stage
	   would move the whole composition. The margin adds room without moving
	   anything. Falls back to a plain clip where unsupported, i.e. today's
	   behaviour, which the short fade below still covers. */
	overflow: clip;
	overflow-clip-margin: 280px;
	pointer-events: none;

	/* Centre sits ABOVE the hero and off to the right, so what reads is the
	   sphere's bottom-left limb: the mass resolves to a rounded base about
	   two-thirds down and the hero runs out to clean dark below it. Putting
	   the centre below the fold instead (the obvious way round) means the
	   sphere is still at full width when the hero ends, and it gets sliced
	   off — the hard horizontal cut this replaces.

	   Sized large on purpose. A more compact sphere keeps its limb clear of the
	   title, but it also reads as a small object parked in the corner; at this
	   scale the curve is big enough to balance the headline, which is the job
	   it is actually doing. The limb grazing the last line of the title is an
	   accepted trade, not an oversight. */
	--orb-x: 109%;   /* sphere centre, % of shell width  — beyond the right edge */
	--orb-y: -55%;   /* sphere centre, % of hero height  — above the fold        */
	--orb-d: 147%;   /* diameter,      % of shell width                          */

	/* The rim carries hero-glow's ramp, NOT this page's --c1/--c2/--c3. Those
	   are the UI accent colours — three shades of one blue — so a conic built
	   from them has no hue journey at all: the rim reads as cyan fading to
	   nothing. hero-glow's third stop is a true purple, which is what makes
	   its orb travel. They stay scoped here because --c1..--c3 also drive the
	   Apply button, chip accents and shadows, which must not turn purple. */
	--rim-1: 20, 171, 218;    /* #14ABDA cyan   — luminance 0.343 */
	--rim-2: 3, 139, 241;     /* #038BF1 blue   — luminance 0.248 */
	--rim-3: 152, 128, 228;   /* #9880E4 violet — luminance 0.277 */

	/* --rim-3 is a lifted version of hero-glow's #7259BF, and the deviation is
	   deliberate. That purple sits at luminance 0.145 against cyan's 0.343 — a
	   2.37x swing — so on a navy ground it does not read as violet light, it
	   reads as an absence. Lifting it to 0.277 holds the swing to 1.24x, so all
	   three stops carry comparable light and no part of the limb looks unlit.
	   Vary the hue along the ramp; hold the luminance. */
}

/* Insurance only, for browsers without overflow-clip-margin. Deliberately
   short and fixed-height: the old 26%-of-hero fade covered ~213px, which ate
   most of the halo's falloff on the bottom edge alone and made the spread look
   lopsided and cut off. The halo mask decays to transparent on its own edge,
   so no fade is needed to clean up the tail. */

/* The content grid, mirrored: same max-width and centring as .cqj-shell,
   so orb coordinates are expressed in the same space as the copy. */
.cqj-orb-anchor {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
}

/* Both layers share one centre and differ only in size, so the halo
   protrudes evenly and the rim light reads all along the visible limb. */
.cqj-orb,
.cqj-orb-glow {
	position: absolute;
	left: var(--orb-x);
	top: var(--orb-y);
	aspect-ratio: 1;
	border-radius: 50%;
}

/* Masked to a RING rather than left as a filled disc. hero-glow gets away
   with a solid halo because its sphere covers almost all of it; here the
   sphere resolves inside the frame, so every part of the halo it does not
   cover paints at full strength — which is the blue spreading across the
   hero of its own accord. Carrying the light in the annulus means there is
   no bright interior to escape in the first place, and the rim no longer
   depends on the sphere happening to occlude it. */
.cqj-orb-glow {
	width: calc(var(--orb-d) + 40%);
	filter: blur(60px);
	opacity: 0.9;
	/* Opaque through the core, decaying smoothly to zero at its own edge.
	   The core is hidden behind the sphere, so what actually shows is the tail
	   of that decay: brightest hard against the limb and falling away outward,
	   which is how a rim light behaves.

	   An annulus mask (transparent inside, opaque outside) does NOT work here,
	   even though it also stops the flooding — it leaves a bright core with
	   darkness on BOTH sides, so the visible result is a ribbon of colour with
	   two defined edges rather than a glow. The alpha has to reach zero on its
	   own at the outer edge; anything that ends while still opaque gets cut by
	   the element bounds and reads as a drawn line. */
	-webkit-mask-image: radial-gradient(closest-side, #000 62%, rgba(0,0,0,0.78) 80%, transparent 100%);
	        mask-image: radial-gradient(closest-side, #000 62%, rgba(0,0,0,0.78) 80%, transparent 100%);
	transform:
		translate(-50%, -50%)
		translateY(calc(var(--scroll, 0px) * 0.38))
		translate(calc(var(--px) * -2.2%), calc(var(--py) * -2.2%));
}
.cqj-orb-glow::before {
	content: '';
	position: absolute; inset: 0;
	border-radius: 50%;
	/* STATIC — deliberately not hero-glow's spinning conic.

	   Only ~72° of this sphere's rim is ever on screen (the limb runs from
	   about 171° to 243°, measured as conic angles). Rotating a ramp through
	   a window that narrow means the visible arc is only ever showing one or
	   two stops, so any dim stop in the ramp becomes a moment where the glow
	   visibly drops out and then returns. hero-glow avoids this because its
	   sphere is centred and vast — most of its rim is on screen at once, so
	   the ramp reads as a gradient rather than as a sequence.

	   Fixing that by tuning stop luminance got the swing down but never to
	   zero, so the requirement here is met structurally instead: the stops are
	   pinned to the angles they need to appear at, and nothing moves. Every
	   point of the visible limb carries a saturated colour at all times, by
	   construction rather than by timing.

	   Stops are positioned in absolute conic degrees, so they are tied to the
	   geometry above — if --orb-x/y/d change enough to move the visible arc,
	   these need revisiting. */
	background: conic-gradient(from 0deg,
		rgb(var(--rim-2)) 120deg,   /* off-limb, hidden behind the sphere      */
		rgb(var(--rim-3)) 180deg,   /* violet — bottom of the limb             */
		rgb(var(--rim-2)) 212deg,   /* blue   — through the middle             */
		rgb(var(--rim-1)) 245deg,   /* cyan   — top of the limb, by the title  */
		rgb(var(--rim-2)) 300deg);  /* off-limb                                */
}

/* The sphere. Highlight sits at its lower-left because that is the quadrant
   on show, and the gradient is given an explicit 58% extent so it actually
   reaches the site navy inside the disc — a default `farthest-corner` circle
   on a box this size never completes the fade, leaving the whole sphere a
   visibly lighter mass with a hard edge instead of one dissolving into the
   page. Parallaxes less than the halo, for depth. */
.cqj-orb {
	width: var(--orb-d);
	background: radial-gradient(ellipse 58% 58% at 30% 74%,
		#142559 0%, #0a1842 34%, #04103a 60%, #020b31 84%);
	box-shadow: inset 0 -2px 60px rgba(255,255,255,0.05);
	transform:
		translate(-50%, -50%)
		translateY(calc(var(--scroll, 0px) * 0.38))
		translate(calc(var(--px) * -1.1%), calc(var(--py) * -1.1%));
}


/* Below ~1500px the 60rem copy column and a visible limb no longer both fit
   across the hero, so the sphere sinks: its centre drops further under the
   fold and the limb becomes a bottom-right corner mass, passing beneath the
   text block rather than through it. */
@media (max-width: 1500px) {
	.cqj-orb-stage { --orb-x: 116%; --orb-y: -58%; --orb-d: 150%; }
}
@media (max-width: 900px) {
	.cqj-orb-stage { --orb-x: 100%; --orb-y: -42%; --orb-d: 186%; }
	.cqj-orb-glow  { filter: blur(40px); }
}


.cqj-breadcrumb {
	display: flex; align-items: center; gap: 9px;
	font-size: 0.82rem; color: rgba(255,255,255,0.4);
	margin-bottom: 40px;
}
.cqj-breadcrumb a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
.cqj-breadcrumb a:hover { color: #fff; }
.cqj-breadcrumb span[aria-hidden] { opacity: 0.4; }

.cqj-hero-main { max-width: 60rem; }

.cqj-title {
	font-size: clamp(2.6rem, 6vw, 5rem);
	color: #fff;
	margin: 0 0 26px;
	/* display-heading treatment — matches .cqh-title in cubiq-hero-glow */
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -.032em;
}

.cqj-lead {
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.6;
	color: rgba(255,255,255,0.66);
	max-width: 46ch;
	margin: 0 0 30px;
}

/* Spec chips */
.cqj-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.cqj-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 16px 9px 14px;
	border-radius: 999px;
	font-size: 0.9rem; font-weight: 500;
	color: rgba(255,255,255,0.82);
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.11);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.cqj-chip svg { width: 17px; height: 17px; color: rgba(120,200,240,0.9); flex-shrink: 0; }
.cqj-chip-accent {
	color: #cdeff5;
	border-color: rgba(79,214,241,0.4);
	background: rgba(79,214,241,0.1);
}
.cqj-chip-accent svg { color: #7fe1f2; }

.cqj-hero-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cqj-posted {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.85rem; color: rgba(255,255,255,0.42);
}
.cqj-posted svg { width: 16px; height: 16px; opacity: 0.7; }

/* ── Body layout ─────────────────────────────────────────── */
.cqj-body {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 72px;
	padding: 40px 0 96px;
	position: relative; /* anchor for parked rail card */
}

/* ── Rail ────────────────────────────────────────────────── */
.cqj-rail { align-self: start; }

.cqj-rail-sticky {
	/* position:fixed applied by JS — body overflow-y:auto prevents CSS sticky */
}

/* Consultant card — prominent standalone card below facts */
.cqj-rlc {
	background: rgba(8,18,58,0.58);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	border: 1px solid rgba(255,255,255,0.09);
	border-radius: 20px;
	overflow: hidden;
	margin-top: 16px;
}
.cqj-rlc-photo {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.cqj-rlc-photo img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.cqj-rlc-body {
	padding: 20px 20px 22px;
}
.cqj-rlc-label {
	font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(255,255,255,0.35); margin: 0 0 6px;
}
.cqj-rlc-name {
	font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0 0 2px;
	line-height: 1.2;
}
.cqj-rlc-role {
	font-size: 0.8rem; color: rgba(255,255,255,0.45); margin: 0 0 16px;
}
.cqj-rlc-links {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 10px;
}
.cqj-rlc-link {
	display: flex; align-items: center; gap: 10px;
	font-size: 0.82rem; color: rgba(255,255,255,0.65);
	text-decoration: none;
	transition: color 0.2s ease;
	word-break: break-all;
}
.cqj-rlc-link:hover { color: #4fd6f1; }
.cqj-rlc-link svg {
	width: 15px; height: 15px; flex-shrink: 0;
	opacity: 0.6;
}

/* ── Article ─────────────────────────────────────────────── */
.cqj-article { min-width: 0; }
.cqj-anchor { display: block; position: relative; top: -110px; visibility: hidden; }
.cqj-wyg { max-width: 760px; }

.cqj-wyg p {
	font-size: 1.075rem; line-height: 1.85;
	color: rgba(255,255,255,0.74); margin: 0 0 1.4em;
}
.cqj-wyg > p:first-of-type {
	font-size: 1.2rem; line-height: 1.7; color: rgba(255,255,255,0.86);
}

/* Section headings promoted from <strong> labels */
.cqj-wyg h2.cqj-sec {
	font-size: 1.55rem; font-weight: 400; color: #fff;
	line-height: 1.2; letter-spacing: -0.02em;
	margin: 2.6em 0 0.9em;
	padding-top: 0.4em;
}
.cqj-wyg h2.cqj-sec::before {
	content: ''; display: block;
	width: 40px; height: 3px; border-radius: 3px;
	background: var(--grad);
	margin-bottom: 20px;
}
.cqj-wyg h3 { font-size: 1.2rem; font-weight: 600; color: rgba(255,255,255,0.92); margin: 2em 0 0.6em; }

.cqj-wyg strong { color: #fff; font-weight: 600; }
.cqj-wyg em { color: rgba(255,255,255,0.82); }
.cqj-wyg a { color: #6fd0ea; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(111,208,234,0.4); transition: color 0.2s, text-decoration-color 0.2s; }
.cqj-wyg a:hover { color: #9fe4f6; text-decoration-color: rgba(159,228,246,0.7); }

/* Checklist items */
.cqj-wyg ul { list-style: none; margin: 0 0 1.6em; padding: 0; }
.cqj-wyg ul li {
	position: relative;
	padding: 3px 0 3px 28px;
	margin-bottom: 0.7em;
	font-size: 1.04rem; line-height: 1.65;
	color: rgba(255,255,255,0.76);
}
.cqj-wyg ul li::before {
	content: '';
	/* centre on the first line box: padding-top + (line-height − icon) / 2 */
	position: absolute; left: 0; top: calc(3px + (1.04rem * 1.65 - 15px) / 2);
	width: 15px; height: 15px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%237fe1f2' d='M11,6 L42,6 L42,37 L32,37 L32,23 L13,42 L6,35 L25,16 L11,16 Z'/%3E%3C/svg%3E");
	background-size: contain; background-position: center; background-repeat: no-repeat;
}
.cqj-wyg ol { margin: 0 0 1.6em; padding-left: 1.4em; font-size: 1.04rem; line-height: 1.75; color: rgba(255,255,255,0.76); }
.cqj-wyg ol li { margin-bottom: 0.5em; }

.cqj-wyg blockquote {
	margin: 2em 0; padding: 20px 26px;
	border-left: 3px solid #4fd6f1;
	background: rgba(79,214,241,0.07);
	border-radius: 0 14px 14px 0;
}
.cqj-wyg blockquote p { font-size: 1.12rem; font-style: italic; color: rgba(255,255,255,0.72); margin: 0; }
.cqj-wyg hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 2.6em 0; }

/* ── Apply panel — the shared encasing ───────────────────── */
.cqj-apply {
	position: relative;
	margin-top: 72px;
	border-radius: clamp(16px, 1.6vw, 30px);
	background: radial-gradient(125% 115% at 50% 0%, #091747, #061231 44%, #030e2b);
	box-shadow: inset 0 0 70px -12px rgba(59,115,217,0.5), 0 40px 90px -50px rgba(0,0,0,0.9);
	overflow: hidden;
	isolation: isolate;
}
.cqj-apply-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
	-webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 66%);
	        mask-image: radial-gradient(120% 100% at 50% 0%, #000 0%, transparent 66%);
}
.cqj-apply-glow span {
	position: absolute; top: 50%; left: 50%;
	width: 150%; aspect-ratio: 1;
	transform: translate(-50%,-50%);
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent, rgba(79,214,241,0.16), transparent 30%, rgba(43,111,208,0.18), transparent 62%);
	animation: cqj-spin 26s linear infinite;
}
.cqj-apply-glow span:last-child { animation-direction: reverse; animation-duration: 34s; opacity: 0.7; }
@keyframes cqj-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }

.cqj-apply-content { position: relative; z-index: 1; padding: clamp(30px, 5vw, 64px); }
.cqj-apply-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #7fe1f2; margin: 0 0 12px; }
.cqj-apply-title {
	font-size: clamp(1.9rem, 3.4vw, 2.9rem); color: #fff; margin: 0 0 14px;
	font-weight: 300; line-height: 1.06; letter-spacing: -.032em;
}
.cqj-apply-sub { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 52ch; margin: 0 0 34px; }

/* CF7 form on-brand overrides */
.cqj-form .wpcf7-form-control-wrap input,
.cqj-form .wpcf7-form-control-wrap textarea,
.cqj-form .wpcf7-form-control-wrap select {
	background: rgba(255,255,255,0.06) !important;
	border: 1px solid rgba(255,255,255,0.14) !important;
	border-radius: 12px !important;
	color: #fff !important;
	font-family: "Open Sauce One", sans-serif !important;
	/* Without these the CF7 defaults render each field at ~180px and below 16px:
	   the fields don't fill the apply panel, and on iOS focusing a sub-16px input
	   zooms the whole page and leaves it zoomed. 16px is the threshold that
	   suppresses that zoom. */
	width: 100% !important;
	font-size: 16px !important;
	padding: 12px 14px !important;
	transition: border-color 0.25s ease, background 0.25s ease !important;
}
.cqj-form .wpcf7-form-control-wrap input:focus,
.cqj-form .wpcf7-form-control-wrap textarea:focus {
	border-color: rgba(79,214,241,0.45) !important;
	background: rgba(79,214,241,0.07) !important;
	outline: none !important;
}
.cqj-form .wpcf7-submit {
	background: var(--grad) !important;
	color: #041027 !important;
	border: none !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	font-family: "Open Sauce One", sans-serif !important;
	cursor: pointer !important;
	box-shadow: 0 10px 30px -10px rgba(79,214,241,0.55) !important;
	transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), filter 0.3s !important;
}
.cqj-form .wpcf7-submit:hover { transform: translateY(-3px) !important; filter: saturate(1.1) !important; }

/* ── Share bar ───────────────────────────────────────────── */
.cqj-share-bar {
	display: flex; align-items: center; gap: 20px;
	padding: 32px 0;
	border-top: 1px solid rgba(255,255,255,0.07);
	flex-wrap: wrap;
}
.cqj-share-label { font-size: 0.9rem; color: rgba(255,255,255,0.45); margin: 0; }
.cqj-share-row { display: flex; gap: 10px; }
.cqj-share-btn {
	position: relative;
	width: 46px; height: 46px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.7);
	cursor: pointer; text-decoration: none;
	transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, color 0.3s, background 0.3s;
}
.cqj-share-btn svg { width: 19px; height: 19px; }
.cqj-share-btn:hover { transform: translateY(-4px); color: #fff; border-color: rgba(79,214,241,0.5); background: rgba(79,214,241,0.12); }
.cqj-copied {
	position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
	font-size: 0.72rem; color: #7fe1f2; background: rgba(4,12,42,0.95); padding: 4px 10px; border-radius: 8px;
	border: 1px solid rgba(79,214,241,0.3); white-space: nowrap;
	opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.cqj-copy.is-copied .cqj-copied { opacity: 1; }

/* ── Related roles ───────────────────────────────────────── */
.cqj-related { padding: 60px 0 110px; border-top: 1px solid rgba(255,255,255,0.07); }
.cqj-related-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 34px; flex-wrap: wrap; }
.cqj-related-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: #fff; margin: 0; font-weight: 300; line-height: 1.1; letter-spacing: -.032em; }
.cqj-related-all { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.2s; }
.cqj-related-all svg { width: 17px; height: 17px; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.cqj-related-all:hover { color: #fff; }
.cqj-related-all:hover svg { transform: translateX(4px); }

.cqj-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cqj-rcard {
	position: relative; display: flex; flex-direction: column;
	padding: 26px 24px; min-height: 210px;
	background: rgba(8,18,58,0.5);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 20px;
	text-decoration: none; overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), border-color 0.3s, box-shadow 0.4s;
}
.cqj-rcard-sheen {
	position: absolute; inset: 0; z-index: 0; opacity: 0;
	background: radial-gradient(90% 70% at 50% 0%, rgba(79,214,241,0.12), transparent 70%);
	transition: opacity 0.4s;
}
.cqj-rcard:hover { transform: translateY(-6px); border-color: rgba(79,214,241,0.35); box-shadow: 0 30px 60px -30px rgba(79,214,241,0.35), 0 8px 24px rgba(0,0,0,0.4); }
.cqj-rcard:hover .cqj-rcard-sheen { opacity: 1; }
.cqj-rcard-title { position: relative; z-index: 1; font-size: 1.15rem; font-weight: 600; color: #fff; margin: 0 0 10px; line-height: 1.3; letter-spacing: -0.01em; }
.cqj-rcard-sum { position: relative; z-index: 1; font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.55); margin: 0 0 20px; flex: 1; }
.cqj-rcard-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.cqj-rcard-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.cqj-rcard-tags span {
	font-size: 0.74rem; font-weight: 500; color: rgba(255,255,255,0.6);
	padding: 4px 11px; border-radius: 999px;
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
}
.cqj-rcard-arrow {
	width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.7);
	transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), background 0.3s, color 0.3s;
}
.cqj-rcard-arrow svg { width: 16px; height: 16px; }
.cqj-rcard:hover .cqj-rcard-arrow { background: var(--grad); color: #041027; transform: translateX(3px); }

/* ── Reveal on scroll ────────────────────────────────────── */
.cqj-reveal { transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.cqj-reveal.is-hidden { opacity: 0; transform: translateY(26px); }

@media (prefers-reduced-motion: reduce) {
	.cqj-reveal, .cqj-reveal.is-hidden { opacity: 1 !important; transform: none !important; }
	.cqj-apply-glow span { animation: none !important; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1080px) {
	.cqj-body { grid-template-columns: 1fr; gap: 0; }
	.cqj-rail-sticky { position: static; margin-bottom: 44px; }
	.cqj-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
	.cqj-hero { padding: 138px 0 44px; }
	.cqj-breadcrumb { margin-bottom: 28px; }
	.cqj-body { padding: 24px 0 72px; }
	.cqj-share-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
	.cqj-related-grid { grid-template-columns: 1fr; }
	.cqj-wyg > p:first-of-type { font-size: 1.1rem; }
}