/* Google Fonts Localizzati */
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpHtKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYrXtKgS4.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYpntKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.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: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggqxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggSxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggixSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggmxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggexSg.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggqxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggSxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggixSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggmxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggexSg.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggqxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggSxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggixSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggmxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggexSg.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggqxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggOxSuXd.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggSxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggixSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggmxSuXd.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/xn7gYHE41ni1AdIRggexSg.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;
}


/* Variabili globali: definiscono palette, spaziature e ombre per mantenere coerenza visiva. */
:root {
  --color-ivory: #fbfaf5;
  --color-cream: #f4efe4;
  --color-sage: #aebca5;
  --color-olive: #627057;
  --color-moss: #2f392d;
  --color-bronze: #9a6542;
  --color-cocoa: #5b4637;
  --color-ink: #1d211c;
  --color-muted: #687064;
  --color-line: rgba(47, 57, 45, 0.11);
  --shadow-soft: 0 18px 48px rgba(47, 57, 45, 0.075);
  --shadow-hover: 0 22px 58px rgba(47, 57, 45, 0.12);
  --radius-small: 8px;
  --radius-media: 20px;
  --site-max: 1160px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-space: clamp(72px, 9vw, 126px);
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Reset essenziale: riduce differenze tra browser e rende il box model prevedibile. */
* {
  box-sizing: border-box;
}

/* Scorrimento fluido: migliora il passaggio tra ancore interne come territorio e catalogo. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
}

/* Scrollbar personalizzata premium */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-ivory);
}

::-webkit-scrollbar-thumb {
  background: var(--color-moss);
  border-radius: 10px;
  border: 2px solid var(--color-ivory);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-olive);
}

/* Corpo pagina: imposta stile base, palette chiara e tipografia raffinata senza font esterni. */
body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-ink);
  font-family: var(--font-sans);
  line-height: 1.62;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Media responsivi: impedisce a immagini e video di uscire dai contenitori. */
img,
video {
  display: block;
  max-width: 100%;
}

/* Link: rimuove lo stile predefinito e usa il colore del contesto. */
a {
  color: inherit;
  text-decoration: none;
}

/* Pulsanti reali: ereditano la tipografia e restano coerenti con i link-button. */
button {
  font: inherit;
}

/* Focus visibile: mantiene accessibilità da tastiera senza introdurre colori aggressivi. */
:focus-visible {
  outline: 2px solid var(--color-bronze);
  outline-offset: 4px;
}

/* Classe screen-reader: mantiene testo disponibile agli screen reader ma invisibile a schermo. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link di salto: compare solo quando riceve focus da tastiera. */
.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  transform: translateY(-140%);
  padding: 10px 14px;
  border-radius: var(--radius-small);
  background: var(--color-moss);
  color: white;
  transition: transform 180ms ease;
}

/* Stato focus del link di salto: lo rende immediatamente utilizzabile. */
.skip-link:focus {
  transform: translateY(0);
}

/* Header sticky: resta discreto ma sempre accessibile durante la navigazione. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: rgba(251, 250, 245, 0.76);
  backdrop-filter: blur(28px) saturate(1.08);
  transition: border-color 420ms ease, background 420ms ease, box-shadow 420ms ease;
  padding-left: max(env(safe-area-inset-left, 0px), 0px);
  padding-right: max(env(safe-area-inset-right, 0px), 0px);
}

/* Stato header durante lo scroll: aggiunge un bordo sottile per separarlo dal contenuto. */
.site-header.is-scrolled {
  border-bottom-color: var(--color-line);
  background: rgba(251, 250, 245, 0.92);
  box-shadow: 0 10px 34px rgba(47, 57, 45, 0.045);
}

/* Shell della navigazione: centra i contenuti e mantiene spaziature Apple-like. */
.nav-shell {
  position: relative;
  z-index: 2;
  width: min(var(--site-max), calc(100% - var(--gutter)));
  min-height: 70px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 3vw, 24px);
}

/* Logo navbar: solo il logo, zero decorazioni. */
.brand-mark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-shrink: 0;
  max-width: min(200px, 46vw);
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  overflow: visible;
  transform: none;
  transition: opacity 260ms ease;
}

