/*
Theme Name: Cognize Child
Theme URI: https://cognize.pl
Description: Cognize design system on Elementor v4 (child of Hello Elementor — standalone in Etap 4).
Author: Cognize
Author URI: https://cognize.pl
Template: hello-elementor
Version: 1.0.27
Text Domain: cognize-child
*/

/* Tokens: SSoT here. Mirror subset (color/font/size) pushed to Elementor
   Variables Manager via _scripts/import-tokens-to-elementor.php. Sync is
   one-way CSS → VM; VM edits are overwritten on re-import. */
:root {
	--cog-color-cloud-100: #FAFBFB;
	--cog-color-cloud-200: #F2F3F3;
	--cog-color-cloud-300: #E8E9E9;
	--cog-color-cloud-400: #DEE0E0;
	--cog-color-cloud-500: #CACBCB;
	--cog-color-cloud-600: #B7BABA;
	--cog-color-cloud-700: #A0A3A3;

	--cog-color-graphite-100: #737272;
	--cog-color-graphite-200: #616060;
	--cog-color-graphite-300: #525151;
	--cog-color-graphite-400: #3E3C3C;
	--cog-color-graphite-500: #343232;
	--cog-color-graphite-600: #272626;

	--cog-color-core-black-600: #1A1A1A;

	--cog-color-lime-100: #ECFFC5;
	--cog-color-lime-200: #DAF89C;
	--cog-color-lime-300: #C8F178;
	--cog-color-lime-400: #B1DE5A;

	--cog-color-error-red-600: #CF1804;

	/* System gray — utility palette for borders, dividers, glass outlines.
	   Currently only the 400 step is used (menu outline). */
	--cog-color-gray-400: #D2D3D6;

	/* Pure black is intentionally absent — use Core Black 600 (#1A1A1A). */
	--cog-color-base-white: #FFFFFF;

	--cog-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
	--cog-font-weight-regular: 400;
	--cog-font-weight-medium: 500;
	--cog-font-weight-bold: 700;

	--cog-font-size-hero-l: 56px;
	--cog-font-size-hero-s: 30px;
	--cog-font-size-h1: 44px;
	--cog-font-size-h2: 34px;
	--cog-font-size-h3: 28px;
	--cog-font-size-h4: 24px;
	--cog-font-size-h5: 22px;
	--cog-font-size-h6: 18px;
	--cog-font-size-body-xl: 20px;
	--cog-font-size-body-l: 18px;
	--cog-font-size-body-m: 16px;
	--cog-font-size-body-s: 14px;

	--cog-line-height-tight: 1.2;
	--cog-line-height-normal: 1.4;

	--cog-content-max-width: 1440px;
	--cog-content-narrow-width: 1000px;
}

@media ( max-width: 1023px ) {
	:root {
		--cog-font-size-h1: 30px;
		--cog-font-size-h2: 25px;
		--cog-font-size-h3: 23px;
		--cog-font-size-h4: 22px;
		--cog-font-size-h5: 20px;
		--cog-font-size-h6: 18px;
	}
}

.cog {
	font-family: var( --cog-font-family );
	color: var( --cog-color-core-black-600 );
	line-height: var( --cog-line-height-normal );
}

.cog:not( .cog-legacy ) {
	background-color: var( --cog-color-cloud-100 );
}

/* Prevent horizontal scrollbar from full-bleed breakouts (e.g. Shortcode
   widgets rendering Elementor templates with 100vw + negative margins).
   `clip` (not `hidden`) keeps sticky elements and scroll-snap working. */
html {
	overflow-x: clip;
}

/* `line-height` re-asserted here because Hello Elementor's reset.css sets
   `h1..h6 { line-height: 1.2 }` directly on the tag, which beats the value
   inherited from `.cog` regardless of specificity. */
.cog h1,
.cog h2,
.cog h3,
.cog h4,
.cog h5,
.cog h6 {
	font-family: inherit;
	color: inherit;
	font-weight: var( --cog-font-weight-bold );
	line-height: var( --cog-line-height-normal );
}

.cog h1 { font-size: var( --cog-font-size-h1 ); line-height: var( --cog-line-height-tight ); }
.cog h2 { font-size: var( --cog-font-size-h2 ); line-height: var( --cog-line-height-tight ); }
.cog h3 { font-size: var( --cog-font-size-h3 ); }
.cog h4 { font-size: var( --cog-font-size-h4 ); }
.cog h5 { font-size: var( --cog-font-size-h5 ); }
.cog h6 { font-size: var( --cog-font-size-h6 ); }

.cog-hero-l {
	font-size: var( --cog-font-size-hero-l );
	line-height: var( --cog-line-height-tight );
	font-weight: var( --cog-font-weight-bold );
}

.cog-hero-s {
	font-size: var( --cog-font-size-hero-s );
	line-height: var( --cog-line-height-tight );
	font-weight: var( --cog-font-weight-bold );
}

.cog-body-xl { font-size: var( --cog-font-size-body-xl ); }
.cog-body-l  { font-size: var( --cog-font-size-body-l ); }
.cog-body-m  { font-size: var( --cog-font-size-body-m ); }
.cog-body-s  { font-size: var( --cog-font-size-body-s ); }

.cog-w-regular { font-weight: var( --cog-font-weight-regular ); }
.cog-w-medium  { font-weight: var( --cog-font-weight-medium ); }
.cog-w-bold    { font-weight: var( --cog-font-weight-bold ); }

/* Applied by cog_apply_nowrap() to whitelisted phrases ("e-commerce" etc.)
   so the hyphen never becomes a line break. Keeps U+002D so SEO/Ctrl+F work. */
body.cog .cog-nowrap { white-space: nowrap; }

/* Button selectors use `body.cog .cog-btn.cog-btn--*` (0,3,1) to beat
   Elementor v4 atomic `.elementor .e-button-base` (0,2,1) which loads later. */
body.cog .cog-btn,
body.cog .cog-section-form .cog-form .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	padding: 8px 40px;
	border: 0;
	border-radius: 32px;
	cursor: pointer;
	text-decoration: none;
	/* `<button>` resets both font-family and line-height (user-agent);
	   `<a>` inherits from `.cog`. Re-assert both so Atomic button renders
	   the same whether link prop is filled (→<a>) or empty (→<button>). */
	font-family: var( --cog-font-family );
	font-size: var( --cog-font-size-body-m );
	font-weight: var( --cog-font-weight-regular );
	line-height: 100%;
	letter-spacing: 0;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* Hello Elementor's `button:hover/focus` forces color + text-decoration;
   re-assertions across variants below neutralise it. */
body.cog .cog-btn:hover,
body.cog .cog-btn:focus,
body.cog .cog-btn:focus-visible,
body.cog .cog-btn:active,
body.cog .cog-section-form .cog-form .elementor-button:hover,
body.cog .cog-section-form .cog-form .elementor-button:focus,
body.cog .cog-section-form .cog-form .elementor-button:focus-visible,
body.cog .cog-section-form .cog-form .elementor-button:active {
	text-decoration: none;
}

body.cog .cog-btn.cog-btn--primary,
body.cog .cog-section-form .cog-form .elementor-button {
	background-color: var( --cog-color-lime-300 );
	color: var( --cog-color-core-black-600 );
}

/* `.cog-form.elementor-widget-form` dual-class on the same element bumps specificity to 0,6,1 — */
/* beats Elementor's per-post rule (0,6,0) that hardcodes button hover color to #ffffff.            */
body.cog .cog-btn.cog-btn--primary:hover,
body.cog .cog-btn.cog-btn--primary:focus-visible,
body.cog .cog-section-form .cog-form.elementor-widget-form .elementor-button:hover,
body.cog .cog-section-form .cog-form.elementor-widget-form .elementor-button:focus-visible {
	background-color: var( --cog-color-lime-100 );
	color: var( --cog-color-core-black-600 );
}

/* svg fill follows the text color (Elementor hardcodes `fill:#ffffff` on hover otherwise). */
body.cog .cog-section-form .cog-form.elementor-widget-form .elementor-button:hover svg *,
body.cog .cog-section-form .cog-form.elementor-widget-form .elementor-button:focus-visible svg * {
	fill: var( --cog-color-core-black-600 );
}

body.cog .cog-btn.cog-btn--secondary {
	background-color: var( --cog-color-core-black-600 );
	color: var( --cog-color-base-white );
}

body.cog .cog-btn.cog-btn--secondary:hover,
body.cog .cog-btn.cog-btn--secondary:focus-visible {
	background-color: var( --cog-color-lime-300 );
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-btn.cog-btn--outline-black {
	background-color: transparent;
	color: var( --cog-color-core-black-600 );
	border: 1px solid var( --cog-color-core-black-600 );
}

body.cog .cog-btn.cog-btn--outline-black:hover,
body.cog .cog-btn.cog-btn--outline-black:focus-visible {
	border-color: var( --cog-color-lime-300 );
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-btn.cog-btn--outline-white {
	background-color: transparent;
	color: var( --cog-color-base-white );
	border: 1px solid var( --cog-color-base-white );
}

body.cog .cog-btn.cog-btn--outline-white:hover,
body.cog .cog-btn.cog-btn--outline-white:focus-visible {
	border-color: var( --cog-color-lime-300 );
	color: var( --cog-color-base-white );
}

body.cog .cog-btn.cog-btn--icon {
	width: 56px;
	height: 56px;
	min-width: 56px;
	padding: 8px;
}

/* Elementor svg widget renders SVG with inline `width:100%;height:100%`, which
   would stretch the icon to the button's inner box (~40×40). Pin the widget
   to 24×24 per Figma so the SVG resolves to its design size. */
body.cog .cog-btn.cog-btn--icon .e-svg-base {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}

body.cog .cog-btn svg {
	fill: currentColor;
	flex-shrink: 0;
}

body.cog .cog-card-pill {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 48px 64px;
	background-color: var( --cog-color-base-white );
	border-radius: 88px;
	flex: 1 1 0;
	min-width: 0;
}

body.cog .cog-card-pill__value {
	margin: 0;
	font-weight: var( --cog-font-weight-regular );
}

body.cog .cog-card-pill__label {
	margin: 0;
	font-size: var( --cog-font-size-body-xl );
}

body.cog .cog-section-pills {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-block: 64px;
	padding-inline: 16px;
}

body.cog .cog-section-pills__title,
body.cog .cog-section-pills__row {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
}

body.cog .cog-section-pills__title {
	margin-bottom: 40px;
}

body.cog .cog-section-pills__row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 8px;
	padding: 0;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-pills {
		padding-block: 48px;
	}

	body.cog .cog-section-pills__row {
		flex-direction: column;
	}

	body.cog .cog-card-pill {
		padding: 32px;
		border-radius: 56px;
	}

	/* Figma mobile pills keep H3 at 28px (vs. global mobile H3 token = 23px). */
	body.cog .cog-card-pill__value {
		font-size: 28px;
	}
}

body.cog .cog-card-service {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 64px;
	background-color: var( --cog-color-lime-100 );
	border-radius: 88px;
	flex: 1 1 0;
	min-width: 0;
}

/* Heading/paragraph elements still span full card width by default block flow,
   but the button (inline-flex) keeps its intrinsic width. */
body.cog .cog-card-service > .cog-card-service__eyebrow,
body.cog .cog-card-service > .cog-card-service__title,
body.cog .cog-card-service > .cog-card-service__description {
	align-self: stretch;
}

body.cog .cog-card-service__eyebrow {
	margin: 0 0 8px;
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-regular );
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-card-service__title {
	margin: 0 0 32px;
	/* Reserve two lines of vertical space so single-line titles don't shift the rest of the card up. */
	min-height: 2lh;
}

body.cog .cog-card-service__description {
	margin: 0 0 40px;
	font-size: var( --cog-font-size-body-l );
}

/* Stick CTA to bottom so buttons align across the row regardless of title/text height. */
body.cog .cog-card-service > :last-child {
	margin-top: auto;
}

body.cog .cog-section-services {
	display: flex;
	flex-direction: column;
	padding-block: 64px;
	padding-inline: 16px;
}

body.cog .cog-section-services__title,
body.cog .cog-section-services__row {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
}

body.cog .cog-section-services__title {
	margin-bottom: 48px;
}

body.cog .cog-section-services__row + .cog-section-services__row {
	margin-top: 8px;
}

body.cog .cog-section-services__row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 8px;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-services {
		padding-block: 40px;
	}

	body.cog .cog-section-services__row {
		flex-direction: column;
	}

	body.cog .cog-card-service {
		padding: 32px;
		border-radius: 56px;
	}
}

body.cog .cog-card-case {
	display: flex;
	flex-direction: column;
	gap: 24px;
	/* Narrowed from Figma's 458 so 5 slides fit on 1440 (3 full + 2 outer dimmed). */
	width: 380px;
	padding: 0;
	flex-shrink: 0;
}

body.cog .cog-card-case__image {
	width: 100%;
	aspect-ratio: 458 / 583;
	border-radius: 88px;
	object-fit: cover;
	display: block;
}

body.cog .cog-card-case__footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 0;
}

body.cog .cog-card-case__text {
	margin: 0;
	font-size: var( --cog-font-size-body-l );
	font-weight: var( --cog-font-weight-medium );
}

body.cog .cog-section-cases {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-block: 64px;
	padding-inline: 0;
}

body.cog .cog-section-cases__header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
}

body.cog .cog-section-cases__title {
	margin: 0;
}

body.cog .cog-section-cases__slider {
	width: 100%;
	padding: 0;
	overflow: hidden;
	touch-action: pan-y;
}

/* Figma 261:1058 — 3 middle cards (active + prev + next) at 100%, peek slides on either side at 30%. */
body.cog .cog-section-cases__slider .swiper-slide {
	width: auto;
	display: flex;
	touch-action: pan-y;
	opacity: 0.3;
	transition: opacity 0.3s ease;
}

body.cog .cog-section-cases__slider .swiper-slide-active,
body.cog .cog-section-cases__slider .swiper-slide-prev,
body.cog .cog-section-cases__slider .swiper-slide-next {
	opacity: 1;
}

/* Override Swiper's default `position: absolute` on bullets pagination —
   we want it inline in the section flow, centred below the slider. */
