/*
Theme Name: Renova
Author: The Rope S.r.l
Author URI: https://www.therope.it
Description: Renova S.r.l. website theme (classic theme + ACF, WPML).
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: renova
*/

/* ==========================================================================
   ROOT
   Desktop values from the Figma desktop frames (designed at 1440), reached
   at a 1920px viewport; mobile values (375px viewport) from the mobile frames
   or, without them, estimated.

   Rules of this stylesheet:
   - sizes scale with the window: M px + (D - M) * scale, with the --scale-value
     property below, M the mobile value and D the Figma desktop one (D >= M)
   - no clamp: sizes are written with calc and the scale only, plus a media
     query when a breakpoint really needs a different value
   - blocks as tall as the window stay within the area under the header,
     --section-max-height below (the first screen splash and the footer apart)
   - media queries all at the end, from the smallest window up
   - no CSS functions written in comments: the minifier drops the code that
     follows them
   - English only: comments, class and id names
   ========================================================================== */

:root {
	--border: var(--container-padding);
	/* range value: 1920 - 375 = 1545; the Figma desktop values are reached at a 1920px window */
	--scale-value: ((100vw - 375px) / 1545);
	--font-size-base: calc(16px + (18 - 16) * var(--scale-value));
	/* Figma grid: 12 columns, desktop margin 48px and gutter 24px */
	--container-padding: calc(16px + (48 - 16) * var(--scale-value));
	--gutter: calc(16px + (24 - 16) * var(--scale-value));
	/* bar with the logo: 34px above and below the 38px logo */
	--header-height: calc(64px + (106 - 64) * var(--scale-value));
	--section-space: calc(72px + (120 - 72) * var(--scale-value));
	/* full-height blocks never go beyond the window area below the header */
	--section-max-height: calc(100vh - var(--header-height));
	--section-max-height: calc(100svh - var(--header-height));
	--radius: calc(8px + (10 - 8) * var(--scale-value)); /* cards, media boxes */
	--radius-small: 6px;                                 /* buttons */

	/* palette from the Figma (same names in login.css) */
	--color-black: #000000;
	--color-white: #FFFFFF;
	--color-background: #FFFFFF;     /* page background */
	--color-background-alt: #F2F2F2; /* menu second column, related sections, missing images */
	--color-accent: #FF6600;         /* accent: highlighted words, buttons, active items */
	--color-accent-dark: #D95700;    /* button hover, text links hover (not in the Figma: accent 15% darker) */
	--color-accent-light: rgba(255, 102, 0, 0.15); /* active menu item, benefit boxes */
	--color-dark: #000000;           /* dark sections, footer */
	--color-darkest: #1F1F1F;        /* footer bottom bar, cookie banner, login */
	--color-chip: #333333;           /* labels over dark images */
	--color-grey: #666666;           /* secondary text, meta */
	--color-grey-light: #999999;     /* menu secondary items, inactive items */
	--color-silver: #D9D9D9;         /* card borders, lines, form borders */
	--color-line: #D9D9D9;
	--color-line-inverted: rgba(255, 255, 255, 0.2);
	--color-text-inverted: rgba(255, 255, 255, 0.7); /* footer links on black */
}

/* ==========================================================================
   COLORS
   ========================================================================== */

.black,
.black * {
	color: var(--color-black) !important;
}

.white,
.white * {
	color: var(--color-white) !important;
}

.accent,
.accent * {
	color: var(--color-accent) !important;
}

.grey,
.grey * {
	color: var(--color-grey) !important;
}

.silver,
.silver * {
	color: var(--color-silver) !important;
}

.background-black {
	background-color: var(--color-black) !important;
}

.background-white {
	background-color: var(--color-white) !important;
}

.background-default {
	background-color: var(--color-background) !important;
}

.background-alt {
	background-color: var(--color-background-alt) !important;
}

.background-accent {
	background-color: var(--color-accent) !important;
}

.background-dark {
	background-color: var(--color-dark) !important;
}

.background-darkest {
	background-color: var(--color-darkest) !important;
}

.opacity-50 {
	opacity: .5;
}

.opacity-60 {
	opacity: .6;
}

/* ==========================================================================
   BASE
   ========================================================================== */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-paragraph), sans-serif;
	font-size: var(--font-size-base);
	font-weight: 400;
	line-height: 1.21;
	color: var(--color-black);
	background-color: var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-family: var(--font-heading), sans-serif;
	font-weight: 500;
	margin: 0 0 .5em;
}

/* highlighted words in headings: <b> in the title fields */
h1 b,
h2 b,
h3 b,
h4 b,
h5 b,
h6 b {
	color: var(--color-accent);
	font-weight: inherit;
}

p {
	margin-top: 0;
	margin-bottom: 1.2em;
}

p b,
p strong,
ul b,
ul strong,
ol b,
ol strong {
	font-weight: 700;
}

a {
	color: inherit;
}

/* inline text links: underlined, accent color */
p a:not(.link,.button),
.entry-content li a:not(.link,.button) {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-position: from-font;
}

/* ==========================================================================
   TYPOGRAPHY
   Default line-height and letter-spacing per style; the Figma variants
   are applied with the .lh-* and .ls-* modifiers
   ========================================================================== */

/* page title of the splash: "Material Handling", "FAQ" */
.h1 {
	font-size: calc(48px + (110 - 48) * var(--scale-value));
	font-weight: 500;
	line-height: .95;
	letter-spacing: 0;
}

/* product title: "Turborex" */
.h2 {
	font-size: calc(44px + (85 - 44) * var(--scale-value));
	font-weight: 500;
	line-height: .95;
	letter-spacing: -0.04em;
}

/* statements and single titles: "Ready to transform your production?" */
.h3 {
	font-size: calc(32px + (50 - 32) * var(--scale-value));
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
}