.brand-mark:hover {
  opacity: 0.75;
  transform: none;
  box-shadow: none;
}

.brand-mark img {
  display: block;
  width: 140px;
  max-width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
  border: none;
  background: none;
}

@media (max-width: 900px) {
  .brand-mark {
    max-width: min(200px, 44vw);
  }

  .brand-mark img {
    width: clamp(96px, 38vw, 128px);
    max-height: 46px;
  }
}

/* Menu desktop: distribuisce i link con ritmo morbido e leggibile. */
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.7vw, 22px);
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Link di navigazione: transizione breve per hover pulito. */
.nav-links a {
  transition: color 260ms ease, opacity 260ms ease;
}

/* Hover e pagina corrente: evidenziano la navigazione senza appesantire. */
.nav-links a:hover,
.nav-links a[aria-current],
.nav-links a.is-active {
  color: var(--color-moss);
}

.nav-cta {
  padding: 9px 14px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  color: var(--color-moss) !important;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 300ms ease;
  margin-left: 8px;
}

.theme-toggle:hover {
  transform: rotate(15deg) scale(1.1);
}

/* Toggle mobile: nascosto su desktop, visibile nelle media query. */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

/* Linee del toggle: compongono l’icona menu senza SVG esterni. */
.nav-toggle span:not(.sr-only) {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 4px auto;
  background: var(--color-moss);
  transition: transform 180ms ease, opacity 180ms ease;
}

/* Sezioni generiche: mantengono larghezza massima e respiro verticale. */
main > section,
.site-footer {
  width: min(var(--site-max), calc(100% - var(--gutter)));
  margin: 0 auto;
}

/* Hero video fullscreen: override — deve occupare TUTTA la larghezza viewport */
main > .hero-video-fullscreen {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Ancore sezione: mantengono lo scroll allineato sotto la navbar sticky. */
main > section[id] {
  scroll-margin-top: 96px;
}

/* Hero home: griglia ampia con testo e media bilanciati. */
.hero {
  min-height: calc(92vh - 70px);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 82px);
  padding: clamp(48px, 7vw, 92px) 0 clamp(44px, 6vw, 80px);
}

/* Testo hero: limita la larghezza per conservare una lettura elegante. */
.hero-copy,
.page-hero-copy {
  max-width: 580px;
}

/* Eyebrow: piccola etichetta editoriale usata in tutto il sito. */
.eyebrow {
  margin: 0 0 12px;
  color: var(--color-bronze);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Titolo principale: grande ma controllato, senza scaling legato alla viewport. */
h1 {
  margin: 0;
  max-width: 680px;
  font-family: var(--font-display);
  font-size: clamp(2.82rem, 5.7vw, 5.45rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0;
}

/* Titoli secondari: restano ampi ma più sobri del titolo hero. */
h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.92rem, 3.25vw, 3.35rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0;
}

/* Titoli terziari: pensati per card e pannelli compatti. */
h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: 0;
}

/* Paragrafi: colore attenuato e misura comoda per lettura editoriale. */
p {
  color: var(--color-muted);
  font-size: 0.96rem;
}

/* Testo hero: aumenta leggermente la misura per il messaggio introduttivo. */
.hero-text,
.page-hero-copy p {
  max-width: 540px;
  margin: 22px 0 0;
  font-size: clamp(1rem, 1.22vw, 1.14rem);
  line-height: 1.72;
}

/* Gruppo CTA: mantiene distanza regolare tra azioni principali e secondarie. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* Bottoni: stile pill pulito e coerente con un sito vetrina premium. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease, background 320ms ease, border-color 320ms ease;
}

/* Bottone primario: usa il verde profondo per un contrasto raffinato. */
.button-primary {
  background: var(--color-moss);
  color: white;
  box-shadow: 0 10px 28px rgba(47, 57, 45, 0.14);
}

/* Bottone secondario: mantiene leggerezza e bordo sottile. */
.button-secondary {
  border: 1px solid var(--color-line);
  background: rgba(255, 255, 255, 0.32);
  color: var(--color-moss);
}

/* Hover dei bottoni: micro-interazione discreta e coerente. */
.button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

