/* ==========================================================================
   Studio Legale Avv. Stefano Saglimbeni — Torino
   Redesign "nero-oro" (dai design comp del cliente): nero caldo, avorio,
   oro come filo e come inchiostro dei numerali. Sezioni numerate come le
   materie di un codice; display Newsreader (corsivo oro), UI Hanken Grotesk.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}

/* ------------------------------
   TOKENS
------------------------------ */
:root{
  --bg:#080706;
  --bg-1:#0d0b09;
  --bg-2:#141110;
  --bg-3:#1c1713;
  --ink:#f5f0e6;
  --ink-2:#c6bca7;
  --ink-3:#9c927a;
  --ink-faint:#6f6754;
  --gold:#c8a962;
  --gold-2:#e7d6a8;
  --gold-deep:#a8863f;
  --gold-ink:#1a1408;
  --line:rgba(200,169,98,.14);
  --line-2:rgba(245,240,230,.08);
  --gold-line:rgba(200,169,98,.34);
  --font-display:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --font-body:"Hanken Grotesk",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* alias legacy per consent.css */
  --accent:var(--gold);
  --accent-2:var(--gold-2);
  --accent-soft:rgba(200,169,98,.10);
  --text:var(--ink);
  --muted:var(--ink-2);
  --bg-soft:var(--bg-2);
  --radius:0;
  --shadow:none;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-weight:400;
  font-size:1.09rem;              /* ~17.5px mobile */
  line-height:1.7;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:rgba(200,169,98,.28);color:var(--ink)}

/* ------------------------------
   LAYOUT
------------------------------ */
.container{max-width:1280px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4rem)}
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}
section{padding-block:clamp(4.5rem,10vw,8rem)}
main{display:block}

/* ------------------------------
   TIPOGRAFIA
------------------------------ */
.h1,h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2.6rem,5.8vw,4.7rem);
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0 0 1.5rem;
  text-wrap:balance;
  color:var(--ink);
}
.h1.xl{font-size:clamp(2.7rem,6.4vw,5rem);line-height:1.02}
.h2,h2{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 1.2rem;
  text-wrap:balance;
  color:var(--ink);
}
h3{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.2;
  margin:0;
  color:var(--ink);
}
.h1 em,.h2 em,h1 em,h2 em,h3 em{
  font-style:italic;
  font-weight:inherit;
  color:var(--gold-2);
}
.lead{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1.18rem,1.9vw,1.42rem);
  line-height:1.6;
  color:var(--ink-2);
  max-width:56ch;
  margin:1.8rem 0 0;
}
.muted{color:var(--ink-2)}
.small{font-size:.95rem;line-height:1.6}
p{margin:0 0 1.15rem;max-width:72ch;text-wrap:pretty}
p:last-child{margin-bottom:0}

/* Lista generica (pagine legali) — trattino d'oro */
.list{list-style:none;display:grid;gap:.7rem}
.list li{position:relative;padding-left:1.7rem;color:var(--ink-2)}
.list li::before{content:"";position:absolute;left:0;top:.72em;width:.9rem;height:1px;background:var(--gold)}

/* Kicker con linea (hero, pagine legali) */
.eyebrow{
  display:flex;
  align-items:center;
  gap:1rem;
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:2rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.eyebrow.bare::before{display:none}
.eyebrow.bare{margin-bottom:.8rem;color:var(--gold);font-size:.72rem;letter-spacing:.22em}

/* Kicker di sezione numerato — il codice */
.skicker{
  display:flex;
  align-items:baseline;
  gap:1.25rem;
  margin-bottom:3rem;
}
.skicker .k-num{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.5rem;
  color:var(--gold);
  line-height:1;
}
.skicker .k-label{
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}
.skicker .k-rule{
  flex:1;
  height:1px;
  background:var(--gold-line);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease-out) .15s;
}
.skicker.in-view .k-rule,
html:not(.js) .skicker .k-rule{transform:scaleX(1)}
.skicker.center{justify-content:center}
.skicker.center .k-rule{display:none}

/* Testa di sezione */
.section-head{max-width:60ch;margin-bottom:3rem}
.section-head p{color:var(--ink-2)}
.section-head .h2{margin-bottom:1.2rem}
.section-head .lead{margin-top:0}

