@charset "UTF-8";
/* Primitive */
:root {
  /* Mode 1 */
  /* color */
  --color-brand-100: rgb(255 214 236);
  --color-brand-200: rgb(255 194 226);
  --color-brand-300: rgb(255 143 202);
  --color-brand-400: rgb(255 92 178);
  --color-brand-400-0: rgb(255 92 178 / 0);
  --color-brand-400-10: rgb(255 92 178 / 0.1);
  --color-brand-400-20: rgb(255 92 178 / 0.2);
  --color-brand-400-30: rgb(255 92 178 / 0.3);
  --color-brand-400-70: rgb(255 92 178 / 0.7);
  --color-brand-400-80: rgb(255 92 178 / 0.8);
  --color-brand-400-90: rgb(255 92 178 / 0.9);
  --color-brand-500: rgb(255 0 134);
  --color-brand-500-0: rgb(255 0 134 / 0);
  --color-brand-500-10: rgb(255 0 134 / 0.1);
  --color-brand-500-20: rgb(255 0 134 / 0.2);
  --color-brand-500-30: rgb(255 0 134 / 0.3);
  --color-brand-500-70: rgb(255 0 134 / 0.7);
  --color-brand-500-80: rgb(255 0 134 / 0.8);
  --color-brand-500-90: rgb(255 0 134 / 0.9);
  --color-brand-600: rgb(214 0 113);
  --color-brand-600-10: rgb(214 0 113 / 0.1);
  --color-brand-600-20: rgb(214 0 113 / 0.2);
  --color-brand-600-30: rgb(214 0 113 / 0.3);
  --color-brand-600-70: rgb(214 0 113 / 0.7);
  --color-brand-600-80: rgb(214 0 113 / 0.8);
  --color-brand-600-90: rgb(214 0 113 / 0.9);
  --color-brand-700: rgb(173 0 91);
  --color-brand-800: rgb(92 0 48);
  --color-brand-dark-100: rgb(236 241 253);
  --color-brand-dark-1000: rgb(4 15 46);
  --color-brand-dark-1000-16: rgb(4 15 46 / 0.16);
  --color-brand-dark-1000-24: rgb(4 15 46 / 0.24);
  --color-brand-dark-1000-52: rgb(4 15 46 / 0.52);
  --color-brand-dark-1000-72: rgb(4 15 46 / 0.72);
  --color-brand-dark-1000-8: rgb(4 15 46 / 0.08);
  --color-brand-dark-1000-87: rgb(4 15 46 / 0.87);
  --color-brand-dark-200: rgb(199 212 250);
  --color-brand-dark-300: rgb(124 155 243);
  --color-brand-dark-400: rgb(86 126 240);
  --color-brand-dark-500: rgb(30 82 235);
  --color-brand-dark-600: rgb(18 66 206);
  --color-brand-dark-700: rgb(13 48 150);
  --color-brand-dark-800: rgb(10 36 112);
  --color-brand-dark-900: rgb(7 24 75);
  --color-dark-100: rgb(233 221 227);
  --color-dark-1000: rgb(0 0 0);
  --color-dark-1000-16: rgb(0 0 0 / 0.16);
  --color-dark-1000-24: rgb(0 0 0 / 0.24);
  --color-dark-1000-52: rgb(0 0 0 / 0.52);
  --color-dark-1000-72: rgb(0 0 0 / 0.72);
  --color-dark-1000-8: rgb(0 0 0 / 0.08);
  --color-dark-1000-87: rgb(0 0 0 / 0.87);
  --color-dark-200: rgb(213 202 207);
  --color-dark-300: rgb(192 182 188);
  --color-dark-400: rgb(172 163 168);
  --color-dark-500: rgb(142 134 138);
  --color-dark-600: rgb(133 133 133);
  --color-dark-700: rgb(91 86 89);
  --color-dark-800: rgb(71 67 69);
  --color-dark-900: rgb(51 48 49);
  --color-dark-950: rgb(20 20 20);
  --color-light-100: rgb(50 20 36);
  --color-light-1000: rgb(255 255 255);
  --color-light-1000-16: rgb(255 255 255 / 0.16);
  --color-light-1000-24: rgb(255 255 255 / 0.24);
  --color-light-1000-52: rgb(255 255 255 / 0.52);
  --color-light-1000-72: rgb(255 255 255 / 0.72);
  --color-light-1000-8: rgb(255 255 255 / 0.08);
  --color-light-1000-87: rgb(255 255 255 / 0.87);
  --color-light-200: rgb(68 41 55);
  --color-light-300: rgb(86 61 74);
  --color-light-400: rgb(103 82 93);
  --color-light-500: rgb(130 112 122);
  --color-light-600: rgb(148 133 141);
  --color-light-700: rgb(175 163 169);
  --color-light-800: rgb(210 204 207);
  --color-light-900: rgb(228 224 226);
  /* number */
  --corner-radius-null: 0px;
  --corner-radius-2xs: 4px; /* 0.25rem */
  --corner-radius-xs: 8px; /* 0.5rem */
  --corner-radius-sm: 12px; /* 0.75rem */
  --corner-radius-md: 16px; /* 1rem */
  --corner-radius-lg: 24px; /* 1.5rem */
  --corner-radius-xl: 32px; /* 2rem */
  --corner-radius-2xl: 64px; /* 4rem */
  --corner-radius-3xl: 80px; /* 5rem */
  --corner-radius-full: 400px; /* 25rem */
  --opacity-hidden: 0px; /* 0rem */
  --opacity-hight: 24px; /* 1.5rem */
  --opacity-medium-high: 40px; /* 2.5rem */
  --opacity-medium: 50px; /* 3.125rem */
  --opacity-low: 87px; /* 5.4375rem */
  --opacity-solid: 100px; /* 6.25rem */
  --spacing-null: 0px; /* 0rem */
  --spacing-px: 1px; /* 0.0625rem */
  --spacing-3xs: 2px; /* 0.125rem */
  --spacing-2xs: 4px; /* 0.25rem */
  --spacing-xs: 8px; /* 0.5rem */
  --spacing-sm: 12px; /* 0.75rem */
  --spacing-md: 16px; /* 1rem */
  --spacing-lg: 24px; /* 1.5rem */
  --spacing-xl: 32px; /* 2rem */
  --spacing-2xl: 48px; /* 3rem */
  --spacing-3xl: 64px; /* 4rem */
  --spacing-4xl: 72px; /* 4.5rem */
  --spacing-5xl: 96px; /* 6rem */
}

/* Semantic */
:root {
  /* Mode 1 */
  /* color */
  --color-brand-100: var(--color-brand-100);
  --color-brand-200: var(--color-brand-200);
  --color-brand-300: var(--color-brand-300);
  --color-brand-400: var(--color-brand-400);
  --color-brand-400-10: var(--color-brand-400-10);
  --color-brand-400-20: var(--color-brand-400-20);
  --color-brand-400-30: var(--color-brand-400-30);
  --color-brand-400-70: var(--color-brand-400-70);
  --color-brand-400-80: var(--color-brand-400-80);
  --color-brand-400-90: var(--color-brand-400-90);
  --color-brand-500-0: var(--color-brand-500-0);
  --color-brand-500-10: var(--color-brand-500-10);
  --color-brand-500-20: var(--color-brand-500-20);
  --color-brand-500-30: var(--color-brand-500-30);
  --color-brand-500-70: var(--color-brand-500-70);
  --color-brand-500-80: var(--color-brand-500-80);
  --color-brand-500-90: var(--color-brand-500-90);
  --color-brand-500-brand-color: var(--color-brand-500);
  --color-brand-600: var(--color-brand-600);
  --color-brand-600-10: var(--color-brand-600-10);
  --color-brand-600-20: var(--color-brand-600-20);
  --color-brand-600-30: var(--color-brand-600-30);
  --color-brand-700: var(--color-brand-700);
  --color-brand-800: var(--color-brand-800);
  --color-brand-dark-100: var(--color-brand-dark-100);
  --color-brand-dark-1000-16: var(--color-brand-dark-1000-16);
  --color-brand-dark-1000-24: var(--color-brand-dark-1000-24);
  --color-brand-dark-1000-52: var(--color-brand-dark-1000-52);
  --color-brand-dark-1000-72: var(--color-brand-dark-1000-72);
  --color-brand-dark-1000-8: var(--color-brand-dark-1000-8);
  --color-brand-dark-1000-87: var(--color-brand-dark-1000-87);
  --color-brand-dark-1000-brand-color: var(--color-brand-dark-1000);
  --color-brand-dark-200: var(--color-brand-dark-200);
  --color-brand-dark-300: var(--color-brand-dark-300);
  --color-brand-dark-400: var(--color-brand-dark-400);
  --color-brand-dark-500: var(--color-brand-dark-500);
  --color-brand-dark-600: var(--color-brand-dark-600);
  --color-brand-dark-700: var(--color-brand-dark-700);
  --color-brand-dark-800: var(--color-brand-dark-800);
  --color-brand-dark-900: var(--color-brand-dark-900);
  --color-neutral-on-dark-100: var(--color-light-100);
  --color-neutral-on-dark-1000: var(--color-light-1000);
  --color-neutral-on-dark-1000-16: var(--color-light-1000-16);
  --color-neutral-on-dark-1000-24: var(--color-light-1000-24);
  --color-neutral-on-dark-1000-52: var(--color-light-1000-52);
  --color-neutral-on-dark-1000-72: var(--color-light-1000-72);
  --color-neutral-on-dark-1000-8: var(--color-light-1000-8);
  --color-neutral-on-dark-1000-87: var(--color-light-1000-87);
  --color-neutral-on-dark-200: var(--color-light-200);
  --color-neutral-on-dark-300: var(--color-light-300);
  --color-neutral-on-dark-400: var(--color-light-400);
  --color-neutral-on-dark-500: var(--color-light-500);
  --color-neutral-on-dark-600: var(--color-light-600);
  --color-neutral-on-dark-700: var(--color-light-700);
  --color-neutral-on-dark-800: var(--color-light-800);
  --color-neutral-on-dark-900: var(--color-light-900);
  --color-neutral-on-light-100: var(--color-dark-100);
  --color-neutral-on-light-1000: var(--color-dark-1000);
  --color-neutral-on-light-1000-16: var(--color-dark-1000-16);
  --color-neutral-on-light-1000-24: var(--color-dark-1000-24);
  --color-neutral-on-light-1000-52: var(--color-dark-1000-52);
  --color-neutral-on-light-1000-72: var(--color-dark-1000-72);
  --color-neutral-on-light-1000-8: var(--color-dark-1000-8);
  --color-neutral-on-light-1000-87: var(--color-dark-1000-87);
  --color-neutral-on-light-200: var(--color-dark-200);
  --color-neutral-on-light-300: var(--color-dark-300);
  --color-neutral-on-light-400: var(--color-dark-400);
  --color-neutral-on-light-500: var(--color-dark-500);
  --color-neutral-on-light-600: var(--color-dark-600);
  --color-neutral-on-light-700: var(--color-dark-700);
  --color-neutral-on-light-800: var(--color-dark-800);
  --color-neutral-on-light-900: var(--color-dark-900);
  --color-neutral-on-light-950: var(--color-dark-950);
}

/* Theme */
:root {
  /* Mode 1 */
  /* color */
  --body-background-color-brand-dark: var(--color-brand-dark-1000-brand-color);
  --body-background-color-brand-primary: var(--color-brand-500-brand-color);
  --body-background-color-brand-primary-0: var(--color-brand-500-0);
  --body-background-color-neutral-dark: var(--color-neutral-on-light-1000);
  --body-background-color-neutral-light: var(--color-neutral-on-dark-1000);
  --body-border-color-brand-dark-100: var(--color-brand-dark-100);
  --body-border-color-brand-dark-1000: var(--color-brand-dark-1000-brand-color);
  --body-border-color-brand-dark-200: var(--color-brand-dark-200);
  --body-border-color-brand-dark-300: var(--color-brand-dark-300);
  --body-border-color-brand-dark-400: var(--color-brand-dark-600);
  --body-border-color-brand-dark-500: var(--color-brand-dark-500);
  --body-border-color-brand-dark-600: var(--color-brand-dark-600);
  --body-border-color-brand-dark-700: var(--color-brand-dark-700);
  --body-border-color-brand-dark-800: var(--color-brand-dark-800);
  --body-border-color-brand-dark-900: var(--color-brand-dark-900);
  --body-border-color-brand-primary-100: var(--color-brand-100);
  --body-border-color-brand-primary-200: var(--color-brand-200);
  --body-border-color-brand-primary-300: var(--color-brand-300);
  --body-border-color-brand-primary-400: var(--color-brand-400);
  --body-border-color-brand-primary-500: var(--color-brand-500-brand-color);
  --body-border-color-brand-primary-600: var(--color-brand-600);
  --body-border-color-brand-primary-700: var(--color-brand-700);
  --body-border-color-brand-primary-800: var(--color-brand-800);
  --body-fill-color-brand-dark: var(--color-brand-dark-1000-brand-color);
  --body-fill-color-brand-primary: var(--color-brand-500-brand-color);
  --body-fill-color-brand-primary-0: var(--color-brand-500-0);
  --body-fill-color-neutral-dark: var(--color-neutral-on-light-1000);
  --body-fill-color-neutral-dark-light: var(--color-neutral-on-light-950);
  --body-fill-color-neutral-light: var(--color-neutral-on-dark-1000);
  --body-icon-color-brand-dark: var(--color-brand-dark-1000-brand-color);
  --body-icon-color-brand-primary: var(--color-brand-500-brand-color);
  --body-icon-color-neutral-dark: var(--color-neutral-on-light-1000);
  --body-icon-color-neutral-light: var(--color-neutral-on-dark-1000);
  --body-text-color-brand-dark: var(--color-brand-dark-1000-brand-color);
  --body-text-color-brand-primary: var(--color-brand-500-brand-color);
  --body-text-color-neutral-dark: var(--color-neutral-on-light-1000);
  --body-text-color-neutral-light: var(--color-neutral-on-dark-1000);
  --button-primary-fill-color-disabled: var(--color-brand-500-70);
  --button-primary-fill-color-enabled: var(--color-brand-500-brand-color);
  --button-primary-fill-color-focused: var(--color-brand-500-90);
  --button-primary-fill-color-hovered: var(--color-brand-500-90);
  --button-primary-fill-color-pressed: var(--color-brand-500-90);
  --button-primary-icon-color-brand-dark: var(--color-brand-dark-1000-brand-color);
  --button-primary-icon-color-brand-primary: var(--color-brand-500-brand-color);
  --button-primary-icon-color-neutral-dark: var(--color-neutral-on-light-1000);
  --button-primary-icon-color-neutral-light: var(--color-neutral-on-dark-1000);
  --button-primary-text-color-disabled: var(--color-brand-dark-1000-brand-color);
  --button-primary-text-color-enabled: var(--color-brand-dark-1000-brand-color);
  --button-primary-text-color-focused: var(--color-brand-dark-1000-brand-color);
  --button-primary-text-color-hovered: var(--color-brand-dark-1000-brand-color);
  --button-primary-text-color-pressed: var(--color-brand-dark-1000-brand-color);
  --logo-brand-dark: var(--color-brand-dark-1000-brand-color);
  --logo-brand-dark-hover: var(--color-brand-dark-1000-72);
  --logo-brand-primary: var(--color-brand-500-brand-color);
  --logo-brand-primary-hover: var(--color-brand-500-70);
  --logo-neutral-dark: var(--color-neutral-on-light-1000);
  --logo-neutral-dark-hover: var(--color-neutral-on-light-1000-72);
  --logo-neutral-light: var(--color-neutral-on-dark-1000);
  --logo-neutral-light-hover: var(--color-neutral-on-dark-1000-72);
}

