/* ============================================================
   DORMITALIANO — Global Stylesheet
   ============================================================ */

/* Font self-hosted (ex Google Fonts) — nessun dato inviato a Google */
@import url('fonts.css');


/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
  --color-beige:       #F5F0EB;
  --color-beige-dark:  #D4C8BB;
  --color-dark:        #2C2C2C;
  --color-white:       #FFFFFF;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --transition-base: 0.3s ease;
  --nav-height: 80px;
}


/* ============================================================
   CSS Reset
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:                16px;
  scroll-behavior:          smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:             var(--font-body);
  font-weight:             300;
  font-size:               1rem;
  line-height:             1.7;
  color:                   var(--color-dark);
  background-color:        var(--color-white);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
  display:   block;
  max-width: 100%;
  height:    auto;
}

a {
  color:           inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font:       inherit;
  border:     none;
  background: none;
  outline:    none;
  cursor:     pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.2;
}


/* ============================================================
   Global Utility Classes
   ============================================================ */

/* Container */
.container {
  width:     100%;
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 2rem;
}

/* Section padding */
.section-padding {
  padding-top:    100px;
  padding-bottom: 100px;
}

/* Outlined button */
.btn-outline {
  display:        inline-block;
  padding:        0.75rem 2.25rem;
  border:         1px solid var(--color-dark);
  border-radius:  100px;
  background:     transparent;
  color:          var(--color-dark);
  font-family:    var(--font-body);
  font-weight:    300;
  font-size:      0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     background var(--transition-base),
                  color      var(--transition-base);
}

.btn-outline:hover {
  background: var(--color-dark);
  color:      var(--color-white);
}

/* Light variant — for use on dark/beige backgrounds */
.btn-outline--light {
  border-color: var(--color-white);
  color:        var(--color-white);
}

.btn-outline--light:hover {
  background: var(--color-white);
  color:      var(--color-dark);
}


/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position:   fixed;
  top:        0;
  left:       0;
  width:      100%;
  height:     var(--nav-height);
  z-index:    1000;
  background: transparent;
  transition: background var(--transition-base),
              box-shadow var(--transition-base);
}

/* Scrolled state — toggled via JS */
.nav.nav--scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 var(--color-beige-dark);
}

.nav__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  max-width:       1200px;
  margin:          0 auto;
  padding:         0 2rem;
}

.nav__logo {
  flex:       1;
  text-align: center;
}

.nav__logo img {
  display:    inline-block;
  height:     64px;
  max-height: 64px;
  width:      auto;
  transition: filter var(--transition-base);
}

.nav--scrolled .nav__logo img {
  filter: invert(1);
}

/* Base — proprietà condivise tra mobile e desktop */
.nav__links {
  gap:         2.5rem;
  align-items: center;
}

/* Mobile: menu nascosto di default */
@media (max-width: 768px) {
  .nav__links {
    display:        none;
    position:       fixed;
    top:            var(--nav-height);
    left:           0;
    width:          100%;
    flex-direction: column;
    background:     var(--color-dark);
    padding:        2rem;
    z-index:        999;
  }

  .nav__links--open {
    display: flex;
  }
}

/* Desktop: sempre visibile e inline */
@media (min-width: 769px) {
  .nav__links {
    display:        flex !important;
    position:       static;
    flex-direction: row;
    background:     transparent;
    padding:        0;
    width:          auto;
  }
}

.nav__links a {
  font-family:    var(--font-body);
  font-weight:    300;
  font-size:      0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          #FFFFFF;
  opacity:        1;
  text-shadow:    0 1px 3px rgba(0, 0, 0, 0.4);
  transition:     opacity     var(--transition-base),
                  color       var(--transition-base),
                  text-shadow var(--transition-base);
}

.nav__links a:hover,
.nav__links a.active {
  opacity: 0.65;
}

/* Quando la nav è su sfondo chiaro (dopo lo scroll) */
.nav--scrolled .nav__links a {
  color:       var(--color-dark);
  text-shadow: none;
}

.nav--scrolled .nav__links a:hover,
.nav--scrolled .nav__links a.active {
  opacity: 0.5;
}

/* Mobile menu — hidden on desktop */
.nav__mobile-menu { display: none; }

/* Hamburger — shown on mobile */
.nav__hamburger {
  display:        none;
  flex-direction: column;
  gap:            5px;
  width:          24px;
  cursor:         pointer;
}

.nav__hamburger span {
  display:    block;
  width:      100%;
  height:     1px;
  background: #FFFFFF;
  transition: transform    var(--transition-base),
              opacity      var(--transition-base),
              background   var(--transition-base);
}

/* Su sfondo chiaro (scrolled) le linee diventano scure */
.nav--scrolled .nav__hamburger span {
  background: var(--color-dark);
}

/* ============================================================
   Nav — Social icon e Language switcher
   Visibili bianchi sulla nav trasparente; scuri su scrolled
   ============================================================ */
.nav__social {
  display:     flex;
  align-items: center;
  color:       #FFFFFF;
  opacity:     1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition:  opacity     var(--transition-base),
               color       var(--transition-base),
               text-shadow var(--transition-base);
}

.nav__social:hover { opacity: 0.65; }

.nav--scrolled .nav__social {
  color:       var(--color-dark);
  opacity:     0.7;
  text-shadow: none;
}

