/* =============================================================================
 * Site-wide content shell — matches header (logo ↔ Book a Call).
 *
 * Header: bar 1440 + pad-x 120 → content 1200.
 * Loads late (footer) so it beats Elementor kit defaults (1140).
 * ============================================================================= */

/* —— 1. Elementor boxed containers → header bar width —— */
.e-con {
	--container-max-width: var(--jp-shell-max, 1440px) !important;
}

.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--jp-shell-max, 1440px) !important;
}

/* —— 2. JP widgets escape Elementor caps; own pad-x owns the shell —— */
.elementor-widget[class*="elementor-widget-jp-"],
.elementor-widget[class*="elementor-widget-jp-"] > .elementor-widget-container {
	width: 100%;
	max-width: none !important;
}

.e-con-boxed:has(> .e-con-inner > [class*="elementor-widget-jp-"]),
.e-con:has(> .e-con-inner > [class*="elementor-widget-jp-"]),
.e-con-boxed:has(> .e-con-inner > .e-con [class*="elementor-widget-jp-"]),
.e-con:has(> .e-con-inner > .e-con [class*="elementor-widget-jp-"]),
.elementor-section.elementor-section-boxed:has([class*="elementor-widget-jp-"]) {
	--width: 100% !important;
	--max-width: 100% !important;
	--padding-left: 0px !important;
	--padding-right: 0px !important;
	max-width: none !important;
	width: 100% !important;
}

