:root{
  --ink:#141311; --ink-2:#1d1b18; --ink-3:#262320;
  --cream:#EEE7D8; --cream-2:#E3DAC6; --cream-3:#D6CBB2;
  --red:#A93226; --red-2:#C0402F; --wood:#8B5E3C; --grey:#8E8778;
  --rule:rgba(238,231,216,.15); --rule-ink:rgba(20,19,17,.16);
  --e:cubic-bezier(.23,1,.32,1);
  --serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --wrap:1200px; --gut:16px;
}
@media (min-width:900px){ :root{ --gut:40px } }
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; hanging-punctuation:first last }
body{ margin:0; background:var(--ink); color:var(--cream); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden }
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }
h1,h2,h3,p{ margin:0 }
h1,h2,h3,.serif{ font-family:var(--serif); font-weight:400; letter-spacing:-.01em; text-wrap:balance }
h1,h2,h3{ line-height:1.02 }
em, i{ font-style:italic }
:focus-visible{ outline:2px solid var(--red-2); outline-offset:4px; border-radius:2px }
.skip{ position:absolute; left:-999px; top:8px; background:var(--red); color:var(--cream); padding:8px 14px; z-index:100 }
.skip:focus{ left:8px }
.wrap{ width:min(var(--wrap), 100% - var(--gut)*2); margin-inline:auto }
.kick{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); display:flex; gap:.9em; align-items:center }
.kick::before{ content:""; width:28px; height:1px; background:var(--red-2); flex:none }
.light .kick{ color:#5f5a4f }
[id]{ scroll-margin-top:24px }

/* preloader */
.pre{ position:fixed; inset:0; z-index:90; background:var(--ink); display:grid; place-items:center; transition:opacity .5s var(--e), visibility 0s .5s }
.pre span{ font-family:var(--serif); font-size:clamp(28px,4vw,44px); color:var(--cream); opacity:0; animation:preIn .6s var(--e) .05s forwards }
.pre i{ position:absolute; left:50%; bottom:22%; width:120px; height:1px; margin-left:-60px; background:var(--rule); overflow:hidden }
.pre i::after{ content:""; position:absolute; inset:0; background:var(--red-2); transform:translateX(-100%); animation:preBar .8s var(--e) .1s forwards }
.is-ready .pre{ opacity:0; visibility:hidden }
@keyframes preIn{ to{ opacity:1 } }
@keyframes preBar{ to{ transform:none } }

/* topbar */
.top{ position:absolute; inset:0 0 auto 0; z-index:20 }
.top .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px }
.brand{ font-family:var(--serif); font-size:1.45rem; letter-spacing:-.01em; display:flex; align-items:center; gap:.55em }
.brand b{ font-weight:400; font-style:italic }
.brand svg{ width:22px; height:22px }
.nav{ display:none; gap:2.1em; font-size:.92rem; font-weight:500 }
.nav a{ position:relative; padding:6px 0 }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--cream); transform:scaleX(0); transform-origin:right; transition:transform .45s var(--e) }
@media (hover:hover){ .nav a:hover::after{ transform:scaleX(1); transform-origin:left } }
.top .top-cta{ display:none }
@media (min-width:900px){ .nav{ display:flex } .top .top-cta{ display:inline-flex } }
@media (max-width:899px){ .top .wrap{ height:64px } }

