/* Studio Spazio Vivo — foglio di stile
   Caratteri: Playfair Display e Mulish (SIL Open Font License), ospitati sul sito. */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/playfair-display-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/playfair-display-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/playfair-display-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/mulish-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/mulish-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Mulish";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/mulish-latin-700-normal.woff2") format("woff2")}
/* Layout: una sola pagina a fogli sovrapposti su un fondo di cerchi (logo) a profondità diverse.
   Hero → scelta del percorso → il percorso scelto si apre → chi sono → news → contatti. */
:root{
  --bg:#E2E7E5;          /* fondo delle slide del brand */
  --ring:#D2D9D6;        /* cerchi del logo */
  --surface:#FAF6F0;     /* bianco caldo delle slide */
  --card:#EFEEE7;
  --ink:#2B2C2B;
  --muted:#5A6563;       /* grigio del brand */
  --sage:#4A6563;        /* salvia del logo (#AABDBC), scurito per la leggibilità */
  --sage-soft:#DDE6E5;
  --line:#CDD5D1;
  --cta:#6E3A55;         /* prugna: solo per le CTA */
  --cta-ink:#FFFFFF;
  --shadow:45,60,60;
  --note-bg:#FBF0CF;
  --note-ink:#5B4A12;
  --display:"Playfair Display", Georgia, "Times New Roman", serif;
  --body:"Mulish", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141917;--ring:#1F2723;--surface:#1D2420;--card:#252E29;--ink:#E8ECE8;--muted:#A9B6AC;--sage:#B3C6C4;--sage-soft:#2A3534;--line:#34403A;--cta:#E0A9C4;--cta-ink:#2A1420;--shadow:0,0,0;--note-bg:#3A3217;--note-ink:#F1E3B0;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141917;--ring:#1F2723;--surface:#1D2420;--card:#252E29;--ink:#E8ECE8;--muted:#A9B6AC;--sage:#B3C6C4;--sage-soft:#2A3534;--line:#34403A;--cta:#E0A9C4;--cta-ink:#2A1420;--shadow:0,0,0;--note-bg:#3A3217;--note-ink:#F1E3B0;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;margin:0;overflow-x:hidden}
a{color:var(--sage)}
:focus-visible{outline:2px solid var(--cta);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.18;text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,4.8vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-size:1.22rem}
p{margin:0}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:20px}
.eyebrow{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sage);font-weight:700}
.lead{font-size:1.12rem;color:var(--muted);max-width:60ch}
.prose{display:grid;gap:1rem;max-width:66ch;min-width:0}
.ph{background:var(--note-bg);color:var(--note-ink);padding:0 .35em;border-radius:6px;font-size:.92em}

/* profondità: ombre a strati e fondo di cerchi */
.lift{box-shadow:0 1px 2px rgba(var(--shadow),.06),0 14px 30px -14px rgba(var(--shadow),.22),0 40px 80px -40px rgba(var(--shadow),.28)}
.depth{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.depth svg{position:absolute;color:var(--ring);will-change:transform}
.depth .d1{width:900px;right:-320px;top:-120px}
.depth .d2{width:620px;left:-300px;top:55vh;opacity:.8}
.depth .d3{width:420px;right:-120px;top:130vh;opacity:.7}
.page{position:relative;z-index:1}

/* testata fissa */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-block:.7rem}
header.site .bar{display:flex;align-items:center;gap:1rem;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:999px;padding:.45rem .5rem .45rem 1.1rem;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);margin-right:auto;min-width:0}
.brand svg{width:42px;height:28px;flex:none;color:var(--sage)}
.brand b{font-family:var(--display);font-size:1.08rem;font-weight:600;display:block;line-height:1.1}
.brand small{color:var(--muted);font-size:.76rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.main{display:flex;gap:.15rem;flex-wrap:wrap}
nav.main a{text-decoration:none;color:var(--ink);padding:.42rem .62rem;border-radius:999px;font-size:.92rem;white-space:nowrap}
nav.main a:hover{background:var(--sage-soft)}
nav.main a[aria-current="true"]{background:var(--sage-soft);color:var(--sage);font-weight:700}
.menu-btn{display:none;background:var(--card);border:0;border-radius:999px;padding:.5rem .95rem;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
@media (max-width:1180px){
  header.site .bar{position:relative}
  .menu-btn{display:block;flex:none}
  nav.main{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;background:var(--surface);border-radius:28px;padding:.6rem;box-shadow:0 18px 40px -16px rgba(var(--shadow),.35)}
  nav.main.open{display:flex}
  nav.main a{padding:.7rem 1rem}
}
@media (max-width:520px){header.site .bar .btn{display:none}}

.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--cta);color:var(--cta-ink);text-decoration:none;font:inherit;font-weight:700;padding:.8rem 1.35rem;border-radius:999px;border:0;cursor:pointer;font-size:.97rem;white-space:nowrap;box-shadow:0 10px 24px -10px color-mix(in srgb,var(--cta) 70%,transparent);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px color-mix(in srgb,var(--cta) 75%,transparent)}
.btn.small{padding:.6rem 1.1rem;font-size:.92rem}