/* Media Queries Range */
/* Gradient */
/* Roman */
body,
html {
  font-family: Swiza, "Space Grotesk", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
ul, ol, li,
blockquote,
figure {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

* {
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

p {
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  margin-top: 0;
}

a {
  color: var(--color-neutral-on-dark-1000, #FFF);
}
a:hover, a:active:hover, a:focus:hover {
  color: var(--color-brand-500, #FF0086);
}
a:focus, a:active {
  color: var(--color-neutral-on-dark-1000, #FFF);
}

@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-thin-webfont.eot");
  src: url("../font/swiza-thin-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-thin-webfont.woff2") format("woff2"), url("../font/swiza-thin-webfont.woff") format("woff"), url("../font/swiza-thin-webfont.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-extralight-webfont.eot");
  src: url("../font/swiza-extralight-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-extralight-webfont.woff2") format("woff2"), url("../font/swiza-extralight-webfont.woff") format("woff"), url("../font/swiza-extralight-webfont.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-light-webfont.eot");
  src: url("../font/swiza-light-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-light-webfont.woff2") format("woff2"), url("../font/swiza-light-webfont.woff") format("woff"), url("../font/swiza-light-webfont.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-regular-webfont.eot");
  src: url("../font/swiza-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-regular-webfont.woff2") format("woff2"), url("../font/swiza-regular-webfont.woff") format("woff"), url("../font/swiza-regular-webfont.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-medium-webfont.eot");
  src: url("../font/swiza-medium-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-medium-webfont.woff2") format("woff2"), url("../font/swiza-medium-webfont.woff") format("woff"), url("../font/swiza-medium-webfont.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-semibold-webfont.eot");
  src: url("../font/swiza-semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-semibold-webfont.woff2") format("woff2"), url("../font/swiza-semibold-webfont.woff") format("woff"), url("../font/swiza-semibold-webfont.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-bold-webfont.eot");
  src: url("../font/swiza-bold-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-bold-webfont.woff2") format("woff2"), url("../font/swiza-bold-webfont.woff") format("woff"), url("../font/swiza-bold-webfont.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
/* Italic */
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on January 8, 2025 */
@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-thinitalic-webfont.eot");
  src: url("../font/swiza-thinitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-thinitalic-webfont.woff2") format("woff2"), url("../font/swiza-thinitalic-webfont.woff") format("woff"), url("../font/swiza-thinitalic-webfont.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-extralightitalic-webfont.eot");
  src: url("../font/swiza-extralightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-extralightitalic-webfont.woff2") format("woff2"), url("../font/swiza-extralightitalic-webfont.woff") format("woff"), url("../font/swiza-extralightitalic-webfont.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-lightitalic-webfont.eot");
  src: url("../font/swiza-lightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-lightitalic-webfont.woff2") format("woff2"), url("../font/swiza-lightitalic-webfont.woff") format("woff"), url("../font/swiza-lightitalic-webfont.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-regularitalic-webfont.eot");
  src: url("../font/swiza-regularitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-regularitalic-webfont.woff2") format("woff2"), url("../font/swiza-regularitalic-webfont.woff") format("woff"), url("../font/swiza-regularitalic-webfont.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-mediumitalic-webfont.eot");
  src: url("../font/swiza-mediumitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-mediumitalic-webfont.woff2") format("woff2"), url("../font/swiza-mediumitalic-webfont.woff") format("woff"), url("../font/swiza-mediumitalic-webfont.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Swiza";
  src: url("../font/swiza-bolditalic-webfont.eot");
  src: url("../font/swiza-bolditalic-webfont.eot?#iefix") format("embedded-opentype"), url("../font/swiza-bolditalic-webfont.woff2") format("woff2"), url("../font/swiza-bolditalic-webfont.woff") format("woff"), url("../font/swiza-bolditalic-webfont.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
.body-XXL-regular {
  color: var(--body-text-color-neutral-light, #FFF);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  font-family: Swiza;
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  line-height: 36px;
}
@media (min-width: 768px) {
  .body-XXL-regular {
    font-size: 44px;
    line-height: 52px;
  }
}
@media (min-width: 1024px) {
  .body-XXL-regular {
    font-size: 44px;
    line-height: 52px;
  }
}
@media (min-width: 1280px) {
  .body-XXL-regular {
    font-size: 52px;
    line-height: 64px;
  }
}
@media (min-width: 1440px) {
  .body-XXL-regular {
    font-size: 52px;
    line-height: 64px;
  }
}
@media (min-width: 1600px) {
  .body-XXL-regular {
    font-size: 52px;
    line-height: 64px;
  }
}
@media (min-width: 1920px) {
  .body-XXL-regular {
    font-size: 64px;
    line-height: 72px;
  }
}
.body-XL-regular {
  color: var(--body-text-color-neutral-light, #FFF);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  font-family: Swiza;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
}
@media (min-width: 768px) {
  .body-XL-regular {
    font-size: 32px;
    line-height: 38px;
  }
}
@media (min-width: 1024px) {
  .body-XL-regular {
    font-size: 32px;
    line-height: 38px;
  }
}
@media (min-width: 1280px) {
  .body-XL-regular {
    font-size: 44px;
    line-height: 52px;
  }
}
@media (min-width: 1440px) {
  .body-XL-regular {
    font-size: 44px;
    line-height: 52px;
  }
}
@media (min-width: 1600px) {
  .body-XL-regular {
    font-size: 44px;
    line-height: 52px;
  }
}
@media (min-width: 1920px) {
  .body-XL-regular {
    font-size: 52px;
    line-height: 64px;
  }
}
.body-L-regular {
  color: var(--body-text-color-neutral-light, #FFF);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  font-family: Swiza;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}
@media (min-width: 768px) {
  .body-L-regular {
    font-size: 28px;
    line-height: 36px;
  }
}
@media (min-width: 1280px) {
  .body-L-regular {
    font-size: 36px;
    line-height: 44px;
  }
}
@media (min-width: 1920px) {
  .body-L-regular {
    font-size: 40px;
    line-height: 52px;
  }
}
.body-M-regular {
  color: var(--body-text-color-neutral-light, #FFF);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  font-family: Swiza;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
@media (min-width: 768px) {
  .body-M-regular {
    font-size: 24px;
    line-height: 32px;
  }
}
@media (min-width: 1280px) {
  .body-M-regular {
    font-size: 32px;
    line-height: 40px;
  }
}
@media (min-width: 1920px) {
  .body-M-regular {
    font-size: 36px;
    line-height: 44px;
  }
}
.body-S-regular {
  color: var(--body-text-color-neutral-light, #FFF);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  font-family: Swiza;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
@media (min-width: 768px) {
  .body-S-regular {
    font-size: 20px;
    line-height: 28px;
  }
}
@media (min-width: 1280px) {
  .body-S-regular {
    font-size: 24px;
    line-height: 32px;
  }
}
@media (min-width: 1920px) {
  .body-S-regular {
    font-size: 28px;
    line-height: 36px;
  }
}
.body-XS-regular {
  color: var(--body-text-color-neutral-light, #FFF);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  font-family: Swiza;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
}
@media (min-width: 768px) {
  .body-XS-regular {
    font-size: 16px;
    line-height: 22px;
  }
}
@media (min-width: 1280px) {
  .body-XS-regular {
    font-size: 18px;
    line-height: 24px;
  }
}
@media (min-width: 1920px) {
  .body-XS-regular {
    font-size: 24px;
    line-height: 32px;
  }
}

.title-XS-semibold {
  color: var(--body-text-color-neutral-light);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
}
@media (min-width: 768px) {
  .title-XS-semibold {
    font-size: 20px;
    line-height: 28px;
  }
}
@media (min-width: 1024px) {
  .title-XS-semibold {
    font-size: 22px;
  }
}
@media (min-width: 1280px) {
  .title-XS-semibold {
    font-size: 24px;
    line-height: 32px;
  }
}
@media (min-width: 1440px) {
  .title-XS-semibold {
    font-size: 26px;
  }
}
@media (min-width: 1600px) {
  .title-XS-semibold {
    font-size: 28px;
    line-height: 34px;
  }
}
@media (min-width: 1920px) {
  .title-XS-semibold {
    font-size: 32px;
    line-height: 36px;
  }
}
.title-S-semibold {
  color: var(--body-text-color-neutral-light);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
}
@media (min-width: 768px) {
  .title-S-semibold {
    font-size: 36px;
    line-height: 44px;
  }
}
@media (min-width: 1024px) {
  .title-S-semibold {
    font-size: 40px;
    line-height: 48px;
  }
}
@media (min-width: 1280px) {
  .title-S-semibold {
    font-size: 44px;
    line-height: 48px;
  }
}
@media (min-width: 1440px) {
  .title-S-semibold {
    font-size: 48px;
    line-height: 52px;
  }
}
@media (min-width: 1920px) {
  .title-S-semibold {
    font-size: 52px;
    line-height: 64px;
  }
}
.title-L-semibold {
  font-weight: 600;
  font-size: 48px;
  line-height: 52px;
  text-shadow: 0px 0px 44px rgba(0, 0, 0, 0.32);
  color: var(--body-text-color-neutral-light, #FFF);
}
@media (min-width: 768px) {
  .title-L-semibold {
    font-size: 72px;
    line-height: 88px;
  }
}
@media (min-width: 1024px) {
  .title-L-semibold {
    font-size: 80px;
    line-height: 96px;
  }
}
@media (min-width: 1280px) {
  .title-L-semibold {
    font-size: 96px;
    line-height: 116px;
  }
}
@media (min-width: 1440px) {
  .title-L-semibold {
    font-size: 96px;
    line-height: 116px;
  }
}
@media (min-width: 1600px) {
  .title-L-semibold {
    font-size: 96px;
    line-height: 116px;
  }
}
@media (min-width: 1920px) {
  .title-L-semibold {
    font-size: 116px;
    line-height: 132px;
  }
}
.title-XL-enphasis-bold, .title-XL-regular {
  font-style: italic;
  font-weight: 700;
  font-size: 76px;
  line-height: 84px;
  text-shadow: 0px 0px 44px rgba(0, 0, 0, 0.32);
  color: var(--body-text-color-neutral-light, #FFF);
}
@media (min-width: 768px) {
  .title-XL-enphasis-bold, .title-XL-regular {
    font-size: 104px;
    line-height: 104px;
  }
}
@media (min-width: 1024px) {
  .title-XL-enphasis-bold, .title-XL-regular {
    font-size: 124px;
    line-height: 124px;
  }
}
@media (min-width: 1280px) {
  .title-XL-enphasis-bold, .title-XL-regular {
    font-size: 148px;
    line-height: 148px;
  }
}
@media (min-width: 1440px) {
  .title-XL-enphasis-bold, .title-XL-regular {
    font-size: 148px;
    line-height: 148px;
  }
}
@media (min-width: 1600px) {
  .title-XL-enphasis-bold, .title-XL-regular {
    font-size: 148px;
    line-height: 148px;
  }
}
@media (min-width: 1920px) {
  .title-XL-enphasis-bold, .title-XL-regular {
    font-size: 180px;
    line-height: 180px;
  }
}
.title-XL-regular {
  font-style: normal;
  font-weight: 400;
}

.label-section-regular {
  color: var(--body-text-color-brand-primary);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  font-family: Swiza;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .label-section-regular {
    font-size: 18px;
    line-height: 24px;
  }
}

body,
html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-display: swap;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  background: var(--body-background-color-neutral-dark);
}

html {
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-font-smoothing: antialiased;
}

body {
  overflow-x: hidden;
}
body * {
  box-sizing: border-box;
  outline: 0px;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

a {
  cursor: pointer;
}

.video-bg-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -o-object-fit: cover;
  object-fit: cover;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.42%, #000 100%), rgba(0, 0, 0, 0);
}

.img-bg-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -o-object-fit: cover;
  object-fit: cover;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.42%, #000 100%), rgba(0, 0, 0, 0);
}

.only-seo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Var */
/* Transition */
/* Move */
.move-up {
  opacity: 0;
  transition: 0.6s ease-in-out;
  transition-property: opacity, transform;
  transform: translateY(20%);
}
.move-up.visible {
  opacity: 1;
  transition: 0.6s ease-in-out;
  transition-property: opacity, transform;
  transform: translateY(0%);
}

.move-down {
  opacity: 0;
  transition: 0.6s ease-in-out;
  transition-property: opacity, transform;
  transform: translateY(-20%);
}
.move-down.visible {
  opacity: 1;
  transition: 0.6s ease-in-out;
  transition-property: opacity, transform;
  transform: translateY(0%);
}

.move-left {
  opacity: 0;
  transition: all 0.6s ease-in-out;
  transform: translateX(20%);
}
.move-left.visible {
  opacity: 1;
  transition: all 0.6s ease-in-out;
  transform: translateX(0%);
}

.move-right {
  opacity: 0;
  transition: all 0.6s ease-in-out;
  transform: translateX(-20%);
}
.move-right.visible {
  opacity: 1;
  transition: all 0.6s ease-in-out;
  transform: translateX(0%);
}

/* Hide on scroll */
.el-hide-on-scroll {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.el-hide-on-scroll.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* Fade */
.fade-in {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.fade-in.visible {
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
}

/* Delay */
.del-1.visible {
  transition-delay: 0.2s !important;
}

.del-2.visible {
  transition-delay: 0.4s !important;
}

.del-3.visible {
  transition-delay: 0.6s !important;
}

.del-4.visible {
  transition-delay: 0.8s !important;
}

.del-5.visible {
  transition-delay: 1s !important;
}

.del-6.visible {
  transition-delay: 1.2s !important;
}

.del-7.visible {
  transition-delay: 1.4s !important;
}

.del-8.visible {
  transition-delay: 1.6s !important;
}

/* Page transition */
.transition-alt {
  transition: 0.8s;
  position: fixed;
  width: 100vw;
  height: 0;
  bottom: 0;
  left: 0;
  right: auto;
  z-index: 200;
}

html.is-animating .transition-alt {
  height: 100vh;
}

html.is-rendering .transition-alt {
  top: 0;
  bottom: auto;
}

/*
 *  Owl Carousel - Core
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}
.owl-carousel .owl-stage {
  position: relative;
  touch-action: manipulation;
  -moz-backface-visibility: hidden; /* fix firefox animation glitch */
}
.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.owl-carousel .owl-item img {
  display: block;
  width: 100%;
}
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
  display: none;
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
  background: none;
  color: inherit;
  border: none;
  padding: 0 !important;
  font: inherit;
}
.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}
.owl-carousel.owl-refresh .owl-item {
  visibility: hidden;
}
.owl-carousel.owl-drag .owl-item {
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.owl-carousel.owl-grab {
  cursor: move;
  cursor: grab;
}
.owl-carousel.owl-rtl {
  direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
  float: right;
}

/* No Js */
.no-js .owl-carousel {
  display: block;
}

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both;
}
.owl-carousel .owl-animated-in {
  z-index: 0;
}
.owl-carousel .owl-animated-out {
  z-index: 1;
}
.owl-carousel .fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out;
}

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-item {
  /**
  	This is introduced due to a bug in IE11 where lazy loading combined with autoheight plugin causes a wrong
  	calculation of the height of the owl-item that breaks page layouts
   */
}
.owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
  max-height: 0;
}
.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d;
}

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000;
}
.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease;
}
.owl-carousel .owl-video-play-icon:hover {
  transform: scale(1.3, 1.3);
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none;
}
.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease;
}
.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%;
}

/*
 * 	Default theme - Owl Carousel CSS File
 */
.owl-theme .owl-nav {
  margin-top: 10px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.owl-theme .owl-nav [class*=owl-] {
  color: #FFF;
  font-size: 14px;
  margin: 5px;
  padding: 4px 7px;
  background: #D6D6D6;
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
}
.owl-theme .owl-nav [class*=owl-]:hover {
  background: #869791;
  color: #FFF;
  text-decoration: none;
}
.owl-theme .owl-nav .disabled {
  opacity: 0.5;
  cursor: default;
}
.owl-theme .owl-nav.disabled + .owl-dots {
  margin-top: 10px;
}
.owl-theme .owl-dots {
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.owl-theme .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  background: #D6D6D6;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity 200ms ease;
  border-radius: 30px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #869791;
}

.spacing-xl {
  width: 100%;
  height: 160px;
}
@media (min-width: 768px) {
  .spacing-xl {
    height: 320px;
  }
}
@media (min-width: 1280px) {
  .spacing-xl {
    height: 360px;
  }
}
@media (min-width: 1440px) {
  .spacing-xl {
    height: 480px;
  }
}
@media (min-width: 1920px) {
  .spacing-xl {
    height: 520px;
  }
}
.spacing-l {
  width: 100%;
  height: 120px;
}
@media (min-width: 768px) {
  .spacing-l {
    height: 320px;
  }
}
.spacing-m {
  width: 100%;
  height: 96px;
}
@media (min-width: 768px) {
  .spacing-m {
    height: 280px;
  }
}
.spacing-sm {
  width: 100%;
  height: 72px;
}
@media (min-width: 768px) {
  .spacing-sm {
    height: 180px;
  }
}
.spacing-s {
  width: 100%;
  height: 64px;
}
@media (min-width: 768px) {
  .spacing-s {
    height: 120px;
  }
}
.spacing-xs {
  width: 100%;
  height: 40px;
}
@media (min-width: 768px) {
  .spacing-xs {
    height: 96px;
  }
}
.list-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  color: var(--body-text-color-neutral-light, #FFF);
  border-top: 0.75px solid #FFF;
}
.list-item {
  display: flex;
  height: 48px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  justify-content: space-between;
  border-bottom: 0.75px solid #FFF;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .list-item {
    font-size: 20px;
  }
}
@media (min-width: 1024px) {
  .list-item {
    height: 64px;
    font-size: 22px;
  }
}
@media (min-width: 1280px) {
  .list-item {
    font-size: 24px;
    line-height: 32px; /* 133.333% */
  }
}
@media (min-width: 1440px) {
  .list-item {
    height: 72px;
    font-size: 26px;
  }
}
@media (min-width: 1600px) {
  .list-item {
    font-size: 28px;
    line-height: 34px;
  }
}
@media (min-width: 1920px) {
  .list-item {
    height: 88px;
    font-size: 32px;
    line-height: 36px;
  }
}

/* ==========================================================
   ROUTES LIST
========================================================== */
.routes-list.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  padding: 0 20px;
}
@media (min-width: 1024px) {
  .routes-list.container {
    gap: 48px;
    padding: 0 64px;
  }
}
@media (min-width: 1920px) {
  .routes-list.container {
    padding: 0 96px;
  }
}
.routes-list.container {
  /* ========================================================
     ROUTE CARD BASE
  ======================================================== */
}
.routes-list.container .route-card {
  display: block;
  grid-column: span 6;
  aspect-ratio: 3/4;
  transition: opacity 0.3s ease, transform 0.3s ease;
  will-change: transform, opacity;
}
@media (min-width: 768px) {
  .routes-list.container .route-card {
    grid-column: span 3;
  }
}
@media (min-width: 1024px) {
  .routes-list.container .route-card {
    aspect-ratio: 4/3;
  }
}

/* ── Stagger editoriale (1024px+) ─────────────────────── */
@media (min-width: 1024px) {
  .routes-list.container {
    align-items: start;
  }

  /* Riga da 2 (layout-large): la 2ª card scende */
  .routes-list.container .route-card.layout-large.layout-pos-2 {
    margin-top: 64px;
  }

  /* Riga da 3 (layout-small): cascata progressiva */
  .routes-list.container .route-card.layout-small.layout-pos-1 {
    margin-top: 24px;
  }
  .routes-list.container .route-card.layout-small.layout-pos-2 {
    margin-top: 72px;
  }
  .routes-list.container .route-card.layout-small.layout-pos-3 {
    margin-top: 0;
  }
}
/* ── layout-large: riga da 2 ── */
.routes-list.container .route-card.layout-large {
  grid-column: span 6;
}
@media (min-width: 768px) {
  .routes-list.container .route-card.layout-large {
    grid-column: span 3;
  }
}

/* ── layout-small: riga da 3 ── */
.routes-list.container .route-card.layout-small {
  grid-column: span 6;
}
@media (min-width: 768px) {
  .routes-list.container .route-card.layout-small {
    grid-column: span 3;
  }
}
@media (min-width: 1024px) {
  .routes-list.container .route-card.layout-small {
    grid-column: span 2;
    aspect-ratio: 3/4;
  }
}

/* ── layout-full: riga da 1 (panoramica) ── */
.routes-list.container .route-card.layout-full {
  grid-column: span 6;
  aspect-ratio: 16/8;
}
@media (min-width: 1024px) {
  /* Verso destra: lascia respiro a sinistra */
  .routes-list.container .route-card.layout-full.layout-full--right {
    grid-column: 2 / span 5;
    aspect-ratio: 16/7;
  }
  /* Verso sinistra: lascia respiro a destra */
  .routes-list.container .route-card.layout-full.layout-full--left {
    grid-column: 1 / span 5;
    aspect-ratio: 16/7;
  }
}

/* ==========================================================
   ROUTES FILTERS WRAPPER
========================================================== */
.routes-filters {
  display: flex;
  justify-content: center;
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .routes-filters {
    padding-inline: 64px;
  }
}

.routes-filters-inner {
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
}
@media (min-width: 768px) {
  .routes-filters-inner {
    gap: 12px;
    width: auto;
  }
}

/* ==========================================================
   FILTER SELECT BASE
========================================================== */
.routes-filter {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Colori brand: sfondo nero, testo bianco */
  background-color: #000;
  color: #fff;

  /* Tipografia brand */
  font-family: Swiza, "Space Grotesk", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  /* Layout */
  padding: 10px 36px 10px 16px;
  border-radius: var(--corner-radius-full);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;

  /* Freccia custom brand pink */
  background-image:
    linear-gradient(45deg,  transparent 50%, #FF0086 50%),
    linear-gradient(135deg, #FF0086 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 10px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* Mobile: full-width per ogni filtro */
@media (max-width: 767px) {
  .routes-filter {
    width: 100%;
    flex: 1 1 calc(50% - 5px);
    font-size: 0.65rem;
    padding: 10px 32px 10px 14px;
  }
}

/* ==========================================================
   FILTER STATES
========================================================== */
.routes-filter:hover {
  border-color: #FF0086;
}

.routes-filter:focus {
  outline: none;
  border-color: #FF0086;
}

/* Filtro attivo (valore selezionato ≠ ""): bordo brand pieno */
.routes-filter.is-active {
  border-color: #FF0086;
  background-color: #FF0086;
  color: #fff;
  background-image:
    linear-gradient(45deg,  transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
}

/* ==========================================================
   SELECT OPTIONS
========================================================== */
.routes-filter option {
  background-color: #000;
  color: #fff;
  font-family: Swiza, "Space Grotesk", sans-serif;
}

.routes-filter option[value=""] {
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================
   CUSTOM DROPDOWN — routes-filter-custom
========================================================== */

.routes-filter-custom {
  position: relative;
  display: inline-flex;
}

/* Trigger (pill) */
.routes-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #000;
  color: rgba(255, 255, 255, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  padding: 10px 16px;
  font-family: Swiza, "Space Grotesk", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  user-select: none;
}
.routes-filter-trigger:hover,
.routes-filter-custom.is-open .routes-filter-trigger {
  border-color: #FF0086;
  color: #fff;
}

/* Attivo (valore selezionato) */
.routes-filter-custom.is-active .routes-filter-trigger {
  background: #FF0086;
  border-color: #FF0086;
  color: #fff;
}

/* Freccia */
.routes-filter-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.routes-filter-custom.is-open .routes-filter-arrow {
  transform: rotate(180deg);
}
.routes-filter-custom.is-active .routes-filter-trigger .routes-filter-arrow {
  stroke: #fff;
}

/* Dropdown list */
.routes-filter-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  list-style: none;
  margin: 0;
  padding: 6px;
  z-index: 500;
  /* Animazione apertura */
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  transform-origin: top center;
}
.routes-filter-custom.is-open .routes-filter-dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Opzioni */
.routes-filter-option {
  padding: 9px 14px;
  border-radius: 8px;
  font-family: Swiza, "Space Grotesk", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.routes-filter-option.is-placeholder {
  color: rgba(255, 255, 255, 0.3);
  font-style: italic;
}
.routes-filter-option:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.routes-filter-option.is-selected {
  color: #FF0086;
}
.routes-filter-option.is-selected::before {
  content: "✓ ";
}

/* Mobile: dropdown a larghezza piena */
@media (max-width: 767px) {
  .routes-filter-custom {
    width: 100%;
  }
  .routes-filter-trigger {
    width: 100%;
    justify-content: space-between;
  }
  .routes-filter-dropdown {
    width: 100%;
  }
}

/* ==========================================================
   FILTER ANIMATION STATE
========================================================== */
.route-card.is-hidden {
  display: none;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.route-card.layout-large {
  grid-column: span 6;
}

.route-card.layout-small {
  grid-column: span 4;
}

.button-container-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-subtle {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.4s ease;
  padding-right: 4px;
}
@media (min-width: 768px) {
  .button-subtle {
    font-size: 16px;
    line-height: 16px;
  }
}
.button-subtle:hover {
  gap: 12px;
  padding-right: 0px;
}
.button-primary {
  text-decoration: none;
  display: inline-flex;
  padding: 4px 4px 4px 24px;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border-radius: 100px;
  background: var(--button-subtle-primary-icon-color-neutral-light, #FFF);
  box-shadow: 0 4px 16px 0 rgba(255, 0, 134, 0.24);
  border: 0px;
  cursor: pointer;
  color: var(--body-text-color-brand-primary);
  font-family: Swiza;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 184.615% */
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out; /* Aggiungi questa linea per transizione fluida del gap */
}
.button-primary:hover {
  gap: 22px;
  background: var(--button-primary-icon-color-neutral-light, #FFF);
  box-shadow: 0 4px 24px 0 rgba(255, 0, 134, 0.87);
}
.button-primary:hover .button-primary-circle {
  background: var(--button-primary-icon-color-brand-primary, #FF0086);
}
.button-primary:hover .button-primary-circle svg {
  fill: var(--button-primary-icon-color-brand-dark);
  transform: rotate(-410deg);
}
.button-primary-circle {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  background: var(--button-primary-icon-color-brand-dark, #040F2E);
}
.button-primary-circle svg {
  width: 24px;
  height: 24px;
  fill: var(--button-primary-icon-color-brand-primary);
  transition: all 0.6s ease-in-out; /* Aggiungi questa linea per transizione fluida del gap */
}

.dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  max-width: none;
  max-height: none;
  background: rgba(4, 15, 46, 0.72);
  z-index: 100001;
  /* 🔴 NON renderlo visibile di default */
  display: none;
}
.dialog[open] {
  display: flex;
  justify-content: flex-end;
}
.dialog-s {
  max-width: 768px;
}
.dialog-card {
  border-radius: 12px;
  background: var(--body-background-color-neutral-light, #FFF);
  display: flex;
  padding: 32px 24px 48px;
  flex-direction: column;
  gap: 48px;
  flex: 1 0 0;
  color: var(--body-text-color-brand-dark, #040F2E);
}
.dialog-title {
  color: var(--body-text-color-brand-primary, #FF0086);
}

.dialog[open] .dialog-card {
  animation: dialog-slide-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes dialog-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0.8;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.close-btn {
  display: flex;
  padding: 15px;
  justify-content: center;
  align-self: end;
  position: fixed;
  align-items: center;
  border-radius: 100px;
  background: var(--button-primary-icon-color-brand-dark, #040F2E);
  cursor: pointer;
}
.close-btn svg {
  fill: var(--body-icon-color-brand-primary, #FF0086);
}

/* ======================================================
   HEADER
====================================================== */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  padding-left: 12px;
  pointer-events: none;
  isolation: isolate;
}
@media (min-width: 768px) {
  .header {
    padding-left: 32px;
  }
}
.header-container {
  height: 96px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: auto;
}
.header .logo {
  display: flex;
  align-items: center;
}
.header .logo svg {
  height: 36px;
  fill: var(--color-neutral-on-dark-1000);
  transition: fill 0.4s ease;
}
@media (min-width: 768px) {
  .header .logo svg {
    height: 52px;
  }
}

body.menu-open .header .logo svg {
  fill: var(--body-text-color-brand-dark);
}

/* ======================================================
   BURGER
====================================================== */
.burger {
  position: relative;
  width: 96px;
  height: 96px;
  background: var(--body-background-color-brand-primary-0);
  border: none;
  cursor: pointer;
  transition: background 0.4s ease;
}

.burger__bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 27px;
  height: 1px;
  background: var(--body-icon-color-neutral-light, #FFF);
  transform-origin: center;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), background 0.3s ease;
}

.burger__bar--top {
  transform: translate(-50%, calc(-50% - 6px));
}

.burger__bar--bottom {
  transform: translate(-50%, calc(-50% + 6px));
}

.burger:hover {
  background: var(--body-background-color-brand-primary);
}

.burger:hover .burger__bar {
  background: var(--body-text-color-brand-dark);
}

/* OPEN STATE */
body.menu-open .burger {
  background: var(--body-background-color-brand-primary);
}

body.menu-open .burger__bar {
  background: var(--body-background-color-brand-dark);
}

body.menu-open .burger__bar--top {
  transform: translate(-50%, -50%) rotate(45deg);
}

body.menu-open .burger__bar--bottom {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ======================================================
   HEADER DESKTOP NAV
====================================================== */
.header-nav {
  display: none;
}

@media (min-width: 1024px) {
  .header-nav {
    display: flex;
    align-items: center;
    pointer-events: auto;
  }

  .burger {
    display: none;
  }
}

.header-nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0 24px 0 0;
  padding: 0;
  gap: 0;
}

.header-nav__list .menu-item a {
  display: block;
  padding: 8px 18px;
  font-family: Swiza, "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  transition: color 0.3s ease;
  white-space: nowrap;
}

.header-nav__list .menu-item a:hover {
  color: rgba(255, 255, 255, 1);
}

.header-nav__list .current-menu-item > a,
.header-nav__list .current-page-ancestor > a {
  color: rgba(255, 255, 255, 1);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* ======================================================
   OVERLAY MENU (LEFT → RIGHT)
====================================================== */
nav.overlay {
  position: fixed;
  inset: 0;
  background: var(--body-background-color-brand-primary);
  transform: translateX(100%);
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1000;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.menu-open nav.overlay {
  transform: translateX(0);
}

/* ======================================================
   MENU CONTAINER
====================================================== */
.overlay .menu {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px 48px;
  width: 100%;
  min-height: min-content;
}
@media (min-width: 768px) {
  .overlay .menu {
    padding: 20px 64px;
    gap: 64px;
  }
}
@media (min-width: 1920px) {
  .overlay .menu {
    padding: 20px 96px;
  }
}
.overlay .menu .footer-title,
.overlay .menu .footer-address {
  color: var(--body-text-color-brand-dark);
}
.overlay .menu .header-divider {
  width: 100%;
  height: 1px;
  background: var(--body-background-color-brand-dark);
}
@media (min-width: 1024px) {
  .overlay .menu .footer-left .contact-container .social-badge {
    background: var(--body-background-color-brand-dark);
  }
}

/* ======================================================
   MENU ITEMS
====================================================== */
ul.menu-list {
  display: flex;
  gap: 16px;
  flex-direction: column;
}

.overlay .menu-item {
  overflow: hidden;
  position: relative;
}
.menu-item span {
  display: flex;
  margin-right: 8px;
  display: none;
}

/* Stili tipografici delle voci overlay — animazione gestita da GSAP in header.js */
.overlay .menu-item > a {
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  color: var(--body-text-color-brand-dark);
  font-weight: 500;
  line-height: 1;
  font-size: 28px;
}
.overlay .menu-item > a:hover::after {
  width: 100%;
  transition: width 0.3s ease-in-out;
}
.overlay .menu-item > a::after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 0;
  height: 6px;
  background: currentColor;
  transition: width 0.3s ease-in-out;
}
.overlay .menu-item > a:hover,
.overlay .menu-item > a:focus,
.overlay .menu-item > a:active {
  color: var(--body-text-color-brand-dark);
}
@media (min-width: 480px) {
  .overlay .menu-item > a {
    font-size: 44px;
  }
}
@media (min-width: 768px) {
  .overlay .menu-item > a {
    font-size: 64px;
  }
}
@media (min-width: 1440px) {
  .overlay .menu-item > a {
    font-size: 80px;
  }
}
@media (min-width: 1920px) {
  .overlay .menu-item > a {
    font-size: 96px;
  }
}

/* ======================================================
   ACTIVE STATE WORDPRESS — overlay
====================================================== */
.overlay .menu-item.current-menu-item > a {
  font-style: italic;
}
.overlay .menu-item.current-menu-item > a span {
  display: flex;
}

/* ======================================================
   SECONDARY ITEMS
====================================================== */
.menu-item-secondary {
  font-size: 20px;
  font-weight: 400;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
@media (min-width: 768px) {
  .menu-item-secondary {
    font-size: 32px;
  }
}
.menu-item-secondary:hover {
  opacity: 1;
}

/* ======================================================
   SCROLL LOCK
====================================================== */
body.menu-open {
  overflow: hidden;
}

.global-contact {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 999;
  opacity: 0;
  transform: translateY(150%);
  transition: all 0.4s ease;
}
.global-contact.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.global-contact {
  /* DESKTOP */
}
.global-contact__desktop {
  display: block;
  position: relative;
}

/* Bottone minimize — discreto, dentro la card */
.contact-card__toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  color: rgba(0, 0, 0, 0.3);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: color 0.2s ease;
}
.contact-card__toggle:hover {
  color: rgba(0, 0, 0, 0.7);
}

/* Icone: default mostra minimize, nascondi expand */
.contact-card__toggle .icon-expand { display: none; }
.contact-card__toggle .icon-minimize { display: block; }

/* Stato collassato */
.global-contact__desktop.is-collapsed .contact-card {
  display: none;
}
.global-contact__desktop.is-collapsed .contact-card__toggle {
  position: static;
  width: auto;
  height: auto;
  border-radius: 40px;
  padding: 10px 20px;
  background: var(--body-background-color-brand-primary);
  color: #fff;
  font-size: 12px;
  font-family: Swiza, "Space Grotesk", sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.global-contact__desktop.is-collapsed .contact-card__toggle::before {
  content: 'Contact';
}
/* Nessuna icona nel collassato */
.global-contact__desktop.is-collapsed .contact-card__toggle .icon-minimize,
.global-contact__desktop.is-collapsed .contact-card__toggle .icon-expand {
  display: none;
}
.global-contact .contact-card {
  background: #fff;
  padding: 24px;
  width: 280px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.global-contact .contact-card__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.6;
  margin-bottom: 8px;
}
.global-contact .contact-card__title {
  font-size: 18px;
  margin-bottom: 8px;
}
.global-contact .contact-card__address {
  font-style: normal;
  font-size: 12px;
  opacity: 0.5;
  margin-bottom: 16px;
}
.global-contact .contact-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.global-contact {
  /* MOBILE BAR */
}
.global-contact__mobile {
  display: none;
}

/* BUTTONS */
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
}
.btn--primary {
  background: #111;
  color: #fff;
}
.btn--ghost {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #111;
}

/* MOBILE */
@media (max-width: 768px) {
  .global-contact {
    right: 0;
    bottom: 0;
    width: 100%;
  }
  .global-contact__desktop {
    display: none;
  }
  .global-contact__mobile {
    display: flex;
    background: #ff0086;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 4px;
    border-radius: 12px 12px 0 0;
  }
  .global-contact__mobile .mobile-cta {
    flex: 1;
    text-align: center;
    padding: 16px;
    font-size: 14px;
    text-decoration: none;
    color: #111;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .global-contact__mobile .mobile-cta--primary {
    background: #111;
    color: #fff;
  }
}
/* ======================================================
   COOKIE BANNER — override stile per allineamento al brand
====================================================== */

/* Tipografia e font condivisi */
.cky-btn {
  font-family: Swiza, "Space Grotesk", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  border-radius: 8px !important;
}

/* Accept All — primario brand */
.cky-btn.cky-btn-accept {
  background-color: #FF0086 !important;
  border-color: #FF0086 !important;
  color: #ffffff !important;
  transition: opacity 0.2s ease !important;
}
.cky-btn.cky-btn-accept:hover {
  opacity: 0.85 !important;
}

/* Customise + Reject All — outline nero neutro */
/* Nota: il plugin usa .cky-btn-customize (non .cky-btn-preferences) */
.cky-btn.cky-btn-reject,
.cky-btn.cky-btn-preferences,
.cky-btn.cky-btn-customize,
[data-cky-tag="reject-button"],
[data-cky-tag="settings-button"] {
  background-color: transparent !important;
  border-color: #000000 !important;
  color: #000000 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.cky-btn.cky-btn-reject:hover,
.cky-btn.cky-btn-preferences:hover,
.cky-btn.cky-btn-customize:hover,
[data-cky-tag="reject-button"]:hover,
[data-cky-tag="settings-button"]:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Banner — bordi e tipografia */
.cky-consent-container {
  border-radius: 16px !important;
  font-family: Swiza, "Space Grotesk", sans-serif !important;
}
.cky-preference-center {
  border-radius: 16px !important;
  font-family: Swiza, "Space Grotesk", sans-serif !important;
}

/* "Always Active" label */
.cky-always-active {
  color: #FF0086 !important;
}

/* Toggle attivo */
.cky-switch input:checked + .cky-slider {
  background-color: #FF0086 !important;
}

/* Link "Show more" */
.cky-show-desc-btn {
  color: #FF0086 !important;
}

/* Bottone revisit (cerchio) — magenta */
.cky-btn-revisit-wrapper,
.cky-btn-revisit-wrapper .cky-btn-revisit {
  background-color: #FF0086 !important;
  border-color: #FF0086 !important;
}

/* ── Mobile & Tablet ──────────────────────────────── */
@media (max-width: 767px) {
  /* Banner: padding ridotto, larghezza piena */
  .cky-consent-container .cky-consent-bar {
    padding: 16px !important;
  }

  /* Testo descrittivo: dimensione leggibile */
  .cky-consent-container .cky-bar-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Bottoni: stack verticale, full-width, ordine Accept → Reject → Customise */
  .cky-consent-container .cky-bar-btn-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .cky-consent-container .cky-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
  }
  /* Accept All per primo (priorità visiva) */
  .cky-consent-container .cky-btn-accept {
    order: -1 !important;
  }

  /* Revisit button: alza sopra la barra contatti */
  .cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    bottom: 12px !important;
    transition: bottom 0.4s ease !important;
  }
  body:has(.global-contact.is-visible) .cky-btn-revisit-wrapper.cky-revisit-bottom-left {
    bottom: 76px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: bottoni affiancati ma con più respiro */
  .cky-consent-container .cky-bar-btn-group {
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .cky-consent-container .cky-btn {
    flex: 1 1 auto !important;
    min-width: 120px !important;
  }
}

.contact-card__social {
  display: flex;
  gap: 14px;
  margin-top: 16px;
}

.social-badge {
  display: inline-flex;
}
.social-badge img {
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease;
}
.social-badge:hover img {
  transform: scale(1.1);
}

.header-info-contact {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1024px) {
  .header-info-contact {
    flex-direction: row;
    gap: 96px;
  }
}

/* =====================================================
   SITE FOOTER
===================================================== */
.site-footer {
  position: relative;
  background: transparent;
}

/* =====================================================
   FOOTER CONTACT WRAPPER
===================================================== */
.footer-contact {
  position: relative;
  overflow: hidden;
  background: var(--body-background-color-brand-primary, #FF0086);
}

/* =====================================================
   FOOTER TOP — BLACK
===================================================== */
.footer-top {
  display: inline-grid;
  padding: 20px 20px 44px 20px;
  row-gap: 24px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  align-self: stretch;
  grid-template-rows: repeat(3, fit-content(100%));
  grid-template-columns: repeat(12, minmax(0, 1fr));
  border-radius: 0 0 24px 24px;
  background: var(--body-background-color-neutral-dark, #000);
}
@media (min-width: 768px) {
  .footer-top {
    padding: 32px 32px 56px 32px;
    row-gap: 32px;
    -moz-column-gap: 32px;
         column-gap: 32px;
    align-self: stretch;
    grid-template-rows: repeat(2, fit-content(100%));
  }
}
@media (min-width: 1280px) {
  .footer-top {
    row-gap: 48px;
  }
}
@media (min-width: 1024px) {
  .footer-top {
    padding: 48px 48px 72px 48px;
    row-gap: 64px;
    -moz-column-gap: 48px;
         column-gap: 48px;
    align-self: stretch;
  }
}

/* FOOTER MEDIA (image / video) */
.footer-media {
  grid-row: 1/span 1;
  grid-column: 1/span 8;
  justify-self: stretch;
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 12px;
  transform: translateZ(0); /* GPU layer — prevents white border artifact at border-radius */
}
@media (min-width: 768px) {
  .footer-media {
    grid-column: 1/span 6;
    aspect-ratio: 4/3;
  }
}
.footer-media img,
.footer-media video {
  width: 100%;
  height: 115%;
  margin-top: -7.5%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  will-change: translate;
}
.footer-media .footer-item__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  top: 0;
  left: 0;
}

/* FOOTER MAPS */
.footer-map__container {
  grid-row: 1/span 1;
  grid-column: 9/span 4;
  justify-self: stretch;
  align-self: stretch;
  position: relative;
  min-height: 120px;
  overflow: hidden;
  border-radius: 12px;
  transform: translateZ(0); /* GPU layer — prevents white border artifact at border-radius */
}
@media (min-width: 768px) {
  .footer-map__container {
    aspect-ratio: 4/3;
    grid-column: 7/span 6;
  }
}
.footer-map__container .footer-map {
  width: 100%;
  height: 100%;
}
.footer-map__container .footer-item__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, #000 100%);
  pointer-events: none;
  top: 0;
  left: 0;
  opacity: 1;
  transition: all 0.3s ease;
}
.footer-map__container:hover .footer-item__overlay {
  opacity: 0;
  transition: all 0.3s ease;
}

/* GET IN TOUCH */
.footer-left {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 16px;
  grid-row: 3/span 1;
  grid-column: 1/span 11;
  justify-self: stretch;
}
@media (min-width: 768px) {
  .footer-left {
    grid-row: 2/span 1;
    grid-column: 1/span 6;
  }
}
.footer-left .contact-container {
  display: flex;
  width: 147px;
  align-items: center;
  gap: 8px;
}
.footer-left .contact-container .social-badge {
  display: flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: var(--corner-radius-full, 25rem);
  background: var(--body-fill-color-neutral-light, #FFF);
}
.footer-left .contact-container .social-badge:hover {
  background: var(--body-fill-color-brand-dark);
}
.footer-left .contact-container .social-badge:focus {
  background: var(--body-fill-color-brand-dark);
}

/* Title */
.footer-title {
  color: var(--body-text-color-brand-primary, #FF0086);
}

/* Icon links */
.footer-icons {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-icons li {
  display: inline-flex;
}
.footer-icons a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.footer-icons a:hover {
  transform: translateY(-3px);
}
.footer-icons a img {
  width: 20px;
  height: 20px;
  display: block;
}

/* HEADQUARTER ADDRESS */
.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  grid-row: 2/span 1;
  grid-column: 1/span 12;
  justify-self: stretch;
}
@media (min-width: 768px) {
  .footer-right {
    grid-column: 7/span 6;
  }
}

/* FOOTER BOTTOM */
.footer-bottom {
  display: flex;
  padding: 48px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  background: var(--body-background-color-brand-primary, #FF0086);
}
@media (min-width: 768px) {
  .footer-bottom {
    padding: 64px 0;
    gap: 32px;
  }
}
@media (min-width: 1280px) {
  .footer-bottom {
    padding: 72px 0;
  }
}
@media (min-width: 1024px) {
  .footer-bottom {
    padding: 96px 0;
  }
}

/* CTA Logo */
.footer-cta-logo svg {
  fill: var(--logo-brand-dark, #040F2E);
}

/* CTA Title */
.footer-cta-title {
  color: var(--logo-brand-dark, #040F2E);
  text-align: center;
}

/* =========================
   PAGE TRANSITION – BASE
   Movimento: DESTRA → SINISTRA
========================= */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
}

.page-transition__layer {
  position: absolute;
  inset: 0;
  /* Stato iniziale: nascosto */
  transform: scaleX(0);
  /* Parte sempre da destra */
  transform-origin: right;
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: transform;
}

/* Layer 1 */
.page-transition__layer--violet {
  background: var(--body-background-color-brand-primary);
  z-index: 1;
}

/* Layer 2 */
.page-transition__layer--blue {
  background: var(--body-background-color-neutral-dark, #000);
  z-index: 2;
}

/* =========================
   LEAVE – COVER
   Copre da destra → sinistra
========================= */
html.is-leaving.is-animating .page-transition__layer--violet {
  transform-origin: left;
  transform: scaleX(1);
  transition-delay: 0s;
}
html.is-leaving.is-animating .page-transition__layer--blue {
  transform-origin: left;
  transform: scaleX(1);
  transition-delay: 0.12s;
}

/* =========================
   ENTER – UNCOVER
   Scopre da destra → sinistra
========================= */
html.is-rendering.is-animating .page-transition__layer--blue {
  transform-origin: left;
  transform: scaleX(0);
  transition-delay: 0s;
}
html.is-rendering.is-animating .page-transition__layer--violet {
  transform-origin: left;
  transform: scaleX(0);
  transition-delay: 0.12s;
}

/* Support class */
.transition-overlay {
  transition-duration: 1.25s;
}

/* Route hero transition — nasconde i layer visivi ma lascia il .page-transition
   nel DOM così Swup può leggere il transition-duration per i timing */
html.route-transition .page-transition__layer,
html.route-transition .transition-alt {
  display: none !important;
  transition: none !important;
}
html.route-transition .page-transition {
  opacity: 0 !important;
  pointer-events: none !important;
}

.single-bike__container {
  display: inline-grid;
  padding: 0 20px;
  row-gap: 10px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  align-self: stretch;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .single-bike__container {
    padding: 0 32px;
  }
}
@media (min-width: 1024px) {
  .single-bike__container {
    padding: 0 64px;
  }
}
@media (min-width: 1920px) {
  .single-bike__container {
    padding: 0 96px;
  }
}
.single-bike__breadcrumbs {
  display: flex;
  align-items: flex-start;
  grid-column: span 12;
  justify-self: stretch;
  color: white;
  gap: 6px;
  margin-bottom: 24px;
}
.single-bike__excerpt {
  color: rgba(255, 255, 255, 0.65);
}
.single-bike__breadcrumbs a {
  color: var(--body-text-color-brand-primary);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.single-bike__media {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-column: span 12;
  margin-bottom: 32px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  height: auto;
  background: var(--body-fill-color-neutral-light, #FFF);
}
@media (min-width: 1280px) {
  .single-bike__media {
    grid-column: span 5;
    aspect-ratio: 1/1;
    margin-bottom: 0;
    position: sticky;
    top: 120px;
  }
}
.single-bike__media img {
  inset: 0;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 1280px) {
  .single-bike__media img {
    width: 100%;
    height: auto;
  }
}
.single-bike__info-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  grid-column: span 12;
  justify-self: stretch;
}
.single-bike__info-container .label-section-regular {
  color: #fff;
}
@media (min-width: 1280px) {
  .single-bike__info-container {
    grid-column: 7/span 6;
  }
}
.single-bike__size {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.single-bike__specs-container, .single-bike__price-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
.single-bike__specs, .single-bike__price {
  display: flex;
  height: 32px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-top: 0.5px solid #FFF;
}
@media (min-width: 1280px) {
  .single-bike__specs, .single-bike__price {
    height: 44px;
  }
}
.single-bike__specs strong, .single-bike__price strong {
  font-weight: 500;
}
.single-bike__price {
  color: var(--body-text-color-brand-dark, #040F2E);
  border-top: 0.5px solid var(--body-text-color-brand-dark, #040F2E);
}

.hero-container {
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh;
  height: 100svh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.35) 30%, rgba(0, 0, 0, 0.08) 63.89%, #000 100%);
}
.hero-container .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.hero-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  z-index: 2;
}
@media (min-width: 768px) {
  .hero-text-container {
    align-items: flex-end;
  }
}
.hero-text-container .payoff {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
}
.hero-text-container .payoff .line {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  text-shadow: 0px 0px 44px rgba(0, 0, 0, 0.32);
}
.hero-text-container .payoff .line-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
@media (min-width: 768px) {
  .hero-text-container .payoff .line-container {
    flex-direction: row;
    gap: 44px;
  }
}
.hero-text-container .payoff .line-enphasis {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}
.hero-text-container .introduction {
  color: var(--body-text-color-neutral-light);
  text-shadow: 0px 0px 44px rgba(0, 0, 0, 0.32);
  font-family: Swiza;
  font-size: 16px;
  line-height: normal;
  font-style: normal;
  font-weight: 400;
  max-width: 280px;
}
@media (min-width: 768px) {
  .hero-text-container .introduction {
    font-size: 24px;
    line-height: 32px; /* 133.333% */
    max-width: 346px;
  }
}

.scroll-to-discover {
  position: absolute;
  top: calc(100vh - 64px);
  top: calc(100svh - 64px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 24px;
  color: var(--body-text-color-neutral-light, #FFF);
  white-space: nowrap;
}
.scroll-to-discover span {
  opacity: 0.54;
}
.scroll-to-discover svg {
  animation: scroll-indicator 2s ease-in-out infinite;
  will-change: transform;
}

/* Keyframes */
@keyframes scroll-indicator {
  0% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(-3px);
  }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .scroll-to-discover svg {
    animation: none;
  }
}
/* ======================================================
   MEDIA LIST — BASE
====================================================== */
.media-list {
  width: 100%;
  position: relative;
}

/* ======================================================
   SCROLL WRAPPER
====================================================== */
.media-list--scroll {
  position: relative;
  height: 500vh;
}

/* ======================================================
   STICKY CONTAINER
====================================================== */
.media-list__sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* ======================================================
   INNER GRID
====================================================== */
.media-list__inner {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  -moz-column-gap: 24px;
       column-gap: 24px;
  row-gap: 10px;
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .media-list__inner {
    padding-inline: 64px;
  }
}
@media (min-width: 1920px) {
  .media-list__inner {
    padding-inline: 96px;
  }
}

/* ======================================================
   MEDIA — STACKED CARDS
====================================================== */
.media-list__media {
  position: relative;
  grid-column: span 12;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  aspect-ratio: 4/3;
}
@media (min-width: 1280px) {
  .media-list__media {
    grid-column: 1/span 6;
  }
}
/* Wrapper per stack effect */
.media-list__media-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  transform: translateY(100%);
  will-change: transform;
}
.media-list__media-wrap:first-child {
  transform: translateY(0);
}
.media-list__media img,
.media-list__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  will-change: transform, scale;
  transform-origin: center center;
}
.media-list__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgb(0, 0, 0) 100%);
}

/* ======================================================
   CONTENT
====================================================== */
.media-list__content {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: 24px;
}
@media (min-width: 768px) {
  .media-list__content {
    gap: 24px;
  }
}
@media (min-width: 1280px) {
  .media-list__content {
    grid-column: 8/span 5;
    padding-block: 52px;
  }
}
@media (min-width: 1920px) {
  .media-list__content {
    padding-block: 72px;
    gap: 44px;
  }
}

/* ======================================================
   HEADER (label + counter)
====================================================== */
.media-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.media-list__label {
  margin-bottom: 0;
}
.media-list__counter {
  font-family: Swiza, sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 24px;
}
.media-list__counter-current {
  color: var(--body-text-color-brand-primary);
  font-weight: 600;
}
.media-list__counter-sep,
.media-list__counter-total {
  color: rgba(255, 255, 255, 0.35);
}

/* ======================================================
   ITEMS LIST
====================================================== */
.media-list__items {
  display: flex;
  flex-direction: column;
}

.media-list__item {
  padding-block: 16px;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  opacity: 0.45;
  transition: opacity 0.4s ease-in-out, padding-left 0.4s ease-in-out;
}
.media-list__item.is-active,
.media-list__item:hover {
  opacity: 1;
  padding-left: 4px;
}
.media-list__item-arrow {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.media-list__item.is-active .media-list__item-arrow,
.media-list__item:hover .media-list__item-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ======================================================
   MEDIA RIGHT VARIANT
====================================================== */
.media-list--media-right .media-list__media {
  grid-column: 7/span 6;
}
@media (min-width: 1440px) {
  .media-list--media-right .media-list__media {
    grid-column: 7/span 5;
  }
}
@media (min-width: 1600px) {
  .media-list--media-right .media-list__media {
    grid-column: 8/span 5;
  }
}
.media-list--media-right .media-list__content {
  grid-column: 1/span 6;
}
@media (min-width: 1280px) {
  .media-list--media-right .media-list__content {
    grid-column: 1/span 5;
  }
}
@media (min-width: 1440px) {
  .media-list--media-right .media-list__content {
    grid-column: 2/span 4;
  }
}

/* ======================================================
   MOBILE — layout a card verticali
====================================================== */
@media (max-width: 1279px) {
  .media-list--scroll {
    height: auto;
  }
  .media-list__sticky {
    position: relative;
    min-height: auto;
  }
  .media-list__media {
    display: none;
  }
  .media-list__content {
    grid-column: span 12;
    padding-block: 0;
  }
  .media-list__counter {
    display: none;
  }
  .media-list__item {
    opacity: 1;
    padding-left: 0;
  }
  .media-list__item.is-active,
  .media-list__item:hover {
    padding-left: 0;
  }
  .media-list__item-arrow {
    opacity: 1;
    transform: translateX(0);
  }
}

.media-text__inner {
  display: inline-grid;
  padding: 0 20px;
  row-gap: 52px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  align-self: stretch;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: visible;
}
@media (min-width: 768px) {
  .media-text__inner {
    padding: 0 64px;
    row-gap: 72px;
  }
}
@media (min-width: 1440px) {
  .media-text__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    -moz-column-gap: 96px;
         column-gap: 96px;
  }
}
@media (min-width: 1920px) {
  .media-text__inner {
    padding: 0 96px;
  }
}
@media (min-width: 1440px) {
  .media-text--media-left .media-text__media-inner {
    order: -1;
  }
}
.media-text__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: center;
  gap: 32px;
  grid-column: span 6;
  justify-self: stretch;
  will-change: translate;
}
@media (min-width: 768px) {
  .media-text__content {
    gap: 40px;
  }
}
@media (min-width: 1024px) {
  .media-text__content {
    gap: 32px;
    grid-column: 2/span 4;
  }
}
@media (min-width: 1440px) {
  .media-text__content {
    grid-column: span 6;
  }
}
@media (min-width: 1920px) {
  .media-text__content {
    gap: 48px;
  }
}
.media-text__content-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
}
@media (min-width: 768px) {
  .media-text__content-intro {
    gap: 24px;
  }
}
.media-text__media {
  display: flex;
  align-self: center;
  grid-column: span 6;
  justify-self: stretch;
}
@media (min-width: 1024px) {
  .media-text__media {
    grid-column: 2/span 4;
  }
}
@media (min-width: 1440px) {
  .media-text__media {
    grid-column: span 6;
  }
}
.media-text__title {
  margin: 0;
}
.media-text__text {
  color: rgba(255, 255, 255, 0.65);
}
.media-text__text p {
  margin-top: 0;
}
.media-text__text strong {
  font-weight: 600;
}
.media-text--no-label .label-section-regular {
  display: none;
}
.media-text--no-list .media-text__list {
  display: none;
}

.label-section-regular.el-rev.fade-in.visible {
  color: var(--body-text-color-brand-primary);
}

/* List */
.media-text__list {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
.media-text__list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  align-self: stretch;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .media-text__list-item {
    font-size: 20px;
    line-height: 32px; /* 160% */
  }
}
@media (min-width: 1440px) {
  .media-text__list-item {
    font-size: 20px;
  }
}
@media (min-width: 1920px) {
  .media-text__list-item {
    font-size: 24px;
  }
}
.media-text__list-value p {
  margin: 0;
}
.media-text__list-value p + p {
  margin-top: var(--space-xs);
}

/* Media */
.media-text__media-inner {
  display: flex;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 12px;
  height: auto;
  align-self: center;
  grid-column: span 6;
  justify-self: stretch;
  transform: translateZ(0); /* GPU layer — prevents white border artifact at border-radius */
}
@media (min-width: 1024px) {
  .media-text__media-inner {
    grid-column: 2/span 4;
  }
}
@media (min-width: 1440px) {
  .media-text__media-inner {
    grid-column: span 6;
  }
}
.media-text__media-inner img,
.media-text__media-inner video {
  position: absolute;
  left: 0;
  top: -7.5%;
  width: 100%;
  height: 115%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  will-change: translate;
}

.media-text__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 63.89%, #000 98%);
}

.big-heading {
  width: 100%;
}
.big-heading__container {
  display: grid;
  width: 100%;
  padding: 0 20px;
  row-gap: 10px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .big-heading__container {
    padding: 0 64px;
  }
}
.big-heading__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  grid-column: span 12;
  text-align: center;
}
@media (min-width: 768px) {
  .big-heading__inner {
    grid-column: 2/span 10;
  }
}
.big-heading .introduction {
  color: var(--body-text-color-neutral-light);
  text-shadow: 0px 0px 44px rgba(0, 0, 0, 0.32);
  font-family: Swiza;
  font-size: 16px;
  line-height: normal;
  font-style: normal;
  font-weight: 400;
  text-align: center;
  max-width: 204px;
}
@media (min-width: 768px) {
  .big-heading .introduction {
    font-size: 24px;
    line-height: 32px; /* 133.333% */
    max-width: 346px;
  }
}

.big-text-focus {
  display: grid;
  padding: 0 20px;
  row-gap: 10px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  align-self: stretch;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .big-text-focus {
    padding: 0 64px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1920px) {
  .big-text-focus {
    padding: 0 96px;
  }
}
.big-text-focus__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  grid-column: 1/span 6;
}
@media (min-width: 768px) {
  .big-text-focus__content {
    gap: 24px;
    grid-column: 1/span 12;
  }
}
@media (min-width: 1024px) {
  .big-text-focus__content {
    grid-column: 2/span 10;
  }
}

/* =========================
   Big Media Block
   ========================= */
.big-media {
  width: 100%;
  overflow: hidden;
  display: grid;
  width: 100%;
  row-gap: 10px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.big-media__inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  grid-row: 1/span 1;
  grid-column: 1/span 12;
  border-radius: 20px;
  overflow: hidden;
}

/* Primo blocco dopo main#swup: nessun arrotondamento */
#swup > .big-media:first-child .big-media__inner {
  border-radius: 0;
}
.big-media {
  /* Media wrapper */
}
.big-media__media {
  position: absolute;
  inset: 0;
}
.big-media {
  /* Video & Image */
}
.big-media__video, .big-media__image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.big-media {
  /* Overlay */
}
.big-media__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 63.89%, #000 98%);
}
.big-media {
  /* =========================
     padding modifiers
     ========================= */
}
.big-media--padding-none {
  padding: 0px;
}
.big-media--padding-default {
  padding: 0px 20px;
}
.big-media--padding-large {
  padding: 0 24px;
}
@media (min-width: 768px) {
  .big-media--padding-large {
    padding: 0 64px;
  }
}
@media (min-width: 1280px) {
  .big-media--padding-large {
    padding: 0 96px;
  }
}
.big-media {
  /* =========================
     Height modifiers
     ========================= */
}
.big-media--small {
  height: 40vh;
}
@media (max-width: 768px) {
  .big-media--small {
    height: 30vh;
  }
}
.big-media--medium {
  height: 60vh;
}
@media (max-width: 768px) {
  .big-media--medium {
    height: 45vh;
  }
}
.big-media--large {
  height: 80vh;
}
@media (max-width: 768px) {
  .big-media--large {
    height: 60vh;
  }
}
.big-media--full {
  height: 100vh;
}
@media (max-width: 768px) {
  .big-media--full {
    height: 80vh;
  }
}

.about-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 72px;
  background: var(--body-background-color-neutral-dark);
}
@media (min-width: 768px) {
  .about-container {
    display: inline-flex;
    gap: 120px;
  }
}
@media (min-width: 1024px) {
  .about-container {
    display: flex;
  }
}
@media (min-width: 1280px) {
  .about-container {
    gap: 160px;
  }
}
@media (min-width: 1440px) {
  .about-container {
    gap: 220px;
  }
}
.about-description-container {
  display: grid;
  padding: 0 32px;
  row-gap: 10px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  align-self: stretch;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .about-description-container {
    padding: 0 64px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1920px) {
  .about-description-container {
    padding: 0 96px;
  }
}
.about-description-container .big-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch;
  grid-row: 1/span 1;
  grid-column: 1/span 6;
}
@media (min-width: 768px) {
  .about-description-container .big-text-container {
    gap: 24px;
    flex: 1 0 0;
    grid-column: 1/span 12;
  }
}
@media (min-width: 1024px) {
  .about-description-container .big-text-container {
    grid-column: 2/span 10;
  }
}
@media (min-width: 1280px) {
  .about-description-container .big-text-container {
    grid-column: 2/span 10;
  }
}
@media (min-width: 1440px) {
  .about-description-container .big-text-container {
    grid-column: 2/span 10;
  }
}
@media (min-width: 1600px) {
  .about-description-container .big-text-container {
    grid-column: 2/span 10;
  }
}
@media (min-width: 1920px) {
  .about-description-container .big-text-container {
    grid-column: 2/span 10;
  }
}

.service-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 52px;
  align-self: stretch;
}
@media (min-width: 768px) {
  .service-container {
    display: grid;
    padding: 0px 64px;
    row-gap: 10px;
    -moz-column-gap: 24px;
         column-gap: 24px;
    grid-template-rows: repeat(1, minmax(0, 1fr));
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1920px) {
  .service-container {
    padding: 0px 96px;
  }
}
.service-image {
  flex: 1 0 0;
  align-self: stretch;
  grid-row: 1/span 1;
  grid-column: 1/span 5;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%), url(<path-to-image>) lightgray 50%/cover no-repeat;
  background-image: url("../img/img.jpg");
  background-size: cover;
  background-position: center;
}
@media (min-width: 768px) {
  .service-image {
    flex: 1 0 0;
    align-self: stretch;
    grid-row: 1/span 1;
    grid-column: 1/span 5;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%), url("../img/img.jpg") lightgray 50%/cover no-repeat;
    background-size: cover;
    background-position: center;
  }
}
@media (min-width: 1280px) {
  .service-image {
    grid-column: 1/span 6;
  }
}
@media (min-width: 1440px) {
  .service-image {
    grid-column: 2/span 4;
  }
}
@media (min-width: 1600px) {
  .service-image {
    grid-column: 2/span 5;
  }
}
.service-list-container {
  display: grid;
  padding: 0px 32px;
  row-gap: 10px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  align-self: stretch;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .service-list-container {
    display: flex;
    padding: 52px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 0 0;
    align-self: stretch;
    grid-row: 1/span 1;
    grid-column: 7/span 6;
  }
}
@media (min-width: 1280px) {
  .service-list-container {
    grid-column: 8/span 5;
  }
}
@media (min-width: 1440px) {
  .service-list-container {
    grid-column: 7/span 5;
  }
}
@media (min-width: 1600px) {
  .service-list-container {
    grid-column: 8/span 4;
  }
}
@media (min-width: 1920px) {
  .service-list-container {
    grid-column: 8/span 4;
    padding: 72px 0px;
    gap: 44px;
  }
}

.rental-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 96px;
  background: var(--body-background-color-neutral-dark);
}
.rental-intro-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.rental-video-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  -o-object-fit: cover;
  object-fit: cover;
}
.rental-video-bg-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
  grid-row: 1/span 1;
  grid-column: 1/span 12;
  border-radius: 20px;
  overflow: hidden;
}
.rental-video-intro-container {
  display: grid;
  width: 100%;
  height: 60vw;
  padding: 0px 32px;
  row-gap: 10px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .rental-video-intro-container {
    padding: 0px 64px;
    height: 33.33vw;
  }
}
.rental-text-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch;
  grid-row: 1/span 1;
  grid-column: 2/span 10;
  text-align: center;
}
.rental-text-intro-container {
  display: grid;
  width: 100%;
  padding: 0px 32px;
  row-gap: 10px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  align-self: stretch;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .rental-text-intro-container {
    padding: 0px 64px;
  }
}
.rental-bike-category-item {
  position: relative;
  overflow: hidden;
  display: flex;
  height: 42vh;
  padding: 24px 32px;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0;
  align-self: stretch;
  flex-shrink: 0;
  border-radius: 12px;
  color: var(--body-text-color-neutral-light);
  font-family: Swiza;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 44px;
  text-decoration: none;
  transition: all 0.8s ease-in-out;
  background-size: 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  z-index: 1;
}
.rental-bike-category-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.6s ease;
  z-index: -1;
}
.rental-bike-category-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  z-index: -1;
}
.rental-bike-category-item:hover::before {
  transform: scale(1.1);
}
.rental-bike-category-item > * {
  position: relative;
  z-index: 2;
}
.rental-bike-category-item.gravel {
  grid-row: 1/span 1;
  grid-column: 1/span 12;
}
@media (min-width: 768px) {
  .rental-bike-category-item.gravel {
    grid-column: 1/span 6;
  }
}
@media (min-width: 1280px) {
  .rental-bike-category-item.gravel {
    grid-column: 2/span 5;
  }
}
@media (min-width: 1600px) {
  .rental-bike-category-item.gravel {
    grid-row: 1/span 1;
    grid-column: 1/span 3;
  }
}
.rental-bike-category-item.gravel::before {
  background-image: url("../img/bike-rental-categoy-gravel.webp");
}
.rental-bike-category-item.road {
  grid-row: 2/span 1;
  grid-column: 1/span 12;
}
@media (min-width: 768px) {
  .rental-bike-category-item.road {
    grid-row: 1/span 1;
    grid-column: 7/span 6;
  }
}
@media (min-width: 1280px) {
  .rental-bike-category-item.road {
    grid-column: 7/span 5;
  }
}
@media (min-width: 1600px) {
  .rental-bike-category-item.road {
    grid-row: 1/span 1;
    grid-column: 4/span 3;
  }
}
.rental-bike-category-item.road::before {
  background-image: url("../img/bike-rental-categoy-road.webp");
}
.rental-bike-category-item.mtb {
  grid-row: 3/span 1;
  grid-column: 1/span 12;
}
@media (min-width: 768px) {
  .rental-bike-category-item.mtb {
    grid-row: 2/span 1;
    grid-column: 1/span 6;
  }
}
@media (min-width: 1280px) {
  .rental-bike-category-item.mtb {
    grid-column: 2/span 5;
  }
}
@media (min-width: 1600px) {
  .rental-bike-category-item.mtb {
    grid-row: 1/span 1;
    grid-column: 7/span 3;
  }
}
.rental-bike-category-item.mtb::before {
  background-image: url("../img/bike-rental-categoy-MTB.webp");
}
.rental-bike-category-item.ebike {
  grid-row: 4/span 1;
  grid-column: 1/span 12;
}
@media (min-width: 768px) {
  .rental-bike-category-item.ebike {
    grid-row: 2/span 1;
    grid-column: 7/span 6;
  }
}
@media (min-width: 1280px) {
  .rental-bike-category-item.ebike {
    grid-column: 7/span 5;
  }
}
@media (min-width: 1600px) {
  .rental-bike-category-item.ebike {
    grid-row: 1/span 1;
    grid-column: 10/span 3;
  }
}
.rental-bike-category-item.ebike::before {
  background-image: url("../img/bike-rental-categoy-e-bike.webp");
}
.rental-bike-category-container {
  display: grid;
  width: 100%;
  padding: 0px 32px;
  row-gap: 12px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  align-self: stretch;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .rental-bike-category-container {
    padding: 0px 64px;
    row-gap: 24px;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .rental-bike-category-container {
    row-gap: 64px;
    -moz-column-gap: 64px;
         column-gap: 64px;
  }
}
@media (min-width: 1600px) {
  .rental-bike-category-container {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
}
.delivery-zone-container {
  display: grid;
  padding: 0 96px;
  row-gap: 10px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  align-self: stretch;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.delivery-zone-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  color: red;
}
.delivery-zone-description-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 72px;
  flex: 1 0 0;
  align-self: stretch;
  grid-row: 1/span 1;
  grid-column: 1/span 6;
}
.delivery-zone-image {
  flex: 1 0 0;
  align-self: stretch;
  grid-row: 1/span 1;
  grid-column: 8/span 5;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%), url("../img/delivery-zone.jpg") lightgray 50%/cover no-repeat;
}

.tour-container {
  display: grid;
  padding: 0 120px;
  row-gap: 72px;
  -moz-column-gap: 64px;
       column-gap: 64px;
  align-self: stretch;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.tour-item-description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 52px;
  grid-row: 1/span 1;
  grid-column: 7/span 6;
}
.tour-item-description-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.tour-item {
  display: flex;
  position: relative;
  padding: 32px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.8s ease-in-out;
  background-size: 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  z-index: 1;
}
.tour-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.6s ease;
  z-index: -1;
}
.tour-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  z-index: -1;
}
.tour-item:hover::before {
  transform: scale(1.1);
}
.tour-item-primary {
  grid-row: 1/span 2;
  grid-column: 1/span 6;
}
.tour-item-primary::before {
  background-image: url("../img/tour-bergamo.png");
}
.tour-item-secondary {
  grid-row: 2/span 1;
  grid-column: 7/span 6;
}
.tour-item-secondary::before {
  background-image: url("../img/tour-dolomiti.png");
}

.badge {
  display: flex;
  padding: 4px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 24px;
  background: var(--body-fill-color-neutral-light);
  color: var(--body-text-color-brand-dark, #040F2E);
  font-family: Swiza;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px; /* 150% */
}
.badge-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ride-on-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
}
.ride-on-container img {
  height: 32px;
}

.path-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
  align-self: stretch;
}
.path-intro-container {
  display: grid;
  padding: 0 64px;
  row-gap: 10px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  align-self: stretch;
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.path-description-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 64px;
  flex: 1 0 0;
  align-self: stretch;
  grid-row: 1/span 1;
  grid-column: 1/span 10;
}
.path-item {
  display: flex;
  width: 540px;
  height: 78vh;
  min-height: 460px;
  position: relative;
  padding: 32px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.8s ease-in-out;
  background-size: 100%, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  z-index: 1;
}
.path-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.6s ease;
  z-index: -1;
  background-image: url("../img/tour-dolomiti.png");
}
.path-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 50%, #000 100%);
  z-index: -1;
}
.path-item:hover::before {
  transform: scale(1.1);
}
.path-info-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}
.path-data-info-container {
  display: flex;
  padding-bottom: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
.path-data-info-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
.path-data-info-value {
  align-self: stretch;
  color: #FFF;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  /* body/XL/regular-M */
  font-size: 44px;
  font-style: normal;
  font-weight: 400;
  line-height: 52px; /* 118.182% */
}
.path-data-info-label {
  align-self: stretch;
  color: var(--body-text-color-neutral-light, #FFF);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  /* label/section/regular-M */
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 120% */
  letter-spacing: 2px;
  opacity: 0.54;
}

.route-hero {
  position: relative;
  width: 100%;
  padding: 0 20px;
  text-align: center;
}
@media (min-width: 768px) {
  .route-hero {
    padding: 0 64px;
  }
}
.route-hero__media {
  aspect-ratio: 1.85/1;
  display: flex;
  justify-self: stretch;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
}
.route-hero__overlay {
  width: 100%;
  aspect-ratio: 1.85/1;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 87%);
  position: absolute;
  top: 0;
  left: 0;
}
.route-hero__title {
  margin: 0;
}
.route-hero__content {
  padding-top: 72px;  /* spacing-sm mobile */
  padding-bottom: 64px;
}
@media (min-width: 768px) {
  .route-hero__content {
    padding-top: 180px; /* spacing-sm tablet+ */
  }
}
.route-content__divider {
  height: 1px;
  width: 100%;
  background: var(--logo-brand-dark, #040F2E);
}
.route-content__grid {
  display: inline-grid;
  padding: 0 20px;
  row-gap: 10px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  align-self: stretch;
  grid-template-rows: repeat(1, fit-content(100%));
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
}
@media (min-width: 768px) {
  .route-content__grid {
    padding: 0 64px;
  }
}
.route-content__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  grid-column: span 12;
  justify-self: stretch;
  color: rgba(255, 255, 255, 0.65);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
}
@media (min-width: 1024px) {
  .route-content__text {
    grid-column: 1/span 6;
  }
}
.route-content__text p {
  margin-bottom: 32px;
}
.route-content__details {
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  grid-column: span 12;
  justify-self: stretch;
  border-radius: 12px;
  background: var(--body-background-color-brand-primary, #FF0086);
  position: sticky;
  top: 120px;
}
@media (min-width: 1024px) {
  .route-content__details {
    grid-column: 8/span 5;
    gap: 24px;
  }
}
@media (min-width: 1280px) {
  .route-content__details {
    grid-column: 9/span 4;
    padding: 40px;
  }
}
.route-content__details h3 {
  color: var(--logo-brand-dark, #040F2E);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  /* title/XS/seimbold-M */
  font-family: Swiza;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  /* 123.077% */
  align-self: stretch;
  margin: 0;
}
@media (min-width: 1280px) {
  .route-content__details h3 {
    font-size: 26px;
    line-height: 32px;
  }
}
.route-content__details ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  margin: 0;
  padding: 0;
}
.route-content__details li {
  display: flex;
  margin: 0;
  padding: 0;
  height: 52px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-top: 0.75px solid var(--logo-brand-dark, #040F2E);
  color: var(--logo-brand-dark, #040F2E);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  font-family: Swiza;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  /* 150% */
}
@media (min-width: 1280px) {
  .route-content__details li {
    font-size: 16px;
    line-height: 24px;
  }
}
.route-content__details li:first-child {
  border-top: none;
}
.route-content__details li strong {
  color: var(--logo-brand-dark, #040F2E);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  font-family: Swiza;
  font-style: normal;
  font-weight: 400;
  /* 150% */
  text-transform: uppercase;
}

.horizontal-gallery {
  /* height impostata dinamicamente da JS in base al numero di immagini */
}

.horizontal-gallery__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.media-strip {
  display: flex;
  gap: 48px;
  padding-inline: 10vw;
}

.media-strip__item {
  height: 70vh;
  flex: 0 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}
.media-strip__item img {
  height: 100%;
  width: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ── Mobile & Tablet: scroll orizzontale nativo ─────── */
@media (max-width: 1023px) {
  /* Niente sticky: la gallery scorre nel flusso normale */
  .horizontal-gallery__sticky {
    position: static;
    height: auto;
    overflow: visible;
  }

  /* Strip: scroll nativo touch con snap.
     padding-inline non è affidabile su overflow-x per lo spazio iniziale →
     si usano margin su first/last child + scroll-padding-left per lo snap. */
  .media-strip {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    padding-inline: 0;
    padding-block: 8px;
    gap: 12px;
    scrollbar-width: none;
  }
  .media-strip::-webkit-scrollbar {
    display: none;
  }

  /* Prima immagine allineata al margine della pagina */
  .media-strip__item:first-child {
    margin-left: 20px;
  }
  /* Ultima immagine: spazio finale simmetrico */
  .media-strip__item:last-child {
    margin-right: 20px;
  }

  /* Ogni foto: 80vw → si vede uno spicchio della successiva */
  .media-strip__item {
    height: 56vw;
    width: 80vw;
    scroll-snap-align: start;
    border-radius: 16px;
  }

  /* Immagine copre tutto il container senza bordi bianchi */
  .media-strip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .media-strip {
    scroll-padding-left: 32px;
    gap: 20px;
  }

  .media-strip__item:first-child {
    margin-left: 32px;
  }
  .media-strip__item:last-child {
    margin-right: 32px;
  }

  /* Tablet: ogni foto occupa ~55vw → si vedono ~1.7 immagini */
  .media-strip__item {
    height: 45vw;
    width: 55vw;
    border-radius: 20px;
  }
}

.bike-category-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px;
  max-width: 1440px;
}
@media (min-width: 768px) {
  .bike-category-intro {
    padding: 0 64px;
  }
}
@media (min-width: 1920px) {
  .bike-category-intro {
    padding: 0 96px;
  }
}
.bike-category-intro-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bike-category-list {
  display: flex;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .bike-category-list {
    padding: 0 64px;
  }
}
@media (min-width: 1920px) {
  .bike-category-list {
    padding: 0 96px;
  }
}

.bike-filters {
  display: none;
}

.bike-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .bike-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1920px) {
  .bike-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bike-category-section__fixed {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 100vh;
  top: 0;
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 96px 20px;
  background: black;
}
@media (min-width: 1280px) {
  .bike-category-section__fixed {
    padding: 120px 20px;
  }
}
@media (min-width: 1920px) {
  .bike-category-section__fixed {
    padding: 140px 20px;
  }
}
.bike-category-section__wrapper {
  display: inline-grid;
  width: 100%;
  padding: 0 20px;
  gap: 8px;
  align-self: stretch;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .bike-category-section__wrapper {
    padding: 0 64px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}
@media (min-width: 1920px) {
  .bike-category-section__wrapper {
    padding: 0 96px;
  }
}
.bike-category-section__item {
  position: relative;
  display: inline-grid;
  padding: 0 12px;
  row-gap: 16px;
  -moz-column-gap: 16px;
       column-gap: 16px;
  align-self: stretch;
  justify-self: stretch;
  border-radius: 12px;
  aspect-ratio: 2.35/1;
  overflow: hidden;
  transition: all 0.4s ease;
  align-items: flex-end;
  padding: 16px;
  color: inherit;
  text-decoration: none;
  grid-column: span 12;
  transform: translateZ(0); /* GPU layer — prevents white border artifact at border-radius */
}
@media (min-width: 768px) {
  .bike-category-section__item {
    grid-column: span 6;
    aspect-ratio: 4/3;
  }
}
.bike-category-section__item img,
.bike-category-section__item video {
  position: absolute;
  left: 0;
  top: -7.5%;
  width: 100%;
  height: 115%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  will-change: translate;
  transition: scale 0.4s ease;
}
.bike-category-section__item:hover .bike-category-section__overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, #000 100%);
}
.bike-category-section__item:hover .bike-category-section__title {
  gap: 12px;
}
.bike-category-section__item:hover img,
.bike-category-section__item:hover video {
  scale: 1.04;
}
.bike-category-section__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  top: 0;
  left: 0;
  transition: all 0.4s ease;
}
.bike-category-section__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
  transition: all 0.4s ease;
}

.bike-card {
  display: flex;
  width: 100%;
}
.bike-card__link {
  display: flex;
  width: 100%;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  border-radius: 12px;
  background: var(--body-fill-color-neutral-light-dark, #141414);
  color: inherit;
  text-decoration: none;
}
.bike-card__link:visited {
  color: inherit;
}
.bike-card__link:hover {
  text-decoration: none;
  background: var(--body-fill-color-brand-primary, #FF0086);
}
.bike-card__link:hover .bike-card__overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 100%, #141414 100%);
}
.bike-card__link:hover .bike-card__media img {
  transform: scale(1.04);
}
.bike-card__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.bike-card__media {
  position: relative;
  padding: 32px;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--body-background-color-neutral-light, #FFF);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bike-card__media img {
  width: 100%;
  height: auto;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
}
.bike-card__overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #141414 100%);
}

.faq {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .faq {
    flex-direction: row;
  }
}
.faq__title {
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  align-self: stretch;
}
@media (min-width: 768px) {
  .faq__title {
    padding: 0 0 32px 32px;
    align-self: auto;
    flex: 0 0 35%;
  }
  .faq__content {
    flex: 1;
  }
}
@media (min-width: 1280px) {
  .faq__title {
    padding: 0 0 32px 64px;
  }
}
@media (min-width: 1920px) {
  .faq__title {
    padding: 0 0 32px 96px;
  }
}
.faq__content {
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
@media (min-width: 768px) {
  .faq__content {
    padding: 0 32px;
  }
}
@media (min-width: 1280px) {
  .faq__content {
    padding: 0 64px;
  }
}
@media (min-width: 1920px) {
  .faq__content {
    padding: 0 96px;
  }
}
.faq__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
.faq-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 0px;
  border-top: 0.5px solid #FFF;
  border-bottom: none;
  border-right: none;
  border-left: none;
  transition: all 0.3s ease;
}
.faq-item.is-open {
  gap: 4px;
}
@media (min-width: 768px) {
  .faq-item.is-open {
    gap: 8px;
  }
}
.faq-item.is-open .faq-item__answer {
  max-height: 900px;
  padding: 0 0 12px 0;
  opacity: 1;
}
@media (min-width: 768px) {
  .faq-item.is-open .faq-item__answer {
    padding: 0 0 24px 0;
  }
}
.faq-item.is-open .faq-item__question span {
  color: var(--body-text-color-brand-primary, #FF0086);
}
.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
}
.faq-item__question {
  display: flex;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  background: none;
  justify-content: space-between;
  padding: 12px 0;
  border: none;
  text-align: left;
  cursor: pointer;
}
.faq-item__question:hover span {
  color: var(--body-text-color-brand-primary, #FF0086);
}
@media (min-width: 768px) {
  .faq-item__question {
    padding: 16px 0;
  }
}
.faq-item__icon {
  display: flex;
  transition: all 0.3s ease;
}
.faq-item__answer {
  align-self: stretch;
  padding: 0 0 0 0;
  text-align: left;
  max-height: 0;
  max-width: 1024px;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity: 0;
}

.brand-carousel {
  overflow: hidden;
  width: 100%;
}
.brand-carousel-inverse .brand-carousel-track {
  animation: scrollBrandsInverse 40s linear infinite;
}

.brand-carousel-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: -moz-max-content;
  width: max-content;
  animation: scrollBrands 40s linear infinite;
}

.brand-carousel-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.brand-carousel-item img {
  height: 96px;
  width: auto;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.brand-carousel-item img:hover {
  opacity: 1;
}

@keyframes scrollBrands {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes scrollBrandsInverse {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
/* =====================================================
   Recommended Routes Block
   ===================================================== */
.recommended-routes {
  width: 100%;
  color: #fff;
  gap: 52px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .recommended-routes {
    gap: 64px;
  }
}
@media (min-width: 1024px) {
  .recommended-routes {
    gap: 72px;
  }
}
@media (min-width: 1440px) {
  .recommended-routes {
    gap: 96px;
  }
}
.recommended-routes__inner {
  display: grid;
  padding: 0 20px;
  row-gap: 24px;
  -moz-column-gap: 24px;
       column-gap: 24px;
  align-self: stretch;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.recommended-routes__inner-list {
  display: grid;
  align-self: stretch;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .recommended-routes__inner {
    padding: 0 64px;
  }
}
@media (min-width: 1024px) {
  .recommended-routes__inner {
    padding: 0px var(--spacing-3xl);
  }
}
@media (min-width: 1920px) {
  .recommended-routes__inner {
    padding: 0 192px;
  }
}
.recommended-routes {
  /* ---------------------------------
     Header editoriale
     --------------------------------- */
}

/* Header: 2 colonne su desktop (5fr sx / 7fr dx) */
.recommended-routes__header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  grid-column: span 12;
  justify-self: stretch;
}
@media (min-width: 1024px) {
  .recommended-routes__header {
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
  }
}

/* Colonna sinistra: label → titolo → CTA */
.recommended-routes__header-left {
  display: flex;
  flex-direction: column;
  gap: 12px; /* label → titolo */
}

.recommended-routes__label {
  display: block;
}

.recommended-routes__title {
  margin: 0;
}

/* CTA: gap maggiore dal titolo */
.recommended-routes__cta {
  display: flex;
  margin-top: 12px; /* spazio extra titolo → CTA */
}

/* Colonna destra: testo allineato con l'inizio del titolo.
   padding-top = line-height label (24px) + gap label→titolo (12px) = 36px */
.recommended-routes__header-right {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .recommended-routes__header-right {
    padding-top: 36px;
  }
}

.recommended-routes__text {
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.recommended-routes {
  /* ---------------------------------
     Cards list – scroll SEMPRE
     --------------------------------- */
}
.recommended-routes__list {
  grid-column: span 12;
  display: flex;
}
/* =====================================================
   Route Card
   ===================================================== */
.route-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 20px;
  overflow: hidden;
  background-color: #111;
  transform: translateZ(0); /* GPU layer — prevents white border artifact at border-radius */
  /* reset link */
}
.route-card__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.route-card__link:focus-visible {
  outline: 2px solid var(--color-accent, #ff2d8b);
  outline-offset: 4px;
}
.route-card {
  /* ---------------------------------
     Media
     --------------------------------- */
}
.route-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.route-card__media-img {
  position: absolute;
  left: 0;
  top: -8%;          /* centra l'immagine sovradimensionata */
  width: 100%;
  height: 116%;      /* +16% di headroom per il parallax */
  object-fit: cover;
  object-position: center;
  scale: 1;          /* separato da transform — non interferisce col parallax */
  transition: scale 0.6s ease;
  will-change: transform, scale;
}
.route-card__media-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0) 50%, #000 100%);
}
.route-card {
  /* ---------------------------------
     Overlay content
     --------------------------------- */
}
.route-card__overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 1280px) {
  .route-card__overlay {
    padding: 28px;
  }
}
.route-card {
  /* ---------------------------------
     Stats
     --------------------------------- */
}
.route-card__stats {
  display: flex;
  gap: 16px;
  flex-direction: column;
}
.route-card__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #fff;
}
.route-card__stat span.label-section-regular {
  opacity: 0.7;
  color: #fff;
}
.route-card {
  /* ---------------------------------
     Tags
     --------------------------------- */
}
.route-card__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 12px;
}
.route-card__tag {
  background-color: #fff;
  color: #000;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  padding: 2px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .route-card__tag {
    font-size: 14px;
    line-height: 22px;
    padding: 2px 12px;
  }
}
@media (min-width: 1280px) {
  .route-card__tag {
    font-size: 15px;
    line-height: 24px;
  }
}
.route-card {
  /* ---------------------------------
     Title
     --------------------------------- */
}
.route-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* =====================================================
   Hover (desktop only)
   ===================================================== */
@media (hover: hover) {
  .route-card:hover .route-card__media-img {
    scale: 1.05; /* usa la CSS scale property — non sovrascrive transform parallax */
  }
}
/* ==========================================================
   EDITORIAL REVIEWS
========================================================== */
.editorial-reviews {
  padding: 0 24px;
}
@media (min-width: 768px) {
  .editorial-reviews {
    padding: 0 64px;
  }
}
.editorial-reviews__inner {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .editorial-reviews__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 96px;
  }
}
.editorial-reviews__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.editorial-reviews__text {
  color: rgba(255, 255, 255, 0.65);
}
.editorial-reviews__content a {
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 1024px) {
  .editorial-reviews__content {
    grid-column: span 6;
  }
}
@media (min-width: 1024px) {
  .editorial-reviews--media-right .editorial-reviews__content {
    order: 2;
  }
}

/* ==========================================================
   GRID
========================================================== */
@media (min-width: 1024px) {
  .editorial-reviews__grid-container {
    grid-column: span 6;
  }
}

.editorial-reviews__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  overflow: visible;
}
@media (min-width: 640px) {
  .editorial-reviews__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    padding-bottom: 100px;
  }
  /* Colonna destra sfalsata in basso — effetto collage */
  .editorial-reviews__grid .review-card:nth-child(even) {
    margin-top: 80px;
  }
}
@media (min-width: 1024px) {
  .editorial-reviews__grid {
    gap: 48px;
  }
  .editorial-reviews__grid .review-card:nth-child(even) {
    margin-top: 100px;
  }
}

/* ==========================================================
   REVIEW CARD (button-based)
========================================================== */
.review-card {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  background: #000;
  font: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

/* ==========================================================
   CARD MEDIA
========================================================== */
.review-card__media {
  width: 100%;
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  transform: translateZ(0); /* GPU layer — prevents white border artifact at border-radius */
}
.review-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.12) 63.89%, #000 98%);
}
.review-card__media img,
.review-card__media video {
  position: absolute;
  left: 0;
  top: -7.5%;
  width: 100%;
  height: 115%;
  -o-object-fit: cover;
     object-fit: cover;
  will-change: translate;
}

/* ==========================================================
   CARD META
========================================================== */
.review-card__meta {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #000;
}

.review-card__title {
  margin: 0;
  color: var(--body-text-color-neutral-light, #fff);
}

/* ==========================================================
   STARS SYSTEM
========================================================== */
.review-card__stars {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  height: 24px;
}
.review-card__stars svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.review-card__stars .stars-bg,
.review-card__stars .stars-fill {
  display: flex;
  gap: 4px;
}
.review-card__stars .stars-bg svg {
  fill: #2A2A2A;
}
.review-card__stars .stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transition: width 0.4s ease;
}
.review-card__stars .stars-fill svg {
  fill: #FF0086;
}

/* ==========================================================
   MODAL BASE
========================================================== */
/* ==========================================================
   REVIEW DIALOG — pannello da destra
========================================================== */
.review-dialog {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  background: rgba(4, 15, 46, 0.72);
}
.review-dialog[aria-hidden=false] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 24px;
}

/* ==========================================================
   OVERLAY
========================================================== */
.modal__overlay {
  position: absolute;
  inset: 0;
}

/* ==========================================================
   DIALOG INNER
========================================================== */
.review-dialog__inner {
  position: relative;
  background: #fff;
  color: #040F2E;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 40px 28px;
  gap: 24px;
  z-index: 2;
  border-radius: 20px;
  animation: review-dialog-slide-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (min-width: 768px) {
  .review-dialog__inner {
    width: min(820px, 100%);
    padding: 56px 48px;
  }
}

/* ==========================================================
   HEADER (nome + stelle)
========================================================== */
.review-dialog__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 60px;
}

/* ==========================================================
   BODY (immagine + testo)
========================================================== */
.review-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}
@media (min-width: 600px) {
  .review-dialog__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }
}

/* ==========================================================
   CLOSE BUTTON
========================================================== */
.review-dialog__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 10;
  border: none;
  transition: transform 0.3s ease;
}
.review-dialog__close:hover {
  transform: rotate(90deg);
}

