/* ==========================================================================
   Contengent Dark — brand stylesheet
   Shared by every Contengent-family site. Palette mirrors inc/brand.php.
   Elementor Site Settings (Appearance > Contengent Brand > Apply) take
   precedence where they overlap; this file is the safety net + extras.
   ========================================================================== */

:root {
	/* Brand blues (from contengent.com) */
	--cg-blue: #0F54BD;
	--cg-blue-deep: #0544A4;
	--cg-blue-light: #5A9BFF;
	--cg-blue-glow: rgba(15, 84, 189, 0.35);

	/* Dark neutrals, tinted toward the brand blue */
	--cg-ink: #07090D;
	--cg-surface: #0E1218;
	--cg-surface-2: #151A22;
	--cg-border: #232A35;

	/* Brand greys (from contengent.com) */
	--cg-grey: #919191;
	--cg-grey-light: #ABABAB;
	--cg-text: #E2E2E2;
	--cg-white: #FFFFFF;

	/* Type */
	--cg-font-display: "Archivo Black", "Montserrat", system-ui, sans-serif;
	--cg-font-heading: "Montserrat", system-ui, sans-serif;
	--cg-font-body: "Manrope", system-ui, sans-serif;
	--cg-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Shape & motion */
	--cg-radius: 6px;
	--cg-radius-lg: 10px;
	--cg-ease: cubic-bezier(.2, .7, .2, 1);
	--cg-section-pad: clamp(64px, 9vw, 128px);

	color-scheme: dark;
}

/* ---------- Base ---------------------------------------------------------- */

html { background: var(--cg-ink); }

body {
	background-color: var(--cg-ink);
	color: var(--cg-text);
	font-family: var(--cg-font-body);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--cg-white);
	font-family: var(--cg-font-heading);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

h1 {
	font-family: var(--cg-font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 1.05;
}

a { color: var(--cg-blue-light); transition: color .2s var(--cg-ease); }
a:hover, a:focus { color: var(--cg-white); }

::selection { background: var(--cg-blue); color: var(--cg-white); }

:focus-visible {
	outline: 2px solid var(--cg-blue-light);
	outline-offset: 3px;
}

hr { border: 0; border-top: 1px solid var(--cg-border); }

code, kbd, pre, samp { font-family: var(--cg-font-mono); }

/* ---------- Forms (WP, Elementor Pro Form, comments) ----------------------- */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.elementor-field-group .elementor-field-textual {
	background-color: var(--cg-surface-2);
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius);
	color: var(--cg-text);
}
input::placeholder, textarea::placeholder { color: var(--cg-grey); opacity: 1; }
input:focus, select:focus, textarea:focus,
.elementor-field-group .elementor-field-textual:focus {
	border-color: var(--cg-blue-light);
	box-shadow: 0 0 0 3px var(--cg-blue-glow);
	outline: none;
}
.elementor-field-label { color: var(--cg-grey-light); }

/* ---------- Buttons ------------------------------------------------------- */