.nav--scrolled .nav__social:hover { opacity: 1; }

.nav__lang-btn {
  font-family:    var(--font-body);
  font-weight:    300;
  font-size:      0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          #FFFFFF;
  opacity:        0.55;
  padding:        0;
  text-shadow:    0 1px 3px rgba(0, 0, 0, 0.4);
  transition:     opacity     var(--transition-base),
                  color       var(--transition-base),
                  text-shadow var(--transition-base);
}

.nav__lang-btn.is-active,
.nav__lang-btn:hover { opacity: 1; }

.nav__lang-sep {
  font-size:   0.65rem;
  color:       #FFFFFF;
  opacity:     0.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.nav--scrolled .nav__lang-btn {
  color:       var(--color-dark);
  text-shadow: none;
}

.nav--scrolled .nav__lang-btn.is-active,
.nav--scrolled .nav__lang-btn:hover { opacity: 1; }

.nav--scrolled .nav__lang-sep {
  color:       var(--color-dark);
  opacity:     0.4;
  text-shadow: none;
}

/* nav--light — stessi stili di nav--scrolled, applicati subito (pagine legali) */
.nav.nav--light {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 var(--color-beige-dark);
}

.nav--light .nav__logo img {
  filter: invert(1);
}

/* nav--flush — testo scuro ma nessuna barra piena finché non si scrolla
   (per hero chiari, es. maison). Al primo scroll torna la barra solida. */
.nav--flush.nav--light:not(.nav--scrolled) {
  background:  transparent;
  box-shadow:  none;
}

.nav--light .nav__links a {
  color:       var(--color-dark);
  text-shadow: none;
}

.nav--light .nav__links a:hover,
.nav--light .nav__links a.active { opacity: 0.5; }

.nav--light .nav__hamburger span { background: var(--color-dark); }

.nav--light .nav__social {
  color:       var(--color-dark);
  opacity:     0.7;
  text-shadow: none;
}

.nav--light .nav__social:hover { opacity: 1; }

.nav--light .nav__lang-btn {
  color:       var(--color-dark);
  text-shadow: none;
}

.nav--light .nav__lang-btn.is-active,
.nav--light .nav__lang-btn:hover { opacity: 1; }

.nav--light .nav__lang-sep {
  color:       var(--color-dark);
  opacity:     0.4;
  text-shadow: none;
}


/* ============================================================
   Cookie Consent Banner
   ============================================================ */
.cookie-banner {
  position:        fixed;
  bottom:          0;
  left:            0;
  width:           100%;
  z-index:         2000;
  background:      var(--color-dark);
  color:           var(--color-white);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             2rem;
  padding:         1.25rem 2rem;
  box-shadow:      0 -2px 20px rgba(0, 0, 0, 0.2);
  /* Animazione entrata */
  transform:       translateY(100%);
  transition:      transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size:   0.875rem;
  line-height: 1.6;
  color:       var(--color-white);
  opacity:     0.85;
  max-width:   640px;
}

.cookie-banner__actions {
  display:    flex;
  gap:        0.75rem;
  flex-shrink: 0;
}

/* Bottone pieno beige — Accetta tutti */
.cookie-banner__accept {
  padding:        0.6rem 1.5rem;
  background:     var(--color-beige);
  color:          var(--color-dark);
  border:         1px solid var(--color-beige);
  border-radius:  100px;
  font-family:    var(--font-body);
  font-weight:    400;
  font-size:      0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     background var(--transition-base), color var(--transition-base);
}

.cookie-banner__accept:hover {
  background: var(--color-white);
  border-color: var(--color-white);
}

/* Bottone outline — Solo necessari */
.cookie-banner__reject {
  padding:        0.6rem 1.5rem;
  background:     transparent;
  color:          var(--color-white);
  border:         1px solid rgba(255, 255, 255, 0.4);
  border-radius:  100px;
  font-family:    var(--font-body);
  font-weight:    300;
  font-size:      0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor:         pointer;
  transition:     border-color var(--transition-base), color var(--transition-base);
}

.cookie-banner__reject:hover {
  border-color: var(--color-white);
  color:        var(--color-white);
}

@media (max-width: 768px) {
  .cookie-banner {
    flex-direction: column;
    align-items:    flex-start;
    gap:            1.25rem;
    padding:        1.5rem 1.25rem;
  }

  .cookie-banner__actions {
    width: 100%;
  }

  .cookie-banner__accept,
  .cookie-banner__reject {
    flex: 1;
    text-align: center;
  }
}


/* ============================================================
   WhatsApp Floating Button
   ============================================================ */
.whatsapp-float {
  position:        fixed;
  bottom:          2rem;
  right:           2rem;
  z-index:         900;
  width:           52px;
  height:          52px;
  border-radius:   50%;
  background:      #25D366;
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      0 4px 16px rgba(37, 211, 102, 0.28);
  transition:      transform    var(--transition-base),
                   box-shadow   var(--transition-base);
}

.whatsapp-float:hover {
  transform:  translateY(-3px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.36);
}

.whatsapp-float svg {
  width:  26px;
  height: 26px;
  fill:   var(--color-white);
}


/* ============================================================
   Footer
   ============================================================ */
.footer {
  padding:    3rem 2rem;
  background: var(--color-beige);
  text-align: center;
}

.footer__inner {
  max-width: 1200px;
  margin:    0 auto;
}

.footer__logo {
  margin-bottom: 1.5rem;
}

.footer__logo img {
  display: inline-block;
  height:  28px;
  width:   auto;
  opacity: 0.7;
}

.footer__links {
  display:         flex;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             1.5rem 2.5rem;
  margin-bottom:   2rem;
}

.footer__links a {
  font-size:      0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-dark);
  opacity:        0.55;
  transition:     opacity var(--transition-base);
}

