/* ========================================================================== 
   LALINGA ORO — Luxury design system
   ========================================================================== */

@font-face{
  font-family:'Italiana'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/fonts/italiana-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:italic; font-weight:500; font-display:swap;
  src:url('/fonts/cormorant-garamond-italic-500-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/fonts/inter-latin.woff2') format('woff2');
}

:root{
  /* Colors */
  --ink:        #151515;
  --ink-deep:   #111111;
  --ink-soft:   #232220;
  --ivory:      #F6F3ED;
  --ivory-soft: #FAF8F3;
  --ivory-alt:  #EFEAE1;
  --gold:       #b6934f;
  --gold-light: #d8c191;
  --gold-dim:   #8a713a;
  --line-on-dark:  rgba(246,243,237,0.14);
  --line-on-light: rgba(21,21,21,0.12);
  --text-on-dark:      #F6F3ED;
  --text-on-dark-dim:  rgba(246,243,237,0.66);
  --text-on-light:     #1c1a17;
  --text-on-light-dim: rgba(28,26,23,0.62);

  /* Type */
  --f-display: 'Italiana', 'Cormorant Garamond', serif;
  --f-serif:   'Cormorant Garamond', serif;
  --f-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Rhythm */
  --gutter: clamp(24px, 5vw, 64px);
  --section-y: clamp(72px, 11vw, 160px);
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ivory-soft);
  color:var(--text-on-light);
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
h1,h2,h3,h4,p,figure{ margin:0; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* Testo che esiste solo per lettori di schermo e per la gerarchia del
   documento: descrive contenuto realmente visibile in pagina, non e' testo
   nascosto messo li' per i motori di ricerca. */
.solo-lettori{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background:var(--ink); color:var(--ivory); padding:12px 20px;
}
.skip-link:focus{ left:16px; top:16px; }

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

/* -------------------------------------------------------------------------
   Type helpers
   ------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--f-sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
}
.eyebrow.on-light{ color:var(--gold-dim); }

.h-display{
  font-family:var(--f-display);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.04;
}
.h-serif{
  font-family:var(--f-serif);
  font-weight:500;
  letter-spacing:0;
  line-height:1.12;
}
.lede{
  font-family:var(--f-sans);
  font-weight:400;
  color:var(--text-on-light-dim);
  max-width:46ch;
}
.section-head{
  max-width:640px;
  margin:0 0 clamp(36px,5vw,64px);
}
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .eyebrow{ display:block; margin-bottom:14px; }
.section-head .h-serif{ font-size:clamp(30px,3.6vw,46px); margin-bottom:16px; }
.section-head p{ font-size:17px; }

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
.wrap{ max-width:1280px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.section{ padding-top:var(--section-y); padding-bottom:var(--section-y); }
.section.dark{ background:var(--ink); color:var(--text-on-dark); }
.section.ivory-alt{ background:var(--ivory-alt); }
.section.tight{ padding-top:calc(var(--section-y)*.55); padding-bottom:calc(var(--section-y)*.55); }

.divider{ height:1px; background:var(--line-on-light); border:0; margin:0; }
.divider.on-dark{ background:var(--line-on-dark); }
.divider.oro{ background:var(--gold); }

/* -------------------------------------------------------------------------
   Buttons / CTA
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 30px;
  border:1px solid currentColor;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  white-space:nowrap;
}
.btn-primary{ background:var(--ink); color:var(--ivory); border-color:var(--ink); }
.btn-primary:hover{ background:transparent; color:var(--ink); }
.section.dark .btn-primary{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.section.dark .btn-primary:hover{ background:transparent; color:var(--gold); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-on-light); }
.btn-ghost:hover{ border-color:var(--ink); }
.section.dark .btn-ghost{ color:var(--ivory); border-color:var(--line-on-dark); }
.section.dark .btn-ghost:hover{ border-color:var(--ivory); }
/* Il footer ha sfondo --ink: senza questo i ghost sarebbero #151515 su #151515 */
.site-footer .btn-ghost{ color:var(--ivory); border-color:var(--line-on-dark); }
.site-footer .btn-ghost:hover{ border-color:var(--ivory); }

/* =========================================================================
   GERARCHIA DELLE AZIONI — tre livelli, sempre distinguibili
   1. PRIMARIA  pieno in oro, una sola per schermata
   2. SECONDARIA contorno chiaro
   3. TERZIARIA link editoriale con freccia
   Difetto corretto: su fondo scuro .btn-primary era ink su ink, cioe' un
   pulsante invisibile, mentre il secondario col bordo chiaro risaltava di
   piu'. La gerarchia era rovesciata proprio nell'hero.
   ========================================================================= */
.hero .btn-primary,
.section.dark .btn-primary,
.cta-box .btn-primary,
.site-footer .btn-primary{
  background:var(--gold); color:var(--ink); border-color:var(--gold);
  box-shadow:0 8px 30px rgba(182,147,79,.24);
}
.hero .btn-primary:hover,
.section.dark .btn-primary:hover,
.cta-box .btn-primary:hover,
.site-footer .btn-primary:hover{
  background:var(--gold-light); border-color:var(--gold-light); color:var(--ink);
  box-shadow:0 10px 34px rgba(182,147,79,.36);
}
/* riscontro immediato al tocco: su telefono non esiste l'hover */
.btn{ cursor:pointer; }   /* i <button> non ereditano il pointer dai link */

/* =========================================================================
   PULSANTI CHE SI ACCENDONO
   Due luci sovrapposte, entrambe su transform/opacity (nessun reflow):
   1. un alone morbido che segue il cursore dentro il pulsante — le
      coordinate arrivano da js/main.js come --mx/--my;
   2. un lampo diagonale che attraversa il pulsante all'ingresso, come la
      luce che scorre su una superficie lucida. E' il gesto giusto per una
      gioielleria: e' il modo in cui si guarda l'oro.
   ========================================================================= */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn > *{ position:relative; z-index:2; }

/* 1 — alone che segue il cursore */
.btn::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:0;
  background:radial-gradient(140px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.42), rgba(255,255,255,0) 62%);
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.btn:hover::before, .btn:focus-visible::before{ opacity:1; }
/* sul pieno oro basta meno luce, altrimenti slava il colore */
.btn-primary::before{
  background:radial-gradient(150px circle at var(--mx,50%) var(--my,50%),
             rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
}

/* 2 — lampo diagonale */
.btn::after{
  content:""; position:absolute; top:-60%; bottom:-60%; width:45%; z-index:1;
  left:-70%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  transition:left .75s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after{ left:130%; }

/* l'alone esterno cresce: attira l'occhio anche in coda alla pagina */
.btn-primary{ transition:background .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease), box-shadow .45s var(--ease); }
.hero .btn-primary:hover, .section.dark .btn-primary:hover, .cta-box .btn-primary:hover, .site-footer .btn-primary:hover{
  box-shadow:0 12px 42px rgba(182,147,79,.52);
}
.btn-ghost:hover{ box-shadow:0 0 0 1px rgba(182,147,79,.5), 0 10px 30px rgba(182,147,79,.18); }

@media (prefers-reduced-motion: reduce){
  .btn::after{ display:none; }
  .btn::before{ transition:none; }
}
.btn:active{ transform:translateY(1px); }

/* --- TERZO LIVELLO: link editoriale ---------------------------------------
   Non e' un pulsante e non deve sembrarlo, ma deve dichiararsi cliccabile.
   Filo che si estende da sinistra + freccia che si stacca. */
.link-quiet{
  display:inline-flex; align-items:center; gap:9px; position:relative;
  font-family:var(--f-sans); font-size:12.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ivory); padding:14px 2px; cursor:pointer;
}
.link-quiet::after{
  content:""; position:absolute; left:0; right:0; bottom:8px; height:1px;
  background:var(--gold); transform:scaleX(.28); transform-origin:left center;
  transition:transform .3s var(--ease);
}
.link-quiet span{ transition:transform .3s var(--ease); }
@media (hover:hover){
  .link-quiet:hover::after{ transform:scaleX(1); }
  .link-quiet:hover span{ transform:translate(3px,-3px); }
}
.hero-cta{ display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); flex-wrap:wrap; }