body.cog .cog-section-cases__progressbar.swiper-pagination-bullets {
	position: relative;
	inset: auto;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: auto;
	margin-inline: auto;
}

body.cog .cog-section-cases__progressbar .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0;
	background-color: var( --cog-color-cloud-300 );
	border-radius: 50%;
	opacity: 1;
	cursor: pointer;
	transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease;
}

body.cog .cog-section-cases__progressbar .swiper-pagination-bullet-active {
	width: 40px;
	height: 10px;
	border-radius: 12px;
	background-color: var( --cog-color-graphite-300 );
}

@media ( max-width: 1023px ) {
	body.cog .cog-card-case {
		width: 320px;
		gap: 24px;
	}

	body.cog .cog-card-case__image {
		aspect-ratio: 320 / 407;
	}

	body.cog .cog-section-cases {
		padding-block: 56px;
		gap: 32px;
	}

	/* Figma mobile 285:11188 — only the active card is at 100%; prev/next peek slides dim to 30%. */
	body.cog .cog-section-cases__slider .swiper-slide-prev,
	body.cog .cog-section-cases__slider .swiper-slide-next {
		opacity: 0.3;
	}

	/* `display: contents` flattens header so its children become direct
	   flex-items of the section, letting `order` push the button last. */
	body.cog .cog-section-cases__header {
		display: contents;
	}

	body.cog .cog-section-cases__header > .cog-section-cases__title {
		padding-inline: 16px;
	}

	body.cog .cog-section-cases__header > .cog-btn {
		order: 999;
		margin-inline: 16px;
	}
}

body.cog .cog-section-offer {
	display: flex;
	flex-direction: column;
	gap: 48px;
	background-color: var( --cog-color-graphite-600 );
	color: var( --cog-color-base-white );
	padding-block: 64px;
	padding-inline: 16px;
}

body.cog .cog-section-offer__header,
body.cog .cog-section-offer__divider,
body.cog .cog-section-offer__content {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
}

body.cog .cog-section-offer__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.cog .cog-section-offer__eyebrow {
	margin: 0;
	font-size: var( --cog-font-size-h6 );
	color: var( --cog-color-cloud-400 );
}

body.cog .cog-section-offer__title {
	margin: 0;
	font-size: var( --cog-font-size-h2 );
	font-weight: 700;
	line-height: var( --cog-line-height-tight );
	color: var( --cog-color-base-white );
}

body.cog .cog-section-offer__divider {
	height: 1px;
	background-color: var( --cog-color-cloud-400 );
	border: 0;
}

body.cog .cog-section-offer__content {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

body.cog .cog-section-offer__lead {
	margin: 0;
	font-size: var( --cog-font-size-h5 );
}

body.cog .cog-section-offer__columns {
	display: flex;
	flex-direction: row;
	gap: 56px;
	align-items: flex-start;
	padding: 0;
}

body.cog .cog-section-offer__column {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0;
}

body.cog .cog-section-offer__column-title {
	margin: 0;
	font-size: var( --cog-font-size-h6 );
	font-weight: 700;
}

body.cog .cog-section-offer__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0;
}

