/* ==========================================================================
   Arte Capelli Parma — foglio di stile
   v2 · 25 agosto 2026
   Struttura: 1 token · 2 base · 3 componenti · 4 sezioni · 5 movimento
   ========================================================================== */

/* 1 — TOKEN ================================================================ */

:root{
  --ink:#14120F;
  --ink-2:#1D1A16;
  --ink-3:#272219;
  --bone:#EFEAE4;
  --bone-dim:#ADA49A;
  --bone-faint:#8E857A;
  --violet:#C9AE86;          /* champagne — accento */
  --violet-deep:#6E5B3C;
  --rule:rgba(239,234,228,.14);
  --display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --shell:min(1180px,100% - 3rem);
  --pad:clamp(4.5rem,9vw,8.5rem);
  --ease:cubic-bezier(.16,1,.3,1);      /* uscita lunga, entrata decisa */
  --mx:50%;                              /* posizione del puntatore nell'hero */
  --my:35%;
}

/* 2 — BASE ================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:2px}

/* grana filmica su tutta la pagina — dà materia dove non ci sono fotografie */
body::after{
  content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 3 — COMPONENTI =========================================================== */

/* --- testata ------------------------------------------------------------- */

.head{
  position:sticky;top:0;z-index:60;
  background:rgba(20,18,15,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  box-shadow:0 10px 28px rgba(10,8,6,0);
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.head--fix{
  background:rgba(20,18,15,.94);border-bottom-color:var(--rule);
  box-shadow:0 10px 28px rgba(10,8,6,.12);
}
.head__in{
  width:var(--shell);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:84px;
}

/* filo di avanzamento della lettura */
.prog{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--violet);transform:scaleX(0);transform-origin:0 50%;
  opacity:0;transition:opacity .4s ease;
}
.head--fix .prog{opacity:.9;transform:scaleX(1)}

.mark{display:flex;align-items:center;gap:.85rem;text-decoration:none;line-height:1}
.mark__logo{width:52px;height:52px;flex:none;border-radius:50%}
.mark__txt{display:flex;flex-direction:column;gap:.2rem}
.mark__name{font-family:var(--display);font-size:1.4rem;letter-spacing:.14em}
.mark__sub{font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bone-faint)}
.foot .mark__logo{width:62px;height:62px}
/* sul telefono la riga sotto il nome andrebbe a capo e verrebbe tagliata */
@media(max-width:560px){
  .head .mark__sub{display:none}
  .head .mark__name{font-size:1.25rem}
}

/* fallback quando logo.png non è ancora nella cartella */
.mark__logo:not([src]),.mark__logo[src=""]{display:none}

.nav{display:flex;gap:2rem;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase}
.nav a{
  position:relative;text-decoration:none;color:var(--bone-dim);
  padding-bottom:3px;transition:color .3s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--violet);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.nav a:hover{color:var(--bone)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
@media(max-width:860px){.nav{display:none}}

/* --- bottoni ------------------------------------------------------------- */

.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.85rem 1.5rem;border-radius:1px;text-decoration:none;
  background:none;border:1px solid transparent;cursor:pointer;
  transition:color .3s ease,border-color .3s ease,transform .16s ease-out;
}
.btn:active{transform:scale(.97)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .45s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn--solid{background:var(--violet);color:#17140F}
.btn--solid::before{background:#E4D0B0}
.btn--line{background:transparent;border-color:rgba(239,234,228,.32);color:var(--bone)}
.btn--line::before{background:rgba(239,234,228,.09)}
.btn--line:hover,.btn--line:focus-visible{border-color:var(--bone)}
.btn--sm{padding:.6rem 1.05rem;font-size:.6875rem}

/* --- hero ---------------------------------------------------------------- */

.hero{position:relative;min-height:clamp(560px,86vh,860px);display:flex;align-items:flex-end;overflow:hidden}
.hero__media{
  position:absolute;inset:0;
  background-color:var(--ink-2);
  background-image:url("img/hero-atmosfera-final.webp");
  background-size:cover;background-position:left 48%;background-repeat:no-repeat;
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(100% 80% at 72% 24%,rgba(214,182,132,.12),transparent 62%),
    linear-gradient(90deg,rgba(20,18,15,.90) 0%,rgba(20,18,15,.70) 42%,rgba(20,18,15,.42) 76%,rgba(20,18,15,.56) 100%),
    linear-gradient(180deg,rgba(20,18,15,.42) 0%,rgba(20,18,15,.26) 40%,rgba(20,18,15,.96) 100%);
  animation:drift 26s ease-in-out infinite alternate;
}
@media(min-width:1500px){.hero__media{background-position:left 46%}}
@media(max-width:700px){.hero__media{background-position:left center}}
@keyframes drift{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.07) translate3d(-1.5%,-1%,0)}
}
/* luce che segue il puntatore — solo dove c'è un mouse vero */
.hero__glow{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .8s ease;
  background:radial-gradient(28rem 28rem at var(--mx) var(--my),rgba(201,174,134,.16),transparent 70%);
}
@media(hover:hover) and (pointer:fine){.hero--in .hero__glow{opacity:1}}

/* slot per il video walkthrough, il giorno che si gira */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.hero__in{position:relative;width:var(--shell);margin-inline:auto;padding-block:0 clamp(3.5rem,7vw,6rem)}
.hero__copy{max-width:37rem}

.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;
  padding:.5rem .9rem;border:1px solid rgba(239,234,228,.22);border-radius:2rem;
  background:rgba(20,18,15,.5);backdrop-filter:blur(6px);
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);
}
.hero__badge b{color:var(--bone);font-weight:600}
.hero__badge .stars{font-size:.75rem}

