/* styles/fonts.css */
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-01.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-02.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-03.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-01.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-02.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-03.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-01.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-02.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-03.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-01.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-02.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-03.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-01.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-02.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-03.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/font-04.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/font-05.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/font-06.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/font-07.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/font-08.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/font-09.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/font-10.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/font-11.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/font-12.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/font-13.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/font-14.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/font-15.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/font-16.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/font-17.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/font-18.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-19.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-20.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-21.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-22.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-23.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-24.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-19.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-20.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-21.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-22.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-23.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-24.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-19.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-20.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-21.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-22.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-23.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-24.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-19.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-20.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-21.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-22.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-23.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../assets/fonts/font-24.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* styles/tokens.css */
/* SOURCE BRAND RULE; responsive additions are mapped in WEB_EXTENSIONS.md. */
:root {
  --color-primary: #FECC00; /* v1.1 (06/10/2026): the yellow of the mark as the main accent; v1.0 was #D8A400 */
  --color-signal-red: #B3261E; /* v1.2 (07/10/2026): signal red, only for the «AFFARE» banner of the Usato cards of the homepage (white text 6.4:1) */
  --color-vertex: #106B73; /* v1.3 (07/10/2026): the Vertex teal (main vector fill of the official Vertex catalogue), only where Vertex is spoken of: rules, solid buttons, accents, labels, selected states; white text 6.2:1; never thin text on ink */
  --color-ink: #22262A;
  --color-surface: #FAFAF8;
  --color-container: #FFFFFF;
  --color-cover-sheet: #FDFEF9;
  --color-gold-text: #8A6A00;
  --color-gold-hover: #5E4800;
  --color-gold-kpi: #B78A00;
  --color-photo-bg: #3A2C00;
  --ink-85: rgba(34,38,42,.85);
  --ink-74: rgba(34,38,42,.74);
  --ink-62: rgba(34,38,42,.62);
  --ink-50: rgba(34,38,42,.50);
  --ink-35: rgba(34,38,42,.35);
  --ink-20: rgba(34,38,42,.20);
  --ink-image: rgba(34,38,42,.16);
  --white-section-number: rgba(255,255,255,.17);
  --rule-yellow-sub: rgba(216,164,0,.45);
  --rule-ink-sub: rgba(34,38,42,.45);
  --text-body: var(--ink-85);
  --text-secondary: var(--ink-74);
  --text-label: var(--ink-74);
  --font-display: 'Archivo', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-label: 600;
  --weight-bold: 700;
  --weight-heavy: 800;
  --text-display: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
  --text-h1: clamp(3rem, 2.5rem + 1.25vw, 3.5rem);
  --text-h2: clamp(2rem, 1.625rem + 1.5vw, 2.75rem);
  --text-h3: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-h4: 1.25rem;
  --text-lead: clamp(1.125rem, 1rem + .5vw, 1.25rem);
  --text-body-size: 1rem;
  --text-small: .875rem;
  --text-eyebrow: .875rem;
  --text-label-size: .875rem;
  --text-metadata: .75rem;
  --text-technical: clamp(1.625rem, 1.25rem + 1.5vw, 2.125rem);
  --text-unit: 1rem;
  --text-navigation: 1rem;
  --text-data-mobile: 1.5rem;
  --text-section-number: clamp(9.375rem, 6rem + 12vw, 17.5rem);
  --lh-body: 1.6;
  --lh-heading: 1.1;
  --lh-display: 1.02;
  --lh-label: 1.5;
  --ls-label: .14em;
  --ls-eyebrow: .16em;
  --ls-title-cover: -.03em;
  --ls-title-card: -.015em;
  --ls-section-number: -.05em;
  --ls-data: .09em;
  --link-underline-offset: .2em;
  --space-1: .5rem; /* 8 */
  --space-2: .75rem; /* 12 */
  --space-3: 1rem; /* 16 */
  --space-4: 1.25rem; /* 20 */
  --space-5: 1.625rem; /* 26 */
  --space-6: 2.125rem; /* 34 */
  --space-7: 2.625rem; /* 42 */
  --space-8: 3rem; /* 48 */
  --space-9: 4.25rem; /* 2 × 34 */
  --space-10: 6rem; /* 2 × 48 */
  --page-padding: clamp(1rem, 4vw, 3rem);
  --grid-gap: clamp(1rem, 2.5vw, 2.125rem);
  --section-space: clamp(3rem, 7vw, 6rem);
  --container-max: 1200px;
  --text-max: 42.5rem;
  --hero-lead-max: 32rem;
  --photo-min-height: 34rem;
  --table-min-width: 30rem;
  --textarea-min-height: 8rem;
  --data-label-min-height: 3em;
  --title-backing-block: .08em;
  --title-backing-inline: .16em;
  --ratio-range: 2.56;
  --ratio-context: 1.6;
  --border-width: 1px;
  --rule-width: 2px;
  --rule-gap: 3px;
  --card-edge: 8px;
  --radius: 0;
  --radius-logo: 6px;
  --border: var(--border-width) solid var(--ink-20);
  --border-control: var(--border-width) solid var(--ink-62);
  --shadow-card: 0 6px 16px rgba(80,58,0,.18);
  --shadow-title-yellow: 0 2px 10px rgba(90,66,0,.3);
  --shadow-range: 0 18px 22px rgba(0,0,0,.45);
  --photo-fade: linear-gradient(180deg, transparent 0%, var(--ink-85) 65%, var(--color-ink) 100%);
  --focus-width: 2px;
  --focus-gap: 3px;
  --target-min: 2.75rem;
  --logo-compact-width: 5.25rem;
  --logo-full-width: 12rem;
  --z-content: 1;
  --z-skip: 10;
}

/* styles/reset.css */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--color-surface); color: var(--text-body); overflow-wrap: anywhere; }
h1, h2, h3, h4, p, figure, dl { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; border-radius: var(--radius); }
button, a, input, textarea, select { -webkit-tap-highlight-color: var(--ink-20); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--focus-width) solid var(--color-ink); outline-offset: var(--focus-gap); }
:target { scroll-margin-top: var(--space-5); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (forced-colors: active) { :focus-visible { outline-color: Highlight; } .button, .card, .data-strip, .logo-box { border: var(--border-width) solid CanvasText; } }

/* styles/typography.css */
body { font: var(--weight-normal) var(--text-body-size)/var(--lh-body) var(--font-body); font-synthesis: none; }
h1, h2, h3, h4, .heading { color: var(--color-ink); font-family: var(--font-display); font-weight: var(--weight-heavy); line-height: var(--lh-heading); letter-spacing: var(--ls-title-card); overflow-wrap: anywhere; }
h1, .type-h1 { font-size: var(--text-h1); letter-spacing: var(--ls-title-cover); }
h2, .type-h2 { font-size: var(--text-h2); }
h3, .type-h3 { font-size: var(--text-h3); }
h4, .type-h4 { font-size: var(--text-h4); }
.display { font: var(--weight-heavy) var(--text-display)/var(--lh-display) var(--font-display); letter-spacing: var(--ls-title-cover); color: var(--color-ink); }
.lead { font-size: var(--text-lead); line-height: var(--lh-body); }
.small { font-size: var(--text-small); }
.eyebrow, .label { font: var(--weight-label) var(--text-label-size)/var(--lh-label) var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-label); }
.eyebrow { font-size: var(--text-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--color-gold-text); }
.metadata { font: var(--weight-medium) var(--text-metadata)/var(--lh-label) var(--font-mono); color: var(--text-secondary); }
.technical-value { font: var(--weight-heavy) var(--text-technical)/var(--lh-heading) var(--font-display); color: var(--color-ink); font-variant-numeric: tabular-nums; max-width: 100%; overflow-wrap: anywhere; }
.technical-unit { font: var(--weight-label) var(--text-unit)/var(--lh-label) var(--font-display); color: var(--text-secondary); }
.payoff { font-family: var(--font-body); font-weight: var(--weight-bold); }
.muted { color: var(--text-secondary); }
/* v1.1 (06/10/2026): links are ink text with the brand yellow as the rule under them; gold text only as a small, heavy accent. */
a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; text-underline-offset: var(--link-underline-offset); }
/* v1.4 (08/10/2026): same look, lower specificity — a component that gives its own link a colour (e.g. light text on an ink surface)
   keeps it on hover; before, this rule (0,1,1) beat it and the text disappeared, ink on ink. */
:where(a):hover { color: var(--color-ink); text-decoration-color: var(--color-ink); }
.text-link { display: inline-flex; align-items: center; min-height: var(--target-min); font-weight: var(--weight-label); }
.prose { max-width: var(--text-max); text-align: start; }
.prose > * + *, .stack > * + * { margin-top: var(--space-4); }
.stack-tight > * + * { margin-top: var(--space-2); }

