/* ==========================================================================
   Site-wide type scale — loaded LAST on every page (functions.php,
   cg_consistency_assets) so every page reads the same, whatever its own
   page stylesheet sets. Scoped to the page's own Elementor document
   (header, footer and loop-card templates keep their designed styles:
   every widget selector carries :not(.e-loop-item *)).

   Specificity: "body:not(#cg-type)" adds an ID-level weight (card body and
   lead text use two, so they beat the general body rule) so these
   roles win over the page stylesheets' one-off !important sizes.
   Colours are NOT set here (they depend on light / navy backgrounds).

   Roles
     H1 ............ Space Grotesk 600, 38 → 56px
     H2 ............ Space Grotesk 600, 28 → 40px
     Card heading .. Space Grotesk 600, 20px (H3, and H2s used as card titles)
     Small heading . Space Grotesk 600, 18px (icon-box titles)
     Eyebrow ....... Geist Mono 500, 12px, uppercase, .18em
     Lead .......... Inter 400, 18px (text beside the H1)
     Body .......... Inter 400, 16 → 17px, 1.7
     Card body ..... Inter 400, 15px, 1.6
     List item ..... Inter 400, 15px   (mono chips / tags: Geist Mono 13px)
     Button ........ Inter 600, 13px, uppercase, .08em
   ========================================================================== */

:root {
	--cgt-head: "Space Grotesk", Inter, sans-serif;
	--cgt-body: Inter, sans-serif;
	--cgt-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--cgt-accent: #1B3FA0;
	--cgt-accent-2: #3563E0;
}

/* ── H1 (home keeps its animated display hero) ───────────────────────── */
body:not(#cg-type):not(.home) .elementor[data-elementor-type="wp-page"] .elementor-widget-heading:not(.e-loop-item *) h1.elementor-heading-title {
	font-family: var(--cgt-head) !important;
	font-weight: 600 !important;
	font-size: clamp(2.375rem, 1.6rem + 2.2vw, 3.5rem) !important;
	line-height: 1.08 !important;
	letter-spacing: -.025em !important;
	text-transform: none !important;
}

/* ── H2 section titles ───────────────────────────────────────────────── */
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-heading:not(.e-loop-item *):not([class*="__title"]):not([class*="card"]) h2.elementor-heading-title {
	font-family: var(--cgt-head) !important;
	font-weight: 600 !important;
	font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -.02em !important;
	text-transform: none !important;
}

/* ── Card headings: H3s, and H2s used as card / panel titles ─────────── */
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-heading:not(.e-loop-item *):not([class*="eyebrow"]):not([class*="panel-title"]):not([class*="label"]):not([class*="kicker"]):not([class*="stat"]) h3.elementor-heading-title,
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-heading:not(.e-loop-item *):is([class*="__title"], [class*="card"]) h2.elementor-heading-title {
	font-family: var(--cgt-head) !important;
	font-weight: 600 !important;
	font-size: 20px !important;
	line-height: 1.3 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
}
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-icon-box:not(.e-loop-item *) .elementor-icon-box-title,
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-icon-box:not(.e-loop-item *) .elementor-icon-box-title :is(a, span) {
	font-family: var(--cgt-head) !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	line-height: 1.35 !important;
	letter-spacing: -.01em !important;
	text-transform: none !important;
}

/* ── Eyebrows / kickers / small panel labels ─────────────────────────── */
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-heading:not(.e-loop-item *):is([class*="eyebrow"], [class*="kicker"], [class*="panel-title"]) .elementor-heading-title,
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] [class*="eyebrow"] .elementor-icon-list-text {
	font-family: var(--cgt-mono) !important;
	font-weight: 500 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
}

/* ── Body text ───────────────────────────────────────────────────────── */
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-text-editor:not(.e-loop-item *):not([class*="note"]):not([class*="sub"]):not([class*="caption"]):not([class*="meta"]),
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-text-editor:not(.e-loop-item *):not([class*="note"]):not([class*="sub"]):not([class*="caption"]):not([class*="meta"]) p {
	font-family: var(--cgt-body) !important;
	font-weight: 400;
	font-size: clamp(1rem, .95rem + .2vw, 1.0625rem) !important;
	line-height: 1.7 !important;
	letter-spacing: normal !important;
}
/* Card body: text inside cards, tiles, panels, steps and icon boxes, plus
   component text widgets named like "block__text" / "gauge__t" / "__desc" */