button,
input[type="submit"],
input[type="button"],
.elementor-button {
	font-family: var(--cg-font-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	border-radius: 4px;
	transition: background-color .2s var(--cg-ease), border-color .2s var(--cg-ease), color .2s var(--cg-ease), box-shadow .2s var(--cg-ease);
}

/* Default button colours when the kit has not been synced yet */
body:not([class*="elementor-kit-"]) .elementor-button,
input[type="submit"] {
	background-color: var(--cg-blue);
	color: var(--cg-white);
}

.elementor-button:hover,
input[type="submit"]:hover {
	box-shadow: 0 8px 24px -8px var(--cg-blue-glow);
}

/* Outline variant: add "cg-btn-ghost" to a Button widget */
.cg-btn-ghost .elementor-button {
	background-color: transparent !important;
	color: var(--cg-white) !important;
	border: 1px solid rgba(255, 255, 255, .28);
}
.cg-btn-ghost .elementor-button:hover {
	border-color: var(--cg-blue-light);
	color: var(--cg-blue-light) !important;
}

/* ---------- Hello Elementor default header/footer ------------------------- */
/* (Only used when no Elementor Pro Theme Builder header/footer is assigned.) */

.site-header,
.site-footer {
	background: var(--cg-surface);
	border-color: var(--cg-border);
}
.site-header { border-bottom: 1px solid var(--cg-border); }
.site-footer { border-top: 1px solid var(--cg-border); color: var(--cg-grey); }
.site-header .site-title a,
.site-header .site-navigation a,
.site-footer a { color: var(--cg-text); }
.site-header .site-navigation a:hover { color: var(--cg-blue-light); }
.site-header .site-navigation ul.menu li ul { background: var(--cg-surface-2); }

/* ---------- Elementor Pro widgets on dark --------------------------------- */

/* Nav Menu dropdowns & mobile menu */
.elementor-nav-menu--dropdown {
	background-color: var(--cg-surface-2);
	border: 1px solid var(--cg-border);
}
.elementor-nav-menu--dropdown a { color: var(--cg-text); }
.elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--dropdown a.elementor-item-active {
	background-color: var(--cg-blue);
	color: var(--cg-white);
}

/* Sticky header (Elementor Pro "Sticky" motion effect) */
.elementor-sticky--effects {
	background-color: rgba(7, 9, 13, .86) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--cg-border);
}

/* Tabs / accordion / toggle borders */
.elementor-widget-tabs .elementor-tab-title,
.elementor-widget-tabs .elementor-tab-content,
.elementor-widget-accordion .elementor-accordion-item,
.elementor-widget-toggle .elementor-toggle-item,
.e-n-accordion-item { border-color: var(--cg-border) !important; }

/* Divider widget */
.elementor-divider-separator { border-color: var(--cg-border); }

/* Icon box / image box text defaults */
.elementor-icon-box-description,
.elementor-image-box-description { color: var(--cg-grey-light); }

/* Testimonials, posts, cards */
.elementor-post__card,
.elementor-testimonial__content {
	background-color: var(--cg-surface) !important;
	border: 1px solid var(--cg-border);
}

/* ==========================================================================
   Utility classes — add in Elementor: Advanced > CSS Classes
   ========================================================================== */

/* Section rhythm */
.cg-section { padding-block: var(--cg-section-pad); }
.cg-section-alt {
	padding-block: var(--cg-section-pad);
	background-color: var(--cg-surface);
}

/* Hairline divider at the top of a section */
.cg-divider { position: relative; }
.cg-divider::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--cg-blue) 25%, var(--cg-border) 60%, transparent);
	pointer-events: none;
}

/* Eyebrow label: on a Heading widget or any text */
.cg-eyebrow,
.cg-eyebrow .elementor-heading-title {
	font-family: var(--cg-font-heading) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .24em !important;
	text-transform: uppercase !important;
	color: var(--cg-blue-light) !important;
	line-height: 1.4 !important;
}
.cg-eyebrow .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 1px;
	margin-right: 12px;
	vertical-align: middle;
	background: currentColor;
}

/* Muted lead paragraph */
.cg-lead, .cg-lead p {
	font-size: clamp(17px, 1.4vw, 20px);
	color: var(--cg-grey-light);
	line-height: 1.6;
	max-width: 62ch;
}

/* Cards */
.cg-card {
	background-color: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius-lg);
	transition: border-color .25s var(--cg-ease), transform .25s var(--cg-ease), box-shadow .25s var(--cg-ease);
}
.cg-card:hover {
	border-color: rgba(90, 155, 255, .45);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(15, 84, 189, .15);
}

/* Card padding & icon colour when cg-card is on a widget or container */
.elementor-widget.cg-card { padding: 28px; height: 100%; box-sizing: border-box; }
.e-con.cg-card { --padding-top: 28px; --padding-right: 28px; --padding-bottom: 28px; --padding-left: 28px; }
.cg-card .elementor-icon { color: var(--cg-blue-light); fill: var(--cg-blue-light); }
.cg-card .elementor-icon svg { fill: var(--cg-blue-light); }
.cg-card .elementor-icon-box-title,
.cg-card .elementor-icon-box-title a { color: var(--cg-white); }