/* buttons */
.btn{ --ox:50%; position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:.6em; min-height:48px; padding:0 22px; border-radius:999px; font-weight:500; font-size:.95rem; letter-spacing:.005em; border:1px solid var(--cream); color:var(--cream); transition:transform .16s var(--e), color .3s var(--e), border-color .3s var(--e); white-space:nowrap }
.btn::before{ content:""; position:absolute; inset:-1px; z-index:-1; background:var(--cream); border-radius:inherit; transform:scaleX(0); transform-origin:var(--ox) 50%; transition:transform .45s var(--e) }
.btn:active{ transform:scale(.97) }
@media (hover:hover){ .btn:hover{ color:var(--ink) } .btn:hover::before{ transform:scaleX(1) } }
.btn.red{ background:var(--red); border-color:var(--red) }
.btn.red::before{ background:var(--cream) }
.btn svg{ width:18px; height:18px; flex:none }
.light .btn{ border-color:var(--ink); color:var(--ink) }
.light .btn::before{ background:var(--ink) }
@media (hover:hover){ .light .btn:hover{ color:var(--cream) } }
.link{ position:relative; display:inline-block; padding-bottom:2px; font-weight:500 }
.link::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(1); transform-origin:left; transition:transform .45s var(--e) }
@media (hover:hover){ .link:hover::after{ transform:scaleX(0); transform-origin:right } }

/* rulers */
.rulers{ position:relative }
.rulers::before{ content:""; position:absolute; inset:0; margin-inline:auto; width:min(var(--wrap), 100% - var(--gut)*2); background-image:linear-gradient(to right, var(--rule) 1px, transparent 1px); background-size:25% 100%; background-position:0 0; pointer-events:none }
.rulers::after{ content:""; position:absolute; top:0; bottom:0; right:calc((100% - min(var(--wrap), 100% - var(--gut)*2))/2); width:1px; background:var(--rule); pointer-events:none }
@media (max-width:899px){ .rulers::before{ background-size:50% 100% } }

/* hero */
.hero{ min-height:100svh; display:grid; align-content:end; padding:110px 0 clamp(40px,7vh,80px); position:relative; overflow:hidden }
.hero .wrap{ position:relative; z-index:2; display:grid; gap:36px }
@media (min-width:900px){ .hero .wrap{ grid-template-columns:7fr 5fr; align-items:end; gap:56px } .hero{ padding-top:120px } .hero-ph{ aspect-ratio:1/1 } .hero-ph img{ object-position:58% 50% } }
.hero-t{ display:grid; gap:26px }
.h1{ font-size:clamp(44px, 8.2vw, 104px); line-height:.98; letter-spacing:-.02em }
.h1 .lm{ display:block; overflow:hidden; padding-top:.16em; margin-top:-.16em }
.h1 .lm > span{ display:block; transform:translateY(110%); transition:transform 1s var(--e) }
.h1 .lm:nth-child(2) > span{ transition-delay:.08s }
.is-ready .h1 .lm > span{ transform:none }
.h1 em{ color:var(--cream-3) }
.hero-sub{ max-width:52ch; font-size:1.05rem; color:var(--cream-2) }
.hero-q{ font-family:var(--serif); font-style:italic; font-size:1.25rem; line-height:1.3; color:var(--grey); max-width:36ch }
.hero-q small{ display:block; font-family:var(--sans); font-style:normal; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-top:.6em; color:var(--grey) }
.hero-meta{ font-size:.85rem; color:var(--grey); display:flex; flex-wrap:wrap; gap:.4em 1.4em }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px }
.fade{ opacity:0; transform:translateY(14px); transition:opacity .9s var(--e), transform .9s var(--e) }
.is-ready .fade{ opacity:1; transform:none }
.is-ready .fade:nth-of-type(1){ transition-delay:.25s } .is-ready .fade:nth-of-type(2){ transition-delay:.35s } .is-ready .fade:nth-of-type(3){ transition-delay:.45s } .is-ready .fade:nth-of-type(4){ transition-delay:.55s }
.hero-ph{ position:relative; aspect-ratio:5/4; border:1px solid var(--rule); padding:10px; background:var(--ink-2) }
.hero-ph .clip{ overflow:hidden; height:100%; clip-path:inset(100% 0 0 0); transition:clip-path 1.2s var(--e) .35s }
.is-ready .hero-ph .clip{ clip-path:inset(0 0 0 0) }
.hero-ph img{ width:100%; height:100%; object-fit:cover; object-position:60% 50%; transform:scale(1.08); transition:transform 1.6s var(--e) .35s }
.is-ready .hero-ph img{ transform:none }
.hero-ph figcaption{ position:absolute; left:10px; right:10px; bottom:-30px; font-size:.78rem; color:var(--grey); letter-spacing:.02em }
@supports (animation-timeline: view()){
  .hero-ph img{ animation:drift linear both; animation-timeline:view(); animation-range:exit 0% exit 100% }
  @keyframes drift{ to{ transform:translateY(-8%) } }
}
.cue{ position:absolute; left:calc((100% - min(var(--wrap), 100% - var(--gut)*2))/2); bottom:0; width:1px; height:64px; background:var(--rule); overflow:hidden; z-index:3 }
.cue::after{ content:""; position:absolute; left:0; top:-40%; width:100%; height:40%; background:var(--cream); animation:cue 2.4s var(--e) infinite }
@keyframes cue{ to{ top:110% } }
@media (max-width:899px){ .hero{ padding-top:90px } .hero-ph{ margin-bottom:34px } .cue{ display:none } }