/* styles/layout.css */
.site-container { width: calc(100% - 2 * var(--page-padding)); max-width: var(--container-max); margin-inline: auto; }
.full-bleed { width: 100%; }
.text-container { max-width: var(--text-max); }
.section { padding-block: var(--section-space); }
.section + .section { border-top: var(--border); }
.grid { display: grid; gap: var(--grid-gap); }
.grid > *, .split > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-8); }
.section-heading { padding-bottom: var(--space-6); }
.section-heading .eyebrow { margin-bottom: var(--space-2); }
.section-heading p { max-width: var(--text-max); margin-top: var(--space-3); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.spread { justify-content: space-between; }
.space-before { margin-top: var(--space-6); }
.space-after { margin-bottom: var(--space-6); }
.surface-white { background: var(--color-container); }
.surface-yellow { background: var(--color-primary); color: var(--color-ink); }
.surface-yellow .eyebrow, .surface-yellow .label { color: var(--color-ink); }
.rule { border: 0; border-top: var(--rule-width) solid var(--color-ink); margin-block: var(--space-5); }
.rule-yellow { border-color: var(--color-primary); }
.rule-dotted { border-top: var(--border-width) dotted var(--ink-35); }
.double-rule { height: calc(var(--rule-width) + var(--rule-gap) + var(--border-width)); border-top: var(--rule-width) solid var(--color-primary); border-bottom: var(--border-width) solid var(--rule-yellow-sub); }
.surface-yellow .double-rule { border-top-color: var(--color-ink); border-bottom-color: var(--rule-ink-sub); }

/* styles/components.css */
.skip-link { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--page-padding); padding: var(--space-3); background: var(--color-container); color: var(--color-ink); z-index: var(--z-skip); }
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.site-header { background: var(--color-container); border-bottom: var(--rule-width) solid var(--color-ink); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-5); }
.logo-box { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-3); background: var(--color-container); border: var(--border-width) solid var(--color-ink); border-radius: var(--radius-logo); flex-shrink: 0; }
.logo-box img { height: auto; width: var(--logo-compact-width); }
.logo-box-full img { width: var(--logo-full-width); }
.header-signature { margin-right: auto; color: var(--color-ink); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--target-min); font-size: var(--text-navigation); color: var(--color-ink); border-bottom: var(--rule-width) solid transparent; }
.site-nav a[aria-current=page] { border-bottom-color: var(--color-ink); }
.button.menu-toggle { display: none; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: var(--space-2) var(--space-5); background: var(--color-primary); color: var(--color-ink); border: var(--border-width) solid var(--color-ink); border-radius: var(--radius); font: var(--weight-label) var(--text-body-size)/var(--lh-label) var(--font-body); text-align: center; }
.button:hover, .button.is-hover { background: var(--color-ink); color: var(--color-container); text-decoration: none; }
.button.is-focus { outline: var(--focus-width) solid var(--color-ink); outline-offset: var(--focus-gap); }
.button:disabled { background: var(--ink-20); color: var(--ink-74); border-color: var(--ink-35); }
.button-secondary { background: var(--color-container); }
.button { max-width: 100%; overflow-wrap: anywhere; white-space: normal; text-decoration: none; } /* v1.1: buttons never underline */
.hero-industrial { background: var(--color-primary); color: var(--color-ink); }
.hero-topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); border-bottom: var(--border-width) solid var(--ink-50); padding-block: var(--space-4); }
.hero-topline .metadata, .hero-topline .label, .hero-industrial .eyebrow { color: var(--color-ink); }
.hero-copy { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); padding-top: var(--space-7); align-items: end; }
.hero-copy > * { min-width: 0; }
.hero-copy h1, .hero-copy h2 { text-transform: uppercase; }
.hero-copy .lead { max-width: var(--hero-lead-max); }
.hero-copy .button { margin-top: var(--space-4); background: var(--color-ink); color: var(--color-container); }
.hero-copy .button:hover { background: var(--color-container); color: var(--color-ink); }
.range-image { width: 100%; height: auto; object-fit: contain; object-position: center bottom; filter: drop-shadow(var(--shadow-range)); }
.hero-range { padding-block: var(--space-6) var(--space-7); }
.hero-bottom { padding-block: var(--space-3) var(--space-4); border-top: var(--rule-width) solid var(--color-ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }
.hero-bottom .metadata { color: var(--color-ink); }
.card { background: var(--color-container); border-left: var(--card-edge) solid var(--color-ink); box-shadow: var(--shadow-card); border-radius: var(--radius); padding: var(--space-5); }
.product-card { display: flex; flex-direction: column; gap: var(--space-4); }
.product-card .text-link { align-self: flex-start; margin-top: auto; }
.product-code { color: var(--color-ink); font: var(--weight-bold) var(--text-h4)/var(--lh-heading) var(--font-display); overflow-wrap: anywhere; }
.product-name { font: var(--weight-medium) var(--text-lead)/var(--lh-label) var(--font-body); color: var(--text-secondary); }
.product-image { background: var(--color-container); border: var(--border-width) solid var(--ink-image); padding: var(--space-3); }
.product-image img { width: 100%; aspect-ratio: var(--ratio-range); object-fit: contain; object-position: center; }
.data-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--border-width); background: var(--ink-20); border-block: var(--border-width) solid var(--ink-50); }
.data-strip > div { min-width: 0; background: var(--color-surface); padding: var(--space-5) var(--space-3); }
.data-strip dt { font: var(--weight-label) var(--text-label-size)/var(--lh-label) var(--font-mono); letter-spacing: var(--ls-data); text-transform: uppercase; min-height: var(--data-label-min-height); color: var(--text-label); }
.data-strip dd { margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); }
.section-divider { background: var(--color-primary); position: relative; isolation: isolate; padding-block: var(--space-9); overflow: hidden; color: var(--color-ink); }
.section-divider .site-container { position: relative; }
.section-number { position: absolute; top: 0; right: 0; font: var(--weight-heavy) var(--text-section-number)/1 var(--font-display); letter-spacing: var(--ls-section-number); color: var(--white-section-number); pointer-events: none; z-index: -1; }
.section-divider .eyebrow { color: var(--color-ink); margin-bottom: var(--space-3); }
.section-divider h2 { color: var(--color-container); text-shadow: var(--shadow-title-yellow); text-transform: uppercase; }
/* WEB EXTENSION — ACCESSIBILITY: local ink backing preserves white title. */
.section-divider h2 span { background: var(--color-ink); padding: var(--title-backing-block) var(--title-backing-inline); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.section-divider p { margin-top: var(--space-5); max-width: var(--text-max); }
.photo-hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: var(--photo-min-height); background: var(--color-photo-bg); color: var(--color-container); }
.photo-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; z-index: -2; }
.photo-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--photo-fade); }
.photo-caption { padding-block: var(--space-7); }
.photo-caption h2, .photo-caption .eyebrow { color: var(--color-container); }
.photo-caption .prose { margin-top: var(--space-3); }
.context-photo { background: var(--color-photo-bg); }
.context-photo img { width: 100%; aspect-ratio: var(--ratio-context); object-fit: cover; object-position: 50% 70%; }
.context-photo figcaption { padding: var(--space-3); background: var(--color-container); }
.table-scroll { overflow-x: auto; border-block: var(--border); }
.technical-table { border-collapse: collapse; width: 100%; min-width: var(--table-min-width); background: var(--color-container); text-align: left; }
.technical-table caption { text-align: left; padding: var(--space-4); font-weight: var(--weight-label); }
.technical-table th, .technical-table td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) dotted var(--ink-35); }
.technical-table thead th { font: var(--weight-label) var(--text-label-size)/var(--lh-label) var(--font-mono); text-transform: uppercase; letter-spacing: var(--ls-label); border-bottom: var(--border-width) solid var(--ink-62); }
.technical-table tbody th { font-weight: var(--weight-medium); }
.table-number { font-family: var(--font-display); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.cta-band { border-block: var(--rule-width) solid var(--color-ink); padding: var(--space-7); background: var(--color-primary); color: var(--color-ink); }
.cta-band h2 { max-width: var(--text-max); }
.cta-band .label { color: var(--color-ink); }
.site-footer { padding-block: var(--space-8); background: var(--color-container); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-8); padding-block: var(--space-6); }
.footer-grid p, .footer-grid a, .footer-bottom { font: var(--weight-normal) var(--text-metadata)/var(--lh-body) var(--font-mono); overflow-wrap: anywhere; }
.footer-grid .payoff { font-family: var(--font-body); font-weight: var(--weight-bold); }
.footer-grid .label { color: var(--color-ink); margin-bottom: var(--space-3); }
.footer-links a { display: flex; align-items: center; min-height: var(--target-min); }
.footer-bottom { border-top: var(--border); padding-top: var(--space-4); }
.index-list { list-style: none; padding: 0; margin: 0; }
.index-list a { display: flex; justify-content: space-between; gap: var(--space-3); min-height: var(--target-min); align-items: baseline; padding-block: var(--space-2); border-bottom: var(--border-width) dotted var(--ink-35); color: var(--color-ink); }
.index-list span { font-family: var(--font-mono); font-size: var(--text-small); color: var(--text-secondary); }

/* styles/forms.css */
/* WEB EXTENSION — FORMS. No network submission in the laboratory. */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label, .form-legend { font: var(--weight-label) var(--text-label-size)/var(--lh-label) var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-ink); }
.form-legend { margin-bottom: var(--space-4); max-width: 100%; }
.field input, .field select, .field textarea { width: 100%; min-height: var(--target-min); border: var(--border-control); padding: var(--space-2) var(--space-3); background: var(--color-container); color: var(--color-ink); }
.field textarea { resize: vertical; min-height: var(--textarea-min-height); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-74); opacity: 1; }
.field :disabled { color: var(--ink-74); background: var(--color-surface); cursor: not-allowed; }
.field [aria-invalid=true] { border: var(--rule-width) solid var(--color-ink); }
.field-error { font-weight: var(--weight-label); color: var(--color-ink); border-left: var(--rule-width) solid var(--color-ink); padding-left: var(--space-2); }
.check-label { display: flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); cursor: pointer; }
.check-label input { appearance: none; flex: 0 0 var(--space-4); width: var(--space-4); height: var(--space-4); margin: 0; border: var(--border-control); background: var(--color-container); }
.check-label input:checked { background: var(--color-ink); background-clip: content-box; padding: var(--rule-gap); }
.form-status { padding-block: var(--space-3); }

