/**
 * Commercial Gear — generalized typography system.
 *
 * Single source of truth for font-family, size, weight, line-height,
 * letter-spacing and text-transform, so a new page needs zero per-widget
 * Elementor typography settings to look right — it inherits these rules
 * simply by using standard tags (h1–h6, p) or the shared cg-* classes
 * below. Colors are intentionally NOT set here: they stay on the
 * widget/section since they depend on background context.
 *
 * IMPORTANT #1 — tag-qualified selectors only. Elementor's heading
 * widget always renders the class "elementor-heading-title" no matter
 * which HTML tag the editor picked for it (h1/h2/h3/p/span/div — the
 * "HTML Tag" control). An unqualified ".elementor-heading-title" rule
 * therefore matches an h1, a small eyebrow rendered as <p>, and a badge
 * rendered as <span> all at once, collapsing the whole page's visual
 * hierarchy to one size. Every rule below is qualified by the actual
 * tag (h2.elementor-heading-title, p.elementor-heading-title, ...) so
 * each heading "role" only gets the style meant for that role.
 *
 * IMPORTANT #2 — specificity must be >= (0,2,0). Elementor itself
 * prints a per-page stylesheet (wp-content/uploads/elementor/css/
 * post-{ID}.css) with a built-in fallback for every heading widget
 * that has no explicit typography override:
 *
 *   .elementor-widget-heading .elementor-heading-title {
 *     font-size: var(--e-global-typography-primary-font-size); ...
 *   }
 *
 * That selector is two classes deep (specificity 0,2,0) — Elementor
 * applies its large global "Primary" heading style to EVERY heading
 * widget by default, regardless of tag, unless something at least as
 * specific overrides it. A bare tag selector like "h2.elementor-
 * heading-title" (0,1,1) LOSES to that rule outright, not just on a
 * source-order tiebreak. Every selector below that targets
 * ".elementor-heading-title" is therefore prefixed with
 * ".elementor-widget-heading" to reach (0,2,1) or higher.
 *
 * Do not add a selector targeting ".elementor-heading-title" that is
 * shallower than ".elementor-widget-heading <tag>.elementor-heading-
 * title" — it will silently lose to Elementor's own fallback.
 *
 * Also note: a widget's custom CSS class lands on its OUTER
 * ".elementor-element" wrapper, not on the inner title/paragraph tag.
 * The cg-* utility classes below therefore use a descendant selector
 * (".cg-hero-h1 .elementor-widget-heading .elementor-heading-title")
 * rather than styling the class itself, and are declared after the
 * generic tag defaults so they win on equal specificity without
 * !important — a page can still set "custom" typography on one
 * specific widget when a one-off section genuinely needs to differ.
 *
 * Breakpoints match the site's Elementor kit (Site Settings > Layout >
 * Breakpoints): tablet <= 1023px, widescreen >= 1536px.
 */

:root {
	--cg-font-heading: 'Space Grotesk', sans-serif;
	--cg-font-body: 'Inter', sans-serif;
	/* Fluid body copy — same curve as the Elementor kit's global "Text"
	   typography (Site Settings > Global Fonts), so paragraphs read the
	   same everywhere whether or not a widget references that global. */
	--cg-text-size: clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
	/* Fluid display number — same curve as the kit's global "Accent". */
	--cg-accent-size: clamp(2.25rem, 1.4rem + 2.1vw, 3.5rem);
}

body {
	font-family: var(--cg-font-body);
}

/* ---------------------------------------------------------------------
 * Base body copy — Text Editor widgets and plain paragraphs. Elementor's
 * own fallback here is only ".elementor-widget-text-editor" (0,1,0), so
 * this doesn't need the extra specificity headings do.
 * ------------------------------------------------------------------- */
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
	font-family: var(--cg-font-body);
	font-size: var(--cg-text-size);
	font-weight: 400;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------
 * Headings — real h1–h6 tags only.
 * ------------------------------------------------------------------- */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title {
	font-family: var(--cg-font-heading);
	font-weight: 600;
}

.elementor-widget-heading h1.elementor-heading-title {
	font-size: 32px;
	line-height: 1.25;
}

.elementor-widget-heading h2.elementor-heading-title {
	font-size: 32px;
	line-height: 1.3;
}

.elementor-widget-heading h3.elementor-heading-title {
	font-size: 18px;
	line-height: 1.5;
}

.elementor-widget-heading h4.elementor-heading-title,
.elementor-widget-heading h5.elementor-heading-title,
.elementor-widget-heading h6.elementor-heading-title {
	font-size: 16px;
	line-height: 1.5;
}

@media (min-width: 1024px) {
	.elementor-widget-heading h1.elementor-heading-title,
	.elementor-widget-heading h2.elementor-heading-title {
		font-size: 40px;
	}
}

@media (min-width: 1536px) {
	.elementor-widget-heading h1.elementor-heading-title {
		font-size: 48px;
	}
}

/* ---------------------------------------------------------------------
 * Section kicker — the small label above a section's H2, rendered as a
 * heading widget with HTML tag set to "p" (e.g. "About Commercial
 * gear", "What we make", "Who We Serve") or "div" (e.g. "Since 1946 ·
 * East Walpole, Massachusetts"). Not uppercase — that's the separate
 * .cg-eyebrow treatment below, used inside hero/CTA bands.
 * ------------------------------------------------------------------- */