/* ==========================================================
   DIALOG MEDIA
========================================================== */
.review-dialog__media {
  width: 100%;
  aspect-ratio: 3/4;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
}
@media (min-width: 600px) {
  .review-dialog__media {
    width: 240px;
  }
}
@media (min-width: 768px) {
  .review-dialog__media {
    width: 280px;
  }
}
.review-dialog__media img,
.review-dialog__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================
   DIALOG TEXT con virgolette
========================================================== */
.review-dialog__text {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  color: #040F2E;
}

.review-dialog__quote {
  position: relative;
  padding-top: 40px;
  flex: 1;
}
.review-dialog__quote::before {
  content: '\201C';
  position: absolute;
  top: 0;
  left: 0;
  font-size: 48px;
  line-height: 1;
  color: #FF0086;
  font-family: Georgia, serif;
}
.review-dialog__quote::after {
  content: '\201D';
  display: block;
  text-align: right;
  font-size: 48px;
  line-height: 1;
  color: #FF0086;
  font-family: Georgia, serif;
  margin-top: 12px;
}

.review-dialog__title {
  margin: 0 0 4px;
  color: #040F2E;
}

.review-dialog__text .review-card__stars {
  margin-bottom: 0;
}

/* ==========================================================
   ANIMATION
========================================================== */
@keyframes review-dialog-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0.8;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.hero-video {
  position: relative;
  overflow: hidden;
  height: 100vh;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.12) 63.89%, #000 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.hero-video .bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: -9999;
}
.hero-video img {
  max-width: 72px;
}
@media (min-width: 1024px) {
  .hero-video img {
    max-width: 88px;
  }
}
@media (min-width: 1440px) {
  .hero-video img {
    max-width: 104px;
  }
}
@media (min-width: 1440px) {
  .hero-video img {
    max-width: 128px;
  }
}