/* riga che toglie il dubbio "sono cliccabili?" prima delle cinque categorie */
.section-hint{
  margin-top:18px; font-family:var(--f-sans); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:9px;
}
.section-hint span{ animation:giu 2.6s var(--ease) infinite; display:inline-block; }
@keyframes giu{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* frecce di navigazione: menu mobile e colonna Esplora del footer */
.mobile-nav-arrow{ float:right; color:var(--gold); opacity:.75; }
.footer-arrow{ margin-left:8px; color:var(--gold); opacity:0; display:inline-block;
  transform:translateX(-4px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.footer-col a:hover .footer-arrow{ opacity:1; transform:translateX(0); }
@media (hover:none){ .footer-arrow{ opacity:.7; transform:none; } }
/* l'indirizzo porta alle indicazioni: e' un link, deve dirlo */
.footer-address{ display:inline-flex; align-items:flex-start; gap:6px; color:var(--text-on-dark-dim); }
.footer-address:hover{ color:var(--ivory); }
.footer-address:hover .footer-arrow{ opacity:1; transform:translate(2px,-2px); }

/* lo scroll fluido non deve nascondere il titolo sotto l'intestazione fissa */
#servizi{ scroll-margin-top:96px; }

/* --- Briciola: dove sono, e come torno alla home ------------------------- */
.crumbs-float{
  position:absolute; top:calc(var(--gutter) + 78px); left:var(--gutter); z-index:2;
  display:flex; gap:10px; align-items:center;
  font-family:var(--f-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--text-on-dark-dim);
  text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.crumbs-float a{ color:var(--gold-light); }
.crumbs-float a:hover{ color:var(--ivory); }
.crumbs-float [aria-current]{ color:var(--ivory); }
@media (max-width:760px){ .crumbs-float{ display:none; } }

@media (prefers-reduced-motion: reduce){
  .section-hint span{ animation:none; }
}

.btn-arrow{ transition:transform .45s var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(4px); }

.cta-row{ display:flex; flex-wrap:wrap; gap:16px; }

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:26px 0;
  background:linear-gradient(to bottom, rgba(17,17,17,.55), rgba(17,17,17,0));
  transition:padding .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header.is-scrolled{
  padding:16px 0;
  background:rgba(17,17,17,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-color:var(--line-on-dark);
}
.site-header.is-light{ background:rgba(250,248,243,.9); border-color:var(--line-on-light); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.site-header.is-light:not(.is-scrolled){ background:transparent; }

.brand{ font-family:var(--f-display); font-size:22px; letter-spacing:.12em; color:var(--ivory); display:flex; gap:8px; }
.site-header.is-light .brand{ color:var(--ink); }
.brand em{ font-style:normal; color:var(--gold); }

.nav-main{ display:flex; gap:clamp(18px,2.4vw,34px); }
.nav-main a{
  font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-on-dark-dim); position:relative; padding:6px 0;
  transform-origin:center bottom;                 /* grow from the underline up */
  transition:color .4s var(--ease), transform .4s var(--ease);
}
.site-header.is-light .nav-main a{ color:var(--text-on-light-dim); }
.nav-main a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold);
  transition:right .4s var(--ease);
}
.nav-main a:hover{ color:var(--ivory); transform:scale(1.09); }
.site-header.is-light .nav-main a:hover{ color:var(--ink); }
.nav-main a:hover::after,
.nav-main a[aria-current="page"]::after{ right:0; }
.nav-main a[aria-current="page"]{ color:var(--gold); }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer;
}
.nav-toggle span{ width:22px; height:1px; background:var(--ivory); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.site-header.is-light .nav-toggle span{ background:var(--ink); }

.mobile-nav{
  position:fixed; inset:0; z-index:300; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--gutter);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;
  /* Sopra il pannello dei cookie (z-index 1000): con il menu aperto il banner
     copriva indirizzo, telefono e le icone social, che risultavano proprio non
     cliccabili. Il menu e' pieno e opaco, quindi lo nasconde mentre e' aperto;
     alla chiusura il banner ricompare intatto. */
  z-index:1100; }
/* Logo in alto a sinistra nel menu aperto, alla stessa altezza del pulsante
   di chiusura: la marca resta visibile anche a menu aperto, come nelle pagine. */
/* Serve piu' peso di `.mobile-nav a`, che dara' altrimenti al logo il filetto
   inferiore, il carattere e il riempimento delle voci di menu. */
.mobile-nav a.mobile-nav-brand{
  position:absolute; top:22px; left:var(--gutter);
  font-family:var(--f-display); font-size:19px; letter-spacing:.12em;
  padding:0; border-bottom:0; display:flex; gap:8px; color:var(--ivory);
}
.mobile-nav-close{ position:absolute; top:26px; right:var(--gutter); background:none; border:0; color:var(--ivory); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.mobile-nav ul{ display:flex; flex-direction:column; gap:3px; }
.mobile-nav a{
  /* Sette voci. Ridotte in due passaggi (-33% e poi un altro -25%) rispetto
     al clamp(30px,9vw,46px) iniziale, che occupava quasi tutta l'altezza.
     Il riempimento sale a 12px proprio perche' il testo si e' rimpicciolito:
     serve a tenere l'area toccabile sopra i 44px raccomandati. */
  font-family:var(--f-serif); font-size:clamp(15px,4.35vw,23px); color:var(--ivory);
  padding:12px 0; display:inline-block; border-bottom:1px solid var(--line-on-dark);
}
.mobile-nav-foot{ margin-top:22px; display:flex; flex-direction:column; gap:6px; color:var(--text-on-dark-dim); font-size:11.5px; }
/* anche nel menu mobile si deve capire dove si e' gia' */
.mobile-nav a[aria-current="page"]{ color:var(--gold); }
.mobile-nav a[aria-current="page"]::after{
  content:"— sei qui"; margin-left:10px; font-family:var(--f-sans);
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-on-dark-dim); vertical-align:middle;
}
.footer-col a[aria-current="page"]{ color:var(--gold); }
.mobile-nav-foot a{ color:var(--gold-light); }
/* Instagram e Facebook sotto i contatti del menu. Stessa foggia del footer,
   ma i tondi restano a 40px: qui si tocca col dito, non si punta col mouse. */
.mobile-nav-social{ display:flex; gap:12px; margin-top:14px; }
.mobile-nav-social a{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid var(--line-on-dark); border-radius:50%;
  color:var(--text-on-dark-dim);
  transition:border-color .35s var(--ease), color .35s var(--ease);
}
.mobile-nav-social a:active{ border-color:var(--gold); color:var(--gold-light); }
.mobile-nav-social svg{ width:17px; height:17px; fill:currentColor; }
@media (hover:hover){
  .mobile-nav-social a:hover{ border-color:var(--gold); color:var(--gold-light); }
}

/* Con otto voci la barra chiede 1199px: sotto, si passa all'hamburger.
   Misurato — azzerando anche tutti gli spazi le voci resterebbero 684px,
   quindi non c'e' modo di farle stare piu' in basso senza rimpicciolirle. */
@media (max-width:1199px){
  .nav-main{ display:none; }
  .nav-toggle{ display:flex; }
}

/* -------------------------------------------------------------------------
   Hero — scroll-scrubbed cinematic sequence
   ------------------------------------------------------------------------- */
.hero-scrub{ position:relative; height:420vh; background:var(--ink); }

/* Default hero: a normal block in the document flow — it scrolls away with the
   page. Used as-is by orologi / gioielli / compro-oro / lingottini. */
.hero{
  position:relative;
  min-height:100vh;            /* fallback for browsers without svh */
  min-height:100svh;
  display:flex; align-items:flex-end;
  background:var(--ink); color:var(--ivory); overflow:hidden;
}

/* Only the homepage pins its hero, to drive the scroll-scrubbed sequence. */
.hero-scrub .hero{ position:sticky; top:0; height:100vh; height:100svh; }

/* --- Meno zoom sulle hero da telefono ------------------------------------
   Con `object-fit:cover` non si puo' mostrare piu' inquadratura riempiendo
   lo schermo: e' geometrico. E `contain` qui e' escluso, perche' i bordi dei
   filmati non sono neri (gioielli 149, orologi 81, compro oro 52 su 255) e
   le bande si vedrebbero eccome.
   La leva giusta e' l'altezza: accorciando la hero il riquadro si avvicina
   alle proporzioni del filmato, quindi `cover` ne taglia molto meno. Su un
   375x812 la porzione visibile passa dal 26% al 37% dell'inquadratura.
   Solo da telefono: su desktop non cambia nulla.
   Le hero con lo scrub (home e pelletteria) restano a tutta altezza — sono
   sticky, e accorciarle scoprirebbe la sezione seguente durante lo scorrimento;
   la loro regola `height` vince comunque su questo `min-height`. */
@media (max-width:768px){
  .hero{ min-height:70vh; min-height:70svh; }
}
.hero-media{ position:absolute; inset:0; z-index:0; }
/* Ancoraggio del ritaglio, misurato sui filmati reali.
   Il nucleo del soggetto (90% della massa luminosa) sta al centro verticale
   in tutti e quattro i video: orologi 50,1% · gioielli 49,7% · compro oro
   50,6% · lingottini 47,6%. L'ancoraggio era al 30%, cioe' spostato in alto:
   su schermi piu' larghi di 16:9 (per esempio 2560x1080, dove il ritaglio
   avviene in verticale) tagliava la parte bassa del prodotto senza motivo.
   Portato al centro. Su desktop 16:10 e su portrait il ritaglio e' invece
   orizzontale, quindi questo valore non cambia nulla: nessun rischio. */
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center center; }
/* NOTA — il lingottino E' GIA' CENTRATO nel filmato (50,1%).
   Qui c'era un ancoraggio al 68% basato su una misura sbagliata: avevo
   calcolato il baricentro luminoso dell'intero fotogramma con soglia bassa,
   che includeva il bagliore di fondo sulla destra e spostava il risultato
   a 61%. Isolando il metallo per luminosita' E saturazione, il soggetto
   risulta al 50,1%. L'ancoraggio spostato era quindi la causa del
   disallineamento a sinistra, non la cura. Resta il centro. */
}
.hero-media video{ filter:contrast(1.06) saturate(1.08); }
.hero-media canvas{
  width:100%; height:100%; display:block;
  filter:brightness(1.08) contrast(1.08) saturate(1.06);
}
/* Sequenze già esposte bene in partenza: qui il ritocco sopra e'
   controproducente. Misurato sul filmato della home: brightness+contrast
   bruciano 134 volte piu' pixel nei bianchi (0,005% -> 0,695%, fino a
   1,82% sul fotogramma peggiore), e i riflessi dell'acciaio lucido e il
   quadrante argentato sono proprio cio' che deve restare leggibile.
   La sfumatura scura di .hero-media::after resta: serve al testo, non
   tocca l'esposizione del filmato. */
.hero-media.is-ungraded canvas{ filter:none; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  /* Solo la sfumatura verticale originale, che stacca il piede della sezione.
     I veli laterali sono stati rimossi: si leggevano come rettangoli scuri
     sopra il filmato. La leggibilita' del testo e' ora affidata all'ombra
     applicata alle lettere (.hero-content piu' sotto), che protegge ogni
     glifo senza sporcare l'immagine. */
  background:
    linear-gradient(180deg, rgba(10,10,10,.12) 0%, rgba(10,10,10,.04) 48%, rgba(10,10,10,.68) 100%);
}
/* Il testo dell'hero sta sopra un filmato che in alcuni fotogrammi diventa
   chiarissimo. Invece di stendere un velo — che si vedeva come un rettangolo —
   l'ombra segue il contorno di ogni lettera: il testo resta leggibile su
   qualunque fotogramma e l'immagine resta pulita.
   Esclusi i pulsanti, che hanno gia' fondo proprio. */
.hero-content{
  /* tre strati: un contorno stretto che stacca il glifo anche sul quadrante
     bianco, uno medio per il corpo, uno largo e morbido che fa da base.
     Nessuno dei tre disegna un bordo visibile. */
  text-shadow:0 0 3px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.85), 0 3px 22px rgba(0,0,0,.65);
}
.hero-content .btn{ text-shadow:none; }