.elementor-widget-heading p.elementor-heading-title,
.elementor-widget-heading div.elementor-heading-title,
.elementor-widget-heading span.elementor-heading-title {
	font-family: var(--cg-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

/* ---------------------------------------------------------------------
 * Buttons — Elementor's Button widget (and, inside it, the button's own
 * icon — see the note below). Elementor's fallback here is
 * ".elementor-widget-button .elementor-button" (0,2,0, defaulting to
 * the huge global "Accent" typography), so this needs the same
 * ".elementor-widget-button" prefix, not just ".elementor-button".
 *
 * IMPORTANT — icon size rides on this rule. A button's icon (the
 * arrow, etc.) is an SVG sized in "em" relative to the BUTTON's own
 * font-size, not a separate control. When this rule lost to
 * Elementor's fallback, buttons — and their icons — rendered at the
 * "Accent" global's ~53px instead of 13px (e.g. the oversized arrow
 * on "Browse All FAQ"). Losing this rule silently blows up icon size
 * everywhere a button has an icon, on every page.
 * ------------------------------------------------------------------- */
.elementor-widget-button .elementor-button,
.elementor-widget-button .elementor-button .elementor-button-text,
.elementor-widget-loop-grid .elementor-button,
.elementor-widget-form .elementor-button {
	font-family: var(--cg-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------
 * Counter widget — the big stat numbers ("62+ Years in Business") and,
 * where used, the small label under it. Elementor's fallback for the
 * label is ".elementor-widget-counter .elementor-counter-title" (0,2,0,
 * defaulting to the "Secondary" global), so it needs matching
 * specificity even though nothing on this site currently uses it.
 * ------------------------------------------------------------------- */
.elementor-counter-number {
	font-family: var(--cg-font-heading);
	font-weight: 600;
	font-size: var(--cg-accent-size);
	line-height: 1;
}

.elementor-widget-counter .elementor-counter-title {
	font-family: var(--cg-font-body);
	font-size: 16px;
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Icon box widget — title/description text next to an icon. Elementor's
 * fallback is ".elementor-widget-icon-box .elementor-icon-box-title"
 * (0,2,0, defaulting to the huge "Primary" global), so this needs the
 * same prefix.
 * ------------------------------------------------------------------- */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title a {
	font-family: var(--cg-font-heading);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
}

.elementor-widget-icon-box .elementor-icon-box-description {
	font-family: var(--cg-font-body);
	font-size: var(--cg-text-size);
	font-weight: 400;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------
 * Accordion widget — the FAQ-style question/answer widget (Elementor's
 * native "Accordion", distinct from any custom HTML accordion). Same
 * pattern: Elementor's fallback is ".elementor-widget-accordion
 * .elementor-accordion-title" (0,2,0, defaulting to the huge "Primary"
 * global).
 * ------------------------------------------------------------------- */
.elementor-widget-accordion .elementor-accordion-title {
	font-family: var(--cg-font-heading);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}

.elementor-widget-accordion .elementor-tab-content {
	font-family: var(--cg-font-body);
	font-size: var(--cg-text-size);
	font-weight: 400;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------
 * Icon list widget text. Elementor's fallback is ".elementor-widget-
 * icon-list .elementor-icon-list-item > .elementor-icon-list-text"
 * (0,3,0), so this needs the same shape, not just the bare class.
 * ------------------------------------------------------------------- */
.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-widget-icon-list .elementor-icon-list-item > a {
	font-family: var(--cg-font-body);
	font-size: var(--cg-text-size);
	font-weight: 400;
	line-height: 1.5;
}

/* =======================================================================
 * Opt-in role classes — add one of these as a widget's custom CSS class
 * ("Advanced" tab) to get a specific treatment regardless of which HTML
 * tag the widget uses. Declared after the tag defaults above so they
 * always win (both on specificity and, where tied, on source order),
 * without !important.
 * ===================================================================== */

/* Eyebrow — small uppercase kicker inside a hero or CTA band. The
   custom CSS class lands on the same element as "elementor-widget-
   heading" (Elementor's "Advanced > CSS Classes" adds to the widget's
   own wrapper), so this is one compound selector, not a descendant
   combinator. */
.elementor-widget-heading.cg-eyebrow .elementor-heading-title,
.elementor-widget-heading.cg-hero-eyebrow .elementor-heading-title {
	font-family: var(--cg-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

@media (min-width: 1536px) {
	.elementor-widget-heading.cg-eyebrow .elementor-heading-title,
	.elementor-widget-heading.cg-hero-eyebrow .elementor-heading-title {
		font-size: 16px;
		letter-spacing: 0.04em;
	}
}

/* Hero H1 — the large uppercase page-title heading inside a hero band
   (distinct from the plain h1 default above, used on non-hero-band
   pages like the homepage). */
.elementor-widget-heading.cg-hero-h1 .elementor-heading-title {
	font-family: var(--cg-font-body);
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

@media (min-width: 1024px) {
	.elementor-widget-heading.cg-hero-h1 .elementor-heading-title {
		font-size: 40px;
	}
}

@media (min-width: 1536px) {
	.elementor-widget-heading.cg-hero-h1 .elementor-heading-title {
		font-size: 48px;
	}
}

/* Hero intro paragraph — the lead paragraph next to a hero H1. */
.cg-hero-intro p {
	font-family: var(--cg-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: 0.05em;
}

@media (min-width: 1536px) {
	.cg-hero-intro p {
		font-size: 17px;
		line-height: 1.5;
		letter-spacing: 0.04em;
	}
}

/* CTA band — the closing "let us solve your gear challenge" section. */
.elementor-widget-heading.cg-cta-heading .elementor-heading-title {
	font-family: var(--cg-font-body);
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
	font-size: 28px;
}

@media (min-width: 1536px) {
	.elementor-widget-heading.cg-cta-heading .elementor-heading-title {
		font-size: 36px;
	}
}

.cg-cta-body p {
	font-family: var(--cg-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
}