.coming-soon-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
@media (min-width: 768px) {
  .coming-soon-container {
    gap: 32px;
  }
}

.coming-soon-title-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.coming-soon-info-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}
@media (min-width: 1024px) {
  .coming-soon-info-container {
    flex-direction: row;
    justify-content: space-between;
  }
}
.coming-soon-info-container .introduction {
  color: var(--body-text-color-neutral-light, #FFF);
  text-shadow: 0px 0px 44px rgba(0, 0, 0, 0.32);
  font-family: Swiza;
  font-size: 16px;
  line-height: normal;
  font-style: normal;
  font-weight: 400;
  max-width: 204px;
}
@media (min-width: 768px) {
  .coming-soon-info-container .introduction {
    font-size: 24px;
    line-height: 32px;
    max-width: 304px;
  }
}
.coming-soon-info-container .stay-tuned {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}
@media (min-width: 1024px) {
  .coming-soon-info-container .stay-tuned {
    height: 96px;
    justify-content: space-between;
  }
}
.coming-soon-info-container .stay-tuned .label {
  color: var(--body-text-color-neutral-light, #FFF);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "liga" off, "clig" off;
  text-shadow: 0px 0px 44px rgba(0, 0, 0, 0.32);
  font-family: Swiza;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
}
@media (min-width: 768px) {
  .coming-soon-info-container .stay-tuned .label {
    font-size: 20px;
    line-height: 32px;
  }
}
.coming-soon-info-container .stay-tuned .contact-container {
  display: flex;
  width: 147px;
  align-items: center;
  gap: 8px;
}
.coming-soon-info-container .stay-tuned .contact-container .social-badge {
  display: flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: var(--corner-radius-full, 25rem);
  background: var(--body-fill-color-neutral-light, #FFF);
}
.coming-soon-info-container .stay-tuned .contact-container .social-badge:hover {
  background: var(--body-fill-color-brand-dark);
}
.coming-soon-info-container .stay-tuned .contact-container .social-badge:focus {
  background: var(--body-fill-color-brand-dark);
}/*# sourceMappingURL=style.css.map */
/* ==========================================================
   ACCESSIBILITÀ — Riduzione movimento
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  video[autoplay] {
    display: none;
  }
}

/* ==========================================================
   ACCESSIBILITÀ — Skip to content
   ========================================================== */
.skip-to-content {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 0;
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* =====================================================
   Recommended Bikes Block
   ===================================================== */
.recommended-bikes {
  width: 100%;
  color: #fff;
  gap: 52px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .recommended-bikes {
    gap: 64px;
  }
}
@media (min-width: 1024px) {
  .recommended-bikes {
    gap: 72px;
  }
}
@media (min-width: 1440px) {
  .recommended-bikes {
    gap: 96px;
  }
}
.recommended-bikes__inner {
  display: grid;
  padding: 0 20px;
  row-gap: 24px;
  column-gap: 24px;
  align-self: stretch;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .recommended-bikes__inner {
    padding: 0 64px;
  }
}
@media (min-width: 1024px) {
  .recommended-bikes__inner {
    padding: 0 var(--spacing-3xl);
  }
}
@media (min-width: 1920px) {
  .recommended-bikes__inner {
    padding: 0 192px;
  }
}
.recommended-bikes__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  grid-column: span 12;
  justify-self: stretch;
}
@media (min-width: 1024px) {
  .recommended-bikes__header {
    grid-column: span 8;
  }
}
.recommended-bikes__text {
  max-width: 1024px;
}
.recommended-bikes__text:last-child {
  margin-bottom: 0;
}
.recommended-bikes__cta {
  grid-column: span 12;
  margin-top: 24px;
  display: flex;
}
@media (min-width: 1024px) {
  .recommended-bikes__cta {
    grid-column: span 4;
    justify-content: end;
    align-items: end;
  }
}
.recommended-bikes__inner-list {
  display: grid;
  align-self: stretch;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.recommended-bikes__list {
  grid-column: span 12;
  display: flex;
}
/* Owl: larghezza card bike nel carousel */
.recommended-bikes__list .owl-item .bike-card {
  padding: 0 8px;
}


/* ======================================================
   BLOG — ARCHIVE
====================================================== */

.blog-archive__intro {
  background: var(--body-background-color-brand-dark);
  padding: 140px 20px 80px;
}
@media (min-width: 768px) {
  .blog-archive__intro {
    padding: 160px 64px 100px;
  }
}
@media (min-width: 1920px) {
  .blog-archive__intro {
    padding: 180px 96px 120px;
  }
}

.blog-archive__intro-inner {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-archive__label {
  color: var(--body-text-color-brand-primary);
}

.blog-archive__title {
  margin: 0;
  color: var(--body-text-color-neutral-light);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.blog-archive__desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  max-width: 540px;
}

/* Grid section */
.blog-archive__grid-section {
  padding: 64px 20px 80px;
}
@media (min-width: 768px) {
  .blog-archive__grid-section {
    padding: 80px 64px 100px;
  }
}
@media (min-width: 1920px) {
  .blog-archive__grid-section {
    padding: 100px 96px 120px;
  }
}

.blog-archive__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 40px;
}
@media (min-width: 768px) {
  .blog-archive__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 64px 48px;
  }
}
@media (min-width: 1440px) {
  .blog-archive__grid {
    gap: 80px 64px;
  }
}

/* ── Editorial staggered layout (1024px+) ── */
@media (min-width: 1024px) {
  .blog-archive__grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 80px 32px;
    align-items: start;
  }

  /* ── Cycle position 1: left card of first pair ── */
  .blog-archive__grid .blog-card:nth-child(5n+1) {
    grid-column: 1 / span 5;
    margin-top: 0;
  }

  /* ── Cycle position 2: right card of first pair (heavy stagger) ── */
  .blog-archive__grid .blog-card:nth-child(5n+2) {
    grid-column: 7 / span 5;
    margin-top: 80px;
  }

  /* ── Cycle position 3: solo wide card (left-biased) ── */
  .blog-archive__grid .blog-card:nth-child(5n+3) {
    grid-column: 1 / span 7;
  }

  /* ── Cycle position 4: left card of second pair ── */
  .blog-archive__grid .blog-card:nth-child(5n+4) {
    grid-column: 1 / span 5;
    margin-top: 0;
  }

  /* ── Cycle position 5: right card of second pair (light stagger) ── */
  .blog-archive__grid .blog-card:nth-child(5n+0) {
    grid-column: 7 / span 5;
    margin-top: 40px;
  }

  /* ── Every other solo card: right-biased (positions 8, 18, 28…) ── */
  .blog-archive__grid .blog-card:nth-child(10n+8) {
    grid-column: 4 / span 7;
  }
}

/* Pagination */
.blog-archive__pagination {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.blog-archive__pagination .nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}
.blog-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.blog-archive__pagination .page-numbers.current,
.blog-archive__pagination .page-numbers:hover {
  background: var(--body-background-color-brand-primary);
  color: #fff;
  border-color: var(--body-background-color-brand-primary);
}
.blog-archive__pagination .page-numbers.dots {
  border: none;
  background: transparent;
}

/* Empty state */
.blog-archive__empty {
  padding: 80px 20px;
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
}


/* ======================================================
   BLOG CARD
====================================================== */

.blog-card__link {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* Media */
.blog-card__media {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 16 / 10;
  background: rgba(0, 0, 0, 0.06);
}

.blog-card__img {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: scale 0.55s ease;
  will-change: transform, scale;
}

/* Overlay scuro sulle immagini */
.blog-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.54) 0%, rgba(0, 0, 0, 0) 50%, #000 100%);
  pointer-events: none;
}
@media (hover: hover) {
  .blog-card:hover .blog-card__img {
    scale: 1.04;
  }
}

/* Content */
.blog-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* Meta */
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-card__category {
  color: var(--body-text-color-brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.blog-card__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.blog-card__read-time {
  color: rgba(0, 0, 0, 0.4);
}

/* Title */
.blog-card__title {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  transition: color 0.2s ease;
}
@media (hover: hover) {
  .blog-card:hover .blog-card__title {
    color: var(--body-text-color-brand-primary);
  }
}

/* Excerpt */
.blog-card__excerpt {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.55);
}

/* Footer */
.blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.blog-card__date {
  color: rgba(0, 0, 0, 0.4);
}

.blog-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.blog-card__arrow svg {
  fill: currentColor;
}
@media (hover: hover) {
  .blog-card:hover .blog-card__arrow {
    background: var(--body-background-color-brand-primary);
    border-color: var(--body-background-color-brand-primary);
    color: #fff;
  }
}


/* ======================================================
   SINGLE POST — HERO (layout split sx/dx)
====================================================== */

/* Wrapper section */
.post-hero {
  background: #000;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .post-hero {
    display: grid;
    grid-template-columns: 6fr 6fr;
    min-height: 100vh;
    min-height: 100svh;
  }
}

/* ── Colonna sinistra: contenuto ── */
.post-hero__content {
  display: flex;
  flex-direction: column;
  padding: 72px 20px 48px;
}
@media (min-width: 768px) {
  .post-hero__content {
    padding: 180px 64px 60px;
  }
}
@media (min-width: 1920px) {
  .post-hero__content {
    padding: 180px 96px 80px;
  }
}

/* Gruppo superiore: breadcrumb + meta + titolo */
.post-hero__top {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

/* Breadcrumb */
.post-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: #fff;
}
.post-hero__breadcrumb a {
  color: var(--body-text-color-brand-primary);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}
.post-hero__breadcrumb a:hover {
  opacity: 0.75;
}
.post-hero__breadcrumb [aria-current="page"] {
  color: #fff;
  font-weight: 400;
}

/* Meta */
.post-hero__meta {
  display: none;
}
.post-hero__meta-hidden {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.post-hero__category {
  color: var(--body-text-color-brand-primary);
  font-weight: 500;
}
.post-hero__divider {
  opacity: 0.35;
}

/* Title */
.post-hero__title {
  margin: 0;
  color: var(--body-text-color-neutral-light);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Excerpt sotto il titolo */
.post-hero__excerpt {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.6;
  max-width: 520px;
}

/* Scroll-down — eredita stile da .scroll-to-discover, override posizione */
.post-hero__scroll-down {
  position: static;
  transform: none;
  top: auto;
  left: auto;
  margin-top: auto;
  padding-top: 48px;
  justify-content: flex-start;
}

/* ── Colonna destra: immagine ── */
.post-hero__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(0, 0, 0, 0.08);
}
@media (min-width: 768px) {
  .post-hero__media {
    aspect-ratio: auto;
    height: 100vh;
    height: 100svh;
  }
}

.post-hero__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.post-hero__overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* scuro in alto (menu leggibile) + sfuma verso il nero in basso */
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 35%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, #000 100%);
  pointer-events: none;
}

/* Variante senza immagine: header full-width come prima */
.post-hero--no-image .post-hero__content {
  max-width: 840px;
}


/* ======================================================
   SINGLE POST — BODY
====================================================== */

.post-body {
  padding: 64px 20px 80px;
}
@media (min-width: 768px) {
  .post-body {
    padding: 80px 64px 100px;
  }
}

.post-body__inner {
  max-width: 720px;
  margin: 0 auto;
}

.post-body__content {
  font-size: 18px;
  line-height: 1.8;
}
@media (min-width: 768px) {
  .post-body__content {
    font-size: 19px;
  }
}
@media (min-width: 1280px) {
  .post-body__content {
    font-size: 20px;
  }
}

.post-body__content h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 2.2em 0 0.6em;
}