/* ------------------------------
   BOTTONI & LINK
------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.84rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1;
  color:var(--gold-ink);
  background:var(--gold);
  border:1px solid var(--gold);
  padding:1.05em 1.9em;
  min-height:3.2rem;
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
  white-space:nowrap;
}
.btn:hover,.btn:focus-visible{background:var(--gold-2);border-color:var(--gold-2);transform:translateY(-2px)}
.btn.ghost{background:none;border-color:var(--gold-line);color:var(--gold-2)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);transform:none}
.btn.sm{
  background:none;border-color:var(--line);color:var(--ink-2);
  min-height:2.7rem;padding:.7em 1.3em;font-size:.78rem;letter-spacing:.11em;
}
.btn.sm:hover,.btn.sm:focus-visible{border-color:var(--gold);color:var(--gold-2);background:none;transform:none}
.btn.sm.primary{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.btn.sm.primary:hover,.btn.sm.primary:focus-visible{background:var(--gold-2);border-color:var(--gold-2);color:var(--gold-ink)}

.tlink{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-2);
  padding-bottom:3px;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .45s var(--ease-out),color .3s;
}
.tlink:hover,.tlink:focus-visible{background-size:100% 1px;color:var(--gold-2)}
.tlink::after{content:"→";font-size:1em}

/* ------------------------------
   HEADER
------------------------------ */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--gold-ink);padding:.8rem 1.2rem;
  font-weight:600;font-size:.85rem;letter-spacing:.06em;
}
.skip-link:focus{left:.5rem;top:.5rem}

header.site{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s;
  padding-top:env(safe-area-inset-top);
}
header.site.scrolled{
  background:rgba(8,7,6,.82);
  border-bottom-color:var(--line-2);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:1.05rem;
}
.brand{display:flex;align-items:center;flex:none;transition:opacity .3s}
.brand:hover{opacity:.85}
.brand img{height:3.4rem;width:auto;transition:height .4s var(--ease)}
header.site.scrolled .brand img{height:2.9rem}

.menu{display:flex;align-items:center;gap:2.25rem}
.menu a{
  font-family:var(--font-body);
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
  transition:color .3s;
  white-space:nowrap;
  padding:.4rem 0;
}
.menu a:hover,.menu a.active{color:var(--gold-2)}
.menu a.btn{
  background:none;border:1px solid var(--gold-line);color:var(--gold-2);
  font-weight:600;font-size:.8rem;letter-spacing:.12em;
  padding:.7em 1.3em;min-height:0;
  transition:background .35s,color .35s;
}
.menu a.btn:hover,.menu a.btn:focus-visible,.menu a.btn.active{background:var(--gold);color:var(--gold-ink);transform:none}

/* Burger */
.nav-actions{display:none}
.burger{
  width:3rem;height:3rem;
  display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  margin-right:-.4rem;
}
.burger span{
  display:block;width:26px;height:1.5px;
  background:var(--gold-2);
  transition:transform .4s var(--ease),opacity .3s;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}

/* Menu mobile — overlay a tutto schermo */
.mobile-menu{
  display:none;
  position:fixed;
  inset:0;
  z-index:99;
  background:var(--bg);
  flex-direction:column;
  justify-content:center;
  gap:0;
  padding:calc(env(safe-area-inset-top) + 6rem) clamp(1.5rem,8vw,4rem) calc(env(safe-area-inset-bottom) + 2.5rem);
  overflow-y:auto;
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.8rem,7vw,2.2rem);
  color:var(--ink);
  padding:.85rem 0;
  opacity:0;
  transform:translateY(14px);
}
.mobile-menu a:last-of-type{font-style:italic;color:var(--gold-2)}
.mobile-menu.open a{animation:menuIn .6s var(--ease-out) forwards}
.mobile-menu.open a:nth-child(1){animation-delay:.05s}
.mobile-menu.open a:nth-child(2){animation-delay:.11s}
.mobile-menu.open a:nth-child(3){animation-delay:.17s}
.mobile-menu.open a:nth-child(4){animation-delay:.23s}
.mobile-menu.open a:nth-child(5){animation-delay:.29s}
.mobile-menu.open a:nth-child(6){animation-delay:.35s}
@keyframes menuIn{to{opacity:1;transform:none}}
.mobile-menu .mm-contact{
  margin-top:auto;
  padding-top:2.2rem;
  display:grid;
  gap:.5rem;
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink-2);
  opacity:1;transform:none;animation:none;
}
.mobile-menu .mm-contact a{
  font-family:var(--font-body);
  font-style:normal;
  font-size:1rem;
  padding:0;
  color:var(--gold);
  opacity:1;transform:none;animation:none;
}