body.cog .cog-section-offer__list a {
	color: var( --cog-color-base-white );
	font-size: var( --cog-font-size-body-m );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.cog .cog-section-offer__list a:hover,
body.cog .cog-section-offer__list a:focus-visible {
	color: var( --cog-color-cloud-400 );
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-offer {
		padding-block: 48px;
		gap: 32px;
	}

	body.cog .cog-section-offer__columns {
		flex-direction: column;
		gap: 32px;
	}
}

body.cog .cog-section-rfq {
	display: flex;
	flex-direction: column;
	gap: 48px;
	background-color: var( --cog-color-graphite-600 );
	color: var( --cog-color-base-white );
	padding-block: 64px;
	padding-inline: 16px;
}

body.cog .cog-section-rfq__header,
body.cog .cog-section-rfq__divider,
body.cog .cog-section-rfq__content {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
}

body.cog .cog-section-rfq__header {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.cog .cog-section-rfq__eyebrow {
	margin: 0;
	font-size: var( --cog-font-size-h6 );
	color: var( --cog-color-cloud-400 );
}

body.cog .cog-section-rfq__title {
	margin: 0;
	font-size: var( --cog-font-size-h2 );
	font-weight: 700;
	line-height: var( --cog-line-height-tight );
}

body.cog .cog-section-rfq__divider {
	height: 1px;
	background-color: var( --cog-color-cloud-400 );
	border: 0;
}

body.cog .cog-section-rfq__content {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

body.cog .cog-section-rfq__lead {
	margin: 0;
	font-size: var( --cog-font-size-h5 );
}

body.cog .cog-section-rfq__columns {
	display: flex;
	flex-direction: row;
	gap: 56px;
	align-items: flex-start;
	padding: 0;
}

body.cog .cog-section-rfq__column {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0;
}

body.cog .cog-section-rfq__step-num {
	margin: 0 0 8px;
	font-size: var( --cog-font-size-body-m );
}

body.cog .cog-section-rfq__step-title {
	margin: 0;
	font-size: var( --cog-font-size-h5 );
}

body.cog .cog-section-rfq__step-text {
	margin: 0;
	font-size: var( --cog-font-size-body-m );
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-rfq {
		padding-block: 48px;
		gap: 32px;
	}

	body.cog .cog-section-rfq__columns {
		flex-direction: column;
		gap: 32px;
	}
}

body.cog .cog-section-process {
	display: flex;
	flex-direction: column;
	gap: 48px;
	background-color: var( --cog-color-graphite-600 );
	color: var( --cog-color-base-white );
	padding-block: 64px;
	padding-inline: 16px;
}

body.cog .cog-section-process__title,
body.cog .cog-section-process__divider,
body.cog .cog-section-process__image,
body.cog .cog-section-process__footer {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
}

body.cog .cog-section-process__title {
	/* margin-block: 0 not `margin: 0` — the combined rule above sets
	   `margin-inline: auto` for centering within the section, and a
	   shorthand `margin` would override that to 0 and pin to left. */
	margin-block: 0;
	font-size: var( --cog-font-size-h2 );
	font-weight: 700;
	line-height: var( --cog-line-height-tight );
}

body.cog .cog-section-process__title em {
	font-style: normal;
	font-weight: 400;
}

body.cog .cog-section-process__divider {
	height: 1px;
	background-color: var( --cog-color-cloud-400 );
	border: 0;
}

body.cog .cog-section-process__image {
	display: block;
	height: auto;
}

body.cog .cog-section-process__image--mobile {
	display: none;
}

body.cog .cog-section-process__footer {
	display: flex;
	flex-direction: row;
	gap: 48px;
	align-items: flex-start;
}

body.cog .cog-section-process__question {
	flex: 0 0 400px;
	margin: 0;
	font-size: var( --cog-font-size-h5 );
}

body.cog .cog-section-process__list {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0;
}

body.cog .cog-section-process__list-item {
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-items: flex-start;
	padding: 0;
}

body.cog .cog-section-process__list-num {
	flex: 0 0 30px;
	margin: 0;
	font-size: var( --cog-font-size-body-l );
}

body.cog .cog-section-process__list-text {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-size: var( --cog-font-size-body-l );
}

body.cog .cog-section-process__footnote {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
	font-size: var( --cog-font-size-body-s );
	color: var( --cog-color-cloud-400 );
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-process {
		padding-block: 48px;
		gap: 32px;
	}

	body.cog .cog-section-process__image:not( .cog-section-process__image--mobile ) {
		display: none;
	}

	body.cog .cog-section-process__image--mobile {
		display: block;
	}

	body.cog .cog-section-process__footer {
		flex-direction: column;
		gap: 24px;
	}

	body.cog .cog-section-process__question {
		flex: 0 0 auto;
	}
}

body.cog .cog-section-doradztwo {
	background-color: var( --cog-color-graphite-600 );
	padding-block: 0 64px;
	padding-inline: 16px;
}

body.cog .cog-section-doradztwo__card {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	border: 1px solid transparent;
	background:
		linear-gradient( var( --cog-color-core-black-600 ), var( --cog-color-core-black-600 ) ) padding-box,
		linear-gradient( 94deg, #525151 2.26%, #333333 55.48%, #ECFFC5 98.52% ) border-box;
	border-radius: 88px;
	padding: 64px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	color: var( --cog-color-base-white );
}

/* `padding: 0` and `width: auto` overrides on the flexboxes below neutralise
   Elementor's `.e-flexbox-base` (10px padding) and `.e-con` (--width: 100%)
   defaults, which would otherwise break this row layout. */
body.cog .cog-section-doradztwo__row {
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 160px;
	align-items: flex-start;
}

body.cog .cog-section-doradztwo__content {
	padding: 0;
	width: auto;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Per-pair gaps (Figma: header 8px between eyebrow+title, then 32px to body). */
body.cog .cog-section-doradztwo__eyebrow + .cog-section-doradztwo__title {
	margin-top: 8px;
}
body.cog .cog-section-doradztwo__title + .cog-section-doradztwo__text,
body.cog .cog-section-doradztwo__eyebrow + .cog-section-doradztwo__text {
	margin-top: 32px;
}

body.cog .cog-section-doradztwo__eyebrow {
	margin: 0;
	font-size: var( --cog-font-size-body-l );
	color: var( --cog-color-cloud-400 );
}

body.cog .cog-section-doradztwo__title {
	margin: 0;
	font-size: var( --cog-font-size-h4 );
	font-weight: 700;
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-doradztwo__text {
	margin: 0;
	font-size: var( --cog-font-size-body-l );
}

body.cog .cog-section-doradztwo__photos {
	padding: 0;
	width: auto;
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
}

body.cog .cog-section-doradztwo__photo {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
}

/* 20px overlap (ml=140 on 160-wide circle). */
body.cog .cog-section-doradztwo__photo + .cog-section-doradztwo__photo {
	margin-left: -20px;
}

body.cog .cog-section-doradztwo__cta {
	align-self: flex-start;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-doradztwo {
		padding-block: 0 48px;
	}

	body.cog .cog-section-doradztwo__card {
		padding: 32px;
		border-radius: 32px;
		gap: 32px;
	}

	body.cog .cog-section-doradztwo__row {
		flex-direction: column-reverse;
		gap: 32px;
		align-items: stretch;
	}

	body.cog .cog-section-doradztwo__content {
		align-self: stretch;
	}

	body.cog .cog-section-doradztwo__photos {
		width: 100%;
		justify-content: center;
	}

	/* Photo pair fills card content width on phones (each circle ≈ half
	   the row), capped at 163px on tablets. */
	body.cog .cog-section-doradztwo__photo {
		width: min( calc( ( 100% + 20px ) / 2 ), 163px );
		height: auto;
		aspect-ratio: 1 / 1;
		flex-shrink: 0;
	}

	body.cog .cog-section-doradztwo__cta {
		align-self: stretch;
	}
}

body.cog .cog-section-rozmowa {
	padding-block: 32px;
	padding-inline: 16px;
}

body.cog .cog-section-rozmowa--cloud {
	background-color: transparent;
}

body.cog .cog-section-rozmowa--graphite {
	background-color: var( --cog-color-graphite-600 );
}

body.cog .cog-section-rozmowa__card {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	border-radius: 88px;
	border-width: 1px;
	border-style: solid;
	padding: 32px;
}

body.cog .cog-section-rozmowa--cloud .cog-section-rozmowa__card {
	border-color: transparent;
	background:
		linear-gradient( var( --cog-color-cloud-200 ), var( --cog-color-cloud-200 ) ) padding-box,
		linear-gradient( 94deg, #CACBCB 2.26%, #FFF 18.52%, #E8E9E9 52.5%, #B1DE5A 98.52% ) border-box;
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-rozmowa--graphite .cog-section-rozmowa__card {
	border-color: transparent;
	background:
		linear-gradient( var( --cog-color-graphite-400 ), var( --cog-color-graphite-400 ) ) padding-box,
		linear-gradient( 94deg, #525151 2.26%, #333333 55.48%, #ECFFC5 98.52% ) border-box;
	color: var( --cog-color-base-white );
}

body.cog .cog-section-rozmowa__row {
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 48px;
	align-items: center;
}

body.cog .cog-section-rozmowa__photo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

body.cog .cog-section-rozmowa__text {
	padding: 0;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: row;
	gap: 32px;
	align-items: center;
	justify-content: space-between;
}

body.cog .cog-section-rozmowa__copy {
	padding: 0;
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

body.cog .cog-section-rozmowa__line {
	margin: 0;
	font-size: var( --cog-font-size-h4 );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-rozmowa__line--lead {
	font-weight: var( --cog-font-weight-regular );
}

body.cog .cog-section-rozmowa__line--cta {
	font-weight: var( --cog-font-weight-medium );
}

body.cog .cog-section-rozmowa__cta {
	flex-shrink: 0;
	margin-left: auto;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-rozmowa__card {
		padding: 32px;
		border-radius: 64px;
	}

	/* Grid lets `__cta` span both columns while `__text` (its parent) is
	   flattened with `display: contents`, so cta can sit below the row. */
	body.cog .cog-section-rozmowa__row {
		display: grid;
		grid-template-columns: 88px 1fr;
		grid-template-rows: auto auto;
		column-gap: 24px;
		row-gap: 48px;
		align-items: center;
	}

	body.cog .cog-section-rozmowa__photo {
		width: 88px;
		height: 88px;
		grid-column: 1;
		grid-row: 1;
	}

	body.cog .cog-section-rozmowa__text {
		display: contents;
	}

	body.cog .cog-section-rozmowa__copy {
		grid-column: 2;
		grid-row: 1;
	}

	body.cog .cog-section-rozmowa__cta {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		margin-left: 0;
	}

	body.cog .cog-section-rozmowa__line--cta {
		font-weight: var( --cog-font-weight-bold );
	}
}

body.cog .cog-section-newsletter {
	padding-block: 32px;
	padding-inline: 16px;
	background-color: transparent;
}

body.cog .cog-section-newsletter__card {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	border: 1px solid transparent;
	border-radius: 88px;
	padding: 64px;
	background:
		linear-gradient( var( --cog-color-cloud-200 ), var( --cog-color-cloud-200 ) ) padding-box,
		linear-gradient( 94deg, #CACBCB 2.26%, #FFF 18.52%, #E8E9E9 52.5%, #B1DE5A 98.52% ) border-box;
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-newsletter__row {
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 32px;
	align-items: center;
	justify-content: space-between;
}

body.cog .cog-section-newsletter__copy {
	padding: 0;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.cog .cog-section-newsletter__title {
	margin: 0;
	font-size: var( --cog-font-size-h4 );
	font-weight: var( --cog-font-weight-bold );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-newsletter__text {
	margin: 0;
	font-size: var( --cog-font-size-body-l );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-newsletter__cta {
	flex-shrink: 0;
	margin-left: auto;
}

body.cog .cog-section-newsletter--vertical .cog-section-newsletter__row {
	flex-direction: column;
	gap: 48px;
	align-items: flex-start;
}

body.cog .cog-section-newsletter--vertical .cog-section-newsletter__cta {
	margin-left: 0;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-newsletter__card {
		padding: 32px;
		border-radius: 64px;
	}

	body.cog .cog-section-newsletter__row {
		flex-direction: column;
		gap: 32px;
		align-items: stretch;
	}

	body.cog .cog-section-newsletter__cta {
		margin-left: 0;
		width: 100%;
	}
}

/* Wraps Elementor Pro Form widget; field colors live on the widget settings
   per-template (so Elementor's per-page CSS picks them up), here we only do
   layout + the --graphite / --cloud color flips. */
body.cog .cog-section-form {
	padding-block: 64px;
	padding-inline: 16px;
}

body.cog .cog-section-form__inner {
	width: 100%;
	max-width: 800px;
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

body.cog .cog-section-form__copy {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.cog .cog-section-form__title {
	margin: 0;
	font-size: var( --cog-font-size-h3 );
	font-weight: var( --cog-font-weight-bold );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-form__lead {
	margin: 0;
	font-size: var( --cog-font-size-body-l );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-form--graphite {
	background-color: var( --cog-color-graphite-600 );
	color: var( --cog-color-base-white );
}

body.cog .cog-section-form--graphite .cog-section-form__title,
body.cog .cog-section-form--graphite .cog-section-form__lead {
	color: var( --cog-color-base-white );
}

/* Scoped to .cog-form so it doesn't clobber Jacek's legacy .form-kontakt
   skin used on un-migrated pages. */
body.cog .cog-section-form .cog-form .elementor-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

body.cog .cog-section-form .cog-form .elementor-form .elementor-form-fields-wrapper {
	gap: 16px;
}

body.cog .cog-section-form .cog-form .elementor-field-group {
	position: relative;
	padding: 0;
	margin: 0;
}

body.cog .cog-section-form .cog-form .elementor-field-group > .elementor-field-label {
	display: none;
}

body.cog .cog-section-form .cog-form .elementor-field-textual {
	height: 48px;
	padding: 0 16px;
	background-color: var( --cog-color-graphite-400 );
	color: var( --cog-color-base-white );
	border: 0;
	border-radius: 32px;
	font-family: var( --cog-font-family );
	font-size: var( --cog-font-size-body-l );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	box-shadow: none;
}

body.cog .cog-section-form .cog-form textarea.elementor-field-textual {
	height: 120px;
	padding: 13px 16px;
	resize: vertical;
}

body.cog .cog-section-form .cog-form .elementor-field-textual::placeholder {
	color: var( --cog-color-base-white );
	opacity: 1;
}

body.cog .cog-section-form .cog-form .elementor-field-textual:focus {
	outline: 2px solid var( --cog-color-cloud-300 );
	outline-offset: -2px;
}

/* Red asterisk sits 4px after the placeholder text. We pin each field by `name` (Elementor's  */
/* internal form-field key — stable across placeholder edits) and hardcode the matching width  */
/* (16px input padding + measured text width at 18px DM Sans + 4px gap). If marketing changes  */
/* the placeholder text in Elementor, update the corresponding `left` below; if they rename a  */
/* field-id, update the `name` selector. Unknown fields stay opacity:0 so they never flash.    */
body.cog .cog-section-form .cog-form .elementor-field-group.elementor-field-required:not(.elementor-field-type-acceptance)::after {
	content: "*";
	position: absolute;
	top: 50%;
	left: 16px;
	transform: translateY( -50% );
	color: var( --cog-color-error-red-600 );
	font-weight: var( --cog-font-weight-bold );
	font-size: var( --cog-font-size-body-m );
	line-height: 1;
	pointer-events: none;
	opacity: 0;
}

body.cog .cog-section-form .cog-form .elementor-field-group.elementor-field-required:has( [name="form_fields[name]"] )::after {
	left: 250px;
	opacity: 1;
}

body.cog .cog-section-form .cog-form .elementor-field-group.elementor-field-required:has( [name="form_fields[phone]"] )::after {
	left: 149px;
	opacity: 1;
}

body.cog .cog-section-form .cog-form .elementor-field-group.elementor-field-required:has( [name="form_fields[email]"] )::after {
	left: 74px;
	opacity: 1;
}

body.cog .cog-section-form .cog-form .elementor-field-group.elementor-field-required:has( [name="form_fields[message]"] )::after {
	left: 120px;
	opacity: 1;
}

body.cog .cog-section-form .cog-form .elementor-field-group.elementor-field-type-textarea.elementor-field-required::after {
	top: 13px;
	transform: none;
}

body.cog .cog-section-form .cog-form .elementor-field-group.elementor-field-required:not(.elementor-field-type-acceptance):has( input:not( :placeholder-shown ) )::after,
body.cog .cog-section-form .cog-form .elementor-field-group.elementor-field-required:has( textarea:not( :placeholder-shown ) )::after {
	display: none;
}

body.cog .cog-section-form .cog-form .elementor-field-type-acceptance .elementor-field-subgroup {
	gap: 8px;
	align-items: flex-start;
}

body.cog .cog-section-form .cog-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

/* `margin-top: 3px` centres the checkbox on the first label line: line-height 1.4×16 = 22.4px →   */
/* mid 11.2px; 16px checkbox → mid 8px; offset 11.2 - 8 ≈ 3px. Matches Figma items-start + py-2px. */
body.cog .cog-section-form .cog-form .elementor-field-type-acceptance input[type="checkbox"].elementor-field {
	flex-shrink: 0;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 3px 0 0 0;
	background-color: var( --cog-color-base-white );
	border: 1px solid var( --cog-color-cloud-300 );
	border-radius: 4px;
	appearance: none;
	cursor: pointer;
	position: relative;
}

body.cog .cog-section-form .cog-form .elementor-field-type-acceptance input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0;
	width: 5px;
	height: 10px;
	border: solid var( --cog-color-graphite-600 );
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

body.cog .cog-section-form .cog-form .elementor-field-type-acceptance label,
body.cog .cog-section-form .cog-form .elementor-field-type-acceptance .elementor-field-option label {
	color: var( --cog-color-base-white );
	font-family: var( --cog-font-family );
	font-size: var( --cog-font-size-body-m );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

/* Figma: 24px between inputs↔checkboxes and checkboxes↔submit (wrapper gap = 16px). First         */
/* acceptance + submit get +8px top (= 24 total). Second acceptance subtracts 8px so it stays at   */
/* 8px inside the checkbox group.                                                                  */
body.cog .cog-section-form .cog-form .elementor-field-type-acceptance,
body.cog .cog-section-form .cog-form .elementor-field-type-submit {
	margin-top: 8px;
}

body.cog .cog-section-form .cog-form .elementor-field-type-acceptance + .elementor-field-type-acceptance {
	margin-top: -8px;
}

body.cog .cog-section-form .cog-form .elementor-field-type-acceptance .elementor-field-required-indicator,
body.cog .cog-section-form .cog-form .elementor-field-type-acceptance label .elementor-mark-required,
body.cog .cog-section-form .cog-form .cog-req {
	color: var( --cog-color-error-red-600 );
	font-weight: var( --cog-font-weight-bold );
}

/* Lime-300 only stays readable on the graphite variant. On light backgrounds
   (`--cloud`, default) fall back to neutral black + bold; on graphite go
   white + bold so the message stands out from the form text. */
body.cog .cog-section-form .cog-form .elementor-message.elementor-message-success {
	color: var( --cog-color-core-black-600 );
	font-weight: var( --cog-font-weight-bold );
}

body.cog .cog-section-form--graphite .cog-form .elementor-message.elementor-message-success {
	color: var( --cog-color-base-white );
}

body.cog .cog-section-form .cog-form .elementor-message.elementor-message-danger {
	color: var( --cog-color-error-red-600 );
}

body.cog .cog-section-form--cloud {
	background-color: transparent;
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-form--cloud .cog-section-form__title,
body.cog .cog-section-form--cloud .cog-section-form__lead {
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-form--cloud .cog-form .elementor-field-type-acceptance label,
body.cog .cog-section-form--cloud .cog-form .elementor-field-type-acceptance .elementor-field-option label {
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-form--cloud .cog-form .elementor-field-textual::placeholder {
	color: var( --cog-color-cloud-700 );
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-form {
		padding-block: 48px;
	}

	body.cog .cog-section-form__title {
		font-size: var( --cog-font-size-h4 );
	}
}

body.cog .cog-section-columns {
	padding-block: 64px;
	padding-inline: 16px;
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-columns__inner {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

body.cog .cog-section-columns__title {
	margin: 0;
	font-size: var( --cog-font-size-h2 );
	font-weight: var( --cog-font-weight-bold );
	line-height: 1.2;
}

body.cog .cog-section-columns__lead {
	margin: 0;
	max-width: var( --cog-content-narrow-width );
	font-size: var( --cog-font-size-h5 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-columns__grid {
	padding: 0;
	display: grid;
	column-gap: 56px;
	row-gap: 64px;
}

body.cog .cog-section-columns--2 .cog-section-columns__grid {
	grid-template-columns: repeat( 2, 1fr );
}

body.cog .cog-section-columns--3 .cog-section-columns__grid {
	grid-template-columns: repeat( 3, 1fr );
}

body.cog .cog-section-columns__item {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
}

body.cog .cog-section-columns__item-title {
	margin: 0;
	font-size: var( --cog-font-size-h3 );
	font-weight: 500;
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-columns__item-text {
	margin: 0;
	font-size: var( --cog-font-size-body-l );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-columns__item-text strong {
	font-weight: var( --cog-font-weight-bold );
}

body.cog .cog-section-columns__item-text a {
	color: inherit;
	text-decoration: underline;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-columns {
		padding-block: 48px;
	}

	body.cog .cog-section-columns__inner {
		gap: 32px;
	}

	/* Match desktop modifier specificity (0,3,0) so mobile single-column actually wins. */
	body.cog .cog-section-columns--2 .cog-section-columns__grid,
	body.cog .cog-section-columns--3 .cog-section-columns__grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	body.cog .cog-section-columns__item {
		gap: 16px;
	}
}

body.cog .cog-section-checks {
	padding-block: 64px;
	padding-inline: 16px;
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-checks__inner {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

body.cog .cog-section-checks__title {
	margin: 0;
	font-size: var( --cog-font-size-h2 );
	font-weight: var( --cog-font-weight-bold );
	line-height: 1.2;
}

body.cog .cog-section-checks__lead {
	margin: 0;
	max-width: var( --cog-content-narrow-width );
	font-size: var( --cog-font-size-h5 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-divider,
body.cog .cog-section-checks__divider {
	height: 1px;
	width: 100%;
	padding: 0;
	flex-shrink: 0;
	background: linear-gradient( 94deg, #B1DE5A 2.26%, #333 51.78%, #ECFFC5 98.52% );
}

body.cog .cog-section-checks__row {
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 56px;
	align-items: flex-start;
}

body.cog .cog-section-checks__item {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

body.cog .cog-section-checks__icon {
	flex-shrink: 0;
	padding: 0;
	width: 64px;
	height: 48px;
	background-color: var( --cog-color-lime-300 );
	border-radius: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Atomic `.e-con::before` is an absolute 100%×100% overlay that distorts the */
	/* pill and stretches our `✓`. Neutralise it everywhere on the icon. */
	position: relative;
}

body.cog .cog-section-checks__icon::before {
	position: static;
	width: auto;
	height: auto;
	background: none;
}

/* Fallback "✓" — shown only when no real content sits in the icon slot. The      */
/* Elementor editor injects `.elementor-element-overlay` + `.elementor-empty-view` */
/* into every empty flexbox, so we exclude those and check direct children only.  */
/* Any user-dropped widget (image/SVG/icon) renders as a non-chrome child and      */
/* hides the fallback automatically.                                              */
body.cog .cog-section-checks__icon:not( :has( > :not( .elementor-element-overlay ):not( .elementor-empty-view ) ) )::before {
	content: "✓";
	color: var( --cog-color-base-white );
	font-size: 28px;
	font-weight: var( --cog-font-weight-bold );
	line-height: 1;
}

/* Atomic Image widget puts `.cog-section-checks__icon` directly on the <img>,
   so the pill (64×48 lime + radius) and the icon are the same element. We pad
   the box-sized image so the SVG content renders at ~24×24 centred — matching
   the Figma icon footprint. `object-fit: contain` preserves aspect ratio. */
body.cog img.cog-section-checks__icon,
body.cog svg.cog-section-checks__icon {
	padding: 12px 20px;
	box-sizing: border-box;
	object-fit: contain;
}

/* Fallback for the legacy nested-widget pattern (image dropped INSIDE an empty
   flexbox with the class). Keeps the icon constrained when the structure isn't
   the new single-img layout. */
body.cog .cog-section-checks__icon > img,
body.cog .cog-section-checks__icon > svg,
body.cog .cog-section-checks__icon .elementor-widget img,
body.cog .cog-section-checks__icon .elementor-widget svg {
	max-width: 24px;
	max-height: 24px;
	width: auto;
	height: auto;
	object-fit: contain;
}

body.cog .cog-section-checks__item-title {
	margin: 0;
	font-size: var( --cog-font-size-h4 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-checks__item-text {
	margin: 0;
	font-size: var( --cog-font-size-body-l );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-checks__item-text strong {
	font-weight: var( --cog-font-weight-bold );
}

body.cog .cog-section-checks__item-text a {
	color: inherit;
	text-decoration: underline;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-checks {
		padding-block: 48px;
	}

	body.cog .cog-section-checks__inner {
		gap: 32px;
	}

	body.cog .cog-section-checks__row {
		flex-direction: column;
		gap: 32px;
	}
}

/* `mix-blend-mode: multiply` blends each logo's white asset background into the section's background without per-asset masking. */
body.cog .cog-section-logos {
	padding-block: 64px;
	padding-inline: 16px;
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-logos__inner {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

body.cog .cog-section-logos__header {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.cog .cog-section-logos__eyebrow {
	margin: 0;
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-section-logos__title {
	margin: 0;
	font-size: var( --cog-font-size-h2 );
	font-weight: var( --cog-font-weight-bold );
	line-height: 1.2;
}

body.cog .cog-section-logos__lead {
	margin: 0;
	max-width: var( --cog-content-narrow-width );
	font-size: var( --cog-font-size-h5 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-logos__lead a {
	color: inherit;
	text-decoration: underline;
}

body.cog .cog-section-logos__row {
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	gap: 40px;
	align-items: center;
}

/* Industry-standard grayscale + multiply for client-logo walls: monochrome logos + white JPG */
/* backgrounds disappear (multiply 255×cloud-200 = cloud-200). Badges keep colour via override. */
body.cog .cog-section-logos__logo {
	width: 100%;
	height: auto;
	aspect-ratio: 165 / 112;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: grayscale( 1 );
}

/* `--clients` keeps logos at natural 256px and wraps overflow to new rows instead of squeezing  */
/* them into a single line. `auto-fit` + `justify-content: center` also centres a partial row.   */
body.cog .cog-section-logos--clients .cog-section-logos__row {
	grid-template-columns: repeat( auto-fit, 256px );
	justify-content: center;
}

body.cog .cog-section-logos--clients .cog-section-logos__logo {
	width: 256px;
	aspect-ratio: 256 / 160;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-logos {
		padding-block: 48px;
	}

	body.cog .cog-section-logos__inner {
		gap: 32px;
	}

	body.cog .cog-section-logos__row {
		grid-template-columns: repeat( 3, 1fr );
		gap: 32px;
	}

	body.cog .cog-section-logos--clients .cog-section-logos__row {
		grid-template-columns: repeat( auto-fit, 160px );
		gap: 24px;
	}

	body.cog .cog-section-logos--clients .cog-section-logos__logo {
		width: 160px;
	}
}

body.cog .cog-section-logos-strip {
	padding-block: 40px;
	padding-inline: 16px;
}

body.cog .cog-section-logos-strip__row {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 40px 80px;
	align-items: center;
	justify-content: center;
}

body.cog .cog-section-logos-strip--tight .cog-section-logos-strip__row {
	gap: 40px;
}

/* Fixed 220px slot height aligns badges of different aspect ratios on a shared baseline. */
body.cog .cog-section-logos-strip--badges {
	padding-block: 32px;
}

body.cog .cog-section-logos-strip--badges .cog-section-logos-strip__row {
	gap: 40px;
}

body.cog .cog-section-logos-strip--badges .cog-section-logos-strip__logo {
	width: 158px;
	height: 220px;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-logos-strip--badges .cog-section-logos-strip__logo {
		width: 110px;
		height: auto;
		aspect-ratio: 158 / 220;
	}
}

body.cog .cog-section-logos-strip__logo {
	width: 165px;
	height: 112px;
	flex-shrink: 0;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: grayscale( 1 );
}

/* Badges (Clutch, Forbes Diamonds, Google Partner, etc.) are trust certificates — branding   */
/* colour is part of the trust signal, so this variant overrides the grayscale rule.          */
body.cog .cog-section-logos-strip--badges .cog-section-logos-strip__logo {
	filter: none;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-logos-strip__row {
		gap: 32px;
	}

	body.cog .cog-section-logos-strip__logo {
		width: 120px;
		height: auto;
		aspect-ratio: 165 / 112;
	}
}

/* `mask-image` instead of a gradient overlay so the side fade works regardless of the section background. */
body.cog .cog-section-logos-slider {
	padding-block: 64px;
	padding-inline: 0;
}

body.cog .cog-section-logos-slider__container {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

/* Swiper-wrapper has `transform` → new stacking context → logo `mix-blend-mode` can't reach the    */
/* body bg. We seed cloud-100 (matches body) on `__slider`, `.swiper-wrapper` and every             */
/* `.swiper-slide` (incl. JS-cloned duplicates) so multiply has a solid backdrop — visually         */
/* identical to "transparent on body" per Figma, but avoids white JPG halos through the stacking    */
/* context.                                                                                         */
/*                                                                                                  */
/* The slider breaks out of the container's 1440px cap to full viewport width (negative margins),   */
/* so logos beyond the 1440 content area become "peeks". The mask uses hard-stop alphas (0.4 on the */
/* sides, 1 inside) — no gradient fade — to dim those peeks to 40% opacity, matching Figma.         */
body.cog .cog-section-logos-slider__slider {
	width: 100vw;
	margin-inline: calc( 50% - 50vw );
	padding: 0;
	overflow: hidden;
	background-color: var( --cog-color-cloud-100 );
	--cog-peek-shade: 211px;
	--cog-peek-fade: 60px;
	-webkit-mask-image: linear-gradient(
		to right,
		rgba( 0, 0, 0, 0.4 ) 0,
		rgba( 0, 0, 0, 0.4 ) calc( var( --cog-peek-shade ) - var( --cog-peek-fade ) ),
		#000 calc( var( --cog-peek-shade ) + var( --cog-peek-fade ) ),
		#000 calc( 100% - var( --cog-peek-shade ) - var( --cog-peek-fade ) ),
		rgba( 0, 0, 0, 0.4 ) calc( 100% - var( --cog-peek-shade ) + var( --cog-peek-fade ) ),
		rgba( 0, 0, 0, 0.4 ) 100%
	);
	mask-image: linear-gradient(
		to right,
		rgba( 0, 0, 0, 0.4 ) 0,
		rgba( 0, 0, 0, 0.4 ) calc( var( --cog-peek-shade ) - var( --cog-peek-fade ) ),
		#000 calc( var( --cog-peek-shade ) + var( --cog-peek-fade ) ),
		#000 calc( 100% - var( --cog-peek-shade ) - var( --cog-peek-fade ) ),
		rgba( 0, 0, 0, 0.4 ) calc( 100% - var( --cog-peek-shade ) + var( --cog-peek-fade ) ),
		rgba( 0, 0, 0, 0.4 ) 100%
	);
}

body.cog .cog-section-logos-slider__slider .swiper-wrapper {
	background-color: var( --cog-color-cloud-100 );
}

body.cog .cog-section-logos-slider__slider .swiper-slide {
	width: 171px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var( --cog-color-cloud-100 );
}

body.cog .cog-section-logos-slider__logo {
	width: 171px;
	height: 116px;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: grayscale( 1 );
}

body.cog .cog-section-logos-slider__progressbar.swiper-pagination-bullets {
	position: relative;
	inset: auto;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: auto;
	margin-inline: auto;
}

body.cog .cog-section-logos-slider__progressbar .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0;
	background-color: var( --cog-color-cloud-300 );
	border-radius: 50%;
	opacity: 1;
	cursor: pointer;
	transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease;
}

body.cog .cog-section-logos-slider__progressbar .swiper-pagination-bullet-active {
	width: 40px;
	height: 10px;
	border-radius: 12px;
	background-color: var( --cog-color-graphite-300 );
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-logos-slider {
		padding-block: 48px;
	}

	/* On mobile the "visible area" shrinks to the active slide's natural width (171px). Prev/next */
	/* peeks on either side dim to 40% opacity through the same hard-stop mask trick.              */
	body.cog .cog-section-logos-slider__slider {
		--cog-peek-shade: calc( ( 100% - 171px ) / 2 );
	}
}

body.cog .cog-section-faq {
	padding-block: 32px;
	padding-inline: 16px;
}

body.cog .cog-section-faq__card {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	background-color: var( --cog-color-base-white );
	border-radius: 96px;
	padding: 64px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

body.cog .cog-section-faq__header {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.cog .cog-section-faq__eyebrow {
	margin: 0;
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-section-faq__title {
	margin: 0;
	font-size: var( --cog-font-size-h2 );
	font-weight: var( --cog-font-weight-bold );
	line-height: 1.2;
}

body.cog .cog-section-faq__list {
	display: flex;
	flex-direction: column;
}

body.cog .cog-section-faq__item {
	border-bottom: 1px solid var( --cog-color-cloud-300 );
	padding-block: 16px;
}

body.cog .cog-section-faq__item > summary {
	display: flex;
	gap: 88px;
	align-items: center;
	cursor: pointer;
	list-style: none;
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-medium );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-faq__item > summary > span {
	flex: 1 1 auto;
}

body.cog .cog-section-faq__item > summary::-webkit-details-marker {
	display: none;
}

body.cog .cog-section-faq__item > summary::after {
	content: "";
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var( --cog-color-lime-100 );
	background-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>" );
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.2s ease;
}

body.cog .cog-section-faq__item[open] > summary::after {
	transform: rotate( 180deg );
}

/* Expand-on-open animation. Uses `::details-content` (Chrome 131+ / Safari 18.2+ / FF 134+) */
/* and `interpolate-size` to animate from 0 to `auto` block-size.                            */
body.cog .cog-section-faq__item {
	interpolate-size: allow-keywords;
}

body.cog .cog-section-faq__item::details-content {
	block-size: 0;
	overflow: clip;
	opacity: 0;
	transition:
		block-size 0.3s ease,
		content-visibility 0.3s allow-discrete,
		opacity 0.25s ease;
	transition-behavior: allow-discrete;
}

body.cog .cog-section-faq__item[open]::details-content {
	block-size: auto;
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {
	body.cog .cog-section-faq__item::details-content {
		transition: none;
	}
	body.cog .cog-section-faq__item > summary::after {
		transition: none;
	}
}

body.cog .cog-section-faq__item > p {
	margin: 12px 0 0;
	padding-right: 120px;
	font-size: var( --cog-font-size-body-m );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-faq__item > p a {
	color: var( --cog-color-core-black-600 );
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s ease;
}

body.cog .cog-section-faq__item > p a:hover,
body.cog .cog-section-faq__item > p a:focus-visible {
	text-decoration-color: var( --cog-color-lime-400 );
	text-decoration-thickness: 2px;
}

body.cog .cog-section-faq__item > p strong {
	font-weight: var( --cog-font-weight-bold );
}

/* JS (faq-menu.js) toggles the [data-faq-panel] attribute based on which `__cat` was clicked. */
body.cog .cog-section-faq--menu .cog-section-faq__list {
	flex-direction: row;
	gap: 32px;
	align-items: flex-start;
}

body.cog .cog-section-faq__menu {
	width: 400px;
	flex-shrink: 0;
	padding-block: 16px;
}

body.cog .cog-section-faq__menu .elementor-widget-container {
	display: flex;
	flex-direction: column;
}

body.cog .cog-section-faq__cat {
	padding: 8px 0;
	margin: 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-family: var( --cog-font-family );
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-faq__cat:hover,
body.cog .cog-section-faq__cat:focus-visible {
	text-decoration: underline;
	outline: none;
}

body.cog .cog-section-faq__cat--active {
	font-weight: var( --cog-font-weight-bold );
	text-decoration: underline;
}

body.cog .cog-section-faq__panels {
	flex: 1 1 auto;
	min-width: 0;
}

body.cog .cog-section-faq__panel {
	display: none;
}

body.cog .cog-section-faq__panel--active {
	display: flex;
	flex-direction: column;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-faq__card {
		padding: 32px;
		border-radius: 48px;
		gap: 32px;
	}

	body.cog .cog-section-faq__item > summary {
		gap: 24px;
	}

	body.cog .cog-section-faq__item > p {
		padding-right: 0;
	}

	body.cog .cog-section-faq--menu .cog-section-faq__list {
		flex-direction: column;
		gap: 16px;
	}

	body.cog .cog-section-faq__menu {
		width: 100%;
		padding-block: 0;
		flex-direction: row;
		gap: 24px;
		flex-wrap: wrap;
	}
}

body.cog .cog-section-articles {
	padding-block: 64px;
	padding-inline: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

body.cog .cog-section-articles__header {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

body.cog .cog-section-articles__title {
	margin: 0;
	font-size: var( --cog-font-size-h2 );
	font-weight: var( --cog-font-weight-bold );
	line-height: 1.2;
}

body.cog .cog-section-articles__container {
	width: 100%;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

body.cog .cog-section-articles__slider {
	width: 100%;
	padding: 0;
	overflow: hidden;
}

body.cog .cog-section-articles__slider .swiper-slide {
	width: 458px;
	display: flex;
	transition: opacity 0.3s ease;
	opacity: 0.3;
}

body.cog .cog-section-articles__slider .swiper-slide-active,
body.cog .cog-section-articles__slider .swiper-slide-prev,
body.cog .cog-section-articles__slider .swiper-slide-next {
	opacity: 1;
}

body.cog .cog-section-articles__card {
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: stretch;
}

body.cog .cog-section-articles__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 520 / 661;
	border-radius: 88px;
	object-fit: cover;
}

body.cog .cog-section-articles__bottom {
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-items: center;
	width: 100%;
}

body.cog .cog-section-articles__name {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-medium );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-core-black-600 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

body.cog .cog-section-articles__bottom > .elementor-widget {
	flex-shrink: 0;
	width: auto;
}

body.cog .cog-section-articles__progressbar.swiper-pagination-bullets {
	position: relative;
	inset: auto;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: auto;
	margin-inline: auto;
}

body.cog .cog-section-articles__progressbar .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0;
	background-color: var( --cog-color-cloud-300 );
	border-radius: 50%;
	opacity: 1;
	cursor: pointer;
	transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease;
}

body.cog .cog-section-articles__progressbar .swiper-pagination-bullet-active {
	width: 40px;
	height: 10px;
	border-radius: 12px;
	background-color: var( --cog-color-graphite-300 );
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-articles {
		padding-block: 48px;
	}

	/* `display: contents` + `order: 999` push the CTA below the slider on mobile (matches cases mobile pattern). */
	body.cog .cog-section-articles__header {
		display: contents;
	}

	body.cog .cog-section-articles__header > .cog-section-articles__title {
		padding-inline: 16px;
	}

	body.cog .cog-section-articles__header > .cog-btn {
		order: 999;
		margin-inline: 16px;
	}

	body.cog .cog-section-articles__slider .swiper-slide {
		width: min( 320px, calc( 100vw - 64px ) );
	}

	body.cog .cog-section-articles__image {
		border-radius: 48px;
	}
}

body.cog .cog-section-images-pair {
	width: 100%;
	padding: 0;
	display: grid;
	background-color: var( --cog-color-base-white );
}

body.cog .cog-section-images-pair--5050 {
	grid-template-columns: 1fr 1fr;
}

body.cog .cog-section-images-pair--4060 {
	grid-template-columns: 2fr 3fr;
}

body.cog .cog-section-images-pair__media {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 960 / 850;
	object-fit: cover;
	object-position: center;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-images-pair--5050,
	body.cog .cog-section-images-pair--4060 {
		grid-template-columns: 1fr;
	}
}

body.cog .cog-section-article-cover {
	padding: 0;
	width: 100%;
}

body.cog .cog-section-article-cover__media {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 850;
	object-fit: cover;
	object-position: center;
}

body.cog .cog-section-article-cover__media--mobile {
	display: none;
}

/* Single-post Theme Builder cover (`#cog-tb-cover`) gets the same proportions as `.cog-section-article-cover__media`. */
body.cog #cog-tb-cover .cog-tb-cover__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: 1920 / 850;
	object-fit: cover;
	object-position: center;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-article-cover__media:not( .cog-section-article-cover__media--mobile ) {
		display: none;
	}

	body.cog .cog-section-article-cover__media--mobile {
		display: block;
		aspect-ratio: 402 / 420;
	}

	body.cog #cog-tb-cover .cog-tb-cover__img {
		aspect-ratio: 402 / 420;
	}
}

body.cog .cog-section-hero {
	position: relative;
	padding-block: 0;
	padding-inline: 16px;
	width: 100%;
	max-width: 1920px;
	height: 100vh;
	height: 100dvh;
	max-height: 1080px;
	margin-inline: auto;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

body.cog .cog-section-hero__media {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: auto;
	max-width: 60%;
	object-fit: contain;
	object-position: right center;
	pointer-events: none;
	z-index: 0;
}

body.cog .cog-section-hero__media--mobile {
	display: none;
}

body.cog .cog-section-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding-block: 120px;
	padding-inline: 0;
	display: flex;
	flex-direction: column;
	gap: 80px;
	align-items: flex-start;
	flex: 1;
	justify-content: center;
}

body.cog .cog-section-hero__text {
	padding: 0;
	max-width: 565px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-hero__title {
	margin: 0;
	font-size: var( --cog-font-size-hero-l );
	font-weight: var( --cog-font-weight-bold );
	line-height: 1.2;
}

body.cog .cog-section-hero__lead {
	margin: 0;
	font-size: var( --cog-font-size-h3 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	text-decoration: underline;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-hero {
		height: auto;
		max-height: none;
		padding-block: 80px 0;
	}

	body.cog .cog-section-hero__media:not( .cog-section-hero__media--mobile ) {
		display: none;
	}

	body.cog .cog-section-hero__media--mobile {
		display: block;
		position: relative;
		width: 100%;
		max-width: none;
		height: auto;
		aspect-ratio: 402 / 340;
		object-fit: contain;
		object-position: center;
		margin-top: 26px;
		order: 2;
	}

	body.cog .cog-section-hero__content {
		order: 1;
		padding: 0;
		gap: 32px;
		min-height: 0;
	}

	body.cog .cog-section-hero__text {
		gap: 12px;
	}

	body.cog .cog-section-hero__title {
		font-size: var( --cog-font-size-h1 );
	}

	body.cog .cog-section-hero__lead {
		font-size: 23px;
	}
}

body.cog .cog-section-opinions {
	padding-block: 64px;
	padding-inline: 0;
	display: flex;
	flex-direction: column;
}

body.cog .cog-section-opinions__title {
	margin: 0;
	padding-inline: 16px;
	font-size: var( --cog-font-size-h2 );
	font-weight: var( --cog-font-weight-bold );
	line-height: 1.2;
	color: var( --cog-color-core-black-600 );
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
}

body.cog .cog-section-opinions__container {
	width: 100%;
	margin-top: 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

body.cog .cog-section-opinions__slider {
	width: 100%;
	padding: 0;
	overflow: hidden;
}

body.cog .cog-section-opinions__slider .swiper-wrapper {
	align-items: stretch;
}

body.cog .cog-section-opinions__slider .swiper-slide {
	width: min( 1200px, calc( 100vw - 32px ) );
	height: auto;
	display: flex;
	transition: opacity 0.3s ease;
	opacity: 0.3;
}

body.cog .cog-section-opinions__slider .swiper-slide-active {
	opacity: 1;
}

body.cog .cog-section-opinions__card {
	width: 100%;
	background-color: var( --cog-color-base-white );
	border-radius: 88px;
	padding: 48px 64px;
	display: flex;
	flex-direction: row;
	gap: 32px;
	align-items: center;
	/* `flex: 1` + Swiper's stretched wrapper give equal-height cards across the slider. */
	flex: 1;
}

body.cog .cog-section-opinions__text {
	padding: 0;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

body.cog .cog-section-opinions__stars {
	display: flex;
	gap: 2px;
	font-size: 16px;
	line-height: 1;
	color: var( --cog-color-graphite-300 );
	letter-spacing: 2px;
}

body.cog .cog-section-opinions__heading {
	margin: 0;
	font-size: var( --cog-font-size-h4 );
	font-weight: var( --cog-font-weight-bold );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-opinions__quote {
	margin: 0;
	font-size: var( --cog-font-size-body-l );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-opinions__attribution {
	padding: 0;
	flex: 0 0 320px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-end;
	text-align: right;
}

body.cog .cog-section-opinions__logo {
	height: 32px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

body.cog .cog-section-opinions__author {
	margin: 0;
	font-size: var( --cog-font-size-body-m );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-section-opinions__author strong {
	font-weight: var( --cog-font-weight-bold );
}

body.cog .cog-section-opinions__progressbar.swiper-pagination-bullets {
	position: relative;
	inset: auto;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: auto;
	margin-inline: auto;
}

body.cog .cog-section-opinions__progressbar .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0;
	background-color: var( --cog-color-cloud-300 );
	border-radius: 50%;
	opacity: 1;
	cursor: pointer;
	transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, background-color 0.3s ease;
}

body.cog .cog-section-opinions__progressbar .swiper-pagination-bullet-active {
	width: 40px;
	height: 10px;
	border-radius: 12px;
	background-color: var( --cog-color-graphite-300 );
}

body.cog .cog-section-opinions--list {
	padding-inline: 16px;
}

body.cog .cog-section-opinions--list .cog-section-opinions__title {
	max-width: var( --cog-content-max-width );
	padding-inline: 0;
}

body.cog .cog-section-opinions__list {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	margin-top: 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.cog .cog-section-opinions--list .cog-section-opinions__card {
	width: 100%;
}

body.cog .cog-section-opinions--list .cog-section-opinions__attribution {
	flex: 0 0 480px;
	align-self: stretch;
	height: auto;
	min-height: 196px;
	justify-content: space-between;
	gap: 16px;
}

body.cog .cog-section-opinions__attribution-top {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-end;
	width: 100%;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-opinions {
		padding-block: 48px;
	}

	/* ~24px peek = rounded-corner sliver only; text-heavy cards become unreadable with a wider peek. Figma 389:18634. */
	body.cog .cog-section-opinions__slider .swiper-slide {
		width: calc( 100vw - 80px );
	}

	body.cog .cog-section-opinions__card {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		padding: 32px;
		border-radius: 48px;
		gap: 24px;
	}

	/* Override desktop `flex: 1 1 0` — on mobile the card stacks vertically and
	   equal-height slides force the text column to stretch, leaving a gap
	   between the body copy and the author block. Let the text shrink to its
	   natural height; spare space falls below the author at card bottom. */
	body.cog .cog-section-opinions__text {
		flex: 0 0 auto;
	}

	body.cog .cog-section-opinions__attribution {
		flex: 0 0 auto;
		align-items: flex-start;
		text-align: left;
	}

	body.cog .cog-section-opinions__attribution-top {
		align-items: flex-start;
	}

	body.cog .cog-section-opinions--list .cog-section-opinions__attribution {
		/* Desktop's `flex: 0 0 480px` becomes vertical height once card flips to column — reset to auto. */
		flex: 0 0 auto;
		min-height: 0;
		gap: 24px;
	}
}

body.cog .cog-section-cs-header {
	padding-block: 64px;
	padding-inline: 16px;
}

body.cog .cog-section-cs-header__inner {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

body.cog .cog-section-cs-header__client {
	margin: 0;
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-section-cs-header__client strong {
	color: var( --cog-color-core-black-600 );
	font-weight: var( --cog-font-weight-bold );
}

body.cog .cog-section-cs-header__row {
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 80px;
	align-items: flex-start;
}

body.cog .cog-section-cs-header__main,
body.cog .cog-section-cs-header__meta {
	padding: 0;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

body.cog .cog-section-cs-header__main {
	gap: 24px;
}

body.cog .cog-section-cs-header__header {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.cog .cog-section-cs-header__eyebrow {
	margin: 0;
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-section-cs-header__title {
	margin: 0;
	font-size: var( --cog-font-size-h1 );
	font-weight: var( --cog-font-weight-bold );
	line-height: 1.2;
}

body.cog .cog-section-cs-header__lead {
	margin: 0;
	font-size: var( --cog-font-size-h3 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-cs-header__meta {
	gap: 40px;
}

body.cog .cog-section-cs-header__scope {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.cog .cog-section-cs-header__scope-label {
	margin: 0;
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-section-cs-header__text {
	margin: 0;
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-cs-header__text strong {
	font-weight: var( --cog-font-weight-bold );
}

body.cog .cog-section-cs-header__text a {
	color: inherit;
	text-decoration: underline;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-cs-header {
		padding-block: 48px;
	}

	body.cog .cog-section-cs-header__inner {
		gap: 32px;
	}

	body.cog .cog-section-cs-header__row {
		flex-direction: column;
		gap: 32px;
	}

	body.cog .cog-section-cs-header__title {
		font-size: var( --cog-font-size-h2 );
	}

	body.cog .cog-section-cs-header__lead {
		font-size: var( --cog-font-size-h5 );
	}
}

body.cog .cog-section-headline {
	padding-block: 64px;
	padding-inline: 16px;
}

body.cog .cog-section-headline__inner {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

body.cog .cog-section-headline__header {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.cog .cog-section-headline__eyebrow {
	margin: 0;
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-section-headline__title {
	margin: 0;
	font-size: var( --cog-font-size-h1 );
	font-weight: var( --cog-font-weight-bold );
	line-height: 1.2;
}

body.cog .cog-section-headline__lead {
	margin: 0;
	max-width: var( --cog-content-narrow-width );
	font-size: var( --cog-font-size-h5 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-headline {
		padding-block: 48px;
	}

	body.cog .cog-section-headline__inner {
		gap: 32px;
	}
}

body.cog .cog-section-text-image {
	padding-block: 64px;
	padding-inline: 16px;
}

body.cog .cog-section-text-image__row {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-direction: row;
	gap: 56px;
	align-items: center;
}

body.cog .cog-section-text-image__copy {
	padding: 0;
	flex: 0 0 615px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: flex-start;
}

body.cog .cog-section-text-image__header {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.cog .cog-section-text-image__eyebrow {
	margin: 0;
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-section-text-image__title {
	margin: 0;
	font-size: var( --cog-font-size-h2 );
	font-weight: var( --cog-font-weight-bold );
	line-height: 1.2;
}

body.cog .cog-section-text-image__text {
	margin: 0;
	font-size: var( --cog-font-size-body-l );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

body.cog .cog-section-text-image__media {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: auto;
	border-radius: 88px;
	object-fit: contain;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-text-image {
		padding-block: 48px;
	}

	body.cog .cog-section-text-image__row {
		flex-direction: column;
		gap: 32px;
		align-items: stretch;
	}

	body.cog .cog-section-text-image__copy {
		flex: 0 0 auto;
	}

	body.cog .cog-section-text-image__media {
		border-radius: 48px;
	}
}

body.cog .cog-section-case-row {
	padding-block: 32px;
	padding-inline: 16px;
}

body.cog .cog-section-case-row__inner {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 64px;
	display: flex;
	flex-direction: row;
	gap: 48px;
	align-items: center;
	background-color: var( --cog-color-cloud-100 );
	border-radius: 32px;
}

body.cog .cog-section-case-row--reverse .cog-section-case-row__inner {
	flex-direction: row-reverse;
}

body.cog .cog-section-case-row__media {
	flex: 0 0 458px;
	width: 458px;
	height: 583px;
	border-radius: 32px;
	object-fit: cover;
}

body.cog .cog-section-case-row__content {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
}

body.cog .cog-section-case-row__content > .cog-btn {
	align-self: flex-start;
}

body.cog .cog-section-case-row__title {
	margin: 0;
	font-size: var( --cog-font-size-h3 );
	font-weight: var( --cog-font-weight-bold );
	line-height: var( --cog-line-height-tight );
}

body.cog .cog-section-case-row__info-list {
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

body.cog .cog-section-case-row__info-row {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.cog .cog-section-case-row__info-label {
	margin: 0;
	font-size: var( --cog-font-size-body-s );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-section-case-row__info-value {
	margin: 0;
	font-size: var( --cog-font-size-body-m );
	font-weight: var( --cog-font-weight-regular );
	line-height: var( --cog-line-height-normal );
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-case-row {
		padding-block: 24px;
	}

	body.cog .cog-section-case-row__inner,
	body.cog .cog-section-case-row--reverse .cog-section-case-row__inner {
		flex-direction: column;
		align-items: stretch;
		padding: 32px;
		gap: 32px;
		border-radius: 24px;
	}

	body.cog .cog-section-case-row__media {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		aspect-ratio: 458 / 583;
		border-radius: 24px;
	}
}

/* Consumed only by /design-system/ (post 4352) — not a reusable component. */
body.cog .cog-ds-row {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	margin-block: 24px;
}

body.cog .cog-ds-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: auto;
	flex: 0 0 auto;
}

body.cog .cog-ds-cell--dark {
	background-color: var( --cog-color-core-black-600 );
	padding: 16px;
	border-radius: 8px;
}

/* ============================================================
 * Site header — pill-shape sticky overlay (Figma 389:21161)
 * ============================================================ */

body.cog .cog-site-header {
	position: fixed;
	top: 8px;
	left: 16px;
	right: 16px;
	z-index: 100;
	pointer-events: none;
}

/* Shell wraps bar + dropdown so the open mega menu reads as one rounded surface, not two stitched pieces. */
body.cog .cog-site-header__shell {
	position: relative;
	pointer-events: auto;
	background: rgba( 255, 255, 255, 0.6 );
	backdrop-filter: blur( 12px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 12px ) saturate( 180% );
	border-radius: 32px;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.3 );
	color: var( --cog-color-core-black-600 );
	font-family: var( --cog-font-family );
	font-size: 16px;
	line-height: 1;
	/* Collapse direction (hover-out) delays 0.3s so shell reverts AFTER the dropdown finishes shrinking. */
	transition:
		background-color 0.2s ease 0.3s,
		border-radius 0.2s ease 0.3s,
		box-shadow 0.2s ease 0.3s,
		backdrop-filter 0.2s ease 0.3s;
}

/* On hover the shell drops its bottom radius and glass blur so it merges seamlessly into the dropdown surface.
   Expand transitions override the 0.3s delay above to morph in sync with the dropdown opening. */
body.cog .cog-site-header__shell:has( .cog-site-header__nav-item.menu-item-has-children:hover ),
body.cog .cog-site-header__shell:has( .cog-site-header__nav-item.menu-item-has-children:focus-within ) {
	background-color: var( --cog-color-base-white );
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition:
		background-color 0.2s ease 0s,
		border-radius 0.2s ease 0s,
		box-shadow 0.2s ease 0s,
		backdrop-filter 0.2s ease 0s;
}

body.cog .cog-site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 4px 4px 12px;
}

body.cog .cog-site-header__logo {
	display: inline-flex;
	align-items: center;
	height: 40px;
	flex-shrink: 0;
}

body.cog .cog-site-header__logo img,
body.cog .cog-site-header__logo .custom-logo {
	display: block;
	height: 24px;
	width: auto;
}

body.cog .cog-site-header__logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
	height: 24px;
}

body.cog .cog-site-header__right {
	display: flex;
	align-items: center;
	gap: 56px;
}

body.cog .cog-site-header__nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 32px;
}

body.cog .cog-site-header__nav-item {
	margin: 0;
}

body.cog .cog-site-header__nav-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding-block: 2px;
	color: inherit;
	text-decoration: none;
	font-weight: var( --cog-font-weight-regular );
	transition: color 0.18s;
}

/* Figma 389:20954 — 4px stroke lime-300. */
body.cog .cog-site-header__nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 4px;
	background-color: var( --cog-color-lime-300 );
	border-radius: 2px;
	opacity: 0;
	transform: scaleX( 0.6 );
	transform-origin: center;
	transition: opacity 0.18s, transform 0.18s;
	pointer-events: none;
}

body.cog .cog-site-header__nav-item:hover > .cog-site-header__nav-link::after,
body.cog .cog-site-header__nav-link:focus-visible::after,
body.cog .cog-site-header__nav-item.current-menu-item > .cog-site-header__nav-link::after,
body.cog .cog-site-header__nav-item.current-menu-ancestor > .cog-site-header__nav-link::after,
body.cog .cog-site-header__nav-item.current-menu-parent > .cog-site-header__nav-link::after {
	opacity: 1;
	transform: scaleX( 1 );
}

body.cog .cog-site-header__nav-link:focus-visible {
	outline: none;
}

body.cog .cog-site-header__chevron {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	transition: transform 0.2s;
}

body.cog .cog-site-header__nav-item.menu-item-has-children:hover > .cog-site-header__nav-link .cog-site-header__chevron,
body.cog .cog-site-header__nav-item--has-dropdown:hover .cog-site-header__chevron,
body.cog .cog-site-header__lang:hover .cog-site-header__chevron {
	transform: rotate( 180deg );
}

body.cog .cog-site-header__nav-item.menu-item-has-children {
	position: static; /* mega menu anchored to header, not to nav-item */
}

body.cog .cog-site-header__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: auto;
	padding: 0 48px;
	background: var( --cog-color-base-white );
	border-radius: 0 0 32px 32px;
	/* Negative spread cancels upward blur bleed — otherwise shadow paints a grey line at the shell↔dropdown seam. */
	box-shadow: 0 24px 32px -16px rgba( 26, 26, 26, 0.18 );
	max-height: 0;
	overflow: hidden;
	visibility: hidden;
	transition:
		max-height 0.3s ease-in-out 0s,
		padding 0.3s ease-in-out 0s,
		visibility 0s linear 0.3s;
	z-index: 1;
}

/* Extends nav-item hover hitbox over the dropdown so pointer transit between
   the two doesn't drop :hover. */
body.cog .cog-site-header__nav-item.menu-item-has-children > .cog-site-header__nav-link::before {
	content: '';
	position: absolute;
	top: 100%;
	left: -16px;
	right: -16px;
	height: 24px;
}

body.cog .cog-site-header__nav-item.menu-item-has-children:hover > .cog-site-header__dropdown,
body.cog .cog-site-header__nav-item.menu-item-has-children:focus-within > .cog-site-header__dropdown {
	max-height: 720px;
	padding: 56px 48px;
	visibility: visible;
	transition:
		max-height 0.3s ease-in-out 0.1s,
		padding 0.3s ease-in-out 0.1s,
		visibility 0s linear 0s;
}

body.cog .cog-site-header__dropdown-cols {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 16px 56px;
}

body.cog .cog-site-header__dropdown-col {
	margin: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

body.cog .cog-site-header__dropdown-col-title {
	display: block;
	color: var( --cog-color-core-black-600 );
	font-size: var( --cog-font-size-h6, 22px );
	font-weight: var( --cog-font-weight-bold );
	line-height: 1.3;
}

body.cog .cog-site-header__dropdown-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body.cog .cog-site-header__dropdown-item {
	margin: 0;
	list-style: none;
}

body.cog .cog-site-header__dropdown-link {
	display: inline-block;
	color: var( --cog-color-core-black-600 );
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.15s;
}

body.cog .cog-site-header__dropdown-link:hover,
body.cog .cog-site-header__dropdown-link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media ( max-width: 1023px ) {
	body.cog .cog-site-header__dropdown {
		padding: 24px;
	}

	body.cog .cog-site-header__dropdown-cols {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

body.cog .cog-site-header__lang {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* ============================================================
 * GTranslate plugin overrides (third-party, NOT part of DS).
 * ============================================================
 * Plugin injects its CSS into <head> at runtime via JS (float.js:164) and
 * sets some properties as inline styles (element.style.X). `!important` is
 * used ONLY where strictly necessary; everywhere else our scope selector
 * `body.cog .cog-site-header__lang ...` has higher specificity than plugin's
 * `.gt_float_switcher ...` rules so the cascade wins naturally.
 *
 * KEEPING !important on:
 *   - properties plugin sets via `element.style` (inline; bypasses cascade)
 *   - properties whose plugin rules have higher specificity than ours
 *     (plugin selectors chain through .gt_float_switcher .gt-selected ...)
 *   - the rotation rule on open state (plugin's selector is deeper)
 * ============================================================ */

body.cog .cog-site-header__lang .gtranslate_wrapper,
body.cog .cog-site-header__lang #gt_float_wrapper {
	/* Plugin sets inline `position: fixed; top/left: 20px; z-index: 999999`
	   and lets natural line-height push wrapper to ~27px — clamping to 24px
	   keeps parent flex's `align-items: center` from shifting it by ~1.5px. */
	position: static !important;
	display: inline-flex;
	align-items: center;
	height: 24px;
	background: transparent;
	box-shadow: none;
	margin: 0;
}

body.cog .cog-site-header__lang .gt_float_switcher {
	/* Plugin sets inline `opacity: 0` initially and animates to 1 via setTimeout (float.js:225).
	 * We force visible immediately to avoid flash-of-invisible-content before plugin's JS runs. */
	opacity: 1 !important;
	display: inline-flex;
	align-items: center;
	height: 24px;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	color: inherit;
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	overflow: visible;
}

body.cog .cog-site-header__lang .gt-selected {
	display: inline-flex;
	align-items: center;
	height: 24px;
	line-height: 1;
	background: transparent;
	box-shadow: none;
	border: 0;
	cursor: pointer;
}

body.cog .cog-site-header__lang .gt-current-lang {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: transparent;
	color: inherit;
}

body.cog .cog-site-header__lang .gt-current-lang img {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 4px 0 0;
}

/* Plugin's rule sets only `position: relative; top: 2px` on .gt-lang-code (float.js:123); its selector
 * `.gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code` (0,0,4,1) ties with our scope
 * specificity, so plugin wins by source order on THOSE TWO properties — !important required there.
 * Plugin doesn't set the remaining properties, so the cascade picks ours without !important.
 * Padding-top 2px compensates for DM Sans's empty descender space ("Polski" has no descenders →
 * visual mass sits in upper 75% of em-box). */
body.cog .cog-site-header__lang .gt-lang-code {
	position: static !important;
	top: auto !important;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 24px;
	/* DM Sans visual mass sits in upper ~75% of em-box (no descenders in "Polski"),
	   so geometric center ≠ visual center. 2px top padding pushes glyphs down so
	   they align with flag/chevron centers. */
	padding-top: 2px;
	padding-bottom: 0;
	line-height: 1;
	font-size: 16px;
	color: inherit;
	text-transform: none;
	font-weight: var( --cog-font-weight-regular );
}

body.cog .cog-site-header__lang .gt-lang-code::first-letter {
	text-transform: uppercase;
}

/* Custom chevron SVG replaces plugin's default arrow.
 * Plugin's arrow rule `.gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow`
 * (float.js:126) has specificity (0,0,4,1), higher than ours (0,0,3,1) — !important required to override
 * background, transform and transition. Margin/width/height not set by plugin via that selector, but
 * shorthand `background` competes per-sub-property so we keep !important to keep the whole block consistent. */
body.cog .cog-site-header__lang .gt_float_switcher-arrow {
	width: 24px !important;
	height: 24px !important;
	margin-left: 4px;
	background: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M6 9l6 6 6-6' stroke='%23262626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>" ) no-repeat center / 24px !important;
	transform: none !important;
	transition: transform 0.2s !important;
}

/* Plugin toggles `.gt_arrow_rotate` on the arrow when dropdown opens (float.js:188); plugin's rule
 * sets `transform: rotate(0deg)` with specificity (0,0,5,1) — we need !important to flip to 180deg. */
body.cog .cog-site-header__lang .gt_float_switcher-arrow.gt_arrow_rotate {
	transform: rotate( 180deg ) !important;
}

body.cog .cog-site-header__lang .gt_options {
	position: absolute;
	top: calc( 100% + 8px );
	right: 0;
	left: auto;
	min-width: 200px;
	margin: 0;
	padding: 12px;
	background: var( --cog-color-base-white );
	border-radius: 16px;
	box-shadow: 0 12px 32px rgba( 26, 26, 26, 0.12 );
	z-index: 250;
}

body.cog .cog-site-header__lang .gt_options a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	color: var( --cog-color-core-black-600 );
	font-size: 16px;
	line-height: 1.4;
	text-decoration: none;
	border-radius: 8px;
	transition: background-color 0.15s;
}

body.cog .cog-site-header__lang .gt_options a:hover,
body.cog .cog-site-header__lang .gt_options a:focus-visible {
	background-color: var( --cog-color-cloud-100 );
}

body.cog .cog-site-header__lang .gt_options a img {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0;
}

body.cog .cog-site-header__lang .gt_options a.gt-current {
	background-color: var( --cog-color-cloud-100 );
	font-weight: var( --cog-font-weight-bold );
}

body.cog .cog-site-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding-inline: 32px;
	background-color: var( --cog-color-lime-300 );
	color: var( --cog-color-core-black-600 );
	font-weight: var( --cog-font-weight-regular );
	border-radius: 32px;
	text-decoration: none;
	flex-shrink: 0;
	transition: background-color 0.2s;
}

body.cog .cog-site-header__cta:hover,
body.cog .cog-site-header__cta:focus-visible {
	background-color: var( --cog-color-lime-400, #B1DE5A );
}

body.cog .cog-site-header__logo {
	transition: opacity 0.18s;
}

body.cog .cog-site-header__logo:hover {
	opacity: 0.75;
}

body.cog .cog-site-header__hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	flex-shrink: 0;
}

body.cog .cog-site-header__hamburger svg {
	display: block;
}

@media ( max-width: 1023px ) {
	body.cog .cog-site-header {
		left: 8px;
		right: 8px;
	}

	body.cog .cog-site-header__bar {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 12px;
	}

	body.cog .cog-site-header__hamburger {
		display: inline-flex;
	}

	body.cog .cog-site-header__logo {
		height: 24px;
		padding-inline: 0;
		margin-right: auto;
	}

	body.cog .cog-site-header__right {
		gap: 12px;
		height: 24px;
	}

	body.cog .cog-site-header__lang {
		height: 24px;
	}

	body.cog .cog-site-header__nav,
	body.cog .cog-site-header__cta {
		display: none;
	}

	body.cog .cog-site-header__lang {
		display: inline-flex;
	}
}

/* ============================================================
 * Full Picture cookie banner overrides (third-party, NOT part of DS).
 * ============================================================
 * Hello-Elementor's reset.css defaults `a { color: #CC3366 }` and
 * `button { border: 1px solid #CC3366 }`. The cookie banner uses generic
 * `<a>` / `<button>` markup without DS classes, so it inherits the pink-red
 * default. Map link to DS link style and buttons to DS variants:
 *   .btn-style-1-cookie (settings/decline/close) → outline-black
 *   .btn-style-2-cookie (accept CTA)             → secondary (no border)
 */

#fupi_cookie_notice a {
	color: var( --cog-color-core-black-600 );
	text-decoration: underline;
}

#fupi_cookie_notice .btn-style-1-cookie {
	border-color: var( --cog-color-core-black-600 );
}

#fupi_cookie_notice .btn-style-1-cookie:hover,
#fupi_cookie_notice .btn-style-1-cookie:focus {
	border-color: var( --cog-color-lime-300 );
	background-color: transparent;
	color: var( --cog-color-core-black-600 );
}

#fupi_cookie_notice .btn-style-2-cookie {
	border-color: transparent;
}

#fupi_cookie_notice .btn-style-2-cookie:hover,
#fupi_cookie_notice .btn-style-2-cookie:focus {
	background-color: var( --cog-color-lime-300 );
	color: var( --cog-color-core-black-600 );
	border-color: transparent;
}

/* ============================================================
 * Mobile drawer — slides down from top, drill-down subpanels
 * (Figma 389:21373 open + 389:22639 closed pill)
 * ============================================================ */

body.cog .cog-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 300;
	background-color: rgba( 0, 0, 0, 0 );
	visibility: hidden;
	pointer-events: none;
	transition: background-color 0.3s ease, visibility 0s linear 0.3s;
}

body.cog .cog-mobile-menu.is-open {
	visibility: visible;
	pointer-events: auto;
	background-color: rgba( 0, 0, 0, 0.35 );
	transition: background-color 0.3s ease, visibility 0s linear 0s;
}

body.cog .cog-mobile-menu__drawer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	background: var( --cog-color-base-white );
	transform: translateX( -100% );
	transition: transform 0.3s ease;
}

body.cog .cog-mobile-menu.is-open .cog-mobile-menu__drawer {
	transform: translateX( 0 );
}

body.cog .cog-mobile-menu__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	min-height: 56px;
	border-bottom: 1px solid var( --cog-color-cloud-200 );
	background: var( --cog-color-base-white );
	flex-shrink: 0;
}

body.cog .cog-mobile-menu__back {
	display: none;
	grid-column: 1;
	justify-self: start;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var( --cog-color-core-black-600 );
	font-family: var( --cog-font-family );
	font-size: 16px;
	font-weight: var( --cog-font-weight-medium );
	cursor: pointer;
}

body.cog .cog-mobile-menu.is-sub-open .cog-mobile-menu__back {
	display: inline-flex;
}

body.cog .cog-mobile-menu.is-sub-open .cog-mobile-menu__logo {
	visibility: hidden;
}

body.cog .cog-mobile-menu__logo {
	grid-column: 2;
	display: inline-flex;
	align-items: center;
}

body.cog .cog-mobile-menu__logo img,
body.cog .cog-mobile-menu__logo .custom-logo {
	display: block;
	height: 24px;
	width: auto;
}

body.cog .cog-mobile-menu__close {
	grid-column: 3;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var( --cog-color-core-black-600 );
	cursor: pointer;
}

body.cog .cog-mobile-menu__close svg,
body.cog .cog-mobile-menu__back svg {
	display: block;
}

body.cog .cog-mobile-menu__panels {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

body.cog .cog-mobile-menu__panel {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 16px;
	list-style: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var( --cog-color-base-white );
	transform: translateX( 100% );
	transition: transform 0.3s ease;
}

body.cog .cog-mobile-menu__panel--root {
	transform: translateX( 0 );
}

body.cog .cog-mobile-menu.is-sub-open .cog-mobile-menu__panel--root {
	transform: translateX( -100% );
}

body.cog .cog-mobile-menu__panel--sub.is-active {
	transform: translateX( 0 );
}

body.cog .cog-mobile-menu__item {
	list-style: none;
	margin: 0;
	border-bottom: 1px solid var( --cog-color-cloud-200 );
}

body.cog .cog-mobile-menu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 16px 4px;
	background: transparent;
	border: 0;
	text-align: left;
	font-family: var( --cog-font-family );
	font-size: 18px;
	font-weight: var( --cog-font-weight-medium );
	color: var( --cog-color-core-black-600 );
	text-decoration: none;
	cursor: pointer;
}

body.cog .cog-mobile-menu__link svg {
	flex-shrink: 0;
	color: var( --cog-color-cloud-600, #B7BABA );
}

body.cog .cog-mobile-menu__link:hover,
body.cog .cog-mobile-menu__link:focus-visible {
	color: var( --cog-color-lime-400 );
	outline: none;
}

body.cog .cog-mobile-menu__section + .cog-mobile-menu__section {
	margin-top: 32px;
}

body.cog .cog-mobile-menu__section-title {
	margin: 0 0 16px;
	font-family: var( --cog-font-family );
	font-size: 22px;
	font-weight: var( --cog-font-weight-medium );
	line-height: 1.3;
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-mobile-menu__section-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

body.cog .cog-mobile-menu__section-list li {
	list-style: none;
	margin: 0;
}

body.cog .cog-mobile-menu__section-list a {
	display: block;
	font-size: 16px;
	line-height: 1.4;
	color: var( --cog-color-core-black-600 );
	text-decoration: none;
}

body.cog .cog-mobile-menu__section-list a:hover,
body.cog .cog-mobile-menu__section-list a:focus-visible {
	color: var( --cog-color-lime-400 );
	outline: none;
}

body.cog .cog-mobile-menu__footer {
	padding: 16px;
	background: var( --cog-color-base-white );
	flex-shrink: 0;
	box-shadow: 0 -4px 12px rgba( 26, 26, 26, 0.08 );
}

body.cog .cog-mobile-menu__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	padding-inline: 32px;
	background-color: var( --cog-color-lime-300 );
	color: var( --cog-color-core-black-600 );
	font-family: var( --cog-font-family );
	font-size: 16px;
	font-weight: var( --cog-font-weight-regular );
	text-decoration: none;
	border-radius: 32px;
}

body.cog.cog-mobile-menu-open {
	overflow: hidden;
}

@media ( min-width: 1024px ) {
	body.cog .cog-mobile-menu {
		display: none;
	}
}

/* Mobile-only — desktop CTA lives in the header, drawer carries its own footer CTA. */
body.cog .cog-mobile-cta-bar {
	display: none;
	position: fixed;
	left: 10px;
	right: 10px;
	bottom: 10px;
	z-index: 90;
	padding: 8px;
	background: rgba( 255, 255, 255, 0.6 );
	backdrop-filter: blur( 12px ) saturate( 180% );
	-webkit-backdrop-filter: blur( 12px ) saturate( 180% );
	border-radius: 32px;
	box-shadow:
		inset 0 0 0 1px rgba( 255, 255, 255, 0.3 ),
		0 8px 24px rgba( 26, 26, 26, 0.12 );
}

body.cog .cog-mobile-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	padding-inline: 24px;
	background-color: var( --cog-color-lime-300 );
	color: var( --cog-color-core-black-600 );
	font-family: var( --cog-font-family );
	font-size: 16px;
	font-weight: var( --cog-font-weight-regular );
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border-radius: 32px;
}

@media ( max-width: 1023px ) {
	body.cog .cog-mobile-cta-bar {
		display: block;
	}

	body.cog.cog-mobile-menu-open .cog-mobile-cta-bar {
		display: none;
	}

	/* Full Picture cookie pill (#fupi_notice_toggler) sits at bottom-left and
	   overlaps the sticky CTA bar (`.cog-mobile-cta-bar`, height ~58px from
	   the viewport bottom). Push it above so both stay clickable — same
	   conditions as the CTA bar (mobile only, mobile menu closed). */
	body.cog:not( .cog-mobile-menu-open ) #fupi_notice_toggler.fp_show_cookie_notice {
		bottom: 80px;
	}
}


/* ============================================================
 * Site footer — Cognize DS (mirrors prod from form-down)
 * ============================================================ */

body.cog .cog-site-footer {
	background-color: var( --cog-color-base-white );
	color: var( --cog-color-core-black-600 );
	font-family: var( --cog-font-family );
	font-size: 18px;
	line-height: 1.5;
}

body.cog .cog-site-footer__inner {
	max-width: 1520px;
	margin-inline: auto;
	padding: 40px 24px 60px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Tagline matches legacy `.text-style-big`: 52px regular + 3px underline-bar under <strong>. */
body.cog .cog-site-footer__tagline {
	padding: 40px 0;
	font-size: 52px;
	font-weight: var( --cog-font-weight-regular );
	line-height: 1.1;
	color: var( --cog-color-core-black-600 );
}

body.cog .cog-site-footer__tagline p {
	margin: 0;
}

body.cog .cog-site-footer__tagline strong {
	position: relative;
	font-weight: var( --cog-font-weight-regular );
}

body.cog .cog-site-footer__tagline strong::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 3px;
	background: var( --cog-color-core-black-600 );
}

/* Badges pinned to r1c5; remaining cols auto-flow → 5th menu col (Case study) lands at r2c1. */
body.cog .cog-site-footer__grid {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	grid-template-rows: auto auto;
	gap: 30px 20px;
	padding: 60px 0;
}

body.cog .cog-site-footer__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

body.cog .cog-site-footer__col--badges {
	grid-column: 5;
	grid-row: 1;
	align-items: flex-start;
	gap: 24px;
}

body.cog .cog-site-footer__col-title {
	color: var( --cog-color-core-black-600 );
	font-size: 16px;
	font-weight: var( --cog-font-weight-bold );
	line-height: 1.4;
	margin-bottom: 4px;
}

span.cog-site-footer__col-title {
	text-decoration: none;
}

a.cog-site-footer__col-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.cog .cog-site-footer__col-list,
body.cog .cog-site-footer__col-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

body.cog .cog-site-footer__col-item {
	margin: 0;
}

body.cog .cog-site-footer__col-link {
	color: var( --cog-color-core-black-600 );
	font-size: 18px;
	font-weight: var( --cog-font-weight-regular );
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.15s;
}

body.cog .cog-site-footer__col-link:hover,
body.cog .cog-site-footer__col-link:focus-visible {
	opacity: 0.65;
}

body.cog .cog-site-footer__col-tags li {
	color: var( --cog-color-core-black-600 );
	font-size: 18px;
}

body.cog .cog-site-footer__contact,
body.cog .cog-site-footer__company {
	color: var( --cog-color-core-black-600 );
	font-size: 18px;
	line-height: 1.5;
}

body.cog .cog-site-footer__contact a,
body.cog .cog-site-footer__company a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.cog .cog-site-footer__clutch {
	width: 100%;
	max-width: 280px;
	height: 50px;
	border: 0;
	display: block;
}

body.cog .cog-site-footer__forbes {
	width: 180px;
	height: auto;
	display: block;
}

body.cog .cog-site-footer__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 60px 0 36px;
}

body.cog .cog-site-footer__logo {
	display: inline-flex;
	flex: 1 1 auto;
	min-width: 0;
}

body.cog .cog-site-footer__logo img {
	display: block;
	height: auto;
	width: 100%;
	max-width: 720px;
}

body.cog .cog-site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

body.cog .cog-site-footer__social a {
	display: inline-flex;
	color: var( --cog-color-core-black-600 );
	transition: opacity 0.15s;
}

body.cog .cog-site-footer__social a:hover {
	opacity: 0.7;
}

body.cog .cog-site-footer__social img {
	display: block;
	width: 48px;
	height: 48px;
}

@media ( max-width: 1024px ) {
	body.cog .cog-site-footer__inner {
		padding: 24px 16px 32px;
	}
	body.cog .cog-site-footer__tagline {
		padding: 24px 0;
	}
	body.cog .cog-site-footer__grid {
		grid-template-columns: repeat( 2, 1fr );
		grid-template-rows: none;
		padding: 32px 0;
		gap: 32px 24px;
	}
	body.cog .cog-site-footer__col--badges {
		grid-column: 1 / -1;
		grid-row: auto;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 16px 32px;
	}
	/* Mobile reorder: walker emits 5 menu cols in DOM order then badges/branze/kontakt/company.
	 * Without this, badges would land after Dane firmowe — flow should match the fallback path. */
	body.cog .cog-site-footer__grid--menu > .cog-site-footer__col:nth-child(-n+4) { order: 1; }
	body.cog .cog-site-footer__grid--menu > .cog-site-footer__col--badges { order: 2; }
	body.cog .cog-site-footer__grid--menu > .cog-site-footer__col:nth-child(5) { order: 3; }
	body.cog .cog-site-footer__grid--menu > .cog-site-footer__col--branze { order: 4; }
	body.cog .cog-site-footer__grid--menu > .cog-site-footer__col--contact { order: 5; }
	body.cog .cog-site-footer__grid--menu > .cog-site-footer__col--company { order: 6; }
	body.cog .cog-site-footer__bottom {
		padding: 32px 0 16px;
	}
	body.cog .cog-site-footer__logo img {
		max-width: none;
	}
	/* Prod hides social on tablet/mobile (.elementor-hidden-mobile). */
	body.cog .cog-site-footer__social {
		display: none;
	}
}

@media ( max-width: 600px ) {
	body.cog .cog-site-footer__grid {
		grid-template-columns: 1fr;
	}
	body.cog .cog-site-footer__col--badges {
		flex-direction: column;
		gap: 24px;
	}
}

/* === Elementor Shortcode widget — auto full-bleed by default ================
   Marketing pastes any shortcode into the Shortcode widget and the rendered
   output spans 100vw regardless of parent container width — no per-instance
   Full Width toggle, no template edits, no class to add.

   Selectors match Elementor frontend's specificity (0,4,0) — frontend.min.css
   ships `.e-con.e-con > .e-con-inner > .elementor-widget { max-width: 100% }`
   and the equivalent for non-boxed parents. This file loads later in the
   cascade, so equal specificity wins. `margin-inline: calc(50% - 50vw)` breaks
   the widget out of any boxed (1140px) or flex column parent.

   The descendant `.elementor > .e-con` rule normalises the rendered template's
   root container: even templates authored with `content_width: boxed` render
   at 100% of the now 100vw widget, so marketing's boxed/full choice in the
   template panel becomes irrelevant when embedded via shortcode. */
.elementor.elementor .e-con > .elementor-widget-shortcode,
.e-con.e-con > .e-con-inner > .elementor-widget-shortcode {
	width: 100vw;
	min-width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}
body .elementor-widget-shortcode > .elementor-widget-container {
	width: 100%;
	max-width: none;
}
body .elementor-widget-shortcode .elementor > .e-con {
	width: 100%;
	max-width: none;
}

/* === Editor preview neutralisation for empty cog atoms =====================
   Elementor v4 editor injects `.elementor-empty-view` placeholder into every
   empty atomic flex container so marketing can click to add children. Two
   editor-preview.min.css rules then force a 100–120px floor: one on the
   parent and one on the placeholder itself.

   `.cog-divider` is the only atom that MUST stay decorative-empty (it's a 1px
   gradient line — no widget ever goes inside). Killing its empty-view keeps
   the line at 1px in the editor.

   `.cog-section-checks__icon` keeps the empty-view click target so marketing
   can drop an Image/SVG widget into the lime pill. We constrain the placeholder
   to the pill size so the editor preview still shows the 64×48 shape. */
.cog-divider.e-con:has(.elementor-empty-view) {
	min-height: 0;
}
.cog-divider .elementor-empty-view {
	min-height: 0;
	display: none;
}
.cog-section-checks__icon.e-con:has(.elementor-empty-view) {
	min-height: 48px;
}
.cog-section-checks__icon .elementor-empty-view {
	min-height: 48px;
	width: 100%;
	height: 100%;
}

/* === Blog article body — Gutenberg block styling in narrow 950 column =====
   Output by `the_content` for is_singular('post'). PHP wraps post_content
   in `.cog-article-body__content`; here we constrain width and style the
   bloks that marketing inserts in the Block Editor.
   ========================================================================= */

body.cog.cog-article-body .cog-article-body__content {
	width: 100%;
	max-width: 950px;
	margin-inline: auto;
	padding-inline: 16px;
	font-size: var( --cog-font-size-body-l );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-core-black-600 );
}

body.cog.cog-article-body .cog-article-body__content > * {
	margin-block: 24px 0;
}

body.cog.cog-article-body .cog-article-body__content > *:first-child {
	margin-top: 0;
}

/* Figma shifts the visual scale one step down inside article body: section
   H2 reads as H3 (28px), H3 as H4 (24px), etc., with normal line-height for
   comfortable reading. Semantic HTML stays correct; only sizes are remapped. */
body.cog.cog-article-body .cog-article-body__content h2 {
	margin-block: 48px 16px;
	font-size: var( --cog-font-size-h3 );
	font-weight: var( --cog-font-weight-bold );
	line-height: var( --cog-line-height-normal );
	scroll-margin-top: 96px;
}

body.cog.cog-article-body .cog-article-body__content h3 {
	margin-block: 32px 12px;
	font-size: var( --cog-font-size-h4 );
	font-weight: var( --cog-font-weight-bold );
	line-height: var( --cog-line-height-normal );
}

body.cog.cog-article-body .cog-article-body__content h4 {
	margin-block: 24px 8px;
	font-size: var( --cog-font-size-h5 );
	font-weight: var( --cog-font-weight-bold );
	line-height: var( --cog-line-height-normal );
}

/* Newsletter card inside an article — Figma uses H4 (24px) for the headline,
   override the generic H2 rule above which would otherwise apply. */
body.cog.cog-article-body .cog-article-body__content .cog-section-newsletter__title {
	margin: 0;
	font-size: var( --cog-font-size-h4 );
	line-height: var( --cog-line-height-normal );
	scroll-margin-top: 0;
}

body.cog.cog-article-body .cog-article-body__content p {
	margin: 0;
}

body.cog.cog-article-body .cog-article-body__content p + p {
	margin-top: 16px;
}

body.cog.cog-article-body .cog-article-body__content a {
	color: var( --cog-color-core-black-600 );
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.cog.cog-article-body .cog-article-body__content a:hover {
	color: var( --cog-color-graphite-400 );
}

body.cog.cog-article-body .cog-article-body__content ul,
body.cog.cog-article-body .cog-article-body__content ol {
	margin: 16px 0 0;
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body.cog.cog-article-body .cog-article-body__content li {
	padding-left: 8px;
}

body.cog.cog-article-body .cog-article-body__content blockquote,
body.cog.cog-article-body .cog-article-body__content .wp-block-quote {
	margin-block: 32px;
	padding: 24px 32px;
	background-color: var( --cog-color-cloud-100 );
	border-left: 4px solid var( --cog-color-lime-300 );
	border-radius: 16px;
	font-size: var( --cog-font-size-body-xl );
	font-style: italic;
}

body.cog.cog-article-body .cog-article-body__content figure,
body.cog.cog-article-body .cog-article-body__content .wp-block-image {
	margin-block: 32px;
}

body.cog.cog-article-body .cog-article-body__content figure img,
body.cog.cog-article-body .cog-article-body__content .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 32px;
	display: block;
}

body.cog.cog-article-body .cog-article-body__content figcaption {
	margin-top: 12px;
	font-size: var( --cog-font-size-body-s );
	color: var( --cog-color-graphite-400 );
	text-align: center;
}

body.cog.cog-article-body .cog-article-body__content hr,
body.cog.cog-article-body .cog-article-body__content .wp-block-separator {
	margin-block: 32px;
	border: none;
	border-top: 1px solid var( --cog-color-cloud-400 );
}

body.cog.cog-article-body .cog-article-body__content strong,
body.cog.cog-article-body .cog-article-body__content b {
	font-weight: var( --cog-font-weight-bold );
}

@media ( max-width: 1023px ) {
	body.cog.cog-article-body .cog-article-body__content {
		font-size: var( --cog-font-size-body-m );
	}

	body.cog.cog-article-body .cog-article-body__content h2 {
		margin-block: 32px 12px;
	}

	body.cog.cog-article-body .cog-article-body__content figure img,
	body.cog.cog-article-body .cog-article-body__content .wp-block-image img {
		border-radius: 16px;
	}
}

/* === Table of contents — server-side TOC for blog articles ==============
   HTML produced by cog_render_article_toc() in functions.php.
   ========================================================================= */

body.cog .cog-section-toc {
	width: 100%;
	max-width: 950px;
	margin-inline: auto;
	padding: 32px 16px;
}

body.cog .cog-section-toc__card {
	padding: 64px;
	background-color: var( --cog-color-base-white );
	border-radius: 96px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

body.cog .cog-section-toc__title {
	margin: 0;
	font-size: var( --cog-font-size-h2 );
	font-weight: var( --cog-font-weight-bold );
	line-height: var( --cog-line-height-tight );
}

body.cog .cog-section-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

body.cog .cog-section-toc__item {
	padding: 0;
	border-top: 1px solid var( --cog-color-cloud-400 );
}

body.cog .cog-section-toc__item:last-child {
	border-bottom: 1px solid var( --cog-color-cloud-400 );
}

body.cog .cog-section-toc__link {
	display: grid;
	grid-template-columns: 40px 1fr 32px;
	gap: 8px;
	align-items: center;
	padding: 20px 0;
	color: inherit;
	text-decoration: none;
	font-size: var( --cog-font-size-body-m );
	transition: color 150ms ease;
}

body.cog .cog-section-toc__link:hover,
body.cog .cog-section-toc__link:focus-visible {
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-section-toc__num {
	font-weight: var( --cog-font-weight-bold );
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-section-toc__text {
	min-width: 0;
}

body.cog .cog-section-toc__chevron {
	width: 32px;
	height: 32px;
	background-color: var( --cog-color-lime-100 );
	border-radius: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.cog .cog-section-toc__chevron::after {
	content: '';
	width: 24px;
	height: 24px;
	background-color: var( --cog-color-core-black-600 );
	-webkit-mask-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>" );
	mask-image: url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>" );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-toc__card {
		padding: 32px;
		border-radius: 24px;
		gap: 24px;
	}

	body.cog .cog-section-toc__link {
		grid-template-columns: 32px 1fr 24px;
		padding: 16px 0;
	}

	body.cog .cog-section-toc__chevron {
		width: 28px;
		height: 28px;
	}

	body.cog .cog-section-toc__chevron::after {
		width: 18px;
		height: 18px;
	}
}

/* === Article header section — date + H1 + line + lead ==================== */

body.cog .cog-section-article-header {
	width: 100%;
	max-width: 950px;
	margin-inline: auto;
	padding: 64px 16px 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

body.cog .cog-section-article-header__date {
	margin: 0;
	font-size: var( --cog-font-size-h6 );
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-section-article-header__title {
	margin: 0;
	font-size: var( --cog-font-size-h1 );
	font-weight: var( --cog-font-weight-bold );
	line-height: var( --cog-line-height-tight );
}

body.cog .cog-section-article-header__divider {
	margin-block: 24px 0;
	border: none;
	border-top: 1px solid var( --cog-color-cloud-400 );
}

body.cog .cog-section-article-header__lead {
	margin: 0;
	font-size: var( --cog-font-size-h5 );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-core-black-600 );
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-article-header {
		padding: 32px 16px 24px;
		gap: 16px;
	}
}

/* === Blog archive — intro + Loop Grid 3 col ============================== */

body.cog .cog-section-blog-intro {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 64px 16px 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

body.cog .cog-section-blog-intro__title {
	margin: 0;
	font-size: var( --cog-font-size-h1 );
	font-weight: var( --cog-font-weight-bold );
	line-height: var( --cog-line-height-tight );
}

body.cog .cog-section-blog-intro__lead {
	margin: 0;
	max-width: 1008px;
	font-size: var( --cog-font-size-body-l );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-graphite-400 );
}

body.cog .cog-archive-blog {
	width: 100%;
	max-width: var( --cog-content-max-width );
	margin-inline: auto;
	padding: 32px 16px 96px;
}

body.cog .cog-card-blog-wrapper {
	height: 100%;
}

body.cog .cog-card-blog {
	display: flex;
	flex-direction: column;
	gap: 24px;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

body.cog .cog-card-blog:hover {
	color: inherit;
	text-decoration: none;
}

body.cog .cog-card-blog__image {
	display: block;
	width: 100%;
	aspect-ratio: 458 / 583;
	overflow: hidden;
	border-radius: 32px;
	background-color: var( --cog-color-cloud-200 );
}

/* Hello-Elementor sets `.post .wp-post-image { max-height: 500px }` which would
   crop the loop-item thumbnail. Override with `max-height: none`. */
body.cog .cog-card-blog__img,
body.cog .cog-card-blog__img.wp-post-image {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	display: block;
}

body.cog .cog-card-blog__image .cog-no-thumb {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var( --cog-color-cloud-200 ), var( --cog-color-cloud-400 ));
}

body.cog .cog-card-blog .cog-section-articles__bottom {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
}

body.cog .cog-card-blog__name {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: var( --cog-font-size-h6 );
	font-weight: var( --cog-font-weight-medium );
	line-height: var( --cog-line-height-normal );
	color: var( --cog-color-core-black-600 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Hovering the whole card lights up the inner DS button (since the card itself is the link, not the button). */
body.cog .cog-card-blog:hover .cog-btn--primary,
body.cog .cog-card-blog:focus-visible .cog-btn--primary {
	background-color: var( --cog-color-lime-100 );
}

body.cog .elementor-widget-loop-grid .elementor-pagination {
	margin-top: 48px;
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
}

body.cog .elementor-widget-loop-grid .page-numbers {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-family: var( --cog-font-family );
	font-size: var( --cog-font-size-body-m );
	color: var( --cog-color-core-black-600 );
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease;
}

body.cog .elementor-widget-loop-grid a.page-numbers:hover {
	background-color: var( --cog-color-cloud-200 );
}

body.cog .elementor-widget-loop-grid .page-numbers.current {
	background-color: var( --cog-color-core-black-600 );
	color: var( --cog-color-base-white );
}

@media ( max-width: 1023px ) {
	body.cog .cog-section-blog-intro {
		padding: 32px 16px 16px;
		gap: 16px;
	}

	body.cog .cog-archive-blog {
		padding: 16px 16px 64px;
	}

	body.cog .cog-card-blog__image {
		border-radius: 24px;
	}

	body.cog .cog-card-blog .cog-btn--icon {
		width: 48px;
		height: 48px;
		min-width: 48px;
	}
}

/* Neutralise Elementor e-flexbox-base 10px padding so pagination bullets sit flush with section edge. */
body.cog .cog-section-cases__progressbar,
body.cog .cog-section-logos-slider__progressbar,
body.cog .cog-section-opinions__progressbar,
body.cog .cog-section-articles__progressbar {
	padding: 0;
}

/* Swiper 11's `grabCursor: true` no longer auto-applies the cursor class. */
body.cog .cog-section-cases__slider,
body.cog .cog-section-articles__slider,
body.cog .cog-section-opinions__slider,
body.cog .cog-section-logos-slider__slider {
	cursor: grab;
}

body.cog .cog-section-cases__slider:active,
body.cog .cog-section-articles__slider:active,
body.cog .cog-section-opinions__slider:active,
body.cog .cog-section-logos-slider__slider:active,
body.cog .cog-section-cases__slider.swiper-grabbing,
body.cog .cog-section-articles__slider.swiper-grabbing,
body.cog .cog-section-opinions__slider.swiper-grabbing,
body.cog .cog-section-logos-slider__slider.swiper-grabbing {
	cursor: grabbing;
}

/* === Layout guides — visual QA helper, toggled via `?guides=1` ===========
   Two fixed vertical lines marking the left/right edges of the 1440px
   content column (or the 16px padding-inline when viewport is narrower).
   Use to verify section/card alignment. Remove ?guides=1 to hide. */

body.cog-show-guides::before,
body.cog-show-guides::after {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	width: 1px;
	background-color: #2563eb;
	z-index: 99999;
	pointer-events: none;
	box-shadow: 0 0 0 0.5px rgba(37, 99, 235, 0.4);
}

/* 100% (excludes scrollbar) matches our `margin-inline: auto` centring — 100vw would push the line ~10px off-grid. */
body.cog-show-guides::before {
	left: max( 16px, calc( ( 100% - 1440px ) / 2 ) );
}

body.cog-show-guides::after {
	left: auto;
	right: max( 16px, calc( ( 100% - 1440px ) / 2 ) );
}

/* Horizontal mid-line on the bar — verifies vertical centering of all icons. */
body.cog-show-guides .cog-site-header__bar {
	position: relative;
}

body.cog-show-guides .cog-site-header__bar::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background-color: #2563eb;
	box-shadow: 0 0 0 0.5px rgba( 37, 99, 235, 0.4 );
	z-index: 100;
	pointer-events: none;
}