.post-body__content h3 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 1.8em 0 0.5em;
}

.post-body__content p {
  margin: 0 0 1.5em;
}
.post-body__content p:last-child {
  margin-bottom: 0;
}

.post-body__content a {
  color: var(--body-text-color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-body__content img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 2em 0;
  display: block;
}

.post-body__content ul,
.post-body__content ol {
  padding-left: 1.5em;
  margin: 0 0 1.5em;
}
.post-body__content li {
  margin-bottom: 0.5em;
}

/* Pull quote */
.post-body__content blockquote {
  margin: 2.5em 0;
  padding: 0 0 0 24px;
  border-left: 3px solid var(--body-background-color-brand-primary);
  font-size: 1.15em;
  font-style: italic;
  color: rgba(0, 0, 0, 0.6);
}
.post-body__content blockquote p {
  margin: 0;
}

/* Figure / caption */
.post-body__content figure {
  margin: 2em 0;
}
.post-body__content figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
}

/* HR */
.post-body__content hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  margin: 2.5em 0;
}


/* ======================================================
   SINGLE POST — RELATED
====================================================== */

.post-related {
  padding: 0 20px 80px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
  .post-related {
    padding: 0 64px 100px;
  }
}
@media (min-width: 1920px) {
  .post-related {
    padding: 0 96px 120px;
  }
}