.e-con-boxed:has(> .e-con-inner > [class*="elementor-widget-jp-"]) > .e-con-inner,
.e-con:has(> .e-con-inner > [class*="elementor-widget-jp-"]) > .e-con-inner,
.e-con-boxed:has(> .e-con-inner > .e-con [class*="elementor-widget-jp-"]) > .e-con-inner,
.e-con:has(> .e-con-inner > .e-con [class*="elementor-widget-jp-"]) > .e-con-inner,
.elementor-section.elementor-section-boxed:has([class*="elementor-widget-jp-"]) > .elementor-container {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* —— 3. Desktop: every section pad/max → shared shell tokens —— */
@media (min-width: 1101px) {
	.jp-conversation {
		--jp-conv-pad-x: var(--jp-widget-pad-x);
		--jp-conv-max: var(--jp-widget-max);
	}

	.jp-text-image {
		--jp-ti-pad-x: var(--jp-widget-pad-x);
		--jp-ti-max-w: var(--jp-widget-max);
	}

	.jp-work-together {
		--jp-wt-pad-x: var(--jp-widget-pad-x);
	}

	.jp-ways {
		--jp-ways-pad-x: var(--jp-widget-pad-x);
		--jp-ways-max-w: var(--jp-widget-max);
	}

	.jp-hstats {
		--jp-hs-pad-x: var(--jp-widget-pad-x);
	}

	.jp-hcards {
		--jp-hc-pad-x: var(--jp-widget-pad-x);
		--jp-hc-max-w: var(--jp-widget-max);
	}

	.jp-how-we-deliver {
		--jp-hwd-pad-x: var(--jp-widget-pad-x);
	}

	.jp-home-hero {
		--jp-hero-pad-x: var(--jp-widget-pad-x);
	}

	.jp-role-cards,
	.jp-role-cards--phases {
		--jp-rc-pad-x: var(--jp-widget-pad-x);
		--jp-rc-max-w: var(--jp-widget-max);
	}

	.jp-familiar {
		--jp-fm-pad-x: var(--jp-widget-pad-x);
		--jp-fm-max-w: var(--jp-widget-max);
	}

	.jp-tslider {
		--jp-ts-pad-x: var(--jp-widget-pad-x);
		--jp-ts-max-w: var(--jp-widget-max);
	}

	.jp-about-window {
		--jp-aw-pad-x: var(--jp-widget-pad-x);
	}

	.jp-phase-sprint,
	.jp-phase-sprint--phase-2 {
		--jp-ps-pad-x: var(--jp-widget-pad-x);
	}

	.jp-band-story {
		--jp-bs-pad-x: var(--jp-widget-pad-x);
	}

	.jp-logo-slider {
		--jp-logo-slider-pad-x: var(--jp-widget-pad-x);
	}

	.jp-how-i-work {
		--jp-hiw-pad-x: var(--jp-widget-pad-x);
	}

	.jp-right-fit {
		--jp-rf-pad-x: var(--jp-widget-pad-x);
	}

	.jp-banner-section {
		padding-left: var(--jp-widget-pad-x) !important;
		padding-right: var(--jp-widget-pad-x) !important;
	}

	.jp-sprint-path {
		--jp-sp-pad-l: var(--jp-widget-pad-x);
		--jp-sp-pad-r: var(--jp-widget-pad-x);
	}

	.jp-guide-hero {
		--jp-gh-pad-l: var(--jp-widget-pad-x);
		--jp-gh-pad-r: var(--jp-widget-pad-x);
	}

	.jp-guide-cards-section {
		padding-left: var(--jp-widget-pad-x) !important;
		padding-right: var(--jp-widget-pad-x) !important;
	}

	.jp-guide-cards__inner {
		max-width: var(--jp-widget-max) !important;
	}

	.jp-blog-featured {
		--jp-bf-max: var(--jp-widget-max);
		--jp-bf-pad-x: var(--jp-widget-pad-x);
	}

	.jp-service-hero {
		--jp-sh-pad-x: var(--jp-widget-pad-x);
	}

	/* —— New widget overrides added for the --jp-widget-* standardization —— */
	.jp-checklist-split__inner {
		max-width: var(--jp-widget-max) !important;
		padding: 0 var(--jp-widget-pad-x) !important;
	}

	.jp-blog-grid__inner {
		max-width: var(--jp-widget-max) !important;
		padding: 0 var(--jp-widget-pad-x) !important;
	}

	.jp-deliverable-tabs__inner {
		max-width: var(--jp-widget-max) !important;
		padding: 0 var(--jp-widget-pad-x) !important;
	}

	.jp-stat-split__inner {
		max-width: var(--jp-widget-max) !important;
		padding: 0 var(--jp-widget-pad-x) !important;
	}

	.jp-right-fit__inner {
		padding: 0 var(--jp-widget-pad-x) !important;
	}

	.jp-logo-slider__inner {
		max-width: var(--jp-widget-max) !important;
		padding: 0 var(--jp-widget-pad-x) !important;
	}

	.jp-stat-row__inner {
		max-width: var(--jp-widget-max) !important;
		padding-left: var(--jp-widget-pad-x) !important;
		padding-right: var(--jp-widget-pad-x) !important;
	}

	.jp-phase-banner__inner {
		max-width: var(--jp-widget-max) !important;
		padding-left: var(--jp-widget-pad-x) !important;
		padding-right: var(--jp-widget-pad-x) !important;
	}

	.jp-testimonial-card__inner {
		max-width: var(--jp-widget-max) !important;
	}

	/* These already own a correctly-fixed __inner (max-width + padding both
	 * on the token); the outer wrapper's own leftover clamp() padding was
	 * still narrowing the available box below 1232px between ~1101-1439px,
	 * so it's zeroed here rather than left to fight the inner. */
	.jp-blog-grid-section,
	.jp-checklist-split-section,
	.jp-deliverable-tabs-section,
	.jp-phase-banner-section,
	.jp-stat-row-section,
	.jp-stat-split-section {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.jp-blog-latest {
		--jp-shell-pad-x: var(--jp-widget-pad-x);
	}

	.jp-blog-latest__inner {
		max-width: var(--jp-widget-max) !important;
	}

	.jp-text-form {
		--jp-shell-pad-x: var(--jp-widget-pad-x);
	}

	.jp-text-form__inner {
		max-width: var(--jp-widget-max) !important;
	}

	/* Theme templates (blog) + footer — same track as header */
	.jp-blog-archive {
		--jp-ba-max: var(--jp-shell-content);
		--jp-ba-pad-x: var(--jp-shell-pad-x);
	}

	.jp-blog-single {
		/* Must match header bar (1440), not content rail (1200) — late override was shrinking the shell after paint. */
		--jp-bs-max: var(--jp-shell-max, 1440px);
		--jp-bs-pad-x: var(--jp-shell-pad-x);
	}

	body.single-post .jp-blog-single__shell {
		max-width: var(--jp-shell-max, 1440px) !important;
		padding-left: var(--jp-shell-pad-x) !important;
		padding-right: var(--jp-shell-pad-x) !important;
	}

	.jp-footer {
		--jp-footer-pad-x: var(--jp-shell-pad-x);
	}

	.jp-header {
		/* Match the standardized widget rail (1232/20), not the old 1440/shell-clamp
		 * header-only system, so nav content lines up with page content beneath it
		 * at every desktop width instead of just one. */
		--jp-header-bar-max: var(--jp-widget-max, 1232px);
		--jp-header-pad-x: var(--jp-widget-pad-x, 20px);
	}
}

/* —— 4. Tablet/phone: full-width Elementor boxes + header shell —— */
@media (max-width: 1100px) {
	.e-con {
		--container-max-width: 100% !important;
	}

	.elementor-section.elementor-section-boxed > .elementor-container {
		max-width: 100% !important;
	}

	/* Header side pad — same fixed rhythm as footer + home hero (60 tablet) */
	.jp-header,
	#jp-global-header > .jp-header {
		--jp-header-pad-x: 60px;
	}

	/* Bulletproof: identical rail on EVERY page (beats any page-level cascade) */
	#jp-global-header .jp-header .jp-header__inner {
		padding-left: 60px !important;
		padding-right: 60px !important;
	}
}

