:root {
   --paper: #F3EFE9;
   /* avorio catalogo */
   --paper-2: #EAE2D6;
   --navy: #1D3456;
   /* blu notte catalogo */
   --navy-2: #132238;
   --terra: #C87662;
   /* terracotta catalogo — valore esatto dagli elementi grafici */
   --terra-soft: #E9C3B2;
   --aqua: #8FCFCB;
   /* acqua tavola 4 */
   --ink: #2A2D31;
   --muted: #6E6962;
   --line: rgba(29, 52, 86, .14);
   /* tinte piene dei 5 gesti (dalle tavole) */
   --g1: #F2E1B6;
   /* semplificare — parete color burro, tavola 1 */
   --g2: #F1D3BF;
   /* proteggere — pesca del maglione, tavola 2 */
   --g3: #D3DEC8;
   /* integrare — salvia, tavola 3 */
   --g4: #9ED3CE;
   /* equilibrare — acqua, tavola 4 */
   --g5: #1D3456;
   /* prendersi cura — blu notte, tavola 5 */
   --laica-grad: linear-gradient(to right, #01395E 0%, #018AC1 40%, #018AC1 60%, #01395E 100%);
   --laica-blue: #0A6FA7;
   --f-display: "Libre Bodoni", "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
   --f-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
   --f-menu: "Arimo", Arial, Helvetica, sans-serif;
   --wrap: 1280px;
   --gutter: clamp(16px, 4.5vw, 64px);
   --r: 6px;
   --ease: cubic-bezier(.22, .61, .24, 1);
   --hh: 90px;
   color-scheme: light;
}

*,
*::before,
*::after {
   box-sizing: border-box
}

body {
   margin: 0;
   background: var(--paper);
   color: var(--ink);
   font: 400 16px/1.7 var(--f-body);
   -webkit-font-smoothing: antialiased;
   overflow-x: clip
}

img {
   max-width: 100%;
   display: block
}

a {
   color: inherit
}

button {
   font: inherit;
   color: inherit;
   cursor: pointer
}

:focus-visible {
   outline: 2px solid var(--terra);
   outline-offset: 3px
}

.wrap {
   max-width: var(--wrap);
   margin-inline: auto;
   padding-inline: var(--gutter)
}

h1,
h2,
h3 {
   font-family: var(--f-display);
   font-weight: 400;
   color: inherit;
   text-wrap: balance;
   margin: 0;
   line-height: 1.04;
   letter-spacing: -.015em
}

p {
   margin: 0
}

.eyebrow {
   font: 500 11px/1.4 var(--f-body);
   letter-spacing: .32em;
   text-transform: uppercase;
   color: var(--terra)
}

.stroke {
   display: block;
   width: 150px;
   height: 12.2px;
   color: var(--terra)
}

.slash {
   display: inline-block;
   width: 6px;
   height: 11px;
   color: var(--terra);
   vertical-align: -1px
}

.dot {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--terra);
   flex: none
}

/* piè di pagina "da catalogo":  n \ Metodo italiano per stare bene */
.folio {
   position: absolute;
   left: var(--gutter);
   bottom: 22px;
   z-index: 5;
   display: flex;
   align-items: center;
   gap: 10px;
   font: 500 12.5px var(--f-menu);
   color: currentColor;
   opacity: .8;
   margin: 0
}

.folio b {
   font: 400 15px var(--f-display);
   color: var(--terra)
}

.gesto.dark .folio b,
.gesto.dark .slash {
   color: var(--terra-soft)
}

@media (max-width: 768px) {
   .folio {
      display: none;
   }
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap
}

.w {
   display: inline-block;
   animation: rise 1.5s var(--ease) both
}

@keyframes rise {
   from {
      opacity: 0;
      transform: translateY(.4em);
      filter: blur(8px)
   }

   to {
      opacity: 1;
      transform: none;
      filter: none
   }
}

/* elementi scontornati dalle tavole: il wrapper si muove con lo scroll, l'img "galleggia" */
.cut {
   position: absolute;
   pointer-events: none;
   will-change: transform;
   z-index: 3
}

.cut img {
   width: 100%;
   height: auto;
   animation: bob var(--bob, 9s) ease-in-out infinite alternate
}

@keyframes bob {
   from {
      transform: translateY(-6px) rotate(-3deg)
   }

   to {
      transform: translateY(8px) rotate(4deg)
   }
}