/* fogli */
.sheet{background:var(--surface);border-radius:44px;padding:clamp(1.6rem,4.5vw,3.4rem)}
.stack{display:grid;gap:clamp(1.4rem,3vw,2.2rem);padding-block:1rem 3rem}
section{scroll-margin-top:96px}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr .9fr;gap:2.5rem;align-items:center;padding-block:clamp(1.5rem,5vw,3.5rem) 0}
.hero .text{display:grid;gap:1.2rem;min-width:0}
.claim{font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-size:.84rem}
.hero h1 em{display:block;font-weight:400;color:var(--sage);font-size:.56em;margin-top:.45rem}
.portrait{position:relative;justify-self:center;width:min(380px,100%);aspect-ratio:1}
.portrait img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;z-index:2}
.portrait .r1,.portrait .r2{position:absolute;border-radius:50%;border:3px solid var(--ring)}
.portrait .r1{inset:-9% -22% 12% 14%;z-index:1}
.portrait .r2{inset:16% 18% -14% -20%;z-index:1;border-color:color-mix(in srgb,var(--sage) 22%,transparent)}
.badge{position:absolute;z-index:3;left:-8%;bottom:6%;background:var(--surface);border-radius:999px;padding:.65rem 1.1rem;font-size:.88rem;font-weight:700;display:flex;gap:.55rem;align-items:center}
.badge i{width:.6rem;height:.6rem;border-radius:50%;background:var(--sage);display:block}
@media (max-width:780px){.hero{grid-template-columns:1fr}.portrait{width:min(270px,78%);order:-1;margin-top:1rem}.badge{left:auto;right:-6%}}

/* scelta del percorso */
.chooser{margin-top:clamp(2rem,5vw,3.5rem)}
.chooser .head{display:grid;gap:.5rem;margin-bottom:1.6rem}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.choice{all:unset;box-sizing:border-box;cursor:pointer;background:var(--card);border-radius:36px;padding:1.6rem 1.7rem;display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:center;border:2px solid transparent;transition:transform .25s,box-shadow .25s,border-color .25s,background .25s}
.choice:hover{transform:translateY(-3px)}
.choice:focus-visible{outline:2px solid var(--cta);outline-offset:4px}
.choice .ico{width:58px;height:58px;border-radius:50%;background:var(--surface);display:grid;place-items:center;color:var(--sage)}
.choice .ico svg{width:34px;height:34px}
.choice b{font-family:var(--display);font-size:1.3rem;font-weight:600;display:block;line-height:1.25}
.choice span.sub{color:var(--muted);font-size:.95rem;display:block;margin-top:.2rem}
.choice .chev{width:40px;height:40px;border-radius:50%;background:var(--surface);display:grid;place-items:center;color:var(--sage);transition:transform .3s}
.choice[aria-expanded="true"]{background:var(--sage-soft);border-color:var(--sage);box-shadow:0 18px 40px -18px rgba(var(--shadow),.35)}
.choice[aria-expanded="true"] .chev{transform:rotate(180deg)}
@media (max-width:780px){.choices{grid-template-columns:1fr}.choice{grid-template-columns:auto 1fr auto;padding:1.2rem 1.3rem}}
.hint{margin-top:1rem;color:var(--muted);font-size:.92rem;text-align:center}

