/**
 * Elementor compatibility.
 *
 * Builder output is wrapped in .page-builder-content, so every rule below is
 * scoped to builder-rendered pages and cannot touch the theme templates.
 *
 * Elementor does not keep custom CSS classes set in its Advanced tab when a
 * template is imported, so the theme's own classes never reach the DOM on a
 * builder page. These rules re-attach the theme's type scale and spacing to
 * Elementor's markup instead. Colours and band padding are set with
 * Elementor's own controls, which do survive.
 */

/* Layout: match the theme container so grids line up with the rest of the site. */
.page-builder-content .elementor-section > .elementor-container {
	padding-left: 24px;
	padding-right: 24px;
}

/* Inner rows hold the card grids. Elementor caps inner sections at its own
   1140px default and leaves their columns sized unevenly, which makes the grid
   narrower than the heading above it. !important is needed because Elementor
   writes the cap into its per-page CSS with a higher specificity. */
.page-builder-content .elementor-inner-section > .elementor-container {
	max-width: none !important;
	padding-left: 0;
	padding-right: 0;
}

/* Elementor only ships width rules for its preset column classes (col-25,
   col-50, ...). A generated "col-33.3" matches nothing, so those columns fall
   back to their content width — which left the stats band squeezed into the
   left of its row. An equal share covers every row in the page. */
.page-builder-content .elementor-container > .elementor-column {
	flex: 1 1 0;
	max-width: none;
}

/* Card chrome. Elementor keeps custom CSS classes on widgets but drops them on
   columns and sections, so .feature-card / .factory-step / .testimonial never
   reach the DOM and the cards render as bare text. Rebuild the boxes here for
   inner rows that hold three or more cards; the two-column media/copy row of
   the quality band is deliberately left alone. */
.page-builder-content .elementor-inner-section:has(> .elementor-container > .elementor-column:nth-child(3)) > .elementor-container {
	gap: 28px;
}

.page-builder-content .elementor-inner-section:has(> .elementor-container > .elementor-column:nth-child(3)) > .elementor-container > .elementor-column {
	padding: 0;
}

.page-builder-content .elementor-inner-section:has(> .elementor-container > .elementor-column:nth-child(3)) > .elementor-container > .elementor-column > .elementor-element-populated {
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--brand);
	padding: 30px 26px 28px;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
}

.page-builder-content .elementor-inner-section:has(> .elementor-container > .elementor-column:nth-child(3)) > .elementor-container > .elementor-column:hover > .elementor-element-populated {
	transform: translateY(-5px);
	border-top-color: var(--accent);
	box-shadow: var(--shadow-sm);
}

/* Restore the theme's section-head measures: a capped text width, and the gap
   before the grid that follows it. Deliberately narrow selectors so the hero
   and the inner card rows keep their own sizing. */
.page-builder-content .elementor-top-section:not(:first-child) > .elementor-container > .elementor-column > .elementor-widget-wrap > :is(.elementor-widget-heading, .elementor-widget-text-editor) {
	max-width: 760px;
}

.page-builder-content .elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap > :is(.elementor-inner-section, .elementor-widget-shortcode):not(:first-child) {
	margin-top: clamp(36px, 4vw, 56px);
}

.page-builder-content .elementor-column > .elementor-element-populated {
	padding: 0;
}

/* Elementor implements its column gap as column padding. The top-level column
   must not carry it: 15px a side would inset the row — headings and card grids
   alike — and leave them 30px narrower than the theme container. Inner columns
   keep their padding, which is what spaces the cards apart. */
.page-builder-content .elementor-top-section > .elementor-container > .elementor-column > .elementor-element-populated {
	padding-left: 0;
	padding-right: 0;
}

/* The theme keeps the hero copy in an 820px inner column. */
.page-builder-content .elementor-top-section:first-child > .elementor-container > .elementor-column > .elementor-widget-wrap > :is(.elementor-widget-heading, .elementor-widget-text-editor) {
	max-width: 820px;
}

/* The theme's hero is a flex box with its own minimum height, which is what
   gives the first screen its scale. The container keeps width:100% so it does
   not shrink to its content as a flex item. */
.page-builder-content .elementor-top-section:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: clamp(560px, 84vh, 880px);
}

.page-builder-content .elementor-top-section:first-child > .elementor-container {
	width: 100%;
}

.page-builder-content .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.page-builder-content .elementor-widget-container > :last-child,
.page-builder-content .elementor-widget-container > :last-child > :last-child {
	margin-bottom: 0;
}

/* Elementor sets "--gap: initial" on every .elementor-element, which shadows
   the theme token inside its subtree and strips the spacing from the theme
   grids that shortcode widgets render. Value mirrors :root --gap. */
.page-builder-content .elementor-element {
	--gap: 28px;
}

/* Typography: Elementor's per-page CSS loads after this file and out-specifies
   it, so these rules carry an extra class. */
.page-builder-content .elementor-widget-heading .elementor-heading-title,
.page-builder-content h1,
.page-builder-content h2,
.page-builder-content h3,
.page-builder-content h4,
.page-builder-content h5 {
	font-family: var(--font-display);
}

.page-builder-content .elementor-widget-text-editor .elementor-widget-container {
	font-family: var(--font-body);
}

.page-builder-content .elementor-heading-title {
	padding: 0;
	margin: 0;
}

.page-builder-content h1.elementor-heading-title {
	font-size: clamp(2.35rem, 5vw, 4.4rem);
	line-height: 1.05;
}

.page-builder-content h2.elementor-heading-title {
	font-size: clamp(1.85rem, 3.4vw, 2.9rem);
	line-height: 1.1;
}

.page-builder-content h3.elementor-heading-title {
	font-size: clamp(1.2rem, 1.8vw, 1.6rem);
	line-height: 1.15;
}

/* The data-driven grids are rendered by the theme, inside a shortcode widget. */
.page-builder-content .elementor-widget-shortcode .grid {
	gap: var(--gap);
}

.page-builder-content .elementor-widget-shortcode .container {
	max-width: var(--container);
	padding: 0;
}

/* Elementor's button widget paints its own colours; align it with the theme. */
.page-builder-content .elementor-widget-button .elementor-button {
	background-color: var(--accent);
	color: var(--accent-ink);
	border: 0;
	border-radius: var(--radius);
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 16px 26px;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.page-builder-content .elementor-button:hover,
.page-builder-content .elementor-button:focus {
	background-color: var(--accent-hi);
	transform: translateY(-2px);
}

/* The wrapper the form shortcode renders already styles itself. */
.page-builder-content .elementor-widget-shortcode .form-card {
	margin: 0;
}