/* reveal allo scroll (JS aggiunge .in; senza JS tutto è visibile) */
.js [data-rv] {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity 1.2s var(--ease), transform 1.2s var(--ease)
}

.js [data-rv].in {
   opacity: 1;
   transform: none
}

/* ============================================================
   1. HEADER 
   ============================================================ */
.lh {
   position: sticky;
   top: env(safe-area-inset-top, 0px);
   z-index: 100;
   background: var(--laica-grad);
   color: #fff;
   font-family: var(--f-body);
   transition: box-shadow .3s
}

.lh.is-stuck {
   box-shadow: 0 2px 18px rgba(1, 30, 50, .35)
}

.lh-main {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   height: 80px;
   max-width: 1440px;
   margin: auto;
   padding-inline: 30px;
   transition: height .3s
}

.lh.is-stuck .lh-main {
   height: 62px
}

.lh-left,
.lh-right {
   display: flex;
   align-items: center;
   gap: 18px;
   font-size: 12.24px;
   color: rgba(255, 255, 255, .8)
}

.lh-right {
   justify-content: flex-end;
   gap: 14px
}

.lh-search {
   display: flex;
   align-items: center;
   background: rgba(255, 255, 255, .12);
   border-radius: 99px;
   height: 32px;
   padding: 0 10px 0 14px;
   width: 170px
}

.lh-search input {
   background: none;
   border: 0;
   color: #fff;
   font: 12px var(--f-body);
   width: 100%;
   outline: 0
}

.lh-search input::placeholder {
   color: rgba(255, 255, 255, .6)
}

.lh-social {
   display: flex;
   gap: 12px
}

.lh-social a,
.lh-right a {
   display: flex;
   align-items: center;
   gap: 8px;
   text-decoration: none;
   color: rgba(255, 255, 255, .8)
}

.lh-social a:hover,
.lh-right a:hover {
   color: #fff
}

.lh-flags {
   display: flex;
   gap: 10px;
   padding-inline: 14px;
   border-inline: 1px solid rgba(255, 255, 255, .2)
}

.lh-flags svg {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   display: block
}

.lh-logo img {
   height: 44px;
   width: auto;
   transition: height .3s
}

.lh.is-stuck .lh-logo img {
   height: 36px
}

.lh-nav {
   height: 40px;
   display: flex;
   justify-content: center
}

.lh-nav>ul {
   display: flex;
   list-style: none;
   margin: 0;
   padding: 0;
   gap: 4px
}

.lh-nav>ul>li {
   position: relative
}

.lh-nav>ul>li>a {
   display: flex;
   align-items: center;
   gap: 3px;
   height: 40px;
   padding: 0 9px;
   font-size: 16px;
   color: rgba(255, 255, 255, .8);
   text-decoration: none;
   position: relative
}

.lh-nav>ul>li>a:hover,
.lh-nav>ul>li.open>a {
   color: #fff
}

.lh-nav>ul>li.active>a {
   color: #fff
}

.lh-nav>ul>li.active>a::before {
   content: "";
   position: absolute;
   top: 0;
   left: 9px;
   right: 9px;
   height: 3px;
   background: rgba(255, 255, 255, .85)
}

.lh-nav .chev {
   width: 9px;
   height: 9px;
   opacity: .8
}

.dd {
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 260px;
   background: #fff;
   color: #777;
   font-family: var(--f-menu);
   font-size: 14px;
   padding: 18px 20px;
   box-shadow: 1px 1px 15px rgba(0, 0, 0, .15);
   opacity: 0;
   visibility: hidden;
   transform: translateY(6px);
   transition: .2s;
   text-align: left
}

.lh-nav li:hover>.dd,
.lh-nav li:focus-within>.dd,
.lh-nav li.open>.dd {
   opacity: 1;
   visibility: visible;
   transform: none
}

.dd.mega {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: minmax(210px, 1fr);
   gap: 28px;
   left: 50%;
   translate: -50% 0;
   width: max-content;
   max-width: min(900px, 92vw)
}

.dd h6 {
   margin: 0 0 8px;
   font: 700 13px var(--f-menu);
   color: var(--laica-blue);
   text-transform: none
}

.dd ul {
   list-style: none;
   margin: 0;
   padding: 0
}

.dd li a {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 7px 0;
   border-bottom: 1px solid #ececec;
   text-decoration: none;
   color: #777;
   font-size: 13px
}

.dd li:last-child a {
   border-bottom: 0
}