/* section titles: "OUR PRODUCTS", "SUBSCRIBE TO OUR NEWSLETTER" */
.h4 {
	font-size: calc(26px + (38 - 26) * var(--scale-value));
	font-weight: 600;
	line-height: 1.11;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* product card titles: "Revolution" */
.h5 {
	font-size: calc(22px + (28 - 22) * var(--scale-value));
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
}

/* news and event card titles, h2 of the editor content: "RENOVA @BATTERY SHOW EUROPE 2026" */
.h6,
.entry-content h2 {
	font-size: calc(20px + (24 - 20) * var(--scale-value));
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

/* feature titles, menu secondary items: "Particulate Filter" */
.h7 {
	font-size: calc(20px + (24 - 20) * var(--scale-value));
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
}

/* big figures: "42.000", "1980'" */
.number {
	font-size: calc(56px + (100 - 56) * var(--scale-value));
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
}

/* body text: paragraphs, form fields: "We listen to our customers' needs..." */
body:not(.wp-core-ui) *:not(.hide-if-value,.acf-label) > p,
html :where(.editor-styles-wrapper) p,
html :where(.editor-styles-wrapper) ul,
html :where(.editor-styles-wrapper) ol,
.entry-content ul,
ol,
.text-body,
.entry-content h3,
.gform_wrapper.gravity-theme .gform-body.gform_body input,
.gform_wrapper.gravity-theme .gform-body.gform_body select,
.gform_wrapper.gravity-theme .gform-body.gform_body textarea,
#login input {
	font-size: calc(16px + (18 - 16) * var(--scale-value));
	font-weight: 400;
	line-height: 1.21;
	letter-spacing: 0;
}

/* h3 of the editor content */
.entry-content h3 {
	font-weight: 600;
	margin-top: 2em;
}

/* secondary text: "Lorem ipsum dolor sit amet consectetur" under the section titles */
body:not(.wp-core-ui) *:not(.hide-if-value,.acf-label) > p.text-small,
.text-small {
	font-size: calc(15px + (16 - 15) * var(--scale-value));
	font-weight: 400;
	line-height: 1.21;
}

/* card texts, footer links, captions: "Lorem ipsum dolor sit amet consectetur dolor sit" */
body:not(.wp-core-ui) *:not(.hide-if-value,.acf-label) > p.caption,
.caption,
.wp-element-caption,
.gform_wrapper .gfield_consent_label {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.33;
}

/* section eyebrows: "LOREM IPSUM DOLOR SIT AMET CONSECTETUR" */
.label {
	font-size: calc(14px + (16 - 14) * var(--scale-value));
	font-weight: 700;
	line-height: 1.21;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* text CTA links and buttons: "MORE ABOUT US", "CONFIGURE" */
.link,
.button {
	font-size: calc(13px + (14 - 13) * var(--scale-value));
	font-weight: 700;
	line-height: 1.21;
	text-transform: uppercase;
}

/* header items, menu labels, form labels: "MENU", "SEE ALL INDUSTRIAL CONTROLS" */
.label-small,
.gform_wrapper .gfield_label {
	font-size: calc(12px + (13 - 12) * var(--scale-value));
	font-weight: 700;
	line-height: 1.33;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* dates and categories: "9-11 JUNE 2026", "ARTICLE" */
.label-xs {
	font-size: calc(11px + (12 - 11) * var(--scale-value));
	font-weight: 700;
	line-height: 1.33;
	text-transform: uppercase;
}

/* labels on cards and images: "Product label", "Tag" */
.chip {
	display: inline-flex;
	align-items: center;
	padding: 5px 10px;
	border-radius: 40px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.33;
	color: var(--color-grey);
	background-color: #F0F0F0;
}

.chip.inverted {
	color: var(--color-white);
	background-color: var(--color-chip);
}

/* ==========================================================================
   MODIFIERS
   ========================================================================== */

.lh-09 {
	line-height: .9 !important;
}

.lh-1 {
	line-height: 1 !important;
}

.lh-11 {
	line-height: 1.1 !important;
}

.lh-12 {
	line-height: 1.2 !important;
}

.lh-135 {
	line-height: 1.35 !important;
}

.ls-0 {
	letter-spacing: 0 !important;
}

.ls-tight {
	letter-spacing: -0.04em !important;
}

.uppercase {
	text-transform: uppercase !important;
}

.normal-case {
	text-transform: none !important;
}

.fw-300 {
	font-weight: 300 !important;
}

.fw-400 {
	font-weight: 400 !important;
}

.fw-500 {
	font-weight: 500 !important;
}

.fw-700 {
	font-weight: 700 !important;
}

/* ==========================================================================
   LINKS AND BUTTONS
   ========================================================================== */

/* text CTA with underline bar */
.link {
	display: inline-block;
	vertical-align: top;
	position: relative;
	padding-bottom: 5px;
	text-decoration: none;
	color: var(--color-black);
	cursor: pointer;
}

.link:after,
.link-grow:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform-origin: center;
	transition: transform .35s cubic-bezier(0.33333, 0.66667, 0.66667, 1);
}

/* the existing line shrinks to the center, then comes back on mouse out */
.link:hover:after {
	transform: scaleX(0);
}

.link.inverted {
	color: var(--color-white);
}

/* text link without line: a 1px line grows from the center on hover */
.link-grow {
	display: inline-block;
	vertical-align: top;
	position: relative;
	padding-bottom: 5px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.link-grow:after {
	transform: scaleX(0);
}

.link-grow:hover:after,
.link-grow:focus-visible:after {
	transform: scaleX(1);
}

/* solid button, rounded: "CONFIGURE", form submit, cookie buttons. Accent with black
   text; .inverted white, .dark black with white text */
*:not(.acf-link) > .button:not(.acf-button,.button-primary,.ed_button,.fb-flex,.media-button,.button-large,.button-small,.button-hero,.button-link,.upload-dismiss-errors,.thickbox,.insert-media),
.gform_button,
.gform_wrapper.gravity-theme .gform-body.gform_body input.gform-button,
.cky-modal .cky-btn,
.cky-consent-container .cky-btn {
	font-size: calc(13px + (14 - 13) * var(--scale-value));
	font-weight: 700;
	line-height: 1.21;
	letter-spacing: 0;
	text-transform: uppercase;
	padding: 16px calc(32px + (56 - 32) * var(--scale-value));
	border: none;
	border-radius: var(--radius-small);
	color: var(--color-black);
	background-color: var(--color-accent);
	text-align: center;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	transition: background-color .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), color .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1);
}

*:not(.acf-link) > .button:not(.acf-button,.button-primary,.ed_button):hover,
*:not(.acf-link) > .button:not(.acf-button,.button-primary,.ed_button):focus-visible,
.gform_button:hover {
	background-color: var(--color-accent-dark);
}

.button.inverted {
	color: var(--color-black) !important;
	background-color: var(--color-white) !important;
}

.button.dark {
	color: var(--color-white) !important;
	background-color: var(--color-black) !important;
}

.button.inverted:hover,
.button.inverted:focus-visible,
.button.dark:hover,
.button.dark:focus-visible {
	color: var(--color-black) !important;
	background-color: var(--color-accent) !important;
}

/* ==========================================================================
   LISTS
   ========================================================================== */

.entry-content ul,
ol {
	padding-left: 1.2em;
	margin: 1.5em 0;
}

.entry-content ul {
	list-style: square;
}

.entry-content ul li::marker {
	color: var(--color-accent);
}

.entry-content ul > li:not(:last-child),
ol > li:not(:last-child) {
	margin-bottom: .6em;
}

/* ==========================================================================
   FORM
   ========================================================================== */

.gform_wrapper.gravity-theme .gform-body.gform_body input:not([type="checkbox"],[type="radio"],[type="submit"]),
.gform_wrapper.gravity-theme .gform-body.gform_body select,
.gform_wrapper.gravity-theme .gform-body.gform_body textarea {
	color: var(--color-black);
	background-color: transparent;
	border: none;
	border-bottom: 1px solid var(--color-silver);
	border-radius: 0;
	padding: 0 0 14px;
}

.gform_wrapper.gravity-theme .gform-body.gform_body ::placeholder {
	color: var(--color-black);
	opacity: 1;
}

.gform_wrapper .gfield_label,
.gform_wrapper .gfield_consent_label {
	color: var(--color-grey);
}

/* ==========================================================================
   COOKIE BANNER (CookieYes)
   ========================================================================== */

.cky-consent-container {
	z-index: 101 !important;
	max-width: calc(343px + (1000 - 343) * var(--scale-value)) !important;
	/* centered whatever position is set in the plugin (box bottom left, banner...) */
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
	width: calc(100% - 2 * (var(--border))) !important;
}

.cky-consent-container .cky-consent-bar {
	box-shadow: unset !important;
	border: none !important;
	border-radius: 0 !important;
	color: var(--color-white) !important;
	background: var(--color-darkest) !important;
}

.cky-notice .cky-title {
	display: none !important;
}

.cky-notice-group {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.cky-custom-brand-logo-wrapper,
.cky-notice .cky-title,
.cky-notice-des,
.cky-notice-btn-wrapper,
.cky-notice-content-wrapper {
	padding: 0 !important;
}

.cky-notice-des {
	overflow-y: unset !important;
}

.cky-notice-des *,
.cky-consent-bar .cky-notice-des p {
	font-size: calc(14px + (15 - 14) * var(--scale-value)) !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: rgba(255, 255, 255, 0.7) !important;
}

.cky-notice-des a.cky-policy {
	color: var(--color-white) !important;
	text-decoration: underline !important;
	margin-left: -3px;
}

.cky-notice-btn-wrapper {
	margin-left: 0 !important;
	margin-top: 10px !important;
}

.cky-consent-container .cky-btn {
	margin-top: 0 !important;
}

/* small button variant for the cookie banner and preference center: same size as the header labels */
.cky-consent-container .cky-btn,
.cky-modal .cky-btn {
	font-size: calc(12px + (13 - 12) * var(--scale-value));
	padding: calc(12px + (14 - 12) * var(--scale-value)) calc(20px + (24 - 20) * var(--scale-value));
}

/* fixed button colors, same in the banner and in the preference center */
.cky-btn.cky-btn-accept {
	color: var(--color-white) !important;
	background-color: var(--color-accent) !important;
	border: none !important;
}

.cky-btn.cky-btn-customize,
.cky-btn.cky-btn-reject,
.cky-btn.cky-btn-preferences {
	color: var(--color-white) !important;
	background-color: var(--color-dark) !important;
	border: none !important;
}

.cky-btn:hover {
	opacity: 1 !important;
}

.cky-consent-bar .cky-banner-btn-close {
	border: none !important;
	padding: 14px 24px !important;
}

.cky-consent-bar .cky-banner-btn-close img {
	height: 12px !important;
	width: 12px !important;
	filter: invert(1);
}

/* preference center */
.cky-overlay,
.cky-modal {
	z-index: 101 !important;
}

html:has(.cky-overlay:not(.cky-hide)),
body:has(.cky-overlay:not(.cky-hide)) {
	overflow: hidden !important;
	overscroll-behavior: none;
}

.cky-modal,
.cky-modal .cky-preference-center {
	color: var(--color-black) !important;
	background-color: var(--color-background) !important;
	border: none !important;
	border-radius: 0 !important;
}

.cky-modal .cky-preference-body-wrapper {
	overscroll-behavior-y: contain;
}

.cky-modal p {
	margin: 0;
}

.cky-preference-header .cky-btn-close img {
	height: 12px !important;
	width: 12px !important;
}

/* all preference center text at the banner size, bottom buttons excluded */
.cky-preference-center *:not(.cky-btn) {
	font-size: calc(14px + (15 - 14) * var(--scale-value)) !important;
	line-height: 1.2 !important;
}

.cky-preference-header .cky-preference-title,
.cky-accordion-btn,
.cky-accordion-header .cky-accordion-btn[data-cky-tag="detail-category-title"],
.cky-preference-content-wrapper *,
.cky-accordion-header-des *,
.cky-gpc-wrapper .cky-gpc-desc *,
.cky-cookie-des-table li div:last-child p {
	font-weight: 500 !important;
	color: var(--color-black) !important;
}

.cky-preference-content-wrapper .cky-show-desc-btn {
	color: var(--color-accent) !important;
	text-decoration: underline !important;
}

.cky-accordion-header .cky-always-active {
	font-size: calc(12px + (13 - 12) * var(--scale-value)) !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	color: var(--color-accent) !important;
}

.cky-accordion-wrapper {
	margin-bottom: 0 !important;
}

.cky-accordion:not(:last-child) {
	border-bottom: 1px solid var(--color-silver) !important;
}

.cky-audit-table {
	border-radius: 0 !important;
	border-color: var(--color-background-alt) !important;
	background-color: var(--color-background-alt) !important;
}

.cky-audit-table * {
	color: var(--color-black) !important;
}

.cky-cookie-des-table li div:first-child {
	font-weight: 700 !important;
}

.cky-switch input[type="checkbox"] {
	width: 44px !important;
	height: 24px !important;
	background: var(--color-silver) !important;
}

.cky-switch input[type="checkbox"]:checked {
	background: var(--color-accent) !important;
}

.cky-consent-container .cky-preference-body-wrapper button,
.cky-preference-body-wrapper .cky-btn {
	padding: 0 10px !important;
}

.cky-footer-shadow,
div[data-cky-tag="detail-powered-by"],
div[data-cky-tag="powered-by"],
div[style="padding:0 24px 12px 24px"] {
	display: none !important;
}

/* revisit consent button */
.cky-btn-revisit-wrapper {
	width: 35px !important;
	height: 35px !important;
	background-color: var(--color-accent) !important;
	z-index: 500000 !important;
}

.cky-btn-revisit-wrapper .cky-btn-revisit img {
	width: 25px !important;
	height: 25px !important;
}

.cky-revisit-bottom-left,
.cky-revisit-bottom-right {
	bottom: 60px !important;
	right: 14.5px !important;
	left: auto !important;
}

/* the button sits on the right edge: tooltip opens to its left */
.cky-revisit-bottom-left:hover::before,
.cky-revisit-bottom-right:hover::before {
	left: auto !important;
	right: calc(100% + 7px) !important;
	font-family: var(--font-paragraph), sans-serif;
	font-size: calc(12px + (13 - 12) * var(--scale-value)) !important;
	font-weight: 500;
	line-height: 1 !important;
	padding: 6px 10px !important;
	border-radius: 0 !important;
	color: var(--color-white) !important;
	background: var(--color-darkest) !important;
}

.cky-revisit-bottom-left:hover::after,
.cky-revisit-bottom-right:hover::after {
	left: auto !important;
	right: calc(100% + 2px) !important;
	border-width: 5px 0 5px 5px !important;
	border-color: transparent transparent transparent var(--color-darkest) !important;
}

/* ==========================================================================
   GRID
   Container margins and gutters from the Figma columns grid (desktop
   margin and gutter in :root)
   ========================================================================== */

.container,
.container-large,
.container-fluid {
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

.row {
	margin-left: calc(var(--gutter) / -2);
	margin-right: calc(var(--gutter) / -2);
}

.row > * {
	padding-left: calc(var(--gutter) / 2);
	padding-right: calc(var(--gutter) / 2);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	clip: auto;
	width: auto;
	height: auto;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--color-white);
}

img {
	max-width: 100%;
	height: auto;
}

ul.menu,
.site-header ul,
.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.media-cover,
.media-cover picture,
.media-cover img,
.media-cover video {
	display: block;
	width: 100%;
	height: 100%;
}

.media-cover img,
.media-cover video {
	object-fit: cover;
}

/* ==========================================================================
   HEADER
   White over the dark media at the top of every page, black once scrolled
   (and from the start with body.header-solid); hidden while scrolling down.
   The orange contact tab stays on the right edge.
   ========================================================================== */

:root {
	--contact-tab-width: calc(36px + (57 - 36) * var(--scale-value));
	/* main menu: first column, second column (sub menus) */
	--menu-col-1: 100%;
	--menu-col-2: 100%;
	--menu-top: 64px;
	--menu-side: 16px;
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	color: var(--color-white);
	transition: transform .4s cubic-bezier(0.33333, 0.66667, 0.66667, 1), background-color .3s;
}

.header-solid .site-content {
	padding-top: var(--header-height);
}

.header-scrolled .site-header,
.header-solid .site-header,
.search-open .site-header {
	background-color: var(--color-black);
}

.header-hidden:not(.search-open) .site-header {
	transform: translateY(-100%);
}

.site-header-bar {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: var(--header-height);
	/* the right items end before the contact tab */
	padding-right: calc(var(--contact-tab-width) + 16px + (28 - 16) * var(--scale-value));
}

.menu-toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.menu-toggle-icon {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: calc(22px + (26 - 22) * var(--scale-value));
	height: 14px;
}

.menu-toggle-icon span {
	display: block;
	height: 2px;
	border-radius: 10px;
	background-color: currentColor;
}

/* the logo in the center of the window, as large as in the Figma at most */
.site-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	line-height: 0;
}

.site-logo img {
	width: min(calc(130px + (204 - 130) * var(--scale-value)), 204px);
	height: auto;
}

.site-header-right {
	display: flex;
	align-items: center;
	gap: 22px;
}

.search-toggle {
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.site-header-divider {
	width: 1px;
	height: 28px;
	border-radius: 8px;
	background-color: var(--color-line-inverted);
}

/* chevrons: a square with two sides, turned */
.chevron {
	display: inline-block;
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transition: transform .3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), color .2s;
}

.chevron-right {
	transform: rotate(45deg);
}

.chevron-left {
	transform: rotate(-135deg);
}

.chevron-down {
	width: 5px;
	height: 5px;
	transform: translateY(-2px) rotate(135deg);
}

/* language menu: the current code, the others below on click */
.language-dropdown {
	position: relative;
}

.language-dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.language-dropdown.is-open .chevron-down {
	transform: translateY(1px) rotate(-45deg);
}

.language-switcher {
	display: flex;
	align-items: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.language-switcher a {
	color: inherit;
	text-decoration: none;
}

.language-dropdown-list {
	position: absolute;
	top: calc(100% + 12px);
	left: -14px;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 6px 0;
	border-radius: var(--radius-small);
	background-color: var(--color-black);
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s, visibility 0s .2s;
}

.language-dropdown.is-open .language-dropdown-list {
	visibility: visible;
	opacity: 1;
	transition: opacity .2s, visibility 0s;
}

.language-dropdown-list a {
	display: block;
	padding: 6px 14px;
}

.language-switcher-menu {
	display: none;
}

/* search: a bar that unrolls under the header */
.header-search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 8px 0 calc(24px + (32 - 24) * var(--scale-value));
	background-color: var(--color-black);
	visibility: hidden;
	clip-path: inset(0 0 100% 0);
	transition: clip-path .45s cubic-bezier(0.33333, 0.66667, 0.66667, 1), visibility 0s .45s;
}

.search-open .header-search {
	visibility: visible;
	clip-path: inset(0 0 0 0);
	transition: clip-path .45s cubic-bezier(0.33333, 0.66667, 0.66667, 1), visibility 0s;
}

.header-search .container-fluid {
	display: flex;
	align-items: flex-end;
	gap: var(--gutter);
	padding-right: calc(var(--contact-tab-width) + 16px + (28 - 16) * var(--scale-value));
}

.header-search-field {
	flex: 1;
	min-width: 0;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 0;
	color: var(--color-white);
	background: none;
	outline: none;
}

.header-search-field::placeholder {
	color: var(--color-text-inverted);
}

.header-search-field:focus {
	border-bottom-color: var(--color-white);
}

.header-search .link {
	padding-top: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* contact tab on the right edge, text reading upwards */
.contact-tab {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 101;
	display: flex;
	justify-content: center;
	width: var(--contact-tab-width);
	height: calc(120px + (188 - 120) * var(--scale-value));
	padding-top: calc(20px + (45 - 20) * var(--scale-value));
	color: var(--color-black);
	background-color: var(--color-accent);
	text-decoration: none;
	transition: background-color .2s;
}

.contact-tab span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

.contact-tab:hover,
.contact-tab:focus-visible {
	background-color: var(--color-accent-dark);
}

/* ==========================================================================
   MAIN MENU
   A white panel from the left over the blurred page; the sub menus open in a
   grey second column next to it. On mobile the panel is as wide as the window
   and every level covers it in turn.
   ========================================================================== */

.main-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	transition: visibility 0s .45s;
}

.menu-open .main-menu {
	visibility: visible;
	transition: visibility 0s;
}

.menu-open {
	overflow: hidden;
}

.main-menu-backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(17px);
	backdrop-filter: blur(17px);
	opacity: 0;
	transition: opacity .45s cubic-bezier(0.33333, 0.66667, 0.66667, 1);
}