/* pannelli */
.panel[hidden]{display:none}
.panel{animation:open .45s cubic-bezier(.2,.7,.2,1)}
@keyframes open{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}.choice,.btn,.card{transition:none}}
.panel .inner{display:grid;gap:clamp(2.2rem,5vw,3.4rem)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start}
.two>*{min-width:0}
@media (max-width:780px){.two{grid-template-columns:1fr}}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{background:var(--sage-soft);color:var(--sage);border-radius:999px;padding:.35rem .9rem;font-size:.9rem;font-weight:700}
.cards{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:1.1rem}
.card{background:var(--card);border-radius:30px;padding:1.5rem 1.6rem;display:grid;gap:.45rem;align-content:start;transition:transform .25s}
.card:hover{transform:translateY(-3px)}
.card p{color:var(--muted);font-size:.97rem}
.card.raised{background:var(--surface)}
@media (max-width:900px){.cards{--cols:2!important}}
@media (max-width:560px){.cards{--cols:1!important}}
.mode-card{background:var(--card);border-radius:34px;padding:1.8rem;display:grid;gap:.8rem}
.mode-card .pill{justify-self:start}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:s}
.steps li{background:var(--card);border-radius:30px;padding:1.4rem 1.5rem;display:grid;gap:.35rem;align-content:start}
.steps li::before{counter-increment:s;content:counter(s);width:2.3rem;height:2.3rem;border-radius:50%;background:var(--surface);color:var(--sage);display:grid;place-items:center;font-family:var(--display);font-size:1.15rem;margin-bottom:.3rem}
.steps p{color:var(--muted);font-size:.96rem}
@media (max-width:780px){.steps{grid-template-columns:1fr}}
.closing{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;background:var(--sage-soft);border-radius:36px;padding:1.5rem 1.8rem}
.closing h3{font-size:1.35rem}
.closing p{color:var(--muted)}
blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--ink);background:var(--card);border-radius:36px;padding:1.8rem 2rem;position:relative}
blockquote::before{content:"“";position:absolute;top:-.35em;left:.6em;font-size:4rem;color:var(--sage);line-height:1}
.chips3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.chips3 div{border-radius:26px;border:1.5px solid var(--line);padding:1.1rem 1.3rem}
.chips3 b{font-family:var(--display);font-size:1.1rem;display:block}
.chips3 span{color:var(--muted);font-size:.94rem}
@media (max-width:780px){.chips3{grid-template-columns:1fr}}

/* chi sono */
.switch{display:inline-flex;background:var(--card);border-radius:999px;padding:5px;gap:4px;flex-wrap:wrap;justify-self:start}
.switch button{border:0;background:transparent;font:inherit;font-weight:700;padding:.5rem 1.1rem;border-radius:999px;color:var(--muted);cursor:pointer;font-size:.93rem}
.switch button[aria-pressed="true"]{background:var(--surface);color:var(--sage);box-shadow:0 6px 16px -8px rgba(var(--shadow),.35)}
.credentials{display:grid;gap:.7rem;padding:0;margin:0;list-style:none}
.credentials li{display:grid;grid-template-columns:1.3rem 1fr;gap:.5rem}
.credentials li::before{content:"";width:.7rem;height:.7rem;border-radius:50%;border:2px solid var(--sage);margin-top:.5rem}
.ansonnia{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;background:var(--card);border-radius:32px;padding:1.4rem 1.7rem}
.ansonnia a{font-weight:700}