.dd li a:hover {
   color: #222
}

.dd .ico {
   flex: none;
   width: 30px;
   height: 30px;
   border-radius: 6px;
   background: #EEF4F8;
   display: grid;
   place-items: center;
   color: var(--laica-blue)
}

.dd .ico svg {
   width: 16px;
   height: 16px
}

.lh-burger {
   display: none;
   background: none;
   border: 0;
   padding: 8px;
   color: #fff
}

.lh-drawer {
   position: fixed;
   inset: 0;
   z-index: 200;
   pointer-events: none
}

.lh-drawer .veil {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .5);
   opacity: 0;
   transition: .3s
}

.lh-drawer .panel {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   width: min(320px, 86vw);
   background: #fff;
   color: #333;
   transform: translateX(-100%);
   transition: .35s cubic-bezier(.2, .8, .2, 1);
   overflow: auto;
   padding: 20px 0 calc(20px + env(safe-area-inset-bottom, 0px));
   font-family: var(--f-body)
}

.lh-drawer.open {
   pointer-events: auto
}

.lh-drawer.open .veil {
   opacity: 1
}

.lh-drawer.open .panel {
   transform: none
}

.lh-drawer details {
   border-bottom: 1px solid #eee
}

.lh-drawer summary,
.lh-drawer .lnk {
   display: flex;
   justify-content: space-between;
   padding: 14px 22px;
   font-size: 15px;
   text-transform: uppercase;
   letter-spacing: .02em;
   list-style: none;
   cursor: pointer;
   text-decoration: none;
   color: #333;
   border-bottom: 1px solid #eee
}

.lh-drawer details summary {
   border-bottom: 0
}

.lh-drawer summary::-webkit-details-marker {
   display: none
}

.lh-drawer details a {
   display: block;
   padding: 8px 34px;
   font-size: 13px;
   color: #777;
   text-decoration: none
}

@media (max-width:1180px) {
   .lh-search {
      width: 130px
   }

   .lh-nav>ul>li>a {
      font-size: 14px;
      padding: 0 6px
   }
}

@media (max-width:980px) {
   .lh-main {
      grid-template-columns: 48px 1fr 48px;
      height: 64px;
      padding-inline: 12px
   }

   .lh-left,
   .lh-right,
   .lh-nav {
      display: none
   }

   .lh-burger {
      display: block
   }

   .lh-logo {
      justify-self: center
   }

   .lh-logo img {
      height: 40px
   }
}



/* ============================================================
   1. APERTURA "PORTALE"
   ============================================================ */
.hero {
   position: relative;
   height: 280vh;
   background: var(--paper)
}

.hero-stage {
   position: sticky;
   /*top: var(--hh);*/
   top:0px;
   /*height: calc(100svh - var(--hh));*/
   height: 90vh;
   min-height: 540px;
   overflow: hidden;
   background: radial-gradient(120% 95% at 50% 45%, #F7DECB 0%, #F0C9AF 55%, #E7B698 100%)
}

.portal {
   position: absolute;
   inset: 0;
   animation: portalIn 2.2s var(--ease) both
}

@keyframes portalIn {
   from {
      opacity: 0;
      transform: scale(1.06)
   }

   to {
      opacity: 1;
      transform: none
   }
}

/* velatura per la leggibilità del titolo: scura in alto e in basso, trasparente al centro */
.portal::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   background: linear-gradient(180deg, rgba(19, 34, 56, .62) 0%, rgba(19, 34, 56, .18) 30%, rgba(19, 34, 56, 0) 46%, rgba(19, 34, 56, 0) 58%, rgba(19, 34, 56, .2) 74%, rgba(19, 34, 56, .66) 100%)
}

.portal svg {
   width: 100%;
   height: 100%;
   display: block;
   transform-origin: 50% 45%;
   will-change: transform
}

.portal::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 2;
   background: radial-gradient(75% 65% at 50% 50%, rgba(19, 34, 56, .25), rgba(19, 34, 56, .62));
   opacity: var(--veil, 0);
   pointer-events: none
}

.h-line {
   position: absolute;
   z-index: 5;
   margin: 0;
   font: 400 clamp(48px, 7.4vw, 146px)/.9 var(--f-display);
   color: #FFF8F0;
   letter-spacing: -.025em;
   white-space: nowrap;
   will-change: transform, opacity;
   text-shadow: 0 2px 28px rgba(10, 25, 45, .5), 0 1px 3px rgba(10, 25, 45, .35)
}