.post-related__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.post-related__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 56px;
}
.post-related__header .label-section-regular {
  color: var(--body-text-color-brand-primary);
}
.post-related__title {
  margin: 0;
}

.post-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px 40px;
}
@media (min-width: 640px) {
  .post-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 56px 48px;
  }
}
@media (min-width: 1024px) {
  .post-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ======================================================
   POST EDITORIAL BLOCKS — variabili comuni
====================================================== */

/* Padding orizzontale condiviso da tutti i post-block */
.post-title-text,
.post-offset-images,
.post-image,
.post-text,
.post-text-columns,
.post-news-banner {
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .post-title-text,
  .post-offset-images,
  .post-image,
  .post-text,
  .post-text-columns,
  .post-news-banner {
    padding-inline: 64px;
  }
}
@media (min-width: 1920px) {
  .post-title-text,
  .post-offset-images,
  .post-image,
  .post-text,
  .post-text-columns,
  .post-news-banner {
    padding-inline: 96px;
  }
}

/* Immagine full: rimuove padding laterale */
.post-image--full {
  padding-inline: 0;
}


/* ======================================================
   POST TITLE + TEXT
====================================================== */

.post-title-text {
  padding-block: 64px;
}
@media (min-width: 768px) {
  .post-title-text {
    padding-block: 80px;
  }
}
@media (min-width: 1280px) {
  .post-title-text {
    padding-block: 100px;
  }
}

.post-title-text__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 1024px) {
  .post-title-text__inner {
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
  }
}