/* Phone — match footer 24px rail */
@media (max-width: 700px) {
	.jp-header,
	#jp-global-header > .jp-header {
		--jp-header-pad-x: 24px;
	}

	#jp-global-header .jp-header .jp-header__inner {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

/* =============================================================================
 * JP-SEC-FOOTER — Figma pass overrides (self-contained, does not touch the
 * Elementor .e-con / :has() rules above). Loads after assets/css/sections/
 * footer.css, jp-tablet.css and jp-mobile-typography.css (all printed via
 * jp_print_overlay_styles() at wp_footer priority 9998, this file last in
 * that list), so these rules win the cascade without needing !important.
 * ============================================================================= */

@media (min-width: 1101px) {
	.jp-footer__shell {
		max-width: 1900px;
		--jp-footer-shell-max: 1900px;
	}

	.jp-footer__badges {
		padding-top: 70px;
		padding-bottom: 70px;
		margin-bottom: 20px;
		gap: 15px;
	}

	.jp-footer__badge-img {
		display: block;
		width: 95px;
		height: 127px;
		object-fit: contain;
		flex-shrink: 0;
	}

	.jp-footer__badges-label {
		font-family: "Manrope", var(--jp-font-body, sans-serif);
		font-weight: 700;
		font-size: 16px;
		line-height: 125%;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: #ffffff;
	}

	.jp-footer__badges-row {
		gap: 14px;
		align-items: flex-start;
	}

	.jp-footer__portrait-wrap {
		z-index: 2;
		justify-content: flex-end;
		width: 38%;
		top: 320px;
		bottom: 0;
		height: auto;
	}

	.jp-footer__portrait {
		object-position: bottom;
	}

	.jp-footer__bar-inner {
		align-items: flex-end;
		max-width: 800px;
	}

	.jp-footer__brand-wrap {
		max-width: 500px;
	}

	.jp-footer__bar-inner,
	.jp-footer__copyright,
	.jp-footer__privacy,
	.jp-footer__legal {
		font-family: "Instrument Sans", var(--jp-font-body, sans-serif);
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		letter-spacing: -0.16px;
	}

	.jp-footer__legal-block {
		max-width: 368px;
		flex: 0.9 1 386px;
		margin-right: 80px;
	}

	.jp-footer__bar {
		padding-top: 60px;
		padding-bottom: 70px;
	}

	.jp-footer__list {
		gap: 14px;
	}

	.jp-footer__col-title {
		margin-bottom: 20px;
	}

	/* Scoped to footer lists only — a bare `li` selector would clip every
	   list item site-wide. min-height (not height) so the two-line office
	   address entry in .jp-footer__contact-item is not cut off. */
	.jp-footer__list li{
		margin: 0;
		padding: 0;
		line-height: normal;
		height: 25px;
	}

	.jp-footer__linkedin {
		margin-top: 50px;
	}

	.jp-footer__nav {
		margin-top: 60px;
	}

	.jp-footer__brand-img {
		width: 100%;
		max-height: 100%;
	}

	.jp-footer__rule {
		width: calc(100% + 2 * var(--jp-footer-pad-x));
		max-width: none;
		margin-top: 25px;
		margin-bottom: 22px;
		margin-left: calc(-1 * var(--jp-footer-pad-x));
		margin-right: 0;
	}
}