/* sections */
.sec{ padding:clamp(72px,11vw,150px) 0; position:relative }
.light{ background:var(--cream); color:var(--ink) }
.light .rulers::before, .light .rulers::after{ background:var(--rule-ink) }
.light .rulers::before{ background-image:linear-gradient(to right, var(--rule-ink) 1px, transparent 1px) }
.h2{ font-size:clamp(36px,5.6vw,72px); letter-spacing:-.02em }
.h3{ font-size:clamp(26px,3.4vw,40px) }
.rv{ opacity:0; transform:translateY(22px); filter:blur(5px); transition:opacity .9s var(--e), transform .9s var(--e), filter .9s var(--e) }
.rv.in{ opacity:1; transform:none; filter:none }
.rv.d1{ transition-delay:.1s } .rv.d2{ transition-delay:.2s } .rv.d3{ transition-delay:.3s }

/* approccio */
.appr .wrap{ display:grid; gap:40px }
@media (min-width:900px){ .appr .wrap{ grid-template-columns:7fr 4fr; column-gap:8.33%; align-items:start } }
.appr .lead{ font-family:var(--serif); font-size:clamp(24px,3vw,38px); line-height:1.22; text-wrap:pretty; color:var(--cream) }
.appr .lead + .lead{ margin-top:1em; color:var(--cream-2) }
.appr .lead em{ color:var(--cream-3) }
.aside{ border-top:1px solid var(--rule); padding-top:20px; display:grid; gap:0 }
.aside h3{ font-size:.78rem; font-family:var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:14px }
.aside ul{ list-style:none; margin:0; padding:0 }
.aside li{ padding:13px 0; border-bottom:1px solid var(--rule); font-size:.95rem; color:var(--cream-2); display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:baseline }
.aside li b{ font-family:var(--serif); font-weight:400; font-size:1.25rem; color:var(--cream) }

/* band coppia */
.band{ position:relative; min-height:62vh; display:grid; place-items:center; overflow:hidden; isolation:isolate }
.band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; opacity:.5; filter:saturate(.75) contrast(1.05) }
.band::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, var(--ink) 0%, rgba(20,19,17,.2) 30%, rgba(20,19,17,.25) 70%, var(--ink) 100%) }
.band p{ font-family:var(--serif); font-size:clamp(30px,4.6vw,60px); line-height:1.1; text-align:center; max-width:22ch; padding:0 var(--gut); text-wrap:balance }
.band p em{ color:var(--cream-3) }
@supports (animation-timeline: view()){
  .band img{ animation:bandpar linear both; animation-timeline:view(); transform:scale(1.15) }
  @keyframes bandpar{ from{ object-position:50% 30% } to{ object-position:50% 70% } }
}