.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,6.6vw,4.7rem);line-height:1.0;
  margin:0 0 1.15rem;letter-spacing:-.015em;
}
.hero h1 em{font-style:italic;color:var(--violet)}
.hero p{color:var(--bone-dim);margin:0 0 2rem;font-size:1.0625rem;max-width:27rem}
.hero__cta{display:flex;gap:.75rem;flex-wrap:wrap}
@media(max-width:700px){
  .hero{min-height:74vh}
  .hero__in{padding-bottom:clamp(4.5rem,12vw,6rem)}
}

.scroll{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
  font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bone-faint);
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
}
.scroll::after{
  content:"";width:1px;height:2.25rem;background:linear-gradient(180deg,var(--bone-faint),transparent);
  animation:scrollpulse 2.6s ease-in-out infinite;transform-origin:50% 0;
}
/* sul telefono l'indicatore finirebbe sopra i bottoni: non serve */
@media(max-width:860px){.scroll{display:none}}
@keyframes scrollpulse{
  0%,100%{transform:scaleY(.35);opacity:.35}
  50%{transform:scaleY(1);opacity:1}
}

/* --- barra fiducia ------------------------------------------------------- */

.trust{border-block:1px solid var(--rule);background:var(--ink-2)}
.trust__in{
  width:var(--shell);margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:1.15rem 2.5rem;
  padding-block:1.15rem;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-dim);
}
.trust b{color:var(--bone);font-weight:600}
.tlink{
  color:inherit;text-decoration:underline;
  text-decoration-color:rgba(239,234,228,.22);text-decoration-thickness:1px;text-underline-offset:5px;
  transition:color .25s,text-decoration-color .25s;cursor:pointer;
}
.tlink:hover,.tlink:focus-visible{color:var(--bone);text-decoration-color:var(--violet)}
.stars{color:var(--violet);letter-spacing:.1em}
.dot{width:4px;height:4px;border-radius:50%;background:var(--bone-faint);flex:none}
@media(max-width:700px){.dot{display:none}}
.state--open b{color:#9BD1A8}
.state--shut b{color:var(--bone-dim)}
/* pallino che respira quando il salone è aperto adesso */
.state--open::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#9BD1A8;margin-right:.5rem;vertical-align:middle;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(155,209,168,.5)}
  70%{box-shadow:0 0 0 7px rgba(155,209,168,0)}
}

/* 4 — SEZIONI ============================================================== */

.sec{padding-block:var(--pad);border-bottom:1px solid var(--rule)}
.sec__in{width:var(--shell);margin-inline:auto;min-width:0}
.sec,#orari,#dove{scroll-margin-top:96px}

.grid{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:clamp(1.75rem,4vw,4.5rem)}
.grid>*{min-width:0}
@media(max-width:820px){.grid{grid-template-columns:1fr;gap:1.5rem}}

