.panda-hero,
.panda-hero * { box-sizing: border-box; }

.panda-hero {
	position: relative;
	isolation: isolate;
	width: 100%;
	padding: 0;
	overflow: hidden;
	background: var(--panda-black);
	font-family: var(--panda-font-body);
}

.panda-hero__frame {
	position: relative;
	width: min(var(--panda-grid-max, 1400px), calc(100% - (var(--panda-grid-gutter, 40px) * 2)));
	height: min(850px, 92vh);
	min-height: 680px;
	margin-inline: auto;
	overflow: hidden;
	background: #02040a;
	box-shadow: 0 28px 80px rgba(0,0,0,.22);
}

.panda-hero__slides,
.panda-hero__slide {
	position: absolute;
	inset: 0;
}

.panda-hero__slide {
	z-index: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.panda-hero__slide.is-active,
.panda-hero__slide.is-entering,
.panda-hero__slide.is-exiting {
	visibility: visible;
}

.panda-hero__slide.is-active,
.panda-hero__slide.is-entering {
	z-index: 3;
	opacity: 1;
	pointer-events: auto;
}

.panda-hero__slide.is-exiting {
	z-index: 2;
	opacity: 1;
}

.panda-hero__panel {
	position: relative;
	width: 100%;
	height: 100%;
	min-width: 0;
	overflow: hidden;
	background: var(--panda-hero-panel-color, #02040a);
	transform-origin: center;
	will-change: transform, opacity, clip-path;
}

.panda-hero__panel--person {
	background: #02040a;
}

.panda-hero__panel--person::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 55% 46%, rgba(0,174,239,.08), transparent 43%),
		linear-gradient(90deg, rgba(0,0,0,.14), transparent 58%);
}

.panda-hero__panel--specialty::after,
.panda-hero__panel--context::after {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 52%, rgba(2,4,10,.08));
}

.panda-hero__visual {
	position: absolute;
	inset: -1.5%;
	width: 103%;
	height: 103%;
	overflow: hidden;
	will-change: transform;
}

.panda-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.panda-hero__portrait { object-position: center bottom; }

.panda-hero__person-meta {
	position: absolute;
	z-index: 12;
	top: clamp(26px, 5vh, 48px);
	left: clamp(24px, 3vw, 42px);
	color: #fff;
}

.panda-hero__person-meta strong {
	display: block;
	font-size: clamp(12px, 1vw, 18px);
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.panda-hero__person-meta span {
	display: block;
	margin-top: 7px;
	color: rgba(255,255,255,.6);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
}

.panda-hero__case {
	position: absolute;
	z-index: 15;
	left: clamp(20px, 3vw, 42px);
	bottom: clamp(28px, 5vh, 48px);
	width: min(360px, calc(100% - 48px));
	padding: 21px 24px;
	color: #11131a;
	background: rgba(255,255,255,.95);
	border: 1px solid rgba(255,255,255,.78);
	box-shadow: 0 18px 46px rgba(0,0,0,.2);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.panda-hero__case::after {
	content: "";
	position: absolute;
	right: 24px;
	bottom: -12px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255,255,255,.78);
}

.panda-hero__case > strong {
	display: block;
	font-size: clamp(14px,1.05vw,19px);
	font-weight: 850;
	line-height: 1.35;
}

.panda-hero__case p {
	margin: 6px 0 17px;
	font-size: clamp(13px,.95vw,16px);
	line-height: 1.48;
}

.panda-hero__case-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .03em;
	text-decoration: none;
	text-transform: uppercase;
}

.panda-hero__case-link span { transition: transform .3s var(--panda-ease); }
.panda-hero__case-link:hover span { transform: translateX(6px); }

.panda-hero__shine {
	position: absolute;
	z-index: 5;
	top: -20%;
	left: -35%;
	width: 25%;
	height: 145%;
	pointer-events: none;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
	transform: rotate(10deg);
	animation: pandaHeroShine 9s 2.5s ease-in-out infinite;
}