.hero-content{
  position:relative; z-index:1; width:100%;
  padding-top:clamp(94px,12vh,180px);
  padding-bottom:clamp(44px,7vw,110px);
}
/* fade-out driven by the homepage scrub script only */
.hero-scrub .hero-content{
  transition:opacity .1s linear, transform .1s linear;
  will-change:opacity, transform;
}
.hero-eyebrow{ margin-bottom:clamp(12px,2vh,22px); }
.hero-title{ font-size:min(clamp(46px,9vw,124px), 15vh); }
.hero-title .amp{ color:var(--gold); }
/* il sottotitolo dell'hero sta sopra un filmato: serve piu' corpo del grigio
   spento usato sui fondi pieni, altrimenti si perde nelle zone chiare */
.hero-sub{ margin-top:clamp(14px,2.2vh,22px); font-size:clamp(15px,1.6vw,19px); color:var(--ivory); max-width:44ch; font-family:var(--f-sans); }
.hero-cta{ margin-top:clamp(22px,3.4vh,38px); }
.hero-scroll{
  position:absolute; right:var(--gutter); bottom:36px; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  /* piu' leggibile: a 10,5px in grigio spento molti non lo vedevano proprio,
     e su una hero cinematografica c'e' chi non capisce che si deve scorrere */
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ivory);
  transition:opacity .2s linear;
}
/* il filo scende e risale: dice "la storia continua sotto" senza urlare */
.hero-scroll .line{ overflow:hidden; }
.hero-scroll .line::after{
  content:""; display:block; width:100%; height:100%;
  background:var(--gold); transform:translateY(-100%);
  animation:scorri 2.4s var(--ease) infinite;
}
@keyframes scorri{
  0%   { transform:translateY(-100%); }
  55%  { transform:translateY(0); }
  100% { transform:translateY(100%); }
}
@media (prefers-reduced-motion: reduce){
  .hero-scroll .line::after{ animation:none; transform:translateY(0); }
}
.hero-scroll .line{ width:1px; height:46px; background:linear-gradient(var(--gold), transparent); animation:scrollpulse 2.6s ease-in-out infinite; }
.hero .btn-ghost{
  color:var(--ivory); border-color:rgba(246,243,237,.55);
  background:rgba(17,17,17,.28); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.hero .btn-ghost:hover{ border-color:var(--ivory); background:rgba(17,17,17,.46); }
@keyframes scrollpulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* Finestre basse (portatili con molte barre, finestre ridimensionate): senza
   questo il blocco di testo diventa piu' alto della hero, sborda in alto e la
   prima riga finisce sotto l'header fisso. */
@media (max-height:660px){
  .hero-content{ padding-top:96px; padding-bottom:30px; }
  .hero-title{ font-size:min(clamp(38px,7vw,90px), 13vh); }
  .hero-sub{ font-size:15px; margin-top:12px; }
  .hero-cta{ margin-top:18px; }
  .hero-eyebrow{ margin-bottom:10px; }
  .hero-scroll{ display:none; }        /* non c'e' spazio per l'indicatore */
}
@media (max-height:520px){
  .hero-content{ padding-top:90px; padding-bottom:22px; }
  .hero-title{ font-size:min(clamp(34px,6vw,70px), 12vh); }
  .hero-sub{ display:none; }           /* resta titolo e pulsanti, leggibili */
}

.hero-scrub-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:1; height:2px;
  background:rgba(246,243,237,.12);
}
.hero-scrub-bar span{
  display:block; height:100%; width:100%; transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg, var(--gold-dim), var(--gold-light));
}
@media (max-width:768px){
  .hero-scrub{ height:340vh; }
}
@media (prefers-reduced-motion: reduce){
  .hero-scrub{ height:100svh; }
  .hero-scrub .hero{ position:relative; height:auto; }
}

/* -------------------------------------------------------------------------
   Reveal animation
   ------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.1s; }
.reveal-delay-2{ transition-delay:.2s; }
.reveal-delay-3{ transition-delay:.3s; }
.reveal-delay-4{ transition-delay:.4s; }

/* -------------------------------------------------------------------------
   Editorial intro / two-col
   ------------------------------------------------------------------------- */
.editorial{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:center; }
.editorial-media{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--ivory-alt); }
.editorial-media img,.editorial-media video{ width:100%; height:100%; object-fit:cover; }
.editorial-media .frame-mark{
  position:absolute; top:18px; left:18px; right:18px; bottom:18px;
  border:1px solid rgba(246,243,237,.5); pointer-events:none;
}
.editorial-quote{ font-family:var(--f-serif); font-style:italic; font-size:clamp(20px,2.1vw,26px); line-height:1.5; margin-top:26px; color:var(--text-on-light); }
.editorial-quote span{ color:var(--gold-dim); }

/* -------------------------------------------------------------------------
   VETRINA A PIEDISTALLI (js/piedistalli.js)
   La pista e' alta piu' schermate: e' quella altezza a dare la corsa allo
   scorrimento. Il riquadro resta incollato in alto mentre la pista scorre. */
.piedistalli{ background:var(--ivory-alt); }
.piedistalli-pista{ height:600svh; position:relative; }
.piedistalli-fermo{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.piedistalli-fermo canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* In alto a destra. Il margine parte da 96px perche' l'intestazione e' fissa e
   da scrollata occupa i primi ~56px: sotto quella quota il titolo del prodotto
   ci finirebbe sotto. */
.piedistalli-etichetta{
  position:absolute; right:clamp(24px,6vw,80px); top:clamp(96px,14vh,150px);
  text-align:right;
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none;
}
/* Il bracciale e' il pezzo piu' largo e arriva con la sua curva fin sotto la
   scritta: solo per lui l'etichetta si sposta a destra. Gli altri cinque
   restano allineati fra loro. */
.piedistalli-etichetta[data-pezzo="0"]{ transform:translateX(32px); }
.piedistalli-etichetta .eyebrow{ display:block; margin-bottom:8px; color:var(--gold-dim); }
.piedistalli-etichetta h3{
  font-size:clamp(30px,4.4vw,56px); margin:0; color:var(--text-on-light);
  /* Rispetta gli a capo scritti dentro i nomi in js/piedistalli.js. */
  white-space:pre-line;
}

.piedistalli-invito{
  position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(34px,5vh,54px);
  font-family:var(--f-sans); font-size:10.5px; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:var(--text-on-light-dim); margin:0; pointer-events:none;
}
.piedistalli-barra{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(21,21,21,.08);
}
.piedistalli-barra span{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
}
.piedistalli-caricamento,
.piedistalli-errore{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--f-sans); font-size:13px; color:var(--text-on-light-dim);
  text-align:center; max-width:34ch; margin:0;
}
.piedistalli[data-pronto] .piedistalli-caricamento{ display:none; }

/* Chi ha chiesto meno animazioni vede una sola inquadratura, senza corsa. */
.piedistalli[data-fermo] .piedistalli-pista{ height:100svh; }
.piedistalli[data-fermo] .piedistalli-invito,
.piedistalli[data-fermo] .piedistalli-barra{ display:none; }

@media (max-width:767px){
  .piedistalli-pista{ height:520svh; }
  /* Su telefono resta centrata: a 375px un titolo da 30px allineato a destra
     andrebbe a capo male. Cambia solo la quota, che sale in alto.
     108px e non 88: l'intestazione qui misura 88px finche' non si rimpicciolisce
     scorrendo, e a 88px l'etichetta le finirebbe esattamente sotto. */
  .piedistalli-etichetta{ left:24px; right:24px; top:108px; text-align:center; }
  /* Qui l'etichetta e' centrata: lo spostamento del bracciale la scentrerebbe. */
  .piedistalli-etichetta[data-pezzo="0"]{ transform:none; }
}

/* Storia della Maison: testo corrente, colonna larga ma leggibile.
   65ch e' il limite oltre il quale l'occhio perde la riga tornando a capo. */
.storia-testo{ max-width:65ch; }
.storia-testo p{ font-size:17px; line-height:1.75; color:var(--text-on-light-dim); }
.storia-testo p + p{ margin-top:20px; }

/* Lingottini dentro l'oreficeria: una sola colonna, le scritte sopra il video.
   Forma e altezza del video restano quelle di .video-play (9/16, max-height):
   qui serve solo incolonnare e staccare il video dal testo. */
/* Blocco lingottini centrato nello schermo: la colonna era ancorata a
   sinistra dentro il contenitore, quindi testo e video risultavano
   spostati rispetto al centro della pagina. */
.lingottini-colonna{ max-width:640px; margin-inline:auto; text-align:center; }
.lingottini-colonna .lede{ margin-left:auto; margin-right:auto; }
.lingottini-colonna .editorial-media{ margin-top:30px; }
@media (max-width:860px){ .editorial{ grid-template-columns:1fr; } }

/* the quote sits in a frame that wakes up under the cursor: the corner ticks
   draw themselves out and the panel lifts off the page */
.quote-frame{
  position:relative; max-width:60ch; margin:0 auto;
  padding:clamp(30px,4.4vw,56px) clamp(26px,4vw,58px);
  border:1px solid var(--line-on-light);
  border-radius:18px;
  background:transparent;
  transition:border-color .5s var(--ease), background-color .5s var(--ease),
             transform .5s var(--ease), box-shadow .5s var(--ease);
}
.quote-frame blockquote{ margin:0; }
/* Centratura solo dove serve: .quote-frame e .editorial-quote sono condivise
   anche da gioielli e lingottini, che restano allineate a sinistra. */
.quote-frame.is-centered .editorial-quote{ text-align:center; }
.quote-frame .editorial-quote{ margin-top:0; }
.quote-frame::before,
.quote-frame::after{
  content:""; position:absolute; width:18px; height:18px; pointer-events:none;
  border:0 solid var(--gold); opacity:.5;
  transition:width .55s var(--ease), height .55s var(--ease), opacity .55s var(--ease);
}
.quote-frame::before{
  top:-1px; left:-1px; border-top-width:1px; border-left-width:1px;
  border-top-left-radius:18px;
}
.quote-frame::after{
  bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px;
  border-bottom-right-radius:18px;
}

@media (hover:hover){
  .quote-frame:hover{
    border-color:rgba(182,147,79,.45);
    background:var(--ivory-soft);
    transform:translateY(-4px);
    box-shadow:0 22px 48px rgba(21,21,21,.08);
  }
  .quote-frame:hover::before,
  .quote-frame:hover::after{ width:40px; height:40px; opacity:1; }
}

/* -------------------------------------------------------------------------
   Category showcase (big image blocks, not cards)
   ------------------------------------------------------------------------- */