@media (max-width:900px){
  .menu{display:none}
  .nav-actions{display:flex}
  .brand img,header.site.scrolled .brand img{height:2.9rem}
}

/* ------------------------------
   HERO
------------------------------ */
.hero,.page-hero{padding-top:clamp(8rem,14vh,11rem);padding-bottom:clamp(3rem,7vw,5rem)}
.hero .row,.page-hero .row{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(2.5rem,6vw,5.5rem);
  align-items:center;
}
.page-hero .row.solo{grid-template-columns:minmax(0,1fr)}
.hero-content{max-width:640px}
.hero-actions{
  display:flex;
  align-items:center;
  gap:1.6rem;
  flex-wrap:wrap;
  margin-top:2.4rem;
}
.key-points{display:grid;gap:.95rem;margin:2.4rem 0 0}
.key-points > div{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  align-items:start;
  color:var(--ink-2);
}
.key-points > div > span{
  width:22px;height:1px;
  background:var(--gold);
  margin-top:.85em;
  overflow:hidden;
  color:transparent;
}
.contact-line{
  display:flex;
  align-items:baseline;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:3rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line-2);
  font-size:.95rem;
  color:var(--ink-3);
}
.contact-line a{color:var(--ink-2);transition:color .3s;padding:.15rem 0}
.contact-line a:hover{color:var(--gold-2)}
.contact-line .sep{color:var(--gold)}

/* Ritratto — cornice d'oro sfalsata, bordi che sfumano nel nero */
.hero-visual{position:relative}
.portrait{position:relative;max-width:34rem;margin-inline:auto}
.portrait::before{
  content:"";
  position:absolute;
  top:20px;right:-18px;bottom:-18px;left:38px;
  border:1px solid var(--gold-line);
  pointer-events:none;
}
.portrait .p-media{
  position:relative;
  overflow:hidden;
  background:var(--bg-1);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 82%,transparent);
}
.portrait img{
  width:100%;height:auto;
  mix-blend-mode:lighten;
  filter:contrast(1.04);
}
.portrait .portrait-note{
  position:relative;
  margin-top:-2.5rem;
  margin-left:auto;
  max-width:290px;
  background:var(--bg-2);
  border-top:1px solid var(--gold-line);
  padding:1.4rem 1.5rem;
  display:grid;
  gap:.6rem;
}
.portrait .portrait-note .eyebrow{margin-bottom:0}
.portrait .portrait-note > span:last-child{
  font-family:var(--font-display);
  font-size:1.05rem;
  line-height:1.5;
  color:var(--ink-2);
}

/* Segnale di scroll */
.scroll-cue{
  margin-top:clamp(2rem,5vw,4rem);
  display:flex;
  align-items:center;
  gap:.8rem;
  font-family:var(--font-body);
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.scroll-cue::before{content:"↓";animation:cueBob 2.4s ease-in-out infinite}
@keyframes cueBob{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(7px);opacity:1}}

@media (max-width:900px){
  .hero .row,.page-hero .row{grid-template-columns:1fr;gap:3.5rem}
  .portrait{max-width:22rem;margin-inline:0}
  .scroll-cue{display:none}
  /* Home: la foto va subito sotto il titolo, senza la nota "Orientamento rapido".
     display:contents scioglie .hero-content così i suoi figli e la foto
     diventano fratelli ordinabili nella stessa colonna. */
  .hero .row{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero .hero-content{display:contents}
  .hero .eyebrow{order:1}
  .hero .h1{order:2}
  .hero .hero-visual{order:3;margin:2.2rem 0 .5rem}
  .hero .lead{order:4}
  .hero .key-points{order:5}
  .hero .hero-actions{order:6}
  .hero .contact-line{order:7}
  .hero .portrait-note{display:none}
}

/* ------------------------------
   BANDE FULL-BLEED
------------------------------ */
.band{position:relative;overflow:hidden;padding-block:clamp(6rem,14vw,10rem)}
.band-media{position:absolute;inset:0;z-index:0}
.band-media img{
  width:100%;height:100%;
  object-fit:cover;
  opacity:.15;
  filter:grayscale(1) contrast(1.15);
}
.band::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(120% 90% at 50% -10%,transparent,var(--bg) 76%),linear-gradient(180deg,var(--bg),transparent 22%,transparent 78%,var(--bg));
}
.band > .container{position:relative;z-index:2}
/* Banda sottile decorativa (solo foto) */
.band.thin{padding-block:0;height:clamp(16rem,32vw,26rem)}
.band.thin .band-media img{opacity:.2}
.band.thin::after{background:linear-gradient(180deg,var(--bg),transparent 30%,transparent 70%,var(--bg))}