.panda-hero__overlay {
	position: absolute;
	z-index: 40;
	left: 66.66%;
	bottom: -3%;
	width: clamp(135px, 13.2vw, 235px);
	max-height: 54%;
	height: auto;
	object-fit: contain;
	pointer-events: none;
	user-select: none;
	filter: drop-shadow(0 22px 34px rgba(0,0,0,.3));
	transform: translateX(-50%);
}

/* Staggered panel transitions: left -> center -> right */
.panda-hero__slide.is-entering .panda-hero__panel,
.panda-hero__slide.is-active.is-initial .panda-hero__panel {
	animation: pandaHeroPanelIn .82s var(--panda-ease) both;
}
.panda-hero__slide.is-entering .panda-hero__panel:nth-child(1),
.panda-hero__slide.is-active.is-initial .panda-hero__panel:nth-child(1) { animation-delay: 0ms; }
.panda-hero__slide.is-entering .panda-hero__panel:nth-child(2),
.panda-hero__slide.is-active.is-initial .panda-hero__panel:nth-child(2) { animation-delay: var(--panda-hero-stagger,170ms); }
.panda-hero__slide.is-entering .panda-hero__panel:nth-child(3),
.panda-hero__slide.is-active.is-initial .panda-hero__panel:nth-child(3) { animation-delay: calc(var(--panda-hero-stagger,170ms) * 2); }

.panda-hero__slide.is-exiting .panda-hero__panel {
	animation: pandaHeroPanelOut .58s var(--panda-ease) both;
}
.panda-hero__slide.is-exiting .panda-hero__panel:nth-child(1) { animation-delay: 0ms; }
.panda-hero__slide.is-exiting .panda-hero__panel:nth-child(2) { animation-delay: calc(var(--panda-hero-stagger,170ms) * .55); }
.panda-hero__slide.is-exiting .panda-hero__panel:nth-child(3) { animation-delay: calc(var(--panda-hero-stagger,170ms) * 1.1); }

.panda-hero__slide.is-entering .panda-hero__person-meta,
.panda-hero__slide.is-entering .panda-hero__case {
	animation: pandaHeroContentIn .7s .28s var(--panda-ease) both;
}

.panda-hero__slide.is-entering .panda-hero__overlay {
	animation: pandaHeroOverlayIn .85s calc(var(--panda-hero-stagger,170ms) * 2.2) var(--panda-ease) both;
}

.panda-hero__nav {
	position: absolute;
	z-index: 80;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 999px;
	background: rgba(2,4,10,.44);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.panda-hero__arrow {
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: transform .28s var(--panda-ease), background .28s ease, border-color .28s ease;
}

.panda-hero__arrow:hover {
	transform: scale(1.08);
	background: var(--panda-pink);
	border-color: var(--panda-pink);
}

.panda-hero__count {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 70px;
	justify-content: center;
	color: rgba(255,255,255,.58);
	font-size: 9px;
	letter-spacing: .1em;
}

.panda-hero__count b { color: #fff; font-size: 11px; }
.panda-hero__count i { width: 20px; height: 1px; background: rgba(255,255,255,.35); }

.panda-hero__scroll {
	position: absolute;
	z-index: 82;
	right: 15px;
	bottom: 24px;
	color: rgba(255,255,255,.78);
	font-size: 9px;
	letter-spacing: .18em;
	text-decoration: none;
	text-transform: uppercase;
	writing-mode: vertical-rl;
}

.panda-hero__scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 44px;
	margin: 12px auto 0;
	background: linear-gradient(#fff, transparent);
	animation: pandaHeroScrollLine 1.8s ease-in-out infinite;
}

@keyframes pandaHeroPanelIn {
	0% { opacity: 0; transform: translateY(80px) scale(.985); clip-path: inset(100% 0 0 0); }
	100% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0); }
}

@keyframes pandaHeroPanelOut {
	0% { opacity: 1; transform: translateY(0) scale(1); }
	100% { opacity: 0; transform: translateY(-45px) scale(.99); }
}

