/* ==========================================================================
   Coras — theme stylesheet
   Contengent family palette and class names, plus the Coras photo system.
   Palette mirrors inc/brand.php. Elementor Site Settings (Appearance >
   Coras Brand > Apply) take precedence where they overlap.
   ========================================================================== */

:root {
	--cg-blue: #0F54BD;
	--cg-blue-deep: #0544A4;
	--cg-blue-light: #5A9BFF;
	--cg-blue-glow: rgba(15, 84, 189, 0.35);

	--cg-ink: #05070A;
	--cg-surface: #0B0F14;
	--cg-surface-2: #121820;
	--cg-border: #1F2731;

	--cg-grey: #919191;
	--cg-grey-light: #ABABAB;
	--cg-text: #E2E2E2;
	--cg-white: #FFFFFF;

	--cg-ok: #3DDC97;
	--cg-warn: #F2B84B;
	--cg-crit: #FF5D5D;

	--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;

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

	/* Photo treatment (set per site in Customize > Coras Look) */
	--cg-photo-filter: grayscale(1) contrast(1.45) brightness(.72);

	/* Film grain, baked at low alpha */
	--cg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	color-scheme: dark;
}

/* Treatment + contrast combinations */
.cg-photos-bw.cg-contrast-soft     { --cg-photo-filter: grayscale(1) contrast(1.05) brightness(.82); }
.cg-photos-bw.cg-contrast-standard { --cg-photo-filter: grayscale(1) contrast(1.22) brightness(.78); }
.cg-photos-bw.cg-contrast-hard     { --cg-photo-filter: grayscale(1) contrast(1.45) brightness(.72); }
.cg-photos-duotone.cg-contrast-soft     { --cg-photo-filter: grayscale(1) contrast(1.05) brightness(.8) sepia(1) hue-rotate(178deg) saturate(2.2); }
.cg-photos-duotone.cg-contrast-standard { --cg-photo-filter: grayscale(1) contrast(1.2) brightness(.75) sepia(1) hue-rotate(178deg) saturate(2.6); }
.cg-photos-duotone.cg-contrast-hard     { --cg-photo-filter: grayscale(1) contrast(1.4) brightness(.7) sepia(1) hue-rotate(178deg) saturate(3); }
.cg-photos-color { --cg-photo-filter: brightness(.82) contrast(1.05); }

/* ---------- 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.02;
}

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 --------------------------------------------------------- */

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); font-family: var(--cg-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- 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);
}
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); }

.cg-btn-ghost .elementor-button {
	background-color: transparent !important;
	color: var(--cg-white) !important;
	border: 1px solid rgba(255, 255, 255, .3);
}
.cg-btn-ghost .elementor-button:hover {
	border-color: var(--cg-blue-light);
	color: var(--cg-blue-light) !important;
}

/* ---------- Hello Elementor default header/footer ------------------------- */

.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 --------------------------------- */

.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); }

.elementor-sticky--effects {
	background-color: rgba(5, 7, 10, .86) !important;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--cg-border);
}

.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; }

.elementor-divider-separator { border-color: var(--cg-border); }
.elementor-icon-box-description, .elementor-image-box-description { color: var(--cg-grey-light); }
.elementor-post__card, .elementor-testimonial__content { background-color: var(--cg-surface) !important; border: 1px solid var(--cg-border); }

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

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

/* Hairline 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 — Coras uses the mono face */
.cg-eyebrow,
.cg-eyebrow .elementor-heading-title {
	font-family: var(--cg-font-mono) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: .18em !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: 8px;
	height: 8px;
	margin-right: 12px;
	vertical-align: 1px;
	border: 1px solid currentColor;
	transform: rotate(45deg);
}

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

/* 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);
}
.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 grids */
.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,
.cg-tiles > .e-con,
.cg-tiles > .e-con-inner > .e-con {
	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)); }

/* Two-column split that stacks on mobile */
.e-con.cg-split,
.cg-split > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.cg-split > .e-con, .cg-split > .e-con-inner > .e-con,
.cg-split > .elementor-widget, .cg-split > .e-con-inner > .elementor-widget { width: auto !important; max-width: none !important; }