/* Media hero: cornice morbida ma non decorativa, con video pieno e prodotto protagonista. */
.hero-media,
.page-hero-media,
.territory-media {
  overflow: hidden;
  border-radius: var(--radius-media);
  background: white;
  box-shadow: var(--shadow-soft);
  transform: translate3d(0, 0, 0);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 700ms ease;
  will-change: transform;
}

/* Video hero: mantiene proporzioni cinematiche e riempie il contenitore. */
.hero-media video {
  width: 100%;
  aspect-ratio: 4 / 4.82;
  object-fit: cover;
}

.page-hero-media img {
  width: 100%;
  aspect-ratio: 4 / 4.85;
  object-fit: cover;
}

.territory-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Fascia quieta: crea una pausa visiva in crema senza diventare una card interna. */
.quiet-band {
  padding: clamp(36px, 6vw, 64px);
  border-radius: var(--radius-media);
  background: rgba(244, 239, 228, 0.72);
}

/* Spaziatura progressiva: ogni sezione dopo la prima riceve lo stesso respiro verticale. */
main > section + section {
  margin-top: var(--section-space);
}

@media (max-width: 900px) {
  :root {
    --section-space: 64px;
  }
}

/* Heading di sezione: imposta larghezza leggibile e margine inferiore coerente. */
.section-heading {
  max-width: 720px;
  margin-bottom: 30px;
}

/* Contenitore home: ospita la galleria rituali generata dallo script. */
.editorial-gallery {
  width: 100%;
}

/* Galleria rituali: desktop a griglia fitta; mobile a scorrimento orizzontale con snap. */
.ritual-gallery {
  width: 100%;
}

.ritual-gallery-hint {
  display: none;
  margin: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.02em;
}

.ritual-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 20px);
}

.ritual-gallery-item {
  overflow: hidden;
  margin: 0;
  min-height: 0;
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: var(--shadow-soft);
}

.ritual-gallery-item--lead {
  grid-column: 1 / span 4;
}

.ritual-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 200px;
  object-fit: cover;
  transition: transform 950ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 950ms ease;
}

/* La prima immagine mostra l'intera linea prodotti: non ritagliarla */
.ritual-gallery-item--lead img {
  object-fit: contain;
  background: transparent;
  padding: 0;
  max-height: 50vh;
}

.ritual-gallery-item:hover img {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}

/* Heading diviso: allinea titolo e link quando c’è spazio disponibile. */
.split-heading {
  max-width: none;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

/* Link testuale: CTA secondaria elegante con sottolineatura animata. */
.text-link {
  display: inline-flex;
  color: var(--color-moss);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Sottolineatura del link testuale: appare tramite background per una transizione morbida. */
.text-link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}

/* Griglia highlight: tre colonne compatte per le promesse principali. */
.highlight-grid,
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Pannelli morbidi: card leggere per contenuti ripetuti, con raggio entro 8px quando compatte. */
.soft-panel,
.value-item,
.mission-card,
.certification-panel {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.34);
  padding: clamp(20px, 2.8vw, 30px);
  transition: border-color 360ms ease, background 360ms ease, transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Numeri pannelli: aggiungono gerarchia senza icone decorative pesanti. */
.panel-number {
  display: inline-block;
  margin-bottom: 26px;
  color: var(--color-bronze);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Testi dentro pannelli: mantengono il contenuto breve e leggibile. */
.soft-panel p,
.value-item p,
.mission-card p,
.certification-panel p {
  margin-bottom: 0;
}

/* Griglia categorie: gestita dallo script, usa immagini ampie e titoli puliti. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* Card categoria: link grande e stabile con hover morbido. */
.category-card {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.32);
  transform: translate3d(0, 0, 0);
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 520ms ease, border-color 520ms ease, background 520ms ease;
  will-change: transform;
}

/* Immagine categoria: rapporto fisso per impedire salti di layout. */
.category-card img {
  width: 100%;
  aspect-ratio: 1 / 1.02;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 900ms ease;
}

/* Testo categoria: descrive la linea senza sovrapporsi all’immagine. */
.category-card div {
  padding: 16px;
}

/* Hover categoria: leggero sollevamento e zoom immagine. */
.category-card:hover {
  transform: translateY(-8px);
  border-color: rgba(154, 101, 66, 0.24);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-hover);
}

/* Zoom immagine categoria: rende la micro-interazione più fluida. */
.category-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.02);
}