.footer__links a:hover {
  opacity: 1;
}

.footer__copy {
  font-size:   0.6875rem;
  color:       var(--color-dark);
  opacity:     0.35;
  line-height: 1.9;
}

.footer__copy a {
  color:           inherit;
  text-decoration: none;
  border-bottom:   1px solid rgba(44, 44, 44, 0.25);
  transition:      opacity var(--transition-base);
}

.footer__copy a:hover {
  opacity: 0.7;
}


/* ============================================================
   Responsive — Mobile
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  .section-padding {
    padding-top:    64px;
    padding-bottom: 64px;
  }

  .container {
    padding: 0 1.25rem;
  }

  .nav__hamburger {
    display: flex;
  }

  .nav__logo {
    text-align: left;
    flex:       unset;
  }

  /* Mobile menu overlay — attivato via JS con .is-open */
  .nav__mobile-menu {
    display:         none;
    position:        fixed;
    top:             var(--nav-height);
    left:            0;
    width:           100%;
    flex-direction:  column;
    align-items:     center;
    gap:             0;
    background:      var(--color-white);
    padding:         1.5rem 0 2rem;
    border-top:      1px solid var(--color-beige-dark);
    z-index:         999;
  }

  .nav__mobile-menu.is-open {
    display: flex;
  }

  .nav__mobile-menu a {
    font-family:    var(--font-body);
    font-weight:    300;
    font-size:      0.8125rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--color-dark);
    opacity:        1;
    text-shadow:    none;
    padding:        0.85rem 2rem;
    width:          100%;
    text-align:     center;
    transition:     opacity var(--transition-base);
  }

  .nav__mobile-menu a:hover,
  .nav__mobile-menu a.active {
    opacity: 0.5;
  }

  .nav__lang--mobile {
    margin-top: 1rem;
  }

  /* Il menu mobile ha sfondo bianco: i pulsanti lingua, bianchi per la
     nav sopra le immagini, qui devono tornare scuri per essere leggibili. */
  .nav__mobile-menu .nav__lang-btn {
    color:       var(--color-dark);
    text-shadow: none;
  }

  .nav__mobile-menu .nav__lang-sep {
    color:       var(--color-dark);
    opacity:     0.4;
    text-shadow: none;
  }

  /* Animazione hamburger → X */
  .nav__hamburger.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

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

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

  .whatsapp-float {
    bottom: 1.25rem;
    right:  1.25rem;
    width:  46px;
    height: 46px;
  }

  /* Logo più piccolo su mobile (nav height è 64px) */
  .nav__logo img {
    height:     42px;
    max-height: 42px;
  }

  /* Footer link in colonna singola su mobile */
  .footer__links {
    flex-direction: column;
    gap:            1rem;
    align-items:    center;
  }

  /* Nascondi i gruppi desktop (incluso il selettore lingua desktop) */
  .nav__group {
    display: none;
  }
}


/* ============================================================
   CATALOG DROPDOWN — globale, usato in tutte le pagine
   ============================================================ */
.catalog-dropdown {
  position: relative;
  display:  inline-block;
}

.catalog-dropdown__menu {
  display:          none;
  position:         absolute;
  bottom:           calc(100% + 8px);
  left:             50%;
  transform:        translateX(-50%);
  background:       var(--color-white);
  border:           1px solid var(--color-beige-dark);
  min-width:        230px;
  z-index:          500;
  box-shadow:       0 8px 24px rgba(0, 0, 0, 0.1);
  flex-direction:   column;
}

.catalog-dropdown__menu.is-open {
  display: flex;
}

.catalog-dropdown__item {
  display:        flex;
  align-items:    center;
  gap:            0.6rem;
  padding:        0.8rem 1.25rem;
  font-family:    var(--font-body);
  font-weight:    300;
  font-size:      0.8125rem;
  color:          var(--color-dark);
  background:     none;
  border:         none;
  border-bottom:  1px solid var(--color-beige);
  text-align:     left;
  cursor:         pointer;
  width:          100%;
  transition:     background var(--transition-base);
}

.catalog-dropdown__item:last-child {
  border-bottom: none;
}

.catalog-dropdown__item:hover {
  background: var(--color-beige);
}

.catalog-dropdown__unavailable {
  padding:     0.8rem 1.25rem;
  font-family: var(--font-body);
  font-size:   0.75rem;
  color:       var(--color-dark);
  opacity:     0.5;
  font-style:  italic;
  text-align:  center;
  border-top:  1px solid var(--color-beige);
}


/* ============================================================
   NOI PAGE
   ============================================================ */

/* Nav — split layout (replica minimal, colori da regole globali) */
.noi-hero ~ * .nav__group,
.nav__group {
  display:         flex;
  align-items:     center;
  gap:             2rem;
  flex:            1;
}

.nav__group--right {
  justify-content: flex-end;
}

.nav__lang {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
}