.h-line.l1 {
   left: var(--gutter);
   left: 10%;
   top: 9%
}

.h-line.l2 {
   right: var(--gutter);
   right: 10%;
   bottom: 7%;
   font-style: italic
}

.h-sub {
   position: absolute;
   z-index: 6;
   left: 50%;
   top: 50%;
   translate: -50% -50%;
   width: min(900px, 86vw);
   text-align: center;
   color: #FFF8F0;
   font: italic 400 clamp(40px, 3.8vw, 60px)/1.18 var(--f-display);
   text-shadow: 0 2px 30px rgba(10, 25, 45, .35);
   opacity: 0;
   will-change: transform, opacity;
   margin: 0
}
p#hsub {
    padding-top: 80px;
    line-height: 1.3em !important;
    max-width: 800px;
}

.h-sub .stroke {
   margin: 28px auto 0;
   color: var(--terra-soft)
}

.hero .cut {
   animation: cutIn 1.8s var(--ease) both
}

@keyframes cutIn {
   from {
      opacity: 0;
      scale: .2
   }

   to {
      opacity: 1;
      scale: 1
   }
}

.scroll-cue {
   position: absolute;
   left: var(--gutter);
   bottom: 20px;
   z-index: 6;
   display: grid;
   justify-items: start;
   gap: 6px;
   font: italic 15px var(--f-display);
   color: #FFF8F0;
   margin: 0
}

.scroll-cue i {
   width: 1px;
   height: 38px;
   background: linear-gradient(rgba(255, 248, 240, 0), #FFF8F0);
   position: relative;
   overflow: hidden
}

.scroll-cue i::after {
   content: "";
   position: absolute;
   left: -1px;
   width: 3px;
   height: 10px;
   border-radius: 2px;
   background: var(--terra);
   animation: drip 2.4s ease-in infinite
}

@keyframes drip {
   from {
      top: -10px
   }

   to {
      top: 38px
   }
}

@media (max-width:760px) {
   .hero {
      height: 230vh;
   }
   
   .h-line {
      font-size: clamp(46px, 14vw, 74px)
   }

   .h-line.l1 {
      top: 5%;
	  left: var(--gutter);
   }


   .h-line.l2 {
      bottom: 8%;
	  right: var(--gutter);
   }

   .scroll-cue {
      display: none
   }
}

/* ============================================================
   2. INTRODUZIONE
   ============================================================ */
.intro {
   position: relative;
   padding-block: clamp(110px, 14vw, 210px);
   background: var(--paper);
   overflow: hidden
}

.intro-grid {
   display: grid;
   grid-template-columns: 6fr 5fr;
   gap: clamp(36px, 6vw, 110px);
   align-items: end;
   position: relative;
   z-index: 2
}

.intro-title {
   font-size: clamp(42px, 4.0vw, 66px);
   color: var(--navy);
   line-height: 1.02
}

.intro-title em {
   color: var(--terra)
}

.intro .stroke {
   margin-top: 34px
}

.intro .lead {
   font: 400 clamp(22px, 2.1vw, 30px)/1.4 var(--f-display);
   color: var(--navy)
}

.intro .lead2 {
   font-family: Arimo, sans-serif;
   margin-top: 22px;
   font-size: 18px;
   line-height: 1.8;
   color: #4a4b50;
   max-width: 48ch
}

.verbs {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 0;
   margin-top: clamp(60px, 7vw, 110px);
   padding-top: 28px;
   border-top: 1px solid var(--line);
   font: italic 400 clamp(24px, 2.1vw, 30px)/1.4 var(--f-display);
   color: var(--navy);
   position: relative;
   z-index: 2
}

.verbs button {
   background: none;
   border: 0;
   padding: 2px 0;
   font: inherit;
   color: inherit;
   transition: color .3s;
   position: relative
}

.verbs button::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 2px;
   height: 1px;
   background: var(--terra);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .5s var(--ease)
}

.verbs button:hover,
.verbs button:focus-visible {
   color: var(--terra)
}

.verbs button:hover::after {
   transform: none
}

.verbs .sep {
   color: var(--terra);
   opacity: .6;
   padding-inline: 14px
}

.verbs {
   position: relative
}

.verbs button.lit {
   color: var(--terra)
}