/* il sistema */
.sys .wrap{ display:grid; gap:40px }
@media (min-width:900px){ .sys .wrap{ grid-template-columns:5fr 7fr; gap:6%; align-items:start } .sys .txt{ position:sticky; top:80px } }
.sys .txt{ display:grid; gap:22px; align-content:start }
.sys .big{ font-family:var(--serif); font-size:clamp(30px,3.8vw,50px); line-height:1.08 }
.sys .big em{ color:var(--cream-3) }
.sys .his{ color:var(--cream-2); max-width:44ch; text-wrap:pretty }
.sys .how{ font-size:.9rem; color:var(--grey); display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center }
.sys .how button{ font-size:.85rem; font-weight:500; color:var(--cream); border-bottom:1px solid var(--rule); padding-bottom:2px; transition:border-color .3s var(--e) }
@media (hover:hover){ .sys .how button:hover{ border-color:var(--cream) } }
.stage{ position:relative; border:1px solid var(--rule); background:var(--ink-2); overflow:hidden; aspect-ratio:600/640; max-height:78vh; margin:0 auto; width:100% }
.stage svg{ width:100%; height:100%; touch-action:none; display:block; user-select:none; -webkit-user-select:none }
.stage .edge{ stroke:rgba(238,231,216,.55); stroke-width:1.4; stroke-linecap:round; transition:none }
.stage .n{ cursor:grab; outline:none }
.stage .n.drag{ cursor:grabbing }
.stage .n circle.hit{ fill:transparent }
.stage .n circle.body{ fill:var(--ink-3); stroke:var(--cream); stroke-width:1.2; transition:stroke-width .2s var(--e) }
.stage .n.main circle.body{ fill:var(--red); stroke:var(--red) }
.stage .n text{ font-family:var(--sans); font-size:16px; font-weight:500; fill:var(--cream); text-anchor:middle; pointer-events:none }
.stage .n.main text{ fill:var(--cream) }
.stage .n:focus-visible circle.body{ stroke-width:3 }
@media (hover:hover){ .stage .n:hover circle.body{ stroke-width:2.4 } }
.stage .grid{ stroke:var(--rule); stroke-width:1 }
.stage .note{ position:absolute; left:14px; bottom:12px; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--grey); pointer-events:none }

/* con chi lavoro */
.chi-h{ display:grid; gap:18px; margin-bottom:clamp(30px,5vw,56px) }
.chi{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule) }
.chi li{ border-bottom:1px solid var(--rule) }
.chi-b{ width:100%; display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px; padding:clamp(14px,2.4vw,26px) 0; text-align:left; font-family:var(--serif); font-size:clamp(32px,6vw,76px); line-height:1; letter-spacing:-.02em; transition:color .35s var(--e), padding-left .5s var(--e) }
.chi-b .x{ width:44px; height:44px; border:1px solid var(--rule); border-radius:999px; display:grid; place-items:center; transition:transform .5s var(--e), background-color .3s var(--e), border-color .3s var(--e) }
.chi-b .x svg{ width:18px; height:18px }
.chi-p{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--e) }
.chi-p > div{ overflow:hidden; min-height:0 }
.chi-p p{ max-width:56ch; color:var(--cream-2); padding:0 0 26px; font-size:1.02rem; text-wrap:pretty }
.chi li.open .chi-p{ grid-template-rows:1fr }
.chi li.open .chi-b{ color:var(--cream) }
.chi li.open .x{ transform:rotate(45deg); background:var(--cream); border-color:var(--cream); color:var(--ink) }
@media (hover:hover){
  .chi li:not(.open) .chi-b:hover{ padding-left:14px }
  .chi li:not(.open) .chi-b:hover .x{ border-color:var(--cream) }
}
@media (min-width:900px){ .chi-b{ padding-right:12px } }

