/* ex-variables */
/**
 *  Variables — design tokens (colors, gradients, shadows).
 *  Split from definitions.css (remaster A2). Band 0. Shared: frontend + block editor.
 */

:root {
   --Black: #101008;
   --Neutrals-Black: #282819;
   --Neutrals-Dark-Grey: #4E4E3E;
   --Neutrals-Grey: #70705F;
   --Neutrals-Medium-Grey: #8A8A7E;
   --Neutrals-Light-Grey: #929283;

   --Neutrals-Dark-Sand: #B4B4A2;
   --Neutrals-Sand: #C6C6B3;
   --Neutrals-Medium-Sand: #DADAC8;
   --Neutrals-Light-Sand: #E6E6D7;
   --Neutrals-White-Sand: #F7F6F2;
   --Neutrals-White: #FFFFFF;

   --Primary-Dark-Green: #003C19;
   --Primary-Green: #006432;
   --Primary-Green-40: rgba(0, 100, 50, 0.4);
   --Primary-Middle-Green: #0F9129;
   --Primary-Light-Green: #19AF23;
   --Primary-Soft-Green: #9ADF9F;
   --Primary-White-Green: #D1EFD3;
   
   --Secondary-Dark-Electro: #00413C;
   --Secondary-Middle-Electro: #00544D;
   --Secondary-Electro: #00786E;
   --Secondary-Light-Electro: #BFDDDB;

   --Primary-Gradient: linear-gradient(290deg, #006432 0%, #267D9E 100%);
   --Gradient-Sand: linear-gradient(135deg, #F7F6F2 5%, #E6E6D7 100%); 
   --Gradient-Green: linear-gradient(139deg, #19AF23 0%, #006432 130%);
   --Gradient-Electro: linear-gradient(320deg, #006432 0%, #3882A6 100%); 
   --Gradient-Black: linear-gradient(123deg, #4E4E3E 0%, #282819 100%); 
   --Gradient-Product-Real: linear-gradient(90deg, #F7F6F2 0%, #E6E6D7 100%);
   --Gradient-Product: linear-gradient(180deg, #F7F6F2 0%, #E6E6D7 100%);

   --Shadow-White: box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05); 
   --Shadow-Dark: box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.15);
   --Shadow-Up: box-shadow: 0px -15px 30px 0px rgba(0, 0, 0, 0.05);

   --Secondary-Dark-Blue: #206985;
   --Secondary-Blue: #267D9E;
   --Secondary-Light-Blue: #3882A6;
   --Secondary-Red: #B90523;

   --Hover-on-Green: #5AD062;
}


/* ex-elements */
/**
 *  Elements — base typography + common element/utility styles.
 *  Split from definitions.css (remaster A2). Band 1 (after variables, before layout).
 *  NOTE: colors/body/margins/buttons here move to layout.css in a later portion; kept
 *  together now to preserve the exact cascade order (render-identical to definitions.css).
 */

/* Colors */
.color--black { color: var(--Neutrals-Black) }
.color--dark-grey { color: var(--Neutrals-Dark-Grey) }
.color--grey { color: var(--Neutrals-Grey) }
.color--light-grey { color: var(--Neutrals-Light-Grey) }
.color--dark-sand { color: var(--Neutrals-Dark-Sand) }
.color--sand { color: var(--Neutrals-Sand) }
.color--light-sand { color: var(--Neutrals-Light-Sand) }
.color--white-sand { color: var(--Neutrals-White-Sand) }
.color--white { color: var(--Neutrals-White) }
.color--green { color: var(--Primary-Green) }
.color--light-green { color: var(--Primary-Light-Green) }
.color--electronics { color: var(--Secondary-Electronics) }



/* Body styles */
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
}
html {
	min-height: 100%;
	height: 100%;
}
body {
	position: relative;
	width: 100%;
	min-width: 360px;
	min-height: 100vh;
	padding: 64px 0 0 0;
	margin: 0;
	background-color: var(--Neutrals-White);
	font-family: "open-sans", "Open Sans", sans-serif; 
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--Neutrals-Dark-Grey);
	overflow-anchor: none;
	overflow-y: scroll;
	overflow-x: clip;
}
body.no_scroll {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}
.seo--title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-style: normal;
	font-weight: 300;
	color: var(--Neutrals-Dark-Grey);
}
h1 {
	font-size: 56px;
	line-height: 1.15;
	letter-spacing: -0.05em;
}
h2 {
	font-size: 48px;
	line-height: 1.17;
	letter-spacing: -0.04em; 
}
h3 {
	font-size: 32px;
	line-height: 1.25;
	letter-spacing: -0.03em; 
}
h4 {
	font-size: 24px;
	line-height: 1.33;
	letter-spacing: -0.02em; 
}
h5 {
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: -0.01em; 
}
h6 {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0;
}
.h1 {
	font-size: 56px;
	line-height: 1.15;
	letter-spacing: -0.05em;
}
.h2 {
	font-size: 48px;
	line-height: 1.17;
	letter-spacing: -0.04em; 
}
.h3 {
	font-size: 32px;
	line-height: 1.25;
	letter-spacing: -0.03em; 
}
.h4 {
	font-size: 24px;
	line-height: 1.33;
	letter-spacing: -0.02em; 
}
.h5 {
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: -0.01em; 
}
.h6 {
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0;
}

@media (max-width: 768px) {
	h1 { font-size: 52px; }
	h2 { font-size: 44px; }
	h3 { font-size: 32px; }
	h4 { font-size: 24px; }
	h5 { font-size: 20px; }
	h6 { font-size: 16px; }
	.h1 { font-size: 52px; }
	.h2 { font-size: 44px; }
	.h3 { font-size: 32px; }
	.h4 { font-size: 24px; }
	.h5 { font-size: 20px; }
	.h6 { font-size: 16px; }
}
@media (max-width: 450px) {
	h1 { font-size: 48px; }
	h2 { font-size: 40px; }
	h3 { font-size: 32px; }
	h4 { font-size: 24px; }
	h5 { font-size: 20px; }
	h6 { font-size: 16px; }
	.h1 { font-size: 48px; }
	.h2 { font-size: 40px; }
	.h3 { font-size: 32px; }
	.h4 { font-size: 24px; }
	.h5 { font-size: 20px; }
	.h6 { font-size: 16px; }
}


/* Paragraphs */
p {
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--Neutrals-Dark-Grey);
}
p.large, p.has-medium-font-size {
	font-size: 20px;
	font-style: normal;
	font-weight: 300;
	line-height: 1.5em;
	letter-spacing: -0.01em;
	color: var(--Neutrals-Dark-Grey);
}
p.small, p.has-small-font-size {
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5em;
	/* color: var(--Neutrals-Grey); */
	color: var(--Neutrals-Dark-Grey);
}
p.indent {
	padding-left: 36px;
}



/** List/Unordered */
ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
ul li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 0.25em;
}
ul li::before {
	content: "";
	height: 7px;
	width: 7px;
	position: absolute;
	left: 0;
	top: 0.6em;
	border-radius: 4px;
	background-color: var(--Neutrals-Light-Grey);
}


/* Link/Regular */
a {
	outline: none;
	text-decoration: none;
	font-weight: 600;
	color: inherit;
	transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
	a:hover {
		text-decoration: none;
		color: var(--Primary-Light-Green);
	}
}
a:focus {
	outline: none !important;
	box-shadow: none !important;
}
body.touch_device {
	-webkit-tap-highlight-color: rgba(25, 175, 35, 0.4);
}


/* Subcripts / Supercripts */
sup {
	vertical-align: baseline; 
	position: relative;
	font-size: 0.7em;
	font-weight: 600;
	top: -0.4em;
}
sub {
	vertical-align: baseline; 
	position: relative;
	font-size: 0.7em;
	font-weight: 600;
	bottom: -0.3em;
}
strong sup, strong sub, sup strong, sub strong {
	font-weight: 700;
}
p.large sup, p.has-medium-font-size sup {
	font-weight: 300;
}
:is(h1, h2, h3, .h1, .h2, .h3) sup,
:is(h1, h2, h3, .h1, .h2, .h3) sub {
	font-weight: 300;
}
:is(h4, h5, h6, .h4, .h5, .h6) sup,
:is(h4, h5, h6, .h4, .h5, .h6) sub {
	font-weight: 400;
}



/* Layout helpers */
.clear--float::after {
	content: "";
	clear: both;
	display: table;
}
.flex--fit {
	display: block;
	flex: 10 0 auto;
}
.text--no_break {
	white-space: nowrap;
}


/** Margins */
.top--start {
	padding-top: 60px;
	margin-top: 0;
}
.top--0em {
	margin-top: 0 !important;
}
.top--0p25em {
	margin-top: 0.25em !important;
}
.top--0p5em {
	margin-top: 0.5em !important;
}
.top--0p75em {
	margin-top: 0.75em !important;
}
.top--1em {
	margin-top: 1em !important;
}
.top--1p5em {
	margin-top: 1.5em !important;
}
.top--2em {
	margin-top: 2em !important;
}
.top--2p5em {
	margin-top: 2.5em !important;
}
.top--3em {
	margin-top: 3em !important;
}
.top--4em {
	margin-top: 4em !important;
}
.top--5em {
	margin-top: 5em !important;
}

.bottom--0em {
	margin-bottom: 0 !important;
}
.bottom--0p25em {
	margin-bottom: 0.25em !important;
}
.bottom--0p5em {
	margin-bottom: 0.5em !important;
}
.bottom--0p75em {
	margin-bottom: 0.75em !important;
}
.bottom--1em {
	margin-bottom: 1em !important;
}
.bottom--1p5em {
	margin-bottom: 1.5em !important;
}
.bottom--2em {
	margin-bottom: 2em !important;
}
.bottom--2p5em {
	margin-bottom: 2.5em !important;
}
.bottom--3em {
	margin-bottom: 3em !important;
}
.bottom--4em {
	margin-bottom: 4em !important;
}
.bottom--5em {
	margin-bottom: 5em !important;
}
.bottom--end {
	padding-bottom: 120px;
	margin-bottom: 0;
}

.margin--title {
	margin-top: 52px;
	padding-top: 0;
	margin-bottom: 58px;
	padding-bottom: 0;
}

@media (max-width: 768px) {
	.top--start {
		padding-top: 48px;
	}
	.bottom--end {
		padding-bottom: 80px;
	}
	.margin--title {
		margin-top: 40px;
		margin-bottom: 46px;
	}
}

/** Width utils (U2: single global source; replaced pages.css .ex--document
	.width--small and the never-used wp-blocks p--limited) */
.width--small {
	max-width: 1024px !important;
}


/** Buttons */
.button--text {
	display: inline-block;
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}
.button--text.button--white {
	color: var(--Neutrals-White);
}
@media (hover: hover) and (pointer: fine) {
	.button--text.button--white:hover {
		color: var(--Hover-on-Green);
	}
}


/**  Button Round. Default color: --Neutrals-White 
 *   button--round button--green button--arrow button--arrow_down
 */

.button--round {
	display: inline-block;
	height: 40px;
	width: 40px;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	outline: none;
	background-color: var(--Neutrals-White);
	background-position: center;
	background-repeat: no-repeat;
}
.button--small {
	height: 32px;
	width: 32px;
	border-radius: 16px;
}
.button--round.button--arrow,
.button--round.button--arrow_down,
.button--round.button--arrow_up {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--round.button--arrow_down {
	transform: rotate(90deg);
}
.button--round.button--arrow_up {
	transform: rotate(-90deg);
}
.button--round.button--arrow_left {
	transform: rotate(180deg);
}
.button--round.button--close {
	background-size: 14px;              
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E");
}

.button--round.button--green {
	background-color: var(--Primary-Light-Green);
}
.button--round.button--green.button--arrow,
.button--round.button--green.button--arrow_down,
.button--round.button--green.button--arrow_up {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--round.button--green.button--close {
	background-size: 14px;              
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E");
}




/**  Buttons. Default color: --Primary-Light-Green 
 *   button--item button--white button--arrow button--arrow_down button--arrow_up
 */

.buttons--container .button--item:not(:last-child) {
	margin-right: 16px;
}

.button--item {
	display: inline-block;
	position: relative;
	height: 48px;
	padding: 18px 32px 18px 32px;
	font-family: "open-sans", sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	border: none;
	border-radius: 24px;
	cursor: pointer;
	outline: none;
	background: var(--Primary-Light-Green);
}
.button--item span {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--Neutrals-White);
}


.button--item.button--icon {
	padding-right: 58px;
}
.button--item.button--icon::after {
	position: absolute;
	content: "";
	top: 9px;
	right: 9px;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 15px;
	background-color: var(--Primary-Green-40);
	background-position: center;
	background-repeat: no-repeat;
}
.button--item.button_icon--arrow::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--item.button_icon--arrow_down::after {
	transform: rotate(90deg);
}
.button--item.button_icon--arrow_up::after {
	transform: rotate(-90deg);
}
.button--item.button_icon--close::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E");
}
.button--item.button_icon--load_more::after {
	transform: rotate(45deg);
}


.button--item.button--white {
	background: var(--Neutrals-White);
}
.button--item.button--white span {
	color: var(--Neutrals-Black);
}
.button--item.button--white.button--icon::after {
	background-color: var(--Neutrals-White-Sand);
}
.button--item.button--white.button_icon--arrow::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23282819;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--item.button--white.button_icon--close::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .line%7Bfill:none;stroke:%23282819;stroke-width:1.2;stroke-linecap:round;stroke-miterlimit:10;%7D %3C/style%3E%3Cline class='line' x1='2.4' y1='9.7' x2='9.6' y2='2.3'/%3E%3Cline class='line' x1='2.4' y1='2.3' x2='9.6' y2='9.7'/%3E%3C/svg%3E");
}

.button--item.button--grey {
	background: var(--Neutrals-Light-Sand);
}
.button--item.button--grey span {
	color: var(--Neutrals-Light-Grey);
}
.button--item.button--grey.button--icon::after {
	background-color: var(--Neutrals-Dark-Sand);
}


/* Additions for the AG Link block (2026-07-27). Purely additive — every rule above is
	untouched, so all existing buttons render byte-identically.
 *
 * ICON PLACEMENT. `.button--icon` keeps its historical meaning: icon on the RIGHT, with
 * padding-right 58px and the ::after pinned right. A left-icon button carries BOTH
 * `.button--icon` (so it inherits the shared circle, the per-colour circle backgrounds and
 * the arrow images) AND `.button--icon_left`, which mirrors only the padding and the side.
 * That is why nothing above needed editing.
 * The block also emits `.button--icon_right` / `.button--icon_none` as markers; neither
 * needs a rule — right IS `.button--icon`, and "none" simply omits the icon classes. */
.button--item.button--icon_left {
	padding-left: 58px;
	padding-right: 32px;
}
.button--item.button--icon_left::after {
	left: 9px;
	right: auto;
}

/* ARROW DIRECTION. `button_icon--arrow` already points right, so arrow_right is the
	unrotated form; stated explicitly so it cannot pick up a rotation from a sibling class. */
