:root {
	--panda-black: var(--e-global-color-text, #02040a);
	--panda-navy: var(--e-global-color-primary, #071626);
	--panda-pink: var(--e-global-color-accent, #ff1464);
	--panda-cyan: var(--e-global-color-secondary, #00aeef);
	--panda-white: #ffffff;
	--panda-light: #f8f9fb;
	--panda-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--panda-font-display: "Panda Display", "Integral CF", "Bebas Neue", "Arial Narrow", sans-serif;
	--panda-font-body: "Manrope", Arial, sans-serif;
	--panda-grid-max: 1400px;
	--panda-grid-gutter: 40px;
	--panda-grid-gap: 24px;
}

/* Panda widgets always fill their Elementor slot. */
.elementor-widget-panda-agency-menu,
.elementor-widget-panda-agency-hero,
.elementor-widget-panda-agency-brands,
.elementor-widget-panda-agency-services,
.elementor-widget-panda-agency-portfolio,
.elementor-widget-panda-agency-team,
.elementor-widget-panda-agency-testimonials,
.elementor-widget-panda-agency-cta-contact,
.elementor-widget-panda-agency-footer {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	align-self: stretch !important;
	flex: 0 0 100% !important;
	overflow: visible !important;
}

.elementor-widget-panda-agency-menu > .elementor-widget-container,
.elementor-widget-panda-agency-hero > .elementor-widget-container,
.elementor-widget-panda-agency-brands > .elementor-widget-container,
.elementor-widget-panda-agency-services > .elementor-widget-container,
.elementor-widget-panda-agency-portfolio > .elementor-widget-container,
.elementor-widget-panda-agency-team > .elementor-widget-container,
.elementor-widget-panda-agency-testimonials > .elementor-widget-container,
.elementor-widget-panda-agency-cta-contact > .elementor-widget-container,
.elementor-widget-panda-agency-footer > .elementor-widget-container {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
}

/*
 * Elementor may wrap widgets in one or more boxed Containers/Flexboxes.
 * The layout helper adds .panda-fullbleed-host to the closest wrappers.
 */
.panda-fullbleed-host {
	--width: 100% !important;
	--content-width: 100% !important;
	--container-max-width: 100% !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	flex-basis: 100% !important;
	align-self: stretch !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: visible !important;
}

.panda-fullbleed-host > .e-con-inner,
.panda-fullbleed-host > .elementor-container {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: visible !important;
}

/* CSS-only fallback for current browsers that support :has(). */
.e-con:has(.elementor-widget-panda-agency-menu),
.e-con:has(.elementor-widget-panda-agency-hero),
.e-con:has(.elementor-widget-panda-agency-brands),
.e-con:has(.elementor-widget-panda-agency-services),
.e-con:has(.elementor-widget-panda-agency-portfolio),
.e-con:has(.elementor-widget-panda-agency-team),
.e-con:has(.elementor-widget-panda-agency-testimonials),
.e-con:has(.elementor-widget-panda-agency-cta-contact),
.e-con:has(.elementor-widget-panda-agency-footer),
.elementor-section:has(.elementor-widget-panda-agency-menu),
.elementor-section:has(.elementor-widget-panda-agency-hero),
.elementor-section:has(.elementor-widget-panda-agency-brands),
.elementor-section:has(.elementor-widget-panda-agency-services),
.elementor-section:has(.elementor-widget-panda-agency-portfolio),
.elementor-section:has(.elementor-widget-panda-agency-team),
.elementor-section:has(.elementor-widget-panda-agency-testimonials),
.elementor-section:has(.elementor-widget-panda-agency-cta-contact),
.elementor-section:has(.elementor-widget-panda-agency-footer) {
	--width: 100% !important;
	--content-width: 100% !important;
	--container-max-width: 100% !important;
	width: 100% !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: visible !important;
}

/* The actual Panda sections fill the expanded host. */
.panda-menu,
.panda-hero,
.panda-brands,
.panda-services,
.panda-portfolio,
.panda-team,
.panda-testimonials,
.panda-cta-contact,
.panda-footer {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* =========================================================
   PANDA GRID SYSTEM
   One horizontal alignment system for every Panda section.
   Desktop: 40px | Tablet: 24px | Mobile: 17px
========================================================= */

.panda-menu__container,
.panda-hero__frame,
.panda-brands__container,
.panda-services__container,
.panda-portfolio__container,
.panda-team__container,
.panda-testimonials__container,
.panda-cta-contact__container,
.panda-footer__container {
	width: min(
		var(--panda-grid-max),
		calc(100% - (var(--panda-grid-gutter) * 2))
	) !important;
	max-width: var(--panda-grid-max) !important;
	margin-inline: auto !important;
}

/* Hero visual frame now follows the Panda Grid directly. */

/* Shared horizontal rhythm for major section layouts. */
.panda-brands__header,
.panda-services__hero,
.panda-portfolio__header,
.panda-portfolio__grid {
	column-gap: var(--panda-grid-gap);
}

/* Tablet */
@media (max-width: 1024px) {
	:root {
		--panda-grid-gutter: 24px;
		--panda-grid-gap: 20px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	:root {
		--panda-grid-gutter: 17px;
		--panda-grid-gap: 16px;
	}

	.panda-menu__container,
	.panda-hero__frame,
	.panda-brands__container,
	.panda-services__container,
	.panda-portfolio__container,
.panda-team__container,
.panda-testimonials__container,
.panda-cta-contact__container,
.panda-footer__container {
		width: calc(100% - (var(--panda-grid-gutter) * 2)) !important;
	}

}


/* =========================================================
   PANDA SECTION STACK · v1.9.2
   Remove Elementor external gaps between consecutive Panda widgets.
   Each Panda section keeps its own internal vertical rhythm.
========================================================= */
.elementor-widget[class*="elementor-widget-panda-agency-"] {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.panda-fullbleed-host {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	row-gap: 0 !important;
	column-gap: 0 !important;
	gap: 0 !important;
	--gap: 0px !important;
}

/* When several Panda widgets live directly in the same Elementor container,
   Elementor's parent gap is what creates the white strip between sections. */
.e-con:has(> .elementor-widget[class*="elementor-widget-panda-agency-"]),
.elementor-container:has(> .elementor-widget[class*="elementor-widget-panda-agency-"]) {
	row-gap: 0 !important;
	gap: 0 !important;
	--gap: 0px !important;
}

/* Avoid default paragraph/last-child margins leaking outside Panda blocks. */
.panda-hero,
.panda-brands,
.panda-services,
.panda-portfolio,
.panda-team,
.panda-testimonials,
.panda-cta-contact,
.panda-footer {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}


.panda-widget-stack {
	row-gap: 0 !important;
	gap: 0 !important;
	--gap: 0px !important;
}


/* =========================================================
   PANDA ACTION MOTION · v2.0.0
   One interaction language across primary CTA buttons.
========================================================= */
.panda-menu__cta,
.panda-portfolio__button,
.panda-team__contact,
.panda-testimonials__cta,
.panda-cta-contact__primary,
.panda-case__button {
	transition: transform .36s var(--panda-ease), box-shadow .36s ease, background-color .36s ease, border-color .36s ease !important;
}
@media (hover:hover) {
	.panda-menu__cta:hover,
	.panda-portfolio__button:hover,
	.panda-team__contact:not(.panda-team__contact--static):hover,
	.panda-testimonials__cta:not(.panda-testimonials__cta--static):hover,
	.panda-cta-contact__primary:not(.panda-cta-contact__primary--static):hover,
	.panda-case__button:hover {
		transform: translateY(-4px) scale(1.025) !important;
		box-shadow: 0 18px 44px rgba(7,22,38,.16) !important;
	}
	.panda-menu__cta:hover b,
	.panda-portfolio__button:hover strong,
	.panda-team__contact:hover strong,
	.panda-testimonials__cta:hover strong,
	.panda-case__button:hover b {
		transform: translate(6px,-6px) scale(1.05) !important;
	}
	.panda-cta-contact__primary:not(.panda-cta-contact__primary--static):hover svg {
		transform: translate(6px,-6px) scale(1.05) !important;
	}
}
/* Inline CTA family: same directional micro-motion, lighter footprint. */
.panda-hero__case-link span,
.panda-project-card__link strong,
.panda-team__more strong,
.panda-footer__links a i,
.panda-footer__contact-links a i,
.panda-case__next-copy b { transition: transform .32s var(--panda-ease) !important; }
@media (hover:hover) {
	.panda-hero__case-link:hover span,
	a.panda-project-card__link:hover strong,
	.panda-team__more:not(.panda-team__more--static):hover strong,
	.panda-case__next-link:hover .panda-case__next-copy b { transform: translate(6px,-6px) !important; }
}


/* Panda Action Motion v2.10.1 · visible hover even before a URL is assigned */
@media (hover:hover) and (pointer:fine) {
  .panda-team__more:hover {
    color:#fff !important;
    transform:translateY(-2px) !important;
  }
  .panda-team__more:hover strong {
    color:var(--panda-cyan) !important;
    transform:translate(6px,-6px) scale(1.06) !important;
  }
  .panda-cta-contact__primary:hover {
    transform:translateY(-4px) scale(1.025) !important;
    border-color:var(--panda-cyan) !important;
    background:rgba(0,174,239,.16) !important;
    box-shadow:0 18px 46px rgba(0,174,239,.18) !important;
  }
  .panda-cta-contact__primary:hover::before { transform:translateX(120%) !important; }
  .panda-cta-contact__primary:hover svg {
    color:#fff !important;
    transform:translate(6px,-6px) scale(1.06) !important;
  }
}

/* v2.11.0 · Accessibility + stability baseline */
.panda-menu a:focus-visible,.panda-footer a:focus-visible,.panda-portfolio a:focus-visible,.panda-team a:focus-visible,.panda-testimonials a:focus-visible,.panda-cta-contact a:focus-visible,.panda-case a:focus-visible,.panda-projects-archive a:focus-visible{outline:2px solid var(--panda-cyan);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.panda-menu *, .panda-footer *, .panda-portfolio *, .panda-team *, .panda-testimonials *, .panda-cta-contact *, .panda-case *, .panda-projects-archive *{scroll-behavior:auto!important}}


/* =========================================================
   GLOBAL CHROME EDGE BRIDGE · v3.5.1
   Production-safe zero-gap handoff between Panda Header/Footer
   and theme/Elementor wrappers. Does not depend on :has().
========================================================= */
.panda-global-header,
.panda-global-footer {
    display: block;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.panda-global-chrome-active {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.panda-global-header-active .panda-global-after-header,
body.panda-global-header-active .panda-global-edge-reset-top {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.panda-global-footer-active .panda-global-before-footer,
body.panda-global-footer-active .panda-global-edge-reset-bottom {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Common theme shells can add a production-only block gap/padding. */
body.panda-global-header-active > .panda-global-header + #page,
body.panda-global-header-active > .panda-global-header + .site,
body.panda-global-header-active > .panda-global-header + .wp-site-blocks,
body.panda-global-header-active > .panda-global-header + #content,
body.panda-global-header-active > .panda-global-header + .site-content,
body.panda-global-header-active > .panda-global-header + main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Elementor widget version: remove the parent gap even when a CSS optimizer
   strips advanced :has() selectors. panda-layout.js adds these classes. */
.panda-widget-stack,
.panda-widget-stack.panda-fullbleed-host {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    gap: 0 !important;
    --gap: 0px !important;
}