/* fogliolina (tavola 4) che salta da un gesto all'altro seguendo lo scroll  [JS] */
.leaf-fly {
   position: absolute;
   left: 0;
   top: 0;
   width: 34px;
   z-index: 3;
   pointer-events: none;
   will-change: transform;
   opacity: 0;
   transition: opacity .6s
}

.leaf-fly.on {
   opacity: 1
}

.leaf-fly img {
   width: 100%;
   height: auto;
   animation: bob 3.6s ease-in-out infinite alternate
}

@media (max-width:860px) {
   .intro-grid {
      grid-template-columns: 1fr
   }

   .intro .cut {
      width: 50px !important;
      top: 5% !important;
   }
}

/* ============================================================
   3. CITAZIONE A TUTTA PAGINA 
   ============================================================ */
blockquote {
    padding: inherit;
    border: 0px;
}

.quote {
   position: relative;
   height: 210vh;
   background: #B5705A
}

.quote-in {
   position: sticky;
   top: var(--hh);
   height: calc(100svh - var(--hh));
   display: grid;
   align-items: center;
   overflow: hidden;
   padding-inline: var(--gutter)
}

.quote blockquote {
   margin: 0;
   max-width: 15ch;
   font: 400 clamp(40px, 4vw, 78px)/1.06 var(--f-display);
   color: #FFF8F0;
   position: relative;
   z-index: 2;
   margin-left: max(0px, calc((100vw - var(--wrap))/2))
}

.quote blockquote .qw {
   opacity: .2;
   transition: opacity .35s
}

.quote blockquote .qw.on {
   opacity: 1
}

.quote blockquote em {
   font-style: italic
}

.girl {
   position: absolute;
   right: 0;
   bottom: 0;
   height: 94%;
   z-index: 1;
   will-change: transform
}

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

@media (max-width:760px) {
   .quote-in {
      align-items: start;
      padding-top: 40px
   }

   .girl {
      height: 68%;
      right: -6%
   }
}

/* ============================================================
   4. I CINQUE GESTI 
   ============================================================ */
.gesti {
   --gbg: var(--paper);
   --gfg: var(--navy);
   position: relative;
   background: var(--gbg);
   color: var(--gfg);
   transition: background-color 1.2s var(--ease), color 1.2s var(--ease)
}

.gesti-head {
   padding-block: clamp(110px, 13vw, 190px) clamp(40px, 5vw, 70px);
   text-align: center;
   position: relative
}

.gesti-head h2 {
   font-size: clamp(36px, 3.5vw, 68px);
   margin-top: 18px;
   max-width: 600px;
    margin: 0 auto;
	padding-bottom: 10px;
}
}

.gesti-head p.s {
   font: italic 400 clamp(19px, 1.8vw, 25px)/1.4 var(--f-display);
   margin-top: 20px
}

.gesti-head .stroke {
   margin: 28px auto 0
}

.gesto {
   position: relative;
   height: 230vh
}

.gesto-in {
   position: sticky;
   top: var(--hh);
   height: calc(100svh - var(--hh));
   min-height: 560px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: clamp(24px, 5vw, 96px);
   padding-inline: var(--gutter);
   max-width: 1440px;
   margin: auto;
   overflow: hidden
}

.gesto:nth-of-type(even) .g-text {
   order: 2
}

.g-text {
   position: relative;
   z-index: 4;
   max-width: 520px;
   justify-self: center;
   will-change: transform, opacity
}

.g-num {
   font: 400 clamp(80px, 9vw, 150px)/.8 var(--f-display);
   color: var(--terra);
   opacity: .9;
   display: block;
   margin-bottom: 10px
}

.gesto.dark .g-num {
   color: var(--terra-soft)
}

.g-verb {
   font-size: clamp(38px, 4.0vw, 74px);
   line-height: 1
}

.g-sub {
   font: italic 400 clamp(20px, 1.9vw, 27px)/1.3 var(--f-display);
   color: var(--terra);
   margin-top: 12px
}

.gesto.dark .g-sub {
   color: var(--terra-soft)
}

.g-text .stroke {
   margin: 24px 0
}

.gesto.dark .g-text .stroke {
   color: var(--terra-soft)
}

.g-body {
   font-family: Arimo, sans-serif;
   font-size: 18px;
   line-height: 1.75;
   max-width: 48ch;
   opacity: .92
}

.g-body b {
   font-weight: 600
}

.g-art {
   position: relative;
   justify-self: center;
   height: min(76%, 660px);
   aspect-ratio: 3/4.1;
   max-width: 100%
}

