/*
Theme Name:   EGI Battery
Theme URI:    https://egibattery.com
Description:  Blocksy child theme for EGI Battery. Header, footer, palette and base typography live in the Customizer; this theme adds block styles and the section styling from the approved v8 design (navy + teal, Barlow / Barlow Condensed).
Author:       My Project Solution
Author URI:   https://myprojectsolution.net
Template:     blocksy
Version:      2.0.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain:  egi-battery
*/

/* ---------------------------------------------------------------------------
 * Tokens (v8 design handoff). Colors come from the Blocksy global palette
 * (Customize → Colors):
 *   1 Teal · 2 Teal Light · 3 Ink Soft · 4 Navy · 5 Border · 6 Light
 *   7 Card Grey · 8 White · 9 Teal Dark · 10 Hero Navy · 11 Footer · 12 Black
 * Teal is the only accent. Do not use electric blue (#09AAFF); the client
 * rejected it.
 * ------------------------------------------------------------------------- */
:root {
	--egi-teal: var(--theme-palette-color-1, #00b4a5);
	--egi-teal-light: var(--theme-palette-color-2, #3fd6c4);
	--egi-ink-soft: var(--theme-palette-color-3, #3d443b);
	--egi-navy: var(--theme-palette-color-4, #131b29);
	--egi-light: var(--theme-palette-color-6, #f5f6f3);
	--egi-teal-dark: var(--theme-palette-color-9, #007d72);
	--egi-footer: var(--theme-palette-color-11, #0d1320);
	--egi-ink: #0e1210;
	--egi-hairline: rgba(14, 18, 16, 0.1);

	--egi-font: Barlow, Helvetica, Arial, sans-serif;
	--egi-font-condensed: 'Barlow Condensed', Barlow, 'Arial Narrow', sans-serif;

	--egi-grad-hero: linear-gradient(180deg, #192639, #1f394f);
	--egi-grad-connect: linear-gradient(90deg, #131b29 0%, #131f2b 30%, #162832 50%, #14343a 72%, #054648 100%);
	--egi-grad-panel: linear-gradient(160deg, #1e2c40, #121a27);
	--egi-grad-strip: linear-gradient(90deg, #0f1521, #22324a 50%, #0f1521);

	/* Header row height (Customize → Header → Main Row); overlay heads clear it. */
	--egi-header-h: 114px;

	/* Side padding 88 / 48 / 20px. Blocksy's container width is
	   min(edge spacing, 1264px), so this sets the gutter at every width. */
	--theme-container-edge-spacing: calc(100vw - 176px);
}

@media (max-width: 1200px) {
	:root {
		--theme-container-edge-spacing: calc(100vw - 96px);
	}
}

@media (max-width: 999.98px) {
	:root {
		--egi-header-h: 78px;
	}
}

@media (max-width: 820px) {
	:root {
		--theme-container-edge-spacing: calc(100vw - 40px);
	}
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Anchor targets (#products, #manufacturing) clear the sticky header if one is enabled. */
[id] {
	scroll-margin-top: var(--header-sticky-height, 0px);
}

/* Dark surfaces: palette 4 (Navy), 10, 11, 12, and cover/gradient sections. */
:is(
	.has-palette-color-4-background-color,
	.has-palette-color-10-background-color,
	.has-palette-color-11-background-color,
	.has-palette-color-12-background-color,
	.wp-block-cover.egi-section,
	.egi-hero,
	.egi-connect
) {
	--theme-heading-color: #fff;
	--theme-text-color: rgba(255, 255, 255, 0.85);
	--theme-link-initial-color: #fff;
	--theme-link-hover-color: var(--egi-teal-light);
	color: #fff;
}

/* Headings: Barlow Condensed 700 caps (family/weight also set in Customize → Typography). */
:is(h1, h2, h3, .wp-block-post-title) {
	font-family: var(--egi-font-condensed);
	font-weight: 700;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * Block styles
 * ------------------------------------------------------------------------- */

/* Paragraph: Eyebrow */
.is-style-egi-eyebrow {
	font-family: var(--egi-font);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--egi-teal-dark);
}

:is(
	.has-palette-color-4-background-color,
	.has-palette-color-10-background-color,
	.has-palette-color-11-background-color,
	.wp-block-cover,
	.egi-hero
) .is-style-egi-eyebrow:not(.has-text-color) {
	color: var(--egi-teal-light);
}

/* Paragraph: Chip — place several inside a Row group with class egi-chips. */
.is-style-egi-chip {
	display: inline-block;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid rgba(63, 214, 196, 0.45);
	border-radius: 3px;
	background: rgba(63, 214, 196, 0.08);
	font-family: var(--egi-font);
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.is-style-egi-chip:not(.has-text-color) {
	color: var(--egi-teal-light);
}

/* Paragraph: Muted caption */
.is-style-egi-caption {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5a6156;
}

/* Buttons. The solid teal button is Blocksy's default (Customize → General →
   Buttons); "Outline (on dark)" is the ghost button. */
.wp-block-button .wp-block-button__link {
	--theme-button-text-initial-color: var(--egi-ink);
	--theme-button-text-hover-color: var(--egi-ink);
	--theme-button-background-hover-color: var(--egi-teal-light);
	min-height: 0;
	padding: 18px 32px;
	border-radius: 3px;
	font-family: var(--egi-font);
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wp-block-button.is-style-egi-outline-light .wp-block-button__link {
	--theme-button-background-initial-color: transparent;
	--theme-button-background-hover-color: rgba(255, 255, 255, 0.08);
	--theme-button-text-initial-color: #fff;
	--theme-button-text-hover-color: #fff;
	padding: 17px 31px;
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.wp-block-button.is-style-egi-outline-light .wp-block-button__link:hover {
	border-color: #fff;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

/* Group: Card / Card (dark) */
.wp-block-group.is-style-egi-card {
	background-color: #fff;
	border: 1px solid var(--egi-hairline);
}

.wp-block-group.is-style-egi-card-dark {
	background-color: var(--egi-navy);
	color: #fff;
	--theme-heading-color: #fff;
	--theme-link-initial-color: #fff;
	--theme-link-hover-color: var(--egi-teal-light);
}

/* Image: Black panel — the gradient product panel. */
.wp-block-image.is-style-egi-black-box {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--egi-grad-panel);
	border: 1px solid rgba(63, 214, 196, 0.3);
}

.wp-block-image.is-style-egi-black-box img {
	width: 100%;
	height: auto;
}

/* Post terms: News tag (hangs off the top-left corner of the image). */
.wp-block-post-terms.is-style-egi-news-tag {
	position: absolute;
	top: -12px;
	left: -12px;
	z-index: 1;
	margin: 0;
	padding: 12px 16px;
	background: var(--egi-teal);
	color: var(--egi-ink);
	font-family: var(--egi-font);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wp-block-post-terms.is-style-egi-news-tag a {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Section rhythm. The client asked for consistent spacing:
 *   eyebrow → heading 24 · heading → body 28 · body → chips/buttons 32 ·
 *   chips → buttons 40 (about 20 / 22 / 24 / 28 on mobile).
 * Blocks carry no spacing of their own; it all lives here.
 * ------------------------------------------------------------------------- */
.entry-content > .egi-section.alignfull,
.editor-styles-wrapper .egi-section.alignfull {
	margin-block: 0;
}

/* padding-inline: 0 overrides core's default padding on Groups with a background,
   so every section shares the container gutter. */
.egi-section {
	padding-block: 110px;
	padding-inline: 0;
}

/* Zero-specificity-on-the-list reset, so every margin rule below wins. */
.egi-section :where(p, h1, h2, h3, figure, .wp-block-buttons, .egi-chips, .wp-block-columns, .wp-block-group, .wp-block-query) {
	margin-block: 0;
}

.egi-section :is(h1, h2, h3) {
	text-wrap: balance;
}

.egi-section h2 {
	margin-bottom: 28px;
	font-size: 54px;
	line-height: 1;
}

/* Body copy (chips are paragraphs too, so they're excluded). */
.egi-section p:where(:not(.is-style-egi-chip)) {
	font-size: 17px;
	line-height: 1.7;
	color: var(--egi-ink-soft);
}

.egi-section p:where(:not(.is-style-egi-chip)):not(:last-child) {
	margin-bottom: 32px;
}

.egi-section:is(.has-palette-color-4-background-color, .egi-connect, .egi-hero) p:where(:not(.is-style-egi-chip)) {
	color: rgba(255, 255, 255, 0.85);
}

.egi-section p.is-style-egi-eyebrow {
	margin-bottom: 24px;
	color: var(--egi-teal-dark);
	font-size: 14px;
	line-height: 1.4;
}

.egi-section p.egi-lede {
	margin-bottom: 36px;
	font-size: 20px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
}

.egi-section .egi-split-title {
	margin-bottom: 28px;
	font-size: 40px;
	line-height: 1.15;
}

.egi-section .wp-block-buttons {
	gap: 16px;
}

.egi-chips.is-layout-flex {
	gap: 12px;
	flex-wrap: nowrap;
}

.egi-chips--wide .is-style-egi-chip {
	padding-inline: 30px;
}

.egi-section .egi-chips + .wp-block-buttons {
	margin-top: 40px;
}

.egi-section .wp-block-columns {
	gap: 64px;
	align-items: center;
}

/* Designed line breaks only apply on desktop. Every <br> in a heading has a
   space before it, so hiding it never merges words. */
@media (max-width: 1200px) {
	.egi-section h2 {
		font-size: 44px;
	}

	.egi-section .egi-split-title {
		font-size: 34px;
	}

	.egi-section :is(h1, h2) br {
		display: none;
	}

	.egi-section .wp-block-columns {
		gap: 40px;
	}

	.egi-chips.is-layout-flex {
		flex-wrap: wrap;
	}
}

@media (max-width: 820px) {
	.egi-section {
		padding-block: 56px;
	}

	.egi-section .wp-block-columns {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.egi-section .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		width: 100%;
	}

	.egi-section p.is-style-egi-eyebrow {
		margin-bottom: 20px;
		font-size: 12px;
		letter-spacing: 0.18em;
	}

	.egi-section h2 {
		margin-bottom: 22px;
		font-size: 34px;
	}

	.egi-section .egi-split-title {
		margin-bottom: 20px;
		font-size: 28px;
	}

	.egi-section p:where(:not(.is-style-egi-chip)) {
		font-size: 15px;
	}

	.egi-section p:where(:not(.is-style-egi-chip)):not(:last-child) {
		margin-bottom: 24px;
	}

	.egi-section p.egi-lede {
		margin-bottom: 28px;
		font-size: 16px;
	}

	.egi-section .egi-chips + .wp-block-buttons {
		margin-top: 28px;
	}

	.egi-chips.is-layout-flex {
		gap: 8px;
	}

	.is-style-egi-chip {
		font-size: 11px;
		padding: 9px 11px;
	}

	.egi-chips--wide .is-style-egi-chip {
		padding-inline: 16px;
	}

	.egi-section .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.egi-section .wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.egi-section .wp-block-button__link {
		display: block;
		width: 100%;
		padding: 16px;
		font-size: 15px;
		text-align: center;
	}

	.egi-section .wp-block-button.is-style-egi-outline-light .wp-block-button__link {
		padding: 15px;
	}
}

/* ---------------------------------------------------------------------------
 * Header. functions.php adds .egi-overlay-header when a page opens with an
 * .egi-page-head section; the header then sits transparent on top of it.
 * ------------------------------------------------------------------------- */
.egi-overlay-header #main-container {
	position: relative;
}

.egi-overlay-header #header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 50;
}

.egi-overlay-header #header [data-row*="middle"] {
	background: transparent;
	border-bottom: 0;
}

/* Contact page: hairline under the nav. */
.egi-head-hairline #header [data-row*="middle"] {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Contact button at the end of the menu (menu item CSS class: egi-nav-cta). */
#header .menu-item.egi-nav-cta {
	margin-inline-start: 8px;
}

#header .menu-item.egi-nav-cta > .ct-menu-link {
	height: auto;
	padding: 13px 24px;
	border-radius: 3px;
	background: var(--egi-teal);
	color: var(--egi-ink);
	transition: background-color 0.15s ease;
}

#header .menu-item.egi-nav-cta > .ct-menu-link:hover,
#header .menu-item.egi-nav-cta.current-menu-item > .ct-menu-link {
	background: var(--egi-teal-light);
	color: var(--egi-ink);
}

#offcanvas .menu-item.egi-nav-cta > .ct-menu-link {
	justify-content: center;
	margin-top: 12px;
	padding: 16px 24px;
	border-radius: 3px;
	background: var(--egi-teal);
	color: var(--egi-ink);
}

@media (max-width: 1200px) {
	#header [data-id="menu"] > ul > li:not(.egi-nav-cta) > .ct-menu-link {
		padding-inline: 12px;
	}
}

/* ---------------------------------------------------------------------------
 * Page heads (Home hero, Company photo head, Contact)
 * ------------------------------------------------------------------------- */
.egi-overlay-header .entry-content > .egi-page-head:first-child {
	padding-top: calc(var(--egi-header-h) + 64px);
	padding-bottom: 88px;
}

.egi-page-head.wp-block-cover {
	min-height: 0;
	padding-inline: 0;
}

.egi-page-head .wp-block-cover__inner-container {
	width: var(--theme-container-width);
	max-width: var(--theme-normal-container-max-width);
	margin-inline: auto;
}

.egi-page-head h1 {
	font-size: 76px;
	line-height: 0.98;
	letter-spacing: 0.01em;
	color: #fff;
}

@media (max-width: 1200px) {
	.egi-page-head h1 {
		font-size: 60px;
	}
}

@media (max-width: 820px) {
	.egi-overlay-header .entry-content > .egi-page-head:first-child {
		padding-top: calc(var(--egi-header-h) + 36px);
		padding-bottom: 52px;
	}

	.egi-page-head h1 {
		font-size: 44px;
	}
}

/* Home hero: navy gradient, 55/45 grid, fills most of the first screen. */
.egi-overlay-header .entry-content > .egi-hero:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: clamp(720px, 100vh, 1100px);
	padding-top: calc(var(--egi-header-h) + 24px);
	padding-bottom: 88px;
	background: var(--egi-grad-hero);
}

.egi-hero-grid.wp-block-columns {
	gap: 48px;
}

.egi-hero p.is-style-egi-eyebrow {
	letter-spacing: 0.22em;
}

.egi-hero h1 {
	margin-bottom: 28px;
	font-size: 84px;
	line-height: 0.96;
}

.egi-hero p.egi-lede {
	max-width: 560px;
}

@media (max-width: 1200px) {
	.egi-hero h1 {
		font-size: 64px;
	}
}

/* Mobile order: text → image → buttons. */
@media (max-width: 820px) {
	.egi-overlay-header .entry-content > .egi-hero:first-child {
		min-height: 0;
		padding-top: calc(var(--egi-header-h) + 32px);
		padding-bottom: 48px;
	}

	.egi-hero h1 {
		margin-bottom: 22px;
		font-size: 52px;
	}

	.egi-hero-grid > .wp-block-column:first-child {
		display: contents;
	}

	.egi-hero-grid > .wp-block-column:last-child {
		order: 3;
	}

	.egi-hero-grid .wp-block-buttons {
		order: 4;
	}

	.egi-hero-grid.wp-block-columns {
		gap: 0;
	}

	.egi-hero-grid > .wp-block-column:last-child {
		margin-bottom: 28px;
	}
}

/* ---------------------------------------------------------------------------
 * Home — manufacturing. Mobile order: eyebrow → H2 → video → body.
 * ------------------------------------------------------------------------- */
.egi-mfg-top.wp-block-columns {
	gap: 56px;
}

.egi-mfg-top .is-style-egi-video img {
	width: 100%;
	height: 450px;
	object-fit: cover;
}

.egi-cards3.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 64px;
}

.egi-card {
	padding: 32px;
	background: #fff;
	border: 1px solid var(--egi-hairline);
	border-top: 3px solid var(--egi-teal);
}

.egi-section .egi-card h3 {
	margin-bottom: 16px;
	font-size: 28px;
	line-height: 1.1;
}

.egi-section .egi-card p {
	font-size: 16px;
	line-height: 1.65;
}

@media (max-width: 1200px) {
	.egi-mfg-top .is-style-egi-video img {
		height: 360px;
	}
}

@media (max-width: 820px) {
	.egi-mfg-top > .wp-block-column:first-child {
		display: contents;
	}

	.egi-mfg-top p.is-style-egi-eyebrow { order: 0; margin: 0; }
	.egi-mfg-top h2 { order: 1; margin: 0; }
	.egi-mfg-top > .wp-block-column:last-child { order: 2; }
	.egi-mfg-top p:not(.is-style-egi-eyebrow) { order: 3; }

	.egi-mfg-top .is-style-egi-video img {
		height: 200px;
	}

	.egi-cards3.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		margin-top: 32px;
	}

	.egi-card {
		padding: 22px;
	}

	.egi-section .egi-card h3 {
		margin-bottom: 12px;
		font-size: 22px;
	}

	.egi-section .egi-card p {
		font-size: 14px;
	}
}

/* ---------------------------------------------------------------------------
 * Home — products (navy): portfolio intro, benefit tiles, two splits.
 * ------------------------------------------------------------------------- */
.egi-section.egi-products {
	padding-bottom: 48px;
}

.egi-pf-top.wp-block-columns {
	gap: 64px;
}

.egi-section .egi-pf-top p:where(:not(.is-style-egi-chip, .is-style-egi-eyebrow)) {
	font-size: 16px;
}

.egi-benefits.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	padding: 110px 0 48px;
}

.egi-benefit {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.egi-benefit:hover {
	border-color: rgba(63, 214, 196, 0.5);
	background: rgba(63, 214, 196, 0.05);
}

/* Icon box (52px, teal tint). Icon files are uniform squares, glyph centered. */
.egi-benefit > .wp-block-image {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(63, 214, 196, 0.45);
	border-radius: 3px;
	background: rgba(63, 214, 196, 0.08);
}

.egi-benefit > .wp-block-image img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

.egi-section .egi-benefit h3 {
	margin-bottom: 14px;
	font-size: 26px;
	line-height: 1.05;
}

.egi-section .egi-benefit p {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.egi-split--ff.wp-block-columns {
	padding: 110px 0 48px;
}

.egi-split--dc.wp-block-columns {
	padding: 110px 0 62px;
}

.egi-split .wp-block-image img {
	width: 100%;
	height: auto;
}

@media (max-width: 1200px) {
	.egi-benefits.wp-block-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	/* Products: the panel goes above the text. */
	.egi-pf-top.wp-block-columns {
		flex-direction: column-reverse;
	}

	.egi-pf-top .is-style-egi-black-box {
		padding: 16px;
	}

	.egi-benefits.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: 56px 0 24px;
	}

	.egi-benefit {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
		padding: 22px;
	}

	.egi-benefit > .wp-block-image {
		width: 44px;
		height: 44px;
	}

	.egi-benefit > .wp-block-image img {
		width: 26px;
		height: 26px;
	}

	.egi-section .egi-benefit h3 {
		margin-bottom: 10px;
		font-size: 20px;
	}

	.egi-section .egi-benefit p {
		font-size: 14px;
	}

	.egi-split--ff.wp-block-columns,
	.egi-split--dc.wp-block-columns {
		padding: 32px 0;
	}

	/* Split images: above the text, 85% wide. */
	.egi-split--dc.wp-block-columns {
		flex-direction: column-reverse;
	}

	.egi-split .wp-block-image {
		width: 85%;
		margin-inline: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Home — markets (4 → 2 → 2 cards)
 * ------------------------------------------------------------------------- */
.egi-section.egi-markets-sec {
	padding-bottom: 150px;
}

.egi-markets-sec h2 {
	margin-bottom: 56px;
}

.egi-markets.wp-block-group {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.egi-market {
	background: #fff;
	border: 1px solid var(--egi-hairline);
	border-top: 3px solid var(--egi-teal);
}

.egi-market .wp-block-image img {
	display: block;
	width: 100%;
	height: 230px;
	object-fit: cover;
}

.egi-market-body {
	padding: 26px 24px 32px;
}

.egi-section .egi-market h3 {
	margin-bottom: 14px;
	font-size: 26px;
	line-height: 1;
}

.egi-section .egi-market p {
	font-size: 14px;
	line-height: 1.6;
}

@media (max-width: 1200px) {
	.egi-markets.wp-block-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.egi-section.egi-markets-sec {
		padding-bottom: 56px;
	}

	.egi-markets-sec h2 {
		margin-bottom: 28px;
	}

	.egi-markets.wp-block-group {
		gap: 12px;
	}

	.egi-market .wp-block-image img {
		height: 110px;
	}

	.egi-market-body {
		padding: 14px;
	}

	.egi-section .egi-market h3 {
		margin-bottom: 8px;
		font-size: 19px;
	}

	.egi-section .egi-market p {
		font-size: 12px;
		line-height: 1.55;
	}
}

/* ---------------------------------------------------------------------------
 * Centered CTAs (Talk With an Engineer, Let's connect)
 * ------------------------------------------------------------------------- */
.egi-center-cta {
	text-align: center;
}

/* The reference's 900px "narrow" wrap includes 88px side padding: 724px of text. */
.egi-section .egi-narrow {
	max-width: 724px;
}

.egi-center-cta .wp-block-buttons {
	justify-content: center;
}

.egi-section.egi-center-cta p.egi-lede {
	margin-bottom: 40px;
	font-size: 19px;
	line-height: 1.65;
}

.egi-connect {
	background: var(--egi-grad-connect);
}

.egi-connect .wp-block-button__link {
	padding-inline: 40px;
}

@media (max-width: 820px) {
	.egi-section.egi-center-cta p.egi-lede {
		margin-bottom: 28px;
		font-size: 15px;
	}
}

/* ---------------------------------------------------------------------------
 * Company — photo head, mission, partner logos
 * ------------------------------------------------------------------------- */
.egi-section.egi-mission {
	padding-block: 96px;
}

.egi-mission-cols.wp-block-columns {
	gap: 72px;
	align-items: flex-start;
}

.egi-section p.egi-lead {
	margin: 0;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.45;
	color: var(--egi-ink);
}

.egi-section p.egi-pull {
	margin-top: 28px;
	font-family: var(--egi-font-condensed);
	font-weight: 700;
	font-size: 34px;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--egi-teal-dark);
}

.egi-mission p:not(.egi-lead):not(.egi-pull):not(:last-child) {
	margin-bottom: 20px;
}

.egi-section.egi-partners {
	padding-block: 56px;
}

.egi-logo-strip.wp-block-group {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	align-items: center;
	justify-items: center;
	gap: 32px;
	padding: 34px 48px;
	background: var(--egi-grad-strip);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.egi-logo-strip .wp-block-image img {
	width: auto;
	max-width: 100%;
	height: 44px;
	object-fit: contain;
}

@media (max-width: 1200px) {
	.egi-logo-strip.wp-block-group {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: 28px;
	}

	.egi-logo-strip .wp-block-image img {
		height: 36px;
	}
}

@media (max-width: 820px) {
	.egi-section.egi-mission {
		padding-block: 56px;
	}

	.egi-mission-cols.wp-block-columns {
		gap: 28px;
	}

	.egi-section p.egi-lead {
		font-size: 19px;
	}

	.egi-section p.egi-pull {
		margin-top: 22px;
		font-size: 26px;
	}

	.egi-section.egi-partners {
		padding-block: 32px;
	}

	.egi-logo-strip.wp-block-group {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 22px 16px;
		padding: 22px 16px;
	}

	.egi-logo-strip .wp-block-image img {
		height: 24px;
	}
}

/* ---------------------------------------------------------------------------
 * Company — news (two articles, side by side)
 * ------------------------------------------------------------------------- */
.egi-news-sec h2 {
	margin-bottom: 56px;
}

.egi-news .wp-block-post-template.is-layout-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	margin: 0;
	padding: 12px 0 0 12px;
}

.egi-news-media {
	position: relative;
	background: #e8eae5;
}

.egi-news-media .wp-block-post-featured-image {
	margin: 0;
}

.egi-news-media .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.egi-news .wp-block-post-title {
	margin-top: 28px !important;
	font-size: 30px;
	line-height: 1.15;
}

.egi-news .wp-block-post-title a {
	color: var(--egi-ink);
	transition: color 0.15s ease;
}

.egi-news .wp-block-post-title a:hover {
	color: var(--egi-teal-dark);
}

@media (max-width: 820px) {
	.egi-news-sec h2 {
		margin-bottom: 32px;
	}

	.egi-news .wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		padding-left: 10px;
	}

	.wp-block-post-terms.is-style-egi-news-tag {
		top: -10px;
		left: -10px;
		padding: 9px 12px;
		font-size: 11px;
	}

	.egi-news .wp-block-post-title {
		margin-top: 18px !important;
		font-size: 22px;
	}
}

/* ---------------------------------------------------------------------------
 * Company — team (3 × 300px tiles, centered) and bio pop-up (site.js)
 * ------------------------------------------------------------------------- */
.egi-section.egi-team-sec {
	border-top: 1px solid rgba(14, 18, 16, 0.08);
}

.egi-team-sec h2 {
	margin-bottom: 56px;
}

.egi-team.wp-block-group {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 300px));
	justify-content: space-between;
	gap: 64px 56px;
	max-width: 1080px;
	margin-inline: auto !important;
}

.egi-member {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: start;
	column-gap: 16px;
	color: var(--egi-ink);
}

.egi-member.is-bio-ready {
	cursor: pointer;
}

.egi-member > .wp-block-image {
	grid-column: 1 / -1;
	margin-bottom: 22px !important;
	aspect-ratio: 1;
	overflow: hidden;
	background: #e8eae5;
}

.egi-member > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.egi-member.is-bio-ready:hover > .wp-block-image img {
	transform: scale(1.03);
}

.egi-section .egi-member h3 {
	grid-column: 1;
	font-size: 26px;
	line-height: 1.1;
	transition: color 0.15s ease;
}

.egi-member.is-bio-ready:hover h3 {
	color: var(--egi-teal-dark);
}

.egi-section .egi-member p.egi-role {
	grid-column: 1;
	margin: 6px 0 0;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--egi-teal-dark);
}

/* LinkedIn icon under the role. Set the URL on the icon in the editor; WordPress
   doesn't output icons without a URL, so the row hides when it has none. */
.egi-section .egi-member .egi-member-links {
	grid-column: 1;
	gap: 0;
	margin: 12px 0 0;
	padding: 0;
}

.egi-member .egi-member-links:not(:has(li)) {
	display: none;
}

.egi-member .egi-member-links .wp-social-link {
	transition: color 0.15s ease, transform 0.15s ease;
}

.egi-member .egi-member-links .wp-social-link a {
	padding: 0;
}

.egi-member .egi-member-links .wp-social-link svg {
	width: 22px;
	height: 22px;
}

.egi-member .egi-member-links .wp-social-link:hover {
	color: var(--egi-teal) !important;
	transform: none;
}

.egi-member .egi-member-links a:focus-visible {
	outline: 2px solid var(--egi-teal);
	outline-offset: 3px;
}

/* Bio text lives in the member's hidden "egi-bio" paragraph. */
.egi-member .egi-bio {
	display: none;
}

.editor-styles-wrapper .egi-member .egi-bio {
	display: block;
	grid-column: 1 / -1;
	font-size: 14px;
	opacity: 0.6;
}

/* "Bio +" is a <button> added by site.js. */
.egi-bio-tag {
	grid-column: 2;
	grid-row: 2 / span 3;
	align-self: start;
	margin-top: 2px;
	padding: 9px 12px;
	border: 1px solid rgba(0, 125, 114, 0.4);
	border-radius: 3px;
	background: none;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
	font-family: var(--egi-font);
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--egi-teal-dark);
	white-space: nowrap;
}

.egi-bio-tag:hover {
	border-color: var(--egi-teal-dark);
	background: rgba(0, 125, 114, 0.06);
}

.egi-bio-tag:focus-visible {
	outline: 3px solid var(--egi-teal-light);
	outline-offset: 3px;
}

.egi-bio-modal {
	width: min(820px, calc(100vw - 40px));
	max-width: none;
	padding: 0;
	border: 0;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.egi-bio-modal::backdrop {
	background: rgba(10, 15, 14, 0.72);
}

.egi-bio-modal__inner {
	position: relative;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
}

.egi-bio-modal__inner img {
	width: 300px;
	height: 300px;
	object-fit: cover;
}

.egi-bio-modal__text {
	padding: 40px 44px;
}

.egi-bio-modal__role {
	margin: 0 0 12px;
	font-family: var(--egi-font);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--egi-teal-dark);
}

.egi-bio-modal__text h3 {
	margin: 0 0 20px;
	font-size: 40px;
	line-height: 1;
	color: var(--egi-ink);
}

.egi-bio-modal__body {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--egi-ink-soft);
}

.egi-bio-modal__close {
	position: absolute;
	top: 10px;
	right: 14px;
	padding: 0;
	border: 0;
	background: none;
	font: 400 32px/1 var(--egi-font);
	color: var(--egi-ink-soft);
	cursor: pointer;
}

.egi-bio-modal__close:hover,
.egi-bio-modal__close:focus-visible {
	color: var(--egi-teal-dark);
}

html.egi-modal-open {
	overflow: hidden;
}

@media (max-width: 1200px) {
	.egi-team.wp-block-group {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 48px 32px;
		max-width: none;
	}
}

@media (max-width: 820px) {
	.egi-team-sec h2 {
		margin-bottom: 32px;
	}

	.egi-team.wp-block-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 18px;
	}

	.egi-member {
		grid-template-columns: minmax(0, 1fr);
	}

	.egi-member > .wp-block-image {
		margin-bottom: 12px !important;
	}

	.egi-section .egi-member h3 {
		font-size: 18px;
	}

	.egi-section .egi-member p.egi-role {
		margin-top: 4px;
		font-size: 11px;
	}

	.egi-bio-tag {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
		margin-top: 8px;
		padding: 0;
		border: 0;
		font-size: 11px;
	}

	.egi-bio-modal__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.egi-bio-modal__inner img {
		width: 100%;
		height: auto;
		aspect-ratio: 1;
	}

	.egi-bio-modal__text {
		padding: 24px;
	}

	.egi-bio-modal__text h3 {
		font-size: 30px;
	}
}

/* ---------------------------------------------------------------------------
 * Company — careers (moved here from Contact)
 * ------------------------------------------------------------------------- */
.egi-section.egi-careers {
	border-top: 1px solid rgba(14, 18, 16, 0.08);
}

.egi-section .egi-careers-grid p:where(:not(.is-style-egi-chip)) {
	font-size: 16px;
}

.egi-section .egi-careers-grid p:not(:last-child) {
	margin-bottom: 16px;
}

.egi-section .egi-careers-grid p + .wp-block-buttons {
	margin-top: 32px;
}

.egi-btn-wide .wp-block-button__link {
	padding-inline: 48px;
}

.egi-careers-grid .wp-block-image img {
	width: 100%;
	aspect-ratio: 1024 / 581;
	object-fit: cover;
}

@media (max-width: 820px) {
	.egi-careers-grid.wp-block-columns {
		flex-direction: column-reverse;
	}
}

/* ---------------------------------------------------------------------------
 * Contact (navy page, info 40 / form 60)
 * ------------------------------------------------------------------------- */
.egi-overlay-header .entry-content > .egi-contact-page:first-child {
	padding-top: calc(var(--egi-header-h) + 88px);
	padding-bottom: 120px;
}

.egi-contact-page h1 {
	margin-bottom: 72px !important;
}

.egi-contact-grid.wp-block-columns {
	gap: 88px;
	align-items: flex-start;
}

.egi-section.egi-contact-page p.egi-lede {
	max-width: 420px;
	margin-bottom: 48px;
	font-size: 21px;
}

.egi-contact-addrs.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-bottom: 40px;
}

.egi-section p.egi-addr-title,
.egi-section .egi-addr p.egi-addr-title {
	margin: 0 0 8px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--egi-teal-light);
}