/* ----------------------------------------------------------
   1. HERO — 60vh, sfondo scuro
---------------------------------------------------------- */
.noi-hero {
  position:        relative;
  width:           100%;
  height:          60vh;
  min-height:      420px;
  background-color: var(--color-dark);
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
}

.noi-hero__content {
  padding: 0 1.5rem;
}

.noi-hero__eyebrow {
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--color-white);
  opacity:        0.45;
  margin-bottom:  1.5rem;
}

.noi-hero__title {
  font-family:    var(--font-heading);
  font-weight:    300;
  font-size:      clamp(3rem, 7vw, 6.5rem);
  letter-spacing: 0.04em;
  color:          var(--color-white);
  line-height:    1.05;
}


/* ----------------------------------------------------------
   2. TIMELINE
---------------------------------------------------------- */
.noi-timeline {
  position:         relative;
  background-color: var(--color-white);
  padding:          7rem 0 5rem;
  overflow:         hidden;
}

/* Linea verticale centrale */
.noi-timeline__track {
  position:   absolute;
  left:       50%;
  top:        0;
  bottom:     0;
  width:      1px;
  transform:  translateX(-50%);
  background: var(--color-beige-dark);
}

.noi-timeline__line {
  position:          absolute;
  top:               0;
  left:              0;
  width:             100%;
  height:            100%;
  background:        var(--color-dark);
  transform:         scaleY(0);
  transform-origin:  top center;
  transition:        transform 0.1s linear;
}

/* Items container */
.noi-timeline__items {
  position:  relative;
  max-width: 1100px;
  margin:    0 auto;
  padding:   0 2rem;
  z-index:   1;
}

/* Singola card */
.tl-card {
  position:      relative;
  display:       flex;
  margin-bottom: 6rem;
  /* Stato iniziale — invisibile, traslata */
  opacity:       0;
  transition:    opacity 0.7s ease, transform 0.7s ease;
}

/* Card a sinistra: contenuto a destra della linea (testo + img sul lato dx) */
.tl-card--left {
  justify-content: flex-start;
  transform:       translateX(-40px);
}

/* Card a destra: contenuto a sinistra della linea */
.tl-card--right {
  justify-content: flex-end;
  transform:       translateX(40px);
}

/* Stato visible — aggiunto da IntersectionObserver */
.tl-card--visible {
  opacity:   1;
  transform: translateX(0);
}

/* Inner layout: affianca img e testo */
.tl-card__inner {
  display:    flex;
  gap:        2.5rem;
  align-items: center;
  width:      calc(50% - 3rem); /* occupa metà larghezza, con gap dalla linea */
}

.tl-card--right .tl-card__inner {
  flex-direction: row-reverse;
}

/* Dot sulla linea */
.tl-card__dot {
  position:         absolute;
  top:              50%;
  left:             50%;
  transform:        translate(-50%, -50%);
  width:            11px;
  height:           11px;
  border-radius:    50%;
  background:       var(--color-dark);
  border:           2px solid var(--color-white);
  box-shadow:       0 0 0 1px var(--color-dark);
  transition:       background 0.3s ease;
  z-index:          2;
}

.tl-card--visible .tl-card__dot {
  background: var(--color-dark);
}

/* Testo */
.tl-card__text {
  flex: 1;
}

.tl-card__year {
  display:        block;
  font-family:    var(--font-heading);
  font-weight:    300;
  font-size:      clamp(1.5rem, 3vw, 2.5rem);
  color:          var(--color-beige-dark);
  letter-spacing: 0.02em;
  margin-bottom:  0.5rem;
  line-height:    1;
}

.tl-card__title {
  font-family:   var(--font-heading);
  font-weight:   600;
  font-size:     clamp(1.125rem, 2vw, 1.5rem);
  color:         var(--color-dark);
  margin-bottom: 0.875rem;
  line-height:   1.2;
}

.tl-card__quote {
  font-family:  var(--font-body);
  font-weight:  300;
  font-size:    0.9375rem;
  font-style:   italic;
  line-height:  1.85;
  color:        var(--color-dark);
  opacity:      0.62;
}

/* Immagine quadrata */
.tl-card__img-wrap {
  flex-shrink:      0;
  width:            180px;
  height:           180px;
  overflow:         hidden;
  background-color: var(--color-beige-dark);
}

.tl-card__img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
  transition:      transform 0.6s ease;
}

.tl-card:hover .tl-card__img {
  transform: scale(1.05);
}


/* ----------------------------------------------------------
   3. SOSTENIBILITÀ
---------------------------------------------------------- */
.noi-sustainability {
  background-color: var(--color-beige);
}

.noi-sust__header {
  text-align:    center;
  margin-bottom: 3rem;
}

.noi-sust__eyebrow {
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          var(--color-dark);
  opacity:        0.45;
  margin-bottom:  1rem;
}

.noi-sust__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size:   clamp(2rem, 4vw, 3rem);
  color:       var(--color-dark);
  line-height: 1.15;
}

.noi-sust__body {
  max-width:     780px;
  margin:        0 auto 4rem;
  display:       flex;
  flex-direction: column;
  gap:            1.625rem;
}

.noi-sust__body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size:   1rem;
  line-height: 1.9;
  color:       var(--color-dark);
  opacity:     0.72;
}

/* Tre pilastri */
.noi-sust__pillars {
  display:         flex;
  justify-content: center;
  gap:             4rem;
  padding-top:     3rem;
  border-top:      1px solid var(--color-beige-dark);
}