.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);
}
.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; }

.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; }

/* ==========================================================================
   Photo system
   Put a photo on a container as its Background image and add "cg-photo-bg",
   or use a starter photo class (cg-bg-operator, cg-bg-analyst, cg-bg-aisle,
   cg-bg-cables). A Background image set in Elementor overrides the starter.
   The photo is redrawn on a pseudo-layer so the treatment (B&W / duotone /
   colour) and contrast can be filtered without touching the content.
   ========================================================================== */

.cg-bg-operator { background-image: url("../img/photos/operator.jpg"); }
.cg-bg-analyst  { background-image: url("../img/photos/analyst.jpg"); }
.cg-bg-aisle    { background-image: url("../img/photos/aisle.jpg"); }
.cg-bg-cables   { background-image: url("../img/photos/cables.jpg"); }

.cg-photo-bg,
.cg-bg-operator, .cg-bg-analyst, .cg-bg-aisle, .cg-bg-cables {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--cg-ink);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Filtered copy of the photo (inherits the element's background image) */
.cg-theme :is(.cg-photo-bg, .cg-bg-operator, .cg-bg-analyst, .cg-bg-aisle, .cg-bg-cables)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: inherit;
	background-size: inherit;
	background-position: inherit;
	background-repeat: no-repeat;
	filter: var(--cg-photo-filter);
	opacity: 1;
	-webkit-mask-image: none;
	mask-image: none;
	transform: scale(1.01);
	pointer-events: none;
}

/* Scrim (+ grain) so text stays readable. Default: dark on the left. */
.cg-theme :is(.cg-photo-bg, .cg-bg-operator, .cg-bg-analyst, .cg-bg-aisle, .cg-bg-cables)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	background:
		linear-gradient(90deg, rgba(5, 7, 10, .94) 0%, rgba(5, 7, 10, .72) 38%, rgba(5, 7, 10, .2) 75%, rgba(5, 7, 10, .35) 100%),
		linear-gradient(0deg, rgba(5, 7, 10, .9) 0%, transparent 35%);
	pointer-events: none;
}
.cg-theme.cg-grain :is(.cg-photo-bg, .cg-bg-operator, .cg-bg-analyst, .cg-bg-aisle, .cg-bg-cables)::after {
	background:
		var(--cg-grain),
		linear-gradient(90deg, rgba(5, 7, 10, .94) 0%, rgba(5, 7, 10, .72) 38%, rgba(5, 7, 10, .2) 75%, rgba(5, 7, 10, .35) 100%),
		linear-gradient(0deg, rgba(5, 7, 10, .9) 0%, transparent 35%);
}

/* Scrim variants */
.cg-scrim-bottom::after {
	background: linear-gradient(0deg, rgba(5, 7, 10, .96) 0%, rgba(5, 7, 10, .7) 35%, rgba(5, 7, 10, .1) 75%) !important;
}
.cg-grain .cg-scrim-bottom::after {
	background: var(--cg-grain), linear-gradient(0deg, rgba(5, 7, 10, .96) 0%, rgba(5, 7, 10, .7) 35%, rgba(5, 7, 10, .1) 75%) !important;
}
.cg-scrim-full::after {
	background: rgba(5, 7, 10, .72) !important;
}
.cg-grain .cg-scrim-full::after {
	background: var(--cg-grain), rgba(5, 7, 10, .72) !important;
}

/* Photo card: a container with a photo class + cg-photo-card */
.cg-photo-card {
	--min-height: 440px;
	min-height: 440px !important;
	justify-content: flex-end !important;
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius-lg);
	--padding-top: 28px; --padding-right: 28px; --padding-bottom: 28px; --padding-left: 28px;
	padding: 28px;
	transition: border-color .3s var(--cg-ease);
}
.cg-theme .cg-photo-card::before { transition: transform .8s var(--cg-ease), filter .4s var(--cg-ease); }
.cg-photo-card:hover { border-color: rgba(90, 155, 255, .45); }
.cg-theme .cg-photo-card:hover::before { transform: scale(1.05); }
.cg-photo-card h3, .cg-photo-card .elementor-heading-title { color: var(--cg-white); }