/* aree */
.aree-h{ display:grid; gap:18px; margin-bottom:clamp(30px,5vw,60px) }
.aree{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(12,1fr); gap:0 clamp(16px,2.5vw,32px) }
.aree li{ grid-column:span 12; border-top:1px solid var(--rule-ink); padding:22px 0 30px; display:grid; gap:8px; align-content:start }
.aree li b{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.8vw,36px); line-height:1.05; letter-spacing:-.015em }
.aree li span{ font-size:.92rem; color:#5f5a4f; max-width:34ch; text-wrap:pretty }
@media (min-width:700px){
  .aree li{ grid-column:span 6 }
  .aree li.s5{ grid-column:span 5 } .aree li.s4{ grid-column:span 4 } .aree li.s3{ grid-column:span 3 } .aree li.s7{ grid-column:span 7 } .aree li.s8{ grid-column:span 8 }
}
@media (min-width:700px) and (max-width:1023px){ .aree li.s3{ grid-column:span 6 } .aree li.s5{ grid-column:span 6 } .aree li.s4{ grid-column:span 6 } .aree li.s7{ grid-column:span 6 } .aree li.s8{ grid-column:span 12 } }
.aree li.tint{ background:var(--cream-2); padding-inline:22px; margin-top:-1px; border-top-color:transparent }

/* tribunale */
.trib .wrap{ display:grid; gap:48px }
@media (min-width:900px){ .trib .wrap{ grid-template-columns:5fr 6fr; column-gap:8.33%; align-items:start } .trib .stick{ position:sticky; top:90px } }
.trib .stick{ display:grid; gap:22px }
.trib .stick p{ color:var(--cream-2); max-width:44ch; text-wrap:pretty }
.trib .stick .num{ font-family:var(--serif); font-size:clamp(80px,13vw,160px); line-height:.9; letter-spacing:-.03em; color:var(--cream-3) }
.trib .stick .num small{ display:block; font-family:var(--sans); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-top:14px }
.paths{ display:grid; gap:clamp(48px,7vw,90px) }
.path h3, .path .h3{ font-size:clamp(24px,2.8vw,34px); margin-bottom:26px; text-wrap:balance }
.path h3 em, .path .h3 em{ color:var(--cream-3) }
.steps{ list-style:none; margin:0; padding:0; position:relative; padding-left:34px }
.steps::before{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:var(--rule) }
.steps::after{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:1px; background:var(--red-2); transform-origin:top; transform:scaleY(0) }
@supports (animation-timeline: view()){
  .steps::after{ animation:draw linear both; animation-timeline:view(); animation-range:entry 30% cover 55% }
  @keyframes draw{ to{ transform:scaleY(1) } }
}
@media (prefers-reduced-motion:reduce){ .steps::after{ transform:scaleY(1); animation:none } }
.steps li{ position:relative; padding:0 0 30px }
.steps li::before{ content:""; position:absolute; left:-34px; top:9px; width:13px; height:13px; border-radius:999px; background:var(--ink); border:1px solid var(--cream-3); transition:background-color .4s var(--e), border-color .4s var(--e) }
.steps li.in::before{ background:var(--red-2); border-color:var(--red-2) }
.steps li b{ display:block; font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.4vw,28px); line-height:1.1; margin-bottom:8px }
.steps li p{ color:var(--cream-2); max-width:46ch; text-wrap:pretty; font-size:1rem }
.steps li:last-child{ padding-bottom:0 }

/* aziende e gruppi */
.due{ background:var(--ink-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule) }
.due .wrap{ display:grid; gap:40px }
@media (min-width:900px){ .due .wrap{ grid-template-columns:1fr 1fr; gap:0 } .due .col + .col{ border-left:1px solid var(--rule); padding-left:6% } .due .col:first-child{ padding-right:6% } }
.due .col{ display:grid; gap:20px; align-content:start }
.due .col p{ color:var(--cream-2); max-width:46ch; text-wrap:pretty }
.due .col .h3{ font-size:clamp(30px,3.6vw,46px) }
@media (max-width:899px){ .due .col + .col{ border-top:1px solid var(--rule); padding-top:36px } }