@keyframes pandaHeroContentIn {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes pandaHeroOverlayIn {
	from { opacity: 0; transform: translateX(-50%) translateY(55px) scale(.82); }
	to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes pandaHeroShine {
	0%,76% { transform: translateX(-120%) rotate(10deg); }
	100% { transform: translateX(650%) rotate(10deg); }
}

@keyframes pandaHeroScrollLine {
	0% { transform: scaleY(0); transform-origin: top; }
	50% { transform: scaleY(1); transform-origin: top; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (max-width: 1050px) {
	.panda-hero__frame {
		height: auto;
		min-height: 0;
	}
	.panda-hero__slides,
	.panda-hero__slide { position: relative; inset: auto; }
	.panda-hero__slide { display: none; grid-template-columns: 1fr; }
	.panda-hero__slide.is-active,
	.panda-hero__slide.is-entering { display: grid; }
	.panda-hero__panel { min-height: 58vh; }
	.panda-hero__panel--specialty,
	.panda-hero__panel--context { min-height: 46vh; }
	.panda-hero__overlay {
		left: auto;
		right: 4%;
		bottom: 42%;
		width: clamp(130px,26vw,215px);
		transform: none;
	}
	.panda-hero__slide.is-entering .panda-hero__overlay {
		animation: none;
	}
	.panda-hero__nav {
		position: sticky;
		left: auto;
		bottom: 14px;
		transform: none;
		width: max-content;
		margin: -58px auto 16px;
	}
}

@media (max-width: 767px) {
	.panda-hero__frame {
		width: calc(100% - (var(--panda-grid-gutter,17px) * 2));
	}
	.panda-hero__panel { min-height: 480px; }
	.panda-hero__panel--specialty,
	.panda-hero__panel--context { min-height: 330px; }
	.panda-hero__person-meta { top: 24px; left: 20px; }
	.panda-hero__case {
		left: 18px;
		bottom: 28px;
		width: calc(100% - 36px);
		padding: 22px 20px 24px;
	}
	.panda-hero__case > strong { line-height: 1.4; }
	.panda-hero__case p { margin: 8px 0 20px; line-height: 1.55; }
	.panda-hero__overlay { right: 1%; bottom: 39%; width: clamp(110px,32vw,160px); max-height: 46%; }
	.panda-hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.panda-hero__slide.is-entering .panda-hero__panel,
	.panda-hero__slide.is-exiting .panda-hero__panel,
	.panda-hero__person-meta,
	.panda-hero__case,
	.panda-hero__overlay,
	.panda-hero__shine,
	.panda-hero__scroll::after {
		animation: none !important;
	}
}


/* =========================================================
   v1.9.2 · FULL-WIDTH AMBIENT SIDE RAILS
   The content frame stays on the Panda Grid. The space outside the
   1400px frame is used as atmospheric design instead of dead black.
========================================================= */
.panda-hero::before,
.panda-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	width: max(0px, calc((100vw - var(--panda-grid-max, 1400px)) / 2));
	min-width: 0;
	pointer-events: none;
	opacity: .95;
}

.panda-hero::before {
	left: 0;
	background:
		radial-gradient(circle at 72% 36%, rgba(0,174,239,.18) 0 2px, transparent 3px),
		radial-gradient(circle at 72% 36%, transparent 0 58px, rgba(0,174,239,.16) 59px 60px, transparent 61px 103px, rgba(0,174,239,.09) 104px 105px, transparent 106px),
		radial-gradient(circle at 18% 72%, rgba(255,20,100,.14), transparent 34%),
		repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 58px),
		linear-gradient(90deg, #02040a 0%, #03101b 62%, #02040a 100%);
	-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 72%, transparent 100%);
	mask-image: linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 72%, transparent 100%);
	animation: pandaHeroAmbientLeft 12s ease-in-out infinite;
}

.panda-hero::after {
	right: 0;
	background:
		radial-gradient(circle at 28% 52%, rgba(255,20,100,.22) 0 2px, transparent 3px),
		radial-gradient(circle at 28% 52%, transparent 0 64px, rgba(255,20,100,.15) 65px 66px, transparent 67px 116px, rgba(0,174,239,.09) 117px 118px, transparent 119px),
		radial-gradient(circle at 82% 20%, rgba(0,174,239,.17), transparent 31%),
		repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 58px),
		linear-gradient(270deg, #02040a 0%, #07121f 62%, #02040a 100%);
	-webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 72%, transparent 100%);
	mask-image: linear-gradient(270deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 72%, transparent 100%);
	animation: pandaHeroAmbientRight 14s ease-in-out infinite;
}