.g-arch {
   position: absolute;
   inset: 0;
   border-radius: 50% 50% 8px 8px / 36.6% 36.6% 8px 8px;
   overflow: hidden;
   will-change: clip-path, transform, opacity;
   /*box-shadow: 0 30px 70px rgba(19, 34, 56, .18)*/
}

.g-arch img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   will-change: transform
}

.vig {
   position: absolute;
   border-radius: 50%;
   overflow: hidden;
   border: 6px solid var(--paper);
   box-shadow: 0 14px 34px rgba(19, 34, 56, .18);
   z-index: 3;
   will-change: transform
}

.vig img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.vig.v1 {
   width: clamp(96px, 11vw, 168px);
   aspect-ratio: 1;
   left: -14%;
   top: 10%
}

.vig.v2 {
   width: clamp(80px, 9vw, 138px);
   aspect-ratio: 1;
   right: -12%;
   bottom: 12%
}

.gesto:nth-of-type(even) .vig.v1 {
   left: auto;
   right: -14%
}

.gesto:nth-of-type(even) .vig.v2 {
   right: auto;
   left: -12%
}

@media (max-width:760px) {
   .gesto {
      height: auto
   }

   .gesto-in {
      position: relative;
      top: 0;
      height: auto;
      min-height: 0;
      grid-template-columns: 1fr;
      padding-block: 72px;
      gap: 40px
   }

   .gesto:nth-of-type(even) .g-text {
      order: 0
   }

   .g-art {
      height: auto;
      width: min(78%, 360px)
   }

   .vig.v1 {
      left: -12%
   }

   .vig.v2 {
      right: -10%
   }

   .gesto:nth-of-type(even) .vig.v1 {
      left: -12%;
      right: auto
   }

   .gesto:nth-of-type(even) .vig.v2 {
      right: -10%;
      left: auto
   }
}

/* ============================================================
   5. DAI GESTI AI PRODOTTI 
   ============================================================ */
.map {
   --mbg: var(--paper);
   position: relative;
   height: calc(7 * 72vh + 100vh);
   background: var(--mbg);
   transition: background-color 1.1s var(--ease)
}

.map-in {
   position: sticky;
   top: var(--hh);
   height: calc(100svh - var(--hh));
   min-height: 560px;
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   grid-template-rows: auto auto;
   align-content: center;
   column-gap: clamp(28px, 5vw, 90px);
   row-gap: clamp(24px, 5vh, 56px);
   padding-inline: var(--gutter);
   max-width: 1440px;
   margin: auto;
   overflow: hidden
}

.map-title {
   grid-column: 1/-1;
   text-align: center;
   font-size: clamp(30px, 4vw, 46px);
   color: var(--navy)
}

.map-title .stroke {
   margin: 18px auto 0
}

.map-verbs {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 4px;
   align-self: center;
   justify-self: end;
   text-align: right
}

.map-verbs li {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 14px;
   font: 400 clamp(24px, 2.3vw, 36px)/1.25 var(--f-display);
   color: var(--navy);
   opacity: .28;
   cursor: pointer;
   transition: opacity .6s, color .6s
}

.map-verbs li::after {
   content: "";
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--terra);
   transform: scale(0);
   transition: transform .6s var(--ease)
}

.map-verbs li:hover {
   opacity: .55
}

.map-verbs li.on {
   opacity: 1;
   color: var(--terra)
}

.map-verbs li.on::after {
   transform: none
}



.map-right {
   position: relative;
   height: min(54vh, 520px);
   aspect-ratio: 3/4;
   justify-self: center
}

.map-ph {
   position: absolute;
   inset: 0;
   border-radius: 50% 50% 8px 8px / 37.5% 37.5% 8px 8px;
   overflow: hidden;
   clip-path: inset(100% 0 0 0);
   transition: clip-path 1.2s var(--ease);
   /*box-shadow: 0 26px 60px rgba(19, 34, 56, .16)*/
}

.map-ph img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transform: scale(1.18);
   transition: transform 1.8s var(--ease)
}

.map-ph.on {
   clip-path: inset(0 0 0 0);
   z-index: 2
}

.map-ph.on img {
   transform: scale(1)
}

.map-ph.past {
   clip-path: inset(0 0 0 0);
   z-index: 1
}