/* news */
.news{display:grid;gap:1rem}
.news article{display:grid;grid-template-columns:8rem 1fr;gap:1.2rem;background:var(--card);border-radius:30px;padding:1.3rem 1.6rem}
.news time{font-family:var(--display);color:var(--sage);font-size:1.05rem;line-height:1.3}
.news-link{display:inline-block;margin-top:.5rem;font-weight:700;color:var(--cta);text-decoration:none}
.news-link:hover{text-decoration:underline}
.news .ex{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;background:var(--note-bg);color:var(--note-ink);padding:.12rem .5rem;border-radius:999px;margin-left:.4rem;vertical-align:middle;font-family:var(--body)}
@media (max-width:560px){.news article{grid-template-columns:1fr;gap:.3rem}}

/* contatti */
.contact-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:1.6rem;align-items:start}
.contact-grid>*{min-width:0}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.who{display:grid;gap:.7rem;margin-bottom:1.3rem}
.who .switch button{padding:.65rem 1.3rem;font-size:1rem}
form.contact{display:grid;gap:1rem;background:var(--card);border-radius:34px;padding:1.7rem}
form.contact label{display:grid;gap:.3rem;font-weight:700;font-size:.92rem}
form.contact input,form.contact select,form.contact textarea{font:inherit;font-weight:400;padding:.75rem 1rem;border:1.5px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);width:100%}
form.contact textarea{border-radius:22px}
form.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
form.contact .check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.88rem;color:var(--muted)}
form.contact .check input{width:auto;margin-top:.3rem}
@media (max-width:560px){form.contact .row{grid-template-columns:1fr}}
.sent{background:var(--sage-soft);color:var(--sage);border-radius:18px;padding:.8rem 1rem;font-weight:700}
.empty{background:var(--card);border-radius:34px;padding:2rem;text-align:center;color:var(--muted)}
.side{display:grid;gap:1.1rem}
.side .box{background:var(--card);border-radius:34px;padding:1.6rem;display:grid;gap:.6rem}
.side dl{margin:0;display:grid;gap:.15rem}
.side dt{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:.6rem}
.side dd{margin:0}
.btn.calendly{justify-self:start}
.small-note{font-size:.84rem;color:var(--muted)}

footer.site{position:relative;z-index:1;padding-block:0 2.5rem;font-size:.88rem;color:var(--muted)}
footer.site .sheet{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;border-radius:40px;padding:2rem 2.2rem}
footer.site b{color:var(--ink)}
footer.site a{color:var(--muted)}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:.3rem}
@media (max-width:780px){footer.site .sheet{grid-template-columns:1fr}}

/* viste secondarie */
/* pagine secondarie */
.view .tree{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;background:var(--card);border-radius:26px;padding:1.3rem 1.5rem;overflow-x:auto;white-space:pre;line-height:1.75}
.view table{border-collapse:collapse;width:100%;font-size:.95rem}
.view th,.view td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.view th{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tablebox{overflow-x:auto}
.view .inner{display:grid;gap:2.2rem}
.legal h3{margin-top:.6rem}
.legal ul{margin:0;padding-left:1.2rem;display:grid;gap:.4rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
@media (max-width:520px){
  .brand small{white-space:normal;font-size:.7rem;line-height:1.25}
  nav.main a.menu-cta{display:inline-flex;justify-content:center;margin-top:.4rem;background:var(--cta);color:var(--cta-ink)}
}
.menu-cta{display:none!important}
@media (max-width:520px){nav.main a.menu-cta{display:inline-flex!important}}
/* aggiornamento ottobre: quattro passi, foto dello studio */
.steps.steps4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.steps.steps4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps.steps4{grid-template-columns:1fr}}
.studio-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:26px;margin-bottom:.4rem}
.side-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 60%;border-radius:34px}
/* logo */
.brand-mark{height:40px;width:auto;flex:none}
.brand-text{display:grid;gap:3px;min-width:0}
.brand-word{height:24px;width:auto;display:block}
.foot-logo{width:180px;height:auto;margin-bottom:.6rem}
@media (max-width:520px){.brand-mark{height:32px}.brand-word{height:19px}}
footer.site ul{align-content:start}