/* Sezione territorio home: griglia con immagine e testo per dare respiro narrativo. */
.territory-section,
.territory-detail {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 6vw, 72px);
  align-items: center;
}

/* Copia territorio: limita la larghezza per conservare ritmo editoriale. */
.territory-copy {
  max-width: 620px;
}

/* Griglia prodotti: layout responsive che valorizza immagini grandi e card pulite. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 44px);
}

/* Griglia compatta home: usa quattro colonne quando lo spazio lo permette. */
.compact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Video showcase: raccoglie tutti i video in una griglia leggibile e non dispersiva. */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Card video: mantiene ogni clip ordinata, con caption breve e media protagonista. */
.video-card {
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: var(--shadow-soft);
  transition: transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 560ms ease, border-color 560ms ease;
}

/* Media video: rapporto fisso per evitare salti e rendere la sezione più ordinata. */
.video-card video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--color-cream);
  pointer-events: none;
}

/* Caption video: chiarisce cosa si sta guardando con poco testo. */
.video-card div {
  padding: 16px;
}

/* Hover video: rende la sezione più viva mantenendo un tono premium. */
.video-card:hover {
  transform: translateY(-8px);
  border-color: rgba(154, 101, 66, 0.24);
  box-shadow: var(--shadow-hover);
}

/* Social showcase: video principale a sinistra e foto Instagram a destra (3 foto). */
.video-grid--social {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 20px);
  align-items: stretch;
}

.video-card-lead {
  grid-row: 1 / -1;
  grid-column: 1;
}

.video-grid--social .video-card video {
  height: 100%;
}

.video-grid--social .video-card-lead video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.social-photo-card {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: var(--shadow-soft);
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 520ms ease, border-color 520ms ease;
  aspect-ratio: 1 / 1;
}

.social-photo-card img {
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
}

.social-photo-card:hover {
  transform: translateY(-6px);
  border-color: rgba(154, 101, 66, 0.24);
  box-shadow: var(--shadow-hover);
}

/* Card prodotto: base chiara, bordo sottile e transizioni calme. */
.product-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.38);
  transform: translate3d(0, 0, 0);
  transition: transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 560ms ease, border-color 560ms ease, background 560ms ease;
  will-change: transform;
}

/* Link prodotto: layout flex per altezze stabili su WebKit mobile. */
.product-card a {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  color: inherit;
}

/* Immagine prodotto: rapporto stabile e sfondo crema per uniformare formati diversi. */
.product-card img {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1 / 1.02;
  object-fit: cover;
  background: var(--color-cream);
  transition: transform 950ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 950ms ease;
}

/* Corpo card prodotto: contiene categoria, nome e descrizione breve. */
.product-card-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
}

/* Categoria card: usa maiuscolo piccolo per orientare senza rubare attenzione al prodotto. */
.product-category {
  margin: 0 0 10px;
  color: var(--color-bronze);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Descrizione card: misura compatta per evitare card troppo alte. */
.product-card p:not(.product-category) {
  margin: 10px 0 0;
  font-size: 0.88rem;
  line-height: 1.58;
}

/* Hover card prodotto: effetto sottile richiesto dal brief. */
.product-card:hover {
  transform: translateY(-9px);
  border-color: rgba(154, 101, 66, 0.24);
  background: rgba(255, 255, 255, 0.54);
  box-shadow: var(--shadow-hover);
}

/* Zoom immagine prodotto: aggiunge fluidità senza cambiare layout. */
.product-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.04) contrast(1.02);
}

/* Fascia Redcare: evidenzia il passaggio all’acquisto esterno. */
.redcare-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(32px, 5vw, 56px);
  border-radius: var(--radius-media);
  background: var(--color-moss);
  color: white;
}

/* Sezione partner: separa partner online e punti vendita con card chiare e aggiornabili. */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Card partner: organizza nome, tipo, dettaglio e azione in modo scansionabile. */
.partner-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-small);
  background: rgba(255, 255, 255, 0.36);
  padding: clamp(22px, 3vw, 34px);
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 420ms ease, border-color 420ms ease;
}

/* Hover partner: evidenzia le destinazioni disponibili senza creare rumore visivo. */
.partner-card:hover {
  transform: translateY(-5px);
  border-color: rgba(154, 101, 66, 0.24);
  box-shadow: var(--shadow-hover);
}

