/* ATEQ — styles (generated from the WordPress theme, then maintained here) */ /* WordPress global styles (theme.json) */ :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--red-50: #fdecf0;--wp--preset--color--red-100: #fbd0da;--wp--preset--color--red-200: #f6a1b5;--wp--preset--color--red-300: #f06a8a;--wp--preset--color--red-400: #ea194a;--wp--preset--color--red-500: #d31245;--wp--preset--color--red-600: #c40d3f;--wp--preset--color--red-700: #a80533;--wp--preset--color--red-800: #7a0326;--wp--preset--color--red-900: #4a0217;--wp--preset--color--neutral-0: #ffffff;--wp--preset--color--neutral-50: #f6f6f7;--wp--preset--color--neutral-100: #ededef;--wp--preset--color--neutral-200: #dcdce0;--wp--preset--color--neutral-300: #c4c4ca;--wp--preset--color--neutral-400: #9a9aa2;--wp--preset--color--neutral-500: #6e6e77;--wp--preset--color--neutral-600: #4e4e56;--wp--preset--color--neutral-700: #34343a;--wp--preset--color--neutral-800: #222226;--wp--preset--color--neutral-900: #16161a;--wp--preset--color--neutral-950: #0c0c0e;--wp--preset--color--success: #1f9d55;--wp--preset--color--warning: #e0a100;--wp--preset--color--info: #2563eb;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--font-size--caption: 12px;--wp--preset--font-size--body-s: 14px;--wp--preset--font-size--body-m: 16px;--wp--preset--font-size--body-l: 20px;--wp--preset--font-size--h-4: 24px;--wp--preset--font-size--h-3: 32px;--wp--preset--font-size--h-2: 48px;--wp--preset--font-size--h-1: 64px;--wp--preset--font-size--display-l: 88px;--wp--preset--font-size--display-xl: 120px;--wp--preset--font-family--body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;--wp--preset--font-family--heading: "Barlow Condensed", "Arial Narrow", sans-serif;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--spacing--4: 4px;--wp--preset--spacing--8: 8px;--wp--preset--spacing--12: 12px;--wp--preset--spacing--16: 16px;--wp--preset--spacing--24: 24px;--wp--preset--spacing--32: 32px;--wp--preset--spacing--48: 48px;--wp--preset--spacing--64: 64px;--wp--preset--spacing--96: 96px;--wp--preset--spacing--128: 128px;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);--wp--preset--shadow--card: 0 8px 24px 0 rgb(13 13 15 / 8%);--wp--preset--shadow--hover: 0 20px 48px 0 rgb(13 13 15 / 16%);--wp--custom--radius--none: 0;--wp--custom--radius--xs: 2px;--wp--custom--radius--sm: 4px;--wp--custom--radius--md: 8px;--wp--custom--radius--lg: 16px;--wp--custom--radius--full: 999px;}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:root { --wp--style--global--content-size: 1280px;--wp--style--global--wide-size: 1440px; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 24px; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }:root { --wp--style--block-gap: 24px; }:root :where(.is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-layout-flow) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-layout-constrained) > *{margin-block-start: 24px;margin-block-end: 0;}:root :where(.is-layout-flex){gap: 24px;}:root :where(.is-layout-grid){gap: 24px;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{background-color: var(--wp--preset--color--neutral-0);color: var(--wp--preset--color--neutral-950);font-family: var(--wp--preset--font-family--body);font-size: var(--wp--preset--font-size--body-m);line-height: 1.6;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}a:where(:not(.wp-element-button)){color: var(--wp--preset--color--red-500);}:root :where(a:where(:not(.wp-element-button)):hover){color: var(--wp--preset--color--red-600);}h1, h2, h3, h4, h5, h6{font-family: var(--wp--preset--font-family--heading);font-weight: 700;text-transform: uppercase;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-red-50-color{color: var(--wp--preset--color--red-50) !important;}.has-red-100-color{color: var(--wp--preset--color--red-100) !important;}.has-red-200-color{color: var(--wp--preset--color--red-200) !important;}.has-red-300-color{color: var(--wp--preset--color--red-300) !important;}.has-red-400-color{color: var(--wp--preset--color--red-400) !important;}.has-red-500-color{color: var(--wp--preset--color--red-500) !important;}.has-red-600-color{color: var(--wp--preset--color--red-600) !important;}.has-red-700-color{color: var(--wp--preset--color--red-700) !important;}.has-red-800-color{color: var(--wp--preset--color--red-800) !important;}.has-red-900-color{color: var(--wp--preset--color--red-900) !important;}.has-neutral-0-color{color: var(--wp--preset--color--neutral-0) !important;}.has-neutral-50-color{color: var(--wp--preset--color--neutral-50) !important;}.has-neutral-100-color{color: var(--wp--preset--color--neutral-100) !important;}.has-neutral-200-color{color: var(--wp--preset--color--neutral-200) !important;}.has-neutral-300-color{color: var(--wp--preset--color--neutral-300) !important;}.has-neutral-400-color{color: var(--wp--preset--color--neutral-400) !important;}.has-neutral-500-color{color: var(--wp--preset--color--neutral-500) !important;}.has-neutral-600-color{color: var(--wp--preset--color--neutral-600) !important;}.has-neutral-700-color{color: var(--wp--preset--color--neutral-700) !important;}.has-neutral-800-color{color: var(--wp--preset--color--neutral-800) !important;}.has-neutral-900-color{color: var(--wp--preset--color--neutral-900) !important;}.has-neutral-950-color{color: var(--wp--preset--color--neutral-950) !important;}.has-success-color{color: var(--wp--preset--color--success) !important;}.has-warning-color{color: var(--wp--preset--color--warning) !important;}.has-info-color{color: var(--wp--preset--color--info) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-red-50-background-color{background-color: var(--wp--preset--color--red-50) !important;}.has-red-100-background-color{background-color: var(--wp--preset--color--red-100) !important;}.has-red-200-background-color{background-color: var(--wp--preset--color--red-200) !important;}.has-red-300-background-color{background-color: var(--wp--preset--color--red-300) !important;}.has-red-400-background-color{background-color: var(--wp--preset--color--red-400) !important;}.has-red-500-background-color{background-color: var(--wp--preset--color--red-500) !important;}.has-red-600-background-color{background-color: var(--wp--preset--color--red-600) !important;}.has-red-700-background-color{background-color: var(--wp--preset--color--red-700) !important;}.has-red-800-background-color{background-color: var(--wp--preset--color--red-800) !important;}.has-red-900-background-color{background-color: var(--wp--preset--color--red-900) !important;}.has-neutral-0-background-color{background-color: var(--wp--preset--color--neutral-0) !important;}.has-neutral-50-background-color{background-color: var(--wp--preset--color--neutral-50) !important;}.has-neutral-100-background-color{background-color: var(--wp--preset--color--neutral-100) !important;}.has-neutral-200-background-color{background-color: var(--wp--preset--color--neutral-200) !important;}.has-neutral-300-background-color{background-color: var(--wp--preset--color--neutral-300) !important;}.has-neutral-400-background-color{background-color: var(--wp--preset--color--neutral-400) !important;}.has-neutral-500-background-color{background-color: var(--wp--preset--color--neutral-500) !important;}.has-neutral-600-background-color{background-color: var(--wp--preset--color--neutral-600) !important;}.has-neutral-700-background-color{background-color: var(--wp--preset--color--neutral-700) !important;}.has-neutral-800-background-color{background-color: var(--wp--preset--color--neutral-800) !important;}.has-neutral-900-background-color{background-color: var(--wp--preset--color--neutral-900) !important;}.has-neutral-950-background-color{background-color: var(--wp--preset--color--neutral-950) !important;}.has-success-background-color{background-color: var(--wp--preset--color--success) !important;}.has-warning-background-color{background-color: var(--wp--preset--color--warning) !important;}.has-info-background-color{background-color: var(--wp--preset--color--info) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-red-50-border-color{border-color: var(--wp--preset--color--red-50) !important;}.has-red-100-border-color{border-color: var(--wp--preset--color--red-100) !important;}.has-red-200-border-color{border-color: var(--wp--preset--color--red-200) !important;}.has-red-300-border-color{border-color: var(--wp--preset--color--red-300) !important;}.has-red-400-border-color{border-color: var(--wp--preset--color--red-400) !important;}.has-red-500-border-color{border-color: var(--wp--preset--color--red-500) !important;}.has-red-600-border-color{border-color: var(--wp--preset--color--red-600) !important;}.has-red-700-border-color{border-color: var(--wp--preset--color--red-700) !important;}.has-red-800-border-color{border-color: var(--wp--preset--color--red-800) !important;}.has-red-900-border-color{border-color: var(--wp--preset--color--red-900) !important;}.has-neutral-0-border-color{border-color: var(--wp--preset--color--neutral-0) !important;}.has-neutral-50-border-color{border-color: var(--wp--preset--color--neutral-50) !important;}.has-neutral-100-border-color{border-color: var(--wp--preset--color--neutral-100) !important;}.has-neutral-200-border-color{border-color: var(--wp--preset--color--neutral-200) !important;}.has-neutral-300-border-color{border-color: var(--wp--preset--color--neutral-300) !important;}.has-neutral-400-border-color{border-color: var(--wp--preset--color--neutral-400) !important;}.has-neutral-500-border-color{border-color: var(--wp--preset--color--neutral-500) !important;}.has-neutral-600-border-color{border-color: var(--wp--preset--color--neutral-600) !important;}.has-neutral-700-border-color{border-color: var(--wp--preset--color--neutral-700) !important;}.has-neutral-800-border-color{border-color: var(--wp--preset--color--neutral-800) !important;}.has-neutral-900-border-color{border-color: var(--wp--preset--color--neutral-900) !important;}.has-neutral-950-border-color{border-color: var(--wp--preset--color--neutral-950) !important;}.has-success-border-color{border-color: var(--wp--preset--color--success) !important;}.has-warning-border-color{border-color: var(--wp--preset--color--warning) !important;}.has-info-border-color{border-color: var(--wp--preset--color--info) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}.has-caption-font-size{font-size: var(--wp--preset--font-size--caption) !important;}.has-body-s-font-size{font-size: var(--wp--preset--font-size--body-s) !important;}.has-body-m-font-size{font-size: var(--wp--preset--font-size--body-m) !important;}.has-body-l-font-size{font-size: var(--wp--preset--font-size--body-l) !important;}.has-h-4-font-size{font-size: var(--wp--preset--font-size--h-4) !important;}.has-h-3-font-size{font-size: var(--wp--preset--font-size--h-3) !important;}.has-h-2-font-size{font-size: var(--wp--preset--font-size--h-2) !important;}.has-h-1-font-size{font-size: var(--wp--preset--font-size--h-1) !important;}.has-display-l-font-size{font-size: var(--wp--preset--font-size--display-l) !important;}.has-display-xl-font-size{font-size: var(--wp--preset--font-size--display-xl) !important;}.has-body-font-family{font-family: var(--wp--preset--font-family--body) !important;}.has-heading-font-family{font-family: var(--wp--preset--font-family--heading) !important;} /*# sourceURL=global-styles-inline-css */ /* core paragraph */ .is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg} /* core heading */ h1:where(.wp-block-heading).has-background,h2:where(.wp-block-heading).has-background,h3:where(.wp-block-heading).has-background,h4:where(.wp-block-heading).has-background,h5:where(.wp-block-heading).has-background,h6:where(.wp-block-heading).has-background{padding:1.25em 2.375em}h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h3.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h3.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h4.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h4.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h5.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h5.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h6.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]){rotate:180deg} /* core list */ ol,ul{box-sizing:border-box}:root :where(.wp-block-list.has-background){padding:1.25em 2.375em} /* core quote */ .wp-block-quote{box-sizing:border-box;overflow-wrap:break-word}.wp-block-quote.is-large:where(:not(.is-style-plain)),.wp-block-quote.is-style-large:where(:not(.is-style-plain)){margin-bottom:1em;padding:0 1em}.wp-block-quote.is-large:where(:not(.is-style-plain)) p,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) p{font-size:1.5em;font-style:italic;line-height:1.6}.wp-block-quote.is-large:where(:not(.is-style-plain)) cite,.wp-block-quote.is-large:where(:not(.is-style-plain)) footer,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) cite,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) footer{font-size:1.125em;text-align:right}.wp-block-quote>cite{display:block} /* ===== fonts.css ===== */ /** * Self-hosted fonts (latin subset) — only the weights used in Figma. * Barlow: 400, 500, 600 · Barlow Condensed: 300, 600, 700. */ @font-face { font-family: Barlow; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/barlow-400.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Barlow; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Barlow; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/barlow-condensed-300.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-600.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ===== tokens.css ===== */ /** * ATEQ design tokens — Figma "Foundations" (node 4-86), Light mode only. * Letter-spacing: Figma percentages converted to em (30% → 0.3em). */ :root { /* Primitives — ATEQ Red */ --red-50: #fdecf0; --red-100: #fbd0da; --red-200: #f6a1b5; --red-300: #f06a8a; --red-400: #ea194a; --red-500: #d31245; --red-600: #c40d3f; --red-700: #a80533; --red-800: #7a0326; --red-900: #4a0217; /* Primitives — Neutral (Graphite) */ --neutral-0: #fff; --neutral-50: #f6f6f7; --neutral-100: #ededef; --neutral-200: #dcdce0; --neutral-300: #c4c4ca; --neutral-400: #9a9aa2; --neutral-500: #6e6e77; --neutral-600: #4e4e56; --neutral-700: #34343a; --neutral-800: #222226; --neutral-900: #16161a; --neutral-950: #0c0c0e; /* Primitives — Feedback */ --success: #1f9d55; --warning: #e0a100; --info: #2563eb; /* Semantic tokens (Light) */ --bg-page: var(--neutral-0); --bg-subtle: var(--neutral-50); --bg-inverse: var(--neutral-950); --bg-accent: var(--red-500); --bg-accent-hover: var(--red-600); --bg-accent-soft: var(--red-50); /* Bright red: large accents only (pins, big figures, graphics), never small text */ --accent-bright: var(--red-500); --bg-elevated: var(--neutral-0); --text-primary: var(--neutral-950); --text-secondary: var(--neutral-500); --text-muted: var(--neutral-400); --text-accent: var(--red-500); --text-accent-inverse: var(--red-500); --text-inverse: var(--neutral-0); --icon-inverse: var(--neutral-0); --border-default: var(--neutral-200); --border-strong: var(--neutral-950); /* Font families */ --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; --font-heading: "Barlow Condensed", "Arial Narrow", sans-serif; /* Text styles — Display / Heading (Barlow Condensed) */ --display-xl-size: 120px; --display-xl-weight: 700; --display-xl-line: 1; --display-xl-tracking: -0.01em; --display-l-size: 88px; --display-l-weight: 700; --display-l-line: 0.95; --display-l-tracking: -0.005em; --h1-size: 64px; --h1-weight: 700; --h1-line: 1; --h2-size: 48px; --h2-weight: 700; --h2-line: 1.05; --h3-size: 32px; --h3-weight: 600; --h3-line: 1.15; --h4-size: 24px; --h4-weight: 600; --h4-line: 1.2; --number-section-size: 80px; --number-section-weight: 300; --number-section-line: 1; /* Text styles — Labels / Body (Barlow) */ --eyebrow-size: 13px; --eyebrow-weight: 600; --eyebrow-line: 1.4; --eyebrow-tracking: 0.3em; --button-size: 14px; --button-weight: 600; --button-line: 1; --button-tracking: 0.15em; --nav-size: 15px; --nav-weight: 500; --nav-line: 1; --nav-tracking: 0.06em; --body-l-size: 20px; --body-l-line: 1.6; --body-m-size: 16px; --body-m-line: 1.6; --body-s-size: 14px; --body-s-line: 1.5; --caption-size: 12px; --caption-weight: 500; --caption-line: 1.4; --caption-tracking: 0.04em; /* Spacing scale (px) */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px; --space-128: 128px; /* Radii */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 999px; /* Elevation */ --shadow-card: 0 8px 24px 0 rgb(13 13 15 / 8%); --shadow-hover: 0 20px 48px 0 rgb(13 13 15 / 16%); /* Layout */ --container: 1280px; --gutter: 20px; --header-height: 64px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 200ms; --duration-base: 300ms; } @media (min-width: 768px) { :root { --gutter: 40px; --header-height: 96px; } } @media (min-width: 1280px) { :root { --gutter: 80px; } } /* ===== base.css ===== */ /** * Base: reset, typography, layout helpers, accessibility. */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-body); font-size: var(--body-m-size); font-weight: 400; line-height: var(--body-m-line); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Footer stays at the bottom of short pages */ body { display: flex; flex-direction: column; min-height: 100vh; } .site-main { flex: 1 0 auto; } body.is-menu-open { overflow: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); text-transform: uppercase; } h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-line); } h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-line); } h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-line); text-transform: none; } h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-line); text-transform: none; } ul, ol { margin: 0; padding: 0; list-style: none; } address { font-style: normal; } button { font: inherit; color: inherit; } [hidden] { display: none !important; } /* Anchors (e.g. #contact) land below the sticky header */ [id] { scroll-margin-top: var(--header-height); } /* Layout */ .container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .site-main { padding-block: var(--space-64); } /* Accessibility */ :focus-visible { outline: 2px solid var(--red-500); outline-offset: 3px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus { top: var(--space-8); left: var(--space-8); z-index: 1000; width: auto; height: auto; margin: 0; padding: var(--space-12) var(--space-16); clip-path: none; background: var(--bg-page); color: var(--text-primary); font-weight: 600; } /* Animations for every visitor, unless the ATEQ option "respect reduce motion" is ticked AND the visitor asked for it (html.reduce-motion, set in by inc/motion.php). */ html:not(.reduce-motion) { scroll-behavior: smooth; } .reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } /* Pages built with ATEQ blocks: no extra padding */ .site-main--blocks { padding: 0; } /* ===== header.css ===== */ /** * Site header — Figma "Header" (7-73), mobile header (13-4) * and mobile menu (13-106). * Solid: white background + bottom border. Transparent: over the hero, turns * Solid after 80px of scroll (.is-scrolled, 300ms). */ .site-header { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border-default); background: var(--bg-page); color: var(--text-primary); transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); } .site-header--transparent { position: fixed; right: 0; left: 0; border-bottom-color: transparent; background: transparent; color: var(--text-inverse); } .site-header--transparent.is-scrolled { border-bottom-color: var(--border-default); background: var(--bg-page); color: var(--text-primary); } .admin-bar .site-header { top: 46px; } /* Below 600px the WordPress admin bar scrolls away with the page */ @media (max-width: 600px) { .admin-bar .site-header { top: 0; } .admin-bar .site-header--transparent { position: absolute; top: 46px; } } @media (min-width: 783px) { .admin-bar .site-header { top: 32px; } } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: calc(var(--header-height) - 1px); /* + 1px border = Figma height */ padding-inline: var(--gutter); } /* Logo — Light on transparent, Dark on solid */ .site-header__brand { display: block; flex-shrink: 0; } .site-header__logo { width: auto; height: 23.25px; } .site-header__logo--light { display: none; } /* Transparent header: both logos stacked, cross-faded with the background (visibility keeps only the visible one for screen readers) */ .site-header--transparent .site-header__brand { display: grid; } .site-header--transparent .site-header__logo { display: block; grid-area: 1 / 1; transition: opacity var(--duration-base) var(--ease-out), visibility var(--duration-base) var(--ease-out); } .site-header--transparent .site-header__logo--dark, .site-header--transparent.is-scrolled .site-header__logo--light { visibility: hidden; opacity: 0; } .site-header--transparent.is-scrolled .site-header__logo--dark { visibility: visible; opacity: 1; } /* Transparent header over a light hero: dark logo and text from the start */ .site-header--on-light { color: var(--text-primary); } .site-header--transparent.site-header--on-light .site-header__logo--light { visibility: hidden; opacity: 0; } .site-header--transparent.site-header--on-light .site-header__logo--dark { visibility: visible; opacity: 1; } /* Desktop navigation */ .site-nav { display: none; } .site-nav__list { display: flex; gap: var(--space-48); align-items: flex-start; } .site-nav__link { display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: var(--nav-size); font-weight: var(--nav-weight); line-height: var(--nav-line); letter-spacing: var(--nav-tracking); text-decoration: none; text-transform: uppercase; white-space: nowrap; } .site-nav__link::after { content: ""; width: 16px; height: 2px; background: var(--bg-accent); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); } .site-nav__link:hover::after, .site-nav__link.is-current::after { opacity: 1; } /* Actions */ .site-header__actions { display: flex; gap: 28px; align-items: center; } .site-header__contact { display: none; padding: 12px 22px; border: 0; background: var(--bg-accent); color: var(--text-inverse); font-size: var(--button-size); font-weight: var(--button-weight); line-height: var(--button-line); letter-spacing: var(--button-tracking); text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .site-header__contact:hover { background: var(--bg-accent-hover); } .site-header--transparent:not(.is-scrolled) .site-header__contact { border: 1.5px solid var(--icon-inverse); background: transparent; } .site-header--transparent:not(.is-scrolled) .site-header__contact:hover { background: var(--bg-page); color: var(--text-primary); } /* On a light hero: the regular red Contact button */ .site-header--on-light:not(.is-scrolled) .site-header__contact { border: 0; background: var(--bg-accent); color: var(--text-inverse); } .site-header--on-light:not(.is-scrolled) .site-header__contact:hover { background: var(--bg-accent-hover); color: var(--text-inverse); } .site-header__burger, .mobile-menu__close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; cursor: pointer; } @media (min-width: 768px) { .site-header__logo { height: 31px; } /* Logo left, menu centred, empty right column (no Contact button) */ .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; } .site-header__brand { justify-self: start; } .site-header__actions { justify-self: end; } .site-nav { display: block; } .site-header__burger { display: none; } } @media (min-width: 768px) and (max-width: 1023px) { .site-nav__list { gap: var(--space-24); } } /* Mobile menu overlay */ .mobile-menu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg-page); color: var(--text-primary); } .admin-bar .mobile-menu { top: 46px; } .mobile-menu__bar { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; height: 64px; padding-inline: 20px; } .mobile-menu__nav { padding: var(--space-24) 20px 0; } .mobile-menu__list { counter-reset: menu; } .mobile-menu__item { border-bottom: 1px solid var(--border-default); counter-increment: menu; } .mobile-menu__link { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; font-family: var(--font-heading); font-size: var(--h3-size); font-weight: 700; line-height: 1.05; text-decoration: none; text-transform: uppercase; } .mobile-menu__link::after { content: counter(menu, decimal-leading-zero); color: var(--text-muted); font-family: var(--font-body); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-line); letter-spacing: var(--caption-tracking); } .mobile-menu__link.is-current, .mobile-menu__link:hover { color: var(--text-accent); } .mobile-menu__contact { display: flex; flex: 1 0 auto; flex-direction: column; gap: var(--space-8); padding: var(--space-32) 20px; background: var(--bg-inverse); color: var(--text-inverse); } .mobile-menu__address { margin: 0; font-size: var(--body-s-size); line-height: var(--body-s-line); } .mobile-menu__address a { text-decoration: none; } /* Same square links as the footer (Figma 8-78) */ .mobile-menu__social { display: flex; gap: var(--space-12); margin: var(--space-16) 0 0; padding: 0; list-style: none; } .mobile-menu__social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--icon-inverse); color: var(--text-inverse); font-size: var(--button-size); font-weight: var(--button-weight); line-height: var(--button-line); letter-spacing: var(--button-tracking); text-decoration: none; text-transform: uppercase; } html:not(.reduce-motion) .mobile-menu:not([hidden]) { animation: ateq-menu-in var(--duration-base) var(--ease-out); } @keyframes ateq-menu-in { from { opacity: 0; } } @media (min-width: 768px) { .mobile-menu { display: none; } } /* ===== footer.css ===== */ /** * Site footer — Figma "Footer" (8-78) / "Footer mobile" (13-98). * Mobile: logo, menu, head office, copyright. Desktop: 4 columns + bottom bar. */ .site-footer { background: var(--bg-inverse); color: var(--text-inverse); } .site-footer__inner { display: flex; flex-direction: column; gap: var(--space-32); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-48) var(--gutter) 40px; } .site-footer__top { display: flex; flex-direction: column; gap: var(--space-16); } .site-footer__logo { width: 79px; height: auto; } .site-footer a { text-decoration: none; } .site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; } .site-footer__col { display: flex; flex-direction: column; gap: 14px; } /* Mobile: tagline, solutions and menu title are hidden (Figma 13-98) */ .site-footer__tagline, .site-footer__col--solutions, .site-footer__col--menu .site-footer__title, .site-footer__divider, .site-footer__rights { display: none; } .site-footer__list { display: flex; flex-direction: column; gap: var(--space-16); } .site-footer__col--menu .site-footer__list { line-height: var(--nav-line); } .site-footer__col--menu a { font-size: var(--nav-size); font-weight: var(--nav-weight); line-height: var(--nav-line); letter-spacing: var(--nav-tracking); text-transform: uppercase; } .site-footer__col--contact { margin-top: var(--space-16); } .site-footer__col--contact .site-footer__list { gap: var(--space-4); font-size: var(--body-s-size); line-height: var(--body-s-line); opacity: 0.75; } .site-footer__bottom { display: flex; flex-direction: column; gap: var(--space-24); } .site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 0.3em; margin: 0; color: rgb(255 255 255 / 50%); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-line); letter-spacing: var(--caption-tracking); } .site-footer__legal :is(a, .cookie-consent__settings) { transition: color var(--duration-fast) var(--ease-out); } .site-footer__legal :is(a, .cookie-consent__settings):hover { color: var(--red-500); } .site-footer__legal .cookie-consent__settings { padding: 0; border: 0; background: transparent; cursor: pointer; } .site-footer__legal .cookie-consent__settings:hover { text-decoration: underline; text-underline-offset: 3px; } .site-footer__social { display: flex; gap: var(--space-12); } .site-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--icon-inverse); font-size: var(--button-size); font-weight: var(--button-weight); line-height: var(--button-line); letter-spacing: var(--button-tracking); text-transform: uppercase; opacity: 0.8; transition: opacity var(--duration-fast) var(--ease-out); } .site-footer__social a:hover { text-decoration: none; opacity: 1; } @media (min-width: 768px) { .site-footer__inner { gap: var(--space-64); padding-top: var(--space-96); } .site-footer__top { flex-flow: row wrap; gap: var(--space-48) var(--space-32); justify-content: space-between; } .site-footer__brand { display: flex; flex-basis: 100%; flex-direction: column; gap: var(--space-24); } .site-footer__tagline { display: block; max-width: 320px; margin: 0; opacity: 0.7; } .site-footer__col--solutions, .site-footer__col--menu .site-footer__title { display: flex; } .site-footer__list { gap: 14px; } .site-footer__list a, .site-footer__list span, .site-footer__col--menu a { font-size: var(--body-m-size); font-weight: 400; line-height: var(--body-m-line); letter-spacing: 0; text-transform: none; opacity: 0.75; } .site-footer__col--contact { margin-top: 0; } .site-footer__col--contact .site-footer__list { gap: 14px; font-size: var(--body-m-size); line-height: var(--body-m-line); opacity: 1; } .site-footer__list a:hover { opacity: 1; } .site-footer__divider { display: block; width: 100%; height: 1px; margin: 0; border: 0; background: var(--icon-inverse); opacity: 0.15; } .site-footer__rights { display: inline; } .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } .site-footer__legal { font-size: var(--body-s-size); font-weight: 400; line-height: var(--body-s-line); letter-spacing: 0; } } @media (min-width: 1024px) { .site-footer__brand { flex-basis: 320px; } } /* ===== buttons.css ===== */ /** * Buttons — Figma "Button" (5-78): Primary, Dark, Outline Light. * Hover: color change + arrow slides (200ms ease-out). */ .button { display: inline-flex; gap: var(--space-12); align-items: center; justify-content: center; padding: 18px 28px 18px 32px; border: 1.5px solid transparent; background: var(--bg-accent); color: var(--text-inverse); font-family: var(--font-body); font-size: var(--button-size); font-weight: var(--button-weight); line-height: var(--button-line); letter-spacing: var(--button-tracking); text-decoration: none; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .button .icon { flex-shrink: 0; transition: transform var(--duration-fast) var(--ease-out); } .button:hover .icon, .button:focus-visible .icon { transform: translateX(4px); } .button:hover { background: var(--bg-accent-hover); } .button--dark { background: var(--bg-inverse); } .button--dark:hover { background: var(--bg-accent); } .button--outline-light { border-color: var(--icon-inverse); background: transparent; } .button--outline-light:hover { background: var(--bg-page); color: var(--text-primary); } .button--outline-light:focus-visible { outline-color: var(--icon-inverse); } /* ===== components.css ===== */ /** * Shared components (front + editor): section heading, link button, * category tag, dot-matrix world map. */ /* ---------- Eyebrow — Figma Label/Eyebrow ---------- */ .eyebrow { margin: 0; color: var(--text-accent); font-family: var(--font-body); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); line-height: var(--eyebrow-line); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; } /* The same ATEQ red is used on light and dark backgrounds. */ :is(.site-footer, .mobile-menu__contact, .section-heading--dark) .eyebrow, .section-heading--dark .section-heading__eyebrow { color: var(--text-accent-inverse); } /* ---------- Section heading — Figma 8-65 ---------- */ .section-heading { display: flex; gap: var(--space-48); align-items: flex-start; color: var(--text-primary); } .section-heading--dark { color: var(--text-inverse); } /* Mobile keeps the section label horizontal above the title. */ .section-heading__index { display: none; } .section-heading__main { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; } .section-heading__title { margin: 0; font-family: var(--font-heading); font-size: 44px; font-weight: var(--h1-weight); line-height: 1; text-transform: uppercase; } @media (min-width: 768px) { /* Figma component padding (instances: 32px top/bottom/right) */ .section-heading { gap: 64px; padding-block: var(--space-32); padding-right: var(--space-32); } .section-heading__index { display: flex; flex-direction: column; gap: var(--space-16); align-items: center; } .section-heading__rule { width: 2px; height: 90px; flex-shrink: 0; background: var(--bg-accent); } .section-heading__eyebrow { color: var(--text-accent); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); line-height: var(--eyebrow-line); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); } /* The kicker duplicates the index: kept for screen readers only */ .section-heading__kicker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .section-heading__title { font-size: var(--h1-size); line-height: var(--h1-line); white-space: nowrap; } .section-heading__title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 20px; background: currentcolor; } } /* ---------- Link button — Figma Button / Link ---------- */ .link-button { display: inline-flex; gap: var(--space-12); align-items: center; padding-bottom: 6px; border-bottom: 1.5px solid var(--border-strong); color: var(--text-primary); font-size: var(--button-size); font-weight: var(--button-weight); line-height: var(--button-line); letter-spacing: var(--button-tracking); text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: gap var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .link-button:hover, .link-button:focus-visible { gap: 20px; border-color: var(--text-accent); color: var(--text-accent); } /* ---------- Tag on image — Figma Tag / On image ---------- */ .tag { display: inline-block; padding: 7px 14px; border-radius: var(--radius-full); background: var(--bg-accent); color: var(--text-inverse); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); line-height: var(--eyebrow-line); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; white-space: nowrap; } /* ---------- Pixel world map (World page + teaser) — Brand assets, proposition A (46-3): square pixels, bright red square pins ---------- */ .world-map { width: 100%; height: auto; overflow: visible; } /* Small squares filled and stroked in the same colour: the round stroke join rounds their corners (stroke width set per map in the SVG). */ .world-map__land { fill: var(--icon-inverse); stroke: var(--icon-inverse); stroke-linejoin: round; opacity: 0.38; /* Figma: white at 38% */ } .world-map--detailed .world-map__land { opacity: 0.42; /* finer dots: a touch brighter to keep the same presence */ } .world-map__halo { fill: var(--accent-bright); opacity: 0.22; } .world-map__dot { fill: var(--accent-bright); } /* ---------- CTA band — Figma 38-1163 / 32-1440, black version with an origami shape (Brand assets, proposition C 46-1339) — blocks + World page ---------- */ .cta-band { position: relative; overflow: hidden; border-bottom: 1px solid rgb(255 255 255 / 12%); /* before the black footer */ background: var(--bg-inverse); color: var(--text-inverse); } .cta-band__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-24); align-items: flex-start; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-48) var(--gutter); } .cta-band__text { display: flex; flex-direction: column; gap: var(--space-12); } .cta-band__title { display: flex; flex-direction: column; font-size: 40px; line-height: 1; } .cta-band__intro { margin: 0; font-size: var(--body-m-size); line-height: var(--body-m-line); opacity: 0.85; } .cta-band__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--space-16); } .cta-band .button:focus-visible { outline-color: var(--icon-inverse); } /* Origami shape — flush against the right edge of the viewport (Figma 38-1163, 32-1440, 12-534): chevron and zigzag take the full band height, the ribbon sits in the bottom right corner. The shape lives outside the centred container, so it stays on the screen edge at any width. --cta-h: band height the shape is drawn for; --cta-ratio: shape width / height. The text only reserves room for the part of the shape that overlaps the container (wide screens need no reserve). */ .cta-band--has-shape { --cta-h: 150px; --cta-ratio: 0.757; /* chevron 318 × 420 */ --cta-shape: calc(var(--cta-h) * var(--cta-ratio)); } .cta-band--has-shape:has(.origami--zigzag) { --cta-ratio: 0.394; /* 165 × 420 */ } /* Ribbon: fixed width, bottom right corner */ .cta-band--has-shape:has(.origami--ribbon) { --cta-shape: 180px; } .cta-band__shape { position: absolute; right: 0; bottom: 0; z-index: 0; display: flex; align-items: flex-end; justify-content: flex-end; height: var(--cta-h); line-height: 0; pointer-events: none; } .cta-band__shape .origami { display: block; width: auto; height: 100%; } .cta-band__shape:has(.origami--ribbon) { height: auto; } .cta-band__shape .origami--ribbon { width: var(--cta-shape); height: auto; } /* Mobile: shape in the bottom right corner, below the buttons */ .cta-band--has-shape .cta-band__inner { padding-bottom: calc(var(--cta-h) + var(--space-16)); } .cta-band--has-shape:has(.origami--ribbon) .cta-band__inner { padding-bottom: calc(var(--cta-shape) * 0.393 + var(--space-24)); } @media (min-width: 768px) { .cta-band__inner { flex-direction: row; gap: var(--space-48); align-items: center; justify-content: space-between; padding-block: var(--space-64); } .cta-band__title { font-size: var(--h2-size); } .cta-band__intro { font-size: var(--body-l-size); line-height: var(--body-l-line); } .cta-band__actions { flex-shrink: 0; } /* From 768px: chevron and zigzag full height on the right */ .cta-band--has-shape { --cta-h: 340px; } .cta-band--has-shape:has(.origami--ribbon) { --cta-shape: 320px; } .cta-band__shape { top: 0; height: auto; } .cta-band__shape:has(.origami--ribbon) { top: auto; } /* Stacked text and buttons, clear of the shape */ .cta-band--has-shape .cta-band__inner { flex-direction: column; gap: var(--space-32); align-items: flex-start; justify-content: center; min-height: var(--cta-h); padding-right: max(var(--gutter), calc(var(--cta-shape) + var(--space-48) - max(0px, (100vw - var(--container) - 2 * var(--gutter)) / 2))); padding-bottom: var(--space-64); } .cta-band--has-shape:has(.origami--ribbon) .cta-band__inner { padding-bottom: calc(var(--cta-shape) * 0.393 + var(--space-24)); } } @media (min-width: 1024px) { .cta-band__inner { padding-block: var(--space-96); } .cta-band__title { font-size: var(--h1-size); } .cta-band--large .cta-band__title { font-size: var(--display-l-size); line-height: var(--display-l-line); letter-spacing: var(--display-l-tracking); } /* Figma: 420px band, chevron 318 × 420, zigzag 165 × 420, ribbon 480 wide */ .cta-band--has-shape { --cta-h: 420px; } .cta-band--has-shape:has(.origami--ribbon) { --cta-shape: 480px; } .cta-band--has-shape .cta-band__inner { padding-bottom: var(--space-96); } /* Ribbon: the text keeps the full width, the ribbon stays below it */ .cta-band--has-shape:has(.origami--ribbon) .cta-band__inner { padding-right: var(--gutter); padding-bottom: calc(var(--cta-shape) * 0.393 + var(--space-24)); } } /* Desktop — shapes as placed in the Figma mockups (decorations v2): zigzag turned 90° in the top right corner (World), ribbon in the top right corner (Careers); chevron unchanged (full height on the right). */ @media (min-width: 1024px) { .cta-band__shape:has(.origami--zigzag) { top: 0; right: 0; bottom: auto; width: 420px; height: 165px; } .cta-band__shape .origami--zigzag { position: absolute; top: 50%; left: 50%; width: 165px; height: 420px; transform: translate(-50%, -50%) rotate(90deg); } .cta-band__shape:has(.origami--ribbon) { top: 0; right: -40px; bottom: auto; } /* Both shapes now sit above the buttons: no side or bottom reserve */ .cta-band--has-shape:has(.origami--zigzag) .cta-band__inner, .cta-band--has-shape:has(.origami--ribbon) .cta-band__inner { padding-right: var(--gutter); padding-bottom: var(--space-96); } } /* Title and buttons side by side once both fit next to the shape */ @media (min-width: 1400px) { .cta-band--has-shape .cta-band__inner { flex-direction: row; gap: var(--space-32); align-items: center; justify-content: space-between; } } /* ===== content.css ===== */ /** * Text content — pages (page.php) and news articles (single.php). * Figma 11-461 "Rich text": Body/L paragraphs, H3 subheadings, quote with a * red rule, full-width images, lists, buttons. * * The same rules style the block editor canvas (.is-root-container), so * what editors see matches the site. */ .text-page { padding-block: var(--space-48) var(--space-64); } .text-page__title { max-width: 760px; margin-bottom: var(--space-32); font-size: 40px; } .prose { max-width: 760px; } /* Editor canvas: 760px column, like the site */ .editor-styles-wrapper .is-root-container { --wp--style--global--content-size: 760px; } :is(.prose, .editor-styles-wrapper .is-root-container) { color: var(--text-secondary); font-family: var(--font-body); font-size: var(--body-m-size); line-height: var(--body-m-line); } :is(.prose, .editor-styles-wrapper .is-root-container) > * { margin-block: 0; } :is(.prose, .editor-styles-wrapper .is-root-container) > * + * { margin-top: 28px; } /* Headings */ :is(.prose, .editor-styles-wrapper .is-root-container) > :is(h2, h3, h4) { color: var(--text-primary); font-family: var(--font-heading); font-weight: var(--h3-weight); text-transform: none; } :is(.prose, .editor-styles-wrapper .is-root-container) > h2 { font-size: var(--h4-size); line-height: var(--h4-line); } :is(.prose, .editor-styles-wrapper .is-root-container) > h3 { font-size: 20px; line-height: var(--h4-line); } :is(.prose, .editor-styles-wrapper .is-root-container) > h4 { font-family: var(--font-body); font-size: var(--body-m-size); font-weight: 600; line-height: var(--body-m-line); } :is(.prose, .editor-styles-wrapper .is-root-container) > * + :is(h2, h3, h4) { margin-top: var(--space-48); } /* Links */ :is(.prose, .editor-styles-wrapper .is-root-container) :is(p, li) a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 3px; } :is(.prose, .editor-styles-wrapper .is-root-container) :is(p, li) a:hover { color: var(--red-600); } /* Lists */ :is(.prose, .editor-styles-wrapper .is-root-container) > :is(ul, ol) { padding-left: 1.25em; } :is(.prose, .editor-styles-wrapper .is-root-container) > ul { list-style: square; } :is(.prose, .editor-styles-wrapper .is-root-container) > ol { list-style: decimal; } :is(.prose, .editor-styles-wrapper .is-root-container) li::marker { color: var(--text-accent); } :is(.prose, .editor-styles-wrapper .is-root-container) li + li { margin-top: var(--space-8); } /* Quote — Figma 11-466: 4px red rule, H3 text, eyebrow source */ :is(.prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote { margin-inline: 0; padding: var(--space-16) 0 var(--space-16) var(--space-24); border-left: 4px solid var(--bg-accent); } :is(.prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote p { margin: 0; color: var(--text-primary); font-family: var(--font-heading); font-size: var(--h4-size); font-weight: var(--h3-weight); line-height: var(--h3-line); } :is(.prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote p + p { margin-top: var(--space-16); } :is(.prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote cite { display: block; margin-top: var(--space-16); color: var(--text-accent); font-size: var(--eyebrow-size); font-style: normal; font-weight: var(--eyebrow-weight); line-height: var(--eyebrow-line); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; } :is(.prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote cite::before { content: "— "; } /* Images, gallery, video */ :is(.prose, .editor-styles-wrapper .is-root-container) > :is(.wp-block-image, .wp-block-video, .wp-block-gallery) { margin-inline: 0; } :is(.prose, .editor-styles-wrapper .is-root-container) :is(.wp-block-image, .wp-block-video) :is(img, video) { display: block; width: 100%; height: auto; } :is(.prose, .editor-styles-wrapper .is-root-container) figcaption { margin: var(--space-12) 0 0; color: var(--text-secondary); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-line); letter-spacing: var(--caption-tracking); text-align: left; } :is(.prose, .editor-styles-wrapper .is-root-container) > .wp-block-gallery { gap: var(--space-16); } /* Separator */ :is(.prose, .editor-styles-wrapper .is-root-container) > .wp-block-separator { width: 100%; height: 0; margin-block: var(--space-48); border: 0; border-top: 1px solid var(--border-default); opacity: 1; } /* Buttons — Figma Button Primary / Outline (block style "Outline") */ :is(.prose, .editor-styles-wrapper .is-root-container) > .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-16); } :is(.prose, .editor-styles-wrapper .is-root-container) .wp-block-button__link { display: inline-flex; gap: var(--space-12); align-items: center; padding: 18px 28px 18px 32px; border: 1.5px solid var(--bg-accent); border-radius: 0; background: var(--bg-accent); color: var(--text-inverse); font-family: var(--font-body); font-size: var(--button-size); font-weight: var(--button-weight); line-height: var(--button-line); letter-spacing: var(--button-tracking); text-decoration: none; text-transform: uppercase; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } /* Arrow icon (same drawing as assets/img/icons/arrow-right.svg) */ :is(.prose, .editor-styles-wrapper .is-root-container) .wp-block-button__link::after { content: ""; width: 18px; height: 18px; background: currentcolor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9H15M10.5 13.5L15 9L10.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9H15M10.5 13.5L15 9L10.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--duration-fast) var(--ease-out); } .prose .wp-block-button__link:hover { border-color: var(--bg-accent-hover); background: var(--bg-accent-hover); color: var(--text-inverse); } .prose .wp-block-button__link:hover::after { transform: translateX(4px); } :is(.prose, .editor-styles-wrapper .is-root-container) .is-style-outline .wp-block-button__link { border-color: var(--border-strong); background: transparent; color: var(--text-primary); } .prose .is-style-outline .wp-block-button__link:hover { border-color: var(--border-strong); background: var(--bg-inverse); color: var(--text-inverse); } /* Article: the first paragraph is the lead (Figma: Heading/H4, primary) */ .prose--article > p:first-child { color: var(--text-primary); font-family: var(--font-heading); font-size: 20px; font-weight: var(--h4-weight); line-height: var(--h4-line); } @media (min-width: 768px) { .text-page { padding-block: var(--space-96) var(--space-128); } .text-page__title { margin-bottom: var(--space-48); font-size: var(--h1-size); } :is(.prose, .editor-styles-wrapper .is-root-container) { font-size: var(--body-l-size); line-height: var(--body-l-line); } :is(.prose, .editor-styles-wrapper .is-root-container) > h2 { font-size: var(--h3-size); line-height: var(--h3-line); } :is(.prose, .editor-styles-wrapper .is-root-container) > h3 { font-size: var(--h4-size); } :is(.prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote { padding-left: 36px; } :is(.prose, .editor-styles-wrapper .is-root-container) > .wp-block-quote p { font-size: var(--h3-size); } .prose--article > p:first-child { font-size: var(--h4-size); } } /* ===== decor.css ===== */ /** * Decorations v2 — reproduced from the Figma mockups (layers « 🔶 Décor », * placed by ATEQ), brand elements only: origami shapes and the pixel * pattern (assets/img/decor/). Desktop only (≥ 1024px). * * Positions come from the 1440px mockups: * - shapes against a screen edge use calc(50% - 50vw ± offset) on centred * sections, so they stay on the edge at any width; * - shapes near content use an offset from the centre (calc(50% ± …)). * Textures (pixel pattern) sit behind the content and are cropped by their * section, like in Figma; shapes placed on the page itself (not inside a * section) may straddle two sections. * Also in other files: Home hero texture (Hero divisions block), CTA band * shapes (components.css), About hero cubes (Page hero block). */ /* Shapes placed past the screen edge (e.g. the Careers CTA ribbon) must never create a horizontal scrollbar */ html, body { overflow-x: clip; } @media (min-width: 1024px) { /* ---------- Common ---------- */ /* Textures: behind the content, cropped by their section */ .home .latest-news, :is(.blog, .archive, .search) .page-title, .ateq-page-careers .feature-cards, .ateq-page-careers .testimonials, .ateq-page-about-us .timeline, .ateq-page-about-us .division-cards, .ateq-page-about-us .feature-cards, .home .worldwide-teaser { position: relative; isolation: isolate; overflow: clip; } /* Shapes that straddle two sections */ .home .about, :is(.blog, .archive, .search) .featured-news__inner, :is(.blog, .archive, .search) .site-main, .single-post .article-header, .single-post .article-body, .page-template-page-worldwide .ww-regions, .ateq-page-careers .page-hero, .ateq-page-careers .split-media, .ateq-page-about-us .split-media { position: relative; } .home .latest-news::before, :is(.blog, .archive, .search) .page-title::before, .ateq-page-careers .feature-cards::before, .ateq-page-careers .feature-cards::after, .ateq-page-careers .testimonials::before, .ateq-page-about-us .timeline::before, .ateq-page-about-us .division-cards::before, .ateq-page-about-us .feature-cards::before, .home .worldwide-teaser::before, .home .about::before, :is(.blog, .archive, .search) .featured-news__inner::after, :is(.blog, .archive, .search) .site-main::after, .single-post .article-header::before, .single-post .article-body::before, .page-template-page-worldwide .ww-regions::before, .ateq-page-careers .page-hero::after, .ateq-page-careers .split-media::before, .ateq-page-about-us .split-media::before { content: ""; position: absolute; z-index: 2; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; } /* Pixel textures: behind the content */ .home .latest-news::before, :is(.blog, .archive, .search) .page-title::before, .ateq-page-careers .feature-cards::before, .ateq-page-careers .feature-cards::after, .ateq-page-careers .testimonials::before, .ateq-page-about-us .timeline::before, .ateq-page-about-us .feature-cards::before { z-index: -1; background-image: url(../img/decor/texture-gris.svg?v=horizontal-2); /* Keep the source squares around 12px instead of enlarging to fill. */ background-size: 660px auto; } .ateq-page-about-us .timeline::before { background-image: url(../img/decor/texture-gris.svg?v=horizontal-2); filter: invert(1); } /* ---------- Home ---------- */ /* « The Group »: chevron turned 90°, top left against the edge */ .home .about::before { top: -28px; left: calc(50% - 50vw + 30px); width: 174px; height: 230px; background-image: url(../img/decor/origami-chevron.svg); transform: rotate(90deg); } /* News: pixel pattern, top right */ .home .latest-news::before { top: -21px; right: calc(50% - 50vw + 3px); width: 750px; height: 386px; } /* Worldwide teaser: ribbon in the top right corner */ .home .worldwide-teaser::before { top: 1px; right: calc(50% - 50vw); width: 300px; height: 118px; background-image: url(../img/decor/origami-ribbon.svg); } /* ---------- News, categories, search ---------- */ /* Page title: pixel pattern, centre left */ :is(.blog, .archive, .search) .page-title::before { top: -59px; left: calc(50% - 329px); width: 557px; height: 286px; } /* Featured article: ribbon under the bottom right corner of the image (image = 59.375 % of the container width, ratio 760 / 480) */ :is(.blog, .archive, .search) .featured-news__inner { --featured-width: min(var(--container), 100vw - 2 * var(--gutter)); } :is(.blog, .archive, .search) .featured-news__inner::after { top: calc(var(--space-64) + var(--featured-width) * 0.375 - 2px); left: calc(var(--gutter) + var(--featured-width) * 0.59375 - 300px); width: 300px; height: 118px; background-image: url(../img/decor/origami-ribbon.svg); } /* Above the footer: chevron on the left, cut by the footer */ :is(.blog, .archive, .search) .site-main { overflow: clip; } :is(.blog, .archive, .search) .site-main::after { bottom: -65px; left: -29px; width: 155px; height: 204px; background-image: url(../img/decor/origami-chevron.svg); } /* ---------- Article ---------- */ /* Chevron on the left edge, level with the end of the header */ .single-post .article-header::before { top: 307px; left: calc(50% - 50vw - 18px); width: 197px; height: 260px; background-image: url(../img/decor/origami-chevron.svg); } /* Zigzag flipped, on the right edge of the text */ .single-post .article-body::before { top: 512px; right: calc(50% - 50vw - 32px); width: 190px; height: 482px; background-image: url(../img/decor/origami-zigzag.svg); transform: scaleX(-1); } /* ---------- World ---------- */ /* Cubes on the right edge, peeking below the region tabs */ .page-template-page-worldwide .ww-regions::before { top: -45px; right: calc(50% - 50vw - 6px); z-index: 1; width: 142px; height: 109px; background-image: url(../img/decor/origami-cubes.svg); } /* ---------- Careers ---------- */ /* Hero: chevron flipped, bottom right */ .ateq-page-careers .page-hero::after { top: 340px; right: calc(50% - 50vw - 35px); width: 318px; height: 420px; background-image: url(../img/decor/origami-chevron.svg); transform: scaleX(-1); } /* Careers: horizontal texture above the heading, vertical along the left edge. */ .ateq-page-careers .feature-cards::before { top: auto; bottom: -64px; left: -96px; width: 340px; height: 660px; background-image: url(../img/decor/texture-gris-vertical.svg?v=2); background-size: auto 660px; } .ateq-page-careers .feature-cards::after { top: -48px; right: calc(50% - 50vw - 88px); width: 732px; height: 376px; } /* Profiles: ribbon top right */ .ateq-page-careers .split-media::before { top: -2px; right: calc(50% - 50vw - 29px); width: 320px; height: 126px; background-image: url(../img/decor/origami-ribbon.svg); } /* A side decoration follows the vertical edge instead of the heading. */ .ateq-page-careers .testimonials::before { top: -89px; left: -96px; width: 340px; height: 660px; background-image: url(../img/decor/texture-gris-vertical.svg?v=2); background-size: auto 660px; } /* ---------- About us ---------- */ /* History (black): faint white pixel pattern, top right */ .ateq-page-about-us .timeline::before { top: -60px; right: calc(50% - 50vw - 57px); width: 937px; height: 483px; } /* Divisions: cubes top right */ .ateq-page-about-us .division-cards::before { top: 86px; right: calc(50% - 50vw + 15px); width: 253px; height: 195px; background-image: url(../img/decor/origami-cubes.svg); } /* Commitments: pixel pattern top right */ .ateq-page-about-us .feature-cards::before { top: -80px; right: calc(50% - 50vw - 103px); width: 703px; height: 362px; } /* Headquarters: chevron on the top left corner of the photo */ .ateq-page-about-us .split-media::before { top: -96px; left: calc(50% - 50vw - 15px); width: 120px; height: 158px; background-image: url(../img/decor/origami-chevron.svg); } } /* About hero — cubes turned 90°, bottom right (Figma: 326 × 422 at 1023, 298 in the 1440 × 720 hero). The rotation is on the drawing, not on the container, which keeps its entrance animation (motion.css). */ @media (min-width: 1280px) { .ateq-page-about-us .page-hero--origami .page-hero__origami { top: 298px; right: calc(50% - 50vw + 91px); bottom: auto; left: auto; width: 326px; height: 422px; } .ateq-page-about-us .page-hero--origami .page-hero__origami svg { position: absolute; top: 50%; left: 50%; width: 422px; height: 326px; max-width: none; transform: translate(-50%, -50%) rotate(90deg); } } /* ===== motion.css ===== */ /** * Motion — Figma 13-1058 (assets/js/motion.js) and scroll indicator — * Figma 20-49 (assets/js/scroll-indicator.js). * * Start states only apply under html.js-motion (JavaScript running and no * reduced motion): without JavaScript everything is displayed directly. */ /* ---------- Start states (removed by .is-revealed) ---------- */ /* Top of page — CSS animations, started on the first paint: they no longer wait for the deferred motion scripts (which made titles appear ~2 s late on slow servers). "backwards" only applies the start state during the delay, the element's own styles take over at the end. */ @keyframes ateq-line-in { from { transform: translateY(110%); } to { transform: none; } } @keyframes ateq-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes ateq-rise { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } } /* Heroes (Hero divisions, Page hero): eyebrow, title line by line, text, buttons, key figures, then the division columns rising one by one */ .js-motion [data-hero] .eyebrow[data-hero-fade] { animation: ateq-fade-up 0.5s var(--ease-out) 0.1s backwards; } .js-motion [data-hero] [data-hero-line] { animation: ateq-line-in 0.8s var(--ease-out) 0.25s backwards; } .js-motion [data-hero] :nth-child(2) > [data-hero-line] { animation-delay: 0.33s; } .js-motion [data-hero] :nth-child(3) > [data-hero-line] { animation-delay: 0.41s; } .js-motion [data-hero] :nth-child(4) > [data-hero-line] { animation-delay: 0.49s; } .js-motion [data-hero] [data-hero-fade]:not(.eyebrow), .js-motion [data-hero] .hero-divisions__stat { animation: ateq-fade-up 0.5s var(--ease-out) 0.6s backwards; } .js-motion [data-hero] .page-hero__actions, .js-motion [data-hero] .hero-divisions__stat:nth-child(n+2) { animation-delay: 0.7s; } .js-motion [data-hero] .hero-divisions__stat:nth-child(n+3) { animation-delay: 0.8s; } .js-motion [data-hero] [data-hero-column] { animation: ateq-rise 0.7s var(--ease-out) 0.65s backwards; } .js-motion [data-hero] [data-hero-column]:nth-child(2) { animation-delay: 0.73s; } .js-motion [data-hero] [data-hero-column]:nth-child(3) { animation-delay: 0.81s; } .js-motion [data-hero] [data-hero-column]:nth-child(4) { animation-delay: 0.89s; } /* Page titles (News, categories, search, article, World, text pages) */ .js-motion :is(.page-title__inner, .article-header, .ww-hero__content, .text-page > :nth-child(-n+2)) { animation: ateq-fade-up 0.7s var(--ease-out) 0.1s backwards; } .js-motion .ww-map { animation: ateq-fade-up 0.7s var(--ease-out) 0.3s backwards; } /* Section heading: the red rule draws from top to bottom */ .js-motion .section-heading:not(.is-revealed) .section-heading__rule { transform: scaleY(0); transform-origin: 50% 0; } /* Content blocks: fade-up (24px) — keep in sync with REVEAL in motion.js */ .js-motion :is( .section-heading, .about__content, .about__image, .news-card, .worldwide-teaser__content > *, .worldwide-teaser__map, .featured-news__inner, .news-empty, .pagination, .article-hero, .article-body, .post-nav, .related-news__title, .ww-region, .cta-band__inner, .split-media__row, .timeline__item, .division-card, .feature-card, .testimonial, .text-page > :nth-child(n+3) ):not(.is-revealed) { opacity: 0; transform: translateY(24px); } /* ---------- Scroll indicator — one rounded pixel per section ---------- */ .scroll-indicator { display: none; } @media (min-width: 1024px) { /* Centred in the right margin (gutter or space beside the container) */ .scroll-indicator:not([hidden]) { --si-text: var(--text-inverse); --si-accent: var(--text-accent); --si-bright: var(--accent-bright); position: fixed; top: 50%; right: calc(max(var(--gutter), (100vw - var(--container)) / 2) / 2 - 17px); z-index: 90; display: flex; flex-direction: column; gap: 14px; align-items: center; width: 34px; padding: 16px 5px; border-radius: 999px; /* grey pill: readable on any background */ background: rgb(110 110 119 / 22%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(-50%); font-family: var(--font-heading); font-size: 13px; font-weight: 600; line-height: 16px; font-variant-numeric: tabular-nums; } /* On a light background (Theme=Light) */ .scroll-indicator.is-light { --si-text: var(--text-primary); } /* On the red background (e.g. Worldwide CTA): white instead of red */ .scroll-indicator.is-accent { --si-accent: var(--text-inverse); --si-bright: var(--text-inverse); } .scroll-indicator__number { display: block; height: 16px; overflow: hidden; } .scroll-indicator__current { color: var(--si-accent); transition: color var(--duration-base) var(--ease-out); } /* Number change: slides out then in (2 × 150ms) */ .scroll-indicator__current > span { display: block; transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); } .scroll-indicator__current > span.is-out-up { opacity: 0; transform: translateY(-8px); } .scroll-indicator__current > span.is-out-down { opacity: 0; transform: translateY(8px); } .scroll-indicator__total { color: var(--si-text); opacity: 0.4; transition: color var(--duration-base) var(--ease-out); } /* One rounded pixel per section (6px, like the map dots) */ .scroll-indicator__pixels { display: flex; flex-direction: column; gap: 4px; align-items: center; margin: 0; padding: 0; list-style: none; } .scroll-indicator__pixel { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; } .scroll-indicator__pixel::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--si-text); opacity: 0.22; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); } .scroll-indicator__pixel.is-read::before { opacity: 0.6; } .scroll-indicator__pixel.is-current::before { background: var(--si-bright); opacity: 1; transform: scale(1.5); } .scroll-indicator__pixel:hover::before { opacity: 1; transform: scale(1.5); } .scroll-indicator__pixel:focus-visible { outline: 2px solid var(--si-accent); outline-offset: 0; border-radius: 2px; } } /* ===== worldwide.css ===== */ /** * ATEQ Worldwide — Figma 12-534 (desktop) / 13-139 (mobile). * Mobile: no map, tabs scroll horizontally, regions as an accordion. */ .worldwide { padding: 0; } /* ---------- Hero ---------- */ .ww-hero { background: var(--bg-inverse); color: var(--text-inverse); } .ww-hero__inner { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: calc(var(--header-height) + 40px) var(--gutter) var(--space-32); } .ww-hero__content { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; } .ww-hero__eyebrow, .ww-hero__intro { display: none; } .ww-hero__eyebrow { gap: var(--space-16); align-items: center; color: var(--text-inverse); } .ww-hero__eyebrow::before { content: ""; width: 40px; height: 2px; background: var(--bg-accent); } .ww-hero__title { font-size: var(--h2-size); line-height: 1; } .ww-hero__intro { margin: 0; font-size: var(--body-l-size); line-height: var(--body-l-line); } /* Search — Figma "Input / Search" (Focus) */ .ww-search { display: flex; gap: var(--space-12); align-items: center; width: 100%; height: 56px; padding-inline: 20px; border: 1.5px solid var(--border-strong); background: var(--bg-page); color: var(--text-primary); } .ww-search:focus-within { outline: 2px solid var(--red-500); outline-offset: 2px; } .ww-search .icon { flex-shrink: 0; } .ww-search__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--body-m-size); line-height: var(--body-m-line); } .ww-search__input::placeholder { color: var(--text-primary); opacity: 1; } .ww-search__input:focus { outline: none; } /* Map — hidden on mobile (not in Figma 13-139) */ .ww-map { position: relative; display: none; } .ww-pin { cursor: default; outline: none; } a.ww-pin { cursor: pointer; } .ww-pin .world-map__halo { transform-box: fill-box; transform-origin: center; transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .ww-pin:hover .world-map__halo, .ww-pin.is-active .world-map__halo { opacity: 0.5; transform: scale(1.27); } .ww-pin:focus-visible .world-map__halo { opacity: 0.6; stroke: var(--icon-inverse); stroke-width: 2; } .ww-pin.is-filtered { opacity: 0.15; pointer-events: none; } /* Tooltip — Figma "Tooltip hover pin" (12-1164) */ .ww-tooltip[hidden] { display: none !important; } .ww-tooltip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-12) var(--space-16); background: var(--bg-page); color: var(--text-primary); white-space: nowrap; transform: translate(-50%, calc(-100% - 18px)); pointer-events: none; } .ww-tooltip__title { font-family: var(--font-heading); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-line); } .ww-tooltip__subtitle { color: var(--text-secondary); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-line); letter-spacing: var(--caption-tracking); } /* ---------- Region tabs (sticky) ---------- */ .ww-tabs { position: sticky; top: var(--header-height); z-index: 50; border-bottom: 1px solid var(--border-default); background: var(--bg-page); } .admin-bar .ww-tabs { top: calc(var(--header-height) + 46px); } @media (max-width: 600px) { .admin-bar .ww-tabs { top: var(--header-height); } } .ww-tabs__list { display: flex; gap: var(--space-8); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-16) var(--gutter); overflow-x: auto; scrollbar-width: none; } .ww-tabs__list::-webkit-scrollbar { display: none; } /* Tag — Figma 5-85 */ .ww-tab { flex-shrink: 0; padding: 7px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-page); color: var(--text-primary); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); line-height: var(--eyebrow-line); letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .ww-tab:hover { border-color: var(--border-strong); } .ww-tab[aria-pressed="true"] { border-color: var(--bg-inverse); background: var(--bg-inverse); color: var(--text-inverse); } /* ---------- Regions ---------- */ .ww-regions { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-16) var(--gutter) var(--space-48); } .ww-region[hidden] { display: none; } /* Desktop heading (number, name, count) — hidden on mobile */ .ww-region__head { display: none; } /* Mobile accordion heading */ .ww-region__accordion { margin: 0; font: inherit; text-transform: none; } .ww-region__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 20px 0; border: 0; border-top: 1px solid var(--border-strong); background: none; text-align: left; cursor: pointer; } .ww-region:first-child .ww-region__toggle { border-top: 0; } .ww-region__toggle-name { font-family: var(--font-heading); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-line); } .ww-region__toggle-count { display: flex; gap: var(--space-8); align-items: center; color: var(--text-secondary); font-size: var(--button-size); font-weight: var(--button-weight); line-height: var(--button-line); letter-spacing: var(--button-tracking); text-transform: uppercase; } .ww-region__toggle-state, .ww-region__toggle[aria-expanded="true"] .ww-region__toggle-icon { display: none; } .ww-region__toggle[aria-expanded="true"] .ww-region__toggle-state { display: inline; } .ww-region__toggle[aria-expanded="true"] { padding: 20px 0 12px; } .ww-region__toggle[aria-expanded="true"] .ww-region__toggle-name { font-size: var(--h3-size); font-weight: 700; line-height: 1.05; text-transform: uppercase; } .ww-region__toggle[aria-expanded="true"] .ww-region__toggle-count { color: var(--text-accent); font-size: var(--eyebrow-size); line-height: var(--eyebrow-line); letter-spacing: var(--eyebrow-tracking); } .ww-region.is-collapsed .ww-list, .ww-region.is-collapsed .ww-more { display: none; } .ww-region.is-truncated .ww-item:nth-child(n + 7) { display: none; } .ww-more { margin: var(--space-16) 0 var(--space-24); padding: 0; border: 0; background: none; color: var(--text-accent); font-size: var(--button-size); font-weight: var(--button-weight); line-height: var(--button-line); letter-spacing: var(--button-tracking); text-transform: uppercase; cursor: pointer; } /* Item / Country — Figma 8-47 */ .ww-item[hidden] { display: none; } .ww-item:focus-visible { outline-offset: -2px; } .ww-item__link { display: flex; gap: 14px; align-items: center; height: 56px; padding-inline: var(--space-16); border-bottom: 1px solid var(--border-default); color: var(--text-primary); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .ww-item__flag { display: grid; flex-shrink: 0; place-items: center; width: 32px; height: 22px; overflow: hidden; border-radius: var(--radius-xs); background: var(--bg-inverse); color: var(--text-inverse); font-size: var(--caption-size); font-weight: var(--caption-weight); letter-spacing: var(--caption-tracking); box-shadow: inset 0 0 0 1px rgb(12 12 14 / 8%); } .ww-item__flag img { width: 100%; height: 100%; object-fit: cover; } .ww-item__name { flex: 1; min-width: 0; font-family: var(--font-heading); font-size: 20px; font-weight: 600; line-height: 1.2; } .ww-item__link .icon { flex-shrink: 0; opacity: 0.35; transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } a.ww-item__link:hover, a.ww-item__link:focus-visible, .ww-item.is-highlighted a.ww-item__link { border-bottom-color: var(--text-accent); background: var(--bg-subtle); color: var(--text-accent); } a.ww-item__link:hover .icon, a.ww-item__link:focus-visible .icon { opacity: 1; transform: translate(2px, -2px); } a.ww-item__link:focus-visible { outline-offset: -2px; } .ww-empty { margin: var(--space-32) 0; color: var(--text-secondary); font-size: var(--body-l-size); } /* ---------- Tablet ≥ 768 ---------- */ @media (min-width: 768px) { .ww-hero__inner { display: grid; gap: var(--space-48); padding: calc(var(--header-height) + var(--space-64)) var(--gutter) 56px; } .ww-hero__content { gap: 28px; max-width: 520px; } .ww-hero__eyebrow { display: flex; } .ww-hero__count { display: none; } .ww-hero__title { font-size: var(--display-l-size); line-height: var(--display-l-line); letter-spacing: var(--display-l-tracking); } .ww-hero__intro { display: block; max-width: 460px; } .ww-search { max-width: 460px; height: 60px; } .ww-map { display: block; } .ww-tabs__list { gap: var(--space-12); padding-block: var(--space-24); } .ww-regions { padding-top: var(--space-48); padding-bottom: 120px; } .ww-region { display: flex; flex-direction: column; gap: var(--space-32); padding-block: 56px; border-top: 1px solid var(--border-strong); } .ww-region__accordion, .ww-more { display: none; } .ww-region__head { display: flex; flex-direction: column; gap: var(--space-8); } .ww-region__title { font-size: var(--h2-size); line-height: var(--h2-line); } .ww-region.is-collapsed .ww-list { display: grid; } .ww-region.is-truncated .ww-item:nth-child(n + 7) { display: block; } .ww-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-24); align-content: start; } } @media (min-width: 783px) { .admin-bar .ww-tabs { top: calc(var(--header-height) + 32px); } } /* ---------- Desktop ≥ 1024 ---------- */ @media (min-width: 1024px) { .ww-hero__inner { grid-template-columns: 520px minmax(0, 1fr); gap: 20px; align-items: center; padding-top: calc(var(--header-height) + 94px); /* Figma: content at y 190 */ } .ww-region { flex-direction: row; gap: var(--space-48); } .ww-region__head { flex: 0 0 284px; } .ww-list { flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* "Contact us" replaces the arrow for sites without a local website */ .ww-item__contact { flex-shrink: 0; color: var(--text-secondary); font-family: var(--font-body); font-size: 12px; font-weight: var(--button-weight); line-height: 1; letter-spacing: var(--button-tracking); text-transform: uppercase; transition: color var(--duration-fast) var(--ease-out); } a.ww-item__link:hover .ww-item__contact, a.ww-item__link:focus-visible .ww-item__contact { color: var(--text-accent); } /* ===== news.css ===== */ /** * News — Figma 10-224 (listing) and 11-408 (article). No mobile mock-up: * mobile follows the rules of the other pages (20px gutter, stacked). * News cards: build/latest-news/style-index.css. */ .news-listing, .article { padding: 0; } /* ---------- Breadcrumb ---------- */ .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 var(--space-8); color: var(--text-secondary); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-line); letter-spacing: var(--caption-tracking); } .breadcrumb li + li::before { content: "/"; margin-right: var(--space-8); } .breadcrumb a { text-decoration: none; } .breadcrumb a:hover { color: var(--text-accent); text-decoration: underline; } /* ---------- Page title — Figma 10-257 ---------- */ .page-title__inner { display: flex; flex-direction: column; gap: var(--space-24); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-48) var(--gutter) var(--space-32); } .page-title__row { display: flex; flex-direction: column; gap: var(--space-24); } .page-title__heading { display: flex; flex-direction: column; gap: var(--space-16); } .page-title__eyebrow { display: flex; gap: var(--space-16); align-items: center; } .page-title__eyebrow::before { content: ""; width: 40px; height: 2px; background: var(--bg-accent); } .page-title__title { font-size: var(--h1-size); line-height: var(--h1-line); } .page-title__intro { max-width: 440px; margin: 0; color: var(--text-secondary); } /* ---------- Filters + search — Figma 10-266 ---------- */ .news-filters { border-block: 1px solid var(--border-default); } .news-filters__inner { display: flex; flex-direction: column; gap: var(--space-16); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-16) var(--gutter); } .news-filters__tags ul { display: flex; gap: var(--space-8); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; } .news-filters__tags ul::-webkit-scrollbar { display: none; } .news-filters__tags li { flex-shrink: 0; } /* Tag — Figma 5-85 (Default / Active) */ .filter-tag { display: inline-block; padding: 7px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-full); color: var(--text-primary); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); line-height: var(--eyebrow-line); letter-spacing: var(--eyebrow-tracking); text-decoration: none; text-transform: uppercase; white-space: nowrap; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); } .filter-tag:hover { border-color: var(--border-strong); } .filter-tag.is-active { border-color: var(--bg-inverse); background: var(--bg-inverse); color: var(--text-inverse); } /* Search — Figma Input / Search (48px) */ .news-search { display: flex; gap: var(--space-12); align-items: center; height: 48px; padding-inline: 20px; border: 1px solid var(--border-default); background: var(--bg-page); color: var(--text-primary); } .news-search:focus-within { border-color: var(--border-strong); outline: 2px solid var(--red-500); outline-offset: 2px; } .news-search .icon { flex-shrink: 0; } .news-search__input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; } .news-search__input::placeholder { color: var(--text-muted); opacity: 1; } .news-search__input:focus { outline: none; } /* ---------- Featured article — Figma 10-286 ---------- */ .featured-news__inner { display: flex; flex-direction: column; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-32) var(--gutter) 0; } .featured-news__media { aspect-ratio: 760 / 480; overflow: hidden; background: linear-gradient(148deg, #9e0026 14%, #121214 86%); } .featured-news__img { width: 100%; height: 100%; object-fit: cover; } .featured-news__panel { display: flex; flex-direction: column; gap: var(--space-24); align-items: flex-start; justify-content: center; padding: var(--space-32) var(--space-24); background: var(--bg-inverse); color: var(--text-inverse); } .featured-news__meta { display: flex; flex-wrap: wrap; gap: var(--space-16); align-items: center; margin: 0; font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-line); letter-spacing: var(--caption-tracking); } .featured-news__title { font-size: 40px; line-height: 1; } .featured-news__excerpt { margin: 0; opacity: 0.7; } /* ---------- Grid ---------- */ .news-grid__inner { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-48) var(--gutter) var(--space-64); } .news-grid__count { margin: 0 0 var(--space-32); color: var(--text-secondary); } .news-grid__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); } /* ---------- No results ---------- */ .news-empty { display: flex; flex-direction: column; gap: var(--space-16); align-items: flex-start; max-width: 640px; padding: var(--space-32) 0; } .news-empty__title { font-size: var(--h2-size); line-height: var(--h2-line); } .news-empty__text { margin: 0 0 var(--space-16); color: var(--text-secondary); } /* ---------- Pagination — Figma 10-398 ---------- */ .pagination { margin-top: var(--space-64); } .pagination ul { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; justify-content: center; } .pagination .page-numbers { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--border-default); color: var(--text-primary); font-size: var(--button-size); font-weight: var(--button-weight); line-height: var(--button-line); letter-spacing: var(--button-tracking); text-decoration: none; text-transform: uppercase; } .pagination a.page-numbers:hover { border-color: var(--border-strong); } .pagination .page-numbers.current { border-color: var(--bg-inverse); background: var(--bg-inverse); color: var(--text-inverse); } .pagination .page-numbers.dots { border-color: transparent; } /* Previous / Next: link buttons */ .pagination :is(.prev, .next).page-numbers { display: inline-flex; gap: var(--space-12); width: auto; height: auto; margin-inline: var(--space-8); padding: 0 0 6px; border: 0; border-bottom: 1.5px solid var(--border-strong); } .pagination .prev .icon { order: 2; transform: rotate(180deg); } .pagination .prev span:last-child { order: 3; } .pagination :is(.prev, .next):hover { border-color: var(--text-accent); color: var(--text-accent); } /* ---------- Article: reading progress — Figma 11-437 ---------- */ .reading-progress { position: fixed; top: var(--header-height); right: 0; left: 0; z-index: 99; height: 3px; pointer-events: none; } .admin-bar .reading-progress { top: calc(var(--header-height) + 46px); } .reading-progress__bar { display: block; height: 100%; background: var(--bg-accent); transform: scaleX(0); transform-origin: left; } /* ---------- Article header — Figma 11-439 ---------- */ .article-header { display: flex; flex-direction: column; gap: 20px; align-items: center; max-width: calc(960px + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-48) var(--gutter) var(--space-32); text-align: center; } .article-header .breadcrumb ol { justify-content: center; } .article-header__meta { display: flex; flex-wrap: wrap; gap: var(--space-16); align-items: center; justify-content: center; margin: 0; color: var(--text-secondary); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-line); letter-spacing: var(--caption-tracking); } .article-header__meta .tag { text-decoration: none; } .article-header__title { font-size: 40px; line-height: 1; } .article-header__excerpt { max-width: 720px; margin: 0; color: var(--text-secondary); } /* ---------- Featured image — Figma 11-447 ---------- */ .article-hero { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); } .article-hero__img { width: 100%; height: auto; aspect-ratio: 1280 / 620; object-fit: cover; } .article-hero__caption { margin-top: var(--space-12); color: var(--text-secondary); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-line); letter-spacing: var(--caption-tracking); } /* ---------- Body + share — Figma 11-450 ---------- */ .article-body { display: flex; flex-direction: column-reverse; gap: var(--space-48); max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-48) var(--gutter) var(--space-64); } .article-share { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; padding-top: var(--space-32); border-top: 1px solid var(--border-default); } .article-share__title { width: 100%; color: var(--text-secondary); } .article-share__list { display: flex; gap: var(--space-12); } .article-share__link { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-default); background: var(--bg-page); color: var(--text-primary); font-size: var(--button-size); font-weight: var(--button-weight); line-height: var(--button-line); letter-spacing: var(--button-tracking); text-decoration: none; text-transform: uppercase; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .article-share__link:hover, .article-share__link.is-copied { border-color: var(--text-accent); color: var(--text-accent); } .article-share__status { margin: 0; color: var(--text-accent); font-size: var(--caption-size); font-weight: var(--caption-weight); letter-spacing: var(--caption-tracking); } .article-share__status:empty { display: none; } /* ---------- Previous / next — Figma 11-483 ---------- */ .post-nav { border-block: 1px solid var(--border-default); } .post-nav__inner { display: flex; flex-direction: column; gap: var(--space-24); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-32) var(--gutter); } .post-nav__link { display: flex; flex-direction: column; gap: var(--space-8); color: var(--text-primary); text-decoration: none; } .post-nav__link--next { align-items: flex-end; margin-left: auto; text-align: right; } .post-nav__title { font-family: var(--font-heading); font-size: 20px; font-weight: var(--h4-weight); line-height: var(--h4-line); transition: color var(--duration-fast) var(--ease-out); } .post-nav__link:hover .post-nav__title { color: var(--text-accent); } /* ---------- Related news — Figma 11-490 ---------- */ .related-news { background: var(--bg-subtle); } .related-news__inner { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: var(--space-64) var(--gutter); } .related-news__title { margin-bottom: var(--space-32); font-size: 36px; line-height: var(--h2-line); } /* Mobile: related news as a swipe carousel, like on the home page */ @media (max-width: 767px) { .related-news .news-grid__list { grid-auto-columns: 83%; grid-auto-flow: column; grid-template-columns: none; gap: var(--space-16); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory; scrollbar-width: none; } .related-news .news-grid__list > li { scroll-snap-align: start; } } /* ---------- Tablet ≥ 768 ---------- */ @media (min-width: 768px) { .page-title__inner { padding-top: var(--space-96); padding-bottom: var(--space-64); } .page-title__title { font-size: 96px; line-height: var(--display-xl-line); letter-spacing: var(--display-xl-tracking); } .page-title__intro { font-size: var(--body-l-size); line-height: var(--body-l-line); } .news-filters__inner { padding-block: var(--space-24); } .featured-news__inner { padding-top: var(--space-64); } .featured-news__panel { padding: var(--space-48); } .featured-news__title { font-size: var(--h2-size); } .news-grid__inner { padding-top: 80px; } .news-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); } .article-header { gap: 28px; padding-top: 80px; padding-bottom: 56px; } .article-header__title { font-size: var(--h2-size); } .article-header__excerpt { font-size: var(--body-l-size); line-height: var(--body-l-line); } .article-body { padding-top: 80px; padding-bottom: 120px; } .post-nav__inner { flex-direction: row; justify-content: space-between; padding-block: 40px; } .post-nav__title { font-size: var(--h4-size); } .related-news__inner { padding-top: 100px; padding-bottom: 120px; } .related-news__title { margin-bottom: var(--space-48); font-size: var(--h2-size); } } @media (min-width: 783px) { .admin-bar .reading-progress { top: calc(var(--header-height) + 32px); } } /* ---------- Desktop ≥ 1024 ---------- */ @media (min-width: 1024px) { .page-title__row { flex-direction: row; align-items: flex-end; justify-content: space-between; } .news-filters__inner { flex-direction: row; gap: var(--space-32); align-items: center; justify-content: space-between; } .news-filters__tags ul { flex-wrap: wrap; margin: 0; padding: 0; gap: var(--space-12); } .news-search { flex: 0 0 320px; } .featured-news__inner { flex-direction: row; align-items: flex-start; } .featured-news__media { flex: 0 0 59.375%; /* 760 / 1280 */ } .featured-news__panel { flex: 1; align-self: stretch; min-height: 100%; padding: 56px; } .featured-news__title { font-size: var(--h1-size); line-height: var(--h1-line); } .news-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .article-header__title { font-size: var(--h1-size); line-height: var(--h1-line); } /* Share column on the left of the text, sticky — Figma 11-451 */ .article-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr); gap: 0; max-width: none; } .article-body .prose { grid-column: 2; grid-row: 1; } .article-share { position: sticky; top: calc(var(--header-height) + var(--space-32)); grid-column: 1; align-self: start; grid-row: 1; flex-direction: column; align-items: flex-start; justify-self: end; width: 90px; margin-right: 80px; padding-top: 0; border-top: 0; } .article-share__list { flex-direction: column; } .article-share__title { width: auto; } } @media (min-width: 1024px) { .admin-bar .article-share { top: calc(var(--header-height) + 32px + var(--space-32)); } } @media (min-width: 1280px) { .page-title__title { font-size: var(--display-xl-size); } } /* ===== block about ===== */ .about{background:var(--bg-page);color:var(--text-primary);overflow:hidden}.about__inner{gap:var(--space-24);margin-inline:auto;max-width:calc(var(--container) + var(--gutter)*2);padding:var(--space-64) var(--gutter)}.about__content,.about__inner{display:flex;flex-direction:column}.about__content{align-items:flex-start;gap:20px}.about__lead,.about__text{color:var(--text-secondary);font-size:var(--body-m-size);line-height:var(--body-m-line);margin:0}.about__stats{display:flex;flex-wrap:wrap;gap:var(--space-16) 28px;margin:0}.about__stat{display:flex;flex-direction:column-reverse;gap:2px}.about__stat-value{color:var(--text-accent);font-family:var(--font-heading);font-size:44px;font-weight:700;line-height:1;margin:0;text-transform:uppercase}.about__stat-label{color:var(--text-secondary);font-size:var(--eyebrow-size);font-weight:var(--eyebrow-weight);letter-spacing:var(--eyebrow-tracking);line-height:var(--eyebrow-line);text-transform:uppercase}.about__image{display:none}@media (min-width:768px){.about__inner{gap:var(--space-48);padding-block:140px}.about__content{gap:var(--space-32);max-width:560px}.about__lead{color:var(--text-primary);font-family:var(--font-heading);font-size:var(--h3-size);font-weight:var(--h3-weight);line-height:var(--h3-line)}.about__stats{border-top:1px solid var(--border-default);gap:var(--space-48);padding-top:var(--space-32)}.about__stat{gap:var(--space-4)}.about__stat-value{font-size:var(--display-l-size);letter-spacing:var(--display-l-tracking);line-height:var(--display-l-line)}}@media (min-width:1024px){.about__inner{align-items:start;display:grid;gap:80px;grid-template-columns:max-content minmax(0,560px) minmax(0,1fr)}.about__image{background:linear-gradient(128deg,#47474f 14%,#121214 86%);display:block;height:520px;margin-right:calc(var(--gutter)*-1);overflow:hidden;position:relative}.about__img{height:100%;object-fit:cover;width:100%}.about__image:after{background:var(--bg-accent);bottom:0;content:"";height:6px;left:0;position:absolute;width:120px}.about--wide .about__inner{grid-template-columns:max-content minmax(0,720px);padding-bottom:120px}.about--wide .about__content{max-width:720px}.about--wide .about__text{font-size:var(--body-l-size);line-height:var(--body-l-line)}.about--wide .about__stats{align-items:start;column-gap:var(--space-64);column-gap:clamp(24px,3vw,48px);display:grid;grid-auto-columns:auto;grid-auto-flow:column;justify-content:start}.about--wide .about__stats:has(>:nth-child(4)){column-gap:clamp(16px,2vw,40px)}.about--wide .about__stat-label{white-space:normal}.about--wide .about__stat-value{font-size:clamp(48px,5vw,88px);white-space:nowrap}.about--wide .about__stats:has(>:nth-child(4)) .about__stat-value{font-size:clamp(36px,3.6vw,64px)}}@media (min-width:1024px) and (max-width:1279px){.about--wide .about__stats{grid-auto-flow:row;grid-template-columns:repeat(2,auto);row-gap:var(--space-24)}.about--wide .about__stat-value,.about--wide .about__stats:has(>:nth-child(4)) .about__stat-value{font-size:44px}}@media (min-width:1440px){.about__image{margin-right:calc((100vw - var(--container))/-2)}} /* ===== block division-cards ===== */ .division-cards{background:var(--bg-page);color:var(--text-primary)}.division-cards__inner{display:flex;flex-direction:column;gap:var(--space-32);margin-inline:auto;max-width:calc(var(--container) + var(--gutter)*2);padding:var(--space-64) var(--gutter)}.division-cards__list{display:grid;gap:var(--space-24);list-style:none;margin:0;padding:0}.division-card{background:var(--bg-subtle);display:flex;flex-direction:column;position:relative}.division-card__media{background:linear-gradient(133deg,#47474f 14%,#121214 86%);height:180px;margin:0;overflow:hidden;position:relative}.division-card:nth-child(4n+2) .division-card__media{background:linear-gradient(133deg,#9e0026 14%,#121214 86%)}.division-card__img{height:100%;inset:0;object-fit:cover;position:absolute;transition:transform .5s var(--ease-out);width:100%}.division-card__body{align-items:flex-start;display:flex;flex:1;flex-direction:column;gap:14px;padding:var(--space-32) var(--space-24)}.division-card__number{color:var(--text-accent);font-family:var(--font-heading);font-size:36px;font-weight:300;line-height:1}.division-card__name{font-size:40px;font-weight:var(--h2-weight);line-height:var(--h2-line);text-transform:uppercase}.division-card__text{color:var(--text-secondary);font-size:var(--body-m-size);line-height:var(--body-m-line);margin:0}.division-card__link{margin-top:auto}.division-card:hover .division-card__img{transform:scale(1.05)}@media (min-width:768px){.division-cards__inner{gap:56px;padding-block:120px}.division-card{flex-direction:row}.division-card__media{flex:0 0 42%;height:auto;min-height:280px}.division-card__body{padding:36px var(--space-32)}.division-card__name{font-size:var(--h2-size)}}@media (min-width:1024px){.division-cards__list{gap:56px var(--space-32);grid-template-columns:repeat(2,minmax(0,1fr))}.division-card__media{flex-basis:260px}} /* ===== block feature-cards ===== */ .feature-cards{background:var(--bg-subtle);color:var(--text-primary)}.feature-cards__inner{display:flex;flex-direction:column;gap:var(--space-32);margin-inline:auto;max-width:calc(var(--container) + var(--gutter)*2);padding:var(--space-64) var(--gutter)}.feature-cards__list{display:grid;gap:var(--space-32);list-style:none;margin:0;padding:0}.feature-card__text{color:var(--text-secondary);font-size:var(--body-m-size);line-height:var(--body-m-line);margin:0}.feature-cards--image .feature-cards__list{display:flex;gap:var(--space-16);margin-inline:calc(var(--gutter)*-1);overflow-x:auto;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scroll-snap-type:x mandatory;scrollbar-width:none}.feature-cards--image .feature-cards__list::-webkit-scrollbar{display:none}.feature-cards--image .feature-card{background:var(--bg-page);display:flex;flex:0 0 83%;flex-direction:column;scroll-snap-align:start;transition:box-shadow var(--duration-base) var(--ease-out)}.feature-card__media{background:linear-gradient(143deg,#47474f 14%,#121214 86%);height:240px;overflow:hidden;position:relative}.feature-card__img{filter:grayscale(1);height:100%;inset:0;object-fit:cover;position:absolute;transition:filter .4s var(--ease-out),transform .5s var(--ease-out);width:100%}.feature-card__overlay{background:linear-gradient(0deg,rgba(12,12,14,.7),rgba(12,12,14,.1) 60%);inset:0;position:absolute}.feature-card__overlay:after{background:linear-gradient(143deg,rgba(158,0,38,.85) 14%,rgba(18,18,20,.85) 86%);content:"";inset:0;opacity:0;position:absolute;transition:opacity .4s var(--ease-out)}.feature-cards--image .feature-card__title{bottom:20px;color:var(--text-inverse);font-size:44px;left:var(--space-24);letter-spacing:-.005em;line-height:.95;position:absolute;right:var(--space-24);text-transform:uppercase}.feature-cards--image .feature-card__body{display:flex;flex:1;flex-direction:column;gap:var(--space-12);padding:var(--space-24) var(--space-24) 28px}.feature-card__subtitle{font-family:var(--font-heading);font-size:var(--h4-size);font-weight:var(--h4-weight);line-height:var(--h4-line);margin:0;transition:color var(--duration-base) var(--ease-out)}.feature-card__accent{background:var(--bg-accent);height:3px;margin-top:auto;transition:width var(--duration-base) var(--ease-out);width:32px}.feature-cards--image .feature-card:hover{box-shadow:var(--shadow-hover)}.feature-cards--image .feature-card:hover .feature-card__img{filter:none;transform:scale(1.03)}.feature-cards--image .feature-card:hover .feature-card__overlay:after{opacity:1}.feature-cards--image .feature-card:hover .feature-card__subtitle{color:var(--text-accent)}.feature-cards--image .feature-card:hover .feature-card__accent{width:64px}.feature-cards--text .feature-card{border-top:2px solid var(--border-strong);display:flex;flex-direction:column;gap:14px;padding-top:var(--space-24)}.feature-cards--text .feature-card__body{display:contents}.feature-cards--text .feature-card__title{font-size:28px;font-weight:var(--h3-weight);line-height:var(--h3-line);text-transform:none}@media (min-width:768px){.feature-cards__inner{gap:56px;padding-block:120px}.feature-cards--image .feature-cards__list{display:grid;gap:var(--space-32);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;overflow:visible;padding:0}.feature-card__media{height:300px}.feature-cards--image .feature-card__title{bottom:28px;font-size:var(--h1-size);left:28px;right:28px}.feature-cards--image .feature-card__body{padding:28px 28px var(--space-32)}.feature-cards--text .feature-cards__list{gap:var(--space-48) var(--space-32);grid-template-columns:repeat(2,minmax(0,1fr))}.feature-cards--text .feature-card{padding-top:28px}.feature-cards--text .feature-card__title{font-size:var(--h3-size)}}@media (min-width:1024px){.feature-cards--image .feature-cards__list{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.feature-cards--text .feature-cards__list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}} /* ===== block hero-divisions ===== */ .hero-divisions{--bl-ease:cubic-bezier(0.65,0,0.35,1);--bl-width:600ms var(--bl-ease);--bl-color:500ms var(--bl-ease);--bl-overlay:400ms var(--bl-ease);background:var(--bg-inverse);color:var(--text-inverse);display:flex;flex-direction:column}.hero-divisions__head{display:flex;flex-direction:column;gap:18px;margin-inline:auto;max-width:calc(var(--container) + var(--gutter)*2);padding:calc(var(--header-height) + 24px + var(--space-48)) var(--gutter) var(--space-32);width:100%}.hero-divisions__headline{align-items:flex-start;display:flex;flex-direction:column;gap:18px}.hero-divisions .hero-divisions__eyebrow{align-items:center;color:var(--text-inverse);display:flex;gap:var(--space-16)}.hero-divisions__title{display:flex;flex-direction:column;font-size:52px;letter-spacing:-.005em;line-height:.95}.hero-divisions__line{display:block;margin-block:-.06em;overflow:hidden;padding-block:.06em}.hero-divisions__line-inner{display:block}.hero-divisions__stats{display:flex;gap:28px;margin:0}.hero-divisions__stat{display:flex;flex-direction:column-reverse;gap:2px}.hero-divisions__stat-value{color:var(--accent-bright);font-family:var(--font-heading);font-size:40px;font-weight:700;line-height:1;margin:0;text-transform:uppercase;white-space:nowrap}.hero-divisions__stat-label{font-size:var(--eyebrow-size);font-weight:var(--eyebrow-weight);letter-spacing:var(--eyebrow-tracking);line-height:var(--eyebrow-line);text-transform:uppercase;white-space:nowrap}@media (min-width:768px){.hero-divisions__head{gap:var(--space-32);padding-bottom:40px;padding-top:calc(var(--header-height) + var(--space-48))}.hero-divisions__headline{gap:20px}.hero-divisions__eyebrow:before{background:var(--bg-accent);content:"";height:2px;width:40px}.hero-divisions__title{font-size:72px}.hero-divisions__stats{align-items:center;gap:40px}.hero-divisions__stat{gap:var(--space-4)}.hero-divisions__stat+.hero-divisions__stat{border-left:1px solid hsla(0,0%,100%,.2);padding-left:40px}.hero-divisions__stat-value{font-size:64px;letter-spacing:-.005em;line-height:.95}}@media (min-width:1024px){.hero-divisions{min-height:100svh}.hero-divisions__head{align-items:flex-end;flex:1;flex-direction:row;justify-content:space-between;padding-top:calc(var(--header-height) + 54px)}.hero-divisions__title{font-size:80px}}.hero-divisions--light{background:var(--bg-page)}.hero-divisions--light,.hero-divisions--light .hero-divisions__eyebrow{color:var(--text-primary)}.hero-divisions--light .hero-divisions__stat-value{color:var(--text-accent)}.hero-divisions--light .hero-divisions__stat-label{color:var(--text-secondary)}.hero-divisions--light .business-lines__list{color:var(--text-inverse)}@media (min-width:768px){.hero-divisions--light .hero-divisions__stat+.hero-divisions__stat{border-left-color:var(--border-default)}}.hero-divisions{overflow:hidden}.hero-divisions__head{isolation:isolate;position:relative}.hero-divisions__head>:not(.hero-divisions__pattern){position:relative}.hero-divisions__pattern{display:none}@media (min-width:768px){.hero-divisions__pattern{display:block;fill:#e8e7e7;height:auto;pointer-events:none;position:absolute;right:calc(var(--gutter) - 24px);stroke:#e8e7e7;top:calc(var(--header-height) - 8px);width:min(58%,720px);z-index:-1}.hero-divisions--dark .hero-divisions__pattern{fill:hsla(0,0%,100%,.07);stroke:hsla(0,0%,100%,.07)}.hero-divisions--light .hero-divisions__pattern{display:none}}@media (min-width:1024px){.hero-divisions__pattern{right:calc(50% - 50vw + 16px);top:91px;width:536px}}.business-lines__list{display:flex;flex-direction:column}.business-line__link{align-items:center;background:linear-gradient(163deg,#121214 14%,#47474f 86%);color:inherit;display:flex;height:120px;justify-content:space-between;overflow:hidden;padding-inline:var(--gutter);position:relative;text-decoration:none}.business-line:nth-child(2) .business-line__link{background:linear-gradient(163deg,#9e0026 14%,#47474f 86%)}.business-line__img{filter:grayscale(1);transition:filter var(--bl-color),transform var(--bl-color)}.business-line__img,.business-line__video{height:100%;inset:0;object-fit:cover;position:absolute;width:100%}.business-line__video{display:none;opacity:0;pointer-events:none;transition:opacity .4s var(--ease-out),filter var(--bl-color),transform var(--bl-color)}@media (hover:hover) and (pointer:fine){.business-line__video{display:block}.business-line.has-frame .business-line__video{filter:grayscale(1);opacity:1}.business-line.is-playing .business-line__video{filter:grayscale(0);opacity:1;transform:scale(1.03)}.business-line.is-playing .business-line__overlay{opacity:.45}.business-line.is-playing .business-line__overlay:after{background:linear-gradient(180deg,rgba(140,0,33,.2),rgba(140,0,33,.55) 55%,rgba(26,5,10,.95));opacity:.55}}.business-line__overlay{background:linear-gradient(119deg,rgba(23,23,26,.85) 14%,rgba(77,77,84,.55) 86%);inset:0;position:absolute;transition:opacity .4s var(--ease-out)}.business-line__overlay:after{background:linear-gradient(119deg,rgba(140,0,33,.88) 14%,rgba(26,5,10,.92) 86%);content:"";inset:0;opacity:0;position:absolute;transition:opacity var(--bl-overlay)}.business-line__body,.business-line__number{position:relative}.business-line__number{font-family:var(--font-heading);font-size:40px;font-weight:300;line-height:1;opacity:.5;order:2;transition:opacity var(--bl-overlay)}.business-line__name{display:block;font-family:var(--font-heading);font-size:36px;font-weight:700;line-height:1.05;text-transform:uppercase}.business-line__arrow,.business-line__description{display:none}.business-line__link:is(:hover,:focus-visible){color:var(--text-inverse)}.business-line__link:focus-visible{outline-color:var(--icon-inverse);outline-offset:-4px}@media (min-width:768px){.business-lines__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.business-line{border-bottom:1px solid hsla(0,0%,100%,.12);border-right:1px solid hsla(0,0%,100%,.12);min-width:0}.business-line:nth-child(2) .business-line__link,.business-line__link{align-items:stretch;background:linear-gradient(119deg,#17171a 14%,#4d4d54 86%);flex-direction:column;height:320px;padding:28px var(--space-32) var(--space-32)}.business-line__number{align-self:flex-end;font-size:var(--number-section-size);order:0}.business-line__body{display:flex;flex-direction:column;gap:var(--space-16);margin-top:auto}.business-line__name{font-size:var(--h3-size)}.business-line__description{display:block;font-size:var(--body-s-size);line-height:var(--body-s-line);min-height:3em;opacity:0;transform:translateY(12px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}.business-line__arrow{display:flex;justify-content:flex-end}.business-line__arrow .icon{transition:transform var(--duration-fast) var(--ease-out)}.business-line__img{will-change:filter,transform}.business-line__overlay:after{will-change:opacity}.business-line__description{will-change:opacity,transform}:is(.business-line.is-active,.business-lines__list:not(.is-managed) .business-line:is(:hover,:focus-within)) .business-line__img{filter:grayscale(0);transform:scale(1.03)}:is(.business-line.is-active,.business-lines__list:not(.is-managed) .business-line:is(:hover,:focus-within)) .business-line__overlay:after{opacity:1}:is(.business-line.is-active,.business-lines__list:not(.is-managed) .business-line:is(:hover,:focus-within)) .business-line__number{opacity:1}:is(.business-line.is-active,.business-lines__list:not(.is-managed) .business-line:is(:hover,:focus-within)) .business-line__description{opacity:.85;transform:none;transition:opacity .4s var(--ease-out) .12s,transform .4s var(--ease-out) .12s}:is(.business-line.is-active,.business-lines__list:not(.is-managed) .business-line:is(:hover,:focus-within)) .business-line__arrow .icon{transform:translateX(6px)}}@media (min-width:1024px){.business-lines__list{container-type:inline-size;display:flex;flex-direction:row}.business-line{border-bottom:0;flex:1 1 0;transition:flex-grow var(--bl-width);will-change:flex-grow}:is(.business-line.is-active,.business-lines__list:not(.is-managed) .business-line:is(:hover,:focus-within)){flex-grow:1.3}.business-line__description{width:calc(100cqi*1.3/4.3 - var(--space-32)*2)}.business-line:last-child{border-right:0}.business-line:nth-child(2) .business-line__link,.business-line__link{height:clamp(360px,calc(100svh - 380px),520px)}.business-line__name{white-space:nowrap}}@media (min-width:1280px){.business-line__name{font-size:var(--h2-size)}}.reduce-motion .business-line.is-active,.reduce-motion .business-lines__list:not(.is-managed) .business-line:is(:hover,:focus-within){flex-grow:1!important}.reduce-motion .business-line__description,.reduce-motion .business-line__img,.reduce-motion .business-line__number,.reduce-motion .business-line__overlay,.reduce-motion .business-line__overlay:after{transition-duration:.35s!important;transition-timing-function:ease-out!important}.reduce-motion .business-line__arrow .icon,.reduce-motion .business-line__description,.reduce-motion .business-line__img{transform:none!important}.reduce-motion .business-line__description{width:auto!important}.reduce-motion .business-line__video{display:none!important} /* ===== block latest-news ===== */ .latest-news{background:var(--bg-subtle);color:var(--text-primary)}.latest-news__inner{display:flex;flex-direction:column;gap:var(--space-24);margin-inline:auto;max-width:calc(var(--container) + var(--gutter)*2);padding:var(--space-64) var(--gutter)}.latest-news__head{display:contents}.latest-news__all{align-self:flex-start;order:3}.latest-news__list{display:flex;gap:var(--space-16);margin-inline:calc(var(--gutter)*-1);overflow-x:auto;padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scroll-snap-type:x mandatory;scrollbar-width:none}.latest-news__list::-webkit-scrollbar{display:none}.latest-news__item{flex:0 0 83%;scroll-snap-align:start}.latest-news__empty{color:var(--text-secondary);margin:0}.news-card{background:var(--bg-elevated);display:flex;flex-direction:column;height:100%;position:relative;transition:box-shadow var(--duration-base) var(--ease-out)}.news-card:before{background:var(--bg-accent);content:"";height:4px;left:0;position:absolute;top:0;transform:scaleX(0);transform-origin:left;transition:transform var(--duration-base) var(--ease-out);width:100%;z-index:1}.news-card__media{aspect-ratio:416/280;background:linear-gradient(146deg,#17171a 14%,#4d4d54 86%);overflow:hidden;position:relative}.news-card__img{height:100%;object-fit:cover;transition:transform .5s var(--ease-out);width:100%}.news-card__tag{left:var(--space-16);position:absolute;top:var(--space-16)}.news-card__content{align-items:flex-start;display:flex;flex:1;flex-direction:column;gap:14px;padding:22px}.news-card__date{align-items:center;color:var(--text-secondary);display:flex;font-size:var(--caption-size);font-weight:var(--caption-weight);gap:var(--space-8);letter-spacing:var(--caption-tracking);line-height:var(--caption-line);margin:0}.news-card__date .icon{opacity:.5}.news-card__title{font-size:20px;font-weight:var(--h4-weight);line-height:var(--h4-line);text-transform:none;transition:color var(--duration-fast) var(--ease-out)}.news-card__link{color:inherit;text-decoration:none}.news-card__link:after{content:"";inset:0;position:absolute;z-index:2}.news-card__link:focus-visible{outline:none}.news-card:focus-within{outline:2px solid var(--red-500);outline-offset:3px}.news-card__excerpt{color:var(--text-secondary);font-size:var(--body-s-size);line-height:var(--body-s-line);margin:0}.news-card__more{margin-top:auto}.news-card__more .icon{transition:transform var(--duration-base) var(--ease-out)}.news-card:is(:hover,:focus-within){box-shadow:var(--shadow-hover)}.news-card:is(:hover,:focus-within):before{transform:scaleX(1)}.news-card:is(:hover,:focus-within) .news-card__img{transform:scale(1.05)}.news-card:is(:hover,:focus-within) :is(.news-card__title,.news-card__more){color:var(--text-accent)}.news-card:is(:hover,:focus-within) .news-card__more{border-color:var(--text-accent);gap:var(--space-12)}.news-card:is(:hover,:focus-within) .news-card__more .icon{transform:translateX(6px)}@media (min-width:768px){.latest-news__inner{gap:var(--space-64);padding-block:140px}.latest-news__head{align-items:flex-end;display:flex;justify-content:space-between}.latest-news__all{order:0}.latest-news__list{display:grid;gap:var(--space-32);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;overflow:visible;padding:0}.news-card__tag{left:20px;top:20px}.news-card__content{padding:28px}.news-card__title{font-size:var(--h4-size)}}@media (min-width:1024px){.latest-news__list{grid-template-columns:repeat(3,minmax(0,1fr))}} /* ===== block page-hero ===== */ .page-hero{background:var(--bg-inverse);color:var(--text-inverse);display:flex;flex-direction:column;justify-content:flex-end;min-height:520px;overflow:hidden;position:relative}.page-hero__media,.page-hero__overlay{inset:0;position:absolute}.page-hero__media{background:linear-gradient(132deg,#47474f 14%,#121214 57%,#9e0026 86%)}.page-hero__img{height:100%;object-fit:cover;width:100%}.page-hero__overlay{background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.35))}.page-hero__inner{margin-inline:auto;max-width:calc(var(--container) + var(--gutter)*2);padding:calc(var(--header-height) + 96px) var(--gutter) var(--space-48);position:relative;width:100%}.page-hero__content{align-items:flex-start;display:flex;flex-direction:column;gap:20px}.page-hero .page-hero__eyebrow{align-items:center;color:var(--text-inverse);display:flex;gap:var(--space-16)}.page-hero__title{display:flex;flex-direction:column;font-size:52px;letter-spacing:-.005em;line-height:.95}.page-hero__line{display:block;margin-block:-.06em;overflow:hidden;padding-block:.06em}.page-hero__line-inner{display:block}.page-hero__text{font-size:var(--body-m-size);line-height:var(--body-m-line);margin:0;max-width:600px}.page-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-16);padding-top:var(--space-8)}.page-hero__origami{align-self:flex-end;line-height:0;margin:calc(var(--header-height) + var(--space-24)) calc(var(--gutter)*-1) 0 0;position:relative;width:min(80%,440px)}.page-hero__shape{display:block;height:auto;width:100%}.page-hero--origami .page-hero__inner{padding-top:var(--space-32)}.page-hero .page-hero__secondary{display:none}@media (min-width:768px){.page-hero{min-height:640px}.page-hero__inner{padding-bottom:var(--space-96)}.page-hero__content{gap:28px}.page-hero__eyebrow:before{background:var(--bg-accent);content:"";height:2px;width:40px}.page-hero__title{font-size:88px;max-width:900px}.page-hero__text{font-size:var(--body-l-size);line-height:var(--body-l-line)}.page-hero .page-hero__secondary{display:inline-flex}.page-hero__actions{padding-top:0}}@media (min-width:1024px){.page-hero{justify-content:flex-start}.page-hero__inner{padding-bottom:var(--space-64)}.page-hero--origami,.page-hero--split{min-height:720px}.page-hero--origami .page-hero__inner,.page-hero--split .page-hero__inner{padding-top:220px}.page-hero__origami{margin:0;position:absolute;right:-8%;top:25.15%;width:34%}.page-hero--split .page-hero__media{left:auto;width:44.5%}.page-hero--split .page-hero__overlay{background:linear-gradient(90deg,#0c0c0e,rgba(12,12,14,0) 40%)}.page-hero--origami .page-hero__content,.page-hero--split .page-hero__content{max-width:760px}.page-hero--origami .page-hero__text,.page-hero--split .page-hero__text{max-width:560px}.page-hero--full{min-height:760px}.page-hero--full .page-hero__inner{padding-top:230px}.page-hero--full .page-hero__media{background:linear-gradient(152deg,#121214 14%,#47474f 57%,#9e0026 86%)}.page-hero--full .page-hero__content{gap:var(--space-32)}.page-hero--full .page-hero__title{font-size:104px;letter-spacing:-.01em;line-height:1}}@media (min-width:1280px){.page-hero__origami{right:-5.56%;width:39.4%}.page-hero--full .page-hero__title{font-size:var(--display-xl-size)}} /* ===== block section-heading ===== */ .section-heading-block{background:var(--bg-page)}.section-heading-block.is-dark{background:var(--bg-inverse)}.section-heading-block__inner{margin-inline:auto;max-width:calc(var(--container) + var(--gutter)*2);padding:var(--space-48) var(--gutter) 0}@media (min-width:768px){.section-heading-block__inner{padding-top:var(--space-96)}} /* ===== block split-media ===== */ .split-media{background:var(--bg-page);color:var(--text-primary)}.split-media__inner{display:flex;flex-direction:column;margin-inline:auto;max-width:calc(var(--container) + var(--gutter)*2);padding:var(--space-64) var(--gutter)}.split-media__inner>.section-heading{margin-bottom:var(--space-24)}.split-media__media{background:linear-gradient(147deg,#47474f 14%,#121214 86%);margin:0;overflow:hidden;position:relative}.split-media__row.is-reversed .split-media__media{background:linear-gradient(147deg,#9e0026 14%,#121214 86%)}.split-media__img{height:100%;inset:0;object-fit:cover;position:absolute;width:100%}.split-media__body{align-items:flex-start;display:flex;flex-direction:column;gap:20px}.split-media__kicker{color:var(--text-accent);font-size:var(--caption-size);font-weight:var(--caption-weight);letter-spacing:var(--caption-tracking);line-height:var(--caption-line);margin:0}.split-media__title{text-transform:none}.split-media__subtitle,.split-media__title{font-size:var(--h4-size);font-weight:var(--h4-weight);line-height:var(--h4-line)}.split-media__subtitle{font-family:var(--font-heading);margin:0}.split-media__text{color:var(--text-secondary);font-size:var(--body-m-size);line-height:var(--body-m-line);margin:0}.split-media--rows .split-media__row{border-bottom:1px solid var(--border-default);position:relative}.split-media--rows .split-media__row.has-link{padding:22px 32px 22px 0}.split-media--rows .split-media__row:not(.has-link){padding-block:var(--space-24)}.split-media--rows .split-media__row.has-link :is(.split-media__media,.split-media__kicker,.split-media__subtitle,.split-media__text){display:none}.split-media--rows .split-media__row:not(.has-link) .split-media__media{display:none}.split-media--rows .has-link .split-media__button{border:0;color:var(--text-accent);font-size:0;letter-spacing:0;padding:0;position:static}.split-media--rows .has-link .split-media__button .icon{position:absolute;right:0;top:50%;transform:translateY(-50%)}.split-media--rows .has-link .split-media__button:after{content:"";inset:0;position:absolute}.split-media--banner .split-media__inner{max-width:none;padding:0}.split-media--banner .split-media__media{background:linear-gradient(144deg,#121214 14%,#47474f 86%);height:240px}.split-media--banner .split-media__body{padding:var(--space-48) var(--gutter)}.split-media--banner .split-media__kicker{font-size:var(--eyebrow-size);font-weight:var(--eyebrow-weight);letter-spacing:var(--eyebrow-tracking);line-height:var(--eyebrow-line);text-transform:uppercase}.split-media--banner .split-media__title{font-size:40px;font-weight:var(--h1-weight);line-height:1;text-transform:uppercase}@media (min-width:768px){.split-media__inner{padding-block:120px}.split-media__inner>.section-heading{margin-bottom:var(--space-48)}.split-media--rows .split-media__row,.split-media--rows .split-media__row.has-link,.split-media--rows .split-media__row:not(.has-link){align-items:center;border-bottom:0;border-top:1px solid var(--border-default);display:grid;gap:var(--space-48);grid-template-columns:repeat(2,minmax(0,1fr));padding:56px 0}.split-media--rows .split-media__row .split-media__media,.split-media--rows .split-media__row.has-link :is(.split-media__media,.split-media__kicker,.split-media__subtitle,.split-media__text),.split-media--rows .split-media__row:not(.has-link) .split-media__media{display:block}.split-media--rows .split-media__media{aspect-ratio:560/360}.split-media--rows .split-media__row.is-reversed .split-media__media{order:2}.split-media--rows .split-media__title{font-size:40px;font-weight:var(--h2-weight);line-height:var(--h2-line);text-transform:uppercase}.split-media--rows .split-media__text{font-size:var(--body-l-size);line-height:var(--body-l-line)}.split-media--rows .has-link .split-media__button{border-bottom:1.5px solid var(--border-strong);color:var(--text-primary);font-size:var(--button-size);letter-spacing:var(--button-tracking);padding-bottom:6px;position:relative}.split-media--rows .has-link .split-media__button:hover{border-color:var(--text-accent);color:var(--text-accent)}.split-media--rows .has-link .split-media__button .icon{position:static;transform:none}.split-media--rows .has-link .split-media__button:after{content:none}.split-media--banner .split-media__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.split-media--banner .split-media__media{height:auto;min-height:440px}.split-media--banner .split-media__body{gap:var(--space-24);justify-content:center;padding:var(--space-64) 40px}.split-media--banner .split-media__title{font-size:var(--h2-size)}.split-media--banner .split-media__text{font-size:var(--body-l-size);line-height:var(--body-l-line)}}@media (min-width:1024px){.split-media--rows .split-media__row,.split-media--rows .split-media__row.has-link,.split-media--rows .split-media__row:not(.has-link){gap:80px;grid-template-columns:repeat(2,minmax(0,560px))}.split-media__inner>.section-heading{margin-bottom:0}.split-media--rows .split-media__title{font-size:var(--h2-size)}.split-media--banner .split-media__media{min-height:520px}.split-media--banner .split-media__body{padding-inline:80px}.split-media--banner .split-media__body>*{max-width:560px}.split-media--banner .split-media__title{font-size:var(--h1-size)}} /* ===== block testimonials ===== */ .testimonials{background:var(--bg-page);color:var(--text-primary)}.testimonials__inner{display:flex;flex-direction:column;gap:var(--space-32);margin-inline:auto;max-width:calc(var(--container) + var(--gutter)*2);padding:var(--space-64) var(--gutter)}.testimonials__list{display:flex;gap:var(--space-16);list-style:none;margin:0 calc(var(--gutter)*-1);overflow-x:auto;padding:0 var(--gutter);scroll-padding-inline:var(--gutter);scroll-snap-type:x mandatory;scrollbar-width:none}.testimonials__list::-webkit-scrollbar{display:none}.testimonial{flex:0 0 88%;scroll-snap-align:start}.testimonials__list>.testimonial:only-child{flex-basis:100%}.testimonial__figure{background:var(--bg-elevated);border:1px solid var(--border-default);display:flex;flex-direction:column;gap:var(--space-24);height:100%;margin:0;padding:var(--space-32) var(--space-24)}.testimonial__mark{color:var(--text-accent);font-family:var(--font-heading);font-size:72px;font-weight:700;height:36px;line-height:.9}.testimonial__quote{margin:0}.testimonial__quote p{font-family:var(--font-heading);font-size:22px;font-weight:var(--h4-weight);line-height:var(--h4-line);margin:0}.testimonial__author{align-items:center;display:flex;gap:var(--space-16);margin-top:auto}.testimonial__portrait{background:linear-gradient(135deg,#47474f 14%,#9e0026 86%);border-radius:var(--radius-full);flex-shrink:0;height:56px;overflow:hidden;width:56px}.testimonial__img{height:100%;object-fit:cover;width:100%}.testimonial__meta{display:flex;flex-direction:column;gap:2px}.testimonial__name{font-size:var(--body-m-size);font-weight:600;line-height:var(--body-m-line)}.testimonial__role{color:var(--text-secondary);font-size:var(--body-s-size);line-height:var(--body-s-line)}@media (min-width:768px){.testimonials__inner{gap:56px;padding-block:120px}.testimonials__list{display:grid;gap:var(--space-32);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;overflow:visible;padding:0}.testimonial__figure{gap:28px;padding:36px var(--space-32)}.testimonial__mark{font-size:80px;height:48px}.testimonial__quote p{font-size:var(--h4-size)}}@media (min-width:1024px){.testimonials__list{grid-template-columns:repeat(3,minmax(0,1fr))}} /* ===== block timeline ===== */ .timeline{background:var(--bg-inverse);color:var(--text-inverse)}.timeline__inner{gap:var(--space-32);margin-inline:auto;max-width:calc(var(--container) + var(--gutter)*2);padding:var(--space-64) var(--gutter)}.timeline__inner,.timeline__list{display:flex;flex-direction:column}.timeline__list{list-style:none;margin:0;padding:0}.timeline__item{display:flex;flex-direction:column;gap:var(--space-8);padding:0 0 var(--space-32) 40px;position:relative}.timeline__rail:after,.timeline__rail:before{content:"";position:absolute}.timeline__rail:before{background:hsla(0,0%,100%,.25);bottom:0;left:6px;top:0;width:1px}.timeline__item:last-child .timeline__rail:before{bottom:auto;height:14px}.timeline__rail:after{background:var(--bg-inverse);border:2px solid var(--bg-accent);border-radius:var(--radius-full);box-sizing:border-box;height:14px;left:0;top:0;width:14px}.timeline__item:last-child .timeline__rail:after{background:var(--bg-accent)}.timeline__year{font-family:var(--font-heading);font-size:40px;font-weight:700;line-height:1.05;margin:-6px 0 0;text-transform:uppercase}.timeline__item:last-child .timeline__year{color:var(--text-accent)}.timeline__title{font-size:var(--h4-size);font-weight:var(--h4-weight);line-height:var(--h4-line);text-transform:none}.timeline__text{font-size:var(--body-s-size);line-height:var(--body-s-line);margin:0;max-width:420px;opacity:.65}@media (min-width:768px){.timeline__inner{gap:var(--space-64);padding-block:120px}.timeline__year{font-size:var(--h2-size)}.timeline__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--space-48)}.timeline__item{gap:var(--space-16);padding:30px 24px 0 0}.timeline__item:last-child .timeline__rail:before,.timeline__rail:before{bottom:auto;height:1px;left:0;right:0;top:6px;width:auto}.timeline__year{margin:0}}@media (min-width:1024px){.timeline__list{grid-template-columns:repeat(var(--timeline-cols,6),minmax(0,1fr))}.timeline__text{max-width:190px}} /* ===== block worldwide-teaser ===== */ .worldwide-teaser{background:var(--bg-inverse);color:var(--text-inverse)}.worldwide-teaser__inner{display:flex;flex-direction:column;gap:var(--space-48);margin-inline:auto;max-width:calc(var(--container) + var(--gutter)*2);padding:var(--space-64) var(--gutter)}.worldwide-teaser__content{align-items:flex-start;display:flex;flex-direction:column;gap:20px}.worldwide-teaser__text{font-size:var(--body-m-size);line-height:var(--body-m-line);margin:0;max-width:460px}.worldwide-teaser__map{display:none}@media (min-width:768px){.worldwide-teaser__inner{padding-block:var(--space-96)}.worldwide-teaser__content{gap:28px}.worldwide-teaser__text{font-size:var(--body-l-size);line-height:var(--body-l-line)}.worldwide-teaser__map{display:block}}@media (min-width:1024px){.worldwide-teaser__inner{align-items:center;display:grid;gap:100px;grid-template-columns:460px minmax(0,1fr)}}