.label{
  position:relative;
  font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--violet);padding-top:.6rem;
}
.label::before{
  content:"";position:absolute;top:0;left:0;width:2.25rem;height:1px;background:var(--violet);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease) .1s;
}
.on .label::before,.rv.on .label::before{transform:scaleX(1)}

h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;
  margin:0 0 1.5rem;letter-spacing:-.01em;text-wrap:balance;
}
h2 em{font-style:italic}
.lead{font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);color:var(--bone-dim);max-width:34rem;margin:0 0 1.25rem}
.body{max-width:34rem;color:var(--bone-dim);margin:0 0 1rem}
.body:last-child{margin-bottom:0}

/* --- servizi ------------------------------------------------------------- */

.svc{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2.5rem;
}
.svc__card{
  position:relative;background:var(--ink);padding:2rem 1.75rem;
  display:flex;flex-direction:column;gap:.85rem;
  transition:background-color .45s ease;
}
.svc__card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--violet);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease);
}
.svc__card:hover{background:var(--ink-2)}
.svc__card:hover::before,.svc__card:focus-within::before{transform:scaleX(1)}
.svc__card h3{font-family:var(--display);font-size:1.5rem;font-weight:400;margin:0}
.svc__card p{margin:0;color:var(--bone-dim);font-size:.9375rem}
.svc__list{list-style:none;margin:.25rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem;font-size:.875rem}
.svc__list li{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  border-bottom:1px dotted var(--rule);padding-bottom:.55rem;
  transition:border-color .35s ease;
}
.svc__card:hover .svc__list li{border-bottom-color:rgba(201,174,134,.28)}
.svc__list span:first-child{color:var(--bone-dim)}
.svc__list span:last-child{font-variant-numeric:tabular-nums;color:var(--bone);white-space:nowrap}
.svc__note{margin-top:auto;padding-top:1rem;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-faint)}
.svc__note a{color:var(--violet);text-decoration:none}
.svc__note a:hover{text-decoration:underline;text-underline-offset:4px}

.free{
  margin-top:2.5rem;border:1px solid var(--violet-deep);
  background:linear-gradient(135deg,rgba(110,91,60,.24),rgba(110,91,60,.06));
  padding:clamp(1.75rem,3vw,2.5rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;justify-content:space-between;
}
.free h3{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:400;margin:0 0 .5rem}
.free p{margin:0;color:var(--bone-dim);max-width:32rem;font-size:.9375rem}

/* --- prodotti ------------------------------------------------------------ */

.brands{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(5rem,10vw,9rem);margin-top:2.5rem;
  padding:clamp(6.25rem,9vw,8.125rem) 0;
}
.brand{
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:opacity .3s ease,transform .3s var(--ease);
}
.brand:hover{opacity:.82;transform:translateY(-2px)}
.brand img{display:block;width:auto;object-fit:contain}
.brand--davines img{width:280px;height:auto;max-width:none;transform:translateY(-8px)}
.brand--ghd img{height:84px;max-width:230px}
@media(max-width:620px){
  .brands{flex-direction:column;gap:3.25rem;padding:5.75rem 0}
  .brand--davines img{width:min(72vw,250px);height:auto;max-width:none;transform:none}
  .brand--ghd img{height:76px;max-width:min(58vw,210px)}
}

.shop{
  margin-top:2.5rem;border:1px solid var(--rule);background:var(--ink-2);
  padding:clamp(1.75rem,3vw,2.5rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;justify-content:space-between;
}
.shop h3{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:400;margin:0 0 .5rem}
.shop p{margin:0;color:var(--bone-dim);max-width:32rem;font-size:.9375rem}

/* --- recensioni ---------------------------------------------------------- */

.score{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
.score__n{
  font-family:var(--display);font-size:clamp(3.5rem,9vw,5.5rem);line-height:.9;
  color:var(--violet);font-variant-numeric:tabular-nums;
}
.score__t{font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.score__t b{color:var(--bone);font-variant-numeric:tabular-nums;font-weight:600}


/* il voto è un collegamento: chi vuole la prova va su Google in un clic */
a.score{text-decoration:none;cursor:pointer}
a.score .score__n,a.score .score__t{transition:color .3s ease}
.score__go{
  display:block;margin-top:.55rem;
  font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);
}
.score__go i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){
  a.score:hover .score__n{color:#E4D0B0}
  a.score:hover .score__t{color:var(--bone)}
  a.score:hover .score__go i{transform:translate(3px,-3px)}
}
a.score:active{transform:scale(.99)}

.revs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.revs-nav{display:flex;gap:.5rem}
.rnav{
  width:42px;height:42px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid rgba(239,234,228,.28);background:transparent;color:var(--bone);
  display:grid;place-items:center;font-size:1rem;line-height:1;
  transition:border-color .3s,color .3s,opacity .3s,transform .3s var(--ease);
}
.rnav:hover:not(:disabled){border-color:var(--violet);color:var(--violet);transform:scale(1.06)}
.rnav:disabled{opacity:.25;cursor:default}

.revs-wrap{position:relative;margin-top:2rem;min-width:0;max-width:100%}
.revs-wrap::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:4rem;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ink));
}
.revs{
  display:flex;gap:1.5rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:0 4rem .5rem 0;margin:0;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
}
.revs::-webkit-scrollbar{display:none}
.revs.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.rev{
  flex:0 0 clamp(15.5rem,74vw,20.5rem);scroll-snap-align:start;
  border-top:1px solid var(--violet-deep);padding-top:1.25rem;
  display:flex;flex-direction:column;gap:.85rem;
}
.rev blockquote{margin:0;font-family:var(--display);font-size:1.0625rem;line-height:1.5;color:var(--bone)}
.rev figcaption{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint);margin-top:auto}
.rev--all{justify-content:center;align-items:flex-start;gap:1rem;border-top-color:rgba(239,234,228,.22)}
.rev--all p{margin:0;color:var(--bone-dim);font-size:.9375rem}