/* Dichiarazione centrale in banda */
.statement{max-width:880px;margin-inline:auto;text-align:center}
.statement .h2{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.07;margin-inline:auto;max-width:18ch}
.statement .lead{margin-inline:auto}
.statement .hero-actions{justify-content:center}

/* ------------------------------
   RIGHE ETICHETTA/CONTENUTO (principi)
------------------------------ */
.deflist{display:grid}
.def{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(2rem,6vw,5rem);
  padding-block:clamp(3rem,6vw,4.5rem);
  border-top:1px solid var(--line-2);
}
.def:first-child{border-top:none;padding-top:0}
.def:last-child{padding-bottom:0}
.def .k-label{
  display:block;
  font-family:var(--font-body);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1rem;
}
.def .term{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(1.6rem,2.8vw,2.3rem);
  line-height:1.15;
  color:var(--ink);
  display:block;
}
.def .term em{font-style:italic;color:var(--gold-2)}
@media (max-width:900px){
  .def{grid-template-columns:1fr;gap:1.4rem}
}

/* Lista principi — trattino d'oro */
.principles-list{list-style:none;display:grid;gap:1.6rem}
.principles-list li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.1rem;
  align-items:start;
  color:var(--ink-2);
  padding:0;
}
.principles-list li::before{
  content:"";
  width:24px;height:1px;
  background:var(--gold);
  margin-top:.8em;
}

/* ------------------------------
   TIMELINE — anni in corsivo oro
------------------------------ */
.timeline{display:grid;max-width:860px}
.t-item{
  display:grid;
  grid-template-columns:7.5rem 1fr;
  gap:1.5rem;
  padding:1.35rem 0;
  border-top:1px solid var(--line-2);
  align-items:baseline;
  color:var(--ink-2);
}
.t-item:last-child{border-bottom:1px solid var(--line-2)}
.t-item strong{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:1.5rem;
  color:var(--gold);
  white-space:nowrap;
}
.t-item em{font-style:italic;color:var(--ink)}
@media (max-width:640px){
  .t-item{grid-template-columns:1fr;gap:.25rem}
}

/* ------------------------------
   ACCORDION (aree / FAQ)
------------------------------ */
.acc-list{border-bottom:1px solid var(--line-2)}
.idx summary{
  display:grid;
  grid-template-columns:3.2ch 1fr auto;
  gap:1.4rem;
  align-items:baseline;
  padding:1.6rem 0;
  border-top:1px solid var(--line-2);
}
.idx-num{
  font-family:var(--font-display);
  font-style:italic;
  color:var(--gold);
  font-size:1.15rem;
  line-height:1;
}
.idx-title h3{transition:color .3s}
.idx summary:hover h3{color:var(--gold-2)}
.idx-title p{
  color:var(--ink-3);
  margin:.5rem 0 0;
  font-size:1rem;
  max-width:64ch;
}
.idx-toggle{
  font-family:var(--font-display);
  font-size:1.6rem;
  color:var(--gold);
  line-height:1;
  transition:transform .35s var(--ease),color .3s;
}
.idx[open] .idx-toggle{transform:rotate(45deg)}
.idx-body{padding:0 0 1.8rem calc(3.2ch + 1.4rem)}
.idx-body p{color:var(--ink-2);max-width:64ch}
.idx-body ul{margin:0 0 1.4rem;padding-left:1.1rem;color:var(--ink-2);display:grid;gap:.4rem}
.idx-body .tlink{font-size:.78rem;background:none;border-bottom:1px solid var(--gold-line);padding-bottom:2px}
.idx-body .tlink::after{content:"→"}
@media (max-width:640px){
  .idx summary{grid-template-columns:2.4ch 1fr auto;gap:1rem}
  .idx-body{padding-left:calc(2.4ch + 1rem)}
}