/* styles/responsive.css */
/* Content breakpoints: four data cells / three specimens; header links; forms. */
@media (max-width: 64rem) {
  .header-signature { display: none; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-copy { gap: var(--space-6); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 48rem) {
  .header-inner { gap: var(--space-3); padding-block: var(--space-3); }
  .button.menu-toggle { display: inline-flex; font-family: var(--font-mono); letter-spacing: var(--ls-label); }
  .site-nav { width: 100%; flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { border-top: var(--border); padding-block: var(--space-2); }
  .js .site-nav:not(.is-open) { display: none; }
  .hero-copy { grid-template-columns: 1fr; gap: var(--space-5); }
  .hero-copy .display { font-size: var(--text-h1); }
  .hero-range { padding-top: var(--space-5); }
  .data-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --photo-min-height: 30rem; }
  .section-divider { padding-block: var(--space-8); }
  .cta-band { padding: var(--space-5); }
}
@media (max-width: 36rem) {
  .grid-2, .grid-3, .form-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-brand, .field-wide { grid-column: auto; }
  .hero-copy .display { font-size: var(--text-display); }
  .hero-topline { flex-direction: column; }
  .data-strip dt { font-size: var(--text-metadata); letter-spacing: var(--ls-data); }
  .data-strip > div { padding: var(--space-4) var(--space-2); }
  .data-strip .technical-value { font-size: var(--text-data-mobile); }
  .section-number { top: var(--space-1); }
  :root { --photo-min-height: 28rem; }
}

/* styles/site-structure.css */
/* SITEMAP v1.0: page composition only. Brand tokens live in the Brand System sources (v1.1 since 06/10/2026).
   Shared header/footer, link and index-list contracts remain unchanged. */
.page-breadcrumb { color: var(--ink-74); font: var(--weight-medium) var(--text-metadata)/var(--lh-label) var(--font-mono); letter-spacing: var(--ls-data); text-transform: uppercase; }
.page-breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.page-breadcrumb li { display: flex; align-items: center; min-width: 0; max-width: 100%; }
.page-breadcrumb a, .page-breadcrumb [aria-current] { display: inline-flex; align-items: center; min-height: var(--target-min); color: inherit; overflow-wrap: anywhere; text-decoration: none; }
.page-breadcrumb a:hover { text-decoration: underline; }
.page-breadcrumb .breadcrumb-separator { flex-shrink: 0; }

/* ================================================================================================
   FOOTER (giro 3, 06/10/2026): the extended logo, clean and without box; four columns with the same rhythm (label, then lines);
   the certifications register with the body marks aligned; the social column. The CSWIP qualification lives only in Chi siamo.
   ================================================================================================ */
.site-footer-real { padding-block: var(--space-3) 0; }
.site-footer-real .footer-grid { grid-template-columns: 1.25fr 1fr 1.15fr .8fr; column-gap: var(--space-5); row-gap: var(--space-3); padding-block: var(--space-3) var(--space-4); align-items: start; }
.site-footer-real .footer-grid > * { min-width: 0; }
.site-footer-real .footer-grid p, .site-footer-real .footer-grid a { font: var(--weight-normal) var(--text-small)/var(--lh-body) var(--font-body); }
.site-footer-real .footer-grid .label, .site-footer-real .footer-certifications > .label { font: var(--weight-label) var(--text-label-size)/var(--lh-label) var(--font-mono); margin: 0 0 var(--space-2); color: var(--color-ink); }
.site-footer-real .footer-grid .payoff { font-weight: var(--weight-bold); margin: 0; }
.site-footer-real .footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
/* The extended logo, free on the white field, no box. */
.site-footer-real .footer-mark img { display: block; width: min(100%, var(--logo-full-width)); height: auto; }
.site-footer-real .footer-signature { width: 100%; min-width: 0; container: footer-signature / inline-size; }
.site-footer-real .footer-signature .label { white-space: nowrap; margin-bottom: 0; }
.site-footer-real .footer-signature .payoff { margin-top: calc(var(--space-1) / 2); }
.site-footer-real .footer-company p { margin: 0; }
.site-footer-real .footer-company p + p { margin-top: var(--space-1); }
.site-footer-real address { font-style: normal; }
.site-footer-real .footer-company, .site-footer-real .footer-contacts, .site-footer-real .footer-follow { border-inline-start: var(--border); padding-inline-start: var(--space-5); }
.site-footer-real .footer-contacts address { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--space-1) / 2); }
.site-footer-real .footer-contacts address a { display: inline-flex; align-items: center; min-height: var(--target-min); }
/* Social channels: local SVG icons, same height, one per line; shown only for configured URLs. Ink text, yellow on hover. */
.footer-social { display: grid; gap: calc(var(--space-1) / 2); }
.footer-social a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); font: var(--weight-label) var(--text-small)/var(--lh-body) var(--font-body); color: var(--color-ink); text-decoration: none; }
.footer-social a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.footer-social .social-icon { flex-shrink: 0; width: 1.375rem; height: 1.375rem; }
.site-footer-real .footer-certifications-band { background: var(--color-surface); border-top: var(--border); }
.site-footer-real .footer-certifications { padding-block: var(--space-3); }
/* Register of the six company certifications: the body mark in the same box for every item, text beside. */
.site-footer-real .footer-certification-list { --certificate-text-size: .84375rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); column-gap: var(--space-5); row-gap: var(--space-2); }
.site-footer-real .footer-certification-list li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-2); align-items: center; font: var(--weight-normal) var(--certificate-text-size)/1.3 var(--font-body); text-align: left; white-space: normal; overflow-wrap: anywhere; }
.site-footer-real .footer-cert-mark { display: flex; align-items: center; justify-content: center; height: 2.75rem; padding: .25rem; background: var(--color-container); border: var(--border-width) solid var(--ink-20); }
.site-footer-real .footer-cert-mark img { display: block; width: auto; max-width: 100%; max-height: 100%; height: auto; }
.site-footer-real .footer-certification-list li > span:last-child { font: inherit; color: inherit; } /* the index-list span rule would switch it to mono */
.site-footer-real .footer-links a { min-inline-size: var(--target-min); font-family: var(--font-body); font-size: var(--text-small); }
.site-footer-real .footer-utility, .site-footer-real .footer-legal { display: flex; flex-wrap: wrap; column-gap: var(--space-2); }
.site-footer-real .footer-bottom-band { border-top: var(--rule-width) solid var(--color-primary); }
.site-footer-real .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-3); padding-block: 0 var(--space-1); border-top: 0; }
.site-footer-real .footer-bottom > * { min-width: 0; }
/* Allow wrapping only when enlarged text cannot fit the identity column. */
@container footer-signature (max-width: 12rem) {
  .site-footer-real .footer-signature .label { white-space: normal; }
}
@media (max-width: 64rem) {
  .site-footer-real .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); }
  .site-footer-real .footer-brand { grid-column: auto; }
  .site-footer-real .footer-company, .site-footer-real .footer-contacts, .site-footer-real .footer-follow { padding-inline-start: var(--space-3); }
  .site-footer-real .footer-company { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 48rem) {
  .site-footer-real .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer-real .footer-brand { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .site-footer-real .footer-signature { flex: 1 1 12rem; width: auto; }
  .site-footer-real .footer-company, .site-footer-real .footer-follow { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 36rem) {
  .site-footer-real .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer-real .footer-contacts, .site-footer-real .footer-follow { border-inline-start: 0; padding-inline-start: 0; }
  .site-footer-real .footer-bottom { gap: var(--space-1) var(--space-3); }
}

/* Legal utility pages (Privacy, GDPR): structure only; the approved legal text is added separately. The index stays in the flow
   (giro 3, P1: only the island is fixed); when the texts arrive it becomes the side index of Chi siamo. */
.legal-document { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-9); }
.legal-document__header { display: grid; gap: var(--space-2); justify-items: start; padding-bottom: var(--space-5); border-bottom: var(--border-width) solid var(--ink-20); }
.legal-document__header h1 { margin: 0; }
.legal-document__header .eyebrow { margin: 0; }
.legal-document__status { margin: 0; padding: var(--space-2) var(--space-3); border-left: 8px solid var(--color-primary); background: var(--color-container); color: var(--color-ink); font: var(--weight-label) var(--text-label-size)/var(--lh-label) var(--font-mono); letter-spacing: var(--ls-label); text-transform: uppercase; }
.legal-document__layout { display: grid; gap: var(--space-7); }
.legal-document--with-index .legal-document__layout { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); align-items: start; }
.legal-document__index { padding-top: var(--space-3); border-top: 4px solid var(--color-primary); font: var(--weight-medium) var(--text-small)/var(--lh-label) var(--font-body); }
.legal-document__index ol { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.legal-document__body { max-width: 72ch; color: var(--text-body); }
.legal-document__body > * + * { margin-top: var(--space-4); }
.legal-document__body h2 { margin-top: var(--space-8); font-size: var(--text-h3); }
@media (max-width: 48rem) {
  .legal-document--with-index .legal-document__layout { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================================================
   HEADER «DYNAMIC ISLAND» (06/10/2026, giro 3). One fixed black pill, centred and always visible: the clean AL mark (dark variant,
   same yellow) and the whole primary menu in the approved order. Pages run edge to edge under it: the main keeps a clearance
   at the top and paints it with the page's opening colour (--page-opening). The yellow oval moves with transform only
   (assets/site-navigation.js); the dropdowns are black rounded panels in the same style. Brand tokens only; no new colours.
   ================================================================================================ */
:root { --island-gap: .75rem; --island-height: 3.5rem; --island-clearance: calc(var(--island-gap) * 2 + var(--island-height)); --z-island: 30; }
main#main { padding-top: var(--island-clearance); background-image: linear-gradient(var(--page-opening, transparent), var(--page-opening, transparent)); background-size: 100% var(--island-clearance); background-repeat: no-repeat; }
.page-shell-main { padding-bottom: var(--space-2); }
/* Pages whose opening is dark (the Chi siamo hero, service pages, Usato banner) paint the clearance in ink. */
.page-opening--dark { background: var(--color-ink); }
.page-opening--dark .page-breadcrumb { color: rgba(255,255,255,.74); }
.page-opening--dark .page-breadcrumb a:hover, .page-opening--dark .page-breadcrumb [aria-current] { color: var(--color-container); }
main.page-shell-main:has(> .svc-hero:first-child), main.page-shell-main:has(> .used-banner:first-child), main.page-shell-main:has(> .page-opening--dark:first-child), main.page-shell-main:has(> .cw:first-child), main.page-shell-main:has(> .contact-page:first-child), main.page-shell-main:has(> .jobs-home:first-child) { --page-opening: var(--color-ink); }
/* Anchors land below the island. */
:target, [id] { scroll-margin-top: calc(var(--island-clearance) + var(--space-2)); }
/* Without JavaScript (the bootstrap has not marked the document) the header stays in the flow with the whole navigation visible, so it
   never covers the content; the clearance of main is not needed. */
html:not([data-site-navigation="ready"]) .site-header-real { position: static; }
html:not([data-site-navigation="ready"]) main#main { padding-top: 0; background-image: none; }
.site-header-real { position: fixed; inset: 0 0 auto 0; z-index: var(--z-island); padding: var(--island-gap) var(--page-padding); background: none; border: 0; pointer-events: none; }
.site-island { pointer-events: auto; position: relative; display: flex; align-items: center; gap: var(--space-2); width: max-content; max-width: 100%; min-height: var(--island-height); margin-inline: auto; padding: .375rem .5rem .375rem .875rem; background: var(--color-ink); color: var(--color-container); border-radius: 999px; box-shadow: 0 10px 30px rgba(34,38,42,.35), 0 0 0 1px rgba(255,255,255,.14); }
.site-header-real .island-logo { display: inline-flex; align-items: center; min-height: var(--target-min); padding-inline: .25rem; border-radius: 999px; color: inherit; }
.site-header-real .island-logo img { display: block; width: 4.25rem; height: auto; }
.site-header-real :focus-visible { outline: var(--focus-width) solid var(--color-primary); outline-offset: var(--focus-gap); }
.site-header-real .menu-toggle { display: none; align-items: center; justify-content: center; min-height: var(--target-min); padding: 0 var(--space-4); background: none; color: var(--color-container); border: var(--border-width) solid rgba(255,255,255,.35); border-radius: 999px; font: var(--weight-label) var(--text-navigation)/var(--lh-label) var(--font-body); cursor: pointer; }
.site-header-real .menu-toggle:hover { border-color: var(--color-primary); }
.site-header-real .site-nav { display: flex; align-items: center; min-width: 0; gap: 0; }
.site-header-real .primary-navigation, .site-header-real .submenu { list-style: none; margin: 0; padding: 0; }
.site-header-real .primary-navigation { position: relative; display: flex; flex-wrap: nowrap; align-items: center; gap: 0; }
.site-header-real .primary-item { position: relative; z-index: 1; min-width: 0; }
.site-header-real .primary-control { display: flex; align-items: center; }
.site-header-real .primary-control > a { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-3); border: 0; border-radius: 999px; color: var(--color-container); font: var(--weight-label) var(--text-navigation)/var(--lh-label) var(--font-body); white-space: nowrap; text-decoration: none; transition: color .2s ease; }
/* The hovered or marked item reads in ink over the yellow oval. Before the enhancement is ready (and without JavaScript) the colours
   are static: current item marked, hover marked. */
.site-header-real li.is-pill > .primary-control > a, .site-header-real li.is-pill > a, .site-header-real .primary-control > a:hover, .site-header-real .submenu a:hover { color: var(--color-ink); }
.site-header-real:not(.site-navigation-ready) .primary-control > a:hover, .site-header-real:not(.site-navigation-ready) .primary-control > a[aria-current="page"], .site-header-real:not(.site-navigation-ready) .is-current-branch > .primary-control > a, .site-header-real:not(.site-navigation-ready) .submenu a:hover, .site-header-real:not(.site-navigation-ready) .submenu a[aria-current="page"] { background: var(--color-primary); color: var(--color-ink); }
/* The oval: transform only (translate + scale from the previous box), opacity for show/hide; the box is set once per move. */
.island-pill { position: absolute; top: 0; left: 0; z-index: 0; width: 0; height: 0; background: var(--color-primary); border-radius: 999px; opacity: 0; transform-origin: 0 0; transform: translate(var(--pill-x, 0), var(--pill-y, 0)); transition: transform .22s cubic-bezier(.25,.1,.25,1), opacity .15s ease; will-change: transform; pointer-events: none; }
.island-pill.is-visible { opacity: 1; }
.island-pill.is-bouncing { animation: island-bounce .25s ease-out; }
@keyframes island-bounce { 0% { transform: translate(var(--pill-x, 0), var(--pill-y, 0)) scale(1); } 45% { transform: translate(var(--pill-x, 0), var(--pill-y, 0)) scale(1.1, .86); } 100% { transform: translate(var(--pill-x, 0), var(--pill-y, 0)) scale(1); } }
/* «Confronta (n)»: the comparison counter of the Catalogue, in the island, same style as the oval (assets/catalogue-compare.js). */
.site-header-real .island-compare { order: 5; display: inline-flex; align-items: center; min-height: var(--target-min); margin-inline-start: .25rem; padding: 0 var(--space-3); border-radius: 999px; background: var(--color-primary); color: var(--color-ink); font: var(--weight-label) var(--text-navigation)/var(--lh-label) var(--font-body); white-space: nowrap; text-decoration: none; }
.site-header-real .island-compare:hover { background: var(--color-container); }
.site-header-real .island-compare[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .island-pill { transition: opacity .15s ease; }
  .island-pill.is-bouncing { animation: none; }
  .site-header-real .primary-control > a { transition: none; }
}
/* Dropdowns (giro 4): ONE black rounded panel (.island-panel, built by site-navigation.js inside the active item) that moves and
   reshapes under the item with a transform only, while the old list cross-fades into the new one (150 ms); an invisible bridge above
   it lets the pointer cross the gap. The lists keep their markup (.submenu) for the mobile panel and for the no-JavaScript fallback. */
.site-header-real .submenu { position: relative; padding: 0; background: none; }
.site-header-real .submenu li { position: relative; z-index: 1; }
.site-header-real .submenu a { position: relative; display: flex; width: 100%; min-height: var(--target-min); align-items: center; padding: 0 var(--space-3); border-radius: 999px; color: var(--color-container); font: var(--weight-label) var(--text-navigation)/var(--lh-label) var(--font-body); text-decoration: none; overflow-wrap: anywhere; transition: color .2s ease; }
.site-header-real .island-panel { position: absolute; inset-block-start: calc(100% + .625rem); inset-inline-start: 0; z-index: 2; display: grid; width: max-content; min-width: 100%; max-width: min(24rem, calc(100vw - 2 * var(--page-padding))); padding: .375rem; background: var(--color-ink); color: var(--color-container); border-radius: 1.25rem; box-shadow: 0 14px 34px rgba(34,38,42,.35), 0 0 0 1px rgba(255,255,255,.14); transform-origin: 0 0; opacity: 0; transform: translateY(-.5rem) scale(.97); transition: opacity .15s ease, transform .22s cubic-bezier(.25,.1,.25,1); }
.site-header-real .island-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -.75rem; height: .75rem; }
.site-header-real .island-panel.is-open { opacity: 1; transform: none; }
.site-header-real .island-panel.is-moving { transition: none; transform: translateX(var(--panel-dx, 0)) scale(var(--panel-sx, 1), var(--panel-sy, 1)); }
.site-header-real .island-panel[hidden] { display: none; }
.site-header-real .island-panel__layer { grid-area: 1 / 1; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.site-header-real .island-panel__layer.is-front { opacity: 1; pointer-events: auto; }
.site-header-real .island-panel .submenu { position: relative; }
/* Fallback with JavaScript but without the enhancement (controller in error): lists shown on hover and focus, static colours. */
html[data-site-navigation="ready"] .site-header-real:not(.site-navigation-ready) .submenu { position: absolute; inset-block-start: calc(100% + .625rem); inset-inline-start: 0; width: max-content; min-width: 100%; padding: .375rem; background: var(--color-ink); border-radius: 1.25rem; box-shadow: 0 14px 34px rgba(34,38,42,.35); }
@media (width > 64rem) {
  html[data-site-navigation="ready"] .site-header-real:not(.site-navigation-ready) .primary-item:not(:hover):not(:focus-within) > .submenu { display: none; }
  html[data-site-navigation="ready"] .site-header-real.site-navigation-ready .primary-item > .submenu[hidden] { display: none; }
}
/* Narrow screens: the pill holds the mark and «Menu»; open, it widens into a black panel with the items in a column. */
@media (max-width: 64rem) {
  .site-island { width: 100%; max-width: 40rem; flex-wrap: wrap; justify-content: space-between; border-radius: 1.75rem; }
  .site-island.is-open { border-radius: 1.5rem; }
  html[data-site-navigation="ready"] .site-header-real .menu-toggle { display: inline-flex; }
  html[data-site-navigation="ready"] .site-header-real .site-nav:not(.is-open) { display: none; }
  .site-header-real .site-nav { flex-basis: 100%; order: 3; padding: var(--space-2) .25rem var(--space-2); border-top: var(--border-width) solid rgba(255,255,255,.14); margin-top: var(--space-1); }
  .site-header-real .island-compare { order: 1; margin-inline-start: auto; margin-inline-end: .5rem; }
  .site-header-real .menu-toggle { order: 2; }
  .site-header-real .primary-navigation { width: 100%; flex-direction: column; align-items: stretch; }
  .site-header-real .primary-control > a { width: 100%; white-space: normal; }
  .site-header-real .primary-control > a[aria-current="page"], .site-header-real .is-current-branch > .primary-control > a { background: var(--color-primary); color: var(--color-ink); }
  .island-pill { display: none; }
  html[data-site-navigation="ready"] .site-header-real .submenu { position: static; width: 100%; min-width: 0; max-width: none; }
  .site-header-real .submenu { background: none; border-radius: 0; box-shadow: none; padding: 0 0 var(--space-1) var(--space-4); }
  .site-header-real .island-panel { display: none; }
  .site-header-real .submenu a { color: rgba(255,255,255,.82); border-top: 0; padding-block: 0; }
  .site-header-real .submenu a:hover { color: var(--color-primary); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header-real .island-panel { transform: none; transition: opacity .15s ease; }
  .site-header-real .island-panel__layer { transition: none; }
}
@media (max-width: 36rem) {
  :root { --island-gap: .5rem; }
  .site-header-real { padding-inline: var(--space-2); }
}
@media (forced-colors: active) { .site-island, .site-header-real .island-panel { border: var(--border-width) solid CanvasText; } .island-pill { forced-color-adjust: none; } }

/* ================================================================================================
   HOMEPAGE GIRO 2 (07/10/2026), block F. One style for every photo caption of the site (Chi siamo, works galleries, Usato, Catalogue,
   homepage): IBM Plex Mono 400 at .75rem, line 1.5, light tracking, no uppercase, secondary ink, 12 px under the photo, aligned to the
   left edge of the image, at most 60 characters per line. Dark contexts keep their white tone in their own stylesheet. No movement changes.
   ================================================================================================ */
.site-shell main figcaption { margin: var(--space-2) 0 0; max-width: 60ch; font: var(--weight-normal) .75rem/1.5 var(--font-mono); letter-spacing: .02em; text-transform: none; text-align: left; color: var(--text-secondary); }
/* HOMEPAGE GIRO 3 (08/10/2026), block G — the same family of the hover bug on buttons: the hover of .button (components.css) also
   reached disabled buttons (white text on the light disabled grey). A disabled button keeps its disabled look under the pointer. */
.button:disabled:hover, .button[aria-disabled="true"]:hover { background: var(--ink-20) !important; color: var(--ink-74) !important; border-color: var(--ink-35) !important; cursor: not-allowed; }

/* FASE MODULI E CURRICULUM (08/10/2026): the Contatti form opened in the page by every invitation to write (assets/contact-dialog.js),
   the component of the comparison (giro 3, C.6) now shared by the whole site. Form rules scoped to the dialog; yellow top border,
   petrol blue for the Vertex products and comparisons. */
.contact-dialog { width: min(42rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-top: 4px solid var(--color-primary); background: var(--color-container); color: var(--color-ink); box-shadow: 0 24px 60px rgba(34,38,42,.35); overflow: auto; overscroll-behavior: contain; }
.contact-dialog--vertex { border-top-color: var(--color-vertex); }
.contact-dialog::backdrop { background: rgba(34,38,42,.6); }
.contact-dialog__head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-2); background: var(--color-container); }
.contact-dialog__head h2 { margin: 0; font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem); }
.contact-dialog__close { flex: none; min-width: var(--target-min); min-height: var(--target-min); border: 2px solid var(--ink-20); border-radius: 999px; background: none; color: var(--color-ink); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.contact-dialog__close:hover { border-color: var(--color-ink); }
.contact-dialog__close:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.contact-dialog__context { margin: 0 var(--space-4) var(--space-3); font: var(--weight-label) .8rem/1.5 var(--font-mono); letter-spacing: .04em; color: var(--text-secondary); overflow-wrap: anywhere; }
.contact-dialog__body { padding: 0 var(--space-4) var(--space-4); }
.contact-dialog__mail { margin: 0; padding: 0 var(--space-4) var(--space-4); color: var(--text-secondary); }
.contact-dialog__body .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.contact-dialog__body .field-wide, .contact-dialog__body .captcha { grid-column: 1 / -1; }
.contact-dialog__body .runtime-notice { margin: 0 0 var(--space-3); padding: var(--space-3); border-left: 8px solid var(--color-primary); background: var(--color-surface); }
.contact-dialog__body .field-error { margin: 4px 0 0; color: var(--color-error, #B3261E); }
.contact-dialog__body .stack > * + * { margin-top: var(--space-3); }
.contact-dialog__body textarea { min-height: 8rem; }
/* The honeypot field stays out of sight on every page (runtime.css, which also hides it, loads only on the pages served by the
   application); inside the dialog the form is not a second card. */
.contact-dialog__body .contact-field-extra { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact-dialog__body .contact-form { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
html.has-contact-dialog .used-sticky { visibility: hidden; }
@media (max-width: 48rem) { .contact-dialog__body .form-grid { grid-template-columns: minmax(0, 1fr); } .contact-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); } }

/* ==================================================================================================================
   MODULI COMPATTI (09/10/2026) — Brand System revision 1.6 (docs/design-system/FREEZE_V1_0.json): the form component on every page
   (public forms, «Scrivici» dialog, Catalogue panel, Area Riservata). forms.css (frozen) is unchanged; these rules follow it and are the
   only ones for check boxes and the anti-robot box (the former copies in runtime.css and in the dialog are gone).
   A. Check boxes. The text-field rules of forms.css (.field label: mono upper-case; .field input: full width, 44 px, padding) no longer
      reach them. One square box of 19 px with the border of the fields (≥ 3:1) and a white tick on anthracite, aligned with the first
      line; the label in IBM Plex Sans regular, 15 px, normal case, no letter-spacing, line-height 1.45; the whole label is the click area
      (at least 24 px high); smaller gaps between boxes; the anti-robot box compact (same yellow band, smaller paddings and note).
   B. Public forms compact (Contatti and its dialog, Usato, technical sheet, applications, Disiscrizione): at most 45 rem wide; short
      fields in pairs from 640 px, area, subject, message and file on the whole width; fields 44 px high with 16 px text (no zoom on
      phones), message of 5 lines; buttons side by side on the left; one column under 640 px. Text-field labels unchanged.
   ================================================================================================================== */
.field input:is([type=checkbox], [type=radio]) { width: auto; min-height: 0; padding: 0; }
.check-label, .field label.check-label { display: flex; align-items: flex-start; gap: .625rem; min-height: 1.5rem; margin: 0; padding: 0; cursor: pointer;
  font: var(--weight-normal) .9375rem/1.45 var(--font-body); letter-spacing: normal; text-transform: none; color: var(--color-ink); }
.check-label input[type=checkbox], .reserved-app input[type=checkbox]:not([role=switch]) { appearance: none; -webkit-appearance: none; flex: 0 0 1.1875rem;
  width: 1.1875rem; height: 1.1875rem; min-height: 0; margin: .125rem 0 0; padding: 0; border: var(--border-control); border-radius: 0;
  background: var(--color-container) no-repeat center / .8125rem; background-clip: border-box; cursor: pointer; }
.check-label input[type=checkbox]:checked, .reserved-app input[type=checkbox]:not([role=switch]):checked { padding: 0; border-color: var(--color-ink); background-color: var(--color-ink); background-clip: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.3 3.3L13 4.9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E"); }
.check-label input[type=checkbox]:focus-visible, .reserved-app input[type=checkbox]:not([role=switch]):focus-visible { outline: var(--focus-width) solid var(--color-ink); outline-offset: 2px; }
.check-label input[type=checkbox]:disabled, .reserved-app input[type=checkbox]:not([role=switch]):disabled { opacity: .55; cursor: not-allowed; }
.check-label .text-link { display: inline; min-height: 0; } /* inside the label the link stays in the line (the label is the click area) */
.stack:not(form[id$="candidatura"]) > .field:has(> .check-label) + .field:has(> .check-label) { margin-top: var(--space-2); } /* the grid of the applications has its own gap */
.captcha { display: grid; gap: 2px; padding: var(--space-1) var(--space-2); background: var(--color-surface); border: 1px solid var(--ink-20); border-left: 4px solid var(--color-primary); }
.captcha__status { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--text-secondary); }
.captcha[data-captcha-state="done"] .captcha__status { color: var(--color-ink); font-weight: var(--weight-label); }
:is(form[id$="contatti-form"], [id$="richiedi-informazioni"] > form, form[id$="candidatura"], form[data-request-form], form[id$="disiscrizione-form"]) { max-width: 45rem; }
:is(form[id$="contatti-form"], [id$="richiedi-informazioni"] > form, form[data-request-form], form[id$="disiscrizione-form"]) .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
:is(form[id$="contatti-form"], [id$="richiedi-informazioni"] > form, form[id$="candidatura"]) .field:has(> :is(select[name=area], select[name=service], input[name=subject], input[type=file])) { grid-column: 1 / -1; }
form[data-request-form] .form-grid > .field:has(> input:is([name=company_name], [name=contact_name])) { grid-column: auto; }
form[id$="candidatura"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
form[id$="candidatura"] > * { grid-column: 1 / -1; margin-top: 0; }
form[id$="candidatura"] > .field:not(.field-wide):not(:has(input[type=file])) { grid-column: auto; }
form[id$="candidatura"] > button { justify-self: start; }
:is(form[id$="contatti-form"], [id$="richiedi-informazioni"] > form, form[id$="candidatura"], form[data-request-form], form[id$="disiscrizione-form"]) p .text-link { display: inline; min-height: 0; } /* a link inside a sentence stays in its line */
:is(form[id$="contatti-form"], [id$="richiedi-informazioni"] > form, form[id$="candidatura"], form[data-request-form], form[id$="disiscrizione-form"]) :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=file]), select) { min-height: 2.75rem; font-size: 1rem; }
:is(form[id$="contatti-form"], [id$="richiedi-informazioni"] > form, form[id$="candidatura"], form[data-request-form], form[id$="disiscrizione-form"]) textarea { min-height: 8rem; font-size: 1rem; }
@media (max-width: 40rem) {
  :is(form[id$="contatti-form"], [id$="richiedi-informazioni"] > form, form[data-request-form], form[id$="disiscrizione-form"]) .form-grid, form[id$="candidatura"] { grid-template-columns: minmax(0, 1fr); }
  :is(form[id$="contatti-form"], [id$="richiedi-informazioni"] > form, form[data-request-form], form[id$="disiscrizione-form"]) .form-grid > *, form[id$="candidatura"] > * { grid-column: 1 / -1; }
}
@media (forced-colors: active) { .check-label input[type=checkbox], .reserved-app input[type=checkbox]:not([role=switch]) { appearance: auto; -webkit-appearance: auto; } }
/* PREPARAZIONE GO-LIVE (12/10/2026): the short privacy notice of each form (PrivacyNotices), right above the consent boxes, in the compact
   style: regular weight, normal style, size and colour of the secondary text; its link stays in the line. */
.form-privacy-notice { margin: 0; max-width: 65ch; font-size: var(--text-small); font-weight: var(--weight-normal); font-style: normal; line-height: 1.5; color: var(--text-secondary); }
.form-privacy-notice .text-link { display: inline; min-height: 0; }

/* ==================================================================================================================
   RIFINITURA DETTAGLI (09/10/2026) — Brand System revision 1.7.
   R2/R3: «Confronta (n)» of the island counts Vertex models in the petrol blue with white text (assets/site-navigation.js, data-brand).
   R5: the reveal on scroll of Contatti and of the Catalogue (assets/scroll-reveal.js): only blocks below the fold wait, opacity and 16 px,
   560 ms ease-out, cascade from --sr-delay; never with reduced motion, never in print. No layout property moves.
   ================================================================================================================== */
.site-header-real .island-compare[data-brand="Vertex"] { background: var(--color-vertex); color: var(--color-container); }
.site-header-real .island-compare[data-brand="Vertex"]:hover { background: var(--color-container); color: var(--color-ink); }
/* R2: the forms of a Vertex context — the dialog «Richiedi informazioni» opened from a Vertex product and the request panel of a Vertex
   sheet — in the petrol blue: the rule of the anti-robot box, the underlines of the links, the solid button (white text, 6.2:1). */
.contact-dialog--vertex a, .catalogue-main.catalogue-vertex form a { text-decoration-color: var(--color-vertex); }
.contact-dialog--vertex .captcha, .catalogue-main.catalogue-vertex .captcha { border-left-color: var(--color-vertex); }
.contact-dialog--vertex .button:not(.button-secondary) { background: var(--color-vertex); border-color: var(--color-vertex); color: var(--color-container); }
.contact-dialog--vertex .button:not(.button-secondary):hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-container); }
.contact-dialog--vertex .button:not(.button-secondary):disabled { background: var(--color-container); border-color: var(--color-vertex); color: var(--color-vertex); }
html.sr-on [data-sr="wait"] { opacity: 0; transform: translate3d(0, 16px, 0); }
html.sr-on [data-sr="show"] { opacity: 1; transform: none; transition: opacity .56s cubic-bezier(.22,.61,.36,1), transform .56s cubic-bezier(.22,.61,.36,1); transition-delay: var(--sr-delay, 0ms); }
@media (prefers-reduced-motion: reduce) { html.sr-on [data-sr] { opacity: 1 !important; transform: none !important; transition: none !important; } }
@media print { [data-sr] { opacity: 1 !important; transform: none !important; } }