.map-count {
   position: absolute;
   left: 50%;
   bottom: -34px;
   translate: -50% 0;
   font: italic 16px var(--f-display);
   color: var(--navy);
   font-variant-numeric: tabular-nums;
   display: flex;
   align-items: center;
   gap: 8px
}

.map-right .cut {
   z-index: 4
}

.map-prod {
   position: relative;
   align-self: center;
   min-height: 180px;
   max-width: 340px
}

.mp-item {
   position: absolute;
   left: 0;
   top: 50%;
   right: 0;
   opacity: 0;
   transform: translateY(calc(-50% + 24px));
   transition: opacity .7s var(--ease), transform .7s var(--ease);
   pointer-events: none
}

.mp-item.on {
   opacity: 1;
   transform: translateY(-50%);
   pointer-events: auto
}

.mp-item h3 {
   font-size: clamp(26px, 2.4vw, 38px);
   color: var(--navy);
   line-height: 1.08
}

.mp-item p {
   font: italic 400 clamp(17px, 1.4vw, 20px)/1.4 var(--f-display);
   color: var(--navy);
   opacity: .85;
   margin-top: 10px
}

.mp-item a {
   font-family: 'Arimo';
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-top: 18px;
   font: 600 13px var(--f-body);
   letter-spacing: .06em;
   color: var(--navy);
   text-decoration: none;
   border-bottom: 1px solid var(--terra);
   padding-bottom: 4px
}

.mp-item a svg {
   width: 16px;
   height: 16px;
   transition: transform .4s var(--ease)
}

.mp-item a:hover svg {
   transform: translateX(5px)
}

@media (max-width:860px) {
   .map {
      height: calc(7 * 66vh + 100vh)
   }

   .map-in {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto;
      align-content: start;
      padding-top: 20px;
      row-gap: 14px
   }


   .map-title .stroke {
      display: none
   }

   .map-verbs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2px 14px;
      justify-self: center;
      text-align: center
   }

   .map-verbs li {
      font-size: 18px;
      gap: 6px
   }

   .map-verbs li::after {
      width: 7px;
      height: 7px
   }

   .map-right {
      height: 40vh
   }

   .map-count {
      bottom: -28px
   }

   .map-prod {
      justify-self: center;
      text-align: center;
      min-height: 130px;
      margin-top: 26px;
      max-width: none;
      width: 100%
   }
   
   .map-verbs li.on {
    position: relative;
}

.map-verbs li.on::after {
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--terra);
}
}

/* ============================================================
   7. PRODOTTI GOLD
   ============================================================ */
.gold {
   padding-block: clamp(100px, 12vw, 180px);
   background: var(--paper-2);
   position: relative;
   overflow: hidden
}

.gold-head {
   text-align: center;
   max-width: 780px;
   margin: 0 auto clamp(48px, 6vw, 80px)
}

.gold-head h2 {
   font-size: clamp(30px, 4vw, 58px);
   color: var(--navy)
}

.gold-head p {
   font: italic 400 clamp(18px, 1.6vw, 22px) var(--f-display);
   color: var(--navy);
   opacity: .8;
   margin-top: 18px
}

.gold-grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: clamp(12px, 1.6vw, 22px)
}

.gc {
   position: relative;
   grid-column: span 3;
   aspect-ratio: 3/4;
   border-radius: var(--r);
   overflow: hidden;
   text-decoration: none;
   color: var(--navy);
   background: var(--paper);
   isolation: isolate
}

.gc:nth-child(1) {
   grid-column: span 5;
   aspect-ratio: auto
}

.gc:nth-child(2) {
   grid-column: span 4;
   aspect-ratio: auto
}

.gc:nth-child(3) {
   grid-column: span 3
}

.gc>img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1.4s var(--ease), opacity .8s
}

.gc>img.alt {
   opacity: 0
}

.gc:hover>img {
   transform: scale(1.06)
}

.gc:hover>img.alt,
.gc.open>img.alt {
   opacity: 1
}

.gc .tag {
   position: absolute;
   top: 14px;
   left: 16px;
   z-index: 2;
   font: italic 400 16px var(--f-display);
   color: #fff;
   text-shadow: 0 1px 10px rgba(10, 25, 45, .45);
   display: flex;
   align-items: center;
   gap: 8px
}

.gc .tag i {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--terra)
}

.gc .name {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 2;
   padding: 52px 18px 16px;
   color: #fff;
   background: linear-gradient(0deg, rgba(19, 34, 56, .68), rgba(19, 34, 56, 0));
   font: 400 clamp(18px, 1.45vw, 23px)/1.14 var(--f-display);
   text-wrap: balance;
   transition: opacity .4s
}