.noi-sust__pillar {
  text-align: center;
}

.noi-sust__pillar-icon {
  display:       block;
  font-size:     1.75rem;
  margin-bottom: 0.75rem;
  line-height:   1;
}

.noi-sust__pillar-label {
  font-family:    var(--font-body);
  font-weight:    300;
  font-size:      0.8125rem;
  letter-spacing: 0.06em;
  color:          var(--color-dark);
  opacity:        0.7;
  line-height:    1.5;
  max-width:      160px;
}


/* ----------------------------------------------------------
   NOI — Responsive Mobile
---------------------------------------------------------- */
@media (max-width: 768px) {

  .noi-hero {
    height:     50vh;
    min-height: 320px;
  }

  /* Nascondi linea verticale — layout a colonna singola */
  .noi-timeline__track {
    display: none;
  }

  .noi-timeline {
    padding: 4rem 0 3rem;
  }

  .noi-timeline__items {
    padding: 0 1.25rem;
  }

  /* Tutte le card centrate, nessuna traslazione laterale */
  .tl-card--left,
  .tl-card--right {
    justify-content: center;
    transform:       translateY(20px);
    margin-bottom:   3.5rem;
  }

  .tl-card--visible {
    transform: translateY(0);
  }

  .tl-card__inner,
  .tl-card--right .tl-card__inner {
    flex-direction: column;
    width:          100%;
    max-width:      480px;
    text-align:     center;
    align-items:    center;
    gap:            1.5rem;
  }

  .tl-card__dot {
    display: none;
  }

  .tl-card__img-wrap {
    width:  100%;
    height: 56vw;
    max-height: 260px;
  }

  /* Sostenibilità */
  .noi-sust__pillars {
    flex-direction: column;
    align-items:    center;
    gap:            2rem;
  }

  .noi-sust__pillar-label {
    max-width: 220px;
  }
}

@media (max-width: 480px) {
  .tl-card__year {
    font-size: 1.5rem;
  }

  .noi-hero__title {
    font-size: clamp(2rem, 9vw, 3rem);
  }
}


/* ============================================================
   MODALE APPUNTAMENTO
   ============================================================ */
.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.55);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         1000;
  padding:         1.5rem;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.3s ease;
}

.modal-overlay.is-open {
  opacity:        1;
  pointer-events: all;
}

.modal-box {
  background:    var(--color-white);
  padding:       3rem;
  width:         100%;
  max-width:     580px;
  max-height:    90vh;
  overflow-y:    auto;
  position:      relative;
  border-radius: 4px;
  transform:     translateY(20px);
  transition:    transform 0.3s ease;
}

.modal-overlay.is-open .modal-box {
  transform: translateY(0);
}

.modal-close {
  position:    absolute;
  top:         1.25rem;
  right:       1.25rem;
  background:  none;
  border:      none;
  font-size:   1.75rem;
  color:       var(--color-dark);
  cursor:      pointer;
  opacity:     0.35;
  line-height: 1;
  transition:  opacity 0.2s;
}

.modal-close:hover { opacity: 1; }

.modal-title {
  font-family:   var(--font-heading);
  font-weight:   300;
  font-size:     clamp(1.6rem, 3vw, 2.2rem);
  color:         var(--color-dark);
  margin-bottom: 0.5rem;
}

.modal-subtitle {
  font-family:   var(--font-body);
  font-size:     0.875rem;
  color:         var(--color-dark);
  opacity:       0.5;
  margin-bottom: 2rem;
}

.modal-form {
  display:        flex;
  flex-direction: column;
  gap:            1.25rem;
}

.modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     1.25rem;
}

.modal-field {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

.modal-field label {
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-dark);
  opacity:        0.5;
}

.modal-field input,
.modal-field select,
.modal-field textarea {
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     0.9375rem;
  color:         var(--color-dark);
  background:    var(--color-beige);
  border:        1px solid var(--color-beige-dark);
  border-radius: 4px;
  padding:       0.75rem 1rem;
  outline:       none;
  transition:    border-color 0.2s ease;
  resize:        vertical;
  width:         100%;
}

.modal-field input:focus,
.modal-field select:focus,
.modal-field textarea:focus {
  border-color: var(--color-dark);
}

.modal-confirm {
  font-family: var(--font-body);
  font-size:   0.9rem;
  color:       #2e7d32;
  min-height:  1.4em;
  text-align:  center;
  font-weight: 400;
}

.modal-submit {
  width:      100%;
  text-align: center;
  cursor:     pointer;
}

@media (max-width: 540px) {
  .modal-box { padding: 2rem 1.5rem; }
  .modal-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .modal-overlay { padding: 0.75rem; }
  .modal-box,
  .cem-box       { max-width: 100%; }
}

/* ── Catalog Email Modal ── */
.cem-box { max-width: 440px; }

.cem-email {
  width:         100%;
  box-sizing:    border-box;
  padding:       0.75rem 1rem;
  border:        1px solid var(--color-beige-dark);
  border-radius: 3px;
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     0.9375rem;
  color:         var(--color-dark);
  margin-bottom: 1.25rem;
  transition:    border-color var(--transition-base);
  outline:       none;
}

.cem-email:focus { border-color: var(--color-dark); }

.cem-consent { margin-bottom: 1.25rem; }