/* Tablet — scale the fixed desktop badge size down proportionally (same
   ~0.75 aspect ratio) so 7 badges wrap cleanly instead of overflowing. */
@media (min-width: 701px) and (max-width: 1100px) {
	.jp-footer__badges {
		padding-top: 48px;
		padding-bottom: 48px;
		margin-bottom: 16px;
		gap: 28px;
	}

	.jp-footer__badge-img {
		display: block;
		width: 64px;
		height: 86px;
		object-fit: contain;
		flex-shrink: 0;
	}

	.jp-footer__badges-row {
		gap: 14px;
		row-gap: 20px;
		align-items: flex-start;
	}
}

/* Mobile — same proportional step-down. */
@media (max-width: 700px) {
	.jp-footer__badges {
		padding-top: 32px;
		padding-bottom: 32px;
		margin-bottom: 12px;
		gap: 20px;
	}

	.jp-footer__badge-img {
		display: block;
		width: 44px;
		height: 59px;
		object-fit: contain;
		flex-shrink: 0;
	}

	.jp-footer__badges-row {
		gap: 12px;
		row-gap: 16px;
		align-items: flex-start;
	}
}

/* =============================================================================
 * JP-SEC-MISC — Figma pass overrides (batch 2). Self-contained; same
 * load-last mechanism as JP-SEC-FOOTER above (wp_footer priority 9998).
 * ============================================================================= */