/* Responsive tile/card grid: add "cg-tiles" to a Full-width container */
.e-con.cg-tiles,
.cg-tiles > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 24px;
	align-items: stretch;
}
.cg-tiles > .elementor-widget,
.cg-tiles > .e-con-inner > .elementor-widget {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}
.cg-tiles > .elementor-widget > .elementor-widget-container { height: 100%; }
.cg-tiles--4.e-con,
.cg-tiles--4 > .e-con-inner { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* Stat / metric */
.cg-stat .elementor-heading-title,
.cg-stat .elementor-counter-number-wrapper {
	font-family: var(--cg-font-display) !important;
	color: var(--cg-white) !important;
	line-height: 1 !important;
}

/* ---------- Hero & textures ---------------------------------------------- */

.cg-hero {
	position: relative;
	min-height: min(92vh, 900px);
	isolation: isolate;
	overflow: hidden;
	background-color: var(--cg-ink);
}
/* Blue glow */
.cg-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -20% -10% auto auto;
	width: 70vw;
	height: 70vw;
	max-width: 1100px;
	max-height: 1100px;
	background: radial-gradient(closest-side, rgba(15, 84, 189, .38), rgba(5, 68, 164, .12) 55%, transparent 75%);
	pointer-events: none;
}
.cg-hero h1, .cg-hero .elementor-heading-title { text-wrap: balance; }

/* Texture layer (site-wide choice via Customizer) */
.cg-hero::before,
.cg-texture::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-repeat: repeat;
	opacity: .55;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 80%);
	mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 80%);
}
.cg-texture { position: relative; isolation: isolate; }

.cg-texture-grid .cg-hero::before,
.cg-texture-grid .cg-texture::before { background-image: url("../img/texture-grid.svg"); background-size: 64px 64px; }
.cg-texture-racks .cg-hero::before,
.cg-texture-racks .cg-texture::before { background-image: url("../img/texture-racks.svg"); background-size: 240px 160px; }
.cg-texture-mesh .cg-hero::before,
.cg-texture-mesh .cg-texture::before { background-image: url("../img/texture-mesh.svg"); background-size: 420px 420px; }

/* Note: .cg-hero and .cg-texture use ::before for the texture, so don't also
   set an Elementor "Background Overlay" on those containers. */

/* ---------- Photo treatments --------------------------------------------- */
/* Use "cg-photo" on an Image widget, "cg-photo-bg" on a container with a
   background image. Treatment is chosen per site (Customizer). */

.cg-photo img,
img.cg-photo { transition: filter .4s var(--cg-ease); }

/* Black & white */
.cg-photos-bw .cg-photo img,
.cg-photos-bw img.cg-photo {
	filter: grayscale(1) contrast(1.15) brightness(.9);
}
.cg-photos-bw .cg-photo-bg {
	background-color: #5c5c5c;
	background-blend-mode: luminosity;
}

/* Blue duotone */
.cg-photos-duotone .cg-photo img,
.cg-photos-duotone img.cg-photo {
	filter: grayscale(1) contrast(1.1) brightness(.85);
}
.cg-photos-duotone .elementor-widget-image.cg-photo .elementor-widget-container,
.cg-photos-duotone .cg-tile--photo .cg-tile__media {
	position: relative;
}
.cg-photos-duotone .elementor-widget-image.cg-photo .elementor-widget-container::after,
.cg-photos-duotone .cg-tile--photo .cg-tile__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, var(--cg-blue) 0%, var(--cg-blue-deep) 100%);
	mix-blend-mode: color;
	opacity: .9;
	pointer-events: none;
}
.cg-photos-duotone .cg-photo-bg {
	background-color: var(--cg-blue-deep);
	background-blend-mode: luminosity;
}

/* ==========================================================================
   Link Tile widget (Elementor > Contengent > Link Tile)
   ========================================================================== */