body:not(#cg-type):not(#cg-type-2) .elementor[data-elementor-type="wp-page"] :is([class*="card"], [class*="tile"], [class*="cgin-app"], [class*="cgin-feat"], [class*="step"], [class*="panel"], [class*="stat"]) .elementor-widget-text-editor:not(.e-loop-item *),
body:not(#cg-type):not(#cg-type-2) .elementor[data-elementor-type="wp-page"] :is([class*="card"], [class*="tile"], [class*="cgin-app"], [class*="cgin-feat"], [class*="step"], [class*="panel"], [class*="stat"]) .elementor-widget-text-editor:not(.e-loop-item *) p,
body:not(#cg-type):not(#cg-type-2) .elementor[data-elementor-type="wp-page"] .elementor-widget-text-editor:not(.e-loop-item *):is([class*="__t"], [class*="__desc"], [class*="mini"]),
body:not(#cg-type):not(#cg-type-2) .elementor[data-elementor-type="wp-page"] .elementor-widget-text-editor:not(.e-loop-item *):is([class*="__t"], [class*="__desc"], [class*="mini"]) p,
body:not(#cg-type):not(#cg-type-2) .elementor[data-elementor-type="wp-page"] .elementor-widget-icon-box:not(.e-loop-item *) .elementor-icon-box-description {
	font-family: var(--cgt-body) !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	letter-spacing: normal !important;
}
/* Lead: the paragraph(s) sitting next to the page H1 (after card body so a hero never counts as a card) */
body:not(#cg-type):not(#cg-type-2) .elementor[data-elementor-type="wp-page"] .e-con:has(> .elementor-widget-heading:not(.e-loop-item *) h1) > .elementor-widget-text-editor:not(.e-loop-item *),
body:not(#cg-type):not(#cg-type-2) .elementor[data-elementor-type="wp-page"] .e-con:has(> .elementor-widget-heading:not(.e-loop-item *) h1) > .elementor-widget-text-editor:not(.e-loop-item *) p {
	font-size: 18px !important;
	line-height: 1.65 !important;
}
/* Accordion answers */
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-accordion:not(.e-loop-item *) .elementor-tab-content,
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-accordion:not(.e-loop-item *) .elementor-tab-content p {
	font-family: var(--cgt-body) !important;
	font-size: 16px !important;
	line-height: 1.7 !important;
}
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-accordion:not(.e-loop-item *) .elementor-tab-title,
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-accordion:not(.e-loop-item *) .elementor-tab-title a {
	font-family: var(--cgt-head) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	line-height: 1.45 !important;
	letter-spacing: -.005em !important;
}

/* ── Lists ───────────────────────────────────────────────────────────── */
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-icon-list:not(.e-loop-item *):not([class*="eyebrow"]):not([class*="chip"]):not([class*="tag"]):not([class*="machines"]) .elementor-icon-list-text {
	font-family: var(--cgt-body) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-icon-list:not(.e-loop-item *):is([class*="chip"], [class*="tag"], [class*="machines"]) .elementor-icon-list-text {
	font-family: var(--cgt-mono) !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	letter-spacing: .02em !important;
}
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] :is(.elementor-widget-text-editor:not(.e-loop-item *), .cgin-list) li {
	font-size: 15px !important;
	line-height: 1.5 !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-button:not(.e-loop-item *),
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-button:not(.e-loop-item *) .elementor-button-text {
	font-family: var(--cgt-body) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
}

/* ── Text links + hover colour ───────────────────────────────────────── */
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-text-editor:not(.e-loop-item *) a:not(.elementor-button:not(.e-loop-item *)) {
	color: var(--cgt-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .2s ease;
}
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-text-editor:not(.e-loop-item *) a:not(.elementor-button:not(.e-loop-item *)):hover { color: var(--cgt-accent-2); }
/* On navy sections, links stay readable */
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] :is([class*="--light"], [class*="dark"]) .elementor-widget-text-editor:not(.e-loop-item *) a:not(.elementor-button:not(.e-loop-item *)) { color: #9DB8FF; }
body:not(#cg-type) .elementor[data-elementor-type="wp-page"] :is([class*="--light"], [class*="dark"]) .elementor-widget-text-editor:not(.e-loop-item *) a:not(.elementor-button:not(.e-loop-item *)):hover { color: #fff; }

/* ── Careers page job board (custom markup, not widgets) ─────────────── */
body:not(#cg-type) .cgj-card__title,
body:not(#cg-type) .cgj-apply__title { font: 600 20px/1.3 var(--cgt-head) !important; letter-spacing: -.01em !important; }
body:not(#cg-type) .cgj-detail__title { font: 600 clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem)/1.15 var(--cgt-head) !important; letter-spacing: -.02em !important; }
body:not(#cg-type) :is(.cgj-card__label, .cgj-panel__kicker, .cgj-detail__eyebrow, .cgj-detail__h) { font: 500 12px/1.4 var(--cgt-mono) !important; letter-spacing: .18em !important; text-transform: uppercase !important; }
body:not(#cg-type) :is(.cgj-detail__summary, .cgj-apply__text) { font-size: 16px !important; line-height: 1.7 !important; }
body:not(#cg-type) :is(.cgj-card__role, .cgj-detail__role, .cgj-detail__meta li) { font-size: 15px !important; }

@media (max-width: 767px) {
	body:not(#cg-type):not(#cg-type-2) .elementor[data-elementor-type="wp-page"] .e-con:has(> .elementor-widget-heading:not(.e-loop-item *) h1) > .elementor-widget-text-editor:not(.e-loop-item *),
	body:not(#cg-type):not(#cg-type-2) .elementor[data-elementor-type="wp-page"] .e-con:has(> .elementor-widget-heading:not(.e-loop-item *) h1) > .elementor-widget-text-editor:not(.e-loop-item *) p { font-size: 16px !important; }
	body:not(#cg-type) .elementor[data-elementor-type="wp-page"] .elementor-widget-heading:not(.e-loop-item *):not([class*="eyebrow"]):not([class*="panel-title"]):not([class*="label"]):not([class*="kicker"]):not([class*="stat"]) h3.elementor-heading-title { font-size: 18px !important; }
}

/* ==========================================================================
   Content rail — banner text starts on the same line as the logo and the
   breadcrumb. The header (template 315) is a 1248px boxed row with a 24px
   gutter, so that line is max(24px, (100% - 1248px) / 2) on every screen.
   Each hero family below is pulled onto it ("#cg-rail" only adds weight so
   these beat the per-page Elementor responsive padding).
   ========================================================================== */

/* Company, resource, product, capability and hub heroes: a full-width section
   holding a "*-hero__box" (cgh-, cgt-, cgq-, cgr-, cgp-, cgc- … prefixes) */
body:not(#cg-rail) .elementor-element.e-con.e-parent:has(> .e-con[class*="-hero__box"]) {
	--padding-left: max(24px, calc((100% - 1248px) / 2)) !important;
	--padding-right: max(24px, calc((100% - 1248px) / 2)) !important;
}
body:not(#cg-rail) .elementor-element.e-con.e-parent > .elementor-element.e-con[class*="-hero__box"] {
	--padding-left: 0px !important;
	--padding-right: 0px !important;
	--width: 100% !important;
	width: 100% !important;
	max-width: none !important;
}

/* Hero spec chips: drop Elementor's -8px inline-list offset so the first chip sits on the rail */
body:not(#cg-rail) .cgpd-chips .elementor-icon-list-items.elementor-inline-items { margin-left: 0 !important; }

/* About page (82): classless hero, 60px + 10px + 10px of nested padding */
body.page-id-82:not(#cg-rail) .elementor-element.elementor-element-cf197d9.e-con {
	--padding-left: max(24px, calc((100% - 1248px) / 2)) !important;
	--padding-right: max(24px, calc((100% - 1248px) / 2)) !important;
}
body.page-id-82:not(#cg-rail) .elementor-element.elementor-element-14ef9f7.e-con {
	--padding-left: 0px !important;
	--padding-right: 0px !important;
	--width: 100% !important;
	width: 100% !important;
	max-width: none !important;
}
body.page-id-82:not(#cg-rail) .elementor-element.elementor-element-e72cb90.e-con { --padding-left: 0px !important; }

/* Industry pages (the hero section holding .cgin-hero-title) */
body.cg-industry-page:not(#cg-rail) .elementor-element.e-con.e-parent:has(.cgin-hero-title) {
	--content-width: 1248px !important;
	--padding-left: 24px !important;
	--padding-right: 24px !important;
}

/* Article pages: hero + body rows pad their children 24px, so their box is
   1248 + 2×24; "Keep reading" pads itself, so its box is 1248. */
body.single-article:not(#cg-rail) .elementor-element:is(.elementor-element-art0hero, .elementor-element-art0box).e-con { --content-width: 1296px !important; }
body.single-article:not(#cg-rail) .elementor-element.elementor-element-art0related.e-con { --content-width: 1248px !important; }

/* Home hero: one 24px gutter instead of two nested 20px ones */
body.home:not(#cg-rail) .elementor-element.cgx-hero.e-con {
	--padding-left: 0px !important;
	--padding-right: 0px !important;
}
body.home:not(#cg-rail) .elementor-element.cgx-hero.e-con > .e-con-boxed {
	--content-width: 1248px !important;
	--padding-left: 24px !important;
	--padding-right: 24px !important;
}

/* ==========================================================================
   Breadcrumb — every page's breadcrumb row is a container with class
   "cg-breadcrumb" holding Heading widgets tagged cg-breadcrumb-link /
   -sep / -current (-home on the first). Edit the crumbs in Elementor; the
   look comes from here. "cg-breadcrumb--dark" = on a navy hero (articles).
   ========================================================================== */
body:not(#cg-bc) .elementor-element.cg-breadcrumb.e-con:not(.cg-breadcrumb--dark) {
	--content-width: 1248px !important;
	--padding-top: 0px !important;
	--padding-bottom: 0px !important;
	--padding-left: 24px !important;
	--padding-right: 24px !important;
	--min-height: 48px !important;
	background: #F8FAFC !important;
	border-style: solid !important;
	border-width: 0 0 1px !important;
	border-color: #E3E8EF !important;
}
body:not(#cg-bc) .elementor-element.cg-breadcrumb.e-con > .e-con-inner,
body:not(#cg-bc) .elementor-element.cg-breadcrumb.e-con.e-con-full {
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 0 !important;
	min-width: 0;
	overflow: hidden;
}
body:not(#cg-bc) .cg-breadcrumb:not(.cg-breadcrumb--dark) > .e-con-inner { min-height: 48px; }
body:not(#cg-bc) .cg-breadcrumb .elementor-widget-heading.elementor-element {
	flex: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
body:not(#cg-bc) .cg-breadcrumb .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	font: 500 13px/1.4 var(--cgt-body) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: nowrap;
	color: #5A6678 !important;
}

/* Links: quiet slate, underline draws in on hover */
body:not(#cg-bc) .cg-breadcrumb-link .elementor-heading-title a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
	color: inherit !important;
	text-decoration: none !important;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: color .2s ease, background-size .25s ease;
}
body:not(#cg-bc) .cg-breadcrumb-link .elementor-heading-title a:hover { color: var(--cgt-accent) !important; background-size: 100% 1px; }
body:not(#cg-bc) .cg-breadcrumb-link .elementor-heading-title a:focus-visible { outline: 2px solid var(--cgt-accent); outline-offset: 3px; border-radius: 3px; }

/* Home gets a small house icon */
body:not(#cg-bc) .cg-breadcrumb-home .elementor-heading-title a::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: -1px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Separator: the "/" text is swapped for a small chevron */
body:not(#cg-bc) .cg-breadcrumb-sep .elementor-heading-title {
	justify-content: center;
	width: 26px;
	font-size: 0 !important;
	color: #A7B1BF !important;
}
body:not(#cg-bc) .cg-breadcrumb-sep .elementor-heading-title::before {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Current page: darker, semi-bold, truncates on narrow screens */
body:not(#cg-bc) .cg-breadcrumb .cg-breadcrumb-current.elementor-widget-heading.elementor-element { flex: 0 1 auto !important; min-width: 0; overflow: hidden; }
body:not(#cg-bc) .cg-breadcrumb-current .elementor-heading-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 600 !important;
	color: #0C1825 !important;
}

/* On a navy hero (article pages) */
body:not(#cg-bc) .cg-breadcrumb--dark .elementor-heading-title { color: #9AA8BD !important; }
body:not(#cg-bc) .cg-breadcrumb--dark .cg-breadcrumb-link .elementor-heading-title a:hover { color: #fff !important; }
body:not(#cg-bc) .cg-breadcrumb--dark .cg-breadcrumb-link .elementor-heading-title a:focus-visible { outline-color: #9DB8FF; }
body:not(#cg-bc) .cg-breadcrumb--dark .cg-breadcrumb-sep .elementor-heading-title { color: rgba(157, 184, 255, .45) !important; }
body:not(#cg-bc) .cg-breadcrumb--dark .cg-breadcrumb-current .elementor-heading-title { color: #fff !important; }

@media (max-width: 767px) {
	body:not(#cg-bc) .elementor-element.cg-breadcrumb.e-con:not(.cg-breadcrumb--dark) { --min-height: 44px !important; }
	body:not(#cg-bc) .cg-breadcrumb:not(.cg-breadcrumb--dark) > .e-con-inner { min-height: 44px; }
	body:not(#cg-bc) .cg-breadcrumb .elementor-heading-title { font-size: 12.5px !important; }
	body:not(#cg-bc) .cg-breadcrumb-sep .elementor-heading-title { width: 22px; font-size: 0 !important; }
}