/* Testo nella fascia scura: usa opacità morbida per restare leggibile. */
.redcare-band p,
.redcare-band .eyebrow {
  color: rgba(255, 255, 255, 0.76);
}

/* Bottone su fascia scura: mantiene contrasto senza usare colori accesi. */
.redcare-band .button-primary {
  background: white;
  color: var(--color-moss);
}

/* Hero pagina interna: griglia compatta per About e catalogo. */
.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
  align-items: center;
  gap: clamp(32px, 6vw, 76px);
  padding: clamp(50px, 7vw, 96px) 0 0;
}

/* Titolo pagina interna: leggermente più piccolo del grande hero home. */
.page-hero h1 {
  font-size: clamp(2.58rem, 5vw, 4.9rem);
}

/* --- ABOUT US MODERN REDESIGN --- */

.about-hero-modern {
  padding: clamp(60px, 8vw, 120px) 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 5vw, 60px);
}

.hero-modern-content h1 {
  font-size: clamp(2.8rem, 6vw, 6rem);
  line-height: 1.1;
  max-width: 1100px;
}

.hero-modern-image {
  width: 100%;
  height: clamp(400px, 60vh, 700px);
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--color-cream);
}

.hero-modern-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-modern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 100px);
  align-items: center;
  padding: var(--section-space) 0;
}

.story-modern-quote h2 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.2;
  color: var(--color-moss);
}

.mission-vision-modern {
  background: var(--color-moss);
  color: var(--color-cream);
  padding: clamp(40px, 6vw, 80px);
  border-radius: var(--radius-media);
}

.dark-eyebrow {
  color: rgba(255, 255, 255, 0.6) !important;
}

.mv-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 60px);
}

.mv-block h3 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: white;
  margin-bottom: 24px;
}

.mv-block p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  line-height: 1.6;
}

.values-modern {
  padding: var(--section-space) 0;
}

.values-modern-list {
  border-top: 1px solid var(--color-line);
  margin-top: 40px;
}

.value-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 40px 0;
  border-bottom: 1px solid var(--color-line);
  align-items: center;
  transition: padding 0.4s ease, background 0.4s ease;
}

.value-row:hover {
  padding: 40px 20px;
  background: rgba(154, 101, 66, 0.03);
}

.value-row h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0;
  color: var(--color-moss);
}

.value-row p {
  font-size: 1.2rem;
  margin: 0;
  color: var(--color-muted);
}

.territory-modern-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 100px);
  align-items: center;
}

.territory-modern-image {
  border-radius: var(--radius-media);
  overflow: hidden;
  background: white;
}

.territory-modern-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.certification-panel-modern {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--color-line);
}

/* Lista pulita: mantiene le certificazioni scansionabili. */
.clean-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

/* Voci lista: aggiungono un piccolo indicatore bronze coerente con il logo. */
.clean-list li {
  position: relative;
  padding-left: 22px;
  margin: 12px 0;
  color: var(--color-muted);
  font-size: 0.92rem;
}

/* Indicatore lista: piccolo punto grafico senza usare icone esterne. */
.clean-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-bronze);
}

/* Catalogo: lascia spazio ai filtri e alla griglia prodotti. */
.catalog-shell {
  padding-bottom: 20px;
}

/* Barra filtri: pulsanti orizzontali con wrap su mobile. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

/* Pulsanti filtro: controlli chiari e accessibili. */
.filter-button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 650;
  transition: background 320ms ease, color 320ms ease, border-color 320ms ease, transform 320ms ease;
}

/* Hover dei filtri: aggiunge risposta tattile senza appesantire la barra. */
.filter-button:hover {
  transform: translateY(-2px);
}

/* Stato filtro attivo: usa verde profondo per indicare la selezione. */
.filter-button.is-active {
  border-color: var(--color-moss);
  background: var(--color-moss);
  color: white;
}

/* Dettaglio prodotto: layout grande e focalizzato sull’immagine. */
.product-detail {
  width: min(var(--site-max), calc(100% - var(--gutter)));
  margin: 0 auto;
  padding: clamp(50px, 7vw, 96px) 0 var(--section-space);
}

/* Griglia dettaglio: immagine e testo affiancati su desktop. */
.product-detail-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 78px);
  align-items: center;
}