.egi-section .egi-addr p:last-child {
	font-size: 18px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
}

.egi-contact-direct.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 32px;
}

.egi-section .egi-contact-direct p {
	margin: 0;
}

.egi-contact-direct a {
	font-family: var(--egi-font-condensed);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
}

.egi-contact-direct a:hover {
	color: var(--egi-teal-light);
}

.egi-li.wp-block-social-links {
	margin: 0;
	gap: 0;
}

.egi-li .wp-social-link {
	border-radius: 3px;
	transition: background-color 0.15s ease;
}

.egi-li .wp-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
}

.egi-li .wp-social-link svg {
	width: 22px;
	height: 22px;
}

.egi-li .wp-social-link:hover {
	background-color: var(--egi-teal-light) !important;
	transform: none;
}

/* HubSpot form (rendered in-page): Blocksy's form-field variables for the navy page. */
.egi-contact-page .egi-form {
	--theme-form-field-background-initial-color: rgba(255, 255, 255, 0.04);
	--theme-form-field-background-focus-color: rgba(255, 255, 255, 0.04);
	--theme-form-field-border-initial-color: rgba(255, 255, 255, 0.35);
	--theme-form-field-border-focus-color: var(--egi-teal-light);
	--theme-form-text-initial-color: #fff;
	--theme-form-text-focus-color: #fff;
	--theme-form-field-height: 50px;
	--theme-form-field-border-radius: 3px;
}