.gc .panel {
   position: absolute;
   left: 10px;
   right: 10px;
   bottom: 10px;
   z-index: 3;
   background: var(--c);
   color: var(--fg, var(--navy));
   border-radius: var(--r);
   padding: 20px 20px 18px;
   transform: translateY(calc(100% + 12px));
   transition: transform .7s var(--ease)
}

.gc:hover .panel,
.gc:focus-visible .panel,
.gc.open .panel {
   transform: none
}

.gc:hover .name,
.gc.open .name,
.gc:hover .tag,
.gc.open .tag {
   opacity: 0
}

.gc .tag {
   transition: opacity .4s
}

.gc .panel .v {
   display: flex;
   align-items: center;
   gap: 8px;
   font: italic 400 14px var(--f-display);
   opacity: .85
}

.gc .panel .v .dot {
   background: currentColor;
   width: 7px;
   height: 7px
}

.gc .panel h3 {
   font-size: clamp(20px, 1.8vw, 27px);
   line-height: 1.08;
   margin-top: 4px;
   text-wrap: balance
}

.gc .panel .cl {
   font: italic 400 15.5px/1.35 var(--f-display);
   margin-top: 8px;
   opacity: .92
}

.gc .panel .go {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-top: 16px;
   font: 600 12px var(--f-body);
   letter-spacing: .06em;
   border-bottom: 1px solid currentColor;
   padding-bottom: 3px
}

.gc .panel .go svg {
   width: 16px;
   height: 16px;
   transition: transform .4s var(--ease)
}

.gc:hover .panel .go svg {
   transform: translateX(5px)
}

/* dettagli al passaggio */
.gc .gfl {
   position: absolute;
   z-index: 2;
   pointer-events: none;
   opacity: 0;
   transition: opacity .7s var(--ease), transform 1.3s var(--ease)
}

/* contain + altezza massima: il dettaglio resta sempre tutto dentro la card */
.gc .gfl img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: top right
}

.gc .gfl.a {
   width: 30%;
   height: 26%;
   top: 7%;
   right: 7%;
   transform: translate(120px, -90px) rotate(-40deg) scale(.7)
}

.gc .gfl.b {
   width: clamp(30px, 2.8vw, 44px);
   height: clamp(30px, 2.8vw, 44px);
   top: 42%;
   left: 9%;
   transform: translate(-90px, 40px) rotate(90deg);
   transition-delay: .22s
}

.gc .gfl.b img {
   object-position: center
}

.gc:hover .gfl,
.gc.open .gfl {
   opacity: 1;
   transform: none
}

.gc:hover .gfl img,
.gc.open .gfl img {
   animation: bob 5s ease-in-out infinite alternate
}

@media (max-width:980px) {
   .gold-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .gc,
   .gc:nth-child(n) {
      grid-column: span 1;
      aspect-ratio: 3/4
   }

   .gc:first-child {
      grid-column: span 2;
      aspect-ratio: 16/10
   }
}

@media (max-width:560px) {
   .gold-grid {
      grid-template-columns: 1fr
   }

   .gc:nth-child(n) {
      grid-column: auto;
      aspect-ratio: 4/4.4
   }
}

/* ============================================================
   8. CHIUSURA EMOZIONALE 
   ============================================================ */
.chiusura {
   position: relative;
   background: var(--g4);
   padding-block: clamp(130px, 16vw, 240px);
   overflow: hidden;
   text-align: center
}

.chiusura h2 {
   position: relative;
   z-index: 4;
   font-size: clamp(38px, 4.0vw, 70px);
   color: var(--navy);
   max-width: 16ch;
   margin-inline: auto
}

.chiusura h2 em {
   font-style: italic
}

.chiusura .stroke {
   margin: 36px auto 0;
   color: var(--navy);
   position: relative;
   z-index: 4
}

@media (prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important
   }

   .quote {
      height: auto
   }

   .quote-in {
      position: relative;
      top: 0
   }

   .hero {
      height: auto
   }

   .hero-stage {
      position: relative;
      top: 0
   }

   .quote-in {
      padding-block: 120px
   }

   .quote blockquote .qw {
      opacity: 1
   }

   .gesto {
      height: auto
   }

   .gesto-in {
      position: relative;
      top: 0;
      height: auto;
      padding-block: 90px
   }
}