.menu-open .main-menu-backdrop {
	opacity: 1;
}

/* the panel unrolls from the left edge: no opacity, nothing shows through */
.main-menu-panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--menu-col-1);
	color: var(--color-black);
	background-color: var(--color-white);
	clip-path: inset(0 100% 0 0);
	transition: clip-path .45s cubic-bezier(0.33333, 0.66667, 0.66667, 1);
}

.menu-open .main-menu-panel {
	clip-path: inset(0 -100vw 0 0);
}

/* top bar of the first column: "MENU", or the way back from a sub menu */
.main-menu-top {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: var(--menu-col-1);
	height: var(--menu-top);
	padding: 0 calc(var(--menu-side) + 13px);
	display: flex;
	align-items: center;
	background-color: var(--color-white);
}

.main-menu-label,
.main-menu-back {
	color: var(--color-grey-light);
}

.main-menu-back {
	display: none;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	transition: color .2s;
}

.main-menu-back:hover,
.main-menu-back:focus-visible {
	color: var(--color-black);
}

.main-menu-back .chevron {
	width: 6px;
	height: 6px;
}

.has-back .main-menu-label {
	display: none;
}

.has-back .main-menu-back {
	display: flex;
}

.main-menu-columns {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: calc(var(--menu-top) + 8px) var(--menu-side) 0;
}