.dots{display:flex;gap:.45rem;margin-top:1.5rem}
.dots button{
  position:relative;width:3rem;height:2px;border:0;padding:0;cursor:pointer;
  background:rgba(239,234,228,.2);transform:scaleX(.58);transform-origin:0 50%;
  transition:background-color .35s ease,transform .35s var(--ease);
}
.dots button::before{content:"";position:absolute;inset:-21px 0}
.dots button[aria-current="true"]{background:var(--violet);transform:scaleX(1)}

/* --- lavori -------------------------------------------------------------- */

.work{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2.5rem;
}
.work__cell{
  position:relative;margin:0;background:var(--ink-2);aspect-ratio:3/4;overflow:hidden;
}
.work__cell img{
  width:100%;height:100%;object-fit:cover;
  /* I lavori reali restano sempre a colori, anche durante l'interazione. */
  filter:none;
  transform:scale(1.02);
  transition:transform 1.2s var(--ease),filter .8s ease;
}
.work__cell:hover img{transform:scale(1.07);filter:none}
.work__cell:not([data-empty])::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,8,6,.60) 0%,rgba(10,8,6,.20) 32%,transparent 58%);
}

/* stato senza fotografia: tipografia, non un rettangolo vuoto */
.work__cell[data-empty] img{display:none}
.work__cell[data-empty]::before{
  content:attr(data-k);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-style:italic;font-size:clamp(1.6rem,3.4vw,2.4rem);
  color:rgba(239,234,228,.16);letter-spacing:-.01em;text-align:center;padding:1rem;
}
.work__cell[data-empty]::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 40% 30%,rgba(201,174,134,.13),transparent 70%);
}
.work__cell:nth-child(even)[data-empty]::after{
  background:radial-gradient(70% 60% at 60% 40%,rgba(168,150,128,.11),transparent 70%);
}
.work__cell[data-empty] figcaption{display:none}
.work__cell figcaption{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  font-size:.71875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bone);opacity:1;text-shadow:0 1px 8px rgba(0,0,0,.45);
}
@media(max-width:620px){.work__cell figcaption{font-size:.6875rem;letter-spacing:.14em}}

/* --- dove siamo ---------------------------------------------------------- */

.visit{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:clamp(2rem,5vw,4rem);margin-top:2.5rem}
.visit__col h3{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--violet);margin:0 0 1rem;font-family:var(--sans);font-weight:600}
.visit__col p,.visit__col a:not(.btn){margin:0 0 .35rem;color:var(--bone-dim);font-size:.9375rem;text-decoration:none;display:block}
.visit__col a:not(.btn):hover{color:var(--bone)}
.visit__col strong{color:var(--bone);font-weight:500}