/* studi */
.studi-h{ display:grid; gap:18px; margin-bottom:clamp(30px,5vw,56px) }
.studi-h p{ color:#5f5a4f; max-width:50ch }
.sedi{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-ink) }
.sedi li{ border-bottom:1px solid var(--rule-ink); padding:clamp(18px,3vw,30px) 0; display:grid; gap:14px }
@media (min-width:900px){ .sedi li{ grid-template-columns:4fr 5fr 3fr; align-items:baseline; gap:24px } }
.sedi .city{ font-family:var(--serif); font-size:clamp(40px,6.5vw,84px); line-height:1; letter-spacing:-.025em; display:flex; align-items:baseline; gap:.35em }
.sedi .city small{ font-family:var(--sans); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:#5f5a4f }
.sedi .addr{ color:#3a362f; font-size:1.02rem }
.sedi .addr b{ font-weight:600; display:block; color:var(--ink) }
.sedi .go{ justify-self:start }
@media (min-width:900px){ .sedi .go{ justify-self:end } }
.strip{ margin-top:clamp(40px,6vw,72px); display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; margin-inline:calc(50% - 50vw); padding-inline:max(var(--gut), calc(50vw - var(--wrap)/2)); scroll-padding-inline:max(var(--gut), calc(50vw - var(--wrap)/2)) }
.strip::-webkit-scrollbar{ display:none }
.strip figure{ margin:0; flex:0 0 auto; width:min(78vw, 520px); scroll-snap-align:start; display:grid; gap:12px }
.strip .ph{ aspect-ratio:5/4; overflow:hidden; background:var(--cream-2) }
.strip img{ width:100%; height:100%; object-fit:cover; clip-path:inset(0 0 100% 0); transition:clip-path 1s var(--e), transform 1.4s var(--e); transform:scale(1.06) }
.strip figure.in img{ clip-path:inset(0 0 0 0); transform:none }
.strip figcaption{ font-size:.85rem; color:#5f5a4f }
.strip figure:nth-child(2) img{ transition-delay:.12s } .strip figure:nth-child(3) img{ transition-delay:.24s }

/* scritti */
.scr .wrap{ display:grid; gap:36px }
@media (min-width:900px){ .scr .wrap{ grid-template-columns:4fr 8fr; column-gap:8.33%; align-items:start } }
.scr ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule) }
.scr li{ border-bottom:1px solid var(--rule); padding:26px 0; display:grid; gap:10px }
.scr li b{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.8vw,34px); line-height:1.1 }
.scr li p{ color:var(--cream-2); max-width:60ch; text-wrap:pretty }
.scr li small{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey) }

/* contatti */
.cta{ text-align:left }
.cta .wrap{ display:grid; gap:28px }
.cta .tel{ font-family:var(--serif); font-size:clamp(46px,9.5vw,132px); line-height:.95; letter-spacing:-.03em; display:inline-block; position:relative; width:fit-content; max-width:100% }
.cta .tel::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--red-2); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--e) }
@media (hover:hover){ .cta .tel:hover::after{ transform:scaleX(1) } }
.cta .row{ display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; color:var(--cream-2) }
.cta .row .btn{ margin-right:6px }
.cta .note{ color:var(--grey); max-width:52ch; text-wrap:pretty }

