@font-face { font-family:"NSD75"; src:url("font/NotoSerifDisplay-it.woff2") format("woff2"); font-weight:300 400; font-stretch:75%; font-display:swap; }
:root { --fondo:#0a0908; --sale:#f0eae1; --spento:#9c968a; --oro:#c89256; --rosso:#E8343F; --lato:clamp(24px,6.7vw,96px); --sans:"PP Neue Montreal","Helvetica Neue",Arial,sans-serif; --serif:"NSD75","Noto Serif Display",serif; }
* { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--fondo); scroll-behavior:smooth; }
body { background:var(--fondo); color:var(--sale); font-family:var(--sans); font-size:clamp(17px,1.35vw,22px); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.grana { position:fixed; inset:0; z-index:50; pointer-events:none; opacity:.07; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>"); }
header { position:fixed; top:0; left:0; right:0; z-index:20; display:flex; justify-content:space-between; align-items:center; padding:clamp(20px,3vw,40px) var(--lato); background:linear-gradient(var(--fondo),rgba(10,9,8,0)); }
.marchio { display:flex; align-items:center; gap:14px; letter-spacing:.28em; font-size:.82rem; text-decoration:none; }
.marchio svg { width:28px; height:28px; }
nav { display:flex; gap:clamp(16px,2.4vw,40px); font-size:.82rem; letter-spacing:.08em; color:var(--spento); }
nav a { text-decoration:none; padding:12px 0; transition:color .25s; }
nav a:hover, nav a:focus-visible { color:var(--sale); }
section { position:relative; padding:clamp(88px,12vw,180px) var(--lato); }
.fregio { width:72px; height:2px; background:var(--oro); margin-bottom:clamp(24px,3vw,40px); }
h1, h2 { font-family:var(--serif); font-weight:400; font-stretch:75%; line-height:1.15; }
h1 { font-size:clamp(40px,4.7vw,80px); max-width:14em; }
h2 { font-size:clamp(34px,4.4vw,72px); max-width:15em; }
.sotto { margin-top:clamp(20px,2.4vw,36px); color:var(--spento); letter-spacing:.03em; max-width:30em; }
#apertura { min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
#apertura .testo { position:relative; z-index:3; max-width:min(52%,760px); }
.anello { position:absolute; right:calc(var(--lato) - 4vw); top:50%; width:clamp(300px,38vw,640px); aspect-ratio:1; transform:translateY(-50%); z-index:1; }
.anello circle.giro { stroke-dasharray:1.01; stroke-dashoffset:1.01; animation:chiudi 2.4s .3s cubic-bezier(.3,.6,.2,1) forwards, fine .01s 2.72s forwards; }
.anello line { opacity:0; animation:entra .8s 2s forwards; }
.anello .orb { fill:var(--oro); opacity:0; animation:entra .8s 2.4s forwards; }
.servizi { list-style:none; margin-top:clamp(40px,5vw,80px); border-top:1px solid rgba(240,234,225,.16); }
.servizi li { display:grid; grid-template-columns:3.2em minmax(0,1fr) minmax(0,1.3fr); gap:clamp(12px,3vw,48px); align-items:baseline; padding:clamp(20px,2.4vw,34px) 0; border-bottom:1px solid rgba(240,234,225,.16); transition:background .3s, padding .3s; }
.servizi li:hover { background:rgba(240,234,225,.035); padding-left:12px; }
.servizi .n { color:var(--oro); letter-spacing:.12em; font-size:.85rem; }
.servizi .t { font-family:var(--serif); font-stretch:75%; font-size:clamp(24px,2.6vw,42px); line-height:1.2; }
.servizi .d { color:var(--spento); }
.due { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,72px); margin-top:clamp(40px,5vw,72px); max-width:1400px; }
.persona .filo { height:2px; background:var(--oro); margin-bottom:clamp(20px,2.4vw,28px); }
.persona .nome { font-family:var(--serif); font-stretch:75%; font-weight:300; font-size:clamp(28px,3.2vw,52px); line-height:1.15; }
.persona .ruolo { margin-top:14px; color:var(--oro); letter-spacing:.16em; text-transform:uppercase; font-size:.8rem; }
.persona p { margin-top:20px; color:var(--spento); }
.persona { display:flex; flex-direction:column; position:relative; padding-bottom:40px; }
.persona .citta { margin-top:auto; padding-top:32px; color:var(--oro); letter-spacing:.16em; text-transform:uppercase; font-size:.8rem; }
.persona .li { position:absolute; left:0; bottom:0; color:var(--spento); font-size:.78rem; letter-spacing:.06em; text-decoration:underline; text-underline-offset:3px; }
.metodo { margin-top:clamp(24px,3vw,40px); max-width:34em; }
.contatti { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,5vw,96px); margin-top:clamp(32px,4vw,56px); max-width:1100px; }
.contatto .nome { font-family:var(--serif); font-stretch:75%; font-weight:300; font-size:clamp(22px,2.2vw,34px); line-height:1.2; margin-bottom:12px; }
.contatto a { display:block; width:fit-content; padding:8px 0; min-height:44px; color:var(--sale); text-decoration:none; border-bottom:1px solid transparent; transition:color .25s,border-color .25s; overflow-wrap:anywhere; }
.contatto a:hover, .contatto a:focus-visible { color:var(--oro); border-color:var(--oro); }
.cta { display:inline-block; margin-top:clamp(28px,3vw,44px); padding:18px 36px; min-height:48px; border:1px solid var(--oro); color:var(--sale); text-decoration:none; letter-spacing:.08em; transition:background .3s,color .3s; }
.cta:hover, .cta:focus-visible { background:var(--oro); color:var(--fondo); }
footer { padding:32px var(--lato) 48px; color:var(--spento); font-size:.82rem; letter-spacing:.06em; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(240,234,225,.1); }
.m { opacity:0; transform:translateY(18px); transition:opacity .8s, transform .8s; transition-delay:calc(var(--d,0) * 1s); }
.m.vista { opacity:1; transform:none; }
@keyframes fine { to { stroke-dasharray:none; stroke-dashoffset:0; } }
@keyframes chiudi { to { stroke-dashoffset:-.01; } }
@keyframes entra { to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .m { opacity:1; transform:none; transition:none; } .anello circle.giro { animation:none; stroke-dashoffset:0; } .anello line, .anello .orb { animation:none; opacity:1; } html { scroll-behavior:auto; } }
@media (max-width:820px) {
  nav { display:none; }
  #apertura { justify-content:flex-end; padding-bottom:12svh; }
  #apertura .testo { max-width:100%; }
  .anello { right:auto; left:50%; top:24svh; width:min(78vw,340px); transform:translate(-50%,-50%); opacity:.9; }
  .servizi li { grid-template-columns:2.4em minmax(0,1fr); }
  .servizi .d { grid-column:2; }
  .due, .contatti { grid-template-columns:1fr; }
  footer { flex-direction:column; }
}