/* SERVIZI, SEO, RESPONSIVE, LINGUE (13/10/2026), parte 5: the language selector at the far right of the island (src/partials/site-header.html).
   Flag of the current language, 20 × 14 px, in a 48 px target; the panel opens under it, right-aligned, in the style of the island panels.
   «English» is disabled («coming soon»). Narrow screens: next to «Menu». Nothing else of the island changes. */
.site-header-real .island-lang { position: relative; order: 6; display: inline-flex; margin-inline-start: .25rem; }
.site-header-real .island-lang__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; min-height: 3rem; border-radius: 999px; cursor: pointer; list-style: none; }
.site-header-real .island-lang__toggle::-webkit-details-marker { display: none; }
.site-header-real .island-lang__toggle::marker { content: ''; }
.site-header-real .island-lang__toggle:hover, .site-header-real .island-lang[open] > .island-lang__toggle { background: rgba(255,255,255,.12); }
.site-header-real .island-lang__flag { display: block; flex: none; width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.site-header-real .island-lang__panel { position: absolute; inset-block-start: calc(100% + .625rem); inset-inline-end: 0; z-index: 2; display: grid; gap: .125rem; width: max-content; padding: .375rem; background: var(--color-ink); color: var(--color-container); border-radius: 1.25rem; box-shadow: 0 14px 34px rgba(34,38,42,.35), 0 0 0 1px rgba(255,255,255,.14); }
.site-header-real .island-lang__option { display: flex; align-items: center; gap: .625rem; min-height: 3rem; padding: 0 var(--space-3); background: none; border: 0; border-radius: 999px; color: inherit; font: var(--weight-label) var(--text-navigation)/var(--lh-label) var(--font-body); text-align: start; cursor: pointer; }
.site-header-real .island-lang__option[aria-current="true"] { background: var(--color-primary); color: var(--color-ink); }
.site-header-real .island-lang__option[aria-disabled="true"] { color: rgba(255,255,255,.72); cursor: not-allowed; }
.site-header-real .island-lang__soon { font-size: .75rem; font-weight: var(--weight-normal); }
@media (max-width: 64rem) {
  .site-header-real .island-lang { order: 2; }
  .site-header-real .island-compare[hidden] ~ .menu-toggle { margin-inline-start: auto; }
}
@media (forced-colors: active) { .site-header-real .island-lang__panel { border: var(--border-width) solid CanvasText; } }

/* styles/home.css */
/* styles/home-used.css (@import di styles/home.css) */
/* ==================================================================================================================
   HOMEPAGE (07/10/2026). The Usato cards of the homepage and of the «Usato in homepage» preview in the Area Riservata: cover with the
   label banner (NUOVA yellow, IN EVIDENZA ink, AFFARE signal red v1.2) overlapping the photo at the top left; no «Disponibile» label.
   ================================================================================================================== */
.home-used-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.home-used-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--color-container);color:var(--color-ink);text-decoration:none;box-shadow:var(--shadow-card);transition:transform .22s cubic-bezier(.25,.1,.25,1),box-shadow .22s ease}
.home-used-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(80,58,0,.22)}
.home-used-card:focus-visible{outline:var(--focus-width) solid var(--color-ink);outline-offset:var(--focus-gap)}
.home-used-card__photo{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--color-surface);overflow:visible}
.home-used-card__photo img{width:100%;height:100%;object-fit:contain;display:block;background:var(--color-surface)}
.home-used-card__empty{font:var(--weight-label) var(--text-small)/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-74)}
/* HOMEPAGE GIRO 3 (08/10/2026), E.1: the same label system as the Usato pages (styles/runtime.css): top left inside the photo, straight,
   12px from the edges, 28px high, Plex Sans 700 uppercase; NUOVA yellow, IN EVIDENZA ink, AFFARE signal red. */