.post-title-text__title {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.post-title-text__text {
  color: rgba(0, 0, 0, 0.65);
}
.post-title-text__text p {
  margin: 0 0 1.2em;
}
.post-title-text__text p:last-child {
  margin-bottom: 0;
}


/* ======================================================
   POST OFFSET IMAGES
====================================================== */

.post-offset-images {
  padding-block: 64px;
}
@media (min-width: 768px) {
  .post-offset-images {
    padding-block: 80px;
  }
}
@media (min-width: 1280px) {
  .post-offset-images {
    padding-block: 100px;
  }
}

.post-offset-images__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .post-offset-images__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    align-items: start;
  }
}

.post-offset-images__wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  will-change: translate;
}

/* Seconda immagine sfalsata verso il basso */
@media (min-width: 768px) {
  .post-offset-images__wrap--2 {
    margin-top: 80px;
  }
}
@media (min-width: 1280px) {
  .post-offset-images__wrap--2 {
    margin-top: 120px;
  }
}

.post-offset-images__img {
  width: 100%;
  height: auto;
  display: block;
  will-change: translate;
}

.post-offset-images__caption {
  margin-top: 20px;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
}


/* ======================================================
   POST IMAGE
====================================================== */

.post-image {
  padding-block: 64px;
}
@media (min-width: 768px) {
  .post-image {
    padding-block: 80px;
  }
}