.gradient-text {
	background: linear-gradient(119.57deg, #766AF0 3.87%, #FF66B2 110.75%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

body .elementor-24 .elementor-element.elementor-element-2d7abad .jp-home-hero__badge {
	font-family: Manrope;
	font-weight: 500;
	font-size: 12px !important;
	letter-spacing: 0%;
	border: none !important;
}

.jp-home-hero__body {
	padding-top: 20px !important;
}

.jp-home-hero__copy-lower {
	max-width: 495px !important;
}

.jp-logo-slider__inner {
	gap: 20px !important;
}

.jp-band-story__photo {
	border: none !important;
}

.jp-band-story__fade {
	background: transparent !important;
}

.jp-testimonial-card__quote-icon {
	width: auto !important;
}

.jp-phase-sprint__intro {
	max-width: 100% !important;
}

.jp-phase-sprint__card-headline {
	padding-top: 32px !important;
}

.jp-phase-sprint__rail-title {
	text-transform: capitalize !important;
}

.jp-phase-sprint__feature-icon {
	background: transparent !important;
	border: none !important;
	border-radius: 0px !important;
	padding: 0px !important;
	flex: 0 0 40px !important;
	justify-content: start !important;
}

body .jp-phase-sprint__feature-icon img {
	max-width: 40px !important;
	width: 100% !important;
	height: auto !important;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.jp-phase-sprint__features {
	background: white !important;
	border: 0.4px solid #d9d9d9 !important;
}

.jp-banner__headline {
	text-transform: capitalize !important;
}

.jp-about-window__headline {
	text-transform: capitalize !important;
}

/* Desktop-only — fixed Figma pixel values that would overflow/misalign a
   stacked tablet/mobile layout; smaller breakpoints keep each widget's own
   existing responsive CSS untouched. */
@media (min-width: 1101px) {
	.jp-phase-sprint__rail {
		flex: 0 0 420px !important;
		padding-right: 130px;
	}

	.jp-home-hero__visual {
		width: auto !important;
		margin-right: 0px !important;
	}

	.jp-phase-sprint__card-img {
		max-height: initial !important;
	}

	.jp-about-window__body {
		justify-content: center !important;
		align-items: end !important;
	}

	/* About Us — split text+image: headline stays above; body + image top-align. */
	.elementor-18 .jp-text-image--split.jp-text-image--img-right .jp-text-image__inner {
		align-items: flex-start;
	}

	.elementor-18 .jp-text-image--split.jp-text-image--img-right .jp-text-image__headline {
		width: 100%;
		max-width: 600px;
	}

	.elementor-18 .jp-text-image--split.jp-text-image--img-right .jp-text-image__row,
	.elementor-18 .elementor-element.elementor-element-0a08a68 .jp-text-image__row {
		align-items: flex-start;
		gap: 40px;
	}

	.elementor-18 .jp-text-image--centered .jp-text-image__headline {
		text-align: center;
	}

	body.elementor-page-18 .elementor-18 .elementor-widget-jp-role-cards .jp-role-cards--roles .jp-role-cards__headline {
		font-family: "Plus Jakarta Sans", var(--jp-font-heading, sans-serif) !important;
		font-weight: 500 !important;
		font-style: normal;
		font-size: 46px !important;
		line-height: 1.2 !important;
		letter-spacing: -0.02em !important;
		text-align: center !important;
	}
}

/* Testimonial card padding — 100px as given is desktop-only; scaled down at
   tablet/mobile so it doesn't swallow all the available content width. */
@media (min-width: 1101px) {
	.jp-testimonial-card {
		padding: 100px !important;
	}
}

@media (min-width: 701px) and (max-width: 1100px) {
	.jp-testimonial-card {
		padding: 56px !important;
	}
}

@media (max-width: 700px) {
	.jp-testimonial-card {
		padding: 28px !important;
	}
}

/* Book a Call — checklist hero layout only (typography via Elementor Style tab). */
body.elementor-page-1094 .elementor-1094 .elementor-element.elementor-element-9cb78dd .jp-text-image__headline,
.elementor-1094 .elementor-element.elementor-element-9cb78dd .jp-text-image__headline {
	max-width: 636px;
}

body.elementor-page-1094 .elementor-1094 .elementor-element.elementor-element-9cb78dd .jp-text-image__inner,
.elementor-1094 .elementor-element.elementor-element-9cb78dd .jp-text-image__inner {
	align-items: flex-start;
}

/* Checklist + photo — stacked column layout (was row). */
body.elementor-page-1094 .elementor-1094 .elementor-element.elementor-element-9cb78dd .jp-text-image__row,
.elementor-1094 .elementor-element.elementor-element-9cb78dd .jp-text-image__inner .jp-text-image__row {
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 28px !important;
}

@media (max-width: 1100px) {
	body.elementor-page-1094 .elementor-1094 .elementor-element.elementor-element-9cb78dd .jp-text-image__headline,
	.elementor-1094 .elementor-element.elementor-element-9cb78dd .jp-text-image__headline {
		max-width: 100%;
	}
}

/* Page-specific exceptions to the sitewide standards above. */
@media (max-width: 1100px) {
	.page-id-1094 .jp-header__inner {
		padding: 0 20px !important;
	}

	.page-id-18 .jp-text-image__panel {
		padding: 28px 24px !important;
	}
}

.page-id-11008 .jp-service-hero__body {
	text-align: left;
}

.page-id-11008 .jp-service-hero__footer {
	max-width: 100%;
}