/* ==========================================================================
   HQDM — team member profile: portrait in a lit glass frame beside role, name, LinkedIn and the opening
   section; the bio as labelled rows (heading left, text right) instead of a blog column; photo strip.
   ========================================================================== */
.hq-profile { display: grid; grid-template-columns: minmax(260px, 440px) minmax(0, 1fr); gap: clamp(40px, 7vw, 104px); align-items: center; padding-top: var(--hero-top); padding-bottom: var(--section); isolation: isolate; }
.hq-profile > * { max-width: none; margin: 0 !important; }
.hq-profile::before { content: ""; position: absolute; inset: 0 0 auto; height: 90%; background: radial-gradient(36% 56% at 24% 34%, rgba(113, 61, 223, .3), transparent 72%), radial-gradient(40% 50% at 78% 10%, rgba(151, 71, 255, .14), transparent 70%); z-index: -1; pointer-events: none; }

/* portrait: glass frame with a lit rim, a violet backlight and the old dot grid behind it */
.hq-profile__media { position: relative; font-size: 1rem; padding: 10px; border-radius: calc(var(--r-2) + 10px); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow), 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 120px -40px rgba(151, 71, 255, .55); }
.hq-profile__media::before { content: ""; position: absolute; inset: -18% -22%; background: url("../../img/dots.webp") center / contain no-repeat; opacity: .16; z-index: -1; pointer-events: none; }
.hq-profile__media::after { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: var(--glass-rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.hq-profile__photo { margin: 0; }
.hq-profile__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-2); }

/* head: role pill above the name (visual order only), LinkedIn, then the opening section as a lede */
.hq-profile__head { display: flex; flex-direction: column; align-items: flex-start; }
.hq-profile__head > * { margin: 0 !important; }
.hq-profile__head .hq-title { order: 1; font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.028em; max-width: 12ch; }
.hq-profile__role {
	order: 0;
	margin-bottom: var(--sp-5) !important;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 7px 14px 7px 12px;
	font-size: var(--fs-label);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-text);
	border-radius: var(--r-pill);
	background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025)), rgba(28, 16, 56, .35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 -8px 16px -10px rgba(151, 71, 255, .5);
}
.hq-profile__role::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c4adff; box-shadow: 0 0 0 3px rgba(151, 71, 255, .22), 0 0 10px 1px rgba(151, 71, 255, .9); }
.hq-profile__social { order: 2; margin-top: var(--sp-6) !important; }
.hq-profile__linkedin {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 44px;
	padding: 0 var(--sp-5) 0 var(--sp-4);
	border-radius: var(--r-pill);
	color: var(--c-text-strong);
	font-size: var(--fs-ui);
	font-weight: 500;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px rgba(221, 218, 231, .3);
	transition: background-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
@media (hover: hover) { .hq-profile__linkedin:hover { color: var(--c-text-strong); background-color: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(221, 218, 231, .6); } }
.hq-profile__intro { order: 3; margin-top: var(--sp-8) !important; padding-top: var(--sp-6); border-top: 1px solid var(--c-line); max-width: 60ch; }
.hq-profile__intro > * { margin: 0 !important; }
.hq-profile__intro h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.012em; }
.hq-profile__intro p { margin-top: var(--sp-4) !important; font-size: var(--fs-lead); line-height: 1.65; color: var(--c-text); }

/* bio: labelled rows on hairlines (heading sticks while its text scrolls) */
.hq-profile-bio { padding-top: 0; }
.hq-bio { border-top: 1px solid var(--c-line); }
.hq-bio-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-4) clamp(32px, 6vw, 96px); padding-block: var(--sp-7); border-bottom: 1px solid var(--c-line); }
.hq-bio-row > * { margin: 0 !important; }
.hq-bio-row__label h3 { position: sticky; top: 112px; margin: 0; font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.012em; color: var(--c-text-strong); max-width: 16ch; }
.hq-bio-row__body { font-size: var(--fs-prose); line-height: 1.75; color: var(--c-text); max-width: var(--measure-prose); }
.hq-bio-row__body p:last-child { margin-bottom: 0; }
.hq-profile__gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-8) !important; font-size: 1rem; }
.hq-profile__gallery figure { margin: 0; padding: 6px; border-radius: calc(var(--r-2) + 6px); background: var(--glass-bg); box-shadow: var(--glass-shadow); }
.hq-profile__gallery img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-2); }

@media (max-width: 900px) {
	.hq-profile { grid-template-columns: 1fr; gap: var(--sp-7); }
	.hq-profile__media { max-width: 320px; }
	.hq-bio-row { grid-template-columns: 1fr; padding-block: var(--sp-6); }
	.hq-bio-row__label h3 { position: static; max-width: none; }
}
@media (max-width: 600px) { .hq-profile__gallery { grid-template-columns: 1fr 1fr; } .hq-profile__gallery figure:last-child { grid-column: 1 / -1; } .hq-profile__gallery figure:last-child img { aspect-ratio: 16 / 10; } }