.cg-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background-color: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius-lg);
	color: var(--cg-text);
	text-decoration: none;
	transition: border-color .3s var(--cg-ease), transform .3s var(--cg-ease), box-shadow .3s var(--cg-ease);
}
a.cg-tile:hover,
a.cg-tile:focus-visible {
	color: var(--cg-text);
	border-color: rgba(90, 155, 255, .55);
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(15, 84, 189, .2), 0 0 48px -12px var(--cg-blue-glow);
}

.cg-tile__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 80% 0%, rgba(15, 84, 189, .28), transparent 60%),
		var(--cg-surface-2);
	border-bottom: 1px solid var(--cg-border);
}
.cg-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--cg-ease), filter .4s var(--cg-ease);
}
a.cg-tile:hover .cg-tile__media img { transform: scale(1.04); }
.cg-tile--art .cg-tile__media img { object-fit: contain; padding: 6% 8%; }

.cg-tile__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	padding: 24px 24px 22px;
}
.cg-tile__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-family: var(--cg-font-heading);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--cg-blue-light);
}
.cg-tile__badge {
	padding: 3px 8px;
	border: 1px solid var(--cg-border);
	border-radius: 999px;
	letter-spacing: .08em;
	color: var(--cg-grey-light);
	font-size: 10px;
}
.cg-tile__title {
	font-family: var(--cg-font-heading);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--cg-white);
}
.cg-tile__desc {
	font-size: 15px;
	line-height: 1.55;
	color: var(--cg-grey-light);
}
.cg-tile__cta {
	margin-top: auto;
	padding-top: 8px;
	font-family: var(--cg-font-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cg-white);
}
.cg-tile__cta span { display: inline-block; transition: transform .25s var(--cg-ease); color: var(--cg-blue-light); }
a.cg-tile:hover .cg-tile__cta span { transform: translateX(4px); }

/* Cover layout: text sits over the graphic/photo */
.cg-tile--cover { min-height: 340px; justify-content: flex-end; }
.cg-tile--cover .cg-tile__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	border: 0;
}
.cg-tile--cover .cg-tile__body {
	position: relative;
	flex: 0;
	background: linear-gradient(180deg, transparent, rgba(7, 9, 13, .82) 30%, rgba(7, 9, 13, .96));
	padding-top: 72px;
}
.cg-tile--cover.cg-tile--art .cg-tile__media img { object-fit: cover; padding: 0; opacity: .7; }

/* Photo tiles honour the site photo treatment */
.cg-photos-bw .cg-tile--photo .cg-tile__media img { filter: grayscale(1) contrast(1.15) brightness(.85); }
.cg-photos-bw a.cg-tile--photo:hover .cg-tile__media img { filter: grayscale(1) contrast(1.25) brightness(1); }
.cg-photos-duotone .cg-tile--photo .cg-tile__media img { filter: grayscale(1) contrast(1.1) brightness(.8); }

/* ---------- Status / label chips ----------------------------------------- */
.cg-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--cg-border);
	border-radius: 999px;
	font-family: var(--cg-font-mono);
	font-size: 12px;
	color: var(--cg-grey-light);
	background: rgba(14, 18, 24, .7);
}
.cg-chip::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3DDC97;
	box-shadow: 0 0 0 3px rgba(61, 220, 151, .18);
}

/* ---------- Scroll state (set by brand.js) -------------------------------- */
.cg-scrolled .cg-header {
	background-color: rgba(7, 9, 13, .88);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--cg-border);
}
.cg-header { transition: background-color .3s var(--cg-ease); }

/* ---------- Gutenberg editor (dark) -------------------------------------- */
.editor-styles-wrapper {
	background-color: var(--cg-ink);
	color: var(--cg-text);
	font-family: var(--cg-font-body);
}

/* ---------- Accessibility & motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
	a.cg-tile:hover, .cg-card:hover { transform: none; }
}

@media (max-width: 767px) {
	.cg-hero { min-height: auto; }
	.cg-tile__body { padding: 20px; }
	.cg-tile--cover { min-height: 280px; }
}

/* Footer helpers */
.cg-footer-copy, .cg-footer-copy p { margin: 0; font-size: 13px; color: var(--cg-grey); }