/**
 * CRBNFIX desktop-width + responsive layout.
 * Content stays Elementor-editable; this only changes how wide it renders.
 */

:root {
	--crbn-gutter: 5vw;
	--crbn-container: 90vw;
}

@media (max-width: 1280px) {
	:root {
		--crbn-gutter: 32px;
	}
}

@media (max-width: 1024px) {
	:root {
		--crbn-gutter: 24px;
	}
}

@media (max-width: 767px) {
	:root {
		--crbn-gutter: 16px;
	}
}

/* --------------------------------------------------------------------------
   Elementor Site Settings (was 1400px ≈ 70% of a 1920px screen)
   -------------------------------------------------------------------------- */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--crbn-container) !important;
	width: 100%;
}

.e-con {
	--container-max-width: var(--crbn-container);
}

.e-con.e-con-boxed.e-con-boxed,
.e-con > .e-con-inner {
	max-width: var(--crbn-container);
	margin-inline: auto;
}

body.elementor-page .site-main,
body.elementor-page #content,
.elementor {
	width: 100%;
	max-width: 100%;
}

body:not([class*="elementor-page-"]) .site-main {
	max-width: var(--crbn-container);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--crbn-gutter);
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Theme / custom widget containers (were 1140–1380px)
   -------------------------------------------------------------------------- */
.crbnfix-header .header-inner,
.crbnfix-hero .hero-container,
.crbnfix-what-we-do .wwd-container,
.wwm-container,
.wim-container,
.ib-container,
.mch-container,
.pc-container,
.bcta-container,
.footer-cta-inner,
.footer-bar-inner,
.inner-header-container,
.ps-container,
.timeline-container,
.cta-container,
.contact-container,
.partners-container,
.faq-container,
.crbnfix-new-footer .footer-wrapper,
.myno-footer-container,
.crbnfix-page-header-widget .hero-container,
.crbnfix-video-content-widget .video-content-card,
.crbnfix-team-widget .team-widget-container,
.crbnfix-decarbonization-widget .decarbonization-container,
.crbnfix-blog-layout .blog-container,
.crbnfix-blog-grid-widget .blog-grid-widget-container,
.crbnfix-key-features-widget .key-features-container,
.crbnfix-use-cases-widget .use-cases-container,
.crbnfix-consultation-callout-widget .consultation-callout-container,
.crbnfix-dual-action-widget .dual-action-container,
.crbnfix-product-showcase-widget .showcase-container,
.crbnfix-benefits-widget .benefits-container,
.crbnfix-case-studies-showcase-widget .case-studies-container,
.crbnfix-application-opportunities-widget .opportunities-container,
.crbnfix-process-flow-widget .process-flow-container,
.crbnfix-what-we-make .wwm-container,
.crbnfix-it-container,
.cycle-hcontainer {
	max-width: var(--crbn-container) !important;
	width: 100%;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Media + overflow safety
   -------------------------------------------------------------------------- */
.elementor img,
.elementor video,
.elementor iframe,
.crbnfix-header img,
.crbnfix-myno-footer img,
.site-main img,
.site-main video,
.site-main iframe {
	max-width: 100%;
	height: auto;
}

.elementor-widget-video iframe,
.elementor-widget-html iframe {
	width: 100%;
}

.elementor table,
.page-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Tablet / laptop stacking for grids that stayed desktop-wide
   -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
	.crbnfix-case-studies-showcase-widget .case-studies-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 1024px) {
	.wwm-cards-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 28px;
	}

	.ps-right-col {
		grid-template-columns: repeat(2, 1fr) !important;
		padding-left: 0;
		gap: 24px;
	}

	.ps-stat-card {
		border-right: none;
		padding: 0 12px 16px 0;
	}

	.crbnfix-product-showcase-widget .product-cards-grid,
	.crbnfix-benefits-widget .benefits-cards-grid,
	.crbnfix-use-cases-widget .use-cases-cards-grid {
		grid-template-columns: 1fr !important;
	}

	.crbnfix-page-header-widget .hero-title {
		font-size: clamp(32px, 6vw, 52px);
	}
}

@media (max-width: 767px) {
	.wwm-cards-grid,
	.ps-right-col,
	.crbnfix-case-studies-showcase-widget .case-studies-grid,
	.cycle-hfeatures-grid {
		grid-template-columns: 1fr !important;
	}

	.crbnfix-header .header-inner,
	.crbnfix-hero .hero-container,
	.crbnfix-page-header-widget .hero-container {
		padding-inline: 16px;
	}

	.crbnfix-video-content-widget .video-content-card {
		padding: 28px 18px !important;
	}

	.crbnfix-hero .hero-title,
	.crbnfix-page-header-widget .hero-title {
		overflow-wrap: anywhere;
	}
}

/* Header: one row, labels never wrap */
@media (min-width: 1025px) {
	.crbnfix-header .header-inner {
		flex-wrap: nowrap !important;
		align-items: center;
		gap: 20px;
		max-width: 90vw !important;
	}

	.crbnfix-header .site-branding {
		flex-shrink: 0;
	}

	.crbnfix-header .logo-img {
		max-height: 44px !important;
	}

	.crbnfix-header .site-navigation {
		flex-grow: 1;
		flex-shrink: 1;
		min-width: 0;
		margin-left: 16px !important;
		justify-content: flex-end;
	}

	.crbnfix-header .crbnfix-menu {
		flex-wrap: nowrap !important;
		gap: clamp(18px, 1.8vw, 28px) !important;
	}

	.crbnfix-header .crbnfix-menu > li {
		flex-shrink: 0;
	}

	.crbnfix-header .crbnfix-menu > li > a {
		white-space: nowrap !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		letter-spacing: 0.02em !important;
		word-spacing: 0.16em !important;
		line-height: 1.2 !important;
	}

	.crbnfix-header .crbnfix-menu > li > a br {
		display: none !important;
	}

	.crbnfix-header .header-action {
		display: block;
		flex-shrink: 0;
		margin-left: 12px;
	}
}

@media (min-width: 1025px) and (max-width: 1512px) {
	.crbnfix-header .logo-img {
		max-height: 36px !important;
	}

	.crbnfix-header .crbnfix-menu {
		gap: 12px !important;
	}

	.crbnfix-header .crbnfix-menu > li > a {
		font-size: 13px !important;
		word-spacing: 0 !important;
	}

	.crbnfix-header .header-btn {
		padding: 8px 12px;
		font-size: 12px;
	}

	.crbnfix-header .crbnfix-menu ul.sub-menu {
		min-width: 180px;
		padding: 12px 14px;
		gap: 6px;
	}

	.crbnfix-header .crbnfix-menu ul.sub-menu li a {
		font-size: 13px !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
	}
}

/* Home hero: keep cinematic crop, lift title so it is not crushed at the fold */
.crbnfix-hero {
	align-items: flex-end;
	min-height: 86vh;
	padding-top: 140px;
	padding-bottom: 96px;
}

.crbnfix-hero .hero-title {
	letter-spacing: -0.3px;
}

.crbnfix-hero .hero-cta-buttons {
	margin-top: 24px;
}

.crbnfix-product-showcase-widget .product-img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}