.home-used-badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;height:28px;padding:0 10px;font:var(--weight-bold) .72rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;box-shadow:none}
.home-used-badge--nuova{background:var(--color-primary);color:var(--color-ink);box-shadow:none}
.home-used-badge--in_evidenza{background:var(--color-ink);color:var(--color-container)}
.home-used-badge--affare{background:var(--color-signal-red);color:var(--color-container)}
.home-used-card__body{display:grid;gap:6px;padding:18px 20px 22px}
.home-used-card__meta{font:var(--weight-normal) var(--text-small)/1.4 var(--font-mono);color:var(--ink-74)}
.home-used-card__title{font:var(--weight-bold) 1.2rem/1.2 var(--font-display)}
.home-used-card__line{font-size:var(--text-small);color:var(--text-secondary)}
.home-used-card__cta{margin-top:var(--space-2);font:var(--weight-label) var(--text-small)/1.4 var(--font-body);text-decoration:underline;text-decoration-color:var(--color-primary);text-decoration-thickness:2px;text-underline-offset:.2em}
.home-used-row legend{padding:0 6px}
.home-used-grid--preview{margin-top:var(--space-3)}
@media(max-width:64rem){.home-used-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:36rem){.home-used-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.home-used-card{transition:none}.home-used-card:hover{transform:none}}
@media(forced-colors:active){.home-used-card,.home-used-badge{border:1px solid CanvasText}}

/* styles/compare-preview.css (@import di styles/home.css) */
/* ==================================================================================================================
   HOMEPAGE GIRO 3 (08/10/2026), blocks B.3 and C — the comparison widget of the homepage (scripts/compare-preview.mjs,
   assets/home-compare.js). Menus for the typology and the two models; the table shows only the values, in order: labels on the
   left, tabular figures, the unit beside the number in a lighter weight, regular rows; no bar, colour or «best» mark. The brand
   colour only on the top rule and the button (Vertex teal, Abronzino yellow). Imported by home.css.
   ================================================================================================================== */
.cmp-preview { --cmp-brand: var(--color-primary); --cmp-on-brand: var(--color-ink); display: grid; gap: var(--space-4); max-width: 60rem; margin-inline: auto; padding: clamp(1.25rem, 2.6vw, 2rem); background: var(--color-container); color: var(--color-ink); border-top: 4px solid var(--cmp-brand); box-shadow: 0 18px 40px rgba(34,38,42,.08); }
.cmp-preview--vertex { --cmp-brand: var(--color-vertex); --cmp-on-brand: var(--color-container); }
.cmp-label { font: var(--weight-label) .72rem/1.4 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-74, rgba(34,38,42,.74)); }
.cmp-pickers { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.cmp-pickers[hidden] { display: none; }
.cmp-pick { display: grid; gap: 6px; min-width: 0; }
.cmp-pick select { width: 100%; min-height: var(--target-min, 44px); padding: 0 2.4rem 0 .85rem; border: 2px solid var(--ink-20, rgba(34,38,42,.2)); border-radius: 0; background: var(--color-container) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2322262A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .85rem center; color: var(--color-ink); font: var(--weight-label) 1rem/1.2 var(--font-body); text-overflow: ellipsis; appearance: none; cursor: pointer; }
.cmp-pick select:hover { border-color: var(--ink-50, rgba(34,38,42,.5)); }
.cmp-pick select:focus-visible { outline: var(--focus-width) solid var(--color-ink); outline-offset: var(--focus-gap); border-color: var(--color-ink); }
.cmp-preview__head { margin: 0; }
.cmp-preview__table { min-width: 0; overflow-x: auto; }
.cmp-preview__table:focus-visible { outline: var(--focus-width) solid var(--color-ink); outline-offset: var(--focus-gap); }
.cmp-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.cmp-table th, .cmp-table td { padding: .7rem .75rem; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--ink-20, rgba(34,38,42,.2)); }
.cmp-table thead th { vertical-align: bottom; border-bottom: 2px solid var(--color-ink); }
.cmp-table .cmp-corner { width: 34%; }
.cmp-corner span { font: var(--weight-label) .72rem/1.4 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-74, rgba(34,38,42,.74)); }
.cmp-table tbody th { font: var(--weight-label) .95rem/1.35 var(--font-body); color: var(--ink-74, rgba(34,38,42,.74)); hyphens: auto; }
.cmp-table td { font: var(--weight-bold) 1.05rem/1.35 var(--font-display); color: var(--color-ink); overflow-wrap: anywhere; }
.cmp-num { white-space: nowrap; }
.cmp-unit { font: var(--weight-normal) .85em/1 var(--font-body); color: var(--ink-74, rgba(34,38,42,.74)); white-space: nowrap; }
.cmp-model { display: grid; gap: 4px; justify-items: start; }
.cmp-model img { width: 100%; max-width: 9rem; height: 5.5rem; object-fit: contain; background: var(--color-surface); }
.cmp-model__code { font: var(--weight-bold) 1.15rem/1.15 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.cmp-model__series { font: var(--weight-label) .7rem/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-74, rgba(34,38,42,.74)); }
.cmp-preview__open { justify-self: start; background: var(--cmp-brand); color: var(--cmp-on-brand); border-color: var(--cmp-brand); }
.cmp-preview__open:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-container); }
.cmp-preview.is-loading .cmp-preview__table { opacity: .5; transition: opacity .2s ease; }
@media (max-width: 48rem) {
  .cmp-pickers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cmp-pick--type { grid-column: 1 / -1; }
  .cmp-table th, .cmp-table td { padding: .6rem .4rem; }
  .cmp-table .cmp-corner { width: 38%; }
  .cmp-table tbody th { font-size: .82rem; }
  .cmp-table td { font-size: .95rem; }
  .cmp-model img { height: 4rem; }
  .cmp-model__code { font-size: 1rem; }
  .cmp-preview__open { justify-self: stretch; text-align: center; }
}
/* RIFINITURA DETTAGLI (09/10/2026), R1/R4 — Brand System revision 1.7: the column of the labels on the left, the columns of the models
   centred (machine, code, series, values), vertical centre; the machine floats on the white of the widget, no grey field behind it. */
.cmp-table th, .cmp-table td { text-align: center; vertical-align: middle; }
.cmp-table th:first-child, .cmp-table tbody th { text-align: left; }
.cmp-table thead th { vertical-align: middle; }
.cmp-model { justify-items: center; text-align: center; }
.cmp-model img { background: none; margin-inline: auto; }
/* FOTO VERTEX CONFERMATE, DIFETTI MINORI (09/10/2026), 3a — Brand System revision 1.8: a value wraps only after «×» (the unit, the
   signs and the ranges hold together: the markup glues them), a code never breaks on its hyphen (.cmp-nb, one per word of the code).
   On the narrowest screens the label column gives the models more room and the values a slightly smaller size. */
.cmp-num { white-space: normal; }
.cmp-nb { white-space: nowrap; }
.cmp-model__code { overflow-wrap: normal; }
@media (max-width: 30rem) {
  .cmp-table .cmp-corner { width: 31%; }
  .cmp-table td { font-size: .875rem; }
  .cmp-table th, .cmp-table td { padding-inline: .3rem; }
  .cmp-model__code { font-size: .95rem; }
}

/* ==================================================================================================================
   HOMEPAGE (07/10/2026). Loaded by the homepage only (exception in the CSS check of scripts/build.mjs). Brand tokens v1.1.
   Block A — the wall: faithful port of the owner's component «Hero Home Parete v3» (mode «sovrapposte»): same transitions
   (clip-path .55s cubic-bezier(.2,.75,.2,1), transform .55s, filter .45s), same hover (scale 1.16, rotate(--rot), z above all,
   drop-shadow 0 18px 22px), same dim of the others (grayscale(.85) brightness(.62) contrast(1.05)), same frame (.5cqw) and shadow.
   The only chromatic adaptation: #D8A400 of the file → the v1.1 primary yellow (#FECC00) for background and frame.
   ================================================================================================================== */