/* Indice compatto home (2 colonne) */
.idx-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(2rem,6vw,5rem);
}
.idx-grid a{
  display:grid;
  grid-template-columns:3ch 1fr auto;
  gap:1.1rem;
  align-items:center;
  padding:1.3rem 0;
  border-top:1px solid var(--line-2);
  color:var(--ink);
  transition:padding-left .4s var(--ease),color .4s;
}
.idx-grid a:hover{padding-left:.7rem;color:var(--gold-2)}
.idx-grid a .idx-num{font-size:1.05rem}
.idx-grid a h3{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:400;color:inherit}
.idx-grid a .go{color:var(--gold);opacity:.55;transition:transform .35s var(--ease),opacity .3s}
.idx-grid a:hover .go{transform:translateX(.4rem);opacity:1}
@media (max-width:620px){
  .idx-grid{grid-template-columns:1fr}
  .idx-grid > a:last-child{border-bottom:1px solid var(--line-2)}
}
@media (min-width:621px){
  .idx-grid > a:nth-last-child(-n+2){border-bottom:1px solid var(--line-2)}
}

/* ------------------------------
   GRIGLIE A COLONNE CON FILO D'ORO (metodo / punti di forza)
------------------------------ */
.tri-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:clamp(1.5rem,4vw,3.5rem);
}
.tri-grid > div{padding:2rem 0;border-top:1px solid var(--gold-line)}
.tri-grid .num-big{
  font-family:var(--font-display);
  font-style:italic;
  font-size:2.6rem;
  color:var(--gold);
  line-height:1;
  margin-bottom:1rem;
}
.tri-grid .k-label{
  display:block;
  font-family:var(--font-body);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1rem;
}
.tri-grid h3{font-size:1.6rem;margin:0 0 .9rem}
.tri-grid p{color:var(--ink-2)}
@media (max-width:900px){
  .tri-grid{grid-template-columns:1fr}
}

/* Skills — due colonne di righe */
.skill-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(2rem,6vw,5rem);
}
.skill-grid > div{padding:1.7rem 0;border-top:1px solid var(--line-2)}
.skill-grid .term{
  font-family:var(--font-display);
  font-size:1.35rem;
  color:var(--ink);
  display:block;
  margin-bottom:.5rem;
}
.skill-grid p{color:var(--ink-2);max-width:44ch}
@media (max-width:620px){
  .skill-grid{grid-template-columns:1fr}
}

/* ------------------------------
   SLIDER ARTICOLI
------------------------------ */
.slider{position:relative}
.slider-head{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem;
  align-items:end;
  margin-bottom:3rem;
}
.slider-head .section-head{margin-bottom:0}
.slider-nav{display:flex;gap:.8rem}
.slider-btn{
  width:52px;height:52px;
  border:1px solid var(--gold-line);
  color:var(--gold-2);
  font-size:1.1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .35s,color .35s,opacity .3s;
}
.slider-btn:hover:not(:disabled),.slider-btn:focus-visible:not(:disabled){background:var(--gold);color:var(--gold-ink)}
.slider-btn:disabled{opacity:.3;cursor:default}
@media (max-width:640px){
  .slider-head{grid-template-columns:1fr}
}

.slider-track{
  display:flex;
  gap:1.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:.5rem;
}
.slider-track::-webkit-scrollbar{display:none}

.art-card{
  flex:0 0 min(360px,80vw);
  scroll-snap-align:start;
  background:var(--bg-2);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  transition:transform .5s var(--ease-out);
}
.art-card:hover{transform:translateY(-6px)}
.art-card figure{margin:0;overflow:hidden;aspect-ratio:16/10}
.art-card figure img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  transition:filter .6s;
}
.art-card:hover figure img{filter:none}
.art-card .art-body{
  padding:1.5rem 1.6rem 1.8rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  flex:1;
}
.art-card .meta{
  font-family:var(--font-body);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
}
.art-card h3{font-size:1.35rem;line-height:1.25;flex:1}
.art-card .small.muted{color:var(--ink-3);flex:initial}
.art-card .go{color:var(--gold);transition:transform .35s var(--ease)}
.art-card:hover .go{transform:translateX(.4rem)}

.slider-progress{
  margin-top:1.5rem;
  height:2px;
  background:var(--line-2);
  position:relative;
  overflow:hidden;
}
.slider-progress i{
  position:absolute;inset:0;
  background:var(--gold);
  transform:scaleX(.08);
  transform-origin:left;
  transition:transform .2s;
  display:block;
}