/* Image widgets: add "cg-photo" */
.cg-photo img, img.cg-photo { filter: var(--cg-photo-filter); transition: filter .4s var(--cg-ease); }

/* Product screenshot / console illustration block */
.cg-console-shot {
	position: relative;
	aspect-ratio: 16 / 10;
	max-width: 100%;
	min-height: 0 !important;
	background: url("../img/coras-console.svg") center / contain no-repeat, var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius-lg);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(15, 84, 189, .12), 0 0 80px -30px var(--cg-blue-glow);
}

/* ---------- Coras console details ---------------------------------------- */

/* Telemetry strip: <div class="cg-telemetry"><span class="cg-sig cg-sig--ok">…</span>…</div> */
.cg-telemetry {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	font-family: var(--cg-font-mono);
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--cg-grey-light);
	text-transform: uppercase;
}
.cg-telemetry b { color: var(--cg-white); font-weight: 500; font-variant-numeric: tabular-nums; }
.cg-sig { display: inline-flex; align-items: center; gap: 8px; }
.cg-sig::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cg-ok);
	box-shadow: 0 0 0 3px rgba(61, 220, 151, .16);
}
.cg-sig--warn::before { background: var(--cg-warn); box-shadow: 0 0 0 3px rgba(242, 184, 75, .16); }
.cg-sig--crit::before { background: var(--cg-crit); box-shadow: 0 0 0 3px rgba(255, 93, 93, .16); }
.cg-sig--blue::before { background: var(--cg-blue-light); box-shadow: 0 0 0 3px rgba(90, 155, 255, .16); }

/* Status chip */
.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(11, 15, 20, .7);
}
.cg-chip::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cg-ok);
	box-shadow: 0 0 0 3px rgba(61, 220, 151, .18);
}

/* Capability list: Text Editor with a <ul>, add "cg-checklist" */
.cg-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cg-checklist li {
	position: relative;
	padding-left: 30px;
	color: var(--cg-text);
}
.cg-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 14px;
	height: 1px;
	background: var(--cg-blue-light);
	box-shadow: 0 0 8px var(--cg-blue-light);
}
.cg-checklist li strong { color: var(--cg-white); font-weight: 600; }

/* Pillar number / key label in mono: Heading widget with "cg-mono" */
.cg-mono, .cg-mono .elementor-heading-title {
	font-family: var(--cg-font-mono) !important;
	letter-spacing: .04em;
}

/* ==========================================================================
   Link Tile widget
   ========================================================================== */

.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;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: radial-gradient(120% 90% at 80% 0%, rgba(15, 84, 189, .26), 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--photo .cg-tile__media img { filter: var(--cg-photo-filter); }

.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-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	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: .06em;
	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); }

.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(5, 7, 10, .82) 30%, rgba(5, 7, 10, .96));
	padding-top: 72px;
}
.cg-tile--cover.cg-tile--art .cg-tile__media img { object-fit: cover; padding: 0; opacity: .7; }

/* ---------- Header / footer ---------------------------------------------- */

.cg-scrolled .cg-header {
	background-color: rgba(5, 7, 10, .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); }
.cg-footer-copy, .cg-footer-copy p { margin: 0; font-size: 13px; color: var(--cg-grey); }

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

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

@media (max-width: 900px) {
	.e-con.cg-split, .cg-split > .e-con-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
	.cg-hero { min-height: auto; }
	.cg-tile__body { padding: 20px; }
	.cg-tile--cover { min-height: 280px; }
	.cg-photo-card { --min-height: 360px; min-height: 360px !important; }
	.cg-theme :is(.cg-photo-bg, .cg-bg-operator, .cg-bg-analyst, .cg-bg-aisle, .cg-bg-cables):not(.cg-scrim-bottom):not(.cg-scrim-full)::after {
		background: var(--cg-grain), linear-gradient(0deg, rgba(5, 7, 10, .96) 10%, rgba(5, 7, 10, .7) 60%, rgba(5, 7, 10, .45));
	}
}