.home-main { padding-top: 0 !important; padding-bottom: 0; background-image: none !important; }
.home-wall { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--color-primary); container-type: inline-size; overflow: hidden; --dim: none; --sh: drop-shadow(0 .25cqw .55cqw rgba(20,16,0,.42)); }
.wall-layer { position: absolute; inset: 0; }
.wall-layer--portrait { display: none; }
.wall-tile { position: absolute; transform: rotate(var(--r0)); filter: var(--sh); transition: transform .55s cubic-bezier(.2,.75,.2,1), filter .55s; cursor: pointer; }
.wall-tile__rim { position: absolute; inset: 0; clip-path: var(--clip); transition: clip-path .55s cubic-bezier(.2,.75,.2,1); background: #22262A; }
.wall-tile__face { position: absolute; inset: 0; clip-path: var(--clip-in); transition: clip-path .55s cubic-bezier(.2,.75,.2,1); background: #22262A; }
.wall-tile__face img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--dim); transition: filter .45s, opacity .4s ease; user-select: none; -webkit-user-drag: none; }
/* While a photo loads the field of the file stays; when ready it appears with a short fade (home.js marks it). */
.home-wall.is-js .wall-tile__face img { opacity: 0; }
.home-wall.is-js .wall-tile__face img.is-loaded { opacity: 1; }
.wall-tile:hover, .wall-tile.is-active { transform: scale(1.16) rotate(var(--rot)); z-index: 20 !important; filter: drop-shadow(0 18px 22px rgba(0,0,0,.45)); --clip: var(--rect); --clip-in: var(--rect-in); --dim: none; }
.home-wall:has(.wall-tile:hover), .home-wall.is-choosing { --dim: grayscale(.85) brightness(.62) contrast(1.05); }
.home-wall__frame { position: absolute; inset: 0; z-index: 15; pointer-events: none; box-shadow: inset 0 0 0 .5cqw var(--color-primary); }
/* ==================================================================================================================
   HOMEPAGE GIRO 4 (08/10/2026), block A — «LUCA ABRONZINO SRL» over the wall. The claim island and its opening are gone. One line,
   centred on the whole hero, uppercase, white. SCHEDE CINGOLATI VERTEX (08/10/2026), point 2: IBM Plex Sans 700 (self-hosted, fonts.css)
   by choice of the owner, an exception of this title only (docs/design-system/WEB_EXTENSIONS.md); the outline (text-stroke, paint-order)
   and the dark halo are gone: only a soft shadow in two levels, a narrow one that gives the letters their edge and a wide blurred one
   that darkens the photos just behind them; their strength was raised step by step on the brightest and yellow photos, never adding an
   outline (qa/home-title-plex-out.mjs, qa/home-title-plex-contrast.py: median contrast at the edge of the letters 8.7–21:1, below 3:1
   only 4–6% of the edge pixels at rest, where a letter crosses a white CAD drawing). No panel, box, veil or band: the photos stay
   visible around the letters. The size (6.85cqw)
   keeps the width of the former Archivo 800 title (about 80% of the wall), always on one line. The title lets
   the pointer through (pointer-events: none): pointing a stone, or choosing one by touch, makes it withdraw (fade and a small lift, .3s)
   so the single photo is highlighted; it comes back .4s after the pointer leaves, as the claim did. Opening: a short rise and fade, once
   per page load, transform and opacity only. Reduced motion: no rise, no lift, only the fade.
   VELATURA (09/10/2026, decision of Luca): between the wall and the title a dark radial veil (45% at the centre and along the line of the
   title, fading to 12% towards the edges; not a box: the photos stay coloured) so the white reads on the coloured collage; measured with
   qa/home-veil-contrast.py (white ≥ 4.5:1 on ≥ 95% of the edge pixels of the letters at 1440 and 390). It is the ::before of the
   title layer, under the text: it lets the pointer through like the title, enters with the title (same curve and times, fade only) and
   withdraws with the same selectors and times (.3s out, back after .4s). Reduced motion: fade only. Forced colours: no veil.
   Layout, title, soft shadow and the movement of the wall are unchanged (qa/home-veil-out.mjs).
   ================================================================================================================== */
.home-title { position: absolute; inset: 0; z-index: 16; display: grid; place-items: center; pointer-events: none; }
.home-title__text { margin: 0; padding: 0 2cqw; white-space: nowrap; text-align: center; text-transform: uppercase; font-family: var(--font-body); line-height: 1;
  transition: opacity .35s ease .4s, transform .35s cubic-bezier(.2,.75,.2,1) .4s; animation: home-title-in .9s cubic-bezier(.2,.75,.2,1) .15s backwards; }
.home-title--halo .home-title__text { font-size: min(6.85cqw, 9.4rem); font-weight: 700; letter-spacing: .05em; color: #fff;
  text-shadow: 0 .02em .16em rgba(18,20,22,.95), 0 0 .8em rgba(18,20,22,.7); }
.home-wall:has(.wall-tile:hover) .home-title__text, .home-wall.is-choosing .home-title__text { opacity: 0; transform: translateY(-.3em) scale(.97); transition: opacity .3s ease, transform .3s ease; }
@keyframes home-title-in { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }
.home-title::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 80% 62% at 50% 50%, rgba(18,20,22,.45) 0%, rgba(18,20,22,.45) 55%, rgba(18,20,22,.12) 100%);
  transition: opacity .35s ease .4s; animation: home-veil-in .9s cubic-bezier(.2,.75,.2,1) .15s backwards; }
.home-wall:has(.wall-tile:hover) .home-title::before, .home-wall.is-choosing .home-title::before { opacity: 0; transition: opacity .3s ease; }
@keyframes home-veil-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .home-title__text { animation: none; transition: opacity .2s ease; }
  .home-wall:has(.wall-tile:hover) .home-title__text, .home-wall.is-choosing .home-title__text { transform: none; transition: opacity .2s ease; }
  .home-title::before { animation: home-veil-in .2s ease backwards; transition: opacity .2s ease; }
  .home-wall:has(.wall-tile:hover) .home-title::before, .home-wall.is-choosing .home-title::before { transition: opacity .2s ease; }
}
@media (forced-colors: active) { .home-title__text { color: CanvasText; background: Canvas; text-shadow: none; padding: .1em .3em; } .home-title::before { content: none; } }
@media (orientation: portrait) {
  .home-wall { aspect-ratio: 3 / 4; }
  .wall-layer--landscape { display: none; }
  .wall-layer--portrait { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .wall-tile, .wall-tile__rim, .wall-tile__face { transition: filter .2s ease; }
  .wall-tile__face img { transition: filter .2s ease, opacity .25s ease; }
  .wall-tile:hover, .wall-tile.is-active { transform: rotate(var(--r0)); }
}
@media (forced-colors: active) { .wall-tile__face { border: 1px solid CanvasText; } }

/* ==================================================================================================================
   Block C — the chapters after the wall: a preview of the whole site. Rhythm of backgrounds (surface, white, ink, yellow)
   and widths (contained, full); slogans as big opening sentences with the treatment of the Chi siamo titles (Archivo 800,
   tight tracking); the Chi siamo reveal system (data-reveal → .is-revealed, same curves and distances) with a stagger from
   --i; movement with transform and opacity only (P2); gold text only as a small heavy accent (P3).
   ================================================================================================================== */
.home-chapter { position: relative; padding-block: clamp(4rem, 9vw, 8.5rem); background: var(--color-surface); color: var(--color-ink); }
.home-chapter--white { background: var(--color-container); }
.home-chapter--dark { background: var(--color-ink); color: var(--color-container); }
.home-chapter--yellow { background: var(--color-primary); color: var(--color-ink); }
.home-chapter h2, .home-chapter h3, .home-chapter h4 { color: inherit; }
.home-chapter :where(p, ul, ol, dl, dd, figure, h2, h3, h4), .home-cat :where(p, ul, ol, dl, dd, figure, h2, h3) { margin: 0; }
.home-chapter :where(ul, ol), .home-cat :where(ul, ol) { padding: 0; list-style: none; }
.home-chapter img, .home-cat img { display: block; }
.home-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.home-chapter--dark a:not(.button) { color: inherit; text-decoration-color: var(--color-primary); }
.home-chapter--dark a:not(.button):hover { text-decoration-color: var(--color-container); }
/* Kickers and eyebrows: the mono labels of Chi siamo (.cw-kicker / .cw-micro). */
.home-kicker { margin: 0 0 26px; font: var(--weight-label) .75rem/1.6 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--color-gold-text); }
.home-kicker span { display: inline-block; min-width: 2.4em; }
.home-chapter--dark .home-kicker { color: var(--color-primary); }
.home-chapter--yellow .home-kicker { color: var(--color-ink); }
.home-eyebrow { margin: 0; font: var(--weight-label) .75rem/1.6 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-secondary); }
.home-chapter--dark .home-eyebrow, .home-band--dark .home-eyebrow { color: rgba(255,255,255,.74); }
.home-chapter--yellow .home-eyebrow { color: var(--ink-74); }
/* Slogans: the headline treatment of Chi siamo (.cw-headline) for the chapters, the h3 treatment for the sub-chapters. */
.home-slogan-line { margin: 0 0 var(--space-6); max-width: 21ch; font: var(--weight-heavy) clamp(2.4rem, 1.1rem + 4.6vw, 5.5rem)/1.04 var(--font-display); letter-spacing: -.045em; color: inherit; text-wrap: balance; }
.home-slogan-line--sub { max-width: 24ch; font-size: clamp(1.9rem, 1rem + 2.6vw, 3.4rem); line-height: 1.06; letter-spacing: -.04em; margin-bottom: var(--space-5); }
/* Links of a chapter: the site buttons; on ink and yellow the secondary one is outlined. */
.home-chapter__links { margin: clamp(2.5rem, 5vw, 4.25rem) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.home-chapter__links .button { margin: 0; }
.home-chapter--dark .button-secondary { color: var(--color-container); background: transparent; border-color: rgba(255,255,255,.55); }
.home-chapter--dark .button-secondary:hover { color: var(--color-ink); background: var(--color-primary); border-color: var(--color-primary); }
.home-chapter--yellow .button:not(.button-secondary) { background: var(--color-ink); color: var(--color-container); border-color: var(--color-ink); }
.home-chapter--yellow .button:not(.button-secondary):hover { background: var(--color-container); color: var(--color-ink); }
.home-chapter--yellow .button-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); }
.home-chapter--yellow .button-secondary:hover { background: var(--color-ink); color: var(--color-container); }

/* ---- 01 Chi siamo in breve: prose and KPI side by side, the two boxes, the certifications in a compact grid. */
.home-chi__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.25rem); align-items: start; }
.home-chi__prose { max-width: 30rem; font-size: 1.125rem; line-height: 1.6; }
.home-chi__prose p + p { margin-top: 20px; }
.home-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--color-ink); }
.home-kpi > div { display: flex; flex-direction: column; padding: 22px 20px 24px 0; border-bottom: 1px solid var(--ink-20); }
.home-kpi > div:nth-child(odd) { border-right: 1px solid var(--ink-20); }
.home-kpi > div:nth-child(even) { padding-left: 20px; }
.home-kpi dt { min-height: 2.6em; font: var(--weight-medium) .72rem/1.5 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-secondary); }
.home-kpi dd { margin-top: 12px; font: var(--weight-heavy) clamp(2.4rem, 1.5rem + 2.6vw, 3.6rem)/1.1 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-kpi small { font-size: .38em; letter-spacing: -.01em; }
.home-kpi dd > span:not([data-counter]) { display: block; margin-top: 6px; font: var(--weight-normal) .875rem/1.4 var(--font-body); letter-spacing: 0; white-space: normal; color: var(--text-secondary); }
.home-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); margin-top: clamp(2.5rem, 5vw, 4.25rem); }
.home-duo__box { display: flex; flex-direction: column; gap: 14px; padding: clamp(1.5rem, 3vw, 2.6rem); background: var(--color-container); border-left: var(--card-edge) solid var(--color-ink); box-shadow: var(--shadow-card); }
.home-duo__box h3 { margin: 0; font: var(--weight-heavy) clamp(1.9rem, 1.1rem + 2.2vw, 2.8rem)/1.05 var(--font-display); letter-spacing: -.045em; }
.home-duo__box p { font-size: 1rem; line-height: 1.55; }
.home-duo__box .text-link { align-self: flex-start; margin-top: auto; }
.home-duo__box--vertex { background: var(--color-ink); color: var(--color-container); border-left-color: var(--color-vertex); }
.home-duo__box--vertex .home-eyebrow { color: rgba(255,255,255,.74); }
.home-duo__box--vertex .text-link { color: var(--color-container); text-decoration-color: var(--color-vertex); }
.home-duo__note { margin-top: 20px; max-width: 64ch; font-size: .9375rem; line-height: 1.5; color: var(--text-secondary); }
.home-certs { margin-top: clamp(2.5rem, 5vw, 4.25rem); padding-top: 24px; border-top: 1px solid var(--ink-35); }
.home-certs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--grid-gap); margin-top: 10px; }
.home-certs__list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 16px 0 18px; border-top: 1px solid var(--ink-20); }
/* Giro 4, block C: the logos of the certification bodies, one height (44 px), whole (contain), aligned on the first line of the text. */
.home-certs__logo { width: 96px; height: 44px; object-fit: contain; object-position: left center; margin-top: 1px; }
.home-certs__text { display: grid; gap: 3px; min-width: 0; }
.home-certs__list strong { font: var(--weight-bold) 1.05rem/1.25 var(--font-display); letter-spacing: -.01em; }
.home-certs__list span { font-size: .9375rem; line-height: 1.45; color: var(--text-body); }
.home-certs__list small { font: var(--weight-medium) .7rem/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }

/* ---- 02 Catalogo: three full-width blocks on the reference layout. Wide side margins; a labels row with a thin rule; a mono eyebrow;
   the huge title on two lines at the left and a short column at the right (bold title, one line, solid button); the big image with a
   soft shadow; a thick rule with a mono list separated by «·» and a bold signature. */
.home-cat { position: relative; padding-block: clamp(3.25rem, 6.5vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; }
.home-cat--yellow { background: var(--color-primary); color: var(--color-ink); --cat-rule: var(--color-ink); --cat-rule-soft: rgba(34,38,42,.45); --cat-index: var(--ink-74); }
/* Vertex on ink (giro 2, B): the teal of Vertex (--color-vertex, Brand System v1.3) for the rules and the solid button only; thin text stays white. */
.home-cat--ink { background: var(--color-ink); color: var(--color-container); --cat-rule: var(--color-vertex); --cat-rule-soft: rgba(255,255,255,.22); --cat-index: rgba(255,255,255,.72); }
.home-cat--light { background: var(--color-surface); color: var(--color-ink); --cat-rule: var(--color-ink); --cat-rule-soft: rgba(34,38,42,.3); --cat-index: var(--color-gold-text); }
.home-cat__wrap { width: min(100% - 2 * clamp(1.25rem, 6.5vw, 8rem), 1680px); margin-inline: auto; }
.home-cat__top { display: flex; justify-content: space-between; gap: 24px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--cat-rule-soft); }
.home-cat__label { font: var(--weight-label) .72rem/1.6 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.home-cat__head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(17rem, .7fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; padding-top: clamp(2rem, 4vw, 3.5rem); }
.home-cat__lead { min-width: 0; }
.home-cat__eyebrow { margin: 0 0 18px; font: var(--weight-label) .78rem/1.6 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; }
.home-cat__title { margin: 0; font: 900 clamp(3.4rem, 1.4rem + 8.4vw, 10.5rem)/.9 var(--font-display); letter-spacing: -.05em; text-transform: uppercase; color: inherit; overflow-wrap: normal; }
.home-cat__line { display: block; }
/* Giro 2 (C.2.5): the three-line title of the comparison block at a dedicated, smaller size (about 250 px tall at 1440 instead of 500). */
.home-cat--light .home-cat__title { font-size: clamp(2.6rem, 1.2rem + 5.4vw, 7.2rem); }
.home-cat__side { display: grid; gap: 12px; max-width: 26rem; padding-bottom: .4em; }
.home-cat__side-title { margin: 0; font: var(--weight-bold) clamp(1.2rem, 1rem + .7vw, 1.6rem)/1.25 var(--font-display); letter-spacing: -.02em; max-width: none; }
.home-cat__side-title.home-slogan-line--side { font-size: clamp(1.5rem, 1.05rem + 1.3vw, 2.3rem); font-weight: var(--weight-heavy); line-height: 1.08; letter-spacing: -.035em; margin-bottom: 0; }
.home-cat__side p { font-size: 1.0625rem; line-height: 1.5; }
.home-cat__side .button { justify-self: start; margin-top: 6px; }
.home-cat--yellow .button { background: var(--color-ink); color: var(--color-container); border-color: var(--color-ink); }
.home-cat--yellow .button:hover { background: var(--color-container); color: var(--color-ink); }
.home-cat--ink .button { background: var(--color-vertex); color: var(--color-container); border-color: var(--color-vertex); }
.home-cat--ink .button:hover { background: var(--color-container); color: var(--color-ink); border-color: var(--color-container); }
.home-cat__media { position: relative; margin: clamp(2rem, 4vw, 3.5rem) auto 0; width: 100%; display: grid; justify-items: center; }
.home-cat__media img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(0,0,0,.32)); }
/* The soft shadow that widens as the image rises: an ellipse under the image, moved with transform and opacity only. */
.home-cat__media::after { content: ''; position: absolute; left: 8%; right: 8%; bottom: -4%; height: 16%; background: radial-gradient(ellipse at center, rgba(0,0,0,.34), rgba(0,0,0,0) 70%); transform: scaleX(.55); opacity: 0; transition: transform 1.1s cubic-bezier(.2,.75,.25,1) .25s, opacity .9s ease .25s; pointer-events: none; }
.home-cat__media.is-revealed::after { transform: none; opacity: 1; }
.home-cat__foot { display: grid; gap: 14px; margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: 14px; border-top: 4px solid var(--cat-rule); }
/* Giro 2 (C.1): the categories in a regular grid, every entry a link (mono index, name in Archivo), one thin rule per entry. */
.home-cat__cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.home-cat__cats li { min-width: 0; border-top: 1px solid var(--cat-rule-soft); }
.home-cat__cats a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); align-items: baseline; gap: 10px; min-height: var(--target-min); padding: 12px 0 14px; color: inherit; text-decoration: none; }
.home-cat__n { font: var(--weight-label) .72rem/1.6 var(--font-mono); letter-spacing: .12em; color: var(--cat-index); }
.home-cat__cat { font: var(--weight-bold) 1.05rem/1.25 var(--font-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.home-cat__cats a:hover .home-cat__cat, .home-cat__cats a:focus-visible .home-cat__cat { text-decoration: underline; text-decoration-color: var(--cat-rule); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.home-cat__cats a:focus-visible { outline: var(--focus-width) solid currentColor; outline-offset: var(--focus-gap); }
/* The comparison preview (block 03): styles/compare-preview.css (shared with the Catalogue landing); here only its place in the block. */
.home-cat .cmp-preview { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* ---- 03 Come lavoriamo: the three phases in sequence (a rule that draws itself, one after the other), the six services on ink,
   the assistance with the red screen photo. */
.home-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.6rem); margin-top: 18px; }
.home-phases li { position: relative; padding-top: 22px; border-top: 2px solid var(--ink-20); }
.home-phases li::before { content: ''; position: absolute; left: 0; top: -2px; width: 100%; height: 2px; background: var(--color-ink); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2,.75,.25,1) calc(var(--i, 0) * 260ms + 180ms); }
.home-phases li.is-revealed::before { transform: none; }
.home-phase__n { display: block; margin-bottom: 14px; font: var(--weight-label) .8rem/1.5 var(--font-mono); color: var(--color-gold-text); }
.home-phases h3 { margin: 0 0 12px; font: var(--weight-heavy) clamp(1.6rem, 1rem + 1.6vw, 2.3rem)/1.08 var(--font-display); letter-spacing: -.04em; }
.home-phase__lead { margin: 0 0 10px; font-weight: var(--weight-label); font-size: 1.05rem; line-height: 1.45; }
.home-phases p { font-size: .9375rem; line-height: 1.55; color: var(--text-body); }
.home-band--dark { background: var(--color-ink); color: var(--color-container); }
.home-services { margin-top: clamp(3rem, 7vw, 6rem); padding-block: clamp(3rem, 6vw, 5.5rem); }
.home-services__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--grid-gap); margin-top: 8px; }
.home-services__list li { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.22); }
.home-service__n { flex: 0 0 auto; white-space: nowrap; padding-top: 4px; font: var(--weight-label) .8rem/1.5 var(--font-mono); color: var(--color-primary); }
.home-services h4 { margin: 0 0 6px; font: var(--weight-bold) 1.2rem/1.3 var(--font-display); letter-spacing: -.01em; }
.home-services p { font-size: .9375rem; line-height: 1.5; color: rgba(255,255,255,.8); }
.home-support { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-top: clamp(3rem, 7vw, 6rem); }
.home-support__text > p:not(.home-eyebrow) { font-size: 1.0625rem; line-height: 1.55; }
.home-support__list { display: grid; gap: 14px; margin-top: 22px; }
.home-support__list div { padding-top: 12px; border-top: 1px solid var(--ink-20); }
.home-support__list dt { font: var(--weight-bold) 1.05rem/1.3 var(--font-display); }
.home-support__list dd { margin-top: 4px; font-size: .9375rem; line-height: 1.5; color: var(--text-body); }
.home-support__figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--focus, 50% 50%); box-shadow: var(--shadow-card); }

/* ---- 04 I nostri lavori: three cards with the KPI veil on hover (the veil of Chi siamo), the clients in a slow scroll. */
.home-works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.home-work { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.home-work:focus-visible { outline: var(--focus-width) solid var(--color-primary); outline-offset: var(--focus-gap); }
.home-work__cover { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-photo-bg); }
.home-work__cover img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform .6s cubic-bezier(.25,.1,.25,1); }
.home-work:hover .home-work__cover img, .home-work:focus-visible .home-work__cover img { transform: scale(1.04); }
.home-work__veil { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; padding: 22px 24px; background: linear-gradient(to top, rgba(34,38,42,.94) 0%, rgba(34,38,42,.6) 55%, rgba(34,38,42,0) 100%); color: var(--color-container); opacity: 0; transform: translateY(100%); transition: transform .35s cubic-bezier(.25,.1,.25,1), opacity .25s ease; pointer-events: none; }
.home-work:hover .home-work__veil, .home-work:focus-visible .home-work__veil { opacity: 1; transform: none; }
.home-work__veil dl { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; width: 100%; }
.home-work__veil dt { font: var(--weight-label) .68rem/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.home-work__veil dd { margin-top: 4px; font: var(--weight-heavy) 1.15rem/1.15 var(--font-display); letter-spacing: -.02em; color: var(--color-primary); overflow-wrap: anywhere; }
.home-work__veil > dl > div:first-child dd { font-size: 1.6rem; }
.home-work__meta { display: grid; gap: 6px; padding-top: 16px; }
.home-work__micro { font: var(--weight-label) .7rem/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.home-work__title { font: var(--weight-heavy) 1.35rem/1.15 var(--font-display); letter-spacing: -.03em; }
.home-work__key { font-size: .9rem; color: rgba(255,255,255,.85); }
.home-work__key strong { margin-right: 4px; font: var(--weight-heavy) 1.3rem/1 var(--font-display); letter-spacing: -.03em; color: var(--color-primary); }
.home-clients { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 26px; border-top: 1px solid rgba(255,255,255,.22); overflow: hidden; }
.home-clients__title { margin: 8px 0 22px; font: var(--weight-heavy) clamp(1.5rem, 1rem + 1.4vw, 2.2rem)/1.1 var(--font-display); letter-spacing: -.035em; }
.home-clients__scroll { display: flex; width: max-content; animation: home-marquee 70s linear infinite; }
.home-clients__scroll:hover { animation-play-state: paused; }
.home-clients__track { display: flex; gap: 18px; padding-right: 18px; }
.home-clients__track li { display: grid; place-items: center; width: 11.5rem; height: 6rem; padding: 14px 18px; background: var(--color-container); }
.home-clients__track img { width: 100%; height: 3.6rem; object-fit: contain; }
@keyframes home-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ---- 05 Usato: the three cards of block B (home-used.css) on yellow. */
.home-used { margin-top: 0; }
.home-used__fallback { font-size: 1.0625rem; }
.home-chapter--yellow .home-used-card { color: var(--color-ink); }
.home-chapter--yellow .home-used-card:hover { box-shadow: 0 14px 30px rgba(60,44,0,.3); }

/* ---- 06 Persone, storia e sede (giro 2): the seat only, with the two buttons to Chi siamo. */
.home-seat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.25rem); align-items: center; margin-top: clamp(3rem, 7vw, 6rem); }
.home-seat__figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--focus, 50% 50%); box-shadow: var(--shadow-card); }
.home-seat__figure figcaption { margin-top: 10px; font: var(--weight-normal) .75rem/1.5 var(--font-mono); color: var(--text-secondary); }
.home-seat__address { margin: 10px 0 18px; line-height: 1.5; }
.home-seat__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 16px; margin-bottom: 18px; }
.home-seat__stats dt { font: var(--weight-medium) .66rem/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.home-seat__stats dd { margin-top: 6px; font: var(--weight-heavy) 2rem/1.1 var(--font-display); letter-spacing: -.05em; }
.home-seat__stats small { font-size: .45em; letter-spacing: 0; }
.home-seat__text > p:last-child { font-size: 1rem; line-height: 1.55; color: var(--text-body); }

/* ---- 07 Lavora con noi: the open positions (number from the public summary) and the free application. */
.home-lavora__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.home-lavora__box { display: grid; gap: 10px; padding: clamp(1.5rem, 3vw, 2.6rem); background: var(--color-container); color: var(--color-ink); border-left: var(--card-edge) solid var(--color-ink); box-shadow: var(--shadow-card); text-decoration: none; transition: transform .22s cubic-bezier(.25,.1,.25,1), box-shadow .22s ease; }
.home-lavora__box:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(80,58,0,.22); }
.home-lavora__box:focus-visible { outline: var(--focus-width) solid var(--color-ink); outline-offset: var(--focus-gap); }
.home-lavora__box--free { background: var(--color-ink); color: var(--color-container); border-left-color: var(--color-primary); }
.home-lavora__box--free .home-eyebrow { color: rgba(255,255,255,.74); }
.home-lavora__count { font: var(--weight-heavy) clamp(1.6rem, 1rem + 1.6vw, 2.4rem)/1.1 var(--font-display); letter-spacing: -.035em; }
.home-lavora__count[data-count]:not([data-count="0"])::first-letter { color: var(--color-gold-text); }
.home-lavora__box--free .home-lavora__count[data-count]::first-letter { color: inherit; }
.home-lavora__line { font-size: .9375rem; line-height: 1.5; }
.home-lavora__cta { margin-top: 8px; font-weight: var(--weight-label); text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* ---- 08 Contatti: the hours with the live state (the markup of the Contatti page, painted by assets/contact-hours.js), the essential
   contacts, the invitation to the form and the map. */
.home-contatti__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.home-chapter--contatti .contact-hours { display: grid; gap: 2px; margin-top: 14px; }
.home-chapter--contatti .contact-hours__days { font: var(--weight-label) var(--text-small)/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.home-chapter--contatti .contact-hours__time { font: var(--weight-heavy) clamp(2.2rem, 1rem + 2.2vw, 3.3rem)/1 var(--font-display); letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.home-chapter--contatti .contact-hours__time--text { font-size: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); line-height: 1.2; white-space: normal; }
.home-chapter--contatti .contact-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2); border-radius: 999px; background: rgba(255,255,255,.12); color: var(--color-container); font-weight: var(--weight-label); font-size: var(--text-small); }
.home-chapter--contatti .contact-status.is-open { background: var(--color-primary); color: var(--color-ink); }
.home-chapter--contatti .contact-status__dot { width: .625rem; height: .625rem; border-radius: 999px; background: currentColor; opacity: .55; }
.home-chapter--contatti .contact-status.is-open .contact-status__dot { opacity: 1; animation: home-pulse 2.2s ease-in-out infinite; }
.home-chapter--contatti .contact-status__detail { font-weight: var(--weight-normal); opacity: .85; }
@keyframes home-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }
.home-contatti__address { margin-top: 14px; line-height: 1.5; }
.home-contatti__address strong { font-family: var(--font-display); font-weight: var(--weight-bold); }
.home-contatti__links { display: grid; gap: 6px; margin-top: 12px; }
.home-contatti__links a { display: inline-flex; align-items: center; gap: 10px; min-height: var(--target-min); font-weight: var(--weight-label); }
.home-contatti__cta > p:not(.home-eyebrow) { margin-top: 14px; font-size: 1.0625rem; line-height: 1.55; }
.home-contatti__steps { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.22); }
.home-contatti__steps li { display: flex; gap: 14px; align-items: baseline; font-size: .9rem; }
.home-contatti__steps span { font: var(--weight-normal) .78rem/1.5 var(--font-mono); color: var(--color-primary); }
.home-contatti__cta .home-chapter__links { margin-top: 22px; }