/* footer */
.foot{ padding:clamp(56px,8vw,96px) 0 calc(28px + 84px); background:var(--cream); color:var(--ink) }
@media (min-width:900px){ .foot{ padding-bottom:calc(36px + 76px) } }
.foot .wm{ font-family:var(--serif); font-size:clamp(52px,11vw,150px); line-height:.9; letter-spacing:-.035em; margin-bottom:clamp(30px,5vw,60px) }
.foot .wm em{ color:var(--wood) }
.foot .cols{ display:grid; gap:28px; border-top:1px solid var(--rule-ink); padding-top:30px }
@media (min-width:700px){ .foot .cols{ grid-template-columns:repeat(3,1fr) } }
.foot h3{ font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#5f5a4f; margin-bottom:12px }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:.95rem }
.foot .legal{ margin-top:40px; border-top:1px solid var(--rule-ink); padding-top:18px; font-size:.8rem; color:#5f5a4f; display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between }
.foot .legal a{ text-decoration:underline; text-underline-offset:3px }

/* dock */
.dock{ position:fixed; left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom)); z-index:30; display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; padding:6px; background:rgba(29,27,24,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--rule); border-radius:999px; transform:translateY(120%); transition:transform .6s var(--e) }
.is-ready .dock{ transform:none; transition-delay:.5s }
.dock a{ display:flex; align-items:center; justify-content:center; gap:.45em; min-height:46px; border-radius:999px; font-size:.86rem; font-weight:500; transition:transform .16s var(--e), background-color .3s var(--e) }
.dock a:active{ transform:scale(.96) }
.dock a.main{ background:var(--red); color:var(--cream) }
.dock a svg{ width:17px; height:17px }
@media (min-width:900px){ .dock{ left:auto; right:24px; bottom:24px; grid-template-columns:auto auto auto; width:auto; opacity:0; pointer-events:none; transition:opacity .4s var(--e), transform .6s var(--e) } .dock a{ padding:0 18px } .show-dock .dock{ opacity:1; pointer-events:auto } }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .pre{ display:none }
  .h1 .lm > span, .fade, .rv, .hero-ph .clip, .hero-ph img, .strip img, .dock{ transition:none !important; transform:none !important; opacity:1 !important; clip-path:none !important; filter:none !important; animation:none !important }
  .cue{ display:none }
  .band img{ animation:none }
  .btn::before, .chi-p, .link::after, .nav a::after{ transition:none }
}

/* ─────────── sito a più pagine ─────────── */

/* testata di pagina */
.phead{ padding:clamp(104px,15vh,160px) 0 clamp(40px,6.5vw,80px); position:relative; border-bottom:1px solid var(--rule) }
.phead .wrap{ position:relative; z-index:2; display:grid; gap:26px }
@media (min-width:900px){ .phead .wrap{ grid-template-columns:7fr 4fr; column-gap:8.33%; align-items:end } }
.phead .phead-t{ display:grid; gap:20px }
.phead .h1{ font-size:clamp(38px,6.4vw,84px); line-height:1 }
.phead .intro{ color:var(--cream-2); max-width:46ch; text-wrap:pretty; font-size:1.02rem }
.crumb{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); display:flex; flex-wrap:wrap; gap:.55em; align-items:center }
.crumb a{ border-bottom:1px solid transparent; padding-bottom:1px; transition:border-color .3s var(--e) }
@media (hover:hover){ .crumb a:hover{ border-color:var(--grey) } }

/* menu mobile */
.burger{ display:inline-flex; align-items:center; gap:.6em; font-size:.85rem; font-weight:500; padding:0 14px; min-height:44px; border:1px solid var(--rule); border-radius:999px }
.burger i{ display:block; position:relative; width:16px; height:9px }
.burger i::before, .burger i::after{ content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform .4s var(--e) }
.burger i::before{ top:0 } .burger i::after{ bottom:0 }
.menu-open .burger i::before{ transform:translateY(3.75px) rotate(45deg) }
.menu-open .burger i::after{ transform:translateY(-3.75px) rotate(-45deg) }
@media (min-width:900px){ .burger{ display:none } }
.top{ z-index:50 }
.menu-open{ overflow:hidden }
.menu-open .top{ position:fixed }
.menu{ position:fixed; inset:0; z-index:40; background:var(--ink); overflow-y:auto; overscroll-behavior:contain; padding:86px var(--gut) 34px; display:grid; align-content:start; animation:menuIn .35s var(--e) }
.menu[hidden]{ display:none }
@keyframes menuIn{ from{ opacity:0 } }
.menu ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule) }
.menu li{ border-bottom:1px solid var(--rule) }
.menu li a{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0; font-family:var(--serif); font-size:clamp(28px,7.4vw,38px); line-height:1.1; min-height:56px }
.menu li a[aria-current]{ color:var(--cream-3) }
.menu li a[aria-current]::after{ content:""; width:7px; height:7px; border-radius:999px; background:var(--red-2); flex:none }
.menu .mc{ margin-top:30px; display:grid; gap:10px; font-size:.95rem; color:var(--cream-2) }
.menu .mc b{ display:block; font-family:var(--sans); font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:6px }
@media (prefers-reduced-motion:reduce){ .menu{ animation:none } }