.main-menu-columns ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* first level: large product areas, then the other pages in grey at the bottom */
.menu-link {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 13px 15px;
	border-radius: 8px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: color .2s, background-color .2s;
}

/* 54px rows, 3px apart: the text 9px from the top of the active background */
.menu-header-products > .menu-item > .menu-link {
	padding-top: 9px;
	padding-bottom: 14px;
	font-size: calc(26px + (31 - 26) * var(--scale-value));
	color: var(--color-black);
}

.menu-header-products > .menu-item + .menu-item {
	margin-top: 3px;
}

.menu-header-products > .menu-item > .menu-link .chevron,
.menu-header-main > .menu-item > .menu-link .chevron {
	color: var(--color-grey-light);
}

.main-menu-pages {
	margin-top: auto;
	padding: calc(32px + (37 - 32) * var(--scale-value)) 0 calc(32px + (49 - 32) * var(--scale-value));
}

/* line above the pages: 318px wide in the Figma, 13px in from the active background */
.main-menu-pages:before {
	content: "";
	display: block;
	width: calc(100% - 26px);
	height: 1px;
	margin: 0 0 calc(28px + (37 - 28) * var(--scale-value)) 13px;
	background-color: var(--color-line);
}

.menu-header-main > .menu-item > .menu-link {
	padding-top: 7px;
	padding-bottom: 7px;
	font-size: calc(20px + (24 - 20) * var(--scale-value));
	color: var(--color-grey-light);
}

