/* ---------- self-hosted fonts (index_files/fonts/) ---------- */
    @font-face{font-family:'Italiana';font-style:normal;font-weight:400;font-display:swap;src:url('index_files/fonts/Italiana-400.woff2') format('woff2')}
    @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('index_files/fonts/CormorantGaramond-300.woff2') format('woff2')}
    @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('index_files/fonts/CormorantGaramond-400.woff2') format('woff2')}
    @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('index_files/fonts/CormorantGaramond-500.woff2') format('woff2')}
    @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300;font-display:swap;src:url('index_files/fonts/CormorantGaramond-300i.woff2') format('woff2')}
    @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('index_files/fonts/CormorantGaramond-400i.woff2') format('woff2')}
    @font-face{font-family:'Manrope';font-style:normal;font-weight:200;font-display:swap;src:url('index_files/fonts/Manrope-200.woff2') format('woff2')}
    @font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url('index_files/fonts/Manrope-300.woff2') format('woff2')}
    @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('index_files/fonts/Manrope-400.woff2') format('woff2')}
    @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('index_files/fonts/Manrope-500.woff2') format('woff2')}
    @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('index_files/fonts/Manrope-600.woff2') format('woff2')}
    @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('index_files/fonts/Manrope-700.woff2') format('woff2')}
    @font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('index_files/fonts/Manrope-800.woff2') format('woff2')}

    :root {
      --ink: #f7f4ed;
      --ink2: #fbf9f4;
      --card: #ffffff;
      --ivory: #14120e;
      --gold: #c9a96a;
      --gold2: #8a6d2e;
      --line: rgba(138, 109, 46, .3);
      --muted: rgba(20, 18, 14, .62);
      --serif: 'Cormorant Garamond', serif;
      --display: 'Italiana', serif;
      --sans: 'Manrope', sans-serif;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      border-radius: 0 !important
    }

    html {
      scroll-behavior: smooth;
      scrollbar-width: thin;
      scrollbar-color: var(--gold2) var(--ink);
    }

    ::-webkit-scrollbar {
      width: 9px
    }

    ::-webkit-scrollbar-track {
      background: var(--ink)
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(var(--gold2), #6b5322);
      border-radius: 10px
    }

    body {
      background: var(--ink);
      color: var(--ivory);
      font-family: var(--sans);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased
    }

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

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

    ::selection {
      background: var(--gold);
      color: #000
    }

    .wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 clamp(18px, 4vw, 44px)
    }

    section {
      position: relative
    }

    /* ---------- progress ---------- */
    #progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      width: 100%;
      z-index: 130
    }

    #progress i {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--gold2), #b8934a, var(--gold2));
      transform: scaleX(0);
      transform-origin: left
    }

    /* ---------- nav ---------- */
    #nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 120;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      background: rgba(247, 244, 237, .8);
      border-bottom: 1px solid rgba(0, 0, 0, .08)
    }

    .nav-in {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 clamp(18px, 4vw, 44px);
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      flex: 0 0 auto;
      min-width: 0
    }

    .brand img {
      height: 24px;
      width: auto;
      flex: 0 0 auto;
      max-width: none;
      filter: invert(1)
    }

    .brand b {
      font-family: var(--display);
      font-weight: 400;
      letter-spacing: .24em;
      font-size: 12px;
      white-space: nowrap
    }

    #chapnav {
      display: flex;
      gap: 18px;
      font-size: 12px;
      letter-spacing: .12em;
      color: var(--muted);
      text-transform: uppercase;

    }

    #chapnav a:last-child {
      color: var(--gold2);
      font-weight: 800;
    }

    #chapnav a:last-child:hover {
      color: var(--ivory);

    }

    #chapnav a {
      padding: 6px 2px;
      border-bottom: 2px solid transparent;
      transition: .25s;
      white-space: nowrap
    }

    #chapnav a.on {
      color: var(--ivory);
      border-color: var(--gold2)
    }

    #chapnav a:hover {
      color: var(--ivory)
    }

    .lang-switch {
      display: inline-flex;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .55);
      flex: 0 0 auto;
    }

    .lang-switch button {
      background: transparent;
      border: 0;
      color: var(--muted);
      font-family: var(--sans);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .14em;
      padding: 6px 9px 6px 11px;
      cursor: pointer;
      transition: .25s;
    }

    .lang-switch button:not(.on):hover {
      color: var(--ivory);
    }

    .lang-switch button.on {
      background: var(--gold);
      color: #0b0b0c;
    }

    .btn-gold {
      display: inline-flex;
      align-items: center;
      background: var(--gold);
      color: #0b0b0c;
      border: 0;
      padding: 10px 22px;
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      font-weight: 800;
      border-radius: 100px;
      white-space: nowrap;
      transition: .25s
    }

    .btn-gold:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 32px rgba(201, 169, 106, .35)
    }

    .capsule-btn .btn-gold::after {
      content: "→";
      display: inline-block;
      max-width: 0;
      opacity: 0;
      overflow: hidden;
      white-space: nowrap;
      transition: max-width .3s ease, opacity .3s ease, margin .3s ease;
    }

    .capsule-btn .btn-gold:hover {
      background: var(--card);
    }

    .capsule-btn .btn-gold:hover::after {
      max-width: 2em;
      opacity: 1;
      margin-left: 10px;
    }

    .btn-link {
      color: var(--gold2);
      font-size: 14px
    }

    .btn-link:hover {
      text-decoration: underline
    }

    @media(max-width:920px) {
      #chapnav {
        display: none
      }
    }

    /* ---------- HERO (statico, cinematografico) ---------- */
    #hero {
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: var(--ink)
    }

    #hero .bg {
      position: absolute;
      inset: 0
    }

    #hero .bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 20%;
      filter: brightness(.72) saturate(1.02)
    }

    #hero .veil {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(85% 60% at 50% 108%, rgba(247, 244, 237, .92), transparent 60%),
        linear-gradient(to bottom, rgba(247, 244, 237, .84), rgba(247, 244, 237, .5) 42%, rgba(247, 244, 237, .68) 68%, var(--ink) 100%)
    }

    #hero .grain {
      position: absolute;
      inset: 0;
      opacity: .4;
      mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E")
    }

    .hero-in {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 120px 22px 100px;
      will-change: transform, opacity;
      background: rgba(255, 255, 255, 0.55);
    }

    .hero-lab {
      display: inline-block;
      font-size: 10px;
      letter-spacing: .44em;
      text-transform: uppercase;
      color: var(--ink);
      background: var(--gold2);
      border-radius: 100px;
      padding: 9px 20px 9px 24px;
      font-weight: 800;
      margin-bottom: 22px
    }

    .hero-title {
      font-family: var(--display);
      font-weight: 400;
      line-height: .96;
      font-size: clamp(40px, 15vw, 152px);
      text-transform: uppercase
    }
    .hero-title2 {
      font-family: var(--display);
      font-weight: 400;
      line-height: .96;
      font-size: clamp(40px, 15vw, 152px);
      /* text-transform: uppercase; */
      color: var(--gold2);
      margin-top: -0.3em;
    }

    .hero-title em, .hero-title2 em {
      font-family: var(--serif);
      font-style: italic;
      text-transform: none;
      color: var(--gold2);
      font-weight: 300
    }

    .hero-sub {
      margin: 22px auto 0;
      max-width: 640px;
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(18px, 2.2vw, 25px);
      /* text-transform: uppercase; */

    }

    .hero-cta {
      margin-top: 30px;
      display: flex;
      gap: 22px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap
    }

    .hero-meta {
      margin-top: 46px;
      display: flex;
      gap: 10px 28px;
      justify-content: center;
      flex-wrap: wrap;
      font-size: 15px;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .hero-meta b {
      color: var(--ivory)
    }

    .scroll-cue {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      font-size: 9px;
      letter-spacing: .4em;
      text-transform: uppercase;
      color: var(--muted);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px
    }

    .scroll-cue i {
      width: 1px;
      height: 36px;
      background: linear-gradient(var(--gold2), transparent);
      display: block;
      animation: cue 1.8s ease-in-out infinite
    }

    @keyframes cue {
      0% {
        transform: scaleY(0);
        transform-origin: top
      }

      45% {
        transform: scaleY(1);
        transform-origin: top
      }

      55% {
        transform: scaleY(1);
        transform-origin: bottom
      }

      100% {
        transform: scaleY(0);
        transform-origin: bottom
      }
    }

    /* ---------- blocchi tipo ---------- */
    .block {
      padding: clamp(140px, 10vh, 240px) 0;
    }

    .eyebrow {
      font-size: 11px;
      letter-spacing: .4em;
      text-transform: uppercase;
      color: var(--gold2);
      margin-bottom: 16px
    }

    h2.big {
      font-family: var(--display);
      font-weight: 400;
      line-height: 1.02;
      font-size: clamp(34px, 5.6vw, 76px)
    }

    h2.big em {
      font-family: var(--serif);
      font-style: italic;
      color: var(--gold2);
      font-weight: 300
    }

    .sub {
      margin-top: 16px;
      max-width: 780px;
      color: var(--muted);
      font-size: clamp(15px, 1.7vw, 19px);
      line-height: 1.65;
      font-weight: 300
    }

    .sub b {
      color: var(--ivory)
    }

    .center {
      text-align: center
    }

    .center .sub {
      margin-left: auto;
      margin-right: auto
    }

    .rv {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .55s ease, transform .55s ease
    }

    .rv.in {
      opacity: 1;
      transform: none
    }

    .rv.d1 {
      transition-delay: .07s
    }

    .rv.d2 {
      transition-delay: .13s
    }

    /* ---------- sticky chapter (non usato) ---------- */
    .chap-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 6vw, 110px);
      margin-top: clamp(56px, 8vh, 96px);
      align-items: start
    }

    .chap-visual {
      position: sticky;
      top: 96px;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, .1);
      height: min(66vh, 560px);
      background: #000
    }

    .chap-visual img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity .45s ease
    }

    .chap-visual img.on {
      opacity: 1
    }

    .chap-visual .cap {
      position: absolute;
      left: 16px;
      bottom: 16px;
      right: 16px;
      z-index: 2;
      background: rgba(0, 0, 0, .55);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 14px;
      padding: 12px 16px;
      font-size: 10px;
      letter-spacing: .26em;
      text-transform: uppercase
    }

    .chap-visual .cap b {
      color: var(--gold)
    }

    .step {
      padding: 28px 6px 28px 26px;
      border-left: 2px solid rgba(0, 0, 0, .12);
      margin-left: 6px;
      opacity: .38;
      transition: .3s
    }

    .step.on {
      opacity: 1;
      border-color: var(--gold2)
    }

    .step .n {
      font-size: 10px;
      letter-spacing: .34em;
      color: var(--gold2)
    }

    .step h3 {
      font-family: var(--display);
      font-size: clamp(23px, 2.6vw, 34px);
      font-weight: 400;
      margin: 8px 0;
      text-transform: uppercase
    }

    .step .meta {
      display: flex;
      gap: 8px 20px;
      flex-wrap: wrap;
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold2);
      margin-bottom: 10px
    }

    .step p {
      font-size: 15px;
      line-height: 1.7;
      color: var(--muted);
      max-width: 460px
    }

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

      .chap-visual {
        position: relative;
        top: 0;
        height: 340px
      }
    }

    /* ---------- sedi: 5 schede in un'unica riga, date in evidenza ---------- */
    #sedi {
      background: radial-gradient(70% 50% at 50% 0%, #e2ede6 0%, var(--ink) 65%)
    }

    .sedi-row {
      margin-top: clamp(56px, 8vh, 90px);
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: clamp(20px, 2.5vw, 36px)
    }

    .scard {
      background: var(--card);
      border: 1px solid rgba(0, 0, 0, .1);
      display: flex;
      flex-direction: column;
      position: relative
    }

    .scard .ph {
      height: 290px;
      overflow: hidden
    }

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

    .scard .tx {
      padding: 22px 18px 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
      text-align: center;
      align-items: center
    }

    .scard .tx small {
      position: absolute;
      top: 12px;
      right: 12px;
      font-size: 8px;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: #f4eee1;
      background: rgba(0, 0, 0, .55);
      padding: 7px 10px
    }

    .scard .tx h3 {
      font-family: var(--display);
      font-weight: 400;
      font-size: 22px;
      letter-spacing: .04em
    }

    .scard .tx p {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.65
    }

    .scard .date {
      margin-top: 18px;
      background: #f2eee4;
      border-top: 1px solid var(--line);
      color: var(--gold2);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      padding: 15px 10px;
      text-align: center;
      line-height: 1.6
    }

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

    @media(max-width:600px) {
      .sedi-row {
        grid-template-columns: 1fr
      }

      .scard .ph {
        height: 260px
      }
    }

    /* ---------- maison / craft: tre split alternati ---------- */
    #maison {
      background: linear-gradient(var(--ink), #eef2ee 25%, #eef2ee 75%, var(--ink))
    }

    .split-list {
      margin-top: clamp(60px, 9vh, 110px);
      display: flex;
      flex-direction: column;
      gap: clamp(100px, 16vh, 180px)
    }

    .split {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: clamp(36px, 6vw, 100px);
      align-items: center
    }

    .split.flip .split-ph {
      order: 2
    }

    .split-ph {
      height: min(74vh, 660px);
      overflow: hidden;
      background: #ece8de
    }

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

    .split-tx small {
      display: block;
      font-size: 10px;
      letter-spacing: .36em;
      text-transform: uppercase;
      color: var(--gold2);
      margin-bottom: 18px
    }

    .split-tx h3 {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(34px, 4.2vw, 60px);
      line-height: 1.02;
      margin-bottom: 22px
    }

    .split-tx p {
      font-size: 15px;
      line-height: 1.9;
      color: var(--muted);
      max-width: 480px
    }

    .loro-strip {
      /* margin-top: clamp(60px, 9vh, 100px); */
      display: flex;
      align-items: center;
      gap: 30px;
      flex-wrap: wrap;
      /* border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line); */
      padding: 34px 0;
      background: none
    }

    .loro-strip img {
      height: 60px;
      background: #fff;
      /* padding: 6px 14px; */
      mix-blend-mode: darken;
    }

    .loro-strip p {
      font-size: 14px;
      color: var(--muted);
      max-width: 660px;
      line-height: 1.8
    }

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

      .split.flip .split-ph {
        order: 0
      }

      .split-ph {
        height: 52vh
      }
    }

    /* ---------- how it works: righe numerate con filetti ---------- */
    #how {
      background: #efeae1
    }

    .how-list {
      margin-top: clamp(50px, 8vh, 90px);
      border-top: 1px solid rgba(0, 0, 0, .14)
    }

    .how {
      display: grid;
      grid-template-columns: 140px 1fr 240px;
      gap: clamp(24px, 4vw, 64px);
      padding: clamp(44px, 7vh, 72px) 0;
      border-bottom: 1px solid rgba(0, 0, 0, .14);
      align-items: start;
      background: none;
      border-left: 0;
      border-right: 0;
      border-top: 0
    }

    .how .hnum {
      font-family: var(--display);
      font-size: clamp(48px, 5vw, 84px);
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1px var(--gold2)
    }

    .how h3 {
      font-family: var(--display);
      font-size: clamp(26px, 3vw, 40px);
      font-weight: 400;
      margin-bottom: 16px;
      max-width: 520px
    }

    .how p {
      font-size: 15px;
      line-height: 1.85;
      color: var(--muted);
      max-width: 560px
    }

    .how img {
      width: 100%;
      height: 280px;
      object-fit: cover
    }

    @media(max-width:900px) {
      .how {
        grid-template-columns: 80px 1fr
      }

      .how img {
        grid-column: 1/-1;
        height: 240px
      }
    }

    /* ---------- creations: pellicola orizzontale libera, tutto schermo ---------- */
    #crea {
      background: var(--ink2);
      padding: clamp(90px, 12vh, 150px) 0;
      overflow: hidden
    }

    .film {
      margin-top: 38px;
      display: flex;
      gap: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 0 clamp(18px, 4vw, 44px) 6px;
      scrollbar-width: none;
      cursor: grab
    }

    .film::-webkit-scrollbar {
      display: none
    }

    .film.dragging {
      cursor: grabbing
    }

    .film.dragging img {
      pointer-events: none
    }

    .shot {
      position: relative;
      flex: 0 0 clamp(300px, 80vw, 1100px);
      height: min(78vh, 720px);
      background: #000;
      overflow: hidden
    }

    .shot img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      user-select: none;
      -webkit-user-drag: none
    }

    .shot figcaption {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 34px clamp(18px, 3vw, 40px) 26px;
      background: linear-gradient(transparent, rgba(0, 0, 0, .78));
      color: #f4eee1;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 14px
    }

    .shot figcaption b {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(24px, 3.4vw, 52px);
      text-transform: uppercase;
      letter-spacing: .02em;
      line-height: 1
    }

    .shot figcaption span {
      font-size: 10px;
      letter-spacing: .3em;
      color: var(--gold);
      white-space: nowrap;
      padding-bottom: 8px
    }

    .film-ui {
      display: flex;
      align-items: center;
      gap: 18px;
      margin: 22px clamp(18px, 4vw, 44px) 0
    }

    .film-btn {
      width: 52px;
      height: 52px;
      flex: 0 0 52px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--ivory);
      font-size: 20px;
      transition: .25s
    }

    .film-btn:hover {
      background: var(--gold);
      color: #000;
      border-color: var(--gold)
    }

    #fbar {
      flex: 1;
      height: 2px;
      background: rgba(0, 0, 0, .1);
      border-radius: 4px;
      overflow: hidden
    }

    #fbar i {
      display: block;
      height: 100%;
      background: var(--gold2);
      transform: scaleX(0);
      transform-origin: left
    }

    .film-hint {
      font-size: 10px;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap
    }

    @media(max-width:700px) {
      .shot {
        flex-basis: 88vw;
        height: 62vh
      }

      .film-hint {
        display: none
      }
    }

    /* ---------- cuts: fondo bianco, testi antracite ---------- */
    #cuts {
      background: var(--ink);
      color: #2e3136
    }

    #cuts .eyebrow {
      color: #8a6d2e
    }

    #cuts h2.big {
      color: #2e3136
    }

    #cuts h2.big em {
      color: #8a6d2e
    }

    .cut-row {
      margin-top: clamp(64px, 10vh, 110px)
    }

    .cut-row h3 {
      font-family: var(--display);
      font-size: clamp(24px, 3vw, 38px);
      font-weight: 400;
      text-transform: uppercase;
      margin-bottom: 16px;
      color: #2e3136
    }

    .cut-row h3 em {
      font-family: var(--serif);
      font-style: italic;
      text-transform: none;
      color: #8a6d2e
    }

    .cut-track {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none
    }

    .cut-track::-webkit-scrollbar {
      display: none
    }

    .cut {
      /* background: #efece4; */
      position: relative;
      flex: 0 0 auto
    }

    .cut img {
      width: auto;
      max-width: 100%;
      height: 200px;
      margin: 0 auto;
      object-fit: contain;
      /* background: #fff; */
      pointer-events: none;
      mix-blend-mode: darken;
      opacity: 0.4;
    }

    .cut span {
      position: absolute;
      left: 50%;
      bottom: 0;
      background: #2e3136;
      color: #f4eee1;
      font-size: 10px;
      letter-spacing: .3em;
      text-transform: uppercase;
      padding: 12px 18px;
      white-space: nowrap;
      transform: translateX(-50%)
    }

    .cut span b {
      color: var(--gold);
      font-weight: 400;
      margin-right: 12px
    }

    @media(max-width:1000px) {
      .cut-track {
        grid-template-columns: repeat(3, 1fr)
      }
    }

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

      .cut img {
        height: 230px
      }
    }

    @media(max-width:700px) {
      .cut-track {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none
      }

      .cut-track::-webkit-scrollbar {
        display: none
      }

      .cut-track .cut {
        flex: 0 0 auto
      }

      .cut-track .cut img {
        height: 320px
      }
    }

    /* ---------- dieci + black label ---------- */
    #dieci {
      background: var(--card);
      border-top: 1px solid rgba(0, 0, 0, .1);
      border-bottom: 1px solid rgba(0, 0, 0, .1)
    }

    #blacklabel {
      background: var(--card);
      border-bottom: 1px solid rgba(0, 0, 0, .1)
    }

    #blacklabel.block {
      padding-top: clamp(40px, 6vh, 80px)
    }

    .dieci-strip {
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px
    }

    .dieci-strip img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, .1)
    }

    @media(max-width:900px) {
      .dieci-strip {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    .dieci-cta {
      display: none
    }

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

      .dieci-strip img {
        height: 200px
      }

      .dieci-strip img:nth-child(n+4) {
        display: none
      }

      .capsule-btn {
        display: none
      }

      .dieci-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: 200px;
        padding: 20px;
        background: var(--gold);
        color: #0b0b0c;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .22em;
        text-transform: uppercase;
        line-height: 2
      }

      .dieci-cta::after {
        content: "→";
        display: inline-block;
        margin-left: 10px;
        transition: transform .25s ease;
      }

      .dieci-cta:hover,
      .dieci-cta:active {
        background: var(--card);
      }

      .dieci-cta:hover::after {
        transform: translateX(6px);
      }
    }

    /* ---------- contact ---------- */
    #contact {
      background: var(--ink);
      color: var(--ivory)
    }

    #contact .eyebrow {
      color: #8a6d2e
    }

    #contact h2.big em {
      color: #8a6d2e
    }

    #contact .sub {
      color: #555
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 20px;
      margin-top: 32px;
      align-items: start
    }

    .fake-form {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .12);
      padding: clamp(28px, 4vw, 48px)
    }

    .f-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .field {
      margin-bottom: 10px
    }

    .field label {
      display: block;
      font-size: 9px;
      letter-spacing: .24em;
      text-transform: uppercase;
      margin-bottom: 6px;
      color: #6b6b6b
    }

    .field input,
    .field select {
      width: 100%;
      border: 1px solid rgba(0, 0, 0, .14);
      border-radius: 10px;
      padding: 11px 12px;
      font-family: var(--sans);
      font-size: 13px;
      background: #faf7ef;
      color: #333;
      outline: none
    }

    .checks {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 12px 0
    }

    .checks label {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 12px;
      color: #555;
      line-height: 1.6
    }

    .terms {
      font-size: 12px;
      color: #555;
      line-height: 1.7;
      border-top: 1px solid rgba(0, 0, 0, .08);
      padding-top: 12px;
      margin: 6px 0 14px
    }

    .terms a {
      color: #8a6d2e;
      text-decoration: underline
    }

    .side-card {
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      background: #e8efe9;
      color: var(--ivory);
      min-height: 100%;
      display: flex;
      align-items: flex-end
    }

    .side-card img.bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .14
    }

    .side-card>div {
      position: relative;
      padding: 26px
    }

    .side-card img.crest {
      width: 110px;
      border-radius: 50%;
      margin-bottom: 14px
    }

    .side-card h4 {
      font-family: var(--display);
      font-size: 24px;
      font-weight: 400;
      text-transform: uppercase
    }

    .side-card p {
      color: rgba(20, 18, 14, .72);
      font-size: 13px;
      line-height: 1.65;
      margin-top: 8px
    }

    .map-card {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      margin-top: 20px;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .12);
      overflow: hidden;
      min-height: 330px
    }

    .map-info {
      padding: clamp(24px, 3vw, 40px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 16px;
      border-right: 1px solid rgba(0, 0, 0, .08)
    }

    .map-info h4 {
      font-family: var(--display);
      font-size: clamp(22px, 2.4vw, 32px);
      font-weight: 400;
      line-height: 1.15;
      text-transform: uppercase;
      color: var(--ivory)
    }

    .map-info h4 span {
      display: block;
      font-family: var(--sans);
      font-size: 11px;
      letter-spacing: .14em;
      line-height: 1.7;
      text-transform: none;
      color: var(--muted);
      margin-top: 10px
    }

    .map-dir {
      align-self: flex-start;
      font-size: 10px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--gold2);
      text-decoration: none;
      border-bottom: 1px solid rgba(201, 169, 106, .85);
      padding-bottom: 5px;
      transition: color .2s, border-color .2s
    }

    .map-dir:hover {
      color: var(--ivory);
      border-color: var(--ivory)
    }

    .map-frame {
      position: relative;
      min-height: 330px;
      background: #e9e6df
    }

    .map-frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
      display: block
    }

    .field input::placeholder,
    .field textarea::placeholder {
      color: rgba(20, 18, 14, .4)
    }

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

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

      .f-row {
        grid-template-columns: 1fr
      }

      .map-card {
        grid-template-columns: 1fr
      }

      .map-info {
        border-right: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .08)
      }

      .map-frame {
        min-height: 270px
      }
    }

    footer {
      background: #efeae1;
      border-top: 1px solid var(--line);
      padding: 54px 0 26px
    }

    .foot {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 8em;
    }

    .foot img {
      height: 30px;
      filter: invert(1)
    }

    .foot-links {
      display: flex;
      gap: 18px;
      font-size: 10px;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--muted);
      flex-wrap: wrap
    }

    .foot-links a:hover {
      color: var(--gold2)
    }

    .big-foot {
      font-family: var(--display);
      font-size: clamp(44px, 10vw, 160px);
      line-height: 1;
      text-align: center;
      text-transform: uppercase;
      color: transparent;
      -webkit-text-stroke: 1px rgba(201, 169, 106, .35);
      margin: 26px 0 10px;
      user-select: none
    }

    footer small {
      display: block;
      text-align: center;
      color: rgba(20, 18, 14, .5);
      font-size: 12px;
      line-height: 2
    }

    footer small a {
      color: var(--gold2)
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto
      }

      .rv {
        opacity: 1;
        transform: none
      }
    }

    /* ---------- lightbox Dieci / Black Label ---------- */
    #dieci .dieci-strip img,
    #blacklabel .dieci-strip img {
      cursor: zoom-in
    }

    #lightbox {
      position: fixed;
      inset: 0;
      z-index: 300;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(4, 4, 5, .92);
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s ease, visibility .3s
    }

    #lightbox.open {
      opacity: 1;
      visibility: visible
    }

    #lightbox img {
      max-width: 90vw;
      max-height: 86vh;
      object-fit: contain;
      box-shadow: 0 30px 120px rgba(0, 0, 0, .6)
    }

    #lightbox .lb-count {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 11px;
      letter-spacing: .34em;
      color: rgba(244, 238, 225, .62);
      white-space: nowrap
    }

    #lightbox button {
      position: absolute;
      background: transparent;
      border: 1px solid var(--line);
      color: #f4eee1;
      width: 52px;
      height: 52px;
      font-size: 22px;
      cursor: pointer;
      transition: .25s
    }

    #lightbox button:hover {
      background: var(--gold);
      color: #000;
      border-color: var(--gold)
    }

    #lightbox .lb-close {
      top: 20px;
      right: 20px
    }

    #lightbox .lb-prev {
      left: 20px;
      top: 50%;
      transform: translateY(-50%)
    }

    #lightbox .lb-next {
      right: 20px;
      top: 50%;
      transform: translateY(-50%)
    }

    @media(max-width:700px) {

      #lightbox .lb-prev {
        left: 8px
      }

      #lightbox .lb-next {
        right: 8px
      }
    }

    /* ---------- mini landing (pagine location) ---------- */
    .crest-intro {
      display: block;
      width: clamp(84px, 9vw, 116px);
      margin: 0 auto 34px
    }

    #experience {
      background: var(--ink)
    }

    .split-tx h3.statement {
      font-size: clamp(19px, 2.1vw, 28px);
      line-height: 1.45;
      text-transform: none;
      margin-bottom: 8px;
      max-width: 520px
    }

    .split-tx p + p {
      margin-top: 14px
    }

    .split-tx .capsule-btn {
      margin-top: 28px
    }

    .hero-cta {
      margin-top: 34px
    }

    #master {
      background: var(--card);
      border-top: 1px solid rgba(0, 0, 0, .1)
    }

    .master-ph {
      display: block;
      width: min(430px, 72vw);
      margin: 0 auto 46px
    }

    #fittings {
      background: var(--ink2)
    }

    .photo-grid {
      margin-top: clamp(46px, 7vh, 80px);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px
    }

    .photo-grid img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      cursor: zoom-in
    }

    .field textarea {
      width: 100%;
      border: 1px solid rgba(0, 0, 0, .14);
      border-radius: 10px;
      padding: 11px 12px;
      font-family: var(--sans);
      font-size: 13px;
      background: #faf7ef;
      color: #333;
      outline: none;
      min-height: 104px;
      resize: vertical
    }

    @media(max-width:1000px) {
      .photo-grid {
        grid-template-columns: repeat(3, 1fr)
      }
    }

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

      .photo-grid img {
        height: 210px
      }
    }
    /* ---------- booking calendar embed (frontend webapp) ---------- */
    .lb-book {
      padding-bottom: 60px
    }

    .lb-book .sub {
      max-width: 640px;
      margin: 16px auto 0
    }

    .lb-booking {
      margin-top: 36px;
      display: flex;
      justify-content: center;
      background: #f8fafc;
      border-top: 1px solid rgba(138, 109, 46, .18);
      border-bottom: 1px solid rgba(138, 109, 46, .18);
      padding: 40px 20px
    }

    .lb-booking .booking-shell {
      max-width: 1200px
    }

    /* il reset globale * della landing azzera i cerchi del calendario */
    .lb-booking .cday .dnum,
    .lb-booking .cday.has-slots .dnum::after,
    .lb-booking .nav-arrow,
    .lb-booking .brand-logo img,
    .lb-booking .logo-fallback .logo-ring,
    .lb-booking .logo-ring::after {
      border-radius: 50% !important
    }

    @media(max-width:760px) {
      .lb-booking {
        padding: 24px 12px
      }
    }