/* Immagine dettaglio: grande, luminosa e stabile nel rapporto. */
.detail-media {
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--color-cream);
  box-shadow: var(--shadow-soft);
  transform: translate3d(0, 0, 0);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 700ms ease;
  will-change: transform;
}

/* Taglio immagine dettaglio: preserva il prodotto al centro. */
.detail-media img {
  width: 100%;
  aspect-ratio: 1 / 1.04;
  object-fit: cover;
}

/* Titolo dettaglio: scala meno del titolo home ma mantiene impatto premium. */
.detail-copy h1 {
  font-size: clamp(2.58rem, 5.2vw, 4.95rem);
}

/* Descrizione dettaglio: rende leggibile il valore editoriale della scheda. */
.detail-intro {
  margin: 24px 0 0;
  max-width: 640px;
  font-size: clamp(1rem, 1.24vw, 1.14rem);
  line-height: 1.72;
}

/* Azioni dettaglio: separa acquisto Redcare e ritorno al catalogo. */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Informazioni dettaglio: griglia di benefici, uso e ingredienti. */
.detail-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(44px, 7vw, 86px);
}

/* Stato errore prodotto: mantiene esperienza chiara se lo slug non esiste. */
.not-found {
  min-height: 58vh;
  display: grid;
  place-items: center;
  text-align: center;
}

/* Footer compatto: schema orizzontale e contenuti essenziali. */
.site-footer {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: clamp(30px, 5vw, 42px) 0 0;
  border-top: 1px solid var(--color-line);
  margin-top: var(--section-space);
}

.site-footer-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  width: 100%;
  padding-bottom: clamp(16px, 2.5vw, 24px);
}

.footer-contact-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.footer-contact-group span {
  display: flex;
  align-items: center;
}

.footer-contact-group a {
  color: var(--color-moss);
  font-weight: 600;
  transition: opacity 0.2s;
}

.footer-contact-group a:hover {
  opacity: 0.7;
}

.footer-brand-mark {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.footer-brand-mark img {
  width: 106px;
  max-width: 100%;
  height: auto;
  max-height: 38px;
  object-fit: contain;
}

.footer-links-compact {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 16px;
}

.footer-links-compact a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-moss);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer-base {
  border-top: 1px solid var(--color-line);
  padding: 16px 0 max(22px, env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.footer-legal-info {
  display: flex;
  gap: 16px;
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.site-footer-base p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-muted);
  letter-spacing: 0.03em;
}

/* Footer schematizzato: orizzontale su desktop e tablet, si semplifica solo su mobile stretto. */
@media (max-width: 700px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: center;
    text-align: center;
  }

  .footer-links-compact {
    justify-content: center;
  }
}

/* Pagina privacy: testo lungo leggibile e gerarchie chiare. */
main.legal-page {
  width: min(var(--site-max), calc(100% - var(--gutter)));
  margin-left: auto;
  margin-right: auto;
}

.legal-page {
  padding: clamp(40px, 6vw, 72px) 0 var(--section-space);
}

.legal-page h1 {
  margin: 0 0 12px;
  font-size: clamp(2.1rem, 4vw, 3rem);
}

.legal-page .legal-lead {
  margin: 0 0 32px;
  font-size: 1rem;
  color: var(--color-muted);
  max-width: 640px;
}

.legal-page section {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--color-line);
}

.legal-page section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-page h2 {
  margin: 0 0 12px;
  font-size: 1.35rem;
}

.legal-page p,
.legal-page li {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(29, 33, 28, 0.82);
}

.legal-page ul {
  margin: 12px 0 0;
  padding-left: 1.2em;
}

.legal-page .legal-placeholder {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(154, 101, 66, 0.12);
  font-size: 0.88em;
}