.main-menu .menu-link:hover,
.main-menu .menu-link:focus-visible,
.main-menu .menu-item.is-open > .menu-link {
	color: var(--color-black);
}

.main-menu .menu-item.is-open > .menu-link {
	background-color: var(--color-accent-light);
}

.main-menu .menu-item.is-open > .menu-link .chevron {
	color: var(--color-accent);
}

/* sub menus: the second column, grey, scrolling on their own. The right border
   keeps the scrollbar inside the column as in the Figma */
.main-menu .sub-menu {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: var(--menu-col-2);
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 var(--menu-side);
	background-color: var(--color-background-alt);
	visibility: hidden;
	clip-path: inset(0 100% 0 0);
	transition: clip-path .45s cubic-bezier(0.33333, 0.66667, 0.66667, 1), visibility 0s .45s;
}

/* browsers without the scrollbar pseudo elements below (Firefox) */
@supports not selector(::-webkit-scrollbar) {
	.main-menu .sub-menu {
		scrollbar-width: thin;
		scrollbar-color: var(--color-black) var(--color-silver);
	}
}

.main-menu .is-open > .sub-menu {
	visibility: visible;
	clip-path: inset(0 0 0 0);
	transition: clip-path .45s cubic-bezier(0.33333, 0.66667, 0.66667, 1), visibility 0s;
}

.main-menu .sub-menu::-webkit-scrollbar {
	width: 6px;
}

.main-menu .sub-menu::-webkit-scrollbar-track {
	margin: 42px 0 44px;
	border-radius: 10px;
	background-color: var(--color-silver);
}

.main-menu .sub-menu::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: var(--color-black);
}

.menu-see-all {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	min-height: var(--menu-top);
	margin-bottom: -8px;
}

.menu-see-all a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	color: var(--color-black);
	text-decoration: none;
	transition: color .2s;
}

.menu-see-all .chevron {
	width: 6px;
	height: 6px;
	color: var(--color-accent);
}

.menu-see-all a:hover,
.menu-see-all a:focus-visible {
	color: var(--color-accent-dark);
}

/* Configure: at the bottom of the column, over the cards while they scroll */
.menu-configure {
	position: sticky;
	bottom: 25px;
	flex-shrink: 0;
	margin-top: auto;
	padding-top: 52px;
	pointer-events: none;
}

.menu-configure .button {
	display: block !important;
	width: 100%;
	pointer-events: auto;
}

/* 25px under the last card or the button, with the 8px gap */
.main-menu .sub-menu:after {
	content: "";
	flex-shrink: 0;
	height: 17px;
}

/* cards: dark photos for the second level, white product cards for the third */
.menu-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex-shrink: 0;
	aspect-ratio: 344 / 224;
	overflow: hidden;
	padding: 24px 24px 19px;
	border-radius: var(--radius);
	text-decoration: none;
	background-color: var(--color-dark);
	color: var(--color-white);
}

.menu-card-media {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
}

.menu-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(0.33333, 0.66667, 0.66667, 1);
}

.menu-card:hover .menu-card-media img,
.menu-card:focus-visible .menu-card-media img {
	transform: scale(1.04);
}

/* shade under the texts of the dark cards (darker, warm at the bottom) */
.menu-card-dark .menu-card-media:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(43, 17, 0, 0.92) 100%);
}

.menu-card-light {
	color: var(--color-black);
	background-color: var(--color-white);
}

/* product cut-outs on the right of the white card */
.menu-card-light .menu-card-media img {
	position: absolute;
	top: 8%;
	right: 4%;
	width: 58%;
	height: 72%;
	object-fit: contain;
	object-position: right center;
}

.menu-card .chip {
	position: absolute;
	top: 24px;
	left: 24px;
}

.menu-card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 70%;
	font-size: calc(20px + (22 - 20) * var(--scale-value));
	font-weight: 600;
	line-height: 1;
}

.menu-card-title .chevron {
	display: none;
}

.menu-card-text {
	margin-top: 16px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.43;
}

/* a second level item with products, drilled: its list moves into the first
   column as text rows, its products take the second column */
/* no clip either: it would cut the products column next to it */
.main-menu .is-drilled > .sub-menu {
	overflow: visible;
	clip-path: none;
	background-color: var(--color-white);
}

.is-drilled > .sub-menu > .menu-see-all,
.is-drilled > .sub-menu > .menu-configure {
	display: none;
}

.is-drilled > .sub-menu {
	gap: 0;
	padding-top: calc(var(--menu-top) + 8px);
}

.main-menu .is-drilled > .sub-menu > .menu-item > .menu-card {
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	aspect-ratio: auto;
	overflow: visible;
	padding: 12.75px 15px;
	border-radius: 8px;
	font-size: calc(20px + (24 - 20) * var(--scale-value));
	color: var(--color-grey-light);
	background: none;
}