.showcase{ display:flex; flex-direction:column; }
.showcase-row{
  position:relative; display:grid; grid-template-columns:1fr 1fr; min-height:clamp(420px,58vw,620px);
  border-top:1px solid var(--line-on-dark);
}
.showcase-row:last-child{ border-bottom:1px solid var(--line-on-dark); }
.showcase-row:nth-child(even){ direction:rtl; }
.showcase-row:nth-child(even) > *{ direction:ltr; }
.showcase-media{ position:relative; overflow:hidden; }
.showcase-media img,.showcase-media video{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.showcase-row:hover .showcase-media img,
.showcase-row:hover .showcase-media video{ transform:scale(1.045); }
.showcase-text{ display:flex; flex-direction:column; justify-content:center; padding:clamp(32px,4vw,80px); }
.showcase-index{ font-family:var(--f-serif); font-size:15px; color:var(--gold); margin-bottom:18px; letter-spacing:.06em; }
.showcase-text h3{ font-family:var(--f-serif); font-size:clamp(30px,3.2vw,44px); margin-bottom:16px; }
.showcase-text p{ color:var(--text-on-dark-dim); font-size:16px; max-width:38ch; margin-bottom:28px; }

@media (max-width:860px){
  .showcase-row{ grid-template-columns:1fr; min-height:auto; direction:ltr !important; }
  .showcase-row > *{ direction:ltr; }
  .showcase-media{ aspect-ratio:4/3; }
  .showcase-text{ padding:36px var(--gutter); }
}

/* -------------------------------------------------------------------------
   Collection grid (editorial, not cards)
   ------------------------------------------------------------------------- */
.grid-editorial{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-on-light); }
.grid-item{
  position:relative; background:var(--ivory-soft); aspect-ratio:3/4; overflow:hidden;
  display:flex; align-items:flex-end; padding:26px;
}
.grid-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.94; transition:transform 1s var(--ease); }
.grid-item:hover img{ transform:scale(1.05); }
.grid-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(17,17,17,0) 45%, rgba(17,17,17,.72) 100%); }
.grid-item-body{ position:relative; z-index:1; color:var(--ivory); }
.grid-item-index{ display:block; font-family:var(--f-serif); color:var(--gold-light); font-size:13px; margin-bottom:8px; }
.grid-item-body h3{ font-family:var(--f-serif); font-size:22px; margin-bottom:6px; }
.grid-item-body p{ font-size:13.5px; color:var(--text-on-dark-dim); max-width:26ch; }
@media (max-width:860px){ .grid-editorial{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid-editorial{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   Services row — text only, four abreast, hairline rules
   ------------------------------------------------------------------------- */
/* boxed call-to-action, sitting inside a light section */
.cta-box{
  max-width:780px; margin:clamp(48px,6vw,76px) auto 0;
  padding:clamp(32px,4.2vw,54px) clamp(24px,4vw,56px);
  background:var(--ivory-alt);
  border:1px solid var(--line-on-light);
  border-radius:14px;
  text-align:center;
  /* opacity is listed too: this declaration replaces .reveal's own transition,
     and without it the fade-in would snap */
  transition:transform .5s var(--ease), box-shadow .5s var(--ease),
             border-color .5s var(--ease), opacity .9s var(--ease);
}
.cta-box:hover{
  transform:scale(1.015);
  border-color:var(--gold);
  box-shadow:0 18px 46px rgba(21,21,21,.10);
}
.cta-box h2{ margin:0 auto 16px; max-width:26ch; }
.cta-box p{ margin:0 auto 30px; max-width:46ch; }
.cta-box .cta-row{ justify-content:center; }
/* quando il riquadro E' la sezione, il suo margine superiore si sommerebbe
   al padding della sezione raddoppiando lo stacco (pelletteria) */
.cta-box:only-child{ margin-top:0; }

.services-row{
  text-align:left;          /* never inherit centring from a closing band */
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-on-light);
  border-bottom:1px solid var(--line-on-light);
}
.service-cell{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(30px,3.2vw,48px) clamp(20px,2.2vw,34px);
  border-left:1px solid var(--line-on-light);
  color:inherit;
  transition:background .5s var(--ease);
}
.service-cell:first-child{ border-left:0; }
/* Le cinque categorie sono la porta d'ingresso al sito: devono dichiararsi
   cliccabili anche da fermo, perche' su telefono l'hover non esiste.
   Filo dorato in alto che si accende, sollevamento minimo, freccia che parte. */
.service-cell{ position:relative; }
.service-cell::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left center;
  transition:transform .5s var(--ease);
}
.service-cell:hover{ background:var(--ivory-alt); }
.section.dark .service-cell:hover{ background:rgba(255,255,255,.035); }
@media (hover:hover){
  .service-cell{ transition:background .5s var(--ease), transform .5s var(--ease); }
  .service-cell:hover{ transform:translateY(-3px); }
  .service-cell:hover::before{ transform:scaleX(1); }
}
.service-cell:focus-visible::before{ transform:scaleX(1); }
/* etichetta esplicita: dice cosa succede, non lascia indovinare */
.service-go{
  font-family:var(--f-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  opacity:.85; transition:opacity .4s var(--ease);
}
.service-cell:hover .service-go{ opacity:1; }
.service-arrow{ color:var(--gold); transition:transform .45s var(--ease); }
/* bottom row: icon left, arrow right — margin-top:auto pins it to the foot of
   every cell, so the four icons line up despite unequal description lengths */
.service-foot{
  margin-top:auto; padding-top:30px; width:100%;
  display:flex; align-items:center; justify-content:space-between;
}
/* etichetta e freccia viaggiano insieme, all'estremita' destra */
.service-foot .service-go + .service-arrow{ margin-left:8px; }
.service-foot > .service-go{ margin-left:auto; }
.service-icon{
  display:block; width:30px; height:30px; color:var(--gold-dim);
  transition:color .45s var(--ease), transform .55s var(--ease);
}
.service-icon svg{
  width:100%; height:100%; display:block;
  fill:none; stroke:currentColor; stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round;
}
.service-icon-leather{ position:relative; }
.service-icon-leather::before{
  content:""; position:absolute; left:3px; right:3px; top:6px; bottom:5px;
  border:1.1px solid currentColor; border-radius:3px;
}
.service-icon-leather::after{
  content:""; position:absolute; right:3px; top:11px; width:11px; height:7px;
  border:1.1px solid currentColor; border-right:0; border-radius:2px 0 0 2px;
}
.service-index{
  font-family:var(--f-sans); font-size:11px; font-weight:600;
  letter-spacing:.22em; color:var(--gold-dim); margin-bottom:18px;
}
.service-cell h3{
  font-family:var(--f-serif); font-weight:500; line-height:1.15;
  font-size:clamp(21px,2vw,27px); margin-bottom:10px;
}
.service-cell p{ font-size:13.5px; color:var(--text-on-light-dim); max-width:24ch; }
.service-cell .service-arrow{
  font-size:15px; color:var(--gold-dim);
  transition:transform .45s var(--ease);
}
.service-cell:hover .service-arrow{ transform:translateX(5px); }

/* matte-black variant, on .section.dark */
.section.dark .services-row{ border-top-color:var(--line-on-dark); border-bottom-color:var(--line-on-dark); }
.section.dark .service-cell{ border-left-color:var(--line-on-dark); }
.section.dark .service-index{ color:var(--gold); }
.section.dark .service-cell h3{ color:var(--text-on-dark); }
.section.dark .service-cell p{ color:var(--text-on-dark-dim); }
.section.dark .service-arrow{ color:var(--gold-light); }

/* --- contrast play: a deeper, denser band between hero and footer ---
   needs .section.dark's specificity, whose `background` shorthand would
   otherwise reset the gradient. */
.section.dark.services-band{
  background:linear-gradient(180deg, #0d0d0d 0%, #121212 55%, #0b0b0b 100%);
}
/* scale contrast: a large, light serif against a tiny gold caption */
.services-band .section-head .h-serif{ font-size:clamp(34px,4.4vw,58px); font-weight:400; letter-spacing:-.005em; }
.services-band .service-index{ font-size:10.5px; letter-spacing:.3em; color:var(--gold); }
.services-band .service-cell h3{ font-size:clamp(23px,2.3vw,31px); font-weight:400; }
.services-band .service-cell p{ color:rgba(246,243,237,.5); }   /* dimmer, so titles carry */

/* a gold rule ignites across the top of the cell on hover */
.services-band .service-cell{ position:relative; }
.services-band .service-cell::before{
  content:""; position:absolute; top:-1px; left:0; width:0; height:1px;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  transition:width .55s var(--ease);
}
.services-band .service-cell:hover{ background:rgba(246,243,237,.035); }
.services-band .service-cell:hover::before{ width:100%; }
.services-band .service-cell:hover h3{ color:var(--gold-light); }
.services-band .service-cell h3{ transition:color .45s var(--ease); }
.services-band .service-icon{ color:var(--gold); }
.services-band .service-cell:hover .service-icon{ color:var(--gold-light); transform:translateY(-3px); }

@media (max-width:860px){
  .services-row{ grid-template-columns:repeat(2,1fr); }
  .service-cell:nth-child(odd){ border-left:0; }
  .service-cell:nth-child(n+3){ border-top:1px solid var(--line-on-light); }
  .section.dark .service-cell:nth-child(n+3){ border-top-color:var(--line-on-dark); }
}
@media (max-width:520px){
  .services-row{ grid-template-columns:1fr; }
  .service-cell{ border-left:0; border-top:1px solid var(--line-on-light); }
  .service-cell:first-child{ border-top:0; }
  .section.dark .service-cell{ border-top-color:var(--line-on-dark); }
}

/* Cinque servizi: e' la fascia delle pagine di servizio, dove la pagina in
   cui ci si trova non si elenca da sola. Tre celle sopra e due sotto, su una
   griglia a sei tracce (2+2+2 / 3+3): cosi' entrambe le righe sono piene.
   Con tre colonne secche l'ultima riga avrebbe un buco; con cinque colonne le
   celle sarebbero troppo strette per il titolo piu' lungo. */
.services-row-5{ grid-template-columns:repeat(6,1fr); }
.services-row-5 .service-cell{ grid-column:span 2; }
@media (min-width:861px){
  .services-row-5 .service-cell:nth-child(n+4){ grid-column:span 3; border-top:1px solid var(--line-on-dark); }
  .services-row-5 .service-cell:nth-child(4){ border-left:0; }
}
@media (max-width:860px){
  .services-row-5{ grid-template-columns:repeat(2,1fr); }
  .services-row-5 .service-cell{ grid-column:auto; }
  /* la quinta, da sola, occupa tutta la riga invece di lasciare un vuoto */
  .services-row-5 .service-cell:last-child{ grid-column:span 2; }
}
@media (max-width:520px){
  .services-row-5{ grid-template-columns:1fr; }
  .services-row-5 .service-cell:last-child{ grid-column:auto; }
}

/* Sei servizi: tre per riga, due righe. A 4 o 5 colonne le celle
   diventerebbero troppo strette per il titolo piu' lungo. */
.services-row-6{ grid-template-columns:repeat(3,1fr); }
@media (min-width:861px){
  .services-row-6 .service-cell:nth-child(3n+1){ border-left:0; }
  .services-row-6 .service-cell:nth-child(n+4){ border-top:1px solid var(--line-on-dark); }
}
@media (max-width:860px){ .services-row-6{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .services-row-6{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   Steps / timeline
   ------------------------------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0; }
.step{ padding:34px 28px 0; border-top:1px solid var(--line-on-light); position:relative; }
.step-num{ font-family:var(--f-serif); font-size:15px; color:var(--gold-dim); letter-spacing:.08em; margin-bottom:18px; display:block; }
.step h3{ font-family:var(--f-serif); font-size:21px; margin-bottom:10px; }
.step p{ font-size:14.5px; color:var(--text-on-light-dim); }
.section.dark .step{ border-color:var(--line-on-dark); }
.section.dark .step-num{ color:var(--gold); }
.section.dark .step p{ color:var(--text-on-dark-dim); }

/* -------------------------------------------------------------------------
   Trust bar
   ------------------------------------------------------------------------- */
.trust-bar{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.trust-item{ padding:28px var(--gutter); border-left:1px solid var(--line-on-light); text-align:center; }
.trust-item:first-child{ border-left:0; }
.trust-item .num{ font-family:var(--f-serif); font-size:clamp(24px,2.6vw,32px); color:var(--gold-dim); display:block; margin-bottom:8px; }
.trust-item .label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-on-light-dim); }
@media (max-width:760px){ .trust-item{ border-left:0; border-top:1px solid var(--line-on-light); } .trust-item:first-child{ border-top:0; } }

/* -------------------------------------------------------------------------
   Brand strip
   ------------------------------------------------------------------------- */
.brand-strip{ display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; }
.brand-strip span{ font-family:var(--f-serif); font-size:19px; color:var(--text-on-light-dim); letter-spacing:.02em; }
.section.dark .brand-strip span{ color:var(--text-on-dark-dim); }
/* an aside inside a list of names — set apart so it does not read as one */
.brand-strip .more{ font-style:italic; color:var(--gold-dim); }

/* -------------------------------------------------------------------------
   Cards (used sparingly: watch brands / gems / FAQ)
   ------------------------------------------------------------------------- */
/* Le fughe non si disegnano piu' con lo sfondo della griglia: quel metodo
   funziona solo se le celle riempiono ogni riga, altrimenti dove la cella
   manca lo sfondo resta scoperto e si vede come un rettangolo grigio — sei
   celle su tre colonne ne lasciavano due vuote nell'ultima riga.
   Ora la riga la disegna ogni cella con i propri bordi, e il riquadro si
   chiude sul contenitore: le posizioni vuote restano semplicemente vuote. */
/* Impaginate a flex e non a griglia: in una griglia le colonne sono fisse,
   quindi un'ultima riga incompleta lascia posizioni vuote — sei celle su
   quattro colonne ne lasciavano due. A flex le celle dell'ultima riga si
   allargano fino a riempirla, e lo spazio vuoto non esiste piu', qualunque
   sia il numero di riquadri. */
.plain-grid{
  display:flex; flex-wrap:wrap;
  background:var(--ivory-soft);
  border-right:1px solid var(--line-on-light);
  border-bottom:1px solid var(--line-on-light);
}
.plain-cell{
  flex:1 1 240px; min-width:0;
  background:var(--ivory-soft); padding:30px;
  border-top:1px solid var(--line-on-light);
  border-left:1px solid var(--line-on-light);
  /* il riquadro si solleva sotto il cursore, come nella pagina Orologi */
  position:relative;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.plain-cell h3{ transition:color .45s var(--ease); }
@media (hover:hover){
  .plain-cell:hover{
    transform:scale(1.03);
    z-index:1;                                /* sopra le righe di contorno */
    box-shadow:0 14px 36px rgba(21,21,21,.12);
  }
  .plain-cell:hover h3{ color:var(--gold-dim); }
}
.plain-cell h3{ font-family:var(--f-serif); font-size:19px; margin-bottom:8px; }
.plain-cell p{ font-size:13.5px; color:var(--text-on-light-dim); }

/* .lift-grid non serve piu': il sollevamento e' ora di ogni .plain-cell */

/* -------------------------------------------------------------------------
   FAQ accordion
   ------------------------------------------------------------------------- */
.faq{ max-width:800px; }
.faq-item{ border-top:1px solid var(--line-on-light); }
.faq-item:last-child{ border-bottom:1px solid var(--line-on-light); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:none; border:0; text-align:left; padding:24px 0; cursor:pointer; color:inherit;
}
.faq-q h3{ font-family:var(--f-serif); font-size:19px; font-weight:500; }
.faq-q .plus{ position:relative; width:16px; height:16px; flex:none; }
.faq-q .plus::before,.faq-q .plus::after{ content:""; position:absolute; background:var(--gold-dim); transition:transform .35s var(--ease); }
.faq-q .plus::before{ left:0; top:7px; width:16px; height:1px; }
.faq-q .plus::after{ left:7px; top:0; width:1px; height:16px; }
.faq-item.is-open .plus::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-a p{ padding-bottom:24px; color:var(--text-on-light-dim); max-width:62ch; font-size:15px; }

/* -------------------------------------------------------------------------
   Contact / boutique
   ------------------------------------------------------------------------- */
.info-list{ display:flex; flex-direction:column; gap:22px; }
.info-list dt{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:6px; }
.section.dark .info-list dt{ color:var(--gold); }
.info-list dd{ margin:0; font-family:var(--f-serif); font-size:20px; }
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table td{ padding:12px 0; border-top:1px solid var(--line-on-light); font-size:14.5px; }
.section.dark .hours-table td{ border-color:var(--line-on-dark); }
.hours-table td:last-child{ text-align:right; color:var(--text-on-light-dim); }
.section.dark .hours-table td:last-child{ color:var(--text-on-dark-dim); }

.map-frame{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ivory-alt); }
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(.35) contrast(1.05); }

/* -------------------------------------------------------------------------
   Form
   ------------------------------------------------------------------------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-on-light-dim); }
.field input,.field select,.field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--line-on-light);
  padding:10px 2px; font-family:var(--f-sans); font-size:15.5px; color:var(--text-on-light);
  transition:border-color .3s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--gold); outline:none; }
.field-check{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-on-light-dim); }
.field-check input{ margin-top:4px; }
.field-check a{ color:var(--gold-dim); text-decoration:underline; text-underline-offset:3px; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer{ background:var(--ink); color:var(--text-on-dark); padding-top:clamp(56px,8vw,96px); }
.footer-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ color:var(--text-on-dark-dim); font-size:14px; max-width:30ch; }
.footer-social{ display:flex; gap:14px; margin-top:20px; }
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border:1px solid var(--line-on-dark); border-radius:50%;
  color:var(--text-on-dark-dim); transition:border-color .35s var(--ease), color .35s var(--ease);
}
.footer-social a:hover{ border-color:var(--gold); color:var(--gold-light); }
.footer-social svg{ width:16px; height:16px; fill:currentColor; }
/* h2 e non h5: sono le etichette delle colonne del footer, e come h5
   dopo un h1 rompevano la gerarchia su tutte le pagine. L'aspetto
   e' identico, cambia solo il livello. */
.footer-col h2{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
/* <address> nel contenuto: e' l'elemento giusto per l'indirizzo della
   boutique, ma di norma il browser lo rende in corsivo. Qui deve restare
   identico al resto della scheda. */
.info-list address{ font-style:normal; }
.footer-col a,.footer-col address{ font-size:14.5px; color:var(--text-on-dark-dim); font-style:normal; }
.footer-col a:hover{ color:var(--ivory); }

.footer-map-banner{
  /* Stesso respiro sopra e sotto: senza il margine inferiore il bordo della
     mappa finiva appoggiato sul filetto di .footer-bottom. ~1-1,7 cm. */
  position:relative; margin:clamp(40px,6vw,64px) 0;
  height:clamp(220px,32vw,300px);
  overflow:hidden; border:1px solid var(--line-on-dark); border-radius:var(--radius);
}
.footer-map-banner iframe{
  width:100%; height:100%; border:0; pointer-events:none;
  filter:grayscale(.4) contrast(1.05);
  transition:filter .7s var(--ease);
}
.footer-map-banner:hover iframe{ filter:grayscale(0) contrast(1); }
.footer-map-fade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,10,10,.9) 0%, rgba(10,10,10,.35) 45%, rgba(10,10,10,.05) 75%);
}
.footer-map-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:1; pointer-events:none;
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px;
  padding:26px clamp(20px,3vw,32px);
}
.footer-map-where{ display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); flex-basis:100%; }
.footer-map-where svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.3; }
.footer-map-address{ font-family:var(--f-serif); font-size:clamp(19px,2.6vw,24px); font-weight:400; color:var(--ivory); margin-top:8px; }
.footer-map-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory);
}
.footer-map-banner:hover .footer-map-cta .btn-arrow{ transform:translateX(4px); }
.footer-map-link{ position:absolute; inset:0; z-index:2; }
@media (max-width:600px){
  .footer-map-caption{ flex-direction:column; align-items:flex-start; }
}
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  padding:24px 0; border-top:1px solid var(--line-on-dark); font-size:12.5px; color:var(--text-on-dark-dim);
}
.footer-bottom .legal-links{ display:flex; gap:22px; }
/* estremi legali (P. IVA, REA, PEC, iscrizione OAM): due righe corte,
   link nello stesso grigio del testo per non distrarre dal resto */