.salta { position:absolute; left:16px; top:-80px; z-index:60; padding:12px 18px; background:var(--sale); color:var(--fondo); text-decoration:none; }
.salta:focus { top:12px; }
a:focus-visible { outline:2px solid var(--oro); outline-offset:4px; }
.legale { flex-basis:100%; }
.legale:empty { display:none; }
.pagina404 { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:var(--lato); }
.pagina404 h1 { max-width:12em; }
.pagina404 .cta { align-self:flex-start; }

/* intro riservata (codice controllato dal server) */
.intro-tasto { margin-top:clamp(24px,3vw,40px); padding:14px 28px; background:transparent; color:var(--sale); border:1px solid var(--oro); font:inherit; font-size:.9rem; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; }
.intro-tasto:hover, .intro-tasto:focus-visible { background:var(--oro); color:var(--fondo); }
#intro-dialogo { margin:auto; width:min(94vw,1100px); max-height:94vh; padding:clamp(16px,3vw,32px); background:#000; color:var(--sale); border:1px solid #2a2622; }
#intro-dialogo::backdrop { background:rgba(10,9,8,.92); }
.intro-chiudi { display:flex; justify-content:flex-end; margin-bottom:12px; }
.intro-chiudi button, #intro-form button { background:transparent; color:var(--sale); border:1px solid var(--spento); padding:10px 18px; font:inherit; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
#intro-form { display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
#intro-input { flex:1 1 200px; min-width:0; padding:12px 14px; background:#111; color:var(--sale); border:1px solid var(--spento); font:inherit; letter-spacing:.2em; text-transform:uppercase; }
#intro-errore { margin-top:12px; color:var(--rosso); font-size:.9rem; }
#intro-schermo { background:#000; }
#intro-schermo video { display:block; width:100%; max-height:80vh; background:#000; object-fit:contain; }
@media (max-width:700px) { #intro-schermo { aspect-ratio:9/16; max-height:78vh; display:flex; align-items:center; } #intro-schermo[hidden] { display:none; } #intro-schermo video { width:100%; height:auto; max-height:100%; } }