/* rimandi alle pagine */
.idx{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule) }
.idx li{ border-bottom:1px solid var(--rule) }
.idx a{ display:grid; grid-template-columns:1fr auto; align-items:center; column-gap:24px; row-gap:9px; padding:clamp(18px,2.6vw,30px) 0; transition:padding-left .5s var(--e) }
.idx .t{ grid-column:1; grid-row:1; font-family:var(--serif); font-size:clamp(30px,5vw,58px); line-height:1.02; letter-spacing:-.02em }
.idx .d{ grid-column:1; grid-row:2; color:var(--grey); font-size:.95rem; max-width:46ch; text-wrap:pretty }
.idx .x{ grid-column:2; grid-row:1 / span 2; width:44px; height:44px; flex:none; border:1px solid var(--rule); border-radius:999px; display:grid; place-items:center; transition:transform .5s var(--e), background-color .3s var(--e), border-color .3s var(--e), color .3s var(--e) }
@media (min-width:900px){
  .idx a{ grid-template-columns:5fr 6fr auto; column-gap:6% }
  .idx .d{ grid-column:2; grid-row:1; align-self:center }
  .idx .x{ grid-column:3; grid-row:1 }
}
.idx .x svg{ width:18px; height:18px }
@media (hover:hover){ .idx a:hover{ padding-left:14px } .idx a:hover .x{ background:var(--cream); border-color:var(--cream); color:var(--ink); transform:translateX(4px) } }

/* continua */
.contsec{ padding:0 0 clamp(60px,9vw,110px) }
.due:has(+ .contsec){ border-bottom:0 }
.cont{ display:grid; border-top:1px solid var(--rule) }
.cont a{ display:grid; gap:9px; align-content:start; padding:clamp(24px,4vw,40px) 0; transition:padding-left .5s var(--e) }
.cont a + a{ border-top:1px solid var(--rule) }
.cont .k{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey) }
.cont .t{ font-family:var(--serif); font-size:clamp(26px,3.2vw,38px); line-height:1.05; letter-spacing:-.015em }
.cont .d{ color:var(--cream-2); font-size:.95rem; max-width:40ch; text-wrap:pretty }
@media (min-width:700px){
  .cont{ grid-template-columns:1fr 1fr }
  .cont a + a{ border-top:0; border-left:1px solid var(--rule); padding-left:6% }
  .cont a:first-child{ padding-right:6% }
}
@media (hover:hover){ .cont a:hover{ padding-left:14px } .cont a + a:hover{ padding-left:calc(6% + 14px) } }

/* invito breve al contatto */
.mini{ display:grid; gap:18px; margin-top:clamp(34px,5vw,60px); border-top:1px solid var(--rule); padding-top:clamp(24px,3.6vw,38px) }
.mini p{ color:var(--cream-2); max-width:52ch; text-wrap:pretty }
.mini .row{ display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center }
.light .mini{ border-top-color:var(--rule-ink) }
.light .mini p{ color:#5f5a4f }

/* 404 */
.nf{ min-height:72svh; align-content:center }
.nf .links{ display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:6px }

/* privacy */
.legalpage{ padding:clamp(40px,6vw,70px) 0 clamp(70px,10vw,120px) }
.legalpage .wrap{ width:min(760px, 100% - var(--gut)*2) }
.legalpage h2{ font-size:clamp(24px,3vw,32px); margin:clamp(30px,4vw,44px) 0 10px }
.legalpage p{ color:var(--cream-2); margin-bottom:14px; text-wrap:pretty }
.legalpage a:not(.btn){ text-decoration:underline; text-underline-offset:3px }

/* dettagli minori */
.aside .more{ margin-top:20px; justify-self:start }
.nf .intro{ display:grid; gap:18px; align-self:end }
.nf .intro p{ color:var(--cream-2) }
.menu .mc a.link{ justify-self:start }