.footer-legal{ line-height:1.6; max-width:62ch; }
.footer-legal a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
.footer-legal a:hover{ color:var(--ivory); }
.footer-legal strong{ font-weight:600; color:inherit; }
/* Revoca del consenso sempre raggiungibile dal footer, come richiesto dalle
   linee guida. Reso identico agli altri link legali: e' un pulsante solo
   perche' deve riaprire il pannello, non portare a un'altra pagina. */
.legal-prefs{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:inherit; text-decoration:none;
}
.legal-prefs:hover{ color:var(--ivory); }
/* Aree di tocco: sul telefono servono almeno 44px, ma senza spostare nulla.
   Il riempimento e' compensato da un margine negativo, cosi' l'aspetto resta
   identico e cresce solo la superficie che risponde al dito. */
@media (hover:none){
  .footer-bottom .legal-links a,
  .legal-prefs{ padding-block:12px; margin-block:-12px; }
  .nav-toggle{ padding:19px; margin:-19px; }   /* barre da 1px: 19+7+19 = 45px */
}

/* --- Invito ai profili social (pagina Contatti, fondo chiaro) -------------
   Le icone da sole non dicono dove portano: la riga accanto lo esplicita.
   Stessa foggia del footer, ma nei toni del fondo chiaro; i tondi restano a
   44px perche' qui si tocca col dito quanto si punta col mouse. */