.cem-consent__label {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  cursor:      pointer;
}

.cem-consent__label input[type="checkbox"] {
  margin-top:   0.2em;
  flex-shrink:  0;
  width:        16px;
  height:       16px;
  cursor:       pointer;
  accent-color: var(--color-dark);
}

.cem-consent__label span {
  font-family: var(--font-body);
  font-weight: 300;
  font-size:   0.8125rem;
  line-height: 1.65;
  color:       var(--color-dark);
  opacity:     0.75;
}

.cem-consent__link {
  color:           var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity:         1;
}

.cem-error {
  font-family:   var(--font-body);
  font-size:     0.8125rem;
  color:         #b5291c;
  margin-bottom: 1rem;
  min-height:    1.2em;
  line-height:   1.5;
}


/* ============================================================
   GALLERY — Griglia mosaico + Lightbox
   ============================================================ */

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

.gallery__header {
  text-align:     center;
  margin-bottom:  2.5rem;
}

.gallery__eyebrow {
  font-family:    var(--font-body);
  font-size:      0.7rem;
  font-weight:    400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--color-dark);
  opacity:        0.5;
  margin-bottom:  0.6rem;
}

.gallery__title {
  font-family: var(--font-heading);
  font-size:   clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color:       var(--color-dark);
}

.gallery__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows:        220px;
  gap:                   8px;
  max-width:             1400px;
  margin:                0 auto;
  padding:               0 2rem;
}

.gallery__item {
  overflow:         hidden;
  border-radius:    4px;
  cursor:           pointer;
  background-color: var(--color-beige-dark);
  position:         relative;
}

.gallery__item--tall { grid-row: span 2; }

.gallery__item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.4s ease;
}

.gallery__item:hover img { transform: scale(1.04); }

.gallery__item.is-placeholder::after {
  content:     'Immagine in arrivo';
  position:    absolute;
  inset:       0;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   0.75rem;
  color:       var(--color-dark);
  opacity:     0.35;
  font-family: var(--font-body);
}

/* Lightbox */
.gallery-lightbox {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.92);
  z-index:         2000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.3s ease;
}

.gallery-lightbox.is-open {
  opacity:        1;
  pointer-events: all;
}

.gallery-lightbox__img-wrap {
  position:   relative;
  max-width:  90vw;
  max-height: 90vh;
}

.gallery-lightbox__img {
  max-width:  90vw;
  max-height: 88vh;
  object-fit: contain;
  display:    block;
  border-radius: 2px;
}

.gallery-lightbox__close {
  position:   absolute;
  top:        -2.5rem;
  right:      0;
  background: none;
  border:     none;
  color:      #fff;
  font-size:  1.8rem;
  cursor:     pointer;
  line-height: 1;
  opacity:    0.7;
  transition: opacity 0.2s;
}

.gallery-lightbox__close:hover { opacity: 1; }

.gallery-lightbox__prev,
.gallery-lightbox__next {
  position:  fixed;
  top:       50%;
  transform: translateY(-50%);
  background: none;
  border:    none;
  color:     #fff;
  font-size: 2.5rem;
  cursor:    pointer;
  padding:   1rem 1.5rem;
  opacity:   0.55;
  transition: opacity 0.2s;
  z-index:   2001;
  line-height: 1;
}

.gallery-lightbox__prev { left:  0; }
.gallery-lightbox__next { right: 0; }
.gallery-lightbox__prev:hover,
.gallery-lightbox__next:hover { opacity: 1; }

/* Gallery responsive */
@media (max-width: 768px) {
  .gallery__grid {
    grid-template-columns: 1fr;
    grid-auto-rows:        200px;
    padding:               0 1rem;
  }
  .gallery__item--tall { grid-row: span 1; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows:        200px;
  }
}


/* ============================================================
   QUIZ — Trova il tuo materasso ideale
   ============================================================ */
.quiz {
  background-color: var(--color-dark);
  color:            var(--color-white);
}

.quiz__intro {
  text-align:    center;
  margin-bottom: 3rem;
}

.quiz__eyebrow {
  font-family:    var(--font-body);
  font-size:      0.7rem;
  font-weight:    400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity:        0.45;
  margin-bottom:  0.6rem;
}

.quiz__title {
  font-family:   var(--font-heading);
  font-size:     clamp(2rem, 4vw, 3rem);
  font-weight:   300;
  margin-bottom: 0.5rem;
}

.quiz__subtitle {
  opacity:   0.6;
  font-size: 0.95rem;
}

/* Link secondario al configuratore, sotto l'intro del quiz */
.quiz__configura {
  display:         inline-block;
  margin-top:      1.25rem;
  font-family:     var(--font-body);
  font-size:       0.75rem;
  letter-spacing:  0.14em;
  text-transform:  uppercase;
  color:           var(--color-white);
  opacity:         0.7;
  border-bottom:   1px solid rgba(255, 255, 255, 0.4);
  padding-bottom:  3px;
  transition:      opacity var(--transition-base);
}

.quiz__configura:hover { opacity: 1; }

/* Progress */
.quiz__progress {
  display:       flex;
  align-items:   center;
  gap:           1rem;
  max-width:     560px;
  margin:        0 auto 2.5rem;
}

.quiz__progress-bar {
  flex:          1;
  height:        2px;
  background:    rgba(255, 255, 255, 0.12);
  border-radius: 1px;
  overflow:      hidden;
}

