/* 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;
/*
*/
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");
}
.ex_ctrl--burger_mode .ex_ctrl--burger_pointer {
display: block;
}
@media (max-width: 450px) {
.ex_ctrl--burger_pointer {
right: 24px;
}
}
.ex_ctrl--burger_mode .ex_ctrl--tabs_container {
display: none;
position: absolute;
width: auto;
right: -16px;
top: 64px;
background: var(--Neutrals-White-Sand);
border-radius: 16px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
.ex_ctrl--burger_mode.ex_ctrl--burger_open .ex_ctrl--tabs_container {
display: block;
padding-left: 0;
padding-right: 0;
}
.ex_ctrl--title_top.ex_ctrl--burger_mode .ex_ctrl--tabs_container {
top: 107px;
}
.ex_ctrl--burger_mode .ex_ctrl--tabs_container .ex_ctrl--scroll_arrow {
display: none;
}
.ex_ctrl--burger_mode .ex_ctrl--tabs {
display: block;
}
.ex_ctrl--burger_mode .ex_ctrl--tab_item {
padding: 15px 48px 13px;
}
.ex_ctrl--burger_mode .ex_ctrl--tab_item:not(:first-child) {
border-top: 1px solid var(--Neutrals-Medium-Sand);
}
@media (max-width: 450px) {
.ex_ctrl--burger_mode .ex_ctrl--tabs_container {
right: -9px;
}
}
/* CTA section */
.ex_ctrl--cta_container {
display: none;
flex: 0 0 auto;
padding: 8px 0 8px 64px;
visibility: hidden;
margin-right: -13px;
}
.ex_ctrl--cta_ribbon.ex_ctrl--cta_visible .ex_ctrl--cta_container {
display: block;
}
@media (max-width: 1100px) {
.ex_ctrl--cta_container {
margin-right: -10px;
}
}
/** EX Tabs content */
div.ex_ctrl--item_container {
position: relative;
display: none;
padding-top: 80px;
z-index: 10;
font-weight: 400;
}
.ex_ctrl--item_mask {
display: none;
}
.ex_ctrl--item_masked .ex_ctrl--item_mask {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: var(--Neutrals-White);
opacity: 0.6;
z-index: 20;
display: block;
}
.ex_ctrl--item_container.ex_ctrl--item_active {
display: block;
}
@media (max-width: 1024px) {
div.ex_ctrl--item_container {
padding-top: 60px;
}
}
@media (max-width: 450px) {
div.ex_ctrl--item_container {
padding-top: 50px;
}
}
/* 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-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-image */
/**
* AG Image Block
*/
.ag_image--container {
width: 100%;
}
.ag_image--align_center .ag_image--figure {
margin-left: auto;
margin-right: auto;
}
.ag_image--align_right .ag_image--figure {
margin-left: auto;
}
.ag_image--size_75 .ag_image--figure {
width: 75%;
}
.ag_image--size_50 .ag_image--figure {
width: 50%;
}
.ag_image--size_33 .ag_image--figure {
width: 33.333%;
}
.ag_image--size_window {
max-width: none !important;
}
.ag_image--size_window .ag_image--image {
width: calc(100vw - var(--Scroll-Width));
left: calc((100vw - 100% - var(--Scroll-Width)) / -2);
}
@media (max-width: 1512px) {
.ag_image--size_window .ag_image--image {
width: calc(100vw - var(--Scroll-Width));
}
}
@media (max-width: 1066px) {
.ag_image--size_75 .ag_image--figure {
width: 100%;
}
.ag_image--size_50 .ag_image--figure {
width: 75%;
}
.ag_image--size_33 .ag_image--figure {
width: 50%;
}
}
@media (max-width: 768px) {
.ag_image--size_50 .ag_image--figure {
width: 100%;
}
.ag_image--size_33 .ag_image--figure {
width: 75%;
}
}
@media (max-width: 500px) {
.ag_image--size_33 .ag_image--figure {
width: 100%;
}
}
/* Viewport-width breakout (old ex_image--viewport -> ag-image "vport"):
1290px, wider than the 1072px content column, centered via negative margins. */
.ag_image--container.ag_image--size_vport {
width: 1290px;
max-width: none;
margin-left: calc((1290px - 100%) / -2);
margin-right: calc((1290px - 100%) / -2);
}
@media (max-width: 1418px) {
.ag_image--container.ag_image--size_vport {
width: calc(100vw - 128px);
margin-left: calc((100vw - 100% - 128px) / -2);
margin-right: calc((100vw - 100% - 128px) / -2);
}
}
@media (max-width: 1072px) {
.ag_image--container.ag_image--size_vport {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 768px) {
.ag_image--container.ag_image--size_vport {
width: calc(100% + 64px);
margin-left: -32px;
margin-right: -32px;
}
}
@media (max-width: 450px) {
.ag_image--container.ag_image--size_vport {
width: calc(100% + 48px);
margin-left: -24px;
margin-right: -24px;
}
}
.ag_image--image {
position: relative;
background-color: var(--Neutrals-White);
cursor: default;
}
.ag_image--fancy .ag_image--image {
cursor: zoom-in;
}
.ag_image--fixed_8x5 .ag_image--image {
padding-bottom: 62.5%;
}
.ag_image--fixed_13x5 .ag_image--image {
padding-bottom: 38.5%;
}
.ag_image--square .ag_image--image {
padding-bottom: 100%;
}
.ag_image--border .ag_image--image {
border: 1px solid var(--Neutrals-Light-Sand);
}
.ag_image--image img {
width: 100%;
height: 100%;
}
.ag_image--image:not(.ag_image--chart) img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
object-fit: cover;
display: block;
}
.ag_image--flexible .ag_image--image:not(.ag_image--chart) img {
position: static;
}
.ag_image--image.ag_image--photo_full img {
object-fit: contain;
}
.ag_image--chart_wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 3%;
}
.ag_image--flexible .ag_image--chart_wrap {
position: static;
}
.ag_image--chart_wrap img {
object-fit: contain;
}
.ag_image--image .ag_image--mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: 0.3s;
}
.ag_fancy--photo .ag_image--mask,
.ag_fancy--chart .ag_image--mask {
background-color: var(--Neutrals-Black);
opacity: 0;
}
.ag_fancy--video .ag_image--mask {
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50px' height='50px' viewBox='0 0 50 50'%3E%3Cstyle type='text/css'%3E .st_line%7Bfill:%23FFFFFF;fill-opacity:0.3;stroke:%23FFFFFF;stroke-width:2;%7D .st_fonas%7Bfill:none;stroke:%23FFFFFF;stroke-width:2;%7D%0A%3C/style%3E%3Ccircle class='st_fonas' cx='25' cy='25' r='24'/%3E%3Cpath class='st_line' d='M33.909,22.353c0.48,0.255,0.882,0.637,1.162,1.103c0.28,0.466,0.428,1,0.428,1.544 s-0.148,1.078-0.428,1.544c-0.28,0.466-0.682,0.848-1.162,1.103l-12.812,6.967c-2.063,1.123-4.597-0.337-4.597-2.646V18.033 c0-2.31,2.534-3.769,4.597-2.648L33.909,22.353z'/%3E%3C/svg%3E");
opacity: 0.5;
}
.ag_fancy--video.ag_image--chart .ag_image--mask {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='50px' height='50px' viewBox='0 0 50 50'%3E%3Cstyle type='text/css'%3E .st_line%7Bfill:none;stroke:%23191E5A;stroke-width:2;%7D .st_fonas%7Bfill:%23FFFFFF;stroke:%23191E5A;stroke-width:2;%7D %3C/style%3E%3Ccircle class='st_fonas' cx='25' cy='25' r='24'/%3E%3Cpath class='st_line' d='M33.909,22.353c0.48,0.255,0.882,0.637,1.162,1.103c0.28,0.466,0.428,1,0.428,1.544 s-0.148,1.078-0.428,1.544c-0.28,0.466-0.682,0.848-1.162,1.103l-12.812,6.967c-2.063,1.123-4.597-0.337-4.597-2.646V18.033 c0-2.31,2.534-3.769,4.597-2.648L33.909,22.353z'/%3E%3C/svg%3E");
}
.ag_fancy--chart .fancybox-image {
background-color: var(--Neutrals-White);
padding: 3%;
}
@media (hover: hover) and (pointer: fine) {
.ag_fancy--photo:hover .ag_image--mask {
opacity: 0.05;
}
.ag_fancy--chart:hover .ag_image--mask {
opacity: 0.03;
}
.ag_fancy--video:hover .ag_image--mask {
background-color: rgba(0,0,0,0.08);
opacity: 1;
}
.ag_fancy--video.ag_image--chart:hover .ag_image--mask {
background-color: rgba(0,0,0,0.03);
}
}
.ag_image--footer {
width: 100%;
padding: 16px 0;
text-align: center;
}
.ag_image--footer.ag_image--footer_no_gap {
padding-top: 0;
}
.ag_image--item .ag_image--footer p {
margin: 0;
}
.ag_image--item .ag_image--footer .ag_image--title {
font-size: 20px;
font-style: normal;
font-weight: 300;
line-height: 1.2em;
color: var(--Neutrals-Black);
}
.ag_image--item .ag_image--footer .ag_image--title:last-child {
margin-bottom: 16px;
}
.ag_image--item .ag_image--footer .ag_image--caption {
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 1.3em;
color: var(--Neutrals-Dark-Grey);
margin-bottom: 8px;
}
.ag_image--item .ag_image--footer .ag_image--caption a {
font-weight: 400;
}
.ag_image--item .ag_image--title + .ag_image--caption {
margin-top: 8px;
}
.ag_image--item .ag_image--footer .ag_image--description {
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 1.2em;
color: var(--Neutrals-Grey);
}
.ag_image--item .ag_image--footer .ag_image--description a {
font-weight: 400;
}
.ag_image--item .ag_image--title + .ag_image--description {
margin-top: 12px;
}
.fancybox-show-caption .ag_image--fancy_caption {
letter-spacing: 0.02em;
}
.fancybox-show-caption .ag_image--fancy_description {
font-weight: 300;
font-size: 13px;
margin-top: 4px;
letter-spacing: 0.05em;
}
.ag_image--container.ag_image--dyn_desktop {
width: 70%;
margin: auto;
}
@media (max-width: 1280px){
.ag_image--container.ag_image--dyn_desktop {
width: 85%;
}
}
@media (max-width: 1150px){
.ag_image--container.ag_image--dyn_desktop {
width: 100%;
margin: 0;
}
}
@media (max-width: 1024px){
.ag_image--container.ag_image--dyn_mobile {
width: 60%;
margin: auto;
}
}
@media (max-width: 850px){
.ag_image--container.ag_image--dyn_mobile {
width: 70%;
}
}
@media (max-width: 768px){
.ag_image--container.ag_image--dyn_mobile {
width: 80%;
}
}
@media (max-width: 650px){
.ag_image--container.ag_image--dyn_mobile {
width: 100%;
margin: 0;
}
}
@media (max-width: 650px){
.ag_image--container.ag_image--full_mobile {
width: 100%;
max-width: none !important;
margin: 0;
}
.ag_image--container.ag_image--full_mobile .ag_image--image {
width: calc(100vw - var(--Scroll-Width));
left: calc((100vw - 100% - var(--Scroll-Width)) / -2);
}
}
/**
* AG Gallery Block
* Grid/columns/modes/controls come from the collection wrapper (collection.css);
* this file keeps the gallery's own row rhythm + image-specific rules.
*/
.ag_gallery--container {
width: 100%;
}
.ag_collection--content.ag_gallery--content {
row-gap: 25px;
}
.ag_gallery--item {
flex: 0 0 auto;
}
/* single column: release the fixed aspect, images keep natural height
(768px = the collection wrapper's column-collapse boundary) */
@media (max-width: 768px) {
.ag_gallery--container:not(.ag_collection--scroll) .ag_gallery--item .ag_image--image {
padding-bottom: 0;
}
.ag_gallery--container:not(.ag_collection--scroll) .ag_gallery--item .ag_image--image:not(.ag_image--chart) img {
position: static;
}
.ag_gallery--container:not(.ag_collection--scroll) .ag_gallery--item .ag_image--chart_wrap {
position: static;
}
}
@media (max-width: 450px) {
.ag_collection--content.ag_gallery--content {
row-gap: 20px;
}
}
/* 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; }
}
/* ex-wp-blocks */
/**
* wp-blocks.css — generic Gutenberg content styling (CSS remaster M3, band 30).
* Successor of gb-styles.css: headings/paragraph margins,
* wp-block-columns variants, nested lists. (margin-- spacing utils retired at
* U1 margin-unify — content renamed to the global bottom--/top-- utils in
* elements.css.) Scope :is(.ex--page, .ex--post)
* replaces .gb--styles (equal specificity 0,1,1) — the M1 ContentClasses tiers
* provide the classes on #content (front) / root container (editor).
* Consumers migrate one template per portion (M4); gb-styles.css stays frozen
* for the rest. NOT copied here: .section--header hero (live on search/landing
* templates — moves at their slot) and .gb--warranty/.gb--sale_conditions
* (currently DEAD — template-default never enqueued gb-styles; M6 decides).
* TODO Track H: the columns !importants exist to beat Gutenberg inline
* flex-basis — re-audit per template before dropping any of them.
*/
/** Headings */
:is(.ex--page, .ex--post) h2 {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 42px;
}
:is(.ex--page, .ex--post) h3 {
margin-bottom: 24px;
}
:is(.ex--page, .ex--post) h4 {
margin-bottom: 16px;
}
:is(.ex--page, .ex--post) h5 {
margin-bottom: 8px;
}
@media (max-width: 768px) {
:is(.ex--page, .ex--post) h2 {
margin-bottom: 36px;
}
}
/** Paragraphs */
:is(.ex--page, .ex--post) p {
margin-bottom: 1em;
}
/* Applications poster exception: on the apps views the poster sits OUTSIDE the old
gb--styles wrappers, so its never had the 1em (elements.css * reset → 0).
Scoped per-CPT on purpose — tiny pages' posters DID have the 1em (poster inside
the wrapper) and keep it. Design-intent match: news sets poster p bottom to 0 too. */
.ex--applications .poster--content p {
margin-bottom: 0;
}
/* Same exception for the career page (remaster M7-3): its ex-poster description
sat outside the old gb--styles wrapper → never had the 1em. Scoped via the
template-about_us content class (.poster--company) — among wp-blocks consumers
only /career/ carries it. */
.poster--company .poster--content p {
margin-bottom: 0;
}
/* (p--limited retired at U2 — DB-proven ZERO usage; the width job is done by the
global .width--small util in elements.css.) */
/**
* WP BLOCKS
*/
/**
* wp-block-columns
*
* X.columns--text_text - two separate texts side by side
* .columns--table_table - two tables side by side
* .columns--list_list - two lists side by side
* .columns--text_image, .columns--image_text - text & image
* .columns--text_table, .columns--table_text - text & table
* X.columns--text_list, .columns--list_text - text & list (== generic columns;
* NO dedicated rules BY DESIGN — ruling 2026-07-11)
* .columns--double_text - continuous text in two columns
* .columns--double_list - continuous list in two columns
* .columns--swap - swap columns on mobile
*/
:is(.ex--page, .ex--post) .wp-block-columns {
gap: 80px;
}
:is(.ex--page, .ex--post) .wp-block-columns.columns--text_image,
:is(.ex--page, .ex--post) .wp-block-columns.columns--image_text {
gap: 50px;
}
:is(.ex--page, .ex--post) .wp-block-columns > .wp-block-column {
flex-basis: 30% !important;
}
@media (max-width: 1024px) {
:is(.ex--page, .ex--post) .wp-block-columns.columns--text_image,
:is(.ex--page, .ex--post) .wp-block-columns.columns--image_text {
flex-wrap: wrap !important;
gap: 48px;
}
:is(.ex--page, .ex--post) .wp-block-columns.columns--text_table,
:is(.ex--page, .ex--post) .wp-block-columns.columns--table_text,
:is(.ex--page, .ex--post) .wp-block-columns.columns--table_table {
flex-wrap: wrap !important;
gap: 24px;
}
:is(.ex--page, .ex--post) .columns--text_image .wp-block-column,
:is(.ex--page, .ex--post) .columns--image_text .wp-block-column,
:is(.ex--page, .ex--post) .columns--text_table .wp-block-column,
:is(.ex--page, .ex--post) .columns--table_text .wp-block-column,
:is(.ex--page, .ex--post) .columns--table_table .wp-block-column {
flex-basis: 100% !important;
}
:is(.ex--page, .ex--post) .wp-block-columns.columns--text_image.columns--swap {
gap: 24px;
}
:is(.ex--page, .ex--post) .wp-block-columns.columns--swap .wp-block-column:last-child {
order: 1;
}
:is(.ex--page, .ex--post) .wp-block-columns.columns--swap .wp-block-column:first-child {
order: 2;
}
}
@media (max-width: 768px) {
:is(.ex--page, .ex--post) .wp-block-columns {
flex-wrap: wrap !important;
gap: 0;
}
:is(.ex--page, .ex--post) .wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
}
:is(.ex--page, .ex--post) .wp-block-columns.columns--list_list,
:is(.ex--page, .ex--post) .wp-block-columns.columns--table_table {
gap: 54px;
}
:is(.ex--page, .ex--post) .wp-block-columns.columns--text_image,
:is(.ex--page, .ex--post) .wp-block-columns.columns--image_text {
gap: 32px;
}
:is(.ex--page, .ex--post) .wp-block-columns.columns--double_list,
:is(.ex--page, .ex--post) .wp-block-columns.columns--double_text {
gap: 0;
}
:is(.ex--page, .ex--post) .wp-block-columns.columns--double_list .wp-block-column:last-child,
:is(.ex--page, .ex--post) .wp-block-columns.columns--double_text .wp-block-column:last-child {
padding-top: 0;
}
}
@media (max-width: 450px) {
:is(.ex--page, .ex--post) .wp-block-columns.columns--text_image,
:is(.ex--page, .ex--post) .wp-block-columns.columns--image_text {
gap: 24px;
}
}
:is(.ex--page, .ex--post) li ul {
margin-top: 0.4em;
margin-bottom: 1em;
}
:is(.ex--page, .ex--post) li ul li {
padding-left: 48px;
}
:is(.ex--page, .ex--post) li ul li::before {
height: 2px;
width: 10px;
left: 24px;
top: 0.75em;
border-radius: 1px;
}
/**
* Features lists/columns — site-wide content component (user ruling 2026-07-11,
* U1-c: features--* is a site-wide feature and lives with the wp-columns
* redefinitions). Born in old products.css; the products CPT keeps its own
* .ex--products-scoped copies (higher specificity — no conflict if co-loaded).
* Self-contained (metrics + coloring); nested-list variants deliberately NOT
* carried — only products content uses them, covered by library/products css.
*/
.features--column h2 {
color: var(--Primary-Green);
}
.features--column ul li,
ul.features--list li {
position: relative;
padding-left: 36px;
margin-bottom: 1em;
color: var(--Primary-Green);
}
.features--column ul li::before,
ul.features--list li::before {
content: "";
height: 14px;
width: 14px;
position: absolute;
left: 0;
top: 5px;
border-radius: 4px;
background-color: var(--Primary-Light-Green);
}
/**
* Legacy block exceptions — markup of not-yet-remastered blocks that the generics above must
* NOT restyle. The rules below pin the values those blocks had before wp-blocks.css; they
* resolve equal-specificity ties by in-file source order, so they stay last in the file.
* Each rule goes when its block is remastered.
* ⚠ A pin records what the OLD markup did — never copy its value into a remaster.
*/
/* `.section-stories-intro .story-item :is(h3, p) { margin-bottom: 0 }` dropped 2026-09-11:
EX Stories Intro was its only emitter and its remaster (EX Stories Front) states the card's
h3 and p margins on its own P70 selectors instead — card-scoped at (0,2,0), so they beat the
`:is(.ex--page, .ex--post) h3 / p` generics above on weight rather than on band order. */
/* cta paragraphs were reset-0; the real gap comes from higher-specificity
.section--cta .box p:not(:last-child).
`.awards-item p` dropped 2026-09-10 with the AG Awards remaster — no emitter left, and the
block now carries `.ag_awards--text p { margin-bottom: 0 }` in its own P70 sheet. */
.section--cta .box p {
margin-bottom: 0;
}
/* ex-about-s block wrapper (frozen legacy block php emits product-flavored classes;
the old products.css owned this rule — library/products css now loads only on
product views): restore the section's closing gap, values byte-equal to the old
file. Products carry their own identical copies. Dies at the ex-about-s E-slot. */
.section--product_content {
margin-bottom: 100px;
}
@media (max-width: 630px) {
.section--product_content {
margin-bottom: 80px;
}
}
/* ag-history-scroller */
/* AG History Scroller — SHARED (frontend + editor iframe), `shared + block`, priority 70 (the block
* band, which must beat wp-blocks at 30). Editor-only overrides: ag-history-scroller-admin.css (90).
*
* Swiper's own stylesheet is never loaded: Swiper runs on this block's class names (wrapperClass /
* slideClass in ag-history-scroller.js) and the core rules it needs are restated below.
*
* ⚠ (0,2,0) selectors on the h2 and h4: wp-blocks.css (band 30) styles
* `:is(.ex--page, .ex--post) h2 / h4` at (0,1,1), and a bare class loses to that on weight.
*/
/* ---- Section ---------------------------------------------------------------------------- */
/* `overflow-x: clip` crops the bled carousel at the window edge. */
.ag_history_scroller--container {
padding: 112px 0;
overflow-x: clip;
overflow-y: hidden;
background-color: var(--Neutrals-White-Sand);
}
.ag_history_scroller--row {
display: flex;
flex-wrap: wrap;
}
.ag_history_scroller--lead {
width: 23.1%;
padding-top: 36px;
}
.ag_history_scroller--main {
width: 67.6923%;
margin-left: auto;
}
.ag_history_scroller--subhead {
margin-bottom: 16px;
font-size: 14px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Large type is Dark-Grey. */
.ag_history_scroller--container .ag_history_scroller--title {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 56px;
}
.ag_history_scroller--title + .ag_history_scroller--lead_text {
margin-top: -32px;
}
/* ---- Carousel ---------------------------------------------------------------------------- */
/* [Swiper core] the root. `overflow: hidden` crops cards at the column's LEFT edge, so a card
scrolled away never slides under the lead text; the -50vw / +50vw pair runs the row to the
window's right edge, where the section crops it. */
.ag_history_scroller--slider {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
margin-right: -50vw;
padding: 0 50vw 0 0;
touch-action: pan-y;
}
/* [Swiper core] the track Swiper transforms. `content-box` is Swiper's requirement — it writes a
width onto this element — and elements.css sets border-box site-wide. */
.ag_history_scroller--track {
position: relative;
z-index: 1;
display: flex;
width: 100%;
height: 100%;
box-sizing: content-box;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
transform: translate3d(0, 0, 0);
}
/* A fixed card width is why the carousel runs `slidesPerView: 'auto'`. No margin-right — Swiper
writes `spaceBetween` onto the slide as an inline margin. */
.ag_history_scroller--item {
position: relative;
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 770px;
height: auto;
transition-property: transform;
}
/* ---- Card -------------------------------------------------------------------------------- */
.ag_history_scroller--card {
display: flex;
flex-grow: 1;
}
.ag_history_scroller--image {
position: relative;
flex-shrink: 0;
width: 330px;
}
.ag_history_scroller--zoom {
display: block;
}
.ag_history_scroller--img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ag_history_scroller--text {
flex-grow: 1;
padding: 48px;
background: var(--Neutrals-White);
}
.ag_history_scroller--card .ag_history_scroller--years {
margin-bottom: 24px;
font-size: 24px;
font-weight: 400;
line-height: 1.33;
letter-spacing: -0.02em;
color: var(--Neutrals-Black);
}
/* ---- Controls ---------------------------------------------------------------------------- */
.ag_history_scroller--controls {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 24px;
}
.ag_history_scroller--link {
margin: 0 22px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: var(--Neutrals-Black);
}
@media (hover: hover) {
.ag_history_scroller--link:hover {
color: var(--Primary-Light-Green);
text-decoration: none;
}
}
.ag_history_scroller--arrow {
display: block;
margin-left: 16px;
padding: 0;
border: none;
background: none;
cursor: pointer;
outline: none;
}
/* The circle is the generic `.button--round.button--arrow` primitive from css/elements.css; on
this sand band it takes the Medium-Sand disc. */
.ag_history_scroller--arrow .button--round {
display: block;
background-color: var(--Neutrals-Medium-Sand);
}
.ag_history_scroller--arrow_prev .button--round {
transform: scaleX(-1);
}
/* Idle glyph Medium-Grey — #8A8A7E hardcoded because it lives inside a data URI, where a token
cannot resolve; keep it in step with the token by hand. On hover this rule lapses and the glyph
falls back to elements.css's dark default; the disc never changes. No `!important` needed. */
.ag_history_scroller--controls .ag_history_scroller--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");
}
/* DISABLED ARROW: no rule here on purpose — Swiper sets `disabled` on these s and
css/layout.css's `[disabled]` gives the site-wide faded state. */
/* Swiper hides navigation entirely when there is nothing to scroll to. */
.ag_history_scroller--controls .swiper-button-lock {
display: none;
}
/* ---- Responsive -------------------------------------------------------------------------- */
@media screen and (max-width: 1512px) {
.ag_history_scroller--main {
width: 73.6%;
}
}
@media screen and (max-width: 1023px) {
.ag_history_scroller--container {
padding: 55px 0 88px;
}
.ag_history_scroller--lead {
width: 40%;
padding-top: 110px;
}
.ag_history_scroller--main {
width: 56.6%;
}
/* min-width wins over max-width, so a card never drops below 318px. */
.ag_history_scroller--item {
width: 318px;
min-width: 318px;
max-width: calc(100vw - 48px);
}
.ag_history_scroller--card {
display: block;
background: var(--Neutrals-White);
}
.ag_history_scroller--image {
width: 100%;
height: 198px;
}
.ag_history_scroller--text {
min-height: 302px;
padding: 32px;
}
.ag_history_scroller--link {
margin: 0 3px;
}
}
@media screen and (max-width: 767px) {
.ag_history_scroller--container {
padding: 88px 0;
}
.ag_history_scroller--lead {
width: 100%;
padding-top: 0;
padding-bottom: 22px;
}
.ag_history_scroller--main {
width: 100%;
}
.ag_history_scroller--subhead {
font-size: 12px;
line-height: 22px;
}
.ag_history_scroller--container .ag_history_scroller--title {
margin-bottom: 32px;
font-weight: 300;
line-height: 40px;
letter-spacing: -.025em;
}
.ag_history_scroller--title + .ag_history_scroller--lead_text {
margin-top: 0;
}
.ag_history_scroller--lead_text {
margin-bottom: 16px;
}
.ag_history_scroller--desc {
font-size: 15px;
line-height: 22px;
}
}
@media screen and (max-width: 450px) {
.ag_history_scroller--container {
padding: 68px 0 62px;
}
}
/* ag-clients */
/* AG Clients — SHARED (frontend + editor iframe), `shared + block`, priority 70 (the block band,
* which must beat wp-blocks at 30). Editor-only overrides: ag-clients-admin.css (90).
*/
/* ---- Section ---------------------------------------------------------------------------- */
.ag_clients--container {
padding: 112px 0 162px;
/* Inherits down to the heading — which is why there is no universal selector here. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Colour stated, not inherited: css/wp-blocks.css (band 30) pins the page heading colour by
LEGACY class name, and an `ag_*--` namespace never matches a pin.
→ [[large-type-is-dark-grey]] · [[wp-blocks-pins-legacy-class-names]] */
.ag_clients--container .ag_clients--title {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 56px;
}
/* ---- Track ------------------------------------------------------------------------------ */
/* The clipping window. `overflow: hidden` crops the logos that do not fit — on the frontend it
hides the part of the loop that is off-stage; in the editor (animation off) it is the whole
preview behaviour. */
.ag_clients--marquee {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
position: relative;
}
/* Fades at both ends so logos enter and leave the strip instead of being chopped mid-glyph. They
must sit above the moving sets (z-index) and never eat a click on the logo behind them
(pointer-events). */
.ag_clients--marquee::before,
.ag_clients--marquee::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 80px;
z-index: 9;
pointer-events: none;
}
.ag_clients--marquee::after {
left: 0;
background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}
.ag_clients--marquee::before {
right: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}
/* One full pass of the list. `--count` is the rendered item count, written inline by the twig;
200/count keeps the seconds-per-logo constant however many the owner adds. */
.ag_clients--set {
display: flex;
flex-wrap: nowrap;
animation: ag_clients--marquee calc(200 / var(--count) * 1s) linear infinite;
}
@keyframes ag_clients--marquee {
100% {
transform: translateX(-100%);
}
}
/* Promote only what actually moves. Listed per element because `backface-visibility` is not
inherited — do not collapse it into a universal rule ([[block-css-universal-reset-trap]]). */
.ag_clients--marquee,
.ag_clients--set,
.ag_clients--item,
.ag_clients--item img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* ---- Logo ------------------------------------------------------------------------------- */
.ag_clients--item {
flex-shrink: 0;
width: 190px;
margin-right: 30px;
}
.ag_clients--item img {
display: block;
width: 190px;
height: 90px;
min-width: 50px;
object-fit: contain;
}
/* ---- Responsive -------------------------------------------------------------------------- */
/* ⚠ No bleed rules here. `.section--screen` on the marquee (twig) makes css/layout.css widen the
strip to the window edge with one calc at every width — stepped negative margins per breakpoint
would lose to it on specificity anyway, and would leave a hole above 1512px. */
@media screen and (max-width: 767px) {
.ag_clients--container {
padding-top: 78px;
padding-bottom: 118px;
}
.ag_clients--container .ag_clients--title {
margin-bottom: 30px;
}
.ag_clients--item {
width: 135px;
margin-right: 21px;
}
.ag_clients--item img {
width: 135px;
height: 64px;
}
}
@media screen and (max-width: 450px) {
.ag_clients--container {
padding-top: 68px;
padding-bottom: 98px;
}
}
/* ag-awards */
/* AG Awards — SHARED (frontend + editor iframe), `shared + block`, priority 70 (the block band,
* which must beat wp-blocks at 30). Editor-only overrides: ag-awards-admin.css (90).
*
* Swiper's own stylesheet is never loaded: Swiper runs on this block's class names
* (wrapperClass / slideClass in ag-awards.js), and the few core rules it relies on are replicated
* below on that namespace. Nothing here is named `.swiper-*` except the two classes Swiper adds
* at runtime (`swiper-initialized`, `swiper-button-lock`), so css/slider.css — still on the page
* for the legacy blocks — cannot reach in.
*
* ⓘ No opacity gate on the track, unlike `.section-slider-s-intro`: do not add one. An award list
* that renders invisible when the script fails is worse than one that renders as a plain
* overflowing row.
*/
/* ---- Section ---------------------------------------------------------------------------- */
/* `overflow: hidden` is load-bearing: the cards are wider than the content column and deliberately
spill past it, and this is the box that crops them at the window edge. */
.ag_awards--container {
overflow: hidden;
padding: 92px 0 96px;
background: var(--Neutrals-White-Sand);
}
/* Colour stated, not inherited: css/wp-blocks.css (band 30) pins the page heading colour by
LEGACY class name, and an `ag_*--` namespace never matches a pin. The White-Sand background
does not change it — large type is Dark-Grey on every surface.
→ [[large-type-is-dark-grey]] · [[wp-blocks-pins-legacy-class-names]] */
.ag_awards--container .ag_awards--title {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 56px;
}
/* ---- Carousel ---------------------------------------------------------------------------- */
/* [Swiper core] The root. `overflow: visible` is the point — the slides must escape the content
column and be cropped by the section above, not here. */
.ag_awards--slider {
position: relative;
z-index: 1;
display: block;
overflow: visible;
padding: 0;
touch-action: pan-y;
}
/* [Swiper core] The track Swiper transforms. `content-box` is Swiper's requirement — it writes a
width onto this element — and elements.css sets border-box site-wide. */
.ag_awards--track {
position: relative;
z-index: 1;
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100%;
box-sizing: content-box;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
transform: translate3d(0, 0, 0);
}
/* ---- Card -------------------------------------------------------------------------------- */
/* A fixed card width is why the carousel runs `slidesPerView: 'auto'`: the row overflows by design
and the next card peeks in at the crop. No margin-right — Swiper writes `spaceBetween` onto the
slide as an inline margin. */
.ag_awards--item {
flex-shrink: 0;
display: flex;
flex-direction: column;
width: 410px;
height: auto;
padding: 24px;
background: var(--Neutrals-White);
transition-property: transform;
}
.ag_awards--head {
display: flex;
align-items: center;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid var(--Neutrals-Dark-Sand);
}
.ag_awards--logo {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 80px;
height: 60px;
margin-right: 20px;
}
.ag_awards--logo img {
width: 80px;
height: 60px;
object-fit: contain;
}
/* Design-only card title, never an , so no `.h3` from elements.css applies. The -2px right
margin buys one more character before the wrap. */
.ag_awards--name {
font-size: 24px;
font-weight: normal;
line-height: 30px;
color: var(--Neutrals-Dark-Grey);
margin-right: -2px;
}
/* ACF returns the description already wrapped in (the field's new_lines = wpautop).
`margin-bottom: 0` because wp-blocks.css gives every page
`margin-bottom: 1em` and exempted
the legacy markup by name — a pin the AG namespace no longer matches. */
.ag_awards--text p {
margin-bottom: 0;
}
.ag_awards--text p + p {
margin-top: 24px;
}
/* ---- Controls ---------------------------------------------------------------------------- */
/* Arrows only — no gauge, no show-all. The twig renders them only when there is more than one
card. */
.ag_awards--controls {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 24px;
}
.ag_awards--arrow {
display: block;
padding: 0;
margin-left: 16px;
border: none;
background: none;
cursor: pointer;
outline: none;
}
/* The circle is the generic `.button--round.button--arrow` primitive from css/elements.css; only
its colour is this section's: a Medium-Sand disc. → [[sand-scroll-control-scheme]] */
.ag_awards--arrow .button--round {
display: block;
background-color: var(--Neutrals-Medium-Sand);
}
.ag_awards--arrow_prev .button--round {
transform: scaleX(-1);
}
/* Idle glyph Medium-Grey — #8A8A7E hardcoded because it lives inside a data URI, where a token
cannot resolve; keep it in step with the token by hand. On hover this rule stops applying and
the glyph falls back to elements.css's dark default; the disc never changes. (0,3,0) beats
`.button--round.button--arrow` on weight, so no `!important`. */
.ag_awards--controls .ag_awards--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");
}
/* DISABLED ARROW: no rule here on purpose. Swiper sets `disabled` on these real s, and
css/layout.css's `[disabled] { pointer-events: none; opacity: .3 }` is the wanted state — the
general .3, same as AG Collection and EX Stories Front. → [[sand-scroll-control-scheme]] */
/* Swiper hides navigation entirely when there is nothing to scroll to. */
.ag_awards--controls .swiper-button-lock {
display: none;
}
/* ---- Responsive -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
.ag_awards--item {
width: 370px;
/* The fixed card can be wider than the screen below the desktop column; this keeps the one
card on show visible in full. 48px = the viewport inset at this breakpoint. */
max-width: calc(100vw - 48px);
}
}
@media screen and (max-width: 767px) {
.ag_awards--container {
padding-top: 78px;
}
/* ⚠ Not the elements.css scale, on purpose: this section has always run a smaller mobile
heading (32px/40px, looser tracking) and the size is part of the signed-off look. */
.ag_awards--container .ag_awards--title {
font-weight: 300;
line-height: 40px;
letter-spacing: -0.025em;
margin-bottom: 24px;
}
.ag_awards--item {
width: 318px;
}
}
@media screen and (max-width: 450px) {
.ag_awards--container {
padding-top: 68px;
padding-bottom: 62px;
}
}
/* ag-membership */
/* AG Membership — SHARED (frontend + editor iframe), `shared + block`, priority 70 (the block
* band, which must beat wp-blocks at 30). Editor-only overrides: ag-membership-admin.css (90).
*
* ⚠ THE BLEED IS ASYMMETRIC BY DESIGN: down to 768px the strip bleeds LEFT ONLY, because the
* certificate column owns the right edge. `.section--screen_left` on the marquee (twig) does that
* at every width; below 768px the row stacks and the right edge is added back here.
*/
/* ---- Section ---------------------------------------------------------------------------- */
.ag_membership--container {
padding: 112px 0 152px;
/* Inherits down to the heading and the certificate label — which is why there is no universal
selector here. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Colour stated, not inherited: css/wp-blocks.css (band 30) pins the page heading colour by
LEGACY class name, and an `ag_*--` namespace never matches a pin.
→ [[large-type-is-dark-grey]] · [[wp-blocks-pins-legacy-class-names]] */
.ag_membership--container .ag_membership--title {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 56px;
}
/* Strip on the left, certificate pinned right. */
.ag_membership--row {
display: flex;
}
/* ---- Track ------------------------------------------------------------------------------ */
/* The clipping window. `overflow: hidden` crops the logos that do not fit — on the frontend it
hides the part of the loop that is off-stage; in the editor (animation off) it is the whole
preview behaviour.
⚠ `min-width: 0` is required: this is a flex ITEM, and a flex item's default `min-width: auto`
refuses to shrink below its content, which would push the certificate column off the row
instead of cropping the strip. */
.ag_membership--marquee {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
position: relative;
min-width: 0;
flex: 1 1 auto;
}
/* Fades at both ends so logos enter and leave the strip instead of being chopped mid-glyph. */
.ag_membership--marquee::before,
.ag_membership--marquee::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 80px;
z-index: 9;
pointer-events: none;
}
.ag_membership--marquee::after {
left: 0;
background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}
.ag_membership--marquee::before {
right: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}
/* One full pass of the list. `--count` is the rendered item count, written inline by the twig;
200/count keeps the seconds-per-logo constant however many the owner adds. */
.ag_membership--set {
display: flex;
flex-wrap: nowrap;
animation: ag_membership--marquee calc(200 / var(--count) * 1s) linear infinite;
}
@keyframes ag_membership--marquee {
100% {
transform: translateX(-100%);
}
}
/* Promote only what actually moves. Listed per element because `backface-visibility` is not
inherited — do not collapse it into a universal rule ([[block-css-universal-reset-trap]]). */
.ag_membership--marquee,
.ag_membership--set,
.ag_membership--item,
.ag_membership--item img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* ---- Logo ------------------------------------------------------------------------------- */
.ag_membership--item {
flex-shrink: 0;
width: 190px;
margin-right: 30px;
}
.ag_membership--item img {
display: block;
width: 190px;
height: 90px;
min-width: 50px;
object-fit: contain;
}
/* ---- Certificate column ------------------------------------------------------------------ */
/* Pulled up 82px so the label sits level with the section heading rather than with the strip. */
.ag_membership--cert {
flex-shrink: 0;
margin-top: -82px;
margin-left: 30px;
}
.ag_membership--cert_title {
font-size: 14px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0.06em;
}
/* The rule to the left of the certificate. The negative margin pulls the border back over the
column's own inset so the logo keeps its optical alignment with the label above it. */
.ag_membership--cert_logo {
border-left: 1px solid var(--Neutrals-Black);
margin-left: -14px;
margin-top: 58px;
padding-left: 14px;
}
.ag_membership--cert_logo img {
display: block;
width: 190px;
height: 90px;
object-fit: contain;
}
/* ---- Responsive -------------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {
.ag_membership--cert {
text-align: center;
}
.ag_membership--cert_logo img {
width: 105px;
object-fit: cover;
}
}
/* From here the strip bleeds BOTH ways. Only the RIGHT half is written — the left comes from
`.section--screen_left` at every width. The expression must stay identical to that utility's,
or the two edges drift apart. */
@media screen and (max-width: 768px) {
.ag_membership--marquee {
margin-right: calc((100% - 100vw + var(--Scroll-Width)) / 2);
}
}
@media screen and (max-width: 767px) {
.ag_membership--container {
padding-top: 68px;
padding-bottom: 78px;
}
.ag_membership--container .ag_membership--title {
margin-bottom: 30px;
}
/* Stack: the certificate moves under the strip, with a rule above it instead of beside it. */
.ag_membership--row {
display: block;
}
.ag_membership--item {
width: 135px;
margin-right: 21px;
}
.ag_membership--item img {
width: 135px;
height: 64px;
}
.ag_membership--cert {
margin: 69px 0 0;
padding-top: 30px;
border-top: 1px solid var(--Neutrals-Black);
}
.ag_membership--cert_logo {
border: 0;
padding: 30px 0 0;
margin: 0;
}
.ag_membership--cert_logo img {
width: 190px;
height: 90px;
object-fit: contain;
margin-left: auto;
margin-right: auto;
}
}
/* ex-stories-front */
/* EX Stories Front — SHARED (frontend + editor iframe), `shared + block`, priority 70 (the block
* band, which must beat wp-blocks at 30). Editor-only overrides: ex-stories-front-admin.css (90).
*
* Swiper's own stylesheet is never loaded: Swiper runs on this block's class names
* (wrapperClass / slideClass in ex-stories-front.js), and the few core rules it relies on are
* replicated below on that namespace. Nothing here is named `.swiper-*` except the one class
* Swiper adds at runtime (`swiper-button-lock`), so css/slider.css — still on the page for the
* legacy blocks — cannot reach in.
*
* ⚠ Card-scoped (0,2,0) selectors where a rule has to beat a page rule: css/wp-blocks.css (band
* 30) styles `:is(.ex--page, .ex--post) h3` / `p` at (0,1,1), and a bare class loses to that on
* weight no matter how late its band. → [[wp-blocks-pins-legacy-class-names]]
*/
/* ---- Section ---------------------------------------------------------------------------- */
/* `overflow-x: clip` is load-bearing: the cards are wider than the content column and spill
past it, and this is the box that crops them at the window edge. `overflow-y: hidden` stops
the bled track from adding vertical scroll while Swiper is mid-transform. */
.ex_stories_front--container {
padding: 92px 0;
overflow-x: clip;
overflow-y: hidden;
background-color: var(--Neutrals-White-Sand);
}
/* The small uppercase label above the heading (own namespace, not the shared `.sub-head`). */
.ex_stories_front--subhead {
font-size: 14px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 10px;
}
/* Colour stated, not inherited: large type is Dark-Grey ([[large-type-is-dark-grey]]). The
margin is stated because the home page never loads wp-blocks.css, and the heading would fall
through to elements.css's `* { margin: 0 }`. */
.ex_stories_front--container .ex_stories_front--title {
color: var(--Neutrals-Dark-Grey);
margin-bottom: 36px;
}
/* ---- Carousel ---------------------------------------------------------------------------- */
/* [Swiper core] the root. `overflow: visible` on purpose — the slides escape the content column
and are cropped by the section above. The -50vw / +50vw pair widens the border box to the
window edge while the padding gives the content box the column width back; Swiper measures
clientWidth minus padding, so it still pages by one column. */
.ex_stories_front--slider {
position: relative;
z-index: 1;
display: block;
overflow: visible;
margin-right: -50vw;
padding: 0 50vw 0 0;
touch-action: pan-y;
}
/* [Swiper core] the track Swiper transforms. `content-box` is Swiper's requirement — it writes
a width onto this element — and elements.css sets border-box site-wide. */
.ex_stories_front--track {
position: relative;
z-index: 1;
display: flex;
flex-wrap: nowrap;
width: 100%;
height: 100%;
box-sizing: content-box;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
transform: translate3d(0, 0, 0);
}
/* A fixed card width is why the carousel runs `slidesPerView: 'auto'`: the row overflows by
design and the next card peeks in at the crop. No margin-right — Swiper writes `spaceBetween`
onto the slide as an inline margin. */
.ex_stories_front--item {
flex-shrink: 0;
position: relative;
display: block;
width: 770px;
height: 100%;
transition-property: transform;
}
/* ---- Card -------------------------------------------------------------------------------- */
/* The whole card is one . `min-height` makes a short story as tall as a long one. */
.ex_stories_front--card {
position: relative;
display: flex;
min-height: 464px;
background: var(--Neutrals-Light-Sand);
transition: all 0.2s ease;
}
.ex_stories_front--card:hover {
color: var(--Neutrals-Black);
background: var(--Neutrals-White);
}
.ex_stories_front--image {
position: relative;
width: 42.858%;
}
.ex_stories_front--image img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100%;
object-fit: cover;
}
.ex_stories_front--text {
display: flex;
flex-direction: column;
width: 57.142%;
padding: 48px 48px 92px;
}
/* Design-only label, never an . A 14px caption, so not the "large type" the Dark-Grey
ruling governs. */
.ex_stories_front--card .ex_stories_front--category {
font-size: 14px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--Neutrals-Grey);
margin-bottom: 16px;
}
/* The card title is an . (0,2,0), not a bare class: wp-blocks.css's
`:is(.ex--page, .ex--post) h3 { margin-bottom }` is (0,1,1) and would otherwise own the margin. */
.ex_stories_front--card .ex_stories_front--name {
font-size: 24px;
font-weight: 400;
line-height: 32px;
letter-spacing: 0;
color: var(--Neutrals-Black);
margin-bottom: 24px;
}
/* `margin-bottom: 0` at (0,2,0): wp-blocks.css gives every page `margin-bottom: 1em` at
(0,1,1), which would add ~16px under the description. */
.ex_stories_front--card .ex_stories_front--desc {
font-size: 16px;
font-weight: normal;
line-height: 24px;
color: var(--Neutrals-Black);
margin-bottom: 0;
}
/* The corner button: hidden until hover, and only on devices that HAVE hover. Absolutely
positioned, so it takes no part in the flex column. */
.ex_stories_front--go {
position: absolute;
right: 0;
bottom: 0;
display: none;
margin: 26px;
}
@media (hover: hover) and (pointer: fine) {
.ex_stories_front--card:hover .ex_stories_front--go {
display: block;
background-color: var(--Neutrals-Medium-Sand);
}
.ex_stories_front--card .ex_stories_front--name {
color: var(--Neutrals-Dark-Grey);
}
.ex_stories_front--card:hover .ex_stories_front--desc {
color: var(--Neutrals-Dark-Grey);
}
}
/* ---- Controls ---------------------------------------------------------------------------- */
/* The gauge on the left, the "read all stories" link and the arrows on the right, on one row.
A sibling of the slider root, so nothing depends on the bleed arithmetic. */
.ex_stories_front--controls {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 24px;
}
/* `margin-left: auto` keeps link + arrows hard right when the gauge is off; `flex-shrink: 0`
means the gauge yields first when the row is tight; the 50px is the minimum gap, and the JS
fit-check mirrors it. AG Collection values. */
.ex_stories_front--actions {
display: flex;
align-items: center;
margin-left: auto;
flex-shrink: 0;
padding-left: 50px;
}
/* Gauge — one dot per card, built at runtime by ex-stories-front.js (the container ships empty).
`min-width: 0` lets the row squeeze it so the JS can detect the overflow; `overflow: hidden` is
the no-JS worst case. Own namespace, not `.swiper-pagination-*`, so css/slider.css and
ex-home.css — both on the page — cannot reach in. */
.ex_stories_front--bullets {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
overflow: hidden;
}
.ex_stories_front--bullet {
display: block;
flex: 0 0 auto; /* never squeeze a dot — the JS fit-check measures their true width */
width: 8px;
height: 8px;
border-radius: 4px;
background-color: var(--Neutrals-Medium-Sand); /* on sand: one step darker than the white-background pair */
cursor: pointer;
transition: background-color 0.2s;
}
.ex_stories_front--bullet_active {
background-color: var(--Neutrals-Dark-Sand);
cursor: default;
}
/* Set by the JS when there is nothing to gauge — every card on screen, or the dots no longer
fit beside the arrows. */
.ex_stories_front--bullets_lock {
display: none;
}
.ex_stories_front--link {
font-size: 12px;
font-weight: 700;
letter-spacing: normal;
text-transform: uppercase;
color: var(--Neutrals-Black);
margin: 0 22px;
}
@media (hover: hover) {
.ex_stories_front--link:hover {
color: var(--Primary-Light-Green);
text-decoration: none;
}
}
.ex_stories_front--arrow {
display: block;
padding: 0;
margin-left: 16px;
border: none;
background: none;
cursor: pointer;
outline: none;
}
/* The circle is the generic `.button--round.button--arrow` primitive from css/elements.css;
only its colour is this section's: a Medium-Sand disc. */
.ex_stories_front--arrow .button--round {
display: block;
background-color: var(--Neutrals-Medium-Sand);
}
.ex_stories_front--arrow_prev .button--round {
transform: scaleX(-1);
}
/* Idle glyph Medium-Grey — #8A8A7E hardcoded because it lives inside a data URI, where a token
cannot resolve; keep it in step with the token by hand. On hover this rule stops applying and
the glyph falls back to elements.css's dark default; the disc never changes. (0,3,0) beats
`.button--round.button--arrow` on weight, so no `!important`. A disabled arrow keeps the idle
glyph: `pointer-events: none` from css/layout.css means `:hover` can never match it. */
.ex_stories_front--controls .ex_stories_front--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");
}
/* DISABLED ARROW: no rule here on purpose. Swiper sets `disabled` on these real s, and
css/layout.css's `[disabled] { pointer-events: none; opacity: .3 }` is the wanted state — the
general .3, same as the AG Collection arrows. → [[sand-scroll-control-scheme]] */
/* Swiper hides navigation entirely when there is nothing to scroll to. */
.ex_stories_front--controls .swiper-button-lock {
display: none;
}
/* ---- Responsive -------------------------------------------------------------------------- */
/* Below the desktop column the card stacks: a 62.5 % ratio image over the text. The slide
becomes the flex column so a short card still fills the row's height, and the width drops from
770 to 318 with a viewport cap. 48px = the viewport inset at this breakpoint. */
@media screen and (max-width: 1023px) {
.ex_stories_front--container {
padding: 82px 0;
}
.ex_stories_front--item {
display: flex;
flex-direction: column;
width: 318px;
min-width: 318px;
max-width: calc(100vw - 48px);
height: auto;
}
.ex_stories_front--card {
display: block;
min-width: 100%;
flex-grow: 1;
background: var(--Neutrals-White);
}
.ex_stories_front--image {
width: 100%;
height: 0;
padding-bottom: 62.5%;
}
.ex_stories_front--text {
width: 100%;
padding: 32px 32px 64px;
}
.ex_stories_front--card .ex_stories_front--name {
font-size: 20px;
font-weight: normal;
line-height: 28px;
letter-spacing: 0;
margin-bottom: 24px;
}
/* No hover target below the desktop column, so the corner button never appears. */
.ex_stories_front--go {
display: none;
}
.ex_stories_front--link {
margin: 0 3px;
}
}
@media screen and (max-width: 767px) {
.ex_stories_front--container {
padding: 72px 0;
}
.ex_stories_front--subhead {
font-size: 12px;
line-height: 22px;
margin-bottom: 14px;
}
/* The mobile heading: tracking, line-height and margin are this section's own. */
.ex_stories_front--container .ex_stories_front--title {
font-weight: 300;
line-height: 40px;
letter-spacing: -0.025em;
margin-bottom: 32px;
}
}
@media (max-width: 450px) {
.ex_stories_front--card {
margin-bottom: 6px;
}
/* Gauge off unconditionally on the smallest screens: one card per screen and four dots almost
as wide as the row. This wins over the JS's `--bullets_lock` toggle on order (same weight,
later in the file); the dots are still built and reappear past 450px. */
.ex_stories_front--bullets {
display: none;
}
}
/* ex-cta */
/**
* EX Bottom CTA block styles.
* Moved from library/block-assets/ (remaster M7-2, E-track pattern-setter) —
* byte-copy of the old file plus the entry.css successor rule at the bottom.
* NB: the .page-template-template-landing .content--product rule rode along
* from the legacy file — it belongs to the landing page, relocate at D4.
*/
.section--cta {
position: relative;
padding: 72px 0;
background: no-repeat 50% 50%;
background-size: cover;
}
.section--cta .bg {
position: absolute;
width: 100%;
min-height: 100%;
object-fit: cover;
left: 0;
max-height: 100%;
top: 0;
}
.section--cta h2 {
margin-bottom: 24px;
}
.section--cta .button--item {
margin-top: 48px;
}
.section--cta .logo-h {
margin-bottom: 32px;
}
.section--cta .logo-h img {
min-height: 40px;
max-height: 40px;
}
.section--cta .button--item.electronics {
background-color: #00786E;
}
.section--cta .button--item.electronics:hover:after {
background-color: rgba(0, 0, 0, .5);
}
.section--cta .button--item.electronics:after {
background-color: rgba(0, 0, 0, .35);
}
.section--cta .box {
position: relative;
z-index: 1;
max-width: 550px;
background: var(--Neutrals-White);
padding: 48px;
}
.section--cta .box p {
color: var(--Neutrals-Grey);
}
.page-template-template-landing .content--product {
margin-top: 40px;
}
@media screen and (max-width: 1023px) {
.section--cta {
padding-bottom: 31px;
}
.section--cta .box {
max-width: 440px;
}
}
@media screen and (max-width: 767px) {
.section--cta h2 {
margin-bottom: 24px;
font-size: 32px;
font-weight: 300;
letter-spacing: -.025em;
line-height: 40px;
}
.section--cta .button--item {
width: 100%;
}
.section--cta p {
font-size: 14px;
line-height: 22px;
}
.section--cta .box {
max-width: none;
width: 100%;
padding: 40px 0;
}
.section--cta:before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(0, #232323 0%, rgba(35, 35, 35, 0) 90%);
content: '';
display: none;
height: 62.5vw;
}
.section--cta {
padding: 0 0 40px;
}
.section--cta .bg {
position: static;
max-height: 62.5vw;
min-height: 62.5vw;
height: 62.5vw;
}
}
/* entry.css successor (remaster M7-2): the retired .entry p:not(:last-child)
24px rhythm, re-scoped to this block's own markup. */
.section--cta .box p:not(:last-child) {
margin-bottom: 24px;
}