/* Animazione reveal: stato iniziale leggermente spostato e trasparente. */
.section-reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  transition: opacity 980ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 980ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Animazione reveal visibile: lo script aggiunge questa classe quando la sezione entra nello schermo. */
.section-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Elementi parallax: ricevono un movimento controllato dallo script durante lo scroll. */
[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

@media (max-width: 900px) {
  :root {
    --section-space: 64px;
    --gutter: clamp(24px, 6vw, 40px);
  }

  [data-parallax] {
    transform: none !important;
    will-change: auto;
  }
}

/* Preferenze riduzione movimento: disattiva transizioni importanti per chi le richiede. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  [data-parallax] {
    transform: none !important;
  }
}

/* Tablet: riduce colonne e mantiene contenuti comodi. */
@media (max-width: 980px) {
  .hero,
  .page-hero,
  .territory-section,
  .territory-detail,
  .story-layout,
  .product-detail-grid {
    grid-template-columns: 1fr;
  }

  .sticky-label {
    position: static;
  }

  .category-grid,
  .compact-grid,
  .value-grid,
  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-grid,
  .detail-info-grid,
  .highlight-grid,
  .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ritual-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(140px, 28vw);
  }

  .ritual-gallery-item--lead {
    grid-column: 1 / span 2;
    grid-row: auto;
  }

  .video-grid--social {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .video-card-lead {
    grid-row: auto;
    grid-column: auto;
  }

  .video-grid--social .video-card-lead video {
    min-height: 360px;
  }

  .video-card-large {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Mobile e tablet stretti: trasforma la navigazione in menu aperto dal pulsante. */
@media (max-width: 900px) {
  .nav-shell {
    justify-content: center;
    position: relative;
  }

  .nav-toggle {
    display: block;
    position: absolute;
    right: 0;
  }

  .brand-mark img {
    height: 18px;
  }

  .nav-links {
    position: absolute;
    z-index: 30;
    left: var(--gutter);
    right: var(--gutter);
    top: calc(100% + 10px);
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-small);
    background: rgba(251, 248, 241, 0.98);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .nav-links.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-links a {
    padding: 10px 8px;
  }

  .nav-cta {
    text-align: center;
  }

  .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }

  .nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  .hero {
    min-height: auto;
  }

  h1,
  .page-hero h1,
  .detail-copy h1 {
    font-size: 2.15rem; /* Ridotto per look minimalista */
    line-height: 1.1;
  }

  h2 {
    font-size: 1.65rem; /* Ridotto */
  }

  p {
    font-size: 0.94rem;
    line-height: 1.5;
  }

  .split-heading,
  .redcare-band {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-shell {
    justify-content: flex-end; /* Hamburger a destra */
  }

  .brand-mark {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .product-card {
    height: auto; /* Impedisce sovrapposizioni su testi lunghi */
  }
  
  .product-card-body {
    flex: 1 0 auto;
  }

  .site-footer {
    padding: 32px 0 24px;
  }

  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
    text-align: center;
  }

  .footer-meta {
    font-size: 0.82rem;
  }

  .footer-links-compact {
    justify-content: center;
    gap: 8px 14px;
  }

  .ritual-gallery-hint {
    display: block;
    text-align: center;
  }

  .ritual-gallery-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding-bottom: 10px;
    margin: 0 -4px;
    padding-left: 4px;
    padding-right: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .ritual-gallery-item {
    flex: 0 0 min(78vw, 300px);
    width: min(78vw, 300px);
    scroll-snap-align: start;
  }

  .ritual-gallery-item img {
    min-height: min(52vw, 240px);
    height: 100%;
  }

  .video-grid--social .video-card-lead video {
    min-height: 280px;
  }

  .category-grid,
  .compact-grid,
  .highlight-grid,
  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .product-grid,
  .detail-info-grid,
  .mission-grid,
  .video-grid,
  .partner-grid {
    grid-template-columns: 1fr;
  }

  .site-footer-base {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .footer-legal-info {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .site-footer-base p {
    text-align: center;
  }
}

/* --- QUIZ SECTION --- */
.quiz-section {
  padding: clamp(60px, 10vw, 120px) var(--gutter);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quiz-question h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 40px;
  color: var(--color-moss);
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 500px;
  margin: 0 auto;
}

.quiz-option {
  padding: 18px 24px;
  border: 1px solid var(--color-line);
  background: white;
  border-radius: var(--radius-small);
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  transition: all 300ms ease;
}

.quiz-option:hover {
  border-color: var(--color-moss);
  background: rgba(47, 57, 45, 0.03);
  transform: translateY(-2px);
}

.quiz-results {
  margin-top: 40px;
  text-align: left;
}

.quiz-results h3 {
  text-align: center;
  margin-bottom: 30px;
}

/* --- HERO VIDEO FULLSCREEN --- */
main > .hero-video-fullscreen,
.hero-video-fullscreen {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-height: 100vh;
  margin-top: -100px; /* offset header per salire sotto la nav */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0; /* Nessun padding laterale sul contenitore esterno */
}

.hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65); /* Patina più scura per nascondere la compressione del video */
  backdrop-filter: blur(4px); /* Leggero blur per rendere il video un fondale astratto ed elegante */
  z-index: -1;
}

.hero-video-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.hero-video-content h1 {
  color: white;
  text-shadow: 0 4px 24px rgba(0,0,0,0.8), 0 2px 8px rgba(0,0,0,0.6);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin: 0;
  line-height: 1.1;
}

.hero-video-content .eyebrow {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
  margin: 0;
}

.hero-text-light {
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  text-shadow: 0 2px 16px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.5);
  margin: 0 0 20px 0;
  max-width: 600px;
}

.hero-actions-center {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.button-light {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  backdrop-filter: blur(8px);
}
.button-light:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: white;
}

/* --- PAGE TRANSITIONS --- */
#page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-ivory);
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.is-loaded #page-transition {
  opacity: 0;
}

body.is-exiting #page-transition {
  opacity: 1;
}