.quiz__progress-fill {
  height:        100%;
  width:         0%;
  background:    var(--color-white);
  border-radius: 1px;
  transition:    width 0.4s ease;
}

.quiz__progress-label {
  font-size:   0.72rem;
  opacity:     0.45;
  white-space: nowrap;
  font-family: var(--font-body);
  min-width:   3rem;
  text-align:  right;
}

/* Steps */
.quiz__steps {
  max-width: 560px;
  margin:    0 auto;
  min-height: 260px;
}

.quiz__step    { display: none; }
.quiz__step.is-active {
  display:   block;
  animation: quizFadeIn 0.35s ease both;
}

@keyframes quizFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quiz__question {
  font-family:   var(--font-heading);
  font-size:     clamp(1.5rem, 3vw, 2rem);
  font-weight:   300;
  margin-bottom: 1.5rem;
  line-height:   1.25;
}

.quiz__options {
  display:        flex;
  flex-direction: column;
  gap:            0.65rem;
}

.quiz__option {
  background:    transparent;
  border:        1px solid rgba(255, 255, 255, 0.25);
  color:         var(--color-white);
  padding:       0.85rem 1.25rem;
  font-family:   var(--font-body);
  font-size:     0.88rem;
  font-weight:   300;
  text-align:    left;
  cursor:        pointer;
  border-radius: 2px;
  transition:    background 0.18s, border-color 0.18s, color 0.18s;
}

.quiz__option:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

.quiz__option.is-selected {
  background:   var(--color-white);
  border-color: var(--color-white);
  color:        var(--color-dark);
}

/* Nav */
.quiz__nav {
  max-width:  560px;
  margin:     1.75rem auto 0;
  text-align: right;
}

.quiz__btn-next {
  background:    var(--color-white);
  color:         var(--color-dark);
  border:        none;
  padding:       0.75rem 2.5rem;
  font-family:   var(--font-body);
  font-size:     0.9rem;
  font-weight:   400;
  cursor:        pointer;
  border-radius: 2px;
  opacity:       0.3;
  transition:    opacity 0.2s;
  pointer-events: none;
}

.quiz__btn-next.is-ready {
  opacity:        1;
  pointer-events: all;
}

.quiz__btn-next.is-ready:hover { opacity: 0.82; }

/* Result */
.quiz__result { display: none; text-align: center; }

.quiz__result.is-active {
  display:   block;
  animation: quizFadeIn 0.4s ease both;
}

.quiz__result-eyebrow {
  font-family:    var(--font-body);
  font-size:      0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity:        0.45;
  margin-bottom:  0.75rem;
}

.quiz__result-product {
  font-family:   var(--font-heading);
  font-size:     clamp(2.4rem, 6vw, 4rem);
  font-weight:   300;
  line-height:   1.05;
  margin-bottom: 1rem;
}

.quiz__result-desc {
  opacity:       0.68;
  font-size:     0.95rem;
  max-width:     460px;
  margin:        0 auto 2.25rem;
  line-height:   1.75;
}

.quiz__result-actions {
  display:         flex;
  gap:             1rem;
  justify-content: center;
  flex-wrap:       wrap;
  margin-bottom:   2rem;
}

.quiz__restart {
  background:      transparent;
  border:          none;
  color:           var(--color-white);
  opacity:         0.38;
  font-family:     var(--font-body);
  font-size:       0.82rem;
  cursor:          pointer;
  text-decoration: underline;
  transition:      opacity 0.2s;
}

.quiz__restart:hover { opacity: 0.75; }

@media (max-width: 600px) {
  .quiz__result-actions {
    flex-direction: column;
    align-items:    stretch;
  }
  .quiz__result-actions .quiz__result-btn { text-align: center; }
}

@media (max-width: 480px) {
  .quiz__option {
    min-height:  44px;
    display:     flex;
    align-items: center;
  }
}


/* ============================================================
   TAPPEZZERIA — Expand panel
   ============================================================ */
.tapp-toggle {
  display:     inline-flex;
  align-items: center;
  gap:         0.5rem;
}

.tapp-toggle__arrow {
  display:    inline-block;
  transition: transform 0.35s ease;
  font-style: normal;
}

.tapp-toggle.is-open .tapp-toggle__arrow { transform: rotate(180deg); }

.tapp-expand {
  max-height: 0;
  overflow:   hidden;
  transition: max-height 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.tapp-expand.is-open { max-height: 5000px; }

.tapp-expand__inner {
  padding:          4rem 2rem;
  background-color: var(--color-beige);
}

/* Services grid */
.tapp-services {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2.5rem;
  max-width:             1100px;
  margin:                0 auto 3.5rem;
}

.tapp-service__icon {
  margin-bottom: 1rem;
  color:         var(--color-dark);
}

.tapp-service__title {
  font-family:   var(--font-heading);
  font-size:     1.15rem;
  font-weight:   600;
  color:         var(--color-dark);
  margin-bottom: 0.5rem;
  line-height:   1.25;
}

.tapp-service__text {
  font-family: var(--font-body);
  font-size:   0.85rem;
  line-height: 1.7;
  color:       var(--color-dark);
  opacity:     0.65;
}

/* Mini gallery */
.tapp-mini-gallery {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   8px;
  max-width:             1100px;
  margin:                0 auto 3rem;
}

.tapp-mini-gallery__item {
  aspect-ratio:     4 / 3;
  overflow:         hidden;
  border-radius:    3px;
  cursor:           pointer;
  background-color: var(--color-beige-dark);
  position:         relative;
}

.tapp-mini-gallery__item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.4s ease;
}

