:root{
  --bg:#E9E5DC;
  --surface:#FFFFFF;
  --ink:#1C1A16;
  --muted:#8A7F6D;
  --accent:#B4551F;
  --line:#DBD4C6;
  --radius:6px;
  --wrap:1120px;
}

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

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.brand-name,.band-tel,.big-tel{
  font-family:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.1;
  margin:0 0 .5em;
}

h1{font-size:clamp(2rem,7vw,3.4rem);}
h2{font-size:clamp(1.45rem,3.6vw,2.1rem);color:var(--accent);}
h3{font-size:1.06rem;letter-spacing:-0.01em;}

p{margin:0 0 1rem;}

a{color:inherit;}

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

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px;}

/* ---------- intestazione (scorre con la pagina) ---------- */
.site-head{
  position:static;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.head-in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 22px;
  padding-top:14px;
  padding-bottom:14px;
}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1.15;margin-right:auto;}
.brand-name{font-size:1.32rem;letter-spacing:-0.03em;}
.brand-sub{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}

.nav{
  order:3;
  width:100%;
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding-top:10px;
  border-top:1px solid var(--line);
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none;}
.nav a{
  text-decoration:none;
  color:var(--muted);
  font-size:.92rem;
  font-weight:500;
  white-space:nowrap;
  padding-bottom:4px;
  border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--ink);}

.head-tel{
  display:inline-flex;
  align-items:center;
  gap:7px;
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:7px 12px;
}
.head-tel:hover{border-color:var(--ink);}

.ico{width:18px;height:18px;flex:none;}

/* ---------- elementi comuni ---------- */
.eyebrow{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
  font-weight:600;
  margin-bottom:.6rem;
}
.lede{font-size:clamp(1.02rem,2.4vw,1.22rem);max-width:62ch;color:#3a352d;}
.dim{color:var(--muted);}
.section-note{color:var(--muted);max-width:70ch;}

.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:1rem;
  padding:13px 20px;
  border-radius:var(--radius);
  border:1px solid var(--accent);
}
.btn:hover{background:#9c471a;border-color:#9c471a;}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-ghost:hover{background:rgba(28,26,22,.06);}
.btn-light{background:#fff;color:var(--ink);border-color:#fff;}
.btn-light:hover{background:#efeae0;border-color:#efeae0;}

.link{color:var(--ink);text-underline-offset:3px;}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin:1.4rem 0 .8rem;}

.stars{color:var(--ink);letter-spacing:.12em;margin:0 0 .4rem;}

/* ---------- hero ---------- */
.hero{padding:34px 0 8px;}
.hero-grid{display:grid;gap:26px;}
.hero-text .rating-line{font-size:1rem;margin-top:1rem;}
.hero-text .rating-line .stars{display:inline;margin-right:8px;}
.hero-hours{color:var(--muted);font-size:.95rem;margin-top:.2rem;}
.hero-fig{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
}
.hero-fig img{aspect-ratio:4/3;object-fit:cover;width:100%;}

/* ---------- testata pagine interne ---------- */
.page-head{padding:40px 0 6px;}
.page-head .lede{margin-top:.6rem;}
.big-tel{
  display:inline-block;
  font-size:clamp(1.7rem,6vw,2.6rem);
  text-decoration:none;
  color:var(--ink);
  margin:.2rem 0 1rem;
  border-bottom:3px solid var(--accent);
}

/* ---------- sezioni ---------- */
.section{padding:44px 0;}
.section-alt{background:rgba(255,255,255,.55);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

.two-col{display:grid;gap:30px;}

/* ---------- schede prodotto ---------- */
.cards{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:22px;
}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%;}
.card-body{padding:15px 16px 18px;}
.card-body h3{margin-bottom:.35em;}
.card-body p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.55;}

/* ---------- citazioni ---------- */
.quotes{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin-top:22px;
}
.quote{
  margin:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 18px 16px;
}
.quote p{margin:0 0 .7rem;}
.quote footer{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;}
.quote-plain{margin-top:18px;}

/* ---------- orari ---------- */
.hours{list-style:none;margin:0 0 1.2rem;padding:0;}
.hours li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.hours li span{color:var(--muted);}
.hours li b{font-weight:600;white-space:nowrap;}
.hours .closed b{color:var(--muted);font-weight:500;}
.addr{font-size:1.1rem;}

/* ---------- fascia telefono ---------- */
.band{background:var(--ink);color:#F4F0E8;}
.band-in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:30px;
  padding-bottom:30px;
}
.band-kicker{margin:0 0 .25rem;color:#C6BCA8;font-size:.9rem;}
.band-tel{
  color:#fff;
  text-decoration:none;
  font-size:clamp(1.5rem,5vw,2.2rem);
  display:inline-block;
}
.band-tel:hover{text-decoration:underline;text-underline-offset:5px;}

/* ---------- dettagli pratici ---------- */
.facts{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.facts li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 14px;
  font-size:.95rem;
}
.facts .ico{color:var(--muted);margin-top:2px;}

/* ---------- menù ---------- */
.menu-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:20px;
}
.menu-item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 17px;
}
.menu-item p{margin:0;color:var(--muted);font-size:.94rem;}

/* ---------- servizi ---------- */
.svc-list{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:22px;
}
.svc{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}
.svc .when{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--muted);
  font-weight:600;
  margin:0 0 .6rem;
}
.svc p:last-child{margin:0;font-size:.96rem;}

/* ---------- figure, note e crediti ---------- */
.fig{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);}
.fig img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.fig-wide{margin-top:24px;}
.fig-wide img{aspect-ratio:16/9;}

.note{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:24px;
}
.note h2{font-size:1.1rem;}
.note p{margin:0;color:#3a352d;}

.photo-note{font-size:.86rem;color:var(--muted);max-width:70ch;margin-top:18px;}
.credits{font-size:.82rem;color:var(--muted);}
.credits a{color:var(--muted);}

/* ---------- piede ---------- */
.site-foot{
  background:var(--surface);
  border-top:1px solid var(--line);
  margin-top:8px;
}
.foot-in{
  display:grid;
  gap:18px;
  padding-top:34px;
  padding-bottom:34px;
  font-size:.93rem;
  color:var(--muted);
}
.foot-in a{color:var(--ink);}
.foot-name{
  font-family:"Bricolage Grotesque","Inter",sans-serif;
  font-weight:700;
  font-size:1.12rem;
  color:var(--ink);
  margin-bottom:.35rem;
}
.foot-note{grid-column:1/-1;font-size:.8rem;border-top:1px solid var(--line);padding-top:16px;margin:0;}

/* ---------- animazione: attiva solo con JavaScript ---------- */
.js-anim .reveal{opacity:0;transform:translateY(14px);}
.js-anim .reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity .55s ease, transform .55s ease;
}

@media (prefers-reduced-motion:reduce){
  .js-anim .reveal{opacity:1;transform:none;}
  .js-anim .reveal.is-in{transition:none;}
}

/* ---------- schermi larghi ---------- */
@media (min-width:760px){
  .hero{padding:56px 0 16px;}
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:40px;}
  .two-col{grid-template-columns:1fr 1fr;gap:44px;}
  .section{padding:64px 0;}
  .page-head{padding:60px 0 10px;}
  .foot-in{grid-template-columns:1.4fr 1fr;}
}

@media (min-width:1000px){
  .nav{
    order:0;
    width:auto;
    border-top:0;
    padding-top:0;
    gap:24px;
    margin-left:auto;
    margin-right:8px;
  }
  .brand{margin-right:24px;}
}