/* 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;
}
.strong--medium strong,
.strong--medium b {
font-weight: 600;
}
/* 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-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-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,") 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;
}
/* ag-tabs-control */
/** Scroll control */
.ag_ctrl--scroll_content {
width: 100%;
overflow-x: scroll;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.ag_ctrl--scroll_content::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.ag_ctrl--scroll_arrow {
position: absolute;
display: none;
width: 40px;
top: 0;
bottom: 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
background: var(--Neutrals-Light-Sand);
}
/* Show an arrow only when there is actually hidden content in that direction
(scroll_visible). Copying the legacy ex-tabs rule: the arrow's solid sand block must
NOT sit over the first/last tab at rest — otherwise, with no title (padding-left:0),
the left arrow masks the first tab (e.g. "ABOUT" -> "OUT"). */
.ag_ctrl--scroll_arrow.ag_ctrl--scroll_visible {
display: block;
}
.ag_ctrl--scroll_arrow::after {
position: absolute;
content: "";
top: 15px;
right: 0;
width: 32px;
height: 32px;
border: none;
border-radius: 16px;
background-color: var(--Neutrals-Sand);
background-position: center;
background-repeat: no-repeat;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-in-out, background-color 0.2s ease;
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");
}
.ag_ctrl--scroll_arrow.ag_ctrl--scroll_visible::after {
opacity: 1;
visibility: visible;
}
.ag_ctrl--scroll_arrow div {
content: "";
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
.ag_ctrl--scroll_arrow.ag_ctrl--scroll_visible > div {
opacity: 1;
visibility: visible;
}
.ag_ctrl--scroll_arrow > div {
left: -100%;
background: linear-gradient(to right, rgba(230,230,215,0), rgba(230,230,215,1));
}
.ag_ctrl--scroll_right {
right: 0;
}
.ag_ctrl--scroll_left {
left: 0;
transform: scaleX(-1);
}
@media (hover: hover) and (pointer: fine) {
.ag_ctrl--scroll_arrow.ag_ctrl--scroll_visible:hover::after {
background-color: var(--Neutrals-White);
}
}
/** AG Tabs Controller */
.ag_ctrl--block {
position: sticky;
width: 100%;
padding-top: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
z-index: 1500;
}
/* Disable all transitions during layout changes (orientation/resize) */
/* Don't disable display property changes for burger menu */
.ag_ctrl--no_transition *:not(.ag_ctrl--tabs_container),
.ag_ctrl--no_transition *::before,
.ag_ctrl--no_transition *::after {
transition: none !important;
}
.ag_ctrl--block.ag_ctrl--on_poster:not(.ag_ctrl--burger_mode ) {
margin-top: -64px;
}
.ag_ctrl--sticked .ag_ctrl--block {
padding-top: 64px;
}
.ag_ctrl--sticked .ag_ctrl--block.ag_ctrl--title_top {
padding-top: 107px;
}
.ag_ctrl--shadow {
position: fixed;
top: 117px;
width: 100%;
height: 10px;
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.4);
display: none;
z-index: 1400;
}
.ag_ctrl--title_top .ag_ctrl--shadow {
top: 160px;
}
.ag_ctrl--sticked:not(.ag_table--sticked) .ag_ctrl--shadow {
display: block;
}
.ag_ctrl--container {
background: var(--Neutrals-Light-Sand);
z-index: 1500;
overflow: hidden;
width: 100%;
max-width: calc(100vw - var(--Scroll-Width, 0px));
top: 64px;
height: 64px;
}
/* Allow burger dropdown to be visible */
.ag_ctrl--burger_mode .ag_ctrl--container {
overflow: visible;
}
/* Prevent overflow on very narrow screens */
@media (max-width: 500px) {
.ag_ctrl--container {
max-width: 100%;
overflow: hidden;
}
.ag_ctrl--burger_mode .ag_ctrl--container {
overflow: visible;
}
}
.ag_ctrl--block.ag_ctrl--title_top .ag_ctrl--container {
height: 107px;
}
.ag_ctrl--sticked .ag_ctrl--container {
position: fixed;
}
body:not(.ag_ctrl--sticked) .ag_ctrl--ribbon_white .ag_ctrl--container {
background: var(--Neutrals-White);
}
/* Tabs controller sections */
.ag_ctrl--content {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
position: relative;
max-width: 100%;
/* overflow: hidden; */
}
.ag_ctrl--title_top .ag_ctrl--content {
flex-wrap: wrap;
}
/* Allow burger dropdown overflow on narrow screens */
@media (max-width: 500px) {
.ag_ctrl--burger_mode .ag_ctrl--content {
overflow: visible;
}
}
/* Title section */
.ag_ctrl--title {
display: none;
flex: 0 0 auto;
padding: 17px 44px 21px 0;
font-size: 26px;
font-weight: 300;
font-style: normal;
line-height: 26px;
letter-spacing: -0.02em;
white-space: nowrap;
color: var(--Neutrals-Black);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.ag_ctrl--title_ribbon .ag_ctrl--title {
display: block;
}
.ag_ctrl--title_ribbon.ag_ctrl--ready .ag_ctrl--title {
visibility: visible;
opacity: 1;
}
.ag_ctrl--title_top .ag_ctrl--title {
padding-bottom: 0;
width: 100%;
}
/* Tabs section, scrolled */
.ag_ctrl--tabs_container {
display: none;
flex: 1 1 auto;
position: relative;
min-width: 0;
visibility: hidden;
opacity: 0;
padding-left: 40px;
padding-right: 40px;
}
/* Enable smooth width transitions for tabs when CTA animates - only after ready */
.ag_ctrl--ready.ag_ctrl--cta_transition .ag_ctrl--tabs_container {
transition: flex-basis var(--cta-transition-time, 300ms) ease-in-out,
opacity 0.2s ease-in-out;
}
.ag_ctrl--tabs_ribbon .ag_ctrl--tabs_container {
display: block;
}
.ag_ctrl--tabs_ribbon.ag_ctrl--ready .ag_ctrl--tabs_container {
visibility: visible;
opacity: 1;
}
.ag_ctrl--tabs_ribbon:not(.ag_ctrl--title_ribbon) .ag_ctrl--tabs_container {
padding-left: 0;
}
.ag_ctrl--tabs {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
}
.ag_ctrl--tab_item {
display: block;
flex: 0 0 auto;
padding: 20px 18px;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 24px;
letter-spacing: 0.08em;
text-decoration: none;
/* color: var(--Neutrals-Light-Grey); */
color: var(--Neutrals-Medium-Grey);
white-space: nowrap;
text-transform: uppercase;
transition: color 0.2s ease;
}
/* No title: pull the first tab flush to the content boundary (aligns with the page H1
below). Mirrors ex-tabs .ex_ctrl--tab_first. */
.ag_ctrl--tabs_ribbon:not(.ag_ctrl--title_ribbon) .ag_ctrl--tab_item.ag_ctrl--tab_first {
padding-left: 2px;
}
.ag_ctrl--block .ag_ctrl--tab_item {
/* color: var(--Neutrals-Light-Grey); */
color: var(--Neutrals-Medium-Grey);
}
.ag_ctrl--tab_item.ag_ctrl--item_active {
/* color: var(--Neutrals-Black); */
/* color: var(--Primary-Dark-Green); */
color: var(--Black);
}
.ag_ctrl--tab_item.ag_ctrl--link_cta {
display: none;
padding-top: 8px;
padding-bottom: 8px;
}
/* CTA link only visible in burger mode, not in ribbon mode */
.ag_ctrl--cta_burger .ag_ctrl--link_cta {
display: block;
}
.ag_ctrl--cta_burger .ag_ctrl--link_cta .button--send_request {
margin: 0;
}
.ag_ctrl--cta_burger .ag_ctrl--tab_item.ag_ctrl--link_cta {
padding: 15px 12px 13px;
text-align: center;
}
@media (hover: hover) and (pointer: fine) {
.ag_ctrl--tab_item:hover {
color: var(--Light-Green);
}
/* .ag_ctrl--tab_item.ag_ctrl--item_active:hover {
color: var(--Neutrals-Black);
} */
}
/* Burger section */
.ag_ctrl--burger_container {
display: none;
flex: 1 1 auto;
position: relative;
width: 10%;
cursor: pointer;
}
.ag_ctrl--burger_mode .ag_ctrl--burger_container {
display: flex;
justify-content: flex-end;
flex-wrap: nowrap;
}
.ag_ctrl--burger_target {
flex: 1 1 auto;
width: 100%;
}
.ag_ctrl--burger_target {
padding: 20px 0 20px 0;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 24px;
letter-spacing: 0.08em;
white-space: nowrap;
text-transform: uppercase;
color: var(--Neutrals-Black);
}
.ag_ctrl--title_ribbon .ag_ctrl--burger_target {
text-align: right;
}
.ag_ctrl--title_top .ag_ctrl--burger_target {
text-align: left;
}
.ag_ctrl--burger_target.ag_ctrl--target_dimmed {
color: var(--Neutrals-Medium-Grey);
}
.ag_ctrl--burger_icon {
flex: 0 0 auto;
width: 64px;
padding: 16px 0 16px 32px;
margin-right: -4px;
}
.ag_ctrl--burger_icon span {
display: block;
width: 32px;
height: 32px;
border: none;
border-radius: 16px;
background-color: var(--Neutrals-White);
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='20px' height='20px' viewBox='0 0 20 20'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23282819;%7D %3C/style%3E%3Ccircle class='st0' cx='3.266' cy='10' r='2'/%3E%3Ccircle class='st0' cx='10.223' cy='10' r='2'/%3E%3Ccircle class='st0' cx='16.734' cy='10' r='2'/%3E%3C/svg%3E%0A");
transition: transform .3s ease-in-out 0s;
}
body:not(.ag_ctrl--sticked) .ag_ctrl--ribbon_white .ag_ctrl--burger_icon span {
background-color: var(--Neutrals-Light-Sand);
}
@media (hover: hover) and (pointer: fine) {
.ag_ctrl--burger_container:hover .ag_ctrl--burger_icon span {
background-color: var(--Neutrals-Sand);
}
}
.ag_ctrl--burger_pointer {
display: none;
position: absolute;
height: 15px;
width: 15px;
bottom: 0;
right: 12px;
background-position: center;
background-repeat: no-repeat;
/*
*/
background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15,0L0,15h15V0z' fill='%23F7F6F2'/%3E%3C/svg%3E");
}
.ag_ctrl--burger_open .ag_ctrl--burger_pointer {
display: block;
}
.ag_ctrl--burger_mode .ag_ctrl--tabs_container {
display: none;
position: absolute;
width: auto;
overflow-y: auto;
right: -20px;
top: 64px;
background: var(--Neutrals-White-Sand);
border-radius: 16px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
opacity: 1;
visibility: visible;
}
.ag_ctrl--burger_mode.ag_ctrl--burger_open .ag_ctrl--tabs_container {
display: block;
padding-left: 0;
padding-right: 0;
}
.ag_ctrl--title_top.ag_ctrl--burger_mode .ag_ctrl--tabs_container {
top: 107px;
}
.ag_ctrl--burger_mode .ag_ctrl--tabs_container .ag_ctrl--scroll_arrow {
display: none;
}
.ag_ctrl--burger_mode .ag_ctrl--tabs {
display: block;
overflow: unset;
scrollbar-width: auto;
-ms-overflow-style: unset;
}
.ag_ctrl--burger_mode .ag_ctrl--tabs::-webkit-scrollbar {
display: initial;
}
.ag_ctrl--burger_mode .ag_ctrl--tab_item {
padding: 15px 48px 13px;
}
.ag_ctrl--burger_mode .ag_ctrl--tab_item:not(:first-child) {
border-top: 1px solid var(--Neutrals-Medium-Sand);
}
@media (max-width: 450px) {
.ag_ctrl--burger_icon {
width: 56px;
padding-left: 24px;
}
.ag_ctrl--burger_mode .ag_ctrl--tabs_container {
right: -12px;
}
}
/* CTA section */
.ag_ctrl--cta_container {
flex: 0 0 auto;
padding: 8px 0 8px 0;
max-width: 0;
max-height: 64px;
opacity: 0;
visibility: hidden;
}
.ag_ctrl--burger_mode .ag_ctrl--cta_container {
display: none;
}
/* Enable smooth transitions - only after ready to avoid initial animation */
.ag_ctrl--ready.ag_ctrl--cta_transition .ag_ctrl--cta_container {
transition: max-width var(--cta-transition-time, 300ms) ease-in-out,
opacity var(--cta-transition-time, 300ms) ease-in-out,
padding-left var(--cta-transition-time, 300ms) ease-in-out,
visibility 0s linear var(--cta-transition-time, 300ms);
}
.ag_ctrl--cta_ribbon .ag_ctrl--cta_container {
display: flex;
}
.ag_ctrl--cta_ribbon.ag_ctrl--ready .ag_ctrl--cta_container {
visibility: visible;
}
.ag_ctrl--cta_ribbon.ag_ctrl--cta_visible .ag_ctrl--cta_container {
max-width: 250px;
padding-left: 44px;
opacity: 1;
transition-delay: 0s;
overflow: visible;
}
.ag_ctrl--cta_ribbon .ag_ctrl--cta_container .button--send_request {
margin-right: -6px;
min-width: 150px;
white-space: nowrap;
}
@media (max-width: 900px) {
.ag_ctrl--cta_ribbon.ag_ctrl--cta_visible .ag_ctrl--cta_container {
max-width: 220px;
}
}
/* Force hide tabs and CTA in ribbon on narrow screens to prevent distortion */
@media (max-width: 500px) {
.ag_ctrl--tabs_ribbon .ag_ctrl--tabs_container,
.ag_ctrl--cta_ribbon .ag_ctrl--cta_container {
display: none !important;
}
}
/* ── Hide Title on Mobile (ACF `settings > hide_title_on_mobile`) ─────────────────────────
When the burger row cannot hold title + label side by side, the ribbon drops the title
from the bar instead of going two-line, and shows it as the first dropdown row. The
two-line layout stays as the last resort — see AG_RibbonController.resolveTitleMode(). */
/* (0,3,0) so it beats `.ag_ctrl--title_ribbon .ag_ctrl--title { display: block }` (0,2,0)
on specificity rather than on source order. */
.ag_ctrl--block.ag_ctrl--title_hidden .ag_ctrl--title { display: none; }
/* ⚠ Deliberately NOT an `.ag_ctrl--tab_item`. AG_TabsController measures every
`.ag_ctrl--tab_item` for contentWidth/minContentWidth and iterates them for the gauge and
the scroll-into-view, so a burger-only row carrying that class would register as a phantom
0-width tab (it is display:none while the widths are taken) and skew all three. It
therefore restates the burger item's own padding/type instead of inheriting it. */
.ag_ctrl--burger_title_item { display: none; }
.ag_ctrl--burger_mode.ag_ctrl--title_hidden .ag_ctrl--burger_title_item {
display: block;
padding: 15px 48px 13px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--Black);
}
.ag_ctrl--burger_mode.ag_ctrl--title_hidden .ag_ctrl--burger_title_item:hover { color: var(--Light-Green); }
/* The row below it is a real tab item, and its `:not(:first-child)` border already draws the
separator — so this row must not add one of its own. */
/* ag-accord */
/**
* Agvila Accordion Block
*/
.ag_accord--container {
display: block;
transition: padding-top 0.4s;
}
.ag_accord--container.ag_accord--no_transition {
transition: none;
}
.ag_accord--container + .ag_accord--container.ag_accord--active.ag_accord--expanded {
padding-top: 40px;
}
:not(.ag_accord--container) + .ag_accord--container {
padding-top: 0;
}
.ag_ctrl--block + .ag_accord--container {
margin-top: 28px;
}
@media (max-width: 450px) {
.ag_ctrl--block + .ag_accord--container {
margin-top: 16px;
}
}
.ag_accord--active > .ag_accord--head {
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
transition: border-color 0.3s;
margin-left: -24px;
margin-right: -24px;
padding-left: 24px;
padding-right: 24px;
}
@media (max-width: 1024px) {
.ag_accord--active > .ag_accord--head {
margin-left: -48px;
margin-right: -48px;
padding-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 768px) {
.ag_accord--active > .ag_accord--head {
margin-left: -32px;
margin-right: -32px;
padding-left: 32px;
padding-right: 32px;
}
}
@media (max-width: 450px) {
.ag_accord--active > .ag_accord--head {
margin-left: -24px;
margin-right: -24px;
padding-left: 24px;
padding-right: 24px;
}
}
.ag_accord--design_lvl1.ag_accord--active > .ag_accord--head {
border-bottom-color: var(--Primary-Green);
}
.ag_accord--design_lvl1.ag_accord--active.ag_accord--expanded + .ag_accord--design_lvl1.ag_accord--active:not(.ag_accord--expanded) > .ag_accord--head,
.ag_accord--design_headless.ag_accord--active.ag_accord--expanded + .ag_accord--design_lvl1.ag_accord--active:not(.ag_accord--expanded) > .ag_accord--head {
border-top-color: var(--Primary-Green);
}
.ag_accord--design_lvl1.ag_accord--active > .ag_accord--head svg .ag_accord--line {
stroke: var(--Primary-Green);
}
.ag_accord--design_lvl2.ag_accord--active > .ag_accord--head {
border-top-color: var(--Neutrals-Light-Sand);
border-bottom-color: var(--Neutrals-Light-Sand);
}
.ag_accord--lvl2.ag_accord--active.ag_accord--expanded > .ag_accord--head {
border-top-color: transparent;
}
.ag_accord--lvl2.ag_accord--active:not(.ag_accord--expanded) + .ag_accord--design_lvl2.ag_accord--active > .ag_accord--head {
border-top-color: transparent;
}
.ag_accord--design_lvl1.ag_accord--active.ag_accord--expanded > .ag_accord--top_margin_0x > .ag_accord--design_lvl2.ag_accord--active.ag_accord--expanded {
margin-top: 30px;
}
.ag_accord--design_lvl3.ag_accord--active > .ag_accord--head {
border-top-color: var(--Neutrals-Light-Sand);
border-bottom-color: var(--Neutrals-Light-Sand);
}
.ag_accord--lvl3.ag_accord--active.ag_accord--expanded > .ag_accord--head {
border-top-color: transparent;
}
.ag_accord--lvl3.ag_accord--active:not(.ag_accord--expanded) + .ag_accord--design_lvl3.ag_accord--active > .ag_accord--head {
border-top-color: transparent;
}
.ag_accord--design_lvl2.ag_accord--active.ag_accord--expanded > .ag_accord--top_margin_0x > .ag_accord--design_lvl3.ag_accord--active.ag_accord--expanded {
margin-top: 30px;
}
.ag_accord--container.ag_accord--active.ag_accord--on_show > .ag_accord--head {
border-top-color: transparent !important;
}
/**
* Head border overrides — the ACF "Top Border" field. Its stored values ARE these class
* names, and ag-accordion.php whitelists them, so exactly one combination is always present.
*
* Default top_border + bottom_border → no rule matches, the design rules above rule
* Top only closed top_closed + bottom_border → top hidden while expanded
* Only when closed top_closed + bottom_closed → both hidden while expanded
* Only bottom bottom_border → top hidden always (matched by ABSENCE)
*
* ⚠ Colour only, never `border: none` — the box is a permanent 1px transparent border set on
* .ag_accord--active > .ag_accord--head, and removing it would shift the head by a pixel.
* ⚠ !important is required, not lazy: the design rules that paint these borders reach (0,7,1)
* with the sibling + :hover combinators. The on_show rule above uses it for the same reason.
*/
.ag_accord--top_closed.ag_accord--expanded > .ag_accord--head {
border-top-color: transparent !important;
}
.ag_accord--container:not(.ag_accord--top_border):not(.ag_accord--top_closed) > .ag_accord--head {
border-top-color: transparent !important;
}
.ag_accord--bottom_closed.ag_accord--expanded > .ag_accord--head {
border-bottom-color: transparent !important;
}
.ag_accord--head .ag_accord--title {
padding: 42px 0 16px 0;
display: flex;
flex-wrap: nowrap;
gap: 40px;
align-items: center;
}
.ag_accord--active > .ag_accord--head .ag_accord--title {
padding: 26px 0 32px 0;
}
.ag_accord--head .ag_accord--name {
display: block;
flex-grow: 1;
transition: color 0.4s;
margin: 0;
font-style: normal;
font-weight: 300;
}
.ag_accord--head svg {
margin-top: 6px;
width: 28px;
height: auto;
flex: 0 0 auto;
transition: stroke 0.4s, transform 0.4s;
}
.ag_accord--expanded > .ag_accord--head svg .ag_accord--vertical_line {
display: none;
}
.ag_accord--active.ag_accord--expanded > .ag_accord--head svg {
transform: rotate(180deg);
}
.ag_accord--active > .ag_accord--head .ag_accord--line {
stroke: var(--Neutrals-Medium-Grey);
}
.ag_accord--design_lvl1 > .ag_accord--head .ag_accord--name {
font-size: 42px;
line-height: 1.17;
letter-spacing: -0.04em;
color: var(--Neutrals-Dark-Grey);
}
.ag_accord--design_lvl1.ag_accord--active > .ag_accord--head .ag_accord--name {
font-size: 48px;
letter-spacing: -0.04em;
line-height: 1;
color: var(--Primary-Green);
}
.ag_accord--design_lvl2 > .ag_accord--head .ag_accord--name {
font-size: 32px;
line-height: 1.25;
letter-spacing: -0.03em;
color: var(--Neutrals-Black);
}
.ag_accord--design_lvl2.ag_accord--active > .ag_accord--head .ag_accord--name {
line-height: 1;
color: var(--Neutrals-Dark-Grey);
}
.ag_accord--design_lvl2.ag_accord--design_lvl2_large > .ag_accord--head .ag_accord--name {
font-size: 42px;
letter-spacing: -0.04em;
}
.ag_accord--design_lvl3 > .ag_accord--head .ag_accord--name {
font-size: 24px;
line-height: 1.33;
letter-spacing: -0.02em;
color: var(--Neutrals-Black);
}
.ag_accord--design_lvl3.ag_accord--active > .ag_accord--head .ag_accord--name {
line-height: 1;
color: var(--Neutrals-Dark-Grey);
}
.ag_accord--design_lvl3 > .ag_accord--head .ag_accord--title {
padding: 38px 0 12px 0;
}
.ag_accord--design_lvl3.ag_accord--active > .ag_accord--head .ag_accord--title {
padding: 22px 0 28px 0;
}
.ag_accord--design_lvl3.ag_accord--active > .ag_accord--head .ag_accord--title svg {
width: 24px;
}
.ag_accord--container.ag_accord--design_headless > .ag_accord--head {
border-bottom-color: transparent;
border-top-color: transparent;
}
.ag_accord--design_headless > .ag_accord--head .ag_accord--title {
display: none;
}
@media (hover: hover) {
.ag_accord--active > .ag_accord--head .ag_accord--title:hover > * {
color: var(--Primary-Light-Green);
}
.ag_accord--active > .ag_accord--head .ag_accord--title:hover .ag_accord--line {
stroke: var(--Primary-Light-Green);
}
.ag_accord--design_lvl1.ag_accord--active > .ag_accord--head:hover {
border-bottom-color: var(--Primary-Light-Green);
}
.ag_accord--design_lvl1.ag_accord--active.ag_accord--expanded + .ag_accord--design_lvl1.ag_accord--active:not(.ag_accord--expanded) > .ag_accord--head:hover {
border-top-color: var(--Primary-Light-Green);
}
}
@media (max-width: 768px) {
.ag_accord--design_lvl1.ag_accord--active > .ag_accord--head .ag_accord--name {
font-size: 44px;
}
.ag_accord--design_lvl2.ag_accord--design_lvl2_large > .ag_accord--head .ag_accord--name {
font-size: 38px;
}
.ag_accord--design_lvl2.ag_accord--active > .ag_accord--head .ag_accord--name {
font-size: 30px;
}
}
@media (max-width: 450px) {
.ag_accord--title svg {
margin-top: 8px;
width: 24px;
}
.ag_accord--design_lvl1.ag_accord--active > .ag_accord--head .ag_accord--name {
font-size: 36px;
}
.ag_accord--design_lvl2.ag_accord--design_lvl2_large > .ag_accord--head .ag_accord--name {
font-size: 32px;
}
.ag_accord--design_lvl2.ag_accord--active > .ag_accord--head .ag_accord--name {
font-size: 28px;
}
}
.ag_accord--content {
display: none;
}
.ag_accord--expanded > .ag_accord--content {
display: block;
/* padding-bottom: 30px; */
}
.ag_accord--top_margin_0x { margin-top: 0; }
.ag_accord--top_margin_025x { margin-top: 16px; }
.ag_ctrl--block + .ag_accord--container.ag_accord--design_headless > .ag_accord--top_margin_025x { margin-top: 24px; }
.ag_accord--top_margin_05x { margin-top: 36px; }
.ag_accord--top_margin_10x { margin-top: 60px; }
.ag_accord--top_margin_15x { margin-top: 90px; }
.ag_accord--top_margin_20x { margin-top: 120px; }
.ag_accord--bottom_margin_0x { margin-bottom: 0; }
.ag_accord--bottom_margin_025x { margin-bottom: 8px; }
.ag_accord--bottom_margin_05x { margin-bottom: 16px; }
.ag_accord--bottom_margin_10x { margin-bottom: 36px; }
.ag_accord--bottom_margin_15x { margin-bottom: 60px; }
.ag_accord--bottom_margin_20x { margin-bottom: 90px; }
.ag_accord--bottom_margin_30x { margin-bottom: 120px; }
@media (max-width: 450px) {
.ag_accord--top_margin_10x { margin-top: 50px; }
.ag_accord--top_margin_15x { margin-top: 70px; }
.ag_accord--top_margin_20x { margin-top: 90px; }
.ag_accord--bottom_margin_05x { margin-bottom: 8px; }
.ag_accord--bottom_margin_10x { margin-bottom: 10px; }
.ag_accord--bottom_margin_15x { margin-bottom: 20px; }
.ag_accord--bottom_margin_20x { margin-bottom: 30px; }
.ag_accord--bottom_margin_30x { margin-bottom: 40px; }
}
/* 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: 24px;
}
}
/* 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