/* ---- Reveal (the Chi siamo system: same curves, distance and observer; stagger from --i). Parallax on two photos (transform only). */
.home-main.is-motion [data-reveal] { transition: opacity .65s ease, transform .85s cubic-bezier(.2,.75,.25,1); transition-delay: calc(var(--i, 0) * 90ms); }
.home-main.is-motion [data-reveal]:not(.is-revealed) { opacity: 0; transform: translate3d(0, 34px, 0); }
.home-main.is-motion .home-cat__head [data-reveal] { transition-delay: calc(var(--i, 0) * 140ms); }
.home-main.is-motion .home-cat__line:not(.is-revealed) { transform: translate3d(0, .6em, 0); }
.home-main.is-motion .home-cat__media--rise:not(.is-revealed) { transform: translate3d(0, 56px, 0); }
.home-main.is-motion .home-cat__media--side:not(.is-revealed) { transform: translate3d(90px, 0, 0); }
.home-main.is-motion .home-cat__media { transition-duration: .7s, 1.1s; }
.home-main.is-motion .home-phases li[data-reveal] { transition-delay: calc(var(--i, 0) * 220ms); }
.home-main.is-motion [data-parallax] { transform: translate3d(0, calc(var(--py, 0) * 1px), 0); will-change: transform; }

/* ---- Responsive. */
@media (max-width: 74rem) {
  .home-cat__head { grid-template-columns: minmax(0, 1.3fr) minmax(15rem, .8fr); }
  .home-cat__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 63.99rem) {
  .home-chi__grid, .home-support, .home-seat { grid-template-columns: minmax(0, 1fr); }
  .home-chi__prose { max-width: 36rem; }
  .home-certs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-cat__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .home-cat__side { max-width: 34rem; padding-bottom: 0; }
  .home-services__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-contatti__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-contatti__cta { grid-column: 1 / -1; }
  .home-support__figure { order: -1; }
}
@media (max-width: 47.99rem) {
  .home-chapter { padding-block: clamp(3rem, 10vw, 4.5rem); }
  .home-kicker { margin-bottom: 18px; }
  .home-slogan-line { margin-bottom: var(--space-5); }
  .home-kpi dt { min-height: 0; }
  .home-kpi dd { white-space: normal; overflow-wrap: anywhere; }
  .home-chapter--contatti .contact-hours__time { white-space: normal; overflow-wrap: anywhere; }
  .home-duo, .home-certs__list, .home-phases, .home-services__list, .home-works, .home-lavora__grid, .home-contatti__grid { grid-template-columns: minmax(0, 1fr); }
  .home-cat { padding-block: 2.75rem 2.25rem; }
  .home-cat__top { flex-direction: column; gap: 4px; }
  .home-cat__title { font-size: clamp(2.6rem, 13vw, 4.6rem); }
  .home-cat__media img { max-width: 100% !important; }
  .home-cat__foot { flex-direction: column; gap: 14px; }
  .home-cat__cats { grid-template-columns: minmax(0, 1fr); }
  .home-seat__stats { grid-template-columns: 1fr 1fr; }
  .home-clients__track li { width: 9rem; height: 5rem; }
  .home-work__veil { padding: 16px 18px; }
  .home-work__veil dl { grid-auto-flow: row; gap: 8px; }
}
@media (max-width: 35.99rem) {
  .home-kpi dd { font-size: 2.1rem; }
  .home-kpi dt { font-size: .64rem; }
  .home-certs__list { grid-template-columns: minmax(0, 1fr); }
  .home-cat__wrap { width: calc(100% - 2.5rem); }
}
@media (hover: none) {
  .home-work__veil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-main.is-motion [data-reveal], .home-main [data-reveal] { opacity: 1; transform: none; transition: none; }
  .home-main.is-motion [data-parallax] { transform: none; }
  .home-cat__media::after { transform: none; opacity: 1; transition: opacity .25s ease; }
  .home-phases li::before { transition: opacity .25s ease; transform: none; }
  .home-work__cover img, .home-work__veil, .home-lavora__box, .home-used-card { transition: opacity .15s ease; }
  .home-work:hover .home-work__cover img { transform: none; }
  .home-work__veil { transform: none; }
  .home-lavora__box:hover { transform: none; }
  .home-clients__scroll { animation: none; width: auto; flex-wrap: wrap; }
  .home-clients__track { flex-wrap: wrap; padding-right: 0; }
  .home-clients__track[aria-hidden] { display: none; }
  .home-chapter--contatti .contact-status.is-open .contact-status__dot { animation: none; }
}
@media (forced-colors: active) {
  .home-duo__box, .home-lavora__box, .home-work__cover, .home-clients__track li { border: 1px solid CanvasText; }
}
@media print {
  .home-main [data-reveal] { opacity: 1 !important; transform: none !important; }
  .home-clients__scroll { animation: none; }
}

/* styles/consent.css */
/* ==================================================================================================================
   Cookie banner (PRIVACY E GDPR, 07/10/2026): one panel in the style of the island (ink, rounded, the island shadow), at the bottom,
   centred. While it is open the page gets a bottom padding as tall as the panel, so it never covers the buttons of a form: the page can
   always be scrolled above it. The temporary exception to the island rule (only the island is fixed) lasts until a choice is made.
   Three buttons of equal weight on each level; the switches of the optional categories; no animation.
   Linked only by the rendered banner (src/content/consent-banner.json enabled).
   ================================================================================================================== */
.consent-banner { position: fixed; inset: auto 0 0; z-index: 1000; padding: 0 var(--page-padding) .75rem; pointer-events: none; }
.consent-banner[hidden] { display: none; }
/* While the mobile menu of the island is open the banner steps aside (it would cover the last entries) and comes back when the menu closes. */
html:has(.menu-toggle[aria-expanded="true"]) .consent-banner { visibility: hidden; }
.consent-banner__panel { position: relative; width: min(100%, 52rem); max-height: var(--consent-room, calc(100vh - var(--island-clearance, 5rem) - .75rem)); overflow: auto; margin-inline: auto; padding: 1.25rem 1.5rem 1.25rem; background: var(--color-ink); color: var(--color-container); border-radius: 1.75rem; box-shadow: 0 14px 34px rgba(34,38,42,.4), 0 0 0 1px rgba(255,255,255,.14); pointer-events: auto; }
.consent-banner__level { display: grid; gap: var(--space-2); }
.consent-banner__level[hidden] { display: none; }
.consent-banner__title { margin: 0; padding-right: 3rem; color: var(--color-container); font: var(--weight-bold) var(--text-h4)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-title-card); }
.consent-banner__title:focus { outline: none; }
.consent-banner__title:focus-visible { outline: var(--focus-width) solid var(--color-primary); outline-offset: var(--focus-gap); }
.consent-banner__text { margin: 0; max-width: 72ch; color: rgba(255,255,255,.88); font: var(--weight-normal) var(--text-small)/var(--lh-body) var(--font-body); }
.consent-banner__links { margin: 0; }
.consent-banner .text-link { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--color-container); font-size: var(--text-small); text-decoration: underline; text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.consent-banner__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-1); }
/* Equal weight: the same outlined pill for the three buttons of each level. */
.consent-button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); padding: 0 var(--space-4); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: transparent; color: var(--color-container); font: var(--weight-label) var(--text-small)/1.2 var(--font-body); cursor: pointer; }
.consent-button:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-ink); }
.consent-banner :is(button, a, input):focus-visible { outline: var(--focus-width) solid var(--color-primary); outline-offset: var(--focus-gap); }
.consent-banner__close { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: var(--target-min); height: var(--target-min); border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--color-container); font: var(--weight-normal) 1.5rem/1 var(--font-body); cursor: pointer; }
.consent-banner__close:hover { background: var(--color-primary); color: var(--color-ink); }
/* Second level: one row per category. */
.consent-categories { display: grid; gap: 0; margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.consent-category { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-top: 1px solid rgba(255,255,255,.18); }
.consent-category__copy { display: grid; gap: 2px; min-width: 0; cursor: default; }
label.consent-category__copy { cursor: pointer; }
.consent-category__label { margin: 0; font: var(--weight-bold) .95rem/1.3 var(--font-body); color: var(--color-container); }
.consent-category__text { margin: 0; font-size: var(--text-small); line-height: 1.45; color: rgba(255,255,255,.8); }
.consent-category__state { font: var(--weight-label) var(--text-metadata)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); white-space: nowrap; }
.consent-category.is-unused .consent-category__label { color: rgba(255,255,255,.8); }
/* The switch: a real checkbox with role="switch", drawn as a pill; the yellow fill when on. */
.consent-switch { position: relative; display: inline-flex; width: 3.25rem; height: 1.875rem; flex-shrink: 0; }
.consent-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.consent-switch__track { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.55); }
.consent-switch__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 1.375rem; height: 1.375rem; border-radius: 999px; background: var(--color-container); }
.consent-switch input:checked + .consent-switch__track { background: var(--color-primary); border-color: var(--color-primary); }
.consent-switch input:checked + .consent-switch__track::after { left: auto; right: 3px; background: var(--color-ink); }
.consent-switch input:focus-visible + .consent-switch__track { outline: var(--focus-width) solid var(--color-primary); outline-offset: var(--focus-gap); }
/* Room for the panel at the bottom of the page while it is open. */
html[data-consent-state="open"] body { padding-bottom: var(--consent-banner-height, 0px); }
@media (max-width: 36rem) {
  .consent-banner { padding: 0 .5rem .5rem; }
  .consent-banner__panel { padding: 1rem 1rem 1rem; border-radius: 1.25rem; }
  .consent-banner__actions { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) { .consent-banner__panel, .consent-button, .consent-switch__track { border: 1px solid CanvasText; } }
@media print { .consent-banner { display: none !important; } html[data-consent-state="open"] body { padding-bottom: 0; } }