.hours{list-style:none;margin:0;padding:0;font-size:.875rem;display:flex;flex-direction:column;gap:.5rem}
.hours li{
  display:flex;justify-content:space-between;gap:1rem;color:var(--bone-dim);
  border-bottom:1px dotted var(--rule);padding-bottom:.45rem;
  transition:color .3s ease;
}
.hours li[data-today]{color:var(--bone)}
.hours li[data-today] span:last-child{color:var(--violet)}
.hours span:last-child{font-variant-numeric:tabular-nums}
.visit__cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.25rem}

.social{display:flex;gap:.6rem;flex-wrap:wrap}
.social a{
  display:inline-flex;align-items:center;gap:.55rem;padding:.6rem .95rem;
  border:1px solid rgba(239,234,228,.24);border-radius:2rem;
  color:var(--bone-dim);text-decoration:none;
  font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .3s,color .3s,transform .3s var(--ease);
}
.social a:hover{border-color:var(--violet);color:var(--violet);transform:translateY(-2px)}
.social svg{width:16px;height:16px;flex:none;fill:currentColor}

.mapcap{margin:2.5rem 0 1rem;font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);color:var(--bone);letter-spacing:0}
.mapwrap{margin-top:0;border:1px solid var(--rule);background:var(--ink-2);position:relative;overflow:hidden}
.mapwrap iframe{display:block;width:100%;height:clamp(260px,38vw,420px);border:0;filter:grayscale(.35) contrast(1.05) brightness(.92)}
.mapoff{
  min-height:clamp(260px,38vw,420px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  text-align:center;padding:2rem 1.5rem;
  background:
    radial-gradient(60% 60% at 50% 40%,rgba(201,174,134,.10),transparent 70%),
    repeating-linear-gradient(45deg,rgba(239,234,228,.03) 0 2px,transparent 2px 22px);
}
.mapoff p{margin:0;color:var(--bone-dim);font-size:.9375rem;max-width:26rem}
.mapoff .pin{font-size:1.6rem;line-height:1;color:var(--violet)}
.mapcta{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}

/* --- cookie -------------------------------------------------------------- */

.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:rgba(29,26,22,.98);backdrop-filter:blur(14px);border-top:1px solid var(--rule);
  padding:1.15rem 1.25rem calc(1.15rem + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .6s var(--ease);
}
.cc.on{transform:none}
.cc__in{width:var(--shell);margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;justify-content:space-between}
.cc__txt{color:var(--bone-dim);font-size:.875rem;line-height:1.55;max-width:44rem;margin:0}
.cc__txt a{color:var(--violet);text-underline-offset:3px}
.cc__btns{display:flex;gap:.6rem;flex-wrap:wrap}
@media(max-width:620px){
  .cc__in{flex-direction:column;align-items:stretch}
  .cc__btns{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .cc__btns .btn{width:100%}
}
@media(max-width:560px){
  .mark__sub,.label,.svc__note,.foot__fine{font-size:.75rem}
}
body.cc-open .bar{transform:translateY(110%)}
.ccreset{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ccreset:hover{color:var(--bone)}

/* --- collegamento diretto a WhatsApp ------------------------------------- */
/* Champagne, non verde: il verde di WhatsApp spacca la palette. L'icona resta
   riconoscibile per la forma. Sopra la barra fissa sul telefono.            */

.wa{
  position:fixed;right:clamp(1rem,2.2vw,1.6rem);bottom:clamp(1rem,2.2vw,1.6rem);
  z-index:90;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--violet);color:#17140F;
  box-shadow:0 6px 26px rgba(0,0,0,.45);
  transition:transform .28s var(--ease),background-color .28s ease;
}
.wa svg{width:28px;height:28px;fill:currentColor}
.wa:active{transform:scale(.94)}
@media(hover:hover) and (pointer:fine){
  .wa:hover{background:#E4D0B0;transform:translateY(-3px)}
}
/* sul telefono sta sopra la barra Chiama/Mappa/Prenota */
@media(max-width:860px){
  .wa{width:52px;height:52px;bottom:calc(4.6rem + env(safe-area-inset-bottom))}
  .wa svg{width:26px;height:26px}
}
/* quando c'è il banner cookie si sposta più su per non coprirlo */
body.cc-open .wa{transform:translateY(-5.5rem)}


/* --- piede --------------------------------------------------------------- */

.foot{padding-block:3.5rem 6.5rem;background:var(--ink-2)}
.foot__in{width:var(--shell);margin-inline:auto;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.foot__logo{width:140px;height:auto;object-fit:contain;flex:none}
.foot__links{display:flex;flex-direction:column;gap:.55rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.foot__links a{color:var(--bone-dim);text-decoration:none;transition:color .3s}
.foot__links a:hover{color:var(--bone)}
.foot__social h3{font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--violet);margin:0 0 1rem;font-family:var(--sans);font-weight:600}
.foot__fine{width:var(--shell);margin:2.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--rule);font-size:.6875rem;color:var(--bone-faint);letter-spacing:.05em;overflow-wrap:anywhere}
.foot__fine p{margin:0 0 .3rem}
.foot__fine p:last-child{margin-bottom:0}
.foot__fine a{color:var(--bone-faint)}
@media(max-width:560px){.foot__logo{width:110px}.foot__fine{line-height:1.75}}

/* --- barra fissa mobile -------------------------------------------------- */

.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
  background:rgba(29,26,22,.96);backdrop-filter:blur(12px);border-top:1px solid var(--rule);
  padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));gap:.5rem;
  transform:translateY(110%);transition:transform .5s var(--ease);
}
.bar.on{transform:none}
.bar a{
  flex:1;text-align:center;text-decoration:none;padding:.7rem .4rem;border-radius:1px;
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
}
.bar .p{background:var(--violet);color:#17140F}
.bar .s{border:1px solid rgba(239,234,228,.28);color:var(--bone)}
@media(max-width:860px){.bar{display:flex}.foot{padding-bottom:7.5rem}}

/* --- hero a due colonne: testo a sinistra, video a destra ----------------- */
/* Il video è atmosfera, non portfolio. Contenuto a destra invece che a tutta
   pagina: la parete chiara non invade il fondo scuro e il titolo resta netto. */

.hero__in{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,34%);
  align-items:end;gap:clamp(2rem,5vw,4.5rem);
}
.hero__reel{
  position:relative;overflow:hidden;
  aspect-ratio:3/4;max-height:60vh;align-self:end;
  border:1px solid var(--rule);background:var(--ink-2);
  opacity:0;transform:translateY(22px);
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);
}
.hero__reel--on{opacity:1;transform:none}
.hero__reel img,.hero__reel video{
  width:100%;height:100%;object-fit:cover;display:block;
  /* bianco e nero all'apertura, poi il colore sale una volta sola */
  filter:grayscale(1) brightness(.6) contrast(1.12);
  transition:filter 1.6s ease .6s;
}
.hero__reel--on img,.hero__reel--on video{filter:grayscale(0) brightness(.94) contrast(1.02)}
.hero__reel::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,15,.42),transparent 38%,rgba(20,18,15,.55));
}
@media(max-width:860px){
  .hero__in{grid-template-columns:1fr}
  .hero__reel{display:none}
}