.button--item.button_icon--arrow_right::after {
	transform: none;
}
.button--item.button_icon--arrow_left::after {
	transform: rotate(180deg);
}

/* Green is the `.button--item` default background. The class exists so the AG Link colour
	field has an explicit home and keeps working if that default ever changes. */
.button--item.button--green {
	background: var(--Primary-Light-Green);
}


.button--send_request {
	padding-right: 58px;  
}
.button--send_request::after {
	position: absolute;
	content: "";
	top: 9px;
	right: 9px;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 15px;
	background-color: var(--Primary-Green-40);
	background-position: center;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.button--send_request.button--action_button {
	position: fixed;
	display: none;
	right: 50px;
	bottom: 24px;
	z-index: 500;
	transition: top 1s, bottom 1s;
}
.button--send_request.button--action_button.button--show_action {
	display: block;
	z-index: 1500;
}
.button--send_request.button--action_button.button--footer_fix {
	position: absolute;
	top: -72px;
	bottom: unset;
	z-index: 500;
}

@media (max-width: 1024px) {
	.button--send_request.button--action_button {
		right: 34px;
	}
}
@media (max-width: 768px) {
	.button--send_request.button--action_button {
		right: 18px;
	}
}
@media (max-width: 450px) {
	.button--send_request.button--action_button {
		right: 10px;
		bottom: 16px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.button--item.button--icon:hover::after,
	.button--send_request:hover::after {
		background-color: var(--Primary-Green);
	}
	.button--item.button--white.button--icon:hover::after {
		background-color: var(--Neutrals-Medium-Sand);
	}
	.button--item.button--grey:hover span {
		color: var(--Neutrals-Black);
	}
	.button--item.button--grey.button--icon:hover::after {
		background-color: var(--Neutrals-Light-Grey);
	}
}


/* ex-layout */
/* 1512 1280 1024 768 450 */
/* 1150 630 */


:root {
   --Mobile-Padding: 24px;
}


/** Section */
.section--viewport {
   width: 1290px;
   padding-left: 0;
   padding-right: 0;
   margin-left: auto;
   margin-right: auto;
}
.section--small,
.section--viewport_small {
   width: 850px;
   max-width: 100%;
}   
.section--screen,
.section--full_width {
   width: 100%;
   padding-left: 0;
   padding-right: 0;
   margin-left: 0;
   margin-right: 0;
}
.section--viewport_fixed {
   width: 1072px;
   max-width: 100%;
   padding-left: 0;
   padding-right: 0;
   margin-left: auto;
   margin-right: auto;
} 
.section--viewport .section--screen,
.section--viewport .section--full_width {
   width: calc(100vw - var(--Scroll-Width)); 
   margin-left: calc((100% - 100vw + var(--Scroll-Width)) / 2);
   margin-right: calc((100% - 100vw + var(--Scroll-Width)) / 2);
}
/* Left-only sibling of .section--screen: the element's LEFT edge reaches the window edge while
   its right edge stays exactly where the layout already put it. Added 2026-09-10 for the
   AG Membership strip, whose right edge is owned by the certificate column beside it.

   ⚠ MARGIN ONLY, no width — deliberately. That is what makes it work on a FLEX ITEM as well as a
   block: a negative inline-start margin hands a flex item that much extra space, and on a
   `width: auto` block the auto width absorbs it. `.section--screen` can set a width because it is
   only ever used on block-level children.

   ⚠ The `100%` resolves against the CONTAINING BLOCK, so this reaches the window edge only while
   that box spans the content column — the same caveat `.section--screen` carries. Nest it deeper
   inside a narrower box and it under-shoots. */
.section--viewport .section--screen_left {
   margin-left: calc((100% - 100vw + var(--Scroll-Width)) / 2);
}

.section--window_height {
   min-height: 100vh;
}

@media (max-width: 1512px) {
   .section--viewport {
      width: calc(100% - 128px);
   }    
   .section--viewport_fixed {
      width: 1072px;
   }    
   .section--viewport .section--screen {
      width: calc(100vw - var(--Scroll-Width));
   }
}
@media (max-width: 1200px) {
   .section--viewport_fixed {
      width: calc(100% - 128px);
   }    
}
@media (max-width: 1024px) {
   .section--viewport, .section--viewport_fixed {
      width: calc(100% - 96px);
   }    
}
@media (max-width: 768px) {
   .section--viewport, .section--viewport_fixed {
      width: calc(100% - 64px);
   }    
}
@media (max-width: 450px) {
   .section--viewport, .section--viewport_fixed {
      width: calc(100% - 48px);
   }    
}



/** Header block */
.header {
   position: fixed;
   z-index: 1000;
   top: 0;
   width: 100%;
}
.header--dropped .header {
   z-index: 1600;
}
.header--menu_container {
   background: var(--Neutrals-White);
   position: relative;
   z-index: 10;
   /* <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9L7.5 6L4.5 3" stroke="#282819" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>  */
   --SVG-Black-Arrow: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 9L7.5 6L4.5 3' stroke='%23282819' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   /* <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9L7.5 6L4.5 3" stroke="#19AF23" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>  */
   --SVG-Light-Green-Arrow: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 9L7.5 6L4.5 3' stroke='%2319AF23' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); 
}
.compensate-for-scrollbar .header--menu_container {
   margin-right: var(--Scroll-Width);
}
.header--shadow {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 64px;
   z-index: 999;
   pointer-events: none;
   mix-blend-mode: multiply;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
.header--dropped .header--shadow {
   z-index: 1599;
}
.compensate-for-scrollbar .header--shadow {
   margin-right: var(--Scroll-Width);
}
.header--menu_wrap {
   display: flex;
   flex-wrap: nowrap;
}




/** Header Logo */
.header--logo {
   display: block;
   flex: 0 0 auto;
   margin-right: 100px;
   padding: 16px 0;
}
.header--logo img {
   display: block;
   height: 32px; 
   width: auto;
}

@media (max-width: 768px) {
   .header--logo {
      margin-right: 70px;
   }
}
@media (max-width: 450px) {
   .header--logo {
      margin-right: 40px;
   }
}


/** Header Top Menu */
.header--top_menu {
   flex: 1 0 auto;
   display: flex;
   justify-content: flex-start;
   flex-wrap: nowrap;
}

.menu--item_lvl0 .menu--top_handler {
   display: block;
   padding: 26px 12px;
   font-size: 12px;
   font-style: normal;
   font-weight: 700;
   line-height: 1;
   letter-spacing: 0.06em;
   text-transform: uppercase; 
   white-space: nowrap;
   color: var(--Neutrals-Black);
}
.menu--item_lvl0.menu--has_children .menu--top_handler {
   padding-right: 29px;
}
.menu--item_lvl0 .menu--top_handler span {
   display: block;
   position: relative;
   transition: color .1s ease;
}
.menu--item_lvl0.menu--has_children .menu--top_handler span::after {
   position: absolute;
   content: "";
   top: 0;
   right: -17px;
   width: 12px;
   height: 12px;
   background-position: center;
   background-repeat: no-repeat;
   background-image: var(--SVG-Black-Arrow);
   transform: rotate(90deg);
   transition: transform .3s ease-in-out 0s, top 0.3s ease-in-out 0s;
}
@media (hover: hover) and (pointer: fine) {
   .menu--item_lvl0 .menu--top_handler:hover span {
      color: var(--Primary-Light-Green);
   }
   .menu--item_lvl0.menu--has_children .menu--top_handler:hover span::after {
      background-image: var(--SVG-Light-Green-Arrow);
   }
}

.menu--item_lvl0.menu--has_children.menu--item_dropped .menu--top_handler span::after {
   top: -1px;
   transform: rotate(-90deg);
}
.menu--item_lvl0.menu--current_item .menu--top_handler,
.menu--item_lvl0.menu--current_ancestor .menu--top_handler {
   color: var(--Primary-Light-Green);
}
.menu--item_lvl0.menu--has_children.menu--current_item .menu--top_handler span::after,
.menu--item_lvl0.menu--has_children.menu--current_ancestor .menu--top_handler span::after {
   background-image: var(--SVG-Light-Green-Arrow);
}



           

/** Divider Item */
.menu--divider {
    flex: 1 1 auto;
    margin-right: 18px;
}

 

/** Search Item */
.menu--search .menu--top_handler {
   padding: 22px 12px;
   font-size: 0;
}
.menu--search .menu--top_handler span {
   width: 20px;
   height: 20px;
}
.menu--search.menu--item_dropped .menu--search_closed,
.menu--search:not(.menu--item_dropped) .menu--search_open {
   display: none;
}
.menu--search .svg-close,
.menu--search .svg-search {
   stroke:var(--Neutrals-Black); 
   stroke-linecap:round;
}
@media (hover: hover) and (pointer: fine) {
   .menu--search .menu--top_handler:hover .svg-search,
   .menu--search .menu--top_handler:hover .svg-close {
      stroke: var(--Primary-Light-Green);
   }
}



/** Burger handler */
.menu--burger {
   display: none;
}
.menu--burger button {
   border: none;
   cursor: pointer;
   outline: none;
   background-color: transparent;
}
.menu--burger .menu--top_handler {
   padding: 22px 20px 22px 12px;
   font-size: 0;
   height: 100%;
   width: 52px;
   position: relative;
}
.menu--burger .menu--top_handler span {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 20px;
   height: 1.2px;
   background: var(--Neutrals-Black);
   transform: translateX(-50%) translateY(-50%);
}
.menu--burger .menu--top_handler span:before,
.menu--burger .menu--top_handler span:after {
   content: "";
   position: absolute;
   right: 0;
   margin: auto;
   height: 1.2px;
   background: var(--Neutrals-Black);
   opacity: 1;
   transition-property: transform, width;
   transition-duration: 0.1s;
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
}
.menu--burger .menu--top_handler span:before {
   top: -8px;
   width: 17px;
}
.menu--burger .menu--top_handler span:after {
   bottom: -8px;
   width: 12px;
}
.menu--burger.menu--item_dropped .menu--top_handler span {
   background-color: transparent;
}
.menu--burger.menu--item_dropped .menu--top_handler span:before {
   transform: rotate(-45deg);
   top: 0;
   width: 20px;
}
.menu--burger.menu--item_dropped .menu--top_handler span:after {
   transform: rotate(45deg);
   bottom: 0;
   width: 20px;
}

@media (hover: hover) and (pointer: fine) {
   .menu--burger .menu--top_handler:hover span:before,
   .menu--burger .menu--top_handler:hover span:after {
      background: var(--Primary-Light-Green);
   }
   .menu--burger:not(.menu--item_dropped) .menu--top_handler:hover span {
      background: var(--Primary-Light-Green);
   }
}




/** Drop Container */
.menu--drop_container {
   display: none;
   background: var(--Neutrals-White-Sand);
   box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.15);
   padding-left: 40px;
   padding-right: 40px;
   margin-left: -28px;
}
.menu--drop_container.menu--drop_open {
   display: block;
   position: absolute;
   top: 64px;
   overflow-y: auto;
   overflow-x: clip;
}
.menu--drop_container .simplebar-track.simplebar-vertical {
   width: 4px;
   right: 4px;
   top: 4px;
   bottom: 8px;
   background-color: var(--Neutrals-Light-Sand);
}
.menu--drop_container .simplebar-scrollbar {
   background-color: var(--Neutrals-Dark-Sand);
}
.menu--drop_container .simplebar-scrollbar:before {
   display: none;
}

.menu--drop_category .menu--drop_container,
.menu--drop_full_width .menu--drop_container {
   left: 0;
   right: 0;
   padding-left: 0;
   padding-right: 0;
   margin-left: 0;
}
.menu--content_container {
   position: relative;
   display: inline-block;
   opacity: 0;
   padding: 28px 0; 
   transition: opacity 0.2s ease;
}
.menu--drop_category .menu--content_container,
.menu--drop_full_width .menu--content_container {
   padding-bottom: 48px;
}
.menu--drop_full_width.menu--drop_fixed .menu--content_container::after {
   position: absolute;
   content: "";
   top: 28px;
   bottom: 48px;
   left: -28px;
   width: 1px;
   background: var(--Neutrals-Medium-Sand);
}
.no_scroll .menu--drop_category .menu--content_container  {
   padding-bottom: 32px;
}
.menu--content_container .button--text {
   display: block;
   font-weight: 700;
   padding-top: 6px;
   padding-bottom: 6px;
   color: var(--Neutrals-Grey);
}
.menu--drop_category .menu--content_container .button--text {
   padding-top: 10px;
   padding-bottom: 10px;
}
.menu--drop_category .menu--content_container .menu--category_bottom {
   padding-bottom: 12px;
}
.menu--content_container .menu--item_lvl1.menu--current_item,
.menu--content_container .menu--item_lvl1.menu--current_ancestor,
.menu--content_container .menu_drop--content .menu--item_lvl1.menu--current_item,
.menu--content_container .menu_drop--content .menu--item_lvl1.menu--current_ancestor,
.menu--content_container .menu--item_lvl3.menu--current_item .menu--title {
   color: var(--Primary-Light-Green);
}
@media (max-width: 768px) {
   .menu--drop_category .menu--content_container .button--text {
      line-height: 18px;
   }
   .menu--drop_category .menu--content_container .menu--category_bottom {
      padding-bottom: 14px;
   }
}


/** Drop with Content */
.menu--drop_category .menu--content_container {
   display: flex;
}
.menu_drop--content {
   position: relative;
   flex: 0 0 auto;
   width: 25%;
   min-height: 200px;
   padding-right: 42px;
   padding-bottom: 0;
   display: flex;
   flex-direction: column;
}
.menu--drop_category .menu--category_space {
   flex-grow: 1;
   min-height: 54px;
}
.menu--drop_category .menu--item_lvl1 {
   padding-top: 12px;
   padding-bottom: 12px;
   transition: color .1s ease;
}
.menu_drop--content .button--text.button--content {
   position: absolute;
   bottom: 0;
   left: 0;
   padding-top: 13px;
   padding-bottom: 13px;
}

.menu_drop--content .button--item {
   position: absolute;
   bottom: 0;
   left: -10px;
}
.menu_drop--content .button--item.button--white span {
   color: var(--Neutrals-Grey);
}    
.menu_drop--content .menu--item_lvl1.menu--item_selected {
   color: var(--Neutrals-Black);
}
@media (hover: hover) and (pointer: fine) {
   .menu_drop--content .button--item.button--white:hover span {
      color: var(--Neutrals-Black);
   }    
   .menu--content_container .menu_drop--content .menu--item_lvl1:hover {
      color: var(--Primary-Light-Green);
   }
}


.menu_drop--items {
   flex-grow: 1;
   position: relative;
   padding-left: 80px;
   padding-bottom: 54px;
}
.menu_drop--items::before {
   position: absolute;
   content: "";
   top: -36px;
   bottom: -48px;
   left: 0;
   width: 100vw;
   background: rgba(255, 255, 255, 0.70);
   border-top: 1px solid var(--Neutrals-White-Sand);
}
.no_scroll .menu--content_container .menu_drop--items::before {
   bottom: -32px;
}
.menu_drop--item {
   position: relative;
   display: none;
   height: 100%;
}
.menu_drop--item.menu--target_selected {
   display: block;
}
.menu_drop--item .button--item {
   position: absolute;
   bottom: -54px;
   left: 0;
}

.menu_drop--category {
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
   margin-left: -16px;
   margin-right: -16px;
   margin-bottom: 24px;
}
.menu_drop--category:last-child {
   margin-bottom: 0;
}
.menu_drop--category_title {
   display: block;
   font-size: 24px;
   font-style: normal;
   font-weight: 300;
   line-height: 24px;
   letter-spacing: -0.02em;
   margin-bottom: 24px;
   color: var(--Neutrals-Grey);
   transition: color .15s ease;
}
        
.menu_drop--item .menu--item_lvl3 {
   width: 33.3333%;
   padding-left: 16px;
   padding-right: 16px;
   margin-bottom: 16px;
}
.menu_drop--item .menu--item_lvl3 .menu--title {
   font-size: 16px;
   font-style: normal;
   line-height: 1.5; 
   font-weight: 600;
   color: var(--Neutrals-Black);
   margin-bottom: 4px;
   transition: color .15s ease;
}
.menu_drop--item .menu--item_lvl3 .small {
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 1.5em;
   color: var(--Neutrals-Grey);
}
@media (hover: hover) and (pointer: fine) {
   .menu_drop--item .menu--item_lvl3:hover p {
      color: var(--Neutrals-Black);
   }
   .menu_drop--item .menu--item_lvl3:hover .menu--title {
      color: var(--Primary-Light-Green);
   }
}
@media (max-width: 1024px) {
   .menu_drop--content {
      width: 28%;
   }
   .menu_drop--item .menu--item_lvl3 {
      width: 50%;
   }
}
@media (max-width: 768px) {
   .menu_drop--content {
      width: 32%;
   }
   .menu_drop--items {
      padding-left: 48px;
   }
}


/** Search Drop Container */
.menu--search .menu--content_container {
   display: block;
   padding-bottom: 64px;
}
.menu--search_form {
   display: flex;
   flex-wrap: nowrap;
   margin-top: 24px;
}
.menu--search_form .menu--search_input {
   flex-grow: 1;
   margin-right: 42px;
}
.menu--search_input {
   height: 48px;
   width: 100%;
   padding: 16px 0 16px;
   font-family: "open-sans", sans-serif;
   font-size: 16px;
   line-height: 1;
   font-weight: 400;
   color: var(--Neutrals-Grey);
   background-color: var(--Neutrals-White-Sand);
   border: none;
   border-bottom: 1px solid var(--Neutrals-Light-Grey);
   outline: none;
}
.menu--search_input::placeholder {
   color: var(--Neutrals-Light-Grey);
   opacity: 0.7;
}
.menu--search_input::-webkit-input-placeholder {
   color: var(--Neutrals-Light-Grey);
   opacity: 0.7;
}
.menu--search_input::-moz-placeholder {
   color: var(--Neutrals-Light-Grey);
   opacity: 0.7;
}
.menu--search_input::-ms-input-placeholder {
   color: var(--Neutrals-Light-Grey);
   opacity: 0.7;
}

/* Autofill partial tuning */
.menu--search_input:autofill,
.menu--search_input:autofill::first-line,
.menu--search_input:autofill:hover,
.menu--search_input:autofill:focus,
.menu--search_input:autofill:active,
.menu--search_input:-webkit-autofill,
.menu--search_input:-webkit-autofill::first-line,
.menu--search_input:-webkit-autofill:hover, 
.menu--search_input:-webkit-autofill:focus, 
.menu--search_input:-webkit-autofill:active {
   box-shadow: 0 0 0 50px var(--Neutrals-White-Sand) inset !important;
   -webkit-box-shadow: 0 0 0 50px var(--Neutrals-White-Sand) inset !important;
   color: var(--Neutrals-Grey) !important;
   -webkit-text-fill-color: var(--Neutrals-Grey) !important;
   font-family: "open-sans", sans-serif !important;
   font-size: 16px !important;
   font-weight: 400 !important;
}
.menu--search_form .button--item {
   flex-grow: 0;
}

@media (max-width: 530px){
   .menu--search .menu--content_container {
      padding-bottom: 48px;
   }
   .menu--search_form {
      flex-wrap: wrap;
      margin-top: 16px;
   }
   .menu--search_form .menu--search_input {
      width: 100%;
      margin-right: 0;
   }
   .menu--search_form .button--item {
      width: 100%;
      margin-top: 32px;
   }
}



/** Burger menu dropdown */
.burger--menu {
   display: block;
   padding: 0;
   width: 100%;
}
.menu--burger .menu--drop_container {
   right: 0;
   padding-left: 0;
   padding-right: 0;
   margin-left: 0;
   background: var(--Neutrals-Medium-Sand);
}
.menu--burger .menu--drop_container .simplebar-track.simplebar-vertical {
   width: 4px;
   right: 2px;
   top: 2px;
   bottom: 2px;
   background-color: var(--Neutrals-Light-Sand);
}

.menu--burger .burger--handler {
   display: block;
   padding: 0;
   border-top: 1px solid var(--Neutrals-Light-Sand);
}
.menu--burger .burger--handler.burger_item--has_childs,
.menu--burger .burger--handler.burger--language {
   display: flex;
   flex-wrap: nowrap;
}
.menu--burger .burger--handler.burger--complex_handler .menu--handler {
   display: flex;
   flex-wrap: nowrap;
   padding-top: 0;
   padding-bottom: 0;
   padding-right: 0;
}
.burger--complex_left {
   flex: 1 1 auto;
   padding-top: 12px;
   padding-bottom: 12px;
}
.burger--complex_right {
   display: block;
   width: 86px;
   flex: 0 0 auto;
   position: relative;
   cursor: pointer;
}
.burger--complex_right img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.menu--item_lvl0 > .burger--handler,
.burger--handler.burger--language {
   background: var(--Neutrals-White-Sand);
}
.menu--burger .burger--item {
   padding: 0;
}

.burger--handler .menu--handler {
   display: block;
   padding: 22px 24px;
   flex: 1 1 auto;
}
.burger--handler.menu--item_lvl3 .menu--handler {
   padding-top: 12px;
   padding-bottom: 12px;
   padding-right: 72px;
}
.burger--handler .menu--handler span {
   display: block;
   font-size: 12px;
   font-style: normal;
   font-weight: 700;
   line-height: 1;
   letter-spacing: 0.06em;
   text-transform: uppercase; 
   white-space: nowrap;
   color: var(--Neutrals-Black);
   transition: color .1s ease;
}
.burger--handler .menu--handler p {
   font-size: 15px;
   line-height: 1.2;
   color: var(--Neutrals-Grey);
   margin-top: 0.5em;
}

.burger--handler .burger--expand {
   display: none;
   width: 100px;
   padding-right: 64px;
   flex: 0 0 auto;
   border-left: 1px solid var(--Neutrals-Light-Sand);
   cursor: pointer;
}
.burger--handler.burger_item--has_childs .burger--expand {
   display: block;
}
.burger--expand span {
   display: block;
   height: 100%;
   width: 100%;
   background-position: center;
   background-repeat: no-repeat;
   background-image: var(--SVG-Black-Arrow);
   transform: rotate(90deg);
   transition: transform .3s ease-in-out 0s;
}
.burger--item_expanded > .burger--handler .burger--expand span {
   transform: rotate(-90deg);
}

.burger--item_expanded.menu--item_lvl0 > .burger--handler {
   background: var(--Neutrals-Light-Sand);
}
.burger--item_expanded.menu--item_lvl0 > .burger--handler .burger--expand {
   border-left-color: var(--Neutrals-White);
}

.burger--children_container {
   display: none;
   background: var(--Neutrals-White);
}
.burger--item.menu--item_lvl1 > .burger--children_container {
   margin-left: 24px;
}

@media (hover: hover) and (pointer: fine) {
   .burger--menu .menu--handler:hover span {
      color: var(--Primary-Light-Green);
   }
   .burger--menu .burger--expand:hover span {
      background-image: var(--SVG-Light-Green-Arrow);
   }
}

.burger--language {
   border-bottom: 1px solid var(--Neutrals-Light-Sand);
}
.burger--language .menu--handler:not(:last-child) {
   border-right: 1px solid var(--Neutrals-Light-Sand);
}
.burger--divider {
   height: 52px;
   background: var(--Neutrals-Medium-Sand);
   border-top: 1px solid var(--Neutrals-Light-Sand);
}


.burger--item.menu--current_item > .burger--handler .menu--handler span,
.burger--item.menu--current_ancestor > .burger--handler .menu--handler span,
.burger--handler.menu--current_item > .menu--handler span,
.burger--language .menu--current_item span {
   color: var(--Primary-Light-Green);
}



/* Move items to burger */
.burger--menu .menu--item_lvl0 {
   display: none;
}
.header--menu_wrap {
   margin-right: -12px;
}

@media (max-width: 1200px) {
   .header--top_menu {
      justify-content: flex-end;
   }
   .menu--divider {
      display: none;
   }
}
@media (max-width: 1100px) {
   .header--menu_wrap {
      margin-right: -12px;
   }
   .menu--company,
   .menu--contacts,
   .menu--language {
      display: none;
   }
   .menu--burger {
      display: block;
   }
   .burger--menu .menu--company,
   .burger--menu .menu--contacts {
      display: block;
   }
   .menu--burger .menu--drop_container {
      width: 50vw;
   }
}
@media (max-width: 1024px) {
   .burger--handler .burger--expand {
      width: 84px;
      padding-right: 48px;
   }
}
@media (max-width: 850px) {
   .menu--support {
      display: none;
   }
   .burger--menu .menu--support {
      display: block;
   }
}
@media (max-width: 768px) {
   .burger--handler .burger--expand {
      width: 70px;
      padding-right: 28px;
   }
   .burger--complex_right {
      width: 92px;
   }   
}
@media (max-width: 700px) {
   .menu--products,
   .menu--applications {
      display: none;
   }
   .burger--menu .menu--products,
   .burger--menu .menu--applications {
      display: block;
   }
   .menu--burger .menu--drop_container {
      width: 100%;
   }
   .burger--handler > .menu--handler {
      padding-left: 32px;
   }
}
@media (max-width: 450px){
   .burger--handler .burger--expand {
      width: 64px;
      padding-right: 20px;
   }
   .burger--complex_right {
      width: 78px;
   }   
   .burger--handler > .menu--handler {
      padding-left: var(--Mobile-Padding);
   }
}




/** Content block */
.content {
	width: 100%;
   min-height: 100vh;
   position: relative;
}


/** Content heading section  */
.section--heading {
   background-color: var(--Primary-Dark-Green);
   background-size: cover;
   background-repeat: no-repeat;
   background-position-x: right;

}
.content_heading--container {
   padding: 72px 0;
}
.content_heading--content {
   display: inline-block;
   max-width: 50%;
   padding: 48px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   background: rgba(255, 255, 255, 0.05);
   -webkit-backdrop-filter: blur(60px);
   backdrop-filter: blur(60px);
}
.content_heading--content h1 {
   color: var(--Neutrals-White-Sand);
   line-height: 1.1;
}
.content_heading--content p {
   margin-top: 32px;
   color: var(--Neutrals-White-Sand); 
}
.content_heading--content .buttons--container {
   margin-top: 48px;
}

@media (max-width: 1280px) {
   .content_heading--content {
      max-width: 70%;
   }
}
@media (max-width: 1024px) {
   .content_heading--container {
      padding: 48px 0;
   }
   .content_heading--content h1 {
      font-size: 48px;
   }
}
@media (max-width: 768px) {
   .content_heading--container {
      padding: 32px 0;
   }
   .content_heading--content {
      padding: 32px;
      max-width: 100%;
   }
}
@media (max-width: 450px) {
   .content_heading--content h1 {
      font-size: 42px;
   }
   .content_heading--content .buttons--container {
      margin-top: 32px;
   }
   .content_heading--content .button--item {
      width: 100%;
   }
}



.section--container {
   width: 100%;
}




/** Footer block */
.footer {
   position: relative;
	width: 100%;
   background: var(--Gradient-Electro);
   padding-top: 64px;
   padding-bottom: 24px;
}
.footer--container {
   position: relative;
}

.footer--anchor {
   position: absolute;
   top: -40px;
   right: -6px;
   display: inline-flex;
   align-items: center;
   flex-wrap: nowrap;
   justify-content: flex-end;
   column-gap: 16px;
   min-height: 40px;
   min-width: 40px;
}


.footer--logo {
   display: inline-block;
}
.footer--logo img {
   display: block;
   height: 32px; 
   width: auto;
}



.footer--menu {
   margin-top: 52px;
   display: flex;
   flex-wrap: nowrap;
   margin-left: -32px;
   margin-right: -32px;
}
.footer_menu--column {
   flex: 1 1 auto;
   padding-left: 32px;
   padding-right: 32px;
}
.footer_menu--column .button--text {
   display: block;
   line-height: 22px;
   margin-top: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
   transition: color .1s ease;
}
.footer_menu--column .button--text.menu--item_lvl0 {
   font-size: 16px;
   font-weight: 400;
   line-height: 26px;
   text-transform: none;
   letter-spacing: 0.06em;
   margin-bottom: 22px;
   margin-top: 0;
}


.footer--address {
   font-size: 16px;
   font-weight: 300;
   line-height: 26px;
   letter-spacing: 0.04em;
   white-space: nowrap; 
   color: var(--Neutrals-White);
   display: block;
   margin-top: 12px;
}
.footer--address.menu--item_lvl0 {
   margin-top: 0;
   padding-top: 4px;
}

.footer--social_block {
   white-space: nowrap;
   margin-top: 46px;
}
.footer--social {
   display: inline-block;
   width: 24px;
   margin-right: 18px;
}
.footer--social:last-child {
      margin-right: 0;
}
.footer--social_icon {
      fill: var(--Neutrals-White);
}

@media (hover: hover) and (pointer: fine) {
   .footer--anchor:hover .button--text { color: var(--Hover-on-Green); }
   .footer--anchor:hover .button--round {
      background-color: var(--Hover-on-Green);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;%7D .st1%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
   }
   .footer--address.footer--email:hover { color: var(--Hover-on-Green); }
   .footer--social:hover .footer--social_icon { fill: var(--Hover-on-Green); }
}

.footer_column--bottom {
   display: none;
}

.footer--bottom {
   display: flex;
   flex-wrap: nowrap;
   align-items: baseline;
   margin-top: 56px;
}
.footer--copyright {
   flex-grow: 1;
   font-size: 13px;
   font-style: normal;
   font-weight: 400;
   line-height: 1;
   letter-spacing: 0.01em;     
   color: var(--Neutrals-White);
   opacity: 0.8;
}
.footer--bottom_links {
   flex-grow: 0;
   margin-left: 32px;
}


@media (max-width: 1280px) {
   .footer--menu {
      margin-left: -24px;
      margin-right: -24px;
   }
   .footer_menu--column {
      padding-left: 24px;
      padding-right: 24px;
   }
}
@media (max-width: 1100px) {
   .footer--anchor { right: -3px; }
}
@media (max-width: 1024px) {
   .footer--menu { flex-wrap: wrap; }
   .footer_menu--column { width: 33.33333%; }
   .footer_column--1 { 
      order: 1;
      margin-bottom: 64px; 
   }
   .footer_column--3 { 
      order: 2;
      margin-bottom: 64px;
   }
   .footer_column--address { 
      order: 3;
      margin-bottom: 64px;
   }
   .footer_column--2 { order: 4; }
   .footer_column--4 { order: 5; }
   .footer_column--bottom {
      order: 6; 
      display: block;
   }
   .footer_column--bottom .button--text:first-child { margin-top: 0; }
   .footer--bottom_links { display: none; }
}
@media (max-width: 768px) {
   .footer_column--3, .footer_column--4 { width: 20%; }
}
@media (max-width: 650px) {
   .footer_menu--column {
      width: 50%;
      margin-bottom: 64px;
   }
   .footer_column--1 { order: 1; }
   .footer_column--2 { order: 2; }
   .footer_column--3 { order: 4; }
   .footer_column--4 { order: 3; }
   .footer_column--address { 
      order: 5; 
      margin-bottom: 0;
   }
   .footer_column--bottom { order: 6; }
   .footer_menu--column .button--text { line-height: 20px; }
   .footer_menu--column .button--text.menu--item_lvl0 { margin-bottom: 16px; }
}
@media (max-width: 450px) {
   .footer { padding-top: 46px; }    
   .footer--anchor { top: -5px; }
   .footer--anchor_text { display: none; } 
   .footer_menu--column .button--text.menu--item_lvl0 { 
      margin-bottom: 10px; 
      font-size: 15px;
      font-weight: 600;
      text-transform: uppercase;
   }
   .footer_menu--column .button--text.menu--item_lvl1 { display: none; }
   .footer_menu--column { margin-bottom: 0; }
   .footer_menu--column.footer_column--address { 
      width: 100%;
      margin-top: 32px; 
      margin-bottom: 46px;
   }
   .footer--fax { margin-top: 0; }
   .footer_menu--column.footer_column--bottom { width: 100%; }
   .footer--bottom { margin-top: 36px; }
}





/** 
 *   FancyBox 
 */
.fancybox-caption__body > * {
	font-size: 14px;
	color: #FFFFFF;
}
.fancybox-caption__body h4 {
	margin-bottom: 3px;
}
.fancybox-caption__body .fancy_pop--description {
	font-size: 12px;
	font-style: italic;
   margin-top: 2px;
}
@media (max-width: 785px) {
	.fancybox-caption__body > * {
		font-size: 13px;
	}
	.fancybox-caption__body .fancy_pop--description {
		font-size: 11px;
	}
}

/* FancyBox: Remove background from all buttons */
.fancybox-navigation .fancybox-button {
	background: transparent;
}

/* FancyBox: Navigation arrows */
.fancybox-navigation .fancybox-button div {
	padding: 6px;
	background: transparient;
	border-radius: 16px;
	transition: opacity .2s;
	border: 1px solid var(--Neutrals-Medium-Grey);
	opacity: .7;
}
.fancybox-navigation .fancybox-button:not([disabled]):hover div {
	opacity: .9;
	background: var(--Neutrals-White-Sand);
    border-color: var(--Neutrals-White-Sand);
}
.fancybox-navigation .fancybox-button[disabled] {
	color: var(--Neutrals-Dark-Grey);
}
.fancybox-navigation .fancybox-button:not([disabled]) {
	color: var(--Neutrals-Sand);
}
.fancybox-navigation .fancybox-button:not([disabled]):hover {
	color: var(--Primary-Green);
}



/* .h4 {
   font-size: 24px;
   font-weight: normal;
   line-height: 32px;
   letter-spacing: -0.02em;
   color: var(--Neutrals-Black);
}

@media screen and (max-width: 767px) {
   .h4 {
      font-size: 20px;
      line-height: 28px;
   }
} */

.disabled,
[disabled]:not(.brlbs-cmpnt-list-item) {
   pointer-events: none;
   opacity: .3;
}

.section--page-heading {
   padding-top: 72px;
   padding-bottom: 72px;
   background: var(--Gradient-Sand);
}


body:not(.single-news) .section--page-heading {
   background: var(--Gradient-Electro);
   position: relative;
}
body:not(.single-news) .section--page-heading:after {
   content: '';
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1047' height='211'><path opacity='.05' d='M0 .00001 1047 0l-85.662 211H0V.00001Z' fill='%23282819'/></svg>") no-repeat 0% 50%;
   bottom: 0;
   background-size: 75% 100%;
}
body:not(.single-news) .section--page-heading h1 {
   color: var(--Neutrals-White);
   position: relative;
   z-index: 1;
}


/** Header  */
.section--page_header {
   background-color: var(--Neutrals-Black);
   background-size: cover;
   background-repeat: no-repeat;
   min-height: 432px;
   background-position: 50% 70%;
}
.page--header_container {
   padding: 72px 0;
}
.page--header_content {
   max-width: 550px; 
   padding: 48px;
   border: 1px solid rgba(255, 255, 255, 0.06);
   background: rgba(255, 255, 255, 0.05);

   -webkit-backdrop-filter: blur(120px);
   backdrop-filter: blur(120px);
}
.page--header_content h1 {
   color: var(--Neutrals-White);
}
.page--header_content p {
   margin-top: 24px;
   color: var(--Neutrals-Light-Sand);
}


@media screen and (max-width: 767px) {
   .page--header_container {
      padding: 0;
      min-height: 338px;
   }
   .section--page_header .section--viewport {
      padding: 0;
   }
   .page--header_content {
      padding: 36px 24px 42px;
      border: 0;
      max-width: none;
   }
   .section--page-heading {
      padding-top: 32px;
      padding-bottom: 32px;
   }
}


/** Debug screen */
.debug--screen {
	position: fixed;
	top: 0;
	left: 0;
	padding: 5px 10px;
	background-color: var(--Neutrals-White-Sand);
	font-size: 13px;
	font-weight: 400;
   color: var(--Neutrals-Dark-Grey);
	z-index: 50000;
}
pre {
	font-size: 15px;
	line-height: 1.2;
}



/** WP Columns */
.wp-block-columns {
   box-sizing: border-box;
   display: flex;
   flex-wrap: nowrap;
   gap: 80px;
}

.wp-block-columns {
   align-items: normal
}
.wp-block-columns.are-vertically-aligned-top {
   align-items: flex-start
}
.wp-block-columns.are-vertically-aligned-center {
   align-items: center
}
.wp-block-columns.are-vertically-aligned-bottom {
   align-items: flex-end
}


.wp-block-column {
   flex-basis: 30% !important;
   flex-grow: 1;
   min-width: 0;
   overflow-wrap: break-word;
   word-break: break-word;
}
.wp-block-column.is-vertically-aligned-top {
   align-self: flex-start
}
.wp-block-column.is-vertically-aligned-center {
   align-self: center
}
.wp-block-column.is-vertically-aligned-bottom {
   align-self: flex-end
}
.wp-block-column.is-vertically-aligned-stretch {
   align-self: stretch
}
.wp-block-column.is-vertically-aligned-bottom,
.wp-block-column.is-vertically-aligned-center,
.wp-block-column.is-vertically-aligned-top {
   width: 100%
}

@media (max-width: 1024px) {
   .wp-block-columns.columns--text_image,
   .wp-block-columns.columns--image_text {
      flex-wrap: wrap !important;
      gap: 48px;
   }
   .wp-block-columns.columns--text_table,
   .wp-block-columns.columns--table_table {
      flex-wrap: wrap !important;
      gap: 24px;
   }
   .columns--text_image .wp-block-column,
   .columns--image_text .wp-block-column,
   .columns--text_table .wp-block-column,
   .columns--table_table .wp-block-column {
      flex-basis: 100% !important;
   }
   .wp-block-columns.columns--swap .wp-block-column:last-child {
      order: 1;
   }
   .wp-block-columns.columns--swap .wp-block-column:first-child {
      order: 2;
   }
}
@media (max-width: 768px) {
   .wp-block-columns {
      flex-wrap: wrap !important;
   }
   .wp-block-columns .wp-block-column {
      flex-basis: 100% !important;
   }
   .wp-block-columns.columns--list_list {
      gap: 54px;
   }
   .wp-block-columns.columns--text_image,
   .wp-block-columns.columns--image_text {
      gap: 32px;
   }
   .wp-block-columns.columns--double_list,
   .wp-block-columns.columns--text_text {
      gap: 0;
   }
   .wp-block-columns.columns--double_list .wp-block-column:last-child {
      padding-top: 0;
   }
}

@media (max-width: 450px) {
   .wp-block-columns.columns--text_image,
   .wp-block-columns.columns--image_text {
      gap: 24px;
   }
}

/** WP Video */
.wp-block-video {
    box-sizing: border-box
}
.wp-block-video video {
    height: auto;
    vertical-align: middle;
    width: 100%
}
@supports (position: sticky) {
    .wp-block-video [poster] {
        object-fit:cover
    }
}
.wp-block-video.aligncenter {
    text-align: center
}
.wp-block-video :where(figcaption) {
    margin-bottom: 1em;
    margin-top: .5em
}

/** WP Spacer */
.wp-block-spacer{clear:both}

/** WP Math */
.wp-block-math {
   font-size: 20px;
}


/* ex-poster */

/** 
 *  SECTION HEADER WITH PHOTO 
 */

.section--poster {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right;
}

/** Applications */
@media (min-width: 769px) {
    .single-applications .section--poster {
        min-height: 320px;
    }
}
@media (min-width: 1025px) {
    .single-applications .section--poster {
        min-height: 440px;
    }
}
@media (min-width: 1281px) {
    .single-applications .section--poster {
        min-height: 500px;
    }
}

/** Company
 *
 * `poster--company` reaches the DOM from TWO different places, so every rule
 * scoped to it MUST be written in both forms (audited 2026-07-22 — 7 pages, no
 * other emitter anywhere in the theme, plugins or mu-plugins):
 *
 *   ancestor — template PHP pushes it onto #content:
 *              template-about_us.php  (/about-us/, /history/, /career/)
 *              template-news.php      (/news/)
 *              template-stories.php   (/use-cases/)
 *              →  .poster--company .section--poster
 *
 *   self     — the block's "Additional CSS class(es)" field puts it straight on
 *              the poster div (section-poster.twig prints `classes` there):
 *              /sustainability/, /events/
 *              →  .poster--company.section--poster
 *
 * Both forms are specificity (0,2,0), so they share one declaration block without
 * disturbing the cascade. Writing only one form silently does nothing on the other
 * half of the pages — that is exactly how /events/ lost its mobile banner height.
 */
@media (min-width: 769px) {
   .poster--company .section--poster,
   .poster--company.section--poster {
      min-height: 500px;
   }
}

/* The mobile ladder is gated on `poster--no_text`, emitted by
   partial/section-poster.twig when a poster has no title, description or button.
   Such a banner has no .poster--content inside it, so min-height is the ONLY thing
   giving it height: /news/, /sustainability/, /events/.
   Posters WITH text size themselves and must NOT be floored — /history/ renders
   only ~210px tall on mobile (poster_scenario--blur, so it gets none of the 300px
   container padding the other text posters have) and a blanket 350px would grow it
   by ~140px.

   NB these are (0,3,0), one step above the (0,2,0) rules a page writes in the
   block's Additional CSS field. That field is injected after the bundle, so it used
   to win on source order alone; a page that needs its own ladder must now match the
   specificity (include .poster--no_text) rather than rely on order. */
@media (max-width: 768px) {
   .poster--company .section--poster.poster--no_text,
   .poster--company.section--poster.poster--no_text {
      min-height: 350px;
   }
}
@media (max-width: 550px) {
   .poster--company .section--poster.poster--no_text,
   .poster--company.section--poster.poster--no_text {
      min-height: 300px;
   }
}
@media (max-width: 450px) {
   .poster--company .section--poster.poster--no_text,
   .poster--company.section--poster.poster--no_text {
      min-height: 230px;
   }
}


   .poster--bg_green {
      background-image: linear-gradient(320deg, #006432 0%, #3882A6 100%);
   }
   .poster--bg_sand {
      background-image: linear-gradient(140deg, #F7F6F2 0%, #E0E0D1 100%);
   }
   .poster--bg_image.poster--text_white {
      background-color: var(--Secondary-Middle-Electro);
   }
   .poster--bg_image.poster--text_black,
   .poster--bg_image.poster--text_green {
      background-color: var(--Neutrals-Light-Sand);
   }

   .section--poster::before {
      position: absolute;
      content: "";
      top: 0;
      bottom: 0;
      left: 0;
      width: 70%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: right center;
   }
      .poster--bg_green::before {
         background-image: url("data:image/svg+xml,%3Csvg width='259' height='198' viewBox='0 0 259 198' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.08' fill-rule='evenodd' clip-rule='evenodd' d='M0 1.18017e-05L259 0L213.505 198L0 198V1.18017e-05Z' fill='%23282819'/%3E%3C/svg%3E");
      }
      .poster--bg_sand::before {
         background-image: url("data:image/svg+xml,%3Csvg width='259' height='198' viewBox='0 0 259 198' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.08' fill-rule='evenodd' clip-rule='evenodd' d='M0 1.18017e-05L259 0L213.505 198L0 198V1.18017e-05Z' fill='%23B4B4A2'/%3E%3C/svg%3E");
      }
      .poster--bg_image::before {
         display: none;
      }
    


.section--poster .poster--viewport {
   position: relative;
}
.section--viewport_small .poster--viewport {
   width: 1072px;
   max-width: 100%;
}
.section--container_width .poster--viewport {
   padding-left: 64px;
   padding-right: 64px;
}
   .poster--container {
      padding: 56px 0 64px;
   }
   .poster--has_image .poster--container {
      padding: 56px 0;
   }

   .poster--content {
      width: 70%;
   }
   .poster--bg_image .poster--content {
      width: 50%;
   }
   .section--viewport_small .poster--bg_image .poster--content {
      width: 70%;
   }
   .section--viewport_small .poster_image--object .poster--content {
      width: 50%;
   }

        .poster--textbg_white .poster--content {
            padding: 32px 46px 42px;
            background: var(--Neutrals-White);
        }
        .poster--textbg_blur .poster--content {
            padding: 32px 46px 42px;
            backdrop-filter: blur(60px);
        }
        
            .poster--bg_image.poster--textbg_blur .poster--content {
                background: rgba(255, 255, 255, 0.05);
            }
            .poster--bg_green.poster--textbg_blur .poster--content {
                background: rgba(255, 255, 255, 0.08);
            }
            .poster--bg_sand.poster--textbg_blur .poster--content {
                background: rgba(255, 255, 255, 0.3);
            }



        .poster--content h1 {
            color: var(--Neutrals-White);
            line-height: 1.1;
        }
        .poster--content p {
            margin-top: 28px;
            color: var(--Neutrals-White-Sand); 
        }

            .poster--text_black .poster--content h1 {
                color: var(--Neutrals-Black);
            }
            .poster--text_black .poster--content p {
                color: var(--Neutrals-Dark-Grey);
            }

            .poster--text_green .poster--content h1 {
                color: var(--Primary-Green);
            }
            .poster--text_green .poster--content p {
                color: var(--Neutrals-Dark-Grey);
            }


        .poster--content .buttons--container {
            margin-top: 42px;
        }


@media (max-width: 1512px) {
   .section--viewport_small .poster--viewport {
      width: 1072px;
      margin: 0 auto;
   }
}
        
@media (max-width: 1280px) {
   .section--poster .poster--content {
      width: 75%;
   }
   .poster--textbg_no .poster--content {
      width: 100%;
   }
   .poster_image--object .poster--content {
      width: 50%;
   }
}

@media (max-width: 1024px) {
   .section--container_width .poster--viewport {
      padding-left: 48px;
      padding-right: 48px;
   }
   .poster--content h1 br {
      display: none;
   }
   .poster--textbg_white .poster--content,
   .poster--textbg_blur .poster--content {
      padding: 28px 36px 36px;
   }
   .section--poster .poster--content {
      width: 100%;
   }
   .poster_image--object .poster--content {
      width: 60%;
   }
}
@media (max-width: 768px) {
   .section--poster .poster--viewport {
      padding-left: 0;
      padding-right: 0;
      width: 100%;
   }
   .section--poster .poster--container {
      padding-top: 0;
      padding-bottom: 0;
   }
   .section--poster .poster--content {
      padding-top: 38px;
      padding-bottom: 46px;
      padding-left: 32px;
      padding-right: 32px;
   }
   /* .section--poster:not(.poster--textbg_no) .poster--content {
      padding-left: 32px;
      padding-right: 32px;
   } */
   .poster--content h1 {
      font-size: 52px;
   }
   .poster--content .buttons--container {
      margin-top: 36px;
   }

   
   .section--poster.poster_scenario--gradient {
      background-image: linear-gradient(320deg, #006432 0%, #3882A6 100%);
   }

   .section--poster.poster_scenario--gradient::before {
      background-image: url("data:image/svg+xml,%3Csvg width='259' height='198' viewBox='0 0 259 198' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.08' fill-rule='evenodd' clip-rule='evenodd' d='M0 1.18017e-05L259 0L213.505 198L0 198V1.18017e-05Z' fill='%23282819'/%3E%3C/svg%3E");
      display: block;
   }
   .section--poster.poster_scenario--gradient .poster--content {
      background: none;
      backdrop-filter: none;
   }


   .section--poster {
      background-position: center bottom;
   }
   .poster--has_image .poster--content {
      width: 100%;
      padding-bottom: 36px;
   }
   .section--viewport_small .poster--has_image .poster--content {
      width: 100%;
   }
   .poster--has_image.poster_scenario--object .poster--container {
      padding-bottom: 300px;
   }
}

@media (max-width: 450px) {
   .section--poster .poster--content {
      padding-top: 36px;
      padding-bottom: 42px;
      padding-left: 24px;
      padding-right: 24px;
   }
   /* .section--poster:not(.poster--textbg_no) .poster--content {
      padding-left: 24px;
      padding-right: 24px;
   } */
   .poster--content h1 {
      font-size: 46px;
   }
   .poster--content p {
      font-size: 14px;
      line-height: 1.7em; 
   }

   .poster--has_image .poster--content {
      padding-bottom: 32px;
   }
   .poster--has_image.poster_scenario--object .poster--container {
      padding-bottom: 260px;
   }
}


/** Sustainability */


.section--viewport_small .poster--viewport_large .poster--viewport {
    width: 1512px;
}


/* ag-collection */
/**
 * AG Collection wrapper
 * Modes: show_all | load_more | scroll (Swiper 12)
 * Breakpoints: 450 / 768 / 1066
 */
.acf-block-component .ag_collection--container * {
	box-sizing: border-box;
}


.ag_collection--container {
	width: 100%;
}

.ag_collection--content {
	display: flex;
	align-items: stretch;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 30px;
}
.ag_collection--columns_1 .ag_collection--content,
.ag_collection--columns_2 .ag_collection--content {
	gap: 40px;
}


.ag_collection--item {
	flex: 0 0 auto;
}
.ag_collection--columns_1 .ag_collection--item {
	width: 100%;
}
.ag_collection--columns_2 .ag_collection--item {
	width: calc(50% - 20px);
}
.ag_collection--columns_3 .ag_collection--item {
	width: calc(33.33333% - 20px);
}


@media (max-width: 1066px) {
	.ag_collection--columns_2 .ag_collection--content {
		gap: 30px;
	}
	.ag_collection--columns_2 .ag_collection--item,
	.ag_collection--columns_3 .ag_collection--item {
		width: calc(50% - 15px);
	}
}
@media (max-width: 768px) {
	.ag_collection--columns_2 .ag_collection--item,
	.ag_collection--columns_3 .ag_collection--item {
		width: 100%;
	}
}
@media (max-width: 450px) {
	.ag_collection--container.ag_collection--full_mobile {
		width: calc(100vw - var(--Scroll-Width));
		margin-left: calc((100% - 100vw + var(--Scroll-Width)) / 2);
		margin-right: calc((100% - 100vw + var(--Scroll-Width)) / 2);
	}
	.ag_collection--full_mobile .ag_collection--content {
		gap: 46px;
	}
}


/* Load more classes */
.ag_collection--load_more .ag_collection--item {
	display: none;
}
.ag_collection--more {
	display: none;
	text-align: right;
	margin-top: 24px;
	margin-right: -3px;
}
.ag_collection--load_more .ag_collection--more {
	display: block;
}
.ag_collection--more button {
	min-width: 150px;
}
.acf-block-component .ag_collection--more button {
	pointer-events: none;
}


@media (min-width: 1067px) {
	.ag_collection--load_more .ag_collection--item.ag_collection--desktop {
		display: block;
	}
	.ag_collection--load_more .ag_collection--more.ag_collection--desktop {
		display: block;
	}
}
@media ( (min-width: 769px) and (max-width: 1066px) ) {
	.ag_collection--load_more .ag_collection--item.ag_collection--tablet {
		display: block;
	}
	.ag_collection--load_more .ag_collection--more.ag_collection--tablet {
		display: block;
	}
}
@media (max-width: 768px) {
	.ag_collection--load_more .ag_collection--item.ag_collection--mobile {
		display: block;
	}
	.ag_collection--load_more .ag_collection--more.ag_collection--mobile {
		display: block;
	}
}
@media (max-width: 450px) {
	.ag_collection--more {
		margin-right: 0;
		padding-right: 20px;
	}
}


/**
 * Scroll mode (Swiper 12, custom wrapper/slide classes — core rules replicated here;
 * Swiper's own CSS is never loaded)
 */
.ag_collection--scroll {
	position: relative;
	overflow-x: clip;
	touch-action: pan-y;
}
.ag_collection--scroll .ag_collection--content {
	flex-wrap: nowrap;
	gap: 0; /* Swiper spaceBetween margins replace the grid gap */
	box-sizing: content-box;
	transition-property: transform;
	transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
	transform: translate3d(0, 0, 0);
	opacity: 0;
}
.ag_collection--scroll.swiper-initialized .ag_collection--content {
	opacity: 1;
}
.ag_collection--scroll .ag_collection--item {
	flex-shrink: 0;
	transition-property: transform;
}

/* Full Screen: container bleeds to the screen edges, content stays column-aligned;
	Swiper subtracts the padding, so slide math is identical to viewport mode. */
.ag_collection--scroll.ag_collection--full_screen {
	width: auto;
	margin-left: calc((100% - 100vw + var(--Scroll-Width)) / 2);
	margin-right: calc((100% - 100vw + var(--Scroll-Width)) / 2);
	padding-left: calc((100vw - var(--Scroll-Width) - 100%) / 2);
	padding-right: calc((100vw - var(--Scroll-Width) - 100%) / 2);
}
/* Wide on Mobile, scroll mode (<=450): slides span the full screen (±24px, the
	ag_image--size_vport pattern); padding 0 also cancels full_screen's restore when
	combined (wide_mobile). Controls re-inset to the content column. */
@media (max-width: 450px) {
	.ag_collection--scroll.ag_collection--full_mobile {
		width: calc(100% + 48px);
		margin-left: -24px;
		margin-right: -24px;
		padding-left: 0;
		padding-right: 0;
	}
	.ag_collection--scroll.ag_collection--full_mobile .ag_collection--scroll_controls {
		padding-left: 24px;
		padding-right: 24px;
	}
}


/* Scroll controls: bullets left, arrows + optional show-all right */
.ag_collection--scroll_controls {
	display: none;
	align-items: center;
	justify-content: space-between;
	margin-top: 24px;
}
@media (min-width: 1067px) {
	.ag_collection--scroll .ag_collection--scroll_controls.ag_collection--desktop {
		display: flex;
	}
}
@media ( (min-width: 769px) and (max-width: 1066px) ) {
	.ag_collection--scroll .ag_collection--scroll_controls.ag_collection--tablet {
		display: flex;
	}
}
@media (max-width: 768px) {
	.ag_collection--scroll .ag_collection--scroll_controls.ag_collection--mobile {
		display: flex;
	}
}

.ag_collection--bullets {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;     /* allow flex squeeze so JS can detect when bullets don't fit */
	overflow: hidden; /* no-JS worst case: clip instead of overlapping the arrows */
}
/* Gauge dots on a white or unstyled background; on a sand section they shift one step darker
	(the .ag_section--style_sand block below). */
.ag_collection--bullets .swiper-pagination-bullet {
	display: block;
	flex: 0 0 auto; /* never squeeze bullets — the JS fit-check measures true width */
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: var(--Neutrals-Light-Sand);
	cursor: pointer;
	transition: background-color 0.2s;
}
.ag_collection--bullets .swiper-pagination-bullet-active {
	background-color: var(--Neutrals-Sand);
	cursor: default;
}

.ag_collection--arrows {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;  /* keeps arrows right when the gauge is disabled */
	flex-shrink: 0;     /* arrows never squeeze — the gauge yields instead */
	padding-left: 50px; /* minimal distance to the gauge; mirrored in the JS fit-check */
}
.ag_collection--arrows button {
	display: block;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	outline: none;
}
/* Button states — the DEFAULT, i.e. on a white or unstyled background, which is where nearly
	every collection actually sits (measured 2026-09-11: of all published placements exactly one,
	an AG Gallery on About us, is inside a sand section, and `body` is --Neutrals-White):
	active   = Light-Sand circle, Light-Grey icon
	hover    = Black icon (bg unchanged)
	disabled = same colors as active, faded by the GLOBAL css/layout.css
		`[disabled]:not(.brlbs-cmpnt-list-item) { opacity: .3 }` — nothing is stated here,
		deliberately, and nothing should be.
	⚠ This rule covers BOTH the arrows and the show-all grid button: they are the only two
		<button>s inside .ag_collection--arrows.
	⚠⚠ ON SAND the pair shifts one step darker — see the .ag_section--style_sand block below.
	Do not fold the two together: the owner rejected a single site-wide value on 2026-09-11
	precisely because it made the white-background collections too heavy. */
.ag_collection--arrows button .button--round {
	display: block;
	background-color: var(--Neutrals-Light-Sand);
}
.ag_collection--arrow_prev .button--round {
	transform: scaleX(-1);
}
/* active idle icon (hover falls back to the dark default from elements.css) */
.ag_collection--arrows .ag_collection--arrow:not(:hover) .button--round.button--arrow {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23929283;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23929283;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
/* disabled buttons: Swiper sets the attribute; layout.css `[disabled]` styles it */
.ag_collection--bullets.swiper-pagination-lock,
.ag_collection--arrows .swiper-button-lock {
	display: none;
}

/* "Read all" link (scroll_show_link) — first item inside .ag_collection--arrows
	(link | grid | prev | next); styled like the section/catalog title-link. */
.ag_collection--arrows .ag_collection--show_link {
	margin: 0 22px;
}
.ag_collection--show_link {
	flex-shrink: 0;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 2.5em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--Neutrals-Dark-Grey);
	outline: none;
	text-decoration: none;
}
@media (max-width: 768px) {
	.ag_collection--arrows .ag_collection--show_link {
		margin-right: 12px;
	}
}


/* Editor preview: static scroll layout, no interaction (no Swiper in the iframe).
	Restores visibility + grid gaps that the frontend hands over to Swiper. */
.acf-block-component .ag_collection--scroll .ag_collection--content {
	opacity: 1;
	gap: 30px;
}
.acf-block-component .ag_collection--columns_1.ag_collection--scroll .ag_collection--content,
.acf-block-component .ag_collection--columns_2.ag_collection--scroll .ag_collection--content {
	gap: 40px;
}
.acf-block-component .ag_collection--scroll_controls button,
.acf-block-component .ag_collection--show_link,
.acf-block-component .ag_collection--bullets .swiper-pagination-bullet {
	pointer-events: none; /* clicks fall through and select the block */
}

/* Preview mock buttons — self-contained (no elements.css in the editor iframe).
	Same Light-Sand default as the live control above, and the same sand override applies to it;
	frozen duplicate, change both. */
.ag_collection--preview_button {
	display: block;
	height: 40px;
	width: 40px;
	border-radius: 20px;
	background-color: var(--Neutrals-Light-Sand);
	background-position: center;
	background-repeat: no-repeat;
}
.ag_collection--preview_arrow {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23929283;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%23929283;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.ag_collection--preview_prev {
	transform: scaleX(-1);
}
.ag_collection--preview_controls .ag_collection--grid_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st%7Bfill:none;stroke:%23929283;stroke-width:1.1;%7D %3C/style%3E%3Crect class='st' x='0.55' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='0.55' y='7.05' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='7.05' width='4.4' height='4.4'/%3E%3C/svg%3E");
}


/* show-all grid icon (dark base = hover state; Light-Grey when idle) */
.ag_collection--grid_icon {
	background-size: 15px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st%7Bfill:none;stroke:%23282819;stroke-width:1.1;%7D %3C/style%3E%3Crect class='st' x='0.55' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='0.55' y='7.05' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='7.05' width='4.4' height='4.4'/%3E%3C/svg%3E");
}
.ag_collection--show_all_button:not(:hover) .ag_collection--grid_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st%7Bfill:none;stroke:%23929283;stroke-width:1.1;%7D %3C/style%3E%3Crect class='st' x='0.55' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='0.55' y='7.05' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='7.05' width='4.4' height='4.4'/%3E%3C/svg%3E");
}


/* ---- ON A SAND SECTION -------------------------------------------------------------------
 *
 * OWNER 2026-09-11: a scroll control standing on sand shifts one step darker, so it does not
 * dissolve into the band — Medium-Sand disc, Medium-Grey glyph. Hover is unchanged (Black, from
 * elements.css) and so is the disabled fade (the global .3). This is the same pair AG Awards and
 * EX Stories Front use unconditionally, because those two paint their own --Neutrals-White-Sand
 * band rather than living inside a section.
 *
 * ⚠ SCOPED, NOT GLOBAL. It was briefly applied to every collection earlier the same day and the
 * owner rejected that: on the white pages — products, news, datasheets, applications, and the
 * About us poster — the Medium disc reads far too heavy. White is the default; sand is the
 * exception. → the DEFAULT block further up.
 *
 * Selector weight: adding `.ag_section--style_sand` puts each rule one class above its default
 * counterpart ((0,3,1) vs (0,2,1) for the disc, (0,6,0) vs (0,5,0) for the idle glyph), so these
 * win on specificity and not on source order — the file could be re-ordered and they would hold.
 * Same scoping `news.css` already uses for its card button on sand. */
.ag_section--style_sand .ag_collection--arrows button .button--round {
	background-color: var(--Neutrals-Medium-Sand);
}
.ag_section--style_sand .ag_collection--arrows .ag_collection--arrow:not(:hover) .button--round.button--arrow {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%238A8A7E;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%238A8A7E;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.ag_section--style_sand .ag_collection--show_all_button:not(:hover) .ag_collection--grid_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st%7Bfill:none;stroke:%238A8A7E;stroke-width:1.1;%7D %3C/style%3E%3Crect class='st' x='0.55' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='0.55' y='7.05' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='7.05' width='4.4' height='4.4'/%3E%3C/svg%3E");
}
/* Gauge dots, one step darker. Both rules are (0,3,0), so the active one must stay after the idle
	one: it wins on source order. */
.ag_section--style_sand .ag_collection--bullets .swiper-pagination-bullet {
	background-color: var(--Neutrals-Medium-Sand);
}
.ag_section--style_sand .ag_collection--bullets .swiper-pagination-bullet-active {
	background-color: var(--Neutrals-Dark-Sand);
}

/* …and the editor's static mock of the same controls. */
.ag_section--style_sand .ag_collection--preview_button {
	background-color: var(--Neutrals-Medium-Sand);
}
.ag_section--style_sand .ag_collection--preview_arrow {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%238A8A7E;stroke-width:1.1;%7D .st1%7Bfill:none;stroke:%238A8A7E;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;%7D %3C/style%3E%3Cline class='st0' x1='0' y1='6' x2='11.3' y2='6'/%3E%3Cpath class='st1' d='M8.27,9.13L11.34,6L8.27,2.87'/%3E%3C/svg%3E");
}
.ag_section--style_sand .ag_collection--preview_controls .ag_collection--grid_icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12px' height='12px' viewBox='0 0 12 12'%3E%3Cstyle type='text/css'%3E .st%7Bfill:none;stroke:%238A8A7E;stroke-width:1.1;%7D %3C/style%3E%3Crect class='st' x='0.55' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='0.55' width='4.4' height='4.4'/%3E%3Crect class='st' x='0.55' y='7.05' width='4.4' height='4.4'/%3E%3Crect class='st' x='7.05' y='7.05' width='4.4' height='4.4'/%3E%3C/svg%3E");
}


/* ag-products */
/* AG Products block — card styles (P2, 2026-08-22).
   The EX block's five display regimes ported from block-assets/ex-products-apps.css
   (prod_list--* → ag_products--*). The GRID is NOT here: the AG Collection frame owns
   layout (ag_collection--content flex + ag_collection--item widths + gaps), so the old
   container/item_box width rules were deliberately dropped. seo_title-mode rules dropped
   too (P0: 0 placements, dead branch). Registered shared+block → also loads in the
   editor iframe (variables.css is already there at P0; button--* arrow styles are not,
   but the arrow only shows on :hover of a real pointer — invisible in preview). */

/* Card base (regime: default) */
/* =========================== */
.ag_products--item {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	transition: background-color .2s ease, color .2s ease;
	background: var(--Neutrals-White-Sand);
}
a.ag_products--item {
	text-decoration: none;
}
.ag_products--item strong {
	font-weight: 700;
}
.acf-block-component .ag_products--white_bg .ag_products--item {
	border: 1px solid var(--Neutrals-Light-Sand);
}
.ag_products--data {
	position: relative;
	width: 100%;
	flex-grow: 1;
	padding: 32px 32px 42px;
	color: var(--Neutrals-Dark-Grey);
}
.ag_products--container .ag_products--data .ag_products--title {
	font-size: 28px;
	font-style: normal;
	font-weight: 300;
	line-height: 1.2em;
	letter-spacing: -0.03em;
	margin: 0 0 0.4em 0;
	color: var(--Neutrals-Black);
}
.ag_products--data .ag_products--subtitle {
	font-weight: 400;
	line-height: 1.4em;
	margin-bottom: 2em;
}
.ag_products--item .ag_products--description p {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4em;
	margin-bottom: 0.5em;
	color: var(--Neutrals-Dark-Grey);
}
.ag_products--item .ag_products--button {
	display: none;
	position: absolute;
	bottom: 16px;
	right: 16px;
}

.ag_products--image {
	width: 100%;
	padding-top: 62.5%;
	background-size: cover;
	flex-grow: 0;
}

@media (hover: hover) and (pointer: fine) {
	a.ag_products--item:hover {
		background: var(--Neutrals-Light-Sand);
	}
	.ag_products--container a.ag_products--item:hover .ag_products--title {
		color: var(--Neutrals-Black);
	}
	a.ag_products--item:hover .ag_products--button {
		display: block;
	}
}

@media (max-width: 450px) {
	.ag_products--data {
		padding-bottom: 28px;
	}
	.ag_products--data .ag_products--button {
		right: 19px;
	}
}

/* Spec lists inside the description */
.ag_products--container .ag_products--item ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.ag_products--container .ag_products--item ul li {
	position: relative;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2em;
	color: var(--Neutrals-Dark-Grey);
}
.ag_products--container .ag_products--item ul li::before {
	position: absolute;
	content: "";
	left: 0;
	transition: color 0.1s ease;
}

/* List style: bullets */
.ag_products--bullets .ag_products--item ul li {
	padding-left: 32px;
	margin-bottom: 1em;
}
.ag_products--bullets .ag_products--item ul li::before {
	height: 14px;
	width: 14px;
	top: 4px;
	border-radius: 4px;
	background-color: var(--Neutrals-Medium-Sand);
}
@media (hover: hover) and (pointer: fine) {
	.ag_products--bullets .ag_products--item:hover ul li::before {
		background-color: var(--Neutrals-Dark-Sand);
	}
}

/* List style: points */
.ag_products--points .ag_products--item ul li {
	padding-left: 20px;
	margin-bottom: 0.4em;
}
.ag_products--points .ag_products--item ul li::before {
	height: 8px;
	width: 8px;
	top: 7px;
	border-radius: 2px;
	background-color: var(--Neutrals-Sand);
}
@media (hover: hover) and (pointer: fine) {
	.ag_products--points .ag_products--item:hover ul li::before {
		background-color: var(--Neutrals-Dark-Sand);
	}
}

/* Background color */
.ag_products--white_bg .ag_products--item {
	background: var(--Neutrals-White);
}

/* Regime: horizontal (full-width rows — collection columns_1) */
/* =========================================================== */
.ag_products--mode_horizontal .ag_products--item {
	flex-direction: row;
	align-items: stretch;
	flex-wrap: nowrap;
}
.ag_products--mode_horizontal .ag_products--data {
	width: 10%;
	flex-grow: 1;
	order: 2;
	padding: 32px 32px 42px 60px;
}
.ag_products--mode_horizontal.ag_products--container .ag_products--title {
	font-size: 42px;
	margin-bottom: 0.2em;
}
.ag_products--mode_horizontal .ag_products--subtitle {
	font-size: 18px;
	margin-bottom: 1.4em;
}
.ag_products--mode_horizontal .ag_products--image {
	width: auto;
	height: 100%;
	flex-grow: 1;
	padding-top: 0;
	order: 1;
	background-position: center;
}

@media (max-width: 1024px) {
	.ag_products--mode_horizontal.ag_products--container .ag_products--title {
		font-size: 28px;
		margin-bottom: 0.4em;
	}
	.ag_products--mode_horizontal .ag_products--subtitle {
		font-size: inherit;
		margin-bottom: 1.8em;
	}
}
@media (max-width: 768px) {
	.ag_products--mode_horizontal .ag_products--data {
		padding: 32px 32px 42px 36px;
	}
}
@media (max-width: 650px) {
	.ag_products--mode_horizontal .ag_products--item {
		flex-direction: column;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	.ag_products--mode_horizontal .ag_products--data {
		width: 100%;
		flex-grow: 1;
		order: 1;
		padding: 32px 32px 42px 32px;
	}
	.ag_products--mode_horizontal.ag_products--container .ag_products--title {
		margin-bottom: 0.6em;
	}
	.ag_products--mode_horizontal .ag_products--image {
		width: 100%;
		height: auto;
		flex-grow: 0;
		padding-top: 62.5%;
		order: 2;
	}
}

/* Regime: compact — the default card minus description and image (owner ruling
   2026-08-22): same hover/background/button behaviour, title + subtitle only. Rides the
   default rules with its own rhythm — tighter data padding, larger title, the subtitle
   padded right to clear the arrow button and its bottom gap dropped (nothing follows it);
   ≤768px tightens the title and the collection gap. */
/* ================================================================================ */
.ag_products--mode_compact .ag_products--data {
	padding: 24px 32px;
}
.ag_products--mode_compact.ag_products--container .ag_products--data .ag_products--title {
	font-size: 32px;
}
.ag_products--mode_compact .ag_products--data .ag_products--subtitle {
	padding-right: 32px;
	margin-bottom: 0;
}
@media (max-width: 768px) {
.ag_products--mode_compact.ag_products--container .ag_products--data .ag_products--title {
	font-size: 28px;
}
.ag_products--mode_compact .ag_collection--content {
	gap: 20px;
}
}
/* Regime: cat_compact (the home-page tiles) */
/* ========================================= */
.ag_products--mode_home .ag_products--item {
	display: block;
	position: relative;
}
.ag_products--mode_home .ag_products--data {
	padding: 18px 24px;
	position: absolute;
	bottom: 0;
	background: linear-gradient(320deg, #0F9129 0%, #00413C 100%);
}
.ag_products--mode_home.ag_products--container .ag_products--title {
	font-size: 20px;
	font-weight: 300;
	letter-spacing: -0.01em;
	margin-bottom: 0;
	color: var(--Neutrals-White);
}
.ag_products--mode_home .ag_products--button {
	bottom: 22px;
}
@media (hover: hover) and (pointer: fine) {
	.ag_products--mode_home.ag_products--container a.ag_products--item:hover .ag_products--title {
		color: var(--Neutrals-White);
	}
}
@media (max-width: 450px) {
	.ag_products--mode_home.ag_products--container .ag_products--title {
		font-weight: 400;
	}
}

/* Regime: cat_full (the catalog cards) */
/* ==================================== */
.ag_products--mode_catalog.ag_products--container .ag_products--title {
	margin-bottom: 1em;
}
.ag_products--mode_catalog .ag_products--item ul li {
	font-size: 16px;
	line-height: 1.3em;
	margin-bottom: 0.7em;
}
.ag_products--mode_catalog.ag_products--bullets .ag_products--item ul li::before {
	top: 3px;
}
.ag_products--mode_catalog.ag_products--points .ag_products--item ul li::before {
	top: 6px;
}
.ag_products--mode_catalog .ag_products--image {
	padding-top: 38%;
	background-position: center 10%;
}
@media (max-width: 450px) {
	.ag_products--mode_catalog .ag_products--data {
		padding: 24px 24px 42px;
	}
}


/* ag-section */
/* AG Section — Group-like container block (header fields + InnerBlocks).
 */

.ag_section--container {
	margin: 24px 0 28px;
}
.ag_section--container.ag_section--style_white {
	margin: 62px 0 28px;
	background-color: var(--Neutrals-White);
}
/* ⚠ `:not(.ag_section--wide)` on all three .page--home rules (here + the 768/450 media
	queries). They are (0,3,0), the same as the wide rule below, and they sit LATER in the file,
	so without this exclusion a "White wide" section on the homepage would take the hero gap
	back AND lose its bleed — the shorthand margin resets left/right on the tie. Excluding is
	better than out-ordering: it survives future edits to either rule. */
.page--home .ag_section--container.ag_section--style_white:not(.ag_section--wide) {
	margin: 122px 0 106px;
}
/* "White wide" — flush full-bleed white band.
	⚠ TOP/BOTTOM LONGHANDS ONLY, never `margin: 0` / `padding: 28px 0`. Left and right belong
	to the breakout below, which is also (0,3,0) — a shorthand here would reset them on a tie
	and the band would silently stop bleeding. Background comes from .ag_section--style_white. */
.ag_section--container.ag_section--style_white.ag_section--wide {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 28px;
	padding-bottom: 28px;
}
.ag_section--container.ag_section--style_sand {
	margin-top: 0;      /* flush band; left/right come from the .section--full_width breakout */
	margin-bottom: 0;
	padding: 62px 0 62px;
	background-color: var(--Neutrals-White-Sand);
}

/* Content column; max-width = editor-safe fallback (no layout.css in the iframe). */
.ag_section--inner {
	max-width: 1290px;
	margin-left: auto;
	margin-right: auto;
}

/* In-column (any .section--viewport ancestor): inherit the host column width instead of
	re-imposing the fixed 1290px viewport. Full-bleed gets its own handling below. */
.section--viewport .ag_section--container:not(.section--full_width) .ag_section--inner {
	width: 100%;
}

/* In-column full-bleed (Sand wide / White wide): breakout margins bleed the band; the
	complementary percentage padding (the ag_collection--full_screen recipe) re-aligns the
	content box to the host column; the inner fills it. Top/bottom padding stays with the style.

	Either class triggers it. `ag_section--wide` is what the ACF style values carry ("White
	wide" / "Sand wide"); `section--full_width` is the older theme helper, kept so a block that
	was given it by hand in Additional CSS classes still bleeds. Both, or either, works.

	⚠ The margin pair is RESTATED here rather than left to layout.css:40. That rule only matches
	`.section--full_width`, so a block carrying just `ag_section--wide` would get the
	complementary padding with no breakout — content inset twice and no bleed at all. Restating
	also makes this block self-contained, so the bleed no longer depends on a layout.css rule
	whose selector it does not control.

	⚠ `var(--Scroll-Width, 0px)` — the variable is written to :root by global.js at runtime, so
	it is ABSENT in the block-editor iframe. Without the fallback the whole calc() is invalid
	there and the declaration is dropped (ag-ribbon.css:130 sets the same precedent).

	⚠ Requires a `.section--viewport` ancestor, which supplies the `100%` these calcs measure
	against. The editor canvas has none, so a wide section previews as a normal one — the same
	divergence Sand already has, and why ag-section-admin.css fakes the gaps. */
.section--viewport .ag_section--container:is(.section--full_width, .ag_section--wide) {
	width: auto;
	margin-left: calc((100% - 100vw + var(--Scroll-Width, 0px)) / 2);
	margin-right: calc((100% - 100vw + var(--Scroll-Width, 0px)) / 2);
	padding-left: calc((100vw - var(--Scroll-Width, 0px) - 100%) / 2);
	padding-right: calc((100vw - var(--Scroll-Width, 0px) - 100%) / 2);
}
.section--viewport .ag_section--container:is(.section--full_width, .ag_section--wide) .ag_section--inner {
	width: 100%;
}

/* Header — homepage catalog values (.catalog--*). */
.ag_section--header {
	margin-bottom: 36px;
}
.ag_section--subtitle {
	margin-bottom: 10px;
	color: var(--Neutrals-Dark-Grey);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ag_section--title_wrap {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.ag_section--header .ag_section--title {
	margin: 0;
	color: var(--Neutrals-Dark-Grey);
	font-size: 48px;
	font-weight: 300;
	font-style: normal;
	line-height: 1.15;
	letter-spacing: -0.04em;
}
.ag_section--title_large .ag_section--header .ag_section--title {
	font-size: 56px;
	letter-spacing: -0.05em;
}
.ag_section--title_link {
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: 2.5em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--Neutrals-Dark-Grey);
	outline: none;
	text-decoration: none;
}

.ag_section--footer {
	display: none;
	text-align: center;
	margin-top: 16px;
}

@media (max-width: 1024px) {
	.ag_section--container.ag_section--style_white { margin: 48px 0 28px; }
	.ag_section--container.ag_section--style_sand { padding: 48px 0 48px; }
}
@media (max-width: 768px) {
	.page--home .ag_section--container.ag_section--style_white:not(.ag_section--wide) { margin: 112px 0 96px; }
	.ag_section--header { margin-bottom: 32px; }
	.ag_section--header .ag_section--title { font-size: 38px; }
	.ag_section--title_large .ag_section--header .ag_section--title { font-size: 52px; }
	.ag_section--subtitle { font-size: 13px; }
}
@media (max-width: 600px) {
	.ag_section--title_wrap .ag_section--title_link { display: none; }
	.ag_section--footer { display: block; }
}
@media (max-width: 450px) {
	.ag_section--container.ag_section--style_white { margin: 42px 0 28px; }
	.page--home .ag_section--container.ag_section--style_white:not(.ag_section--wide) { margin: 92px 0 76px; }
	.ag_section--container.ag_section--style_sand { padding: 36px 0 36px; }
	.ag_section--subtitle { margin-bottom: 6px; }
	.ag_section--header .ag_section--title { font-size: 38px; }
	.ag_section--title_large .ag_section--header .ag_section--title { font-size: 48px; }
}


/* ag-apps-catalog */
/* AG Applications Catalog (acf/ag-apps-catalog) — the two-column industrial / scientific
 * card pair. Self-contained: this is the ONLY stylesheet the block needs, and it depends on
 * no page-level wrapper.
 *
 * Loaded shared+block, so it applies on the front AND inside the block editor.
 *
 * ⚠ EDITOR PARITY. The editor iframe loads only shared+block CSS — elements.css and
 * wp-blocks.css are frontend-only and absent there ([[editor-iframe-lacks-elements-css]]).
 * Every property this block used to inherit from them is therefore restated below and
 * marked [inherited]. Each restated value is the one that actually wins on the front, so
 * the front render is unchanged and the editor now matches it.
 *
 * Namespace: ag_apps_catalog--*. The legacy EX Applications Catalog block it replaced was
 * retired on 2026-07-26 — its registration, twig and all apps_catalog--* rules (which had
 * been duplicated across ex-products-apps.css, ex-products.css and ex-home.css) are gone.
 */

/* Layout — gap-controlled.
   The retiring EX block spaces its cards with a negative-margin gutter (-15px on the row,
   +15px padding on each box) plus a 30px padding-bottom for row spacing. That pattern
   assumes the row can overflow its parent by 15px on each side, which does not hold in the
   block-editor canvas — there the row is clamped and the columns collapse. `gap` needs no
   overflow, so it behaves the same in both contexts.
   Equivalence with the old gutter: 2 x calc(50% - 15px) + 30px gap = 100%, outer edges flush
   with the parent, 30px between wrapped rows, and the 30px that used to sit under the last
   row is kept as `margin-bottom` on the row — deliberately outside the box (owner ruling
   2026-07-26), so it collapses against a following sibling's margin instead of stacking on
   top of it. */
.ag_apps_catalog--categories_list {
   display: flex;
   align-items: stretch;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 30px;
   margin-top: 26px;
	margin-bottom: 30px;
}
.ag_apps_catalog--category_box {
   flex: 0 0 auto;
   width: calc(50% - 15px);
}

.ag_apps_catalog--category {
   position: relative;
   width: 100%;
   height: 100%;
   padding: 48px 48px 80px 48px;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}
.ag_apps_catalog--industrial .ag_apps_catalog--category {
   background-color: var(--Primary-Light-Green); 
   /* 
   <svg width="800px" height="800px" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g id="industrial">
            <linearGradient id="industrial_1" gradientUnits="userSpaceOnUse" x1="719.5345" y1="856.3425" x2="80.4655" y2="-56.3426">
               <stop  offset="0" style="stop-color:#006432"/>
               <stop  offset="1" style="stop-color:#19AF23"/>
            </linearGradient>
            <rect style="fill:url(#industrial_1);" width="800" height="800"/>
            
            <linearGradient id="industrial_2" gradientUnits="userSpaceOnUse" x1="512.603" y1="668.639" x2="29.8042" y2="-20.8692">
               <stop  offset="0" style="stop-color:#282819;stop-opacity:0.1"/>
               <stop  offset="1" style="stop-color:#282819;stop-opacity:0"/>
            </linearGradient>
            <path style="fill:url(#industrial_2);" d="M0,0v800h325L649,0H0z"/>
         </g>
   </svg>
   */
   background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='industrial'%3E%3ClinearGradient id='industrial_1' gradientUnits='userSpaceOnUse' x1='719.5345' y1='856.3425' x2='80.4655' y2='-56.3426'%3E%3Cstop offset='0' style='stop-color:%23006432'/%3E%3Cstop offset='1' style='stop-color:%2319AF23'/%3E%3C/linearGradient%3E%3Crect style='fill:url(%23industrial_1);' width='800' height='800'/%3E%3ClinearGradient id='industrial_2' gradientUnits='userSpaceOnUse' x1='512.603' y1='668.639' x2='29.8042' y2='-20.8692'%3E%3Cstop offset='0' style='stop-color:%23282819;stop-opacity:0.1'/%3E%3Cstop offset='1' style='stop-color:%23282819;stop-opacity:0'/%3E%3C/linearGradient%3E%3Cpath style='fill:url(%23industrial_2);' d='M0,0v800h325L649,0H0z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.ag_apps_catalog--scientific .ag_apps_catalog--category {
   background-color: var(--Secondary-Blue); 
   /* 
   <svg width="800px" height="800px" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
         <g id="scientific">
               <linearGradient id="scientific_1" gradientUnits="userSpaceOnUse" x1="719.5345" y1="856.3425" x2="80.4655" y2="-56.3426">
               <stop  offset="0" style="stop-color:#006432"/>
               <stop  offset="1" style="stop-color:#3882A6"/>
            </linearGradient>
            <rect style="fill:url(#scientific_1);" width="800" height="800"/>
            
            <linearGradient id="scientific_2" gradientUnits="userSpaceOnUse" x1="512.603" y1="668.639" x2="29.8042" y2="-20.8692">
               <stop  offset="0" style="stop-color:#282819;stop-opacity:0.1"/>
               <stop  offset="1" style="stop-color:#282819;stop-opacity:0"/>
            </linearGradient>
            <path style="fill:url(#scientific_2);" d="M0,0v800h325L649,0H0z"/>
         </g>
   </svg>
   */
   background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='scientific'%3E%3ClinearGradient id='scientific_1' gradientUnits='userSpaceOnUse' x1='719.5345' y1='856.3425' x2='80.4655' y2='-56.3426'%3E%3Cstop offset='0' style='stop-color:%23006432'/%3E%3Cstop offset='1' style='stop-color:%233882A6'/%3E%3C/linearGradient%3E%3Crect style='fill:url(%23scientific_1);' width='800' height='800'/%3E%3ClinearGradient id='scientific_2' gradientUnits='userSpaceOnUse' x1='512.603' y1='668.639' x2='29.8042' y2='-20.8692'%3E%3Cstop offset='0' style='stop-color:%23282819;stop-opacity:0.1'/%3E%3Cstop offset='1' style='stop-color:%23282819;stop-opacity:0'/%3E%3C/linearGradient%3E%3Cpath style='fill:url(%23scientific_2);' d='M0,0v800h325L649,0H0z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.ag_apps_catalog--title {
   display: block;
   text-decoration: none;
	outline: none;
	font-weight: 600;
}
.ag_apps_catalog--title h3 {
   font-weight: 300;
   font-style: normal;
   font-size: 32px;
   line-height: 1.2em;
   letter-spacing: -0.02em;
   color: var(--Neutrals-White);
   margin-bottom: 16px;
}
.ag_apps_catalog--button_container {
   position: absolute;
   width: 80px;
   height: 80px;
   bottom: 0;
   right: 0;
}
.ag_apps_catalog--title .ag_apps_catalog--button {
   position: absolute;
   right: 24px;
   bottom: 24px;
   display: none;
}

.ag_apps_catalog--category p {
   /* [inherited] elements.css `p` (size/weight/line-height) + wp-blocks.css margin-bottom. */
   font-size: 16px;
   font-weight: 400;
   font-style: normal;
   line-height: 1.5em;
   margin-bottom: 1em;
   color: var(--Neutrals-White);
   opacity: 0.8;
}

.ag_apps_catalog--category ul {
   /* [inherited] elements.css `ul` reset — without it the editor shows browser bullets
      and default indentation. */
   list-style: none;
   padding: 0;
   margin: 0;
   margin-top: 48px;
}
.ag_apps_catalog--category ul li {
   /* [inherited] elements.css `ul li {position:relative}` — LOAD-BEARING: the round icon
      below is absolutely positioned against the <li>. Without it the icons collapse onto
      the card's own box (the nearest positioned ancestor) and stack on top of each other. */
   position: relative;
   min-height: 40px;
   padding-left: 0;
   margin-bottom: 0;
   margin-top: 24px;
   display: flex;
   align-items: center;
}
.ag_apps_catalog--category ul li:before {
   display: none;
}
.ag_apps_catalog--category li a {
   /* [inherited] elements.css `a` — the editor would otherwise underline these. */
   text-decoration: none;
   transition: color 0.2s ease;
   padding-left: 64px;
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: 1.3em;
   letter-spacing: 0.005em;
   color: var(--Neutrals-White);
}
.ag_apps_catalog--category li a:before {
   position: absolute;
   content: "";
   height: 40px;
   width: 40px;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   border: 1px solid rgba(255, 255, 255, 0.06); 
   background-color: rgba(255, 255, 255, 0.05);
   background-position: center;
   background-repeat: no-repeat;
   background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.0;stroke-linecap:round;%7D %3C/style%3E%3Cline class='st0' x1='12.3' y1='10' x2='18.3' y2='10'/%3E%3Cline class='st0' x1='1.7' y1='10' x2='7.7' y2='10'/%3E%3Cline class='st0' x1='10' y1='7.7' x2='10' y2='1.7'/%3E%3Cline class='st0' x1='10' y1='18.3' x2='10' y2='12.3'/%3E%3Cline class='st0' x1='11.7' y1='8.3' x2='13.6' y2='6.4'/%3E%3Cline class='st0' x1='6.5' y1='13.6' x2='8.3' y2='11.7'/%3E%3Cline class='st0' x1='8.4' y1='8.3' x2='6.4' y2='6.5'/%3E%3Cline class='st0' x1='13.6' y1='13.5' x2='11.7' y2='11.7'/%3E%3C/svg%3E");
   backdrop-filter: blur(60px); 
}


@media (hover: hover) and (pointer: fine) {
   .ag_apps_catalog--title:hover .ag_apps_catalog--button {
      display: block;
   }
   .ag_apps_catalog--category li a:hover::before {
      border-color: rgba(255, 255, 255, 0.7); 
      background-color: rgba(255, 255, 255, 0.15);
   }
}

@media (max-width: 1024px) {
   .ag_apps_catalog--category {
      padding: 36px 36px 64px 36px;
   }
   .ag_apps_catalog--category li a {
      font-size: 18px;
   }
}
/* Stacked below 767px.
   The retired block split this across two files — a 650px width rule in
   ex-products-apps.css plus a 767px override in ex-home.css that also switched the row to
   `display:block`. The 767px pair was what actually rendered on the home page, so it is
   folded in here as the single breakpoint. */
@media (max-width: 767px) {
   .ag_apps_catalog--category_box {
      width: 100%;
   }
}
@media (max-width: 450px) {
   .ag_apps_catalog--category {
      padding: 32px 32px 64px;
   }
}


/* Editor only (.acf-block-component).
   1. Every card title and list entry is a link — `pointer-events` keeps a click selecting
      the block instead of navigating the editor away from the post.
   2. The block canvas is narrower than the real viewport, so the 767px media query above
      fires there and collapses the two columns to a stack even on a wide screen. This
      restates the two-column width at a higher specificity than the media-query rule, so
      the editor always previews the desktop layout it will actually ship as.
   3. [inherited] elements.css opens with `* { box-sizing: border-box; margin: 0 }` and is
      registered frontend-only (`add_style('ex-elements', …, ['priority' => 1])`, no admin or
      block flag), so the editor iframe gets neither. Without border-box the card's
      48px/80px padding is ADDED to its `width:100%` and height — it overruns its column to
      the right, swallowing the 30px gap, and spills past the block outline below. Scoped to
      this block's own subtree so nothing leaks into other editor content.
   4. Same missing reset: the browser's default TOP margins on h3/p come back in the editor
      and push the card text down. Deliberately NOT done with a `* { margin: 0 }` — that
      selector outranks the restated margins above and would flatten them all. */
.acf-block-component .ag_apps_catalog--title,
.acf-block-component .ag_apps_catalog--category li a {
   pointer-events: none;
}
.acf-block-component .ag_apps_catalog--category_box {
   width: calc(50% - 15px);
}
.acf-block-component .ag_apps_catalog--categories_list,
.acf-block-component .ag_apps_catalog--categories_list * {
   box-sizing: border-box;
}
.acf-block-component .ag_apps_catalog--title h3,
.acf-block-component .ag_apps_catalog--category p {
   margin-top: 0;
}


/* ex-datasheets */
/**
 * AG Datasheets — card visuals.
 *
 * The FRAME is not here: since the 2026-09-08 remaster the block renders on the AG
 * Collection wrapper, so the grid, the column widths, the gaps and the show-all /
 * load-more / scroll controls all come from
 * library/services/collections/collection.css. This file styles the card only.
 *
 * ⚠ The card root is ONE element carrying both `datasheets--item` (its own visuals)
 * and `ag_collection--item` (its width). Pre-remaster these were nested
 * (`.datasheets--item > a.datasheets--link`), which is why the old descendant
 * selectors are gone — do not reintroduce them.
 *
 * ⚠ Column breakpoints now follow the collection (3 → 2 at 1066px → 1 at 768px),
 * not this file's former 1024/630 pair.
 */


.datasheets--container {
	margin-top: 26px;
	margin-bottom: 18px;
}


/* The card — root element, also the collection item. */
.datasheets--item.datasheets--link {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	padding: 32px 32px 28px 32px;
	color: var(--Neutrals-Grey);
	background: var(--Neutrals-White-Sand);
	transition: background-color 0.3s ease 0s;
	outline: none;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.datasheets--link .datasheets--title {
	flex-grow: 0;
	font-size: 24px;
	font-style: normal;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin-top: 0;
	margin-bottom: 12px;
	color: var(--Neutrals-Black);
}

/* The description is a wysiwyg: it brings its own <p>, which fills the card so the
   props row and the button stay pinned to the bottom. */
.datasheets--link p {
	flex-grow: 1;
	margin-top: 0;
	margin-bottom: 16px;
	color: var(--Neutrals-Grey);
}

.datasheets--link .datasheets--props {
	flex-grow: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	margin-top: 24px;
	padding-right: 48px;
	color: var(--Neutrals-Grey);
}
.datasheets--link .datasheets--props > * {
	vertical-align: middle;
}
.datasheets--link .datasheets--props img {
	display: inline-block;
	margin-right: 3px;
	height: 28px;
	width: auto;
	opacity: 0.9;
}
/* Keeps the props row the same height when the filetype has no icon. */
.datasheets--link .datasheets--img_fix {
	display: inline-block;
	margin-right: 0;
	height: 28px;
	width: 0;
}

.datasheets--link .datasheets--button {
	position: absolute;
	bottom: 24px;
	right: 24px;
	opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
	.datasheets--link:hover {
		background-color: var(--Neutrals-Light-Sand);
	}
	.datasheets--link:hover .datasheets--button {
		opacity: 1;
	}
}


@media (max-width: 1080px) {
	.datasheets--item.datasheets--link {
		padding: 28px 28px 24px 28px;
	}
	.datasheets--link .datasheets--button {
		bottom: 20px;
		right: 20px;
	}
}
@media (max-width: 1024px) {
	.datasheets--link .datasheets--props {
		font-size: 14px;
		margin-top: 16px;
	}
}
@media (max-width: 680px) {
	.datasheets--item.datasheets--link {
		padding: 24px 24px 20px 24px;
	}
	.datasheets--link .datasheets--button {
		bottom: 18px;
		right: 18px;
	}
}

/* ⚠ Datasheets bleed to the screen edges on small phones by DEFAULT — this predates
   the collection's own `ag_collection--full_mobile` width option and is what all 60
   placements render today, so it stays block-owned. `datasheets--margins` (an
   editor-set className) opts a placement out. */
@media (max-width: 450px) {
	.datasheets--container {
		margin-left: -24px;
		margin-right: -24px;
	}
	.datasheets--container.datasheets--margins {
		margin-left: 0;
		margin-right: 0;
	}
	.datasheets--container.datasheets--margins .datasheets--wrap {
		row-gap: 20px;
	}
}


/**
 * Editor canvas.
 *
 * The preview card is a <div>, not an <a> (datasheet-card.twig), so nothing is
 * clickable — pointer-events is belt for the frontend markup ACF may still show.
 * ⚠ The iframe has no elements.css, so the title size is restated here rather than
 * inherited.
 */
.acf-block-component .datasheets--link {
	pointer-events: none;
}
.acf-block-component .datasheets--link .datasheets--title {
	font-size: 22px;
}
.acf-block-component .datasheets--link .datasheets--props {
	margin-top: 12px;
}


/* ex-products */
/**
 * Products CPT styles (v2 singles fallback + category pages + catalog unscoped rules).
 * Remaster: relocated from css/ (M8-p1), re-banded P60 (M8-p2), re-scoped
 * .content--product -> .ex--products (M8-p3; M1 ContentClasses provides the class
 * on #content for every products post; the dead :not(.content--product_v3) guard
 * was dropped -- that class was emitted nowhere).
 */
body {
	overflow-anchor: none;
}


/** Headings */
.ex--products :is(h2, .h2) {
	color: var(--Neutrals-Dark-Grey);
	margin-bottom: 40px;
}
.ex--products :is(h3, .h3) {
	margin-bottom: 24px;
}
.ex--products :is(h4, .h4) {
	margin-bottom: 16px;
}
.ex--products :is(h5, .h5) {
	margin-bottom: 8px;
}

@media (max-width: 768px) {
	.ex--products :is(h2, .h2) {
		font-size: 44px;
		margin-bottom: 36px;
	}
}
@media (max-width: 450px) {
	.ex--products :is(h2, .h2) {
		font-size: 40px;
	}
}

/** Paragraphs */
.ex--products p {
	margin-bottom: 1em;
}
.ex--products p.node--narrow {
	max-width: 1024px;
}

/** Lists */
.ex--products ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.ex--products ul li {
	position: relative;
	padding-left: 36px;
	margin-bottom: 1em;
}
.ex--products ul li::before {
	content: "";
	height: 14px;
	width: 14px;
	position: absolute;
	left: 0;
	top: 5px;
	border-radius: 4px;
	background-color: var(--Neutrals-Light-Sand);
}


.ex--products ul ul {
	margin-top: 0.5em;
}
.ex--products ul ul li {
	padding-left: 28px;
	margin-bottom: 0.5em;
}
.ex--products ul ul li::before {
	height: 2px;
	top: 11px;
	border-radius: 1px;
}


.ex--products .features--column h2,
.ex--products .features--column ul li,
.ex--products ul.features--list li {
	color: var(--Primary-Green);
}
.ex--products .features--column ul li::before,
.ex--products ul.features--list li::before {
	background-color: var(--Primary-Light-Green);
}
.ex--products .features--column ul ul li::before,
.ex--products ul.features--list ul li::before {
	background-color: var(--Primary-Green);
}





.ex--products ol:not(.table--footnotes) {
	padding: 0;
	margin: 20px 0 0 0;
	list-style: none;
	counter-reset: ex-products-counter;
}
	.ex--products ol:not(.table--footnotes) li {
		position: relative;
		padding-left: 1.8em;
		margin-bottom: 0.5em;
		counter-increment: ex-products-counter;
	}
	.ex--products ol:not(.table--footnotes) li::before {
		content: counter(ex-products-counter) ". ";
		position: absolute;
		left: 0;
	}



/** Links */

.ex--products .links--thin a {
	text-decoration: underline dotted 1px;
	font-weight: 400;
}
/** ========= DEPRECIATE ========== */
.ex--products a {
	/* text-decoration: underline dotted 1px; */
	/** background-color: transparent; */
	color: var(--Neutrals-Dark-Grey);
}
@media (hover: hover) {
	.ex--products a:hover {
		text-decoration: none;
		color: var(--Primary-Light-Green);
	}
}

/* (margin-- spacing utils retired at U1 margin-unify — content renamed to the
	global bottom--/top-- utils in elements.css.) */

/** Hide content */
@media (max-width: 1024px) {
	.ex--products .hide--1024 {
		display: none;
	}
}


/** WP blocks */
.ex--products .wp-block-columns {
	gap: 80px;
}
.ex--products .wp-block-columns > .wp-block-column {
	flex-basis: 30% !important;
}
.ex--products .wp-block-columns.columns--double_list .wp-block-column:last-child {
	padding-top: 92px;
}
@media (max-width: 1024px) {
	.ex--products .wp-block-columns.columns--text_image {
		flex-wrap: wrap !important;
		gap: 48px;
	}
	.ex--products .wp-block-columns.columns--text_table,
	.ex--products .wp-block-columns.columns--table_table {
		flex-wrap: wrap !important;
		gap: 24px;
	}
	.ex--products .columns--text_image .wp-block-column,
	.ex--products .columns--text_table .wp-block-column,
	.ex--products .columns--table_table .wp-block-column {
		flex-basis: 100% !important;
	}
	.ex--products .wp-block-columns.columns--swap .wp-block-column:last-child {
		order: 1;
	}
	.ex--products .wp-block-columns.columns--swap .wp-block-column:first-child {
		order: 2;
	}
}

@media (max-width: 781px) {}

@media (max-width: 768px) {
	.ex--products .wp-block-columns {
		flex-wrap: wrap !important;
		gap: 0;
	}
	.ex--products .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
	.ex--products .wp-block-columns.columns--list_list {
		gap: 54px;
	}
	.ex--products .wp-block-columns.columns--text_image {
		gap: 32px;
	}
	.ex--products .wp-block-columns.columns--double_list {
		gap: 0;
	}
	.ex--products .wp-block-columns.columns--double_list .wp-block-column:last-child {
		padding-top: 0;
	}
}

@media (max-width: 450px) {
	.ex--products .wp-block-columns.columns--text_image {
		gap: 24px;
	}
}


/** WP spacer lowering for small sizes */
@media (max-width: 768px) {
	.ex--products .wp-block-spacer[style="height:60px"] {
		height: 40px !important;
	}
}

    
/** DEPRECIATE ??? Features block */    
.ex--products .features--bullets ul li::before {
	background-color: var(--Primary-Middle-Green);
}
.ex--products ul.features--bullets li::before {
	background-color: var(--Primary-Green);
}


.ex--products .features--block .wp-block-group {
	margin: -40px;
	width: calc(100% + 80px);
	height: calc(100% + 80px);
	border-radius: 20px;
	background-color: var(--Neutrals-White-Sand);
	background-image: url("https://ekspla.com/wp-content/themes/ekspla/images/apps-category-features.svg"); /* path fixed for library/products/ (remaster M8-p1); combiner rewrites to absolute either way */
	background-size: cover;
}
.ex--products .features--block .wp-block-group__inner-container {
	padding: 40px;
}
.ex--products .features--block ul li::before {
	background-color: var(--Neutrals-Dark-Sand);
}



/** 
 *  Header block 
 */

.section--product_head {
	padding-top: 48px;
	padding-bottom: 48px;
	background: var(--Gradient-Product);
}
@media (max-width: 1024px) {
	.section--product_head {
		padding-top: 36px;
		padding-bottom: 36px;
	}
}
@media (max-width: 550px) {
	.section--product_head {
		padding-bottom: 0;
	}
}
@media (max-width: 450px) {
	.section--product_head {
		padding-top: 24px;
	}
}

.product--hero {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
	.product--hero_text {
		width: 50%;
		padding-right: 40px;
	}

		/** Breadthumbs */
		.path--container {
			display: inline-flex;
			flex-wrap: wrap;
			gap: 0 6px;
			align-items: center;
			--SVG-Breadcrumbs-Arrow: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 9L7.5 6L4.5 3' stroke='%23C6C6B3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		}
			a.path--item {
				display: inline-block;
				position: relative;
				color: var(--Neutrals-Light-Grey);
				font-size: 14px;
				font-style: normal;
				font-weight: 600;
				line-height: 24px;
				letter-spacing: 0.2px;
				white-space: nowrap;
				text-decoration: none;
				padding-right: 20px;
			}
				a.path--item:not(:last-child)::after {
					position: absolute;
					content: "";
					top: 0;
					right: 0;
					width: 12px;
					height: 24px;
					background-position: center;
					background-repeat: no-repeat;
					background-image: var(--SVG-Breadcrumbs-Arrow);
				}
				a.path--item:last-child {
					padding-right: 0;
				}

			@media (hover: hover) {
				a.path--item:hover {
					color: var(--Neutrals-Dark-Grey);
				}
			}

		.product--hero_text h1 {
			color: var(--Primary-Green);
			margin-top: 36px;
			margin-bottom: 16px;
			line-height: 1;
		}
			.product--hero_text h1 small {
				font-size: 85%;
				letter-spacing: -0.03em;
			}
		.product--hero .product--subtitle {
			color: var(--Neutrals-Dark-Grey);
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 48px;
		}
		.product--hero_buttons {
			margin-top: 48px;
		}

	.product--hero_image {
		width: 50%;
		padding-left: 40px;
	}
		.product--hero_fancy {
			display: block;
		}
		.product--hero_fancy img {
			display: block;
			width: 100%;
			height: auto;
		}

	@media (max-width: 1280px) {
		.product--hero_text {
			padding-right: 25px;
		}
		.product--hero_image {
			padding-left: 25px;
		}
		.product--hero_fancy {
			margin-right: -64px;
		}
		.product--hero_buttons {
			margin-right: -100px;
		}
	}
	@media (max-width: 1024px) {
		.product--hero {
			flex-direction: column;
		}
		.product--hero_text {
			width: 100%;
			padding-right: 0;
			margin-bottom: 60px;
		}
		.product--hero_image {
			width: 100%;
			padding-left: 0;
		}
		.product--hero_fancy {
			margin-right: 0;
		}
		.product--hero_buttons {
			margin-right: 0;
		}
	}
	@media (max-width: 550px) {
		.product--hero_text {
			margin-bottom: 46px;
		}
		.product--hero_fancy {
			margin-left: -32px;
			margin-right: -32px;
		}
		.product--hero_buttons .button--item {
			width: 100%;
		}
		.button--send_request {
			margin-bottom: 16px;
		}
	}
	@media (max-width: 450px) {
		.product--hero_fancy {
			margin-left: -24px;
			margin-right: -24px;
		}
		.product--hero_text h1 {
			font-size: 56px;
		}
		.product--hero_buttons {
			margin-top: 36px;
		}
		.product--hero_image {
			margin-bottom: 12px;
		}
	}
    


/** 
 *  Content block 
 */
.section--product_content {
	margin-bottom: 100px;
}
@media (max-width: 630px) {
	.section--product_content {
		margin-bottom: 80px;
	}
}


/** Categories section */
.section--products_catalog,
.section--apps_catalog {
	margin-top: 74px;
	margin-bottom: 100px;
}
	/* (catalog margin-- utils retired at U1 margin-unify.) */



/** 
 *  Footer block 
 */
.section--product_footer {
	margin-top: 130px;
	background: var(--Neutrals-White-Sand);
}

	@media (max-width: 1024px) {
		.section--product_footer {
			margin-top: 100px;
		}
	}
	@media (max-width: 630px) {
		.section--product_footer {
			margin-top: 80px;
		}
	}


/** Related section */
.section--related {
	padding-top: 94px;
	padding-bottom: 100px;
}