@media (max-width: 900px) {
  .nav-shell {
    min-height: 64px;
    justify-content: space-between;
    gap: 16px;
  }

  .brand-mark {
    position: static;
    left: auto;
    max-width: 120px;
    transform: none;
  }

  .brand-mark img {
    width: clamp(86px, 24vw, 112px);
    height: auto;
    max-height: 34px;
    object-position: left center;
  }

  .nav-toggle {
    position: static;
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
  }

  .hero-video-fullscreen,
  main > .hero-video-fullscreen {
    min-height: calc(100svh - 64px);
    margin-top: 0;
    padding: clamp(54px, 12vh, 96px) 16px;
  }

  .hero-video-content {
    max-width: min(100%, 520px);
    gap: 14px;
  }

  .hero-video-content h1 {
    max-width: 12em;
    font-size: clamp(2.12rem, 9vw, 2.7rem);
    line-height: 1.06;
  }

  .hero-video-content .eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }

  .hero-text-light {
    max-width: 34ch;
    font-size: clamp(0.98rem, 4vw, 1.08rem);
    line-height: 1.5;
    margin-bottom: 10px;
  }

  .hero-actions-center {
    width: 100%;
    gap: 12px;
  }

  .hero-actions-center .button {
    min-height: 44px;
    padding: 0 18px;
    font-size: 0.86rem;
  }

  .redcare-band {
    width: min(100%, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    margin-left: auto;
    margin-right: auto;
    gap: 24px;
    padding: 30px 20px;
    border-radius: 18px;
    overflow: hidden;
  }

  .redcare-band > * {
    width: 100%;
    min-width: 0;
  }

  .redcare-band h2 {
    max-width: 100%;
    font-size: clamp(1.74rem, 7.4vw, 2.15rem);
    line-height: 1.08;
  }

  .redcare-band p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .redcare-band .button {
    width: fit-content;
    max-width: 100%;
  }

  .quiz-section {
    width: 100%;
    max-width: 100%;
    min-height: calc(100svh - 64px);
    margin: 0;
    padding: clamp(54px, 10vh, 86px) 18px;
    justify-content: flex-start;
  }

  .quiz-container,
  .quiz-question,
  .quiz-options {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .quiz-container {
    margin: 0 auto;
  }

  .quiz-question h2 {
    max-width: 12em;
    margin: 0 auto 32px;
    font-size: clamp(2.14rem, 10vw, 2.68rem);
    line-height: 1.05;
  }

  .quiz-options {
    gap: 14px;
    margin: 0 auto;
  }

  .quiz-option {
    width: 100%;
    min-height: 70px;
    padding: 16px 18px;
    text-align: center;
    font-size: clamp(0.96rem, 4.2vw, 1.08rem);
  }

  .story-modern,
  .mv-container,
  .value-row,
  .territory-modern-grid {
    grid-template-columns: 1fr;
  }
  
  .value-row:hover {
    padding: 40px 0;
    background: transparent;
  }
  
  .mission-vision-modern {
    border-radius: 0;
  }
}