.egi-contact-page .egi-form .hs-form .hs-input {
	padding-inline: 16px;
}

.egi-contact-page .egi-form .hs-form textarea.hs-input {
	min-height: 170px;
}

@media (max-width: 1200px) {
	.egi-contact-grid.wp-block-columns {
		gap: 56px;
	}
}

/* Mobile: form first, then a divider and the contact details. */
@media (max-width: 820px) {
	.egi-overlay-header .entry-content > .egi-contact-page:first-child {
		padding-top: calc(var(--egi-header-h) + 40px);
		padding-bottom: 56px;
	}

	.egi-contact-page h1 {
		margin-bottom: 20px !important;
	}

	.egi-contact-grid.wp-block-columns {
		flex-direction: column-reverse;
		gap: 40px;
	}

	.egi-contact-info {
		padding-top: 36px;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.egi-section.egi-contact-page p.egi-lede {
		display: none;
	}

	.egi-contact-direct a {
		font-size: 22px;
	}
}

/* ---------------------------------------------------------------------------
 * Footer (layout in Customize → Footer): logo | flag + addresses, then
 * copyright | links below a hairline. Footer Widget Area 1 holds the
 * .egi-foot-right group.
 * ------------------------------------------------------------------------- */
.ct-footer .egi-foot-right {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	text-align: left;
}

.ct-footer .egi-foot-flag {
	flex: none;
	width: 138px;
	margin: 4px 0 0;
	opacity: 0.75;
}

.ct-footer .egi-foot-flag img {
	width: 100%;
	height: auto;
}

.ct-footer .egi-foot-addrs {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ct-footer .egi-foot-addrs > * {
	margin: 0;
}

.ct-footer .egi-addr p {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.8);
}

.ct-footer .egi-addr p.egi-addr-title {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
}

@media (max-width: 1200px) {
	.ct-footer [data-row*="top"] > .ct-container {
		grid-template-columns: minmax(0, 1fr);
		justify-items: start;
		row-gap: 40px;
	}

	.ct-footer [data-row*="top"] [data-column] {
		justify-content: flex-start;
	}
}

@media (max-width: 820px) {
	.ct-footer [data-row*="top"] > .ct-container {
		justify-items: center;
		row-gap: 28px;
		text-align: center;
	}

	.ct-footer [data-row*="top"] [data-column] {
		justify-content: center;
	}

	.ct-footer .egi-foot-right {
		flex-direction: column;
		align-items: center;
		gap: 24px;
		text-align: center;
	}

	.ct-footer .egi-foot-flag {
		width: 96px;
		margin: 0;
	}

	.ct-footer .egi-foot-addrs {
		gap: 20px;
	}

	.ct-footer .egi-addr p {
		font-size: 15px;
	}

	.ct-footer .egi-addr p.egi-addr-title {
		font-size: 16px;
	}
}

/* Mobile: one 28px gap for every stacked column set (section rules above set
   wider desktop gaps after the generic mobile rule). */
@media (max-width: 820px) {
	.egi-section .wp-block-columns:is(.egi-mfg-top, .egi-pf-top, .egi-mission-cols, .egi-careers-grid, .egi-split) {
		gap: 28px;
	}
}

/* ---------------------------------------------------------------------------
 * Image: "Opens video" style — play button over the image, video in a modal.
 * Link the image to a Vimeo/YouTube URL (Image block → Link).
 * ------------------------------------------------------------------------- */
.wp-block-image.is-style-egi-video a {
	position: relative;
	display: block;
}

.wp-block-image.is-style-egi-video a::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(12, 17, 16, 0.25);
	transition: background-color 0.15s ease;
}