.panda-hero__frame {
	z-index: 2;
	box-shadow:
		0 28px 80px rgba(0,0,0,.22),
		-34px 0 70px rgba(0,174,239,.035),
		34px 0 70px rgba(255,20,100,.035);
}

@keyframes pandaHeroAmbientLeft {
	0%, 100% { transform: translate3d(0,0,0); filter: brightness(1); }
	50% { transform: translate3d(5px,-7px,0); filter: brightness(1.08); }
}

@keyframes pandaHeroAmbientRight {
	0%, 100% { transform: translate3d(0,0,0); filter: brightness(1); }
	50% { transform: translate3d(-5px,7px,0); filter: brightness(1.07); }
}

/* On standard-width screens the grid gutters are intentional and should stay clean. */
@media (max-width: 1519px) {
	.panda-hero::before,
	.panda-hero::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.panda-hero::before,
	.panda-hero::after {
		animation: none !important;
	}
}


/* =========================================================
   v1.9.3 · FULL-BLEED MEDIA + PANDA GRID CONTENT
========================================================= */
.panda-hero {
	--panda-hero-content-width: min(var(--panda-grid-max, 1400px), calc(100% - (var(--panda-grid-gutter, 40px) * 2)));
}
.panda-hero__frame { width:100%; max-width:none; margin-inline:0; box-shadow:none; }
.panda-hero__slides,.panda-hero__slide { width:100%; }
.panda-hero__visual { inset:0; width:100%; height:100%; }
.panda-hero__image { width:100%; height:100%; object-fit:cover; }
.panda-hero__content-grid {
	position:absolute; z-index:55; top:0; bottom:0; left:50%;
	width:var(--panda-hero-content-width); transform:translateX(-50%); pointer-events:none;
}
.panda-hero__content-grid .panda-hero__person-meta { top:clamp(26px,5vh,48px); left:0; }
.panda-hero__content-grid .panda-hero__case { left:0; bottom:clamp(28px,5vh,48px); pointer-events:auto; }
.panda-hero__custom-html {
	position:absolute; z-index:4; inset:0; width:100%; height:100%; overflow:hidden;
	isolation:isolate; will-change:transform;
}
.panda-hero__custom-html > * { box-sizing:border-box; }
.panda-hero::before,.panda-hero::after { display:none !important; }
.panda-hero__scroll { right:max(var(--panda-grid-gutter,40px), calc((100vw - var(--panda-grid-max,1400px))/2)); }
@media (max-width:1050px) {
	.panda-hero__content-grid { position:absolute; top:0; bottom:auto; height:58vh; }
	.panda-hero__content-grid .panda-hero__person-meta { left:0; }
	.panda-hero__content-grid .panda-hero__case { left:0; bottom:24px; }
}
@media (max-width:767px) {
	.panda-hero__frame { width:100%; }
	.panda-hero__content-grid { width:calc(100% - (var(--panda-grid-gutter,17px)*2)); height:480px; }
	.panda-hero__content-grid .panda-hero__person-meta { top:24px; left:0; }
	.panda-hero__content-grid .panda-hero__case { left:0; bottom:22px; width:min(360px,100%); padding:18px 19px; }
}


/* =========================================================
   v1.9.4 · SIDE PHOTOS FULL COVER + PER-SLIDE FRAMING
========================================================= */
.panda-hero__panel--person,
.panda-hero__panel--context {
	background: #02040a;
}