.is-drilled > .sub-menu > .menu-item > .menu-card > :not(.menu-card-title) {
	display: none;
}

.is-drilled > .sub-menu > .menu-item > .menu-card .menu-card-title {
	max-width: none;
	font-size: inherit;
	font-weight: 500;
}

.is-drilled > .sub-menu > .menu-item > .menu-card .chevron {
	display: inline-block;
}

.main-menu .is-drilled > .sub-menu > .menu-item > .menu-card:hover,
.main-menu .is-drilled > .sub-menu > .menu-item > .menu-card:focus-visible,
.main-menu .is-drilled > .sub-menu > .menu-item.is-open > .menu-card {
	color: var(--color-black);
}

.main-menu .is-drilled > .sub-menu > .menu-item.is-open > .menu-card {
	background-color: var(--color-accent-light);
}

.is-drilled > .sub-menu > .menu-item.is-open > .menu-card .chevron {
	color: var(--color-accent);
}

/* close: a white cross next to the open columns, on the blurred page */
.main-menu-close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 4;
	width: 52px;
	height: var(--menu-top);
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-black);
	cursor: pointer;
	transition: left .45s cubic-bezier(0.33333, 0.66667, 0.66667, 1), color .2s;
}

.main-menu-close:before,
.main-menu-close:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 2px;
	border-radius: 10px;
	background-color: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}

.main-menu-close:after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* squared plus / minus of the footer menu accordions (mobile) */
.menu-accordion-icon {
	display: none;
	position: relative;
	flex-shrink: 0;
	width: 13px;
	height: 13px;
}

.menu-accordion-icon:before,
.menu-accordion-icon:after {
	content: "";
	position: absolute;
	background-color: var(--color-white);
	transition: transform .3s cubic-bezier(0.33333, 0.66667, 0.66667, 1);
}

.menu-accordion-icon:before {
	top: 6px;
	left: 0;
	width: 13px;
	height: 1.5px;
}

.menu-accordion-icon:after {
	top: 0;
	left: 5.75px;
	width: 1.5px;
	height: 13px;
}

.is-open > .menu-accordion-toggle .menu-accordion-icon:after {
	transform: scaleY(0);
}

/* the space next to a primary item that opens its sub menu (mobile only) */
.menu-accordion-toggle {
	display: none;
}

.site-footer {
	color: var(--color-white);
	background-color: var(--color-dark);
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

/* newsletter band: title, Gravity Forms form (three fields in a row, the privacy
   below, the button on the right), a line with an accent stretch at the bottom */
.newsletter-band {
	padding-top: calc(48px + (68 - 48) * var(--scale-value));
}

.newsletter-title {
	max-width: 432px;
	margin: calc(0px + (15 - 0) * var(--scale-value)) 0 32px;
}

.newsletter-line {
	position: relative;
	height: 2px;
	margin-top: calc(48px + (91 - 48) * var(--scale-value));
	background-color: rgba(255, 255, 255, 0.15);
}

.newsletter-line:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 25.45%;
	height: 100%;
	background-color: var(--color-accent);
}

.newsletter-form .gform_wrapper.gravity-theme form {
	display: grid;
	grid-template-columns: 3fr 1fr;
	column-gap: var(--gutter);
	align-items: start;
}

.newsletter-form .gform_wrapper.gravity-theme .gform_fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: var(--gutter);
	row-gap: calc(24px + (33 - 24) * var(--scale-value));
	padding-top: calc(0px + (17 - 0) * var(--scale-value));
}

.newsletter-form .gform_wrapper.gravity-theme .gfield {
	grid-column: auto;
}

.newsletter-form .gform_wrapper.gravity-theme .gfield--type-consent,
.newsletter-form .gform_wrapper.gravity-theme .gfield--type-html,
.newsletter-form .gform_wrapper.gravity-theme .gfield--type-captcha {
	grid-column: 1 / -1;
}

/* the field names are the placeholders, white on the line; the labels stay for
   screen readers only */
.newsletter-form .gform_wrapper.gravity-theme .hidden_label > .gfield_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.newsletter-form .gform_wrapper.gravity-theme fieldset.gfield {
	margin: 0;
	padding: 0;
	border: 0;
}

.newsletter-form .gform_wrapper.gravity-theme .gform-body.gform_body input:not([type="checkbox"],[type="radio"],[type="submit"]) {
	width: 100%;
	padding: 0 0 11px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.33;
	color: var(--color-white);
	border-bottom-color: rgba(255, 255, 255, 0.4);
	outline: none;
}

.newsletter-form .gform_wrapper.gravity-theme .gform-body.gform_body input:focus {
	border-bottom-color: var(--color-white);
}

.newsletter-form .gform_wrapper.gravity-theme .gform-body.gform_body ::placeholder {
	color: var(--color-white);
}

.newsletter-form .gform_wrapper.gravity-theme .gform_footer {
	margin: 0;
	padding: 0;
}

.newsletter-form .gform_wrapper.gravity-theme .gform_footer .gform_button {
	width: 100%;
	margin: 0;
	padding-left: 16px;
	padding-right: 16px;
	color: var(--color-black);
	background-color: var(--color-white);
}

.newsletter-form .gform_wrapper.gravity-theme .gform_footer .gform_button:hover,
.newsletter-form .gform_wrapper.gravity-theme .gform_footer .gform_button:focus-visible {
	background-color: var(--color-accent);
}

.newsletter-form .gform_confirmation_message {
	padding-top: calc(0px + (17 - 0) * var(--scale-value));
}