.social-invito{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:20px;
}
.social-invito-testo{
  font-family:var(--f-sans); font-size:13px; letter-spacing:.02em;
  color:var(--text-on-light-dim);
}
.social-icone{ display:flex; gap:12px; }
.social-icone a{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-on-light); color:var(--text-on-light-dim);
  transition:border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.social-icone svg{ width:18px; height:18px; fill:currentColor; }
.social-icone a:active{ border-color:var(--gold); color:var(--gold-dim); }
@media (hover:hover){
  .social-icone a:hover{ border-color:var(--gold); color:var(--gold-dim); background:rgba(182,147,79,.08); }
}

/* Esito dell'invio del modulo */
.form-esito{
  margin-top:14px; font-family:var(--f-sans); font-size:14px; line-height:1.5;
  padding:12px 14px; border-left:2px solid currentColor;
}
.form-esito.is-ok{ color:#2f6b46; background:rgba(47,107,70,.07); }
.form-esito.is-errore{ color:#8c3a2e; background:rgba(140,58,46,.07); }
.form-esito.is-attesa{ color:var(--gold-dim); background:rgba(182,147,79,.09); }

/* Informativa breve accanto al modulo contatti */
.form-privacy-note{
  font-size:13px; line-height:1.55; color:var(--text-on-dark-dim); margin:0;
}
.form-privacy-note a{ color:var(--gold-light); text-decoration:underline; }
@media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   Cuban interattiva — visualizzatore prodotto della pagina Gioielli
   ------------------------------------------------------------------------- */
.cuban-viewer-section{
  padding:clamp(72px,9vw,128px) var(--gutter);
  color:var(--ivory);
  background:linear-gradient(180deg, #232220 0%, #111111 100%);
}
.cuban-viewer-head{
  /* Impaginazione per testo BREVE. Prima era una griglia a due colonne con
     fino a 100px di vuoto in mezzo, pensata per un titolo lungo e un paragrafo
     lungo: con poche parole lasciava le due parti a galleggiare lontane, e il
     titolo a 76px dentro 10ch si spezzava in tre righe enormi.
     Ora colonna unica, centrata e stretta: occhiello, titolo e riga di chiusura
     si leggono come un blocco solo, appoggiato sopra il riquadro 3D. */
  max-width:600px; margin-left:auto; margin-right:auto;
  margin-bottom:clamp(30px,4vw,54px); text-align:center;
}
.cuban-viewer-head .eyebrow{ display:block; margin-bottom:12px; color:var(--gold); }
.cuban-viewer-head h2{
  font-size:clamp(30px,4.2vw,50px); line-height:1.06; max-width:none;
  text-wrap:balance;               /* righe di lunghezza equilibrata */
}
.cuban-viewer-head p{
  color:var(--text-on-dark-dim); max-width:42ch; line-height:1.6;
  margin:14px auto 0; font-size:clamp(14.5px,1.4vw,16px);
}
.cuban-viewer-shell{
  /* Riquadro piu' raccolto; conserva le proporzioni della versione precedente
     e resta abbastanza ampio per l'esplorazione con mouse e touch. */
  position:relative; width:min(100%,1048px); height:clamp(429px,59.2vw,698px); margin:0 auto;
  align-self:start;
  overflow:hidden; border:1px solid transparent; border-radius:24px;
  background:transparent; box-shadow:none; transition:border-color .3s var(--ease);
}
.cuban-viewer-section.is-active .cuban-viewer-shell{ border-color:rgba(212,177,109,.58); }
.cuban-viewer-shell::before,
.cuban-viewer-shell::after{
  content:none;
}
.cuban-viewer-canvas{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block;
  background:transparent;
  pointer-events:none; cursor:default; touch-action:pan-y; outline:none;
}
.cuban-viewer-section.is-active .cuban-viewer-canvas{
  pointer-events:auto; cursor:grab; touch-action:none;
}
.cuban-viewer-canvas:active,
.cuban-viewer-section.is-interacting .cuban-viewer-canvas{ cursor:grabbing; }
.cuban-viewer-canvas:focus-visible{ box-shadow:inset 0 0 0 2px var(--gold); }
.cuban-interaction-toggle{
  position:absolute; top:clamp(16px,2.5vw,30px); right:clamp(16px,2.5vw,30px); z-index:3;
  display:inline-flex; align-items:center; gap:9px; padding:11px 14px;
  border:1px solid rgba(212,177,109,.32); border-radius:999px;
  background:rgba(6,5,4,.58); color:rgba(246,243,237,.76); backdrop-filter:blur(12px);
  font:600 9.5px/1 var(--f-sans); letter-spacing:.15em; text-transform:uppercase; cursor:pointer;
  transition:color .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}
.cuban-interaction-dot{
  width:6px; height:6px; border-radius:50%; background:var(--gold-dim);
  box-shadow:0 0 0 4px rgba(182,147,79,.10); transition:background .28s var(--ease), box-shadow .28s var(--ease);
}
.cuban-interaction-toggle:hover,
.cuban-interaction-toggle:focus-visible{ color:var(--ivory); border-color:var(--gold); outline:none; }
.cuban-viewer-section.is-active .cuban-interaction-toggle{
  color:#120e08; border-color:var(--gold-light); background:var(--gold-light);
}
.cuban-viewer-section.is-active .cuban-interaction-dot{
  background:#120e08; box-shadow:0 0 0 4px rgba(18,14,8,.12);
}
.cuban-viewer-loading{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
  background:transparent;
  transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.cuban-viewer-loading.is-complete{ opacity:0; visibility:hidden; }
.cuban-viewer-loading-label{
  /* gold-light su grigio chiaro non si legge: serve la versione scura */
  color:var(--gold-dim); font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
}
.cuban-viewer-loading-track{ width:min(240px,52vw); height:1px; overflow:hidden; background:rgba(182,147,79,.18); }
.cuban-viewer-loading-track span{
  display:block; width:100%; height:100%; transform:scaleX(.04); transform-origin:left;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-light)); transition:transform .2s linear;
}
.cuban-viewer-hint{
  position:absolute; left:clamp(18px,3vw,42px); bottom:clamp(18px,3vw,36px); z-index:2;
  display:flex; align-items:center; gap:10px; color:rgba(246,243,237,.62);
  font-size:10px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.cuban-viewer-section.has-been-dragged .cuban-viewer-hint{ opacity:.42; transform:translateY(4px); }
.cuban-viewer-orbit-mark{
  display:grid; place-items:center; width:32px; height:32px; border:1px solid rgba(212,177,109,.36);
  border-radius:50%; color:var(--gold-light); font-size:15px;
}
.cuban-viewer-error{
  position:absolute; inset:50% auto auto 50%; z-index:5; transform:translate(-50%,-50%);
  color:var(--ivory); text-align:center;
}
@media (max-width:760px){
  .cuban-viewer-shell{ height:min(72.86vh,668px); min-height:485px; }
  .cuban-interaction-toggle{ top:16px; right:16px; }
  .cuban-viewer-hint{
    top:66px; right:18px; bottom:auto; max-width:none;
    align-items:flex-start; line-height:1.45;
  }
  .cuban-viewer-orbit-mark{ flex:0 0 28px; width:28px; height:28px; }
}

/* -------------------------------------------------------------------------
   Grafico della quotazione dell'oro (js/quotazioni.js)
   ------------------------------------------------------------------------- */
.gold-chart{ margin:0; display:block; }
.gold-chart svg{ width:100%; height:auto; display:block; touch-action:pan-y; }
.gc-grid{ stroke:rgba(21,21,21,.07); }
.gc-axis{ stroke:var(--line-on-light); }
.gc-tick{ font-family:var(--f-sans); font-size:11px; fill:rgba(28,26,23,.55); }
.gc-line{ fill:none; stroke:var(--gold); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.gc-dot{ fill:var(--gold-dim); }
.gc-value{ font-family:var(--f-serif); font-size:17px; fill:var(--gold-dim); }

/* la lettura al passaggio del cursore: invisibile finché non serve */
.gc-hint{ opacity:0; transition:opacity .18s var(--ease); pointer-events:none; }
.gold-chart svg.is-reading .gc-hint{ opacity:1; }
.gc-hint-line{ stroke:rgba(21,21,21,.22); stroke-dasharray:2 4; }
.gc-hint-dot{ fill:var(--gold); stroke:var(--ivory-soft); stroke-width:1.5; }
.gc-hint-text{ font-family:var(--f-sans); font-size:12px; fill:var(--text-on-light); font-weight:500; }

@media (max-width:560px){
  .gc-value{ font-size:14px; }
  .gc-tick{ font-size:10px; }
}

/* ---- selettore del metallo: il pulsante E' il lingotto scelto ---------- */
.quot-switch{ position:relative; display:inline-block; margin-bottom:clamp(18px,2.4vw,30px); }
.quot-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:10px 16px 10px 12px;
  background:var(--ivory-soft); border:1px solid var(--line-on-light);
  border-radius:2px; cursor:pointer; color:var(--text-on-light);
  font-family:var(--f-sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.quot-btn:hover{ border-color:var(--gold-dim); background:#fff; }
.quot-bar{ width:44px; height:33px; display:block; overflow:visible; }
/* la lumeggiatura sulla faccia superiore: e' cio' che fa leggere il
   metallo come lucido invece che come carta colorata */
.quot-gloss{ fill:#fff; opacity:.34; }
.quot-name{ min-width:7.2em; text-align:left; }
.quot-caret{ font-size:14px; color:var(--text-on-light-dim); transition:transform .35s var(--ease); }
.quot-switch.is-open .quot-caret{ transform:rotate(180deg); }

/* il velo di luce che attraversa il lingotto durante il cambio */
.quot-shine{ fill:rgba(255,255,255,.75); opacity:0; }
.quot-switch.is-morphing .quot-shine{ animation:quotShine .52s var(--ease); }
@keyframes quotShine{
  0%   { opacity:0;   transform:translateX(0); }
  35%  { opacity:.85; }
  100% { opacity:0;   transform:translateX(44px); }
}

.quot-list{
  position:absolute; top:calc(100% + 6px); left:0; z-index:20;
  margin:0; padding:6px; list-style:none; min-width:100%;
  background:#fff; border:1px solid var(--line-on-light);
  box-shadow:0 18px 44px rgba(21,21,21,.10);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.quot-switch.is-open .quot-list{ opacity:1; visibility:visible; transform:translateY(0); }
.quot-list button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 12px 8px 8px; background:none; border:0; cursor:pointer;
  font-family:var(--f-sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-on-light-dim); text-align:left;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.quot-list button:hover{ background:var(--ivory-alt); color:var(--text-on-light); }
.quot-list button[aria-selected="true"]{ color:var(--gold-dim); }
.quot-mini{ width:34px; height:26px; display:block; overflow:visible; flex:none; }

@media (prefers-reduced-motion: reduce){
  .quot-switch.is-morphing .quot-shine{ animation:none; }
}

/* -------------------------------------------------------------------------
   Video a richiesta (js/video-play.js)
   ------------------------------------------------------------------------- */
/* il filmato e' verticale (9:16): il riquadro editoriale e' 4/5, e con
   object-fit:cover perderebbe le fasce alte e basse — cioe' i sottotitoli.
   Il riquadro prende quindi le proporzioni del video. */
.video-play{ position:relative; margin:0 auto; overflow:hidden;
  aspect-ratio:9/16; max-height:min(640px,74vh); width:auto;
  border-radius:10px; }
/* Safari non sempre ritaglia un video con il solo overflow del contenitore:
   il raggio va ripetuto sull'elemento, altrimenti gli angoli restano vivi */
.video-play .video-play-el{ border-radius:inherit; }
.video-play .video-play-btn{ border-radius:inherit; }
@media (max-width:860px){ .video-play{ max-height:70vh; } }

/* --- A schermo intero -----------------------------------------------------
   Il filmato e' 720x1280, verticale. In pagina sta in una cornice 9/16 e
   `object-fit:cover` non taglia niente. A schermo intero pero' l'elemento
   diventa largo quanto il monitor: con `cover` il video verticale veniva
   ingrandito fino a coprire un'area orizzontale, perdendo sopra e sotto.
   Con `contain` si vede intero, con le bande nere ai lati — che e' il modo
   corretto di mostrare un verticale su uno schermo orizzontale.
   Le varianti col prefisso vanno in regole SEPARATE: in una lista unica uno
   pseudo-selettore non riconosciuto farebbe scartare l'intera regola. */
.video-play-el:fullscreen{ object-fit:contain; border-radius:0; background:#000; }
.video-play-el:-webkit-full-screen{ object-fit:contain; border-radius:0; background:#000; }
.video-play-el:-moz-full-screen{ object-fit:contain; border-radius:0; background:#000; }

/* se a andare a schermo intero e' il contenitore invece del video */
.video-play:fullscreen{ aspect-ratio:auto; max-height:none; width:100%; height:100%; border-radius:0; }
.video-play:fullscreen .video-play-el{ object-fit:contain; border-radius:0; }
.video-play:-webkit-full-screen{ aspect-ratio:auto; max-height:none; width:100%; height:100%; border-radius:0; }
.video-play:-webkit-full-screen .video-play-el{ object-fit:contain; border-radius:0; }
.video-play-el{ display:block; width:100%; height:100%; object-fit:cover; background:var(--ink); }

.video-play-btn{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  width:100%; height:100%; padding:0;
  background:linear-gradient(180deg, rgba(10,10,10,.14) 0%, rgba(10,10,10,.42) 100%);
  border:0; cursor:pointer; color:var(--ivory);
  transition:opacity .45s var(--ease), visibility .45s;
}
.video-play.is-playing .video-play-btn{ opacity:0; visibility:hidden; }

.video-play-disc{
  display:grid; place-items:center;
  width:clamp(58px,7vw,78px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(246,243,237,.7);
  background:rgba(17,17,17,.26);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:transform .5s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease);
}
.video-play-tri{
  width:0; height:0; margin-left:4px;
  border-left:15px solid var(--ivory);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  transition:border-left-color .5s var(--ease);
}
.video-play-word{
  font-family:var(--f-sans); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(246,243,237,.9);
}
@media (hover:hover){
  .video-play-btn:hover .video-play-disc{
    transform:scale(1.07); border-color:var(--gold-light); background:rgba(17,17,17,.42);
  }
  .video-play-btn:hover .video-play-tri{ border-left-color:var(--gold-light); }
}
.video-play-btn:focus-visible{ outline:1px solid var(--gold); outline-offset:-4px; }

/* se il filmato non si carica resta la copertina, non un rettangolo nero */
.video-play.has-error .video-play-el{ background:transparent; }

/* -------------------------------------------------------------------------
   Misc
   ------------------------------------------------------------------------- */
.stack{ display:flex; flex-direction:column; gap:10px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; } .form-grid{ grid-template-columns:1fr; } }

.badge-inline{ display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-dim); }
.badge-inline::before{ content:""; width:14px; height:14px; border:1px solid currentColor; border-radius:50%; flex:none; }

.pagehead{ padding-top:calc(180px + 20px); padding-bottom:clamp(48px,7vw,88px); background:var(--ink); color:var(--ivory); }
.pagehead .h-serif{ font-size:clamp(38px,5.6vw,64px); max-width:16ch; }
.pagehead p{ margin-top:18px; max-width:52ch; color:var(--text-on-dark-dim); font-size:16.5px; }
.pagehead .crumbs{ margin-bottom:20px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-on-dark-dim); }
.pagehead .crumbs a{ color:var(--gold-light); }

.stat-note{ font-size:12.5px; color:var(--text-on-light-dim); max-width:60ch; }
.section.dark .stat-note{ color:var(--text-on-dark-dim); }

/* -------------------------------------------------------------------------
   Privacy, informative e consenso ai contenuti esterni
   ------------------------------------------------------------------------- */
.legal-copy h2{ margin:0 0 10px; font-size:clamp(20px,2.5vw,25px); }
.legal-copy .lede + .lede{ margin-top:12px; }
.legal-copy a{ color:var(--gold-dim); text-decoration:underline; text-underline-offset:3px; }
.legal-list{ margin:0; padding-left:1.25em; }
.legal-list li + li{ margin-top:9px; }
.legal-table-wrap{ overflow-x:auto; margin:12px 0 16px; }
.legal-table{ width:100%; border-collapse:collapse; min-width:610px; color:var(--text-on-light-dim); }
.legal-table th,.legal-table td{ padding:12px; border:1px solid var(--line-on-light); text-align:left; vertical-align:top; }
.legal-table th{ color:var(--text-on-light); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

iframe[data-cookie-src][hidden]{ display:none; }
.map-consent-placeholder{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
  padding:24px; text-align:center;
  background:radial-gradient(circle at 50% 30%, #292723 0%, #171717 68%);
  color:var(--ivory);
}
.map-consent-placeholder p{ max-width:38ch; color:var(--text-on-dark-dim); }
.map-consent-placeholder .btn{ color:var(--ivory); border-color:rgba(246,243,237,.42); position:relative; z-index:3; }
/* Le due azioni del segnaposto, affiancate e con pari evidenza */
.map-consent-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.map-consent-actions .btn{ text-decoration:none; }
/* Con le mappe rifiutate il collegamento che ricopre il riquadro va messo a
   riposo, altrimenti intercetta il tocco al posto del segnaposto e porta su
   Google senza che l'utente lo abbia chiesto. */
.footer-map-link.is-suspended{ pointer-events:none; }

.cookie-panel{
  position:fixed; z-index:1000; left:20px; right:20px; bottom:20px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:22px; align-items:center;
  max-width:1080px; margin:0 auto; padding:22px 54px 22px 24px;
  background:rgba(20,20,20,.97); border:1px solid rgba(199,155,71,.5);
  box-shadow:0 18px 60px rgba(0,0,0,.36); color:var(--ivory);
}
.cookie-panel strong{ display:block; margin-bottom:7px; font-family:var(--f-serif); font-size:22px; font-weight:500; }
.cookie-panel p{ max-width:68ch; color:var(--text-on-dark-dim); font-size:14px; line-height:1.55; }
.cookie-panel p a{ color:var(--gold-light); text-decoration:underline; }
.cookie-panel-actions{ display:flex; flex-wrap:wrap; gap:10px; }
/* Pari evidenza fra accettare e rifiutare: il Garante chiede stesso colore,
   stessa dimensione e stesso peso. Un pulsante pieno in oro accanto a uno
   trasparente e' un invito a premere il primo — proprio il disegno
   ingannevole che le linee guida vietano. I due pulsanti sono resi identici:
   li distingue soltanto il testo. */
.cookie-panel .btn-ghost,
.cookie-panel .btn-primary{
  background:transparent; color:var(--ivory);
  border:1px solid var(--gold); box-shadow:none;
}
.cookie-panel .btn-ghost:active,
.cookie-panel .btn-primary:active{ background:rgba(182,147,79,.16); }
@media (hover:hover){
  .cookie-panel .btn-ghost:hover,
  .cookie-panel .btn-primary:hover{ background:rgba(182,147,79,.16); color:var(--ivory); border-color:var(--gold); }
}
.cookie-panel-close{
  position:absolute; top:10px; right:13px; width:34px; height:34px;
  border:0; background:transparent; color:var(--ivory); cursor:pointer;
  font-size:25px; line-height:1;
}
@media (max-width:760px){
  .cookie-panel{ left:10px; right:10px; bottom:10px; grid-template-columns:1fr; gap:16px; padding:20px; }
  .cookie-panel-actions{ display:grid; grid-template-columns:1fr 1fr; }
  .cookie-panel-actions .btn{ justify-content:center; padding-inline:14px; }
}
@media (max-width:440px){
  .cookie-panel-actions{ grid-template-columns:1fr; }
}


/* -------------------------------------------------------------------------
   Sigla di marca accanto all'intestazione (pagina Contatti)
   Il testo tiene la colonna larga a sinistra, la sigla sta piccola a destra.
   Solo qui: .pagehead delle altre pagine resta invariata.
   ------------------------------------------------------------------------- */
.pagehead-split{
  /* sigla: 340 -> 476 (+40%) -> 619 (+30%); minimo 220 -> 308 -> 400 */
  display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,619px);
  gap:clamp(28px,4.5vw,64px); align-items:center;
}
.pagehead-sigla{
  /* angoli smussati: qui si scavalca --radius (2px, la squadratura del resto
     del sito) perche' la sigla e' un riquadro a se'. */
  border:1px solid var(--line-on-dark); border-radius:16px;
  overflow:hidden; background:#000;
}
.pagehead-sigla video{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  /* il raggio va ripetuto sul video: Safari non ritaglia in modo affidabile
     un <video> col solo overflow:hidden del contenitore */
  border-radius:inherit;
}
@media (max-width:860px){
  /* in colonna: prima il testo, poi la sigla, e non a tutta larghezza */
  .pagehead-split{ grid-template-columns:1fr; gap:32px; }
  .pagehead-sigla{ max-width:764px; }   /* 420 +40% +30% */
}
@media (prefers-reduced-motion: reduce){
  /* a chi ha chiesto meno animazioni resta il solo fotogramma finale */
  .pagehead-sigla video{ display:none; }
  .pagehead-sigla{
    aspect-ratio:16/9;
    background:#000 url('/media/contatti-brand-poster.jpg') center/cover no-repeat;
  }
}

/* =========================================================================
   VERSIONE MOBILE — blocco isolato
   Tutto quello che segue vive dentro max-width:767px e non tocca il desktop.
   Gli elementi .solo-mobile sono nascosti di default proprio qui sopra, cosi'
   su schermo grande non esistono nemmeno.
   ========================================================================= */
.solo-mobile{ display:none; }
.hero-scroll .punto{ display:none; }

@media (max-width:767px){

  /* --- elementi riservati al telefono ----------------------------------- */
  .solo-mobile{ display:inline; }
  .footer-azioni.solo-mobile{ display:grid; }

  /* --- 1/2. HERO: azione principale dominante, secondaria sotto ---------- */
  .hero-cta{ flex-direction:column; align-items:stretch; gap:4px; width:100%; }
  .hero .btn-primary{
    width:100%; justify-content:center; padding:20px 24px;
    font-size:12px; letter-spacing:.16em;
  }
  .hero-cta .link-quiet{
    justify-content:center; padding:18px 2px; align-self:center;
    font-size:11.5px; color:rgba(246,243,237,.82);
  }
  .hero-cta .link-quiet::after{ bottom:12px; }

  /* --- 4/5. testo dell'hero: respiro e nome del marchio leggibile -------- */
  .hero-title{ line-height:.92; }
  .hero-sub{ font-size:15.5px; line-height:1.6; max-width:32ch; }
  .hero-eyebrow{ font-size:10.5px; }

  /* --- 3. indicatore di scorrimento: filo + punto che scende ------------- */
  .hero-scroll{
    right:auto; left:50%; transform:translateX(-50%);
    bottom:22px; gap:10px; font-size:10px;
  }
  /* --- home: niente pulsante "esplora", resta solo l'invito a scorrere --- */
  .hero-scrub .hero-cta{ display:none; }
  /* senza il pulsante il testo scende: lascia spazio all'invito a scorrere */
  .hero-scrub .hero-content{ padding-bottom:118px; }
  /* "Scorri per esplorare" con lo stesso peso del sottotitolo sopra: stesse
     impostazioni di .hero-sub (font, corpo, interlinea, colore pieno) */
  .hero-scrub .hero-scroll{
    font-family:var(--f-sans); font-size:15.5px; line-height:1.6;
    letter-spacing:normal; text-transform:none; color:var(--ivory);
    white-space:nowrap;
  }
  .hero-scroll .line{ position:relative; width:1px; height:42px; background:rgba(246,243,237,.22); }
  .hero-scroll .line::after{ display:none; }   /* niente doppia animazione */
  .hero-scroll .punto{
    display:block; position:absolute; left:50%; top:0;
    width:4px; height:4px; margin-left:-2px; border-radius:50%;
    background:var(--gold); box-shadow:0 0 8px rgba(182,147,79,.9);
    animation:puntoGiu 2.6s var(--ease) infinite;
  }
  @keyframes puntoGiu{
    0%   { top:0;    opacity:0; }
    22%  { opacity:1; }
    78%  { opacity:1; }
    100% { top:38px; opacity:0; }
  }

  /* --- 7/8/10. le cinque destinazioni ------------------------------------ */
  .services-row{ border-top:0; }
  .service-cell{
    border-left:0; border-bottom:1px solid var(--line-on-dark);
    padding:26px 0 24px;
  }
  .service-cell:last-child{ border-bottom:0; }
  .service-cell::before{ top:auto; bottom:-1px; }       /* il filo segue il separatore */
  .service-foot{ padding-top:18px; }
  /* la CTA testuale e' sempre visibile: qui non esiste l'hover */
  .service-go{ opacity:1; font-size:10.5px; letter-spacing:.16em; }
  .service-icon{ opacity:.55; }

  /* --- 9. riscontro al tocco --------------------------------------------- */
  .service-cell{ transition:transform .12s ease, background .3s var(--ease); }
  .service-cell:active{ transform:scale(.985); background:rgba(255,255,255,.05); }
  .btn:active{ transform:scale(.985); }
  .mobile-nav ul a:active{ background:rgba(255,255,255,.06); }

  /* --- 11/12. menu: righe piene, freccia a destra, chiusura comoda ------- */
  .mobile-nav ul a{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; gap:14px;
  }
  .mobile-nav-arrow{ float:none; margin-left:auto; opacity:.9; }
  .mobile-nav-close{
    top:16px; right:calc(var(--gutter) - 12px);
    padding:16px 12px; margin:0;   /* 16+13+16 = 45px, sopra la soglia di tocco */
  }

  /* --- 13/14. footer: prima le azioni, poi le informazioni --------------- */
  .footer-azioni{
    grid-template-columns:1fr; gap:12px;
    margin-bottom:38px; padding-bottom:34px;
    border-bottom:1px solid var(--line-on-dark);
  }
  .footer-azioni .btn{ width:100%; justify-content:center; padding:18px 20px; }
  .footer-top{ display:flex; flex-direction:column; gap:34px; }
  .footer-col:nth-of-type(1){ order:4; }   /* Esplora dopo le informazioni utili */
  .footer-col:nth-of-type(2){ order:2; }   /* Boutique  */
  .footer-col:nth-of-type(3){ order:3; }   /* Orari     */
  .footer-brand{ order:1; }
  .footer-col h2{ margin-bottom:14px; }
  /* bersagli del footer sopra i 44px: il riempimento sostituisce lo spazio
     dell'elenco, cosi' la distanza visiva resta quella e cresce solo l'area
     che risponde al dito */
  .footer-col ul{ gap:0; }
  .footer-col a{ display:inline-flex; align-items:center; padding:11px 0; }
  .footer-col address{ padding-block:6px; }
  .footer-arrow{ opacity:.75; transform:none; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px; padding:26px 0; }
  .footer-bottom .legal-links{ gap:20px; }

  /* --- pulsanti: il testo non deve essere tagliato ----------------------
     .btn ha white-space:nowrap e, da quando c'e' il lampo, overflow:hidden.
     Sotto i 360px la scritta piu' lunga eccedeva e veniva troncata. Qui il
     testo puo' andare a capo e i pulsanti occupano tutta la riga. */
  .btn{ white-space:normal; text-align:center; line-height:1.35; }
  .cta-box .cta-row{ flex-direction:column; align-items:stretch; gap:12px; }
  .cta-box .btn{ width:100%; justify-content:center; padding:18px 18px; }

  /* sui telefoni piu' stretti (320-360px) la scritta piu' lunga eccedeva
     ancora di pochi pixel: meno riempimento laterale e spaziatura, il
     testo respira senza rimpicciolire il bersaglio verticale */
  @media (max-width:380px){
    .hero .btn-primary{ padding-inline:14px; letter-spacing:.1em; }
    .btn{ gap:8px; }
  }

  /* --- Pelletteria: hero piu' bassa del 10% -----------------------------
     Accorciando la hero il riquadro si avvicina alle proporzioni del filmato
     e il ritaglio ne taglia meno: lo zaino visibile passa dal 26% al 28,8%
     della larghezza.
     Il punto delicato e' la striscia che resta sotto la hero fissata: li' si
     vedrebbe il fondo della sezione (rgb 21,21,21) contro il bordo inferiore
     del filmato, che ho misurato a rgb(68,70,73) — uno stacco di ~47 livelli,
     cioe' di nuovo una banda evidente. Per questo la striscia prende
     esattamente il colore del bordo del fotogramma, che fra un fotogramma e
     l'altro varia solo di ±3,5 livelli: il passaggio risulta continuo.
     Vale solo per pelletteria: la home ha fotogrammi con bordo nero e non
     avrebbe bisogno di questo. */
  .hero-scrub[data-manifest*="pelletteria"] .hero{ height:90svh; }
  /* il colore esatto arriva da js/hero-scrub.js a ogni fotogramma; #444649
     e' la media, usata solo finche' il primo disegno non e' avvenuto */
  .hero-scrub[data-manifest*="pelletteria"]{ background:var(--bordo-filmato, #444649); }

  /* --- 16. nessun bersaglio troppo piccolo ------------------------------- */
  .crumbs a, .footer-address{ padding-block:6px; }

}

@media (prefers-reduced-motion: reduce){
  .hero-scroll .punto{ animation:none; top:18px; }
}