.post-image__wrap {
  overflow: hidden;
  border-radius: 8px;
}
.post-image--full .post-image__wrap {
  border-radius: 0;
}

.post-image__img {
  width: 100%;
  height: auto;
  display: block;
}

.post-image__caption {
  margin-top: 16px;
  color: rgba(0, 0, 0, 0.4);
  text-align: center;
}


/* ======================================================
   POST TEXT (colonna singola)
====================================================== */

.post-text {
  padding-block: 64px;
}
@media (min-width: 768px) {
  .post-text {
    padding-block: 80px;
  }
}

.post-text__inner {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Variante centrata */
.post-text--center .post-text__inner {
  margin-inline: auto;
  text-align: center;
}

.post-text__title {
  margin: 0;
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.post-text__body {
  color: rgba(0, 0, 0, 0.65);
}
.post-text__body p {
  margin: 0 0 1.2em;
}
.post-text__body p:last-child {
  margin-bottom: 0;
}


/* ======================================================
   POST TEXT COLUMNS (titolo sx + testo dx)
====================================================== */

.post-text-columns {
  padding-block: 64px;
}
@media (min-width: 768px) {
  .post-text-columns {
    padding-block: 80px;
  }
}
@media (min-width: 1280px) {
  .post-text-columns {
    padding-block: 100px;
  }
}

.post-text-columns__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
@media (min-width: 1024px) {
  .post-text-columns__inner {
    gap: 48px;
  }
}

.post-text-columns__title {
  margin: 0;
  color: #000;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.post-text-columns__text {
  color: rgba(0, 0, 0, 0.65);
}
@media (min-width: 1024px) {
  .post-text-columns__text {
    column-count: 2;
    column-gap: 80px;
  }
}
.post-text-columns__text p {
  margin: 0 0 1.2em;
}
.post-text-columns__text p:last-child {
  margin-bottom: 0;
}


/* ======================================================
   POST NEWS BANNER (slider articoli correlati)
====================================================== */

.post-news-banner {
  padding-block: 80px;
  background: #000;
}
@media (min-width: 768px) {
  .post-news-banner {
    padding-block: 100px;
  }
}

.post-news-banner__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.post-news-banner__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.post-news-banner__label {
  color: var(--body-text-color-brand-primary);
}

.post-news-banner__title {
  margin: 0;
  color: var(--body-text-color-neutral-light);
}

/* Slider: card con sfondo chiaro su dark background */
.post-news-banner .blog-card__title {
  color: var(--body-text-color-neutral-light);
}
.post-news-banner .blog-card__excerpt {
  color: rgba(255, 255, 255, 0.5);
}
.post-news-banner .blog-card__date,
.post-news-banner .blog-card__read-time {
  color: rgba(255, 255, 255, 0.35);
}
.post-news-banner .blog-card__dot {
  background: rgba(255, 255, 255, 0.2);
}
.post-news-banner .blog-card__footer {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.post-news-banner .blog-card__arrow {
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Owl: 2.1 card visibili + peek */
.post-news-banner__slider .owl-item {
  padding-right: 24px;
}
@media (min-width: 768px) {
  .post-news-banner__slider .owl-item {
    padding-right: 32px;
  }
}


/* ======================================================
   POST EDITORIAL BLOCKS — sfondo nero, testi bianchi
====================================================== */

.post-title-text,
.post-offset-images,
.post-image,
.post-text,
.post-text-columns,
.post-body,
.post-related {
  background: #000;
  color: #fff;
}

/* Testi secondari: bianco a opacità ridotta */
.post-title-text__text,
.post-text__body,
.post-text-columns__text {
  color: rgba(255, 255, 255, 0.65);
}

/* Titoli: bianco pieno */
.post-title-text__title,
.post-text__title,
.post-text-columns__title {
  color: #fff;
}

/* Caption */
.post-image__caption,
.post-offset-images__caption {
  color: rgba(255, 255, 255, 0.4);
}

/* Bordi su sfondo scuro */
.post-text-columns {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.post-related {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* Body content editoriale su sfondo nero */
.post-body__content {
  color: rgba(255, 255, 255, 0.85);
}
.post-body__content h2,
.post-body__content h3 {
  color: #fff;
}
.post-body__content blockquote {
  color: rgba(255, 255, 255, 0.55);
}
.post-body__content hr {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.post-body__content figcaption {
  color: rgba(255, 255, 255, 0.4);
}

/* Blog card footer divider in related */
.post-related .blog-card__footer {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.post-related .blog-card__title {
  color: #fff;
}
.post-related .blog-card__excerpt {
  color: rgba(255, 255, 255, 0.5);
}
.post-related .blog-card__date,
.post-related .blog-card__read-time {
  color: rgba(255, 255, 255, 0.35);
}
.post-related .blog-card__dot {
  background: rgba(255, 255, 255, 0.2);
}
.post-related .blog-card__arrow {
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.post-related__header .label-section-regular {
  color: var(--body-text-color-brand-primary);
}
.post-related__title {
  color: #fff;
}


/* ======================================================
   BLOG CARD — nascondi meta e footer
====================================================== */

.blog-card__meta,
.blog-card__footer {
  display: none;
}

/* (rule moved into .post-hero__breadcrumb block above) */