/* scritta dentro il riquadro video dell'hero */
.hero__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1rem,2vw,1.5rem);
  opacity:0;transition:opacity 1s ease 1.4s;
}
.hero__reel--on .hero__cap{opacity:1}
.hero__cap-k{
  display:block;margin-bottom:.4rem;
  font-size:.5625rem;letter-spacing:.26em;text-transform:uppercase;color:var(--violet);
}
.hero__cap-t{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1rem,1.15vw,1.2rem);line-height:1.25;color:var(--bone);
  text-shadow:0 2px 18px rgba(20,18,15,.7);
}
.hero__cap-t em{font-style:italic;color:var(--violet)}


/* --- figure di accompagnamento ------------------------------------------- */
/* Atmosfera, non portfolio: gesti del mestiere, nessun volto, nessuna stanza
   riconoscibile. Non stanno mai nella sezione «I lavori», che promette
   fotografie fatte in salone.                                               */

.wfig{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,21rem);
  gap:clamp(1.5rem,3.5vw,3rem);align-items:start;
}
/* «Servizi»: l'immagine occupa la colonna dell'etichetta, a filo del margine
   sinistro, e il titolo le sta accanto. Quella colonna conteneva solo una
   parola: adesso la riempie la cosa giusta, invece di aggiungere un
   contenitore altrove. Struttura diversa perché il contenuto è diverso —
   qui l'immagine apre una griglia di schede, non accompagna un testo lungo. */