.wp-block-image.is-style-egi-video a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 88px;
	height: 88px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--egi-teal)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230e1210' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E")
		55% 50% / 40% no-repeat;
	box-shadow: 0 0 0 8px rgba(0, 180, 165, 0.25);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.wp-block-image.is-style-egi-video a:hover::before,
.wp-block-image.is-style-egi-video a:focus-visible::before {
	background: rgba(12, 17, 16, 0.4);
}

.wp-block-image.is-style-egi-video a:hover::after,
.wp-block-image.is-style-egi-video a:focus-visible::after {
	background-color: var(--egi-teal-light);
	transform: translate(-50%, -50%) scale(1.06);
}

.wp-block-image.is-style-egi-video a:focus-visible {
	outline: 3px solid var(--egi-teal-light);
	outline-offset: 3px;
}

@media (max-width: 820px) {
	.wp-block-image.is-style-egi-video a::after {
		width: 64px;
		height: 64px;
		box-shadow: 0 0 0 6px rgba(0, 180, 165, 0.25);
	}
}

.egi-video-modal {
	width: min(1100px, calc(100vw - 40px));
	max-width: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.egi-video-modal::backdrop {
	background: rgba(10, 15, 14, 0.88);
}

.egi-video-modal__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

.egi-video-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.egi-video-modal__close {
	position: absolute;
	top: -48px;
	right: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
}

.egi-video-modal__close:hover,
.egi-video-modal__close:focus-visible {
	color: var(--egi-teal-light);
}

html.egi-video-open {
	overflow: hidden;
}