/* Villa Seravalle: scoped presentation within the existing portfolio. */
body:has(main>#hero) #progetti .proj { grid-template-columns: repeat(2,minmax(0,1fr)); }
#progetti .villa-project { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); background:var(--card); border-radius:24px; overflow:hidden; }
.villa-stage { display:block; position:relative; min-width:0; background:#e4e9df; aspect-ratio:1.45; color:#263d31; isolation:isolate; }
.villa-desktop { position:absolute; width:84%; top:12%; left:6%; border-radius:9px; overflow:hidden; background:#f8f5ed; box-shadow:0 18px 36px rgba(34,52,39,.16); transition:transform .3s ease; }
.villa-browser { height:24px; display:flex; align-items:center; gap:4px; padding:0 10px; background:#f4f2eb; }
.villa-browser>span { width:5px; height:5px; border-radius:50%; background:#a9b3a5; }
.villa-browser>b { margin:auto; padding-right:25px; font-size:8px; font-weight:500; color:#596454; }
.villa-desktop img { display:block; width:100%; height:auto; }
.villa-phone { position:absolute; width:26%; right:6%; bottom:9%; padding:5px; background:#28342c; border-radius:22px; box-shadow:0 14px 28px rgba(34,52,39,.23); transition:transform .3s ease; }
.villa-phone img { display:block; width:100%; height:auto; border-radius:17px; }
.villa-open { position:absolute; bottom:20px; left:22px; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#f8f6ef; color:#2e5140; }
.villa-open svg { width:20px; height:20px; }
.villa-stage:hover .villa-desktop { transform:translateY(-3px); }
.villa-stage:hover .villa-phone { transform:translateY(-6px); }
.villa-copy { padding:38px 34px; align-self:center; }
#progetti .villa-copy h3 { font-size:clamp(32px,3.2vw,44px); line-height:1.08; letter-spacing:-.035em; margin:0 0 10px; }
.villa-category { color:var(--accent); font-weight:650; font-size:13px; margin:0 0 22px; }
.villa-copy>p:not(.villa-category):not(.villa-note) { font-size:15px; line-height:1.75; color:var(--muted); margin:0 0 24px; }
.villa-scope { display:grid; gap:10px; margin:0 0 26px; font-size:12px; }
.villa-scope>div { display:grid; grid-template-columns:64px 1fr; gap:12px; }
.villa-scope dt { color:var(--muted); }
.villa-scope dd { margin:0; color:var(--ink); font-weight:550; }
.villa-cta { background:var(--accent); color:var(--accent-on); min-height:48px; padding:13px 20px; font-size:14px; }
.villa-cta svg { width:18px; height:18px; }
.villa-copy .villa-note { font-size:12px; line-height:1.65; color:#59665e; margin:18px 0 0; }
.villa-stage:focus-visible,.villa-cta:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.villa-stage:focus-visible { outline-offset:-4px; }
.villa-project::selection { background:#2e6b4e; color:#fff; }
@media(min-width:1600px) { body:has(main>#hero) #progetti .proj { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { #progetti .villa-project { grid-template-columns:1fr; } .villa-stage { min-height:0; aspect-ratio:1.65; } .villa-desktop { width:77%; top:12%; left:7%; } .villa-phone { width:24%; right:7%; bottom:7%; } .villa-copy { padding:32px; } }
@media(max-width:600px) { body:has(main>#hero) #progetti .proj { grid-template-columns:1fr; } #progetti .villa-project { border-radius:20px; } .villa-stage { aspect-ratio:1.07; } .villa-desktop { width:79%; top:14%; left:5%; border-radius:6px; } .villa-browser { height:18px; padding:0 7px; } .villa-browser>b { font-size:6px; } .villa-browser>span { width:4px; height:4px; } .villa-phone { width:41%; right:6%; bottom:7%; border-radius:19px; padding:4px; } .villa-phone img { border-radius:15px; } .villa-open { width:36px; height:36px; left:18px; bottom:18px; } .villa-copy { padding:26px 24px 28px; } .villa-category { margin-bottom:18px; } .villa-cta { width:100%; justify-content:center; } }
@media(prefers-reduced-motion:reduce) { .villa-desktop,.villa-phone { transition:none; } }