.tapp-mini-gallery__item:hover img { transform: scale(1.06); }

.tapp-mini-gallery__item.is-placeholder::after {
  content:         'Immagine in arrivo';
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.72rem;
  color:           var(--color-dark);
  opacity:         0.35;
  font-family:     var(--font-body);
}

/* CTA */
.tapp-cta { text-align: center; }

/* Responsive */
@media (max-width: 900px) {
  .tapp-services         { grid-template-columns: repeat(2, 1fr); }
  .tapp-mini-gallery     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .tapp-services         { grid-template-columns: 1fr; }
  .tapp-expand__inner    { padding: 2.5rem 1.25rem; }
}

@media (max-width: 480px) {
  .tapp-mini-gallery     { grid-template-columns: 1fr; }
}


/* ============================================================
   Cookie Banner — aggiornamenti
   ============================================================ */

/* Link nel testo del banner */
.cookie-banner__link {
  color:           var(--color-white);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.9;
}

.cookie-banner__link:hover {
  opacity: 1;
}

/* Bottone outline — ora può essere <a> o <button> */
a.cookie-banner__reject {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  text-decoration: none;
}


/* ============================================================
   Footer — Gestisci preferenze cookie
   ============================================================ */
.footer__cookie-reset {
  background:     none;
  border:         none;
  padding:        0;
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-dark);
  opacity:        0.5;
  cursor:         pointer;
  transition:     opacity var(--transition-base);
}

.footer__cookie-reset:hover {
  opacity: 1;
}


/* ============================================================
   Pagine legali — Privacy & Cookie Policy
   ============================================================ */
.legal-page {
  background-color: var(--color-beige);
  padding-top:      calc(var(--nav-height) + 4rem);
  padding-bottom:   6rem;
  min-height:       80vh;
}

.legal-page__inner {
  max-width: 800px;
  margin:    0 auto;
  padding:   0 2rem;
}

.legal-page__header {
  margin-bottom: 4rem;
  text-align:    center;
}

.legal-page__label {
  font-family:    var(--font-body);
  font-size:      0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--color-dark);
  opacity:        0.45;
  margin-bottom:  1rem;
}

.legal-page__title {
  font-family:    var(--font-heading);
  font-weight:    300;
  font-size:      clamp(2.25rem, 5vw, 3.5rem);
  color:          var(--color-dark);
  letter-spacing: 0.02em;
  margin-bottom:  0.75rem;
}

.legal-page__date {
  font-family: var(--font-body);
  font-size:   0.8125rem;
  color:       var(--color-dark);
  opacity:     0.45;
}

.legal-section {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(44, 44, 44, 0.1);
}

.legal-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.legal-section__title {
  font-family:   var(--font-heading);
  font-weight:   600;
  font-size:     1.25rem;
  color:         var(--color-dark);
  margin-bottom: 1.25rem;
  letter-spacing: 0.01em;
}

.legal-section__text {
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     0.9375rem;
  line-height:   1.85;
  color:         var(--color-dark);
  opacity:       0.8;
  margin-bottom: 1rem;
}

.legal-section__text:last-child {
  margin-bottom: 0;
}

.legal-section__list {
  font-family:   var(--font-body);
  font-weight:   300;
  font-size:     0.9375rem;
  line-height:   1.85;
  color:         var(--color-dark);
  opacity:       0.8;
  padding-left:  1.5rem;
  margin-bottom: 1rem;
}

.legal-section__list li {
  margin-bottom: 0.4rem;
}

.legal-link {
  color:           var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity:         0.8;
  transition:      opacity var(--transition-base);
}

.legal-link:hover {
  opacity: 1;
}

/* Tabella cookie */
.legal-table-wrap {
  overflow-x: auto;
  margin:     1.5rem 0;
  border-radius: 4px;
}

.legal-table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--font-body);
  font-size:       0.875rem;
  color:           var(--color-dark);
}

.legal-table th {
  font-weight:    400;
  font-size:      0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-dark);
  opacity:        0.5;
  padding:        0.75rem 1rem;
  text-align:     left;
  border-bottom:  1px solid rgba(44, 44, 44, 0.15);
  white-space:    nowrap;
}

.legal-table td {
  padding:       0.875rem 1rem;
  border-bottom: 1px solid rgba(44, 44, 44, 0.08);
  font-weight:   300;
  line-height:   1.6;
  vertical-align: top;
}

.legal-table tbody tr:last-child td {
  border-bottom: none;
}

.legal-table code {
  font-family:      'Courier New', monospace;
  font-size:        0.8rem;
  background:       rgba(44, 44, 44, 0.06);
  padding:          0.15rem 0.4rem;
  border-radius:    3px;
  word-break:       break-all;
}

@media (max-width: 640px) {
  .legal-page {
    padding-top: calc(var(--nav-height) + 2.5rem);
    padding-bottom: 4rem;
  }

  .legal-page__inner {
    padding: 0 1.25rem;
  }

  .legal-table th,
  .legal-table td {
    padding: 0.625rem 0.75rem;
  }
}