/* ------------------------------
   GALLERIA / MAPPA
------------------------------ */
.gallery{gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.gallery figure{margin:0;overflow:hidden;background:var(--bg)}
.gallery img{
  width:100%;height:100%;
  aspect-ratio:4/3.4;
  object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.8);
  transition:filter .7s var(--ease),transform 1.1s var(--ease);
}
.gallery figure:hover img{filter:none;transform:scale(1.035)}
.gallery figcaption{
  padding:.85rem 1rem 1rem;
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  background:var(--bg);
}
.map{border:1px solid var(--line);filter:grayscale(1) invert(.92) contrast(.88) brightness(.9) sepia(.14)}
.map iframe{display:block;border:0;width:100%}

/* ------------------------------
   CARD SU SUPERFICIE (info + legali)
------------------------------ */
.info-block,.card{
  background:var(--bg-2);
  border-top:1px solid var(--gold-line);
  padding:1.7rem 1.8rem;
  display:grid;
  gap:.6rem;
  align-content:start;
  margin-bottom:1.6rem;
}
.info-block:last-child{margin-bottom:0}
.info-block .eyebrow,.card .eyebrow{margin-bottom:.3rem}
.info-block p,.card p{margin:0;color:var(--ink-2)}
.info-block a,.card a{color:var(--ink);transition:color .3s}
.info-block a:hover,.card a:hover{color:var(--gold-2)}
.card{margin-bottom:0}
.card h3{font-size:1.35rem;margin-bottom:.3rem}
.card .muted{max-width:74ch;line-height:1.75}
.card.lift{transition:transform .4s var(--ease)}
.card.lift:hover{transform:translateY(-3px)}

/* ------------------------------
   BIO / LEGALI
------------------------------ */
.bio-grid{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}
.bio-grid .h2{position:sticky;top:7rem;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.1;margin:0}
@media (max-width:900px){
  .bio-grid{grid-template-columns:1fr}
  .bio-grid .h2{position:static}
}
.bio-body{display:grid;gap:1.5rem;color:var(--ink-2);max-width:66ch}
.bio-body p{color:var(--ink-2);margin:0}
.bio-body p:first-of-type::first-letter{
  font-family:var(--font-display);
  font-style:italic;
  font-size:3.4em;
  line-height:.82;
  float:left;
  padding:.08em .18em 0 0;
  color:var(--gold);
}
.bio-body a{color:var(--gold-2);border-bottom:1px solid var(--gold-line)}

.legal-body,.legal-doc{max-width:74ch}
.legal-body h2,.legal-doc h2{font-size:1.7rem;margin-top:2.6rem}
.legal-body h3,.legal-doc h3{font-size:1.3rem;margin-top:1.9rem;margin-bottom:.5rem}
.legal-body p,.legal-body li,.legal-doc p,.legal-doc li{color:var(--ink-2)}
.legal-body ul,.legal-body ol,.legal-doc ul,.legal-doc ol{padding-left:1.2rem;display:grid;gap:.5rem;margin-bottom:1.15rem}
.legal-body a,.legal-doc a{color:var(--gold-2);border-bottom:1px solid var(--gold-line)}

.legal-body table,.cookie-table{border-collapse:collapse;width:100%;font-size:.95rem}
.legal-body th,.legal-body td,.cookie-table th,.cookie-table td{
  border:1px solid var(--line-2);
  padding:.75rem .9rem;
  text-align:left;
  color:var(--ink-2);
  vertical-align:top;
}
.legal-body th,.cookie-table th{
  color:var(--gold);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
}
.cookie-table tbody tr:hover td{background:var(--bg-1)}

/* ------------------------------
   FORM
------------------------------ */
.form{display:grid;gap:1.8rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
.input{display:grid;gap:.5rem}
.input label{
  font-family:var(--font-body);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.input input,.input select,.input textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font:inherit;
  padding:.7rem 0;
  width:100%;
  border-radius:0;
  transition:border-color .3s;
}
.input textarea{min-height:8rem;resize:vertical}
.input select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;
  background-size:5px 5px;
  background-repeat:no-repeat;
}
.input select option{background:var(--bg-2);color:var(--ink)}
.input input::placeholder,.input textarea::placeholder{color:var(--ink-3)}
.input input:focus,.input select:focus,.input textarea:focus{outline:none;border-bottom-color:var(--gold)}
.consent{
  display:flex;gap:.7rem;align-items:flex-start;
  font-size:.95rem;color:var(--ink-2);line-height:1.55;
}
.consent input{accent-color:var(--gold);width:1.05rem;height:1.05rem;flex:none;margin-top:.3em}
.form-actions,.contact-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}