.grid--fig{grid-template-columns:minmax(0,21rem) minmax(0,1fr)}
.col-fig{display:flex;flex-direction:column;gap:1.5rem}
.col-fig .label{padding-top:.6rem}
@media(max-width:820px){
  .wfig{grid-template-columns:1fr;gap:2rem}
  .wfig .gesto{max-width:none}
  .grid--fig{grid-template-columns:1fr}
  .col-fig{gap:1.25rem}
}
.gesto{
  position:relative;margin:0;overflow:hidden;
  aspect-ratio:3/4;background:var(--ink-2);border:1px solid var(--rule);
}
.gesto img{
  width:100%;height:100%;object-fit:cover;
  /* Sono già calde e scure: basta un tocco per legarle alla pagina.
     Il giorno che arrivano le fotografie di Martin si toglie questa riga
     e tornano al colore pieno.                                            */
  filter:saturate(.82) contrast(1.04) brightness(.94);
}
.gesto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(20,18,15,.72) 100%);
}





/* --- sul touch l'hover si attacca al primo tocco e non se ne va ----------- */
@media(hover:none){
  .btn:hover::before{transform:scaleY(0)}
  .nav a:hover::after{transform:scaleX(0)}
  .svc__card:hover{background:var(--ink)}
  .svc__card:hover::before{transform:scaleX(0)}
  .svc__card:hover .svc__list li{border-bottom-color:var(--rule)}
  .brand:hover{opacity:1;transform:none}
  .social a:hover{border-color:rgba(239,234,228,.24);color:var(--bone-dim);transform:none}
  .work__cell:hover img{transform:scale(1.02);filter:none}
  .work__cell:hover figcaption{color:var(--bone-faint)}
  .rnav:hover:not(:disabled){transform:none}
}

/* 5 — MOVIMENTO ============================================================ */
/* Regola: il movimento serve la lettura. Ogni transizione qui sotto
   accompagna un contenuto che entra, non decora uno spazio vuoto.       */

/* comparsa progressiva delle sezioni */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.on{opacity:1;transform:none}

/* figli scaglionati dentro una sezione già visibile */
.js .stag>*{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .stag.on>*{opacity:1;transform:none}
.js .stag.on>*:nth-child(1){transition-delay:.05s}
.js .stag.on>*:nth-child(2){transition-delay:.13s}
.js .stag.on>*:nth-child(3){transition-delay:.21s}
.js .stag.on>*:nth-child(4){transition-delay:.29s}
.js .stag.on>*:nth-child(5){transition-delay:.37s}

/* titoli: le parole salgono da sotto una maschera */
.js .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.js .word>span{display:inline-block;transform:translateY(105%);transition:transform .95s var(--ease)}
.js .on .word>span{transform:none}
.js .on h2 .word:nth-child(1)>span{transition-delay:.02s}
.js .on h2 .word:nth-child(2)>span{transition-delay:.06s}
.js .on h2 .word:nth-child(3)>span{transition-delay:.10s}
.js .on h2 .word:nth-child(4)>span{transition-delay:.14s}
.js .on h2 .word:nth-child(5)>span{transition-delay:.18s}
.js .on h2 .word:nth-child(n+6)>span{transition-delay:.22s}

/* hero: righe del titolo, poi il resto */
.js .hero__copy .fade{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .hero--in .hero__copy .fade{opacity:1;transform:none}
.js .hero--in .hero__copy .fade--1{transition-delay:.05s}
.js .hero--in .hero__copy .fade--2{transition-delay:.62s}
.js .hero--in .hero__copy .fade--3{transition-delay:.74s}
.js .hero h1 .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.js .hero h1 .line>span{display:block;transform:translateY(108%);transition:transform 1.15s var(--ease)}
.js .hero--in h1 .line:nth-child(1)>span{transform:none;transition-delay:.12s}
.js .hero--in h1 .line:nth-child(2)>span{transform:none;transition-delay:.24s}

/* 6 — ACCESSIBILITÀ ======================================================== */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.stag>*,.hero__copy .fade{opacity:1!important;transform:none!important}
  .word>span,.line>span{transform:none!important}
  html{scroll-behavior:auto}
  .revs{scroll-behavior:auto}
  .bar,.cc.on{transform:none!important}
  .bar{transform:none!important}
}