/* privacy: a white square with the text and its underlined link */
.site-footer .gform_wrapper .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.site-footer .gform_wrapper .ginput_container_consent input[type="checkbox"] {
	appearance: none;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid var(--color-white);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

.site-footer .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked {
	background: var(--color-accent);
	border-color: var(--color-accent);
	box-shadow: inset 0 0 0 3px var(--color-dark);
}

.site-footer .gform_wrapper .gfield_consent_label {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.33;
	color: var(--color-white);
}

.site-footer .gform_wrapper .gfield_consent_label a {
	text-decoration: underline;
	text-underline-position: from-font;
}

.site-footer .gform_wrapper .gfield_validation_message,
.site-footer .gform_wrapper .validation_message {
	margin-top: 8px;
	padding: 0;
	border: 0;
	font-size: 13px;
	color: var(--color-accent);
	background: none;
}

/* main part: logo and contacts, then the four columns */
.site-footer-main {
	padding: calc(56px + (85 - 56) * var(--scale-value)) 0 calc(48px + (84 - 48) * var(--scale-value));
}

.site-footer-logo {
	display: block;
	width: fit-content;
	margin-top: 3px;
	line-height: 0;
}

.site-footer-logo img {
	width: min(calc(180px + (225 - 180) * var(--scale-value)), 225px);
	height: auto;
}

.site-footer .site-footer-address {
	margin: calc(24px + (30 - 24) * var(--scale-value)) 0 0;
	letter-spacing: -0.01em;
}

.site-footer-contacts {
	display: grid;
	grid-template-columns: 60px 1fr;
	margin: 23px 0 0;
	letter-spacing: -0.01em;
}

.site-footer-contacts dt,
.site-footer-contacts dd {
	margin: 0;
	padding: 1px 0;
}

.site-footer-contacts a:hover,
.site-footer-contacts a:focus-visible {
	color: var(--color-accent);
}

.menu-footer-main {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--gutter);
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-footer-title {
	display: block;
	width: fit-content;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.33;
	color: var(--color-white);
}

.menu-footer-main .sub-menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.menu-footer-main .sub-menu a {
	display: block;
	width: fit-content;
	max-width: 139px;
	font-size: 14px;
	line-height: 1.33;
	letter-spacing: -0.01em;
	color: var(--color-text-inverted);
	transition: color .2s;
}

/* menu items with the CSS class "accent": the portals */
.menu-footer-main .sub-menu .accent a {
	color: var(--color-accent);
}

.menu-footer-main .sub-menu a:hover,
.menu-footer-main .sub-menu a:focus-visible,
a.menu-footer-title:hover,
a.menu-footer-title:focus-visible {
	color: var(--color-white);
}

.menu-footer-main .sub-menu .accent a:hover,
.menu-footer-main .sub-menu .accent a:focus-visible {
	color: var(--color-accent-dark);
}

/* bottom bar: copyright, social in the center, policies */
.site-footer-bottom {
	background-color: var(--color-darkest);
}

.site-footer-bottom-row {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 65px;
	font-size: 13px;
	line-height: 1.33;
	letter-spacing: -0.01em;
	color: var(--color-text-inverted);
}

.site-footer .site-footer-copyright {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.site-footer-social {
	display: flex;
	align-items: center;
	gap: 19px;
}

.site-footer-social a {
	display: inline-flex;
	font-size: 20px;
	line-height: 1;
	transition: color .2s;
}

.site-footer-social a:hover,
.site-footer-social a:focus-visible {
	color: var(--color-white);
}

.menu-footer-policies {
	display: flex;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-footer-policies a {
	transition: color .2s;
}

.menu-footer-policies a:hover,
.menu-footer-policies a:focus-visible {
	color: var(--color-white);
}

/* ==========================================================================
   DEFAULT PAGE
   ========================================================================== */

.page-default {
	padding: calc(40px + (119 - 40) * var(--scale-value)) 0 calc(72px + (150 - 72) * var(--scale-value));
}

.page-intro h1 {
	margin: 0;
}

.page-content h2 {
	margin: 1.8em 0 .6em;
}

/* ==========================================================================
   404
   ========================================================================== */

/* the window under the header: text on top, the number as large as the space
   allows on the bottom right, in the light color, cut by the bottom edge */
.error-404 {
	position: relative;
	min-height: var(--section-max-height);
	padding-top: calc(48px + (112 - 48) * var(--scale-value));
	overflow: hidden;
}

.error-404-number {
	position: absolute;
	right: -.3vw;
	bottom: -.12em;
	font-size: min(50vw, calc(var(--section-max-height) * 1.05));
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.06em;
	white-space: nowrap;
	color: var(--color-background-alt);
	pointer-events: none;
	user-select: none;
}

.error-404-content {
	position: relative;
}

.error-404-content h1 {
	max-width: 12em;
	margin: calc(12px + (16 - 12) * var(--scale-value)) 0 0;
}

.error-404-content .link {
	margin-top: calc(32px + (48 - 32) * var(--scale-value));
}

/* ==========================================================================
   CAROUSELS
   ========================================================================== */

.owl-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.owl-dots.disabled {
	display: none;
}

.owl-dot span {
	display: block;
	width: 8px;
	height: 8px;
	background-color: var(--color-silver);
	transition: background-color .2s;
}

.owl-dot.active span {
	background-color: var(--color-accent);
}

/* arrows at the window edges: the arrow with the side margin on both sides */
.owl-nav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	transform: translateY(-50%);
}

.owl-nav.disabled {
	display: none;
}

.owl-nav button {
	width: calc(16px + (18 - 16) * var(--scale-value) - -2 * var(--container-padding));
	height: 100px;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--color-white) !important;
	pointer-events: auto;
}

.carousel-arrow {
	display: block;
	width: calc(16px + (18 - 16) * var(--scale-value));
	height: calc(16px + (18 - 16) * var(--scale-value));
	margin: auto;
	border-left: calc(1.5px + (2 - 1.5) * var(--scale-value)) solid currentColor;
	border-bottom: calc(1.5px + (2 - 1.5) * var(--scale-value)) solid currentColor;
	transform: rotate(45deg);
}

.carousel-arrow.next {
	transform: rotate(-135deg);
}

/* captions shown on the slides in view only, fading in and out */
.owl-item .carousel-caption {
	opacity: 0;
	transition: opacity .4s;
}

.owl-item.active .carousel-caption {
	opacity: 1;
}

/* carousels with one slide in the middle (center option): its caption only */
.owl-center .owl-item.active:not(.center):not(:only-child) .carousel-caption {
	opacity: 0;
}

.carousel-caption {
	max-width: 432px;
	margin: calc(16px + (24 - 16) * var(--scale-value)) auto 0;
	text-align: center;
}

/* counting numbers: the final digits' width from the start (min-width in ch from the markup) */
.js-counter {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* ==========================================================================
   MEDIA QUERY
   ========================================================================== */

/* 767 MAX WIDTH */
@media (max-width:767px) {
	/* the languages go to the bottom of the menu, the label next to the icon goes */
	.site-header-divider,
	.language-dropdown,
	.menu-toggle-label {
		display: none;
	}
	.menu-toggle,
	.search-toggle {
		padding: 10px;
		margin: -10px;
	}
	.cky-consent-container .cky-consent-bar {
		padding: 20px 16px 8px !important;
	}
	.cky-consent-bar .cky-banner-btn-close {
		right: calc(3 * var(--border) / 4 - 24px) !important;
	}
	.cky-notice-btn-wrapper {
		flex-direction: column !important;
	}
	.cky-notice-btn-wrapper .cky-btn {
		flex: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-right: 0 !important;
		margin-top: 10px !important;
	}
	.cky-notice-btn-wrapper .cky-btn-accept {
		order: 1 !important;
	}
	.cky-notice-btn-wrapper .cky-btn-customize {
		order: 2 !important;
	}
	.cky-notice-btn-wrapper .cky-btn-reject {
		order: 3 !important;
	}
	/* on phones the 404 number is as wide as the screen: the block only as tall as needed */
	.error-404 {
		min-height: min(var(--section-max-height), 140vw);
	}
}

/* 768 MIN WIDTH - 991 MAX WIDTH */
@media (min-width:768px) and (max-width:991px) {
	.cky-consent-container .cky-consent-bar {
		padding: 20px calc(3 * var(--border) / 4) 8px !important;
	}
}

/* 991 MAX WIDTH */
@media (max-width:991px) {
	/* main menu: as wide as the window, every level covers the panel in turn */
	.main-menu .sub-menu .sub-menu {
		left: 0;
	}
	.main-menu .sub-menu {
		padding-top: var(--menu-top);
	}
	.is-drilled > .sub-menu {
		visibility: hidden !important;
	}
	.is-drilled > .sub-menu .is-open > .sub-menu {
		visibility: visible !important;
	}
	/* languages: fixed at the bottom of the first column, also while it scrolls */
	.main-menu .language-switcher-menu {
		position: sticky;
		bottom: 0;
		display: flex;
		gap: 24px;
		margin: 0 calc(-1 * var(--menu-side));
		padding: 16px calc(var(--menu-side) + 15px) 24px;
		border-top: 1px solid var(--color-line);
		background-color: var(--color-white);
	}
	.main-menu-pages {
		padding-bottom: 24px;
	}
	.language-switcher-menu a {
		display: block;
		padding: 8px 0 5px;
	}
	/* more room between the items, growing with the height of the screen */
	.menu-header-products > .menu-item > .menu-link {
		padding-top: calc(1vh - -8px);
		padding-bottom: calc(1vh - -8px);
		padding-top: calc(1svh - -8px);
		padding-bottom: calc(1svh - -8px);
	}
	/* footer menu: the columns open as accordions, one at a time */
	.menu-footer-main > .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1px solid var(--color-line-inverted);
	}
	.menu-footer-main > .menu-item-has-children > .sub-menu {
		flex-basis: 100%;
	}
	.menu-footer-title {
		padding: 16px 0;
	}
	.menu-accordion-toggle {
		display: flex;
		flex: 1;
		justify-content: flex-end;
		align-items: center;
		margin: 0;
		padding: 0 0 0 16px;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}
	.menu-accordion-icon {
		display: inline-block;
	}
	/* closed sub menus: the height is set by the script, so open items never overlap */
	.menu-footer-main .sub-menu {
		gap: 0;
		max-height: 0;
		overflow: hidden;
		margin-top: 0;
		transition: max-height .35s cubic-bezier(0.33333, 0.66667, 0.66667, 1);
	}
	.menu-footer-main .sub-menu li:last-child {
		padding-bottom: 12px;
	}
	.menu-footer-main .sub-menu a {
		max-width: none;
		padding: 7px 0;
	}
	.site-footer-company {
		margin-bottom: 40px;
	}
	/* newsletter: the fields one under the other, the button full width */
	.newsletter-form .gform_wrapper.gravity-theme form {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}
	.newsletter-form .gform_wrapper.gravity-theme .gform_fields {
		grid-template-columns: 1fr;
	}
	/* bottom bar: social, policies, copyright */
	.site-footer-bottom-row {
		flex-direction: column;
		gap: 12px;
		padding: 20px 0 24px;
	}
	.site-footer-social {
		order: 1;
		gap: 4px;
	}
	.site-footer-social a {
		padding: 12px;
	}
	.menu-footer-policies {
		order: 2;
		gap: 24px;
	}
	.menu-footer-policies a {
		display: inline-block;
		padding: 10px 0;
	}
	.site-footer-copyright {
		order: 3;
		text-align: center;
	}
}

/* 992 MIN WIDTH */
@media (min-width:992px) {
	/* main menu: two columns, 414px and 432px in the Figma */
	:root {
		--menu-col-1: calc(320px + (414 - 320) * var(--scale-value));
		--menu-col-2: calc(340px + (432 - 340) * var(--scale-value));
		--menu-top: 89px;
		--menu-side: calc(24px + (35 - 24) * var(--scale-value));
	}
	.main-menu-top {
		align-items: flex-start;
		padding-top: 41px;
	}
	.main-menu-back {
		min-height: 0;
	}
	.main-menu .sub-menu {
		left: var(--menu-col-1);
		padding-right: calc(24px + (29 - 24) * var(--scale-value));
		border-right: 18px solid var(--color-background-alt);
	}
	.main-menu .is-drilled > .sub-menu {
		left: 0;
		width: var(--menu-col-1);
		padding-right: var(--menu-side);
		border-right: 0;
	}
	.main-menu .is-drilled > .sub-menu .sub-menu {
		left: var(--menu-col-1);
	}
	.menu-see-all {
		align-items: flex-start;
		padding-top: 29px;
	}
	.main-menu-close {
		left: calc(var(--menu-col-1) + 8px);
		top: 24px;
		width: 52px;
		height: 52px;
		color: var(--color-white);
	}
	.main-menu-close:before,
	.main-menu-close:after {
		width: 26px;
	}
	.has-sub .main-menu-close {
		left: calc(var(--menu-col-1) + var(--menu-col-2) + 8px);
	}
	.main-menu-close:hover,
	.main-menu-close:focus-visible {
		color: var(--color-accent);
	}
	.menu-footer-main .sub-menu {
		max-height: none !important;
	}
	.menu-footer-main {
		grid-template-columns: repeat(4, 1fr);
	}
	.newsletter-title {
		margin-bottom: 0;
	}
	/* social icons in the center of the bar */
	.site-footer-social {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	/* the default page title stays in view while the content scrolls */
	.page-intro {
		align-self: flex-start;
	}
	.page-intro-sticky {
		position: sticky;
		top: calc(var(--header-height) + 24px);
	}
	.cky-revisit-bottom-left,
	.cky-revisit-bottom-right {
		bottom: 105px !important;
	}
	.cky-consent-container .cky-consent-bar {
		padding: 23px var(--border) 11px !important;
	}
	.cky-consent-bar .cky-banner-btn-close {
		right: calc(var(--border) - 24px) !important;
	}
}

/* 1199 MAX WIDTH */
@media (max-width:1199px) {
	.cky-consent-bar .cky-notice-group {
		display: block !important;
	}
}

/* 1200 MIN WIDTH */
@media (min-width:1200px) {
	.cky-notice-des > p {
		margin-right: calc(var(--border) / 2);
	}
	.cky-notice-btn-wrapper {
		margin-top: 0 !important;
	}
}

/* ==========================================================================
   HOVER: TEXT LINKS AND BUTTONS
   The ones with dark text (black, grey) turn to the accent dark color, their
   line too (drawn in currentColor); white ones on images, on the footer or on
   the transparent header keep their own hover.
   ========================================================================== */

.link:not(.inverted),
.owl-nav button,
.site-header a,
.site-header button {
	transition: color .2s, opacity .2s;
}

.link:not(.inverted):hover {
	color: var(--color-accent-dark);
	opacity: 1;
}

/* header: white on black or on the dark media, accent on hover */
.site-header :is(a, button):hover,
.site-header :is(a, button):focus-visible {
	color: var(--color-accent);
}