/* ------------------------------
   FOOTER
------------------------------ */
footer{border-top:1px solid var(--line-2);margin-top:2rem}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr .8fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  padding-block:clamp(3.5rem,7vw,5.5rem) 3rem;
}
.footer-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:1.7rem;
  color:var(--ink);
  margin:0 0 .4rem;
}
.footer-tag{
  font-family:var(--font-body);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.4rem;
}
.footer-contact{
  font-style:normal;
  display:grid;
  gap:.6rem;
  color:var(--ink-2);
  font-size:.98rem;
}
.footer-contact a{color:var(--ink-2);transition:color .3s;word-break:break-word}
.footer-contact a:hover{color:var(--gold-2)}
.footer-heading{
  font-family:var(--font-body);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 1.4rem;
}
.footer-nav ul,.footer-legal-info ul{
  list-style:none;
  display:grid;
  gap:.8rem;
  color:var(--ink-2);
  font-size:.95rem;
}
.footer-nav a{color:var(--ink-2);transition:color .3s}
.footer-nav a:hover{color:var(--gold-2)}
.footer-bottom{border-top:1px solid var(--line-2)}
.footer-bottom-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:space-between;
  align-items:center;
  padding-block:1.6rem;
  padding-bottom:max(1.6rem,env(safe-area-inset-bottom));
  font-size:.9rem;
  color:var(--ink-3);
}
.footer-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.footer-links a,.footer-links button{
  font-family:var(--font-body);
  font-size:.9rem;
  color:var(--ink-3);
  transition:color .3s;
  padding:.2rem 0;
}
.footer-links a:hover,.footer-links button:hover,.footer-links button:focus-visible{color:var(--gold-2)}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr;gap:2.6rem}
  .footer-bottom-row{flex-direction:column;align-items:flex-start}
  /* Griglie con colonne dichiarate inline (come nei design comp) */
  [data-r="formGrid"]{grid-template-columns:1fr !important}
}

/* ------------------------------
   REVEAL ALLO SCROLL
------------------------------ */
.js [data-animate]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.js [data-animate].in-view{opacity:1;transform:none}
.js [data-animate][data-delay="1"]{transition-delay:.09s}
.js [data-animate][data-delay="2"]{transition-delay:.18s}
.js [data-animate][data-delay="3"]{transition-delay:.27s}
.js [data-animate][data-delay="4"]{transition-delay:.36s}
.js [data-animate][data-delay="5"]{transition-delay:.45s}
/* Sequenza hero (data-hero) — stessa meccanica */
.js .hero [data-hero],.js .page-hero [data-hero]{opacity:0;transform:translateY(22px)}
.js .loaded .hero [data-hero],.js .loaded .page-hero [data-hero]{animation:heroIn 1s var(--ease-out) forwards}
.js .loaded [data-hero="1"]{animation-delay:.1s}
.js .loaded [data-hero="2"]{animation-delay:.22s}
.js .loaded [data-hero="3"]{animation-delay:.34s}
.js .loaded [data-hero="4"]{animation-delay:.46s}
.js .loaded [data-hero="5"]{animation-delay:.58s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* ------------------------------
   TESTO PIÙ GRANDE SU DESKTOP
------------------------------ */
@media (min-width:961px){
  body{font-size:1.19rem}                 /* ~19px */
  .idx-title p{font-size:1.05rem}
  .input input,.input select,.input textarea{font-size:1.12rem}
  .consent{font-size:1rem}
  .small{font-size:1.02rem}
}

/* ------------------------------
   ACCESSIBILITÀ / MOTION / STAMPA
------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js [data-animate],.js .hero [data-hero],.js .page-hero [data-hero]{opacity:1;transform:none}
  .skicker .k-rule{transform:none}
}
html:not(.js) [data-animate],
html:not(.js) [data-hero]{opacity:1;transform:none}
@media print{
  [data-animate],[data-hero]{opacity:1 !important;transform:none !important}
  .skicker .k-rule{transform:none !important}
  header.site,.scroll-cue,.slider-nav,.consent-banner{display:none !important}
}

/* Aree tocco comode su puntatore grossolano */
@media (pointer:coarse){
  .contact-line a,.footer-links a,.footer-links button,.footer-nav a{padding-block:.35rem}
  .menu a{padding-block:.6rem}
}