.panda-hero__panel--person .panda-hero__visual,
.panda-hero__panel--context .panda-hero__visual {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.panda-hero__panel--person .panda-hero__image,
.panda-hero__panel--context .panda-hero__image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--panda-side-x, 50%) var(--panda-side-y, 50%);
	transform: scale(var(--panda-side-zoom, 1.06)) translateZ(0);
	transform-origin: var(--panda-side-x, 50%) var(--panda-side-y, 50%);
	backface-visibility: hidden;
}

/* The lateral photographs are the visual background; grid content stays independent. */
.panda-hero__panel--person .panda-hero__portrait {
	object-position: var(--panda-side-x, 58%) var(--panda-side-y, 50%);
}

@media (max-width: 1050px) {
	.panda-hero__panel--person .panda-hero__image,
	.panda-hero__panel--context .panda-hero__image {
		transform: scale(max(1, var(--panda-side-zoom, 1.04))) translateZ(0);
	}
}

/* =========================================================
   v1.9.6 · SAFE FULL-WIDTH HERO
   No viewport breakout / negative margins.
   The Elementor host owns the width. Visual side panels fill that host,
   while editorial content remains on the 1400px Panda Grid.
========================================================= */
@media (min-width: 1051px) {
	.panda-hero {
		--panda-hero-content-width: min(
			var(--panda-grid-max, 1400px),
			calc(100% - (var(--panda-grid-gutter, 40px) * 2))
		);
		--panda-hero-center-width: calc(var(--panda-hero-content-width) / 3);
		position: relative;
		left: auto !important;
		right: auto !important;
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		overflow: hidden;
	}

	/* Override the global Panda Grid rule only for the Hero visual frame. */
	.panda-hero .panda-hero__frame {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.panda-hero__slide {
		grid-template-columns:
			minmax(0, 1fr)
			var(--panda-hero-center-width)
			minmax(0, 1fr);
	}

	/* Names, role, case card and other editorial elements stay on Panda Grid. */
	.panda-hero__content-grid {
		left: 50%;
		width: var(--panda-hero-content-width) !important;
		max-width: var(--panda-grid-max, 1400px);
		margin: 0;
		transform: translateX(-50%);
	}

	/* Floating mascot remains attached to the center/right grid division. */
	.panda-hero__overlay {
		left: calc(50% + (var(--panda-hero-center-width) / 2));
	}

	/* Side photographs fill every pixel of their flexible lateral columns. */
	.panda-hero__panel--person .panda-hero__visual,
	.panda-hero__panel--context .panda-hero__visual,
	.panda-hero__panel--person .panda-hero__image,
	.panda-hero__panel--context .panda-hero__image {
		inset: 0;
		width: 100%;
		height: 100%;
		max-width: none;
	}
}

/* Keep the widget itself centered and prevent a theme/Elementor transform from
   turning the Hero into a viewport-offset element. */
.elementor-widget-panda-agency-hero,
.elementor-widget-panda-agency-hero > .elementor-widget-container {
	position: relative !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
	max-width: none !important;
}


/* =========================================================
   v1.9.8 · HERO 3 EQUAL VISUAL PANELS
   Desktop visual composition is always 33.33 / 33.33 / 33.33.
   Editorial content (name, role, case card, controls) stays on Panda Grid.
========================================================= */
@media (min-width: 1051px) {
	.panda-hero__slide {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}

	.panda-hero__panel {
		width: 100% !important;
		min-width: 0 !important;
	}

	/* Keep editorial content independent from the visual thirds. */
	.panda-hero__content-grid {
		left: 50% !important;
		width: var(--panda-hero-content-width) !important;
		max-width: var(--panda-grid-max, 1400px) !important;
		transform: translateX(-50%) !important;
	}

	/* Keep the floating Panda attached to the Panda Grid division, not the viewport third. */
	.panda-hero__overlay {
		left: calc(50% + (var(--panda-hero-content-width) / 6)) !important;
	}
}