/* Premium Team Cards (JustNew): 3 styles - portrait, overlay (immersive), arch */
.hpl-wrap {
	--hpl-accent: #229F05; --hpl-navy: #0D2E5C; --hpl-cols: 4; --hpl-gap: 28px; --hpl-radius: 14px; --hpl-ratio: 4 / 5;
	--hpl-focus: center 18%; --hpl-sb: 44px; --hpl-shadow-c: rgba(13,46,92,.30);
	width: 100%; box-sizing: border-box;
}
.hpl-wrap *, .hpl-wrap *::before, .hpl-wrap *::after { box-sizing: border-box; }
.hpl-grid { display: grid; grid-template-columns: repeat(var(--hpl-cols), minmax(0, 1fr)); gap: var(--hpl-gap); align-items: stretch; }
.hpl-card { position: relative; min-width: 0; margin: 0; }

/* ---------- heading ---------- */
.hpl-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 44px; }
.hpl-head-center { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; gap: 14px; }
.hpl-head-center .hpl-intro { max-width: 640px; }
.hpl-eyebrow { display: block; margin: 0 0 10px; font-size: 14px; font-style: italic; font-weight: 600; color: var(--hpl-accent); }
.hpl-heading { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--hpl-navy); }
.hpl-intro { margin: 0; font-size: 15px; line-height: 1.7; color: #4b5a70; }

/* ---------- shared photo bits ---------- */
.hpl-photo { position: relative; }
.hpl-photo-clip { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; }
.hpl-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hpl-focus); max-width: none; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.hpl-initials {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: clamp(40px, 6vw, 72px); font-weight: 700; letter-spacing: .04em; color: #fff;
	background: linear-gradient(145deg, var(--hpl-navy), color-mix(in srgb, var(--hpl-navy) 70%, #000));
}
.hpl-tone-b .hpl-initials { background: linear-gradient(145deg, var(--hpl-accent), color-mix(in srgb, var(--hpl-accent) 70%, #000)); }

.hpl-name { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 700; color: var(--hpl-navy); }
.hpl-role { display: block; margin-top: 6px; font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hpl-accent); }
.hpl-bio { margin: 0; font-size: 14px; line-height: 1.65; color: #4b5a70; }
.hpl-social { display: inline-flex; gap: 8px; margin-top: 14px; }
.hpl-social a {
	display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
	border: 1px solid currentColor; color: var(--hpl-navy); text-decoration: none; transition: background .25s, color .25s, border-color .25s;
}
.hpl-social a:hover, .hpl-social a:focus { background: var(--hpl-accent); border-color: var(--hpl-accent); color: #fff; }
.hpl-social svg { width: 14px; height: 14px; }
.hpl-reveal { display: grid; grid-template-rows: 1fr; }
.hpl-reveal-in { overflow: hidden; min-height: 0; }

/* ==================== 1. PORTRAIT ==================== */
.hpl-portrait .hpl-card {
	display: flex; flex-direction: column; background: #fff; border-radius: var(--hpl-radius); overflow: hidden;
	box-shadow: 0 calc(var(--hpl-sb) * .38) var(--hpl-sb) calc(var(--hpl-sb) * -.3) var(--hpl-shadow-c);
	transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.hpl-portrait .hpl-photo { aspect-ratio: var(--hpl-ratio); flex: none; }
.hpl-portrait .hpl-photo-bg { display: none; }
.hpl-portrait .hpl-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1 1 auto; }
.hpl-portrait .hpl-reveal-in { padding-top: 12px; }
.hpl-portrait .hpl-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--hpl-accent); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.hpl-portrait .hpl-card:hover { transform: translateY(-8px); box-shadow: 0 calc(var(--hpl-sb) * .7) calc(var(--hpl-sb) * 1.4) calc(var(--hpl-sb) * -.33) var(--hpl-shadow-c); }
.hpl-portrait .hpl-card:hover::after { width: 100%; }
.hpl-portrait .hpl-card:hover .hpl-img { transform: scale(1.06); }

/* ==================== 2. IMMERSIVE (overlay) ==================== */
.hpl-overlay .hpl-card {
	background: var(--hpl-navy); border-radius: var(--hpl-radius); overflow: hidden; aspect-ratio: var(--hpl-ratio); cursor: pointer; outline: 0;
	box-shadow: 0 calc(var(--hpl-sb) * .38) var(--hpl-sb) calc(var(--hpl-sb) * -.3) var(--hpl-shadow-c);
	transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.hpl-overlay .hpl-photo { position: absolute; inset: 0; }
.hpl-overlay .hpl-photo-bg { display: none; }
.hpl-overlay .hpl-card::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .5s ease;
	background: linear-gradient(to top, color-mix(in srgb, var(--hpl-navy) 96%, transparent) 0%, color-mix(in srgb, var(--hpl-navy) 55%, transparent) 38%, transparent 68%);
}
.hpl-overlay .hpl-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; z-index: 3; background: var(--hpl-accent); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.hpl-overlay .hpl-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 24px 24px; display: flex; flex-direction: column; }
.hpl-overlay .hpl-name, .hpl-overlay .hpl-bio { color: #fff; }
.hpl-overlay .hpl-bio { color: rgba(255,255,255,.9); font-size: 13.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }
.hpl-overlay .hpl-role { color: #5AD636; }
.hpl-overlay .hpl-reveal { grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2,.7,.2,1); }
.hpl-overlay .hpl-reveal-in { padding-top: 0; opacity: 0; transition: opacity .4s ease .08s, padding .55s ease; }
.hpl-overlay .hpl-social a { color: #fff; }
.hpl-overlay .hpl-card:hover, .hpl-overlay .hpl-card:focus-within, .hpl-overlay .hpl-card.is-open { transform: translateY(-6px); box-shadow: 0 calc(var(--hpl-sb) * .7) calc(var(--hpl-sb) * 1.4) calc(var(--hpl-sb) * -.33) var(--hpl-shadow-c); }
.hpl-overlay .hpl-card:hover::after, .hpl-overlay .hpl-card:focus::after, .hpl-overlay .hpl-card.is-open::after { width: 100%; }
.hpl-overlay .hpl-card:hover .hpl-reveal, .hpl-overlay .hpl-card:focus .hpl-reveal, .hpl-overlay .hpl-card:focus-within .hpl-reveal, .hpl-overlay .hpl-card.is-open .hpl-reveal { grid-template-rows: 1fr; }
.hpl-overlay .hpl-card:hover .hpl-reveal-in, .hpl-overlay .hpl-card:focus .hpl-reveal-in, .hpl-overlay .hpl-card:focus-within .hpl-reveal-in, .hpl-overlay .hpl-card.is-open .hpl-reveal-in { opacity: 1; padding-top: 12px; }
.hpl-overlay .hpl-card:hover .hpl-img, .hpl-overlay .hpl-card.is-open .hpl-img { transform: scale(1.07); }
.hpl-overlay .hpl-card:hover::before, .hpl-overlay .hpl-card.is-open::before { background: linear-gradient(to top, color-mix(in srgb, var(--hpl-navy) 98%, transparent) 0%, color-mix(in srgb, var(--hpl-navy) 90%, transparent) 55%, color-mix(in srgb, var(--hpl-navy) 35%, transparent) 100%); }

/* ==================== 3. ARCH ==================== */
.hpl-arch .hpl-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hpl-arch .hpl-photo { width: 100%; aspect-ratio: var(--hpl-ratio); flex: none; }
.hpl-arch .hpl-photo-bg {
	position: absolute; inset: 14px -14px -14px 14px; border-radius: 999px 999px var(--hpl-radius) var(--hpl-radius);
	background: var(--hpl-accent); transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.hpl-arch .hpl-tone-b .hpl-photo-bg { background: var(--hpl-navy); }
.hpl-arch .hpl-photo-clip {
	border-radius: 999px 999px var(--hpl-radius) var(--hpl-radius); background: #dfe7f0; border: 5px solid #fff;
	box-shadow: 0 calc(var(--hpl-sb) * .38) var(--hpl-sb) calc(var(--hpl-sb) * -.3) var(--hpl-shadow-c);
	transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.hpl-arch .hpl-photo-clip .hpl-img, .hpl-arch .hpl-photo-clip .hpl-initials { inset: 0; }
.hpl-arch .hpl-body { padding: 30px 8px 0; display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; width: 100%; }
.hpl-arch .hpl-reveal-in { padding-top: 12px; }
.hpl-arch .hpl-role { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(34,159,5,.1); }
.hpl-arch .hpl-card:hover .hpl-photo-clip { transform: translate(-6px, -6px); }
.hpl-arch .hpl-card:hover .hpl-photo-bg { transform: translate(6px, 6px); }
.hpl-arch .hpl-card:hover .hpl-img { transform: scale(1.05); }
.hpl-arch .hpl-card { padding: 0 14px 0 0; } /* room for the offset block */

/* ---------- scroll-in ---------- */
.hpl-wrap[data-animate="yes"] .hpl-card { opacity: 0; translate: 0 30px; transition-property: opacity, translate, transform, box-shadow; }
.hpl-wrap[data-animate="yes"] .hpl-card.is-in { opacity: 1; translate: 0 0; }
.hpl-wrap[data-animate="yes"] .hpl-card { transition-delay: calc(var(--hpl-i, 0) * 90ms), calc(var(--hpl-i, 0) * 90ms), 0ms, 0ms; transition-duration: .8s, .8s, .45s, .45s; }
.hpl-wrap[data-animate="yes"] .hpl-card.is-in:hover { transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
	.hpl-wrap[data-animate="yes"] .hpl-card { opacity: 1; translate: 0 0; transition: none; }
	.hpl-img, .hpl-card, .hpl-reveal, .hpl-photo-clip, .hpl-photo-bg { transition: none !important; }
}

/* ---------- tablet / phone ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
	.hpl-heading { font-size: 27px; }
	.hpl-head { gap: 28px; }
}
@media (max-width: 767px) {
	.hpl-head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 30px; }
	.hpl-heading { font-size: 26px; }
	.hpl-overlay .hpl-card { aspect-ratio: 4 / 5; }
}