/* ============================================================
   STUDIO1286 — PREMIUM LAYER
   Caricato per ultimo: raffina e sovrascrive lo stile di base.
   ============================================================ */

:root{
	/* Scala ombre stratificate (morbide, diffuse, realistiche) */
	--sh-s:0 1px 2px rgba(15,15,15,.05), 0 10px 26px -8px rgba(15,15,15,.10);
	--sh-m:0 2px 6px rgba(15,15,15,.05), 0 30px 70px -18px rgba(15,15,15,.20);
	--sh-l:0 8px 22px -8px rgba(15,15,15,.10), 0 70px 140px -30px rgba(15,15,15,.30);
	--sh-dark:0 20px 60px -12px rgba(0,0,0,.45);
	/* Curve di movimento */
	--ease:cubic-bezier(.22,1,.36,1);
	--ease-io:cubic-bezier(.76,0,.24,1);
	--navh:84px;
}

/* ------------------------------------------------------------
   1. BASE — dettagli che alzano la percezione di qualità
------------------------------------------------------------ */
html{scroll-padding-top:calc(var(--navh) + 14px);}
body{font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:#0c0c0c;color:#fff;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:#f1f1f1;}
::-webkit-scrollbar-thumb{background:#c9c9c9;border-radius:99px;border:2px solid #f1f1f1;}
::-webkit-scrollbar-thumb:hover{background:var(--studio-primary);}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--studio-primary);outline-offset:3px;}

/* Il vecchio spinner di caricamento è superfluo (c'è l'apertura editoriale) */
.loader,#overlayer{display:none!important;}

/* ------------------------------------------------------------
   2. ATMOSFERA — griglia "da tavolo da disegno" + grana filmica
------------------------------------------------------------ */
.grain{
	position:fixed;inset:0;z-index:99990;pointer-events:none;opacity:.045;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .62 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size:140px 140px;
	animation:grainShift 7s steps(8) infinite;
}
@keyframes grainShift{
	0%{background-position:0 0}12.5%{background-position:-40px 30px}
	25%{background-position:30px -50px}37.5%{background-position:-60px -20px}
	50%{background-position:50px 60px}62.5%{background-position:-30px 70px}
	75%{background-position:70px -30px}87.5%{background-position:-50px -60px}
	100%{background-position:0 0}
}

.atm-host{position:relative;}
.atm-host>.container{position:relative;z-index:2;}
.section-atm{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.section-atm .atm-grid{
	position:absolute;inset:-64px;
	background-image:
		linear-gradient(rgba(17,17,17,.05) 1px,transparent 1px),
		linear-gradient(90deg,rgba(17,17,17,.05) 1px,transparent 1px);
	background-size:56px 56px;
	mask-image:radial-gradient(120% 120% at 50% 30%,#000 40%,transparent 100%);
	-webkit-mask-image:radial-gradient(120% 120% at 50% 30%,#000 40%,transparent 100%);
	animation:atmPan 110s linear infinite;
}
@keyframes atmPan{to{transform:translate3d(56px,56px,0)}}
.section-atm .atm-frame{
	position:absolute;border:1px solid rgba(17,17,17,.085);
	animation:atmFloat 30s ease-in-out infinite alternate;
}
.section-atm .atm-frame.f1{width:38vmin;height:38vmin;top:-9vmin;right:-7vmin;transform:rotate(9deg);}
.section-atm .atm-frame.f2{width:23vmin;height:23vmin;bottom:-7vmin;left:-4vmin;border-radius:50%;animation-duration:40s;animation-delay:-10s;}
@keyframes atmFloat{
	from{transform:translate3d(0,0,0) rotate(0deg)}
	to{transform:translate3d(0,-3.4vmin,0) rotate(6deg)}
}
.section-atm .atm-cross{position:absolute;width:16px;height:16px;opacity:.32;animation:atmPulse 9s ease-in-out infinite;}
.section-atm .atm-cross:before,.section-atm .atm-cross:after{content:"";position:absolute;background:rgba(17,17,17,.5);}
.section-atm .atm-cross:before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);}
.section-atm .atm-cross:after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%);}
.section-atm .atm-cross.c1{left:9%;top:22%;}
.section-atm .atm-cross.c2{right:14%;bottom:18%;animation-delay:-4.5s;}
@keyframes atmPulse{0%,100%{opacity:.14}50%{opacity:.4}}

/* ------------------------------------------------------------
   3. BARRA DI AVANZAMENTO SCROLL + TORNA SU
------------------------------------------------------------ */
.scroll-progress{
	position:fixed;top:0;left:0;width:100%;height:2px;z-index:9999;
	background:var(--studio-primary);transform:scaleX(0);transform-origin:0 50%;
	pointer-events:none;
}
.to-top{
	position:fixed;right:1.35rem;bottom:1.35rem;z-index:9998;
	width:46px;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
	background:#0c0c0c;color:#fff;display:flex;align-items:center;justify-content:center;
	box-shadow:var(--sh-m);opacity:0;visibility:hidden;transform:translateY(14px);
	transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s,background .3s;
}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--studio-primary);}
.to-top svg{width:16px;height:16px;}

/* ------------------------------------------------------------
   4. NAVIGAZIONE — fissa, con stato "scrolled" più solido
------------------------------------------------------------ */
.site-nav{
	position:fixed;top:0;left:0;right:0;
	background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));
	border-bottom:1px solid transparent;backdrop-filter:blur(0px);
	transition:background .5s ease,padding .4s var(--ease),box-shadow .5s ease,border-color .5s ease,backdrop-filter .5s ease;
}
.site-nav.is-scrolled{
	background:rgba(9,9,9,.86);
	backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
	border-bottom-color:rgba(255,255,255,.08);
	box-shadow:0 18px 50px -18px rgba(0,0,0,.5);
	padding-top:12px;padding-bottom:12px;
}
body.archive-page .site-nav{position:fixed;box-shadow:none;}
body.archive-page .site-nav.is-scrolled{
	background:rgba(255,255,255,.9)!important;
	backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
	border-bottom-color:var(--studio-line);
	box-shadow:0 20px 50px -22px rgba(15,15,15,.18);
}

/* ------------------------------------------------------------
   5. APERTURA — sipario che si alza invece della dissolvenza
------------------------------------------------------------ */
#studio-opening{
	transition:transform 1.05s var(--ease-io),visibility 0s linear 1.05s;
	will-change:transform;
}
body.opening-exit #studio-opening{transform:translateY(-101%);visibility:hidden;}
#studio-opening.hide{opacity:1;}/* neutralizza il vecchio comportamento */
.opening-kicker,.opening-title,.opening-sub{opacity:0;transform:translateY(22px);animation:openIn 1s var(--ease) forwards;}
.opening-title{animation-delay:.18s;}
.opening-sub{animation-delay:.4s;}
.opening-kicker{animation-delay:.05s;letter-spacing:.52em;}
.opening-box:before,.opening-box:after{transform:scaleX(0);animation:openLine 1.1s var(--ease) .25s forwards;}
.opening-box:after{animation-delay:.5s;}
@keyframes openIn{to{opacity:1;transform:none}}
@keyframes openLine{to{transform:scaleX(1)}}

/* ------------------------------------------------------------
   6. HERO — niente più rettangolo in basso a destra:
      titolo a sipario, descrizione libera, barra editoriale.
------------------------------------------------------------ */
.hero-premium{position:relative;overflow:hidden;background:#0c0c0c;}
.hero-media{
	position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
	animation:kenburns 34s ease-in-out infinite alternate;will-change:transform;
	filter:saturate(.98) contrast(1.04);
}
.hero-media-portrait{background-size:auto 100%;background-position:right center;background-repeat:no-repeat;animation:none;}
@keyframes kenburns{from{transform:scale(1.0)}to{transform:scale(1.09)}}
.hero-premium.overlay:before{
	background:
		linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.44) 44%,rgba(0,0,0,.12) 100%),
		linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 34%);
}
/* cornice sottile che richiama la schermata di apertura */
.hero-premium .hero-frame{
	position:absolute;inset:20px;z-index:2;pointer-events:none;
	border:1px solid rgba(255,255,255,.13);border-top-color:rgba(252,84,4,.4);
}
.hero-kicker{color:#ff7d3f;letter-spacing:.3em;}
.hero-title{margin-bottom:0;}
.hero-title .hl{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em;}
html.js .hero-title .hl>span{display:block;transform:translateY(112%);transition:transform 1.15s var(--ease);}
html.js .hero-in .hero-title .hl:nth-child(1)>span{transition-delay:.05s;}
html.js .hero-in .hero-title .hl:nth-child(2)>span{transition-delay:.17s;}
html.js .hero-in .hero-title .hl:nth-child(3)>span{transition-delay:.29s;}
html.js .hero-in .hero-title .hl>span{transform:translateY(0);}
html.js .hero-kicker,html.js .hero-sub{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
html.js .hero-in .hero-kicker{opacity:1;transform:none;}
html.js .hero-in .hero-sub{opacity:1;transform:none;transition-delay:.5s;}
.hero-sub{
	color:rgba(255,255,255,.82);font-size:1.02rem;line-height:1.9;max-width:480px;
	margin:2rem 0 0;padding-top:1.5rem;position:relative;
}
.hero-sub:before{content:"";position:absolute;left:0;top:0;width:64px;height:1px;background:var(--studio-primary);}
/* barra editoriale in fondo alla hero */
.hero-foot{
	position:absolute;left:0;right:0;bottom:0;z-index:3;
	display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
	padding:0 calc(20px + 1.7rem) 2.1rem;
}
html.js .hero-foot{opacity:0;transition:opacity 1s ease .8s;}
html.js .hero-in .hero-foot{opacity:1;}
.scroll-cue{display:inline-flex;flex-direction:column;align-items:center;gap:.7rem;text-decoration:none!important;}
.scroll-cue span{
	color:rgba(255,255,255,.72);font-family:'Montserrat',Arial,sans-serif;
	font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;font-weight:600;
}
.scroll-cue-line{position:relative;width:1px;height:52px;background:rgba(255,255,255,.22);overflow:hidden;}
.scroll-cue-line:after{
	content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;
	background:var(--studio-primary);animation:cueDrop 2.3s var(--ease) infinite;
}
@keyframes cueDrop{0%{top:-42%}62%,100%{top:104%}}
.scroll-cue:hover span{color:#fff;}
.hero-meta{text-align:right;display:flex;flex-direction:column;gap:.4rem;}
.hero-meta b{
	color:#fff;font-family:'Montserrat',Arial,sans-serif;font-weight:600;
	font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
}
.hero-meta small{
	color:rgba(255,255,255,.55);font-family:'Montserrat',Arial,sans-serif;
	font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
}

/* ------------------------------------------------------------
   7. MARQUEE — divisore editoriale a scorrimento lento
------------------------------------------------------------ */
.marquee{
	overflow:hidden;background:#fff;border-bottom:1px solid var(--studio-line);
	padding:1.35rem 0;position:relative;
}
.marquee-track{display:flex;width:max-content;animation:mqMove 48s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-track>div{display:flex;align-items:center;gap:3rem;padding-right:3rem;}
.marquee-track span{
	font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
	font-size:clamp(1.5rem,2.6vw,2.3rem);color:rgba(17,17,17,.2);white-space:nowrap;
}
.marquee-track i{width:7px;height:7px;background:var(--studio-primary);border-radius:99px;flex:0 0 auto;opacity:.7;}
@keyframes mqMove{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------
   8. REVELAZIONI — immagini a sipario + comparse morbide
------------------------------------------------------------ */
.reveal-img{position:relative;overflow:hidden;display:block;--curtain:#fff;}
.bg-light .reveal-img,.sec-2 .reveal-img{--curtain:var(--studio-light);}
html.js .reveal-img:before{
	content:"";position:absolute;inset:0;background:var(--curtain);z-index:4;
	transform:scaleY(1);transform-origin:bottom;transition:transform 1.05s var(--ease-io) .06s;
}
html.js .reveal-img>img{transform:scale(1.14);transition:transform 1.5s var(--ease);}
html.js .reveal-img.in:before{transform:scaleY(0);}
html.js .reveal-img.in>img{transform:scale(1);}

html.js .rv{
	opacity:0;transform:translateY(28px);filter:blur(6px);
	transition:opacity .95s var(--ease),transform .95s var(--ease),filter .95s var(--ease);
	transition-delay:var(--rvd,0s);
}
html.js .rv.in{opacity:1;transform:none;filter:none;}

/* ------------------------------------------------------------
   9. OMBRE E MICRO-INTERAZIONI DIFFUSE
------------------------------------------------------------ */
.img-r,.single-portfolio img{box-shadow:var(--sh-l);}
.service-card{
	box-shadow:var(--sh-s);
	transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .35s ease;
	position:relative;overflow:hidden;
}
.service-card:before{
	content:"";position:absolute;top:0;left:0;width:100%;height:3px;
	background:var(--studio-primary);transform:scaleX(.22);transform-origin:left;
	transition:transform .55s var(--ease);
}
.service-card{border-top:1px solid var(--studio-line);}
.service-card:hover{transform:translateY(-7px);box-shadow:var(--sh-m);border-color:rgba(15,15,15,.14);}
.service-card:hover:before{transform:scaleX(1);}

/* Pulsanti: riempimento a scorrimento */
.btn.btn-primary,.btn-primary{
	position:relative;overflow:hidden;isolation:isolate;
	background:transparent!important;
	transition:color .35s ease,border-color .35s ease,box-shadow .45s var(--ease),transform .45s var(--ease);
	box-shadow:0 14px 34px -14px rgba(0,0,0,.4);
}
.btn.btn-primary:before{content:"";position:absolute;inset:0;background:#0c0c0c;z-index:-2;}
.btn.btn-primary:after{
	content:"";position:absolute;inset:0;background:#fff;z-index:-1;
	transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease);
}
.btn.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(0,0,0,.35);}
.btn.btn-primary:hover:after{transform:scaleX(1);}

.more-2{position:relative;transition:color .3s ease;}
.more-2 .icon-arrow_forward{display:inline-block;transition:transform .35s var(--ease);}
.more-2:hover .icon-arrow_forward{transform:translateX(5px);}

/* ------------------------------------------------------------
   10. HOME — PROGETTI SELEZIONATI (didascalia sempre visibile)
------------------------------------------------------------ */
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem 2.4rem;}
.work-card{position:relative;}
.work-card:nth-child(3n){grid-column:1/-1;}
.work-cover{position:relative;display:block;overflow:hidden;background:#0c0c0c;box-shadow:var(--sh-m);}
.work-cover img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.95) contrast(1.03);}
.work-card:nth-child(3n) .work-cover img{aspect-ratio:21/9;}
/* velo scuro a vignetta: concentra lo sguardo sulla targhetta centrale */
.work-cover:after{
	content:"";position:absolute;inset:0;z-index:1;
	background:radial-gradient(115% 115% at 50% 48%,rgba(0,0,0,.16) 0%,rgba(0,0,0,.44) 62%,rgba(0,0,0,.62) 100%);
	opacity:0;transition:opacity .65s ease;
}
.work-card:hover .work-cover:after,
.work-card:focus-within .work-cover:after{opacity:1;}

/* zoom più deciso + calo di luminosità */
html.js .work-card .work-cover img{transition:transform 1.6s var(--ease),filter .7s ease;}
.work-card:hover .work-cover img,
.work-card:focus-within .work-cover img{
	transform:scale(1.085)!important;
	filter:brightness(.68) saturate(.92) contrast(1.05);
}

/* cornice-mirino: filo bianco interno + due angolari arancioni */
.work-cover .work-tick{
	position:absolute;inset:16px;z-index:4;pointer-events:none;
	border:1px solid rgba(255,255,255,.34);
	opacity:0;transform:scale(1.035);
	transition:opacity .55s ease,transform .8s var(--ease);
}
.work-cover .work-tick:before,
.work-cover .work-tick:after{
	content:"";position:absolute;width:20px;height:20px;
	border:0 solid var(--studio-primary);
	opacity:0;transition:opacity .4s ease,transform .6s var(--ease);
}
.work-cover .work-tick:before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px;transform:translate(-8px,-8px);}
.work-cover .work-tick:after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px;transform:translate(8px,8px);}
.work-card:hover .work-tick,
.work-card:focus-within .work-tick{opacity:1;transform:scale(1);}
.work-card:hover .work-tick:before,.work-card:hover .work-tick:after,
.work-card:focus-within .work-tick:before,.work-card:focus-within .work-tick:after{opacity:1;transform:translate(0,0);}

/* targhetta "Apri la galleria": vetro scuro, filo arancione, ingresso a strati */
.work-open{
	position:absolute;left:50%;top:50%;z-index:5;pointer-events:none;
	display:flex;flex-direction:column;align-items:center;gap:.55rem;
	padding:1.1rem 1.75rem;white-space:nowrap;text-align:center;
	background:rgba(6,6,6,.42);
	border:1px solid rgba(255,255,255,.24);
	box-shadow:0 26px 70px rgba(0,0,0,.4);
	backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);
	opacity:0;transform:translate(-50%,-50%) translateY(16px) scale(.965);
	transition:opacity .45s ease,transform .6s var(--ease),border-color .45s ease;
}
.work-open i{
	display:block;width:26px;height:2px;background:var(--studio-primary);
	transform:scaleX(0);transition:transform .5s var(--ease);
}
.work-open em{
	font-style:normal;color:#fff;font-family:'Montserrat',Arial,sans-serif;
	font-weight:600;font-size:.63rem;letter-spacing:.27em;text-transform:uppercase;
	opacity:0;transform:translateY(7px);transition:opacity .4s ease,transform .5s var(--ease);
}
.work-open small{
	color:rgba(255,255,255,.6);font-family:'Montserrat',Arial,sans-serif;
	font-weight:500;font-size:.55rem;letter-spacing:.32em;text-transform:uppercase;
	opacity:0;transform:translateY(7px);transition:opacity .4s ease,transform .5s var(--ease);
}
.work-card:hover .work-open,
.work-card:focus-within .work-open{
	opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1);
	border-color:rgba(255,255,255,.42);
}
.work-card:hover .work-open i,
.work-card:focus-within .work-open i{transform:scaleX(1);transition-delay:.1s;}
.work-card:hover .work-open em,
.work-card:focus-within .work-open em{opacity:1;transform:translateY(0);transition-delay:.14s;}
.work-card:hover .work-open small,
.work-card:focus-within .work-open small{opacity:1;transform:translateY(0);transition-delay:.2s;}
.work-meta{
	display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
	margin:1.15rem .05rem .4rem;
	font-family:'Montserrat',Arial,sans-serif;font-size:.62rem;font-weight:600;
	letter-spacing:.2em;text-transform:uppercase;color:var(--studio-gray);
}
.work-meta b{color:var(--studio-primary);font-weight:700;margin-right:.55rem;}
.work-title{
	font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.95rem;
	line-height:1.05;color:#000;margin:0;
}

/* ------------------------------------------------------------
   11. ARCHIVIO PROGETTI — spotlight "Ultimo progetto"
------------------------------------------------------------ */
.archive-title .hl{display:block;overflow:hidden;padding-bottom:.05em;margin-bottom:-.05em;}
html.js .archive-title .hl>span{display:block;transform:translateY(112%);transition:transform 1.05s var(--ease);}
html.js body.page-in .archive-title .hl:nth-child(2)>span{transition-delay:.14s;}
html.js body.page-in .archive-title .hl>span{transform:translateY(0);}
html.js .archive-lead{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .45s,transform .9s var(--ease) .45s;}
html.js body.page-in .archive-lead{opacity:1;transform:none;}

.latest-wrap{background:#fff;padding:4.4rem 0 1rem;}
.latest{
	display:grid;grid-template-columns:1.22fr 1fr;align-items:stretch;
	background:#fff;border:1px solid var(--studio-line);box-shadow:var(--sh-m);
	overflow:hidden;
}
.latest-media{position:relative;min-height:380px;}
.latest-media .reveal-img,.latest-media a{position:absolute;inset:0;}
.latest-media img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.96) contrast(1.04);}
html.js .latest-media img{transition:transform 1.6s var(--ease);}
.latest:hover .latest-media img{transform:scale(1.045)!important;}
.latest-body{padding:2.9rem 3rem;display:flex;flex-direction:column;justify-content:center;gap:1.05rem;position:relative;}
.latest-badge{
	display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
	background:var(--studio-primary);color:#fff;
	font-family:'Montserrat',Arial,sans-serif;font-weight:700;font-size:.6rem;
	letter-spacing:.24em;text-transform:uppercase;padding:.55rem .85rem;
	box-shadow:0 14px 30px -10px rgba(252,84,4,.55);
}
.latest-badge:before{content:"";width:7px;height:7px;border-radius:99px;background:#fff;animation:atmPulse 2.2s ease-in-out infinite;}
.latest-title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(2.1rem,3.4vw,3.3rem);line-height:1;color:#000;margin:0;}
.latest-meta{
	display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;
	font-family:'Montserrat',Arial,sans-serif;font-size:.62rem;font-weight:600;
	letter-spacing:.18em;text-transform:uppercase;color:var(--studio-gray);
}
.latest-meta b{color:#000;font-weight:700;}
.latest-desc{margin:0;font-size:.97rem;line-height:1.9;color:var(--studio-gray);}
.latest .btn{align-self:flex-start;margin-top:.6rem;}

/* Toolbar filtri più raffinata */
.archive-toolbar{top:var(--navh);box-shadow:0 18px 40px -26px rgba(15,15,15,.16);}
.archive-controls{gap:1.2rem;}
.archive-count{
	font-family:'Montserrat',Arial,sans-serif;font-size:.64rem;font-weight:700;
	letter-spacing:.2em;text-transform:uppercase;color:#000;white-space:nowrap;
}
.archive-count em{font-style:normal;color:var(--studio-primary);}
.archive-search{
	border:0;border-bottom:1px solid var(--studio-line);padding:.85rem .2rem .85rem 1.6rem;
	background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat left center;
	transition:border-color .3s ease;
}
.archive-search:focus{border-color:#000;box-shadow:none;}
.filter-btn{
	border:1px solid var(--studio-line);background:transparent;color:#000;
	transition:background .3s ease,color .3s ease,border-color .3s ease,transform .35s var(--ease);
}
.filter-btn:hover{border-color:#000;background:transparent;color:#000;transform:translateY(-1px);}
.filter-btn.active{background:#0c0c0c;border-color:#0c0c0c;color:#fff;}

/* Schede archivio */
.archive-grid{gap:2.4rem;}
.arch-card{
	background:#fff;border:1px solid var(--studio-line);box-shadow:var(--sh-s);
	display:flex;flex-direction:column;
	transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .35s ease;
}
.arch-card:hover{transform:translateY(-8px);box-shadow:var(--sh-m);border-color:rgba(15,15,15,.16);}
.arch-card.hidden{display:none;}
.arch-cover{position:relative;display:block;overflow:hidden;background:#0c0c0c;aspect-ratio:4/3;}
.arch-cover img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95) contrast(1.03);}
html.js .arch-cover img{transition:transform 1.4s var(--ease),filter .7s ease;}
.arch-card:hover .arch-cover img{transform:scale(1.05)!important;filter:brightness(.84) saturate(.96) contrast(1.04);}
.arch-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.42),rgba(0,0,0,0) 46%);z-index:1;}
.arch-index{
	position:absolute;top:.95rem;left:.95rem;z-index:2;
	background:rgba(8,8,8,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
	color:#fff;font-family:'Montserrat',Arial,sans-serif;font-weight:600;
	font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;padding:.42rem .6rem;
}
.arch-photos{
	position:absolute;right:.95rem;bottom:.85rem;z-index:2;color:#fff;
	font-family:'Montserrat',Arial,sans-serif;font-weight:600;font-size:.6rem;
	letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.45rem;
}
.arch-photos:before{content:"";width:22px;height:1px;background:var(--studio-primary);}
.arch-body{padding:1.55rem 1.55rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;flex:1;}
.arch-meta{
	display:flex;flex-wrap:wrap;gap:.35rem .9rem;
	font-family:'Montserrat',Arial,sans-serif;font-size:.6rem;font-weight:700;
	letter-spacing:.2em;text-transform:uppercase;color:var(--studio-gray);
}
.arch-meta b{color:var(--studio-primary);}
.arch-title{font-family:'Cormorant Garamond',serif;font-size:2rem;line-height:1.02;font-weight:500;color:#000;margin:0;}
.arch-desc{
	font-size:.94rem;line-height:1.85;color:var(--studio-gray);margin:0;
	display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.arch-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.5rem;}
.arch-strip a{position:relative;display:block;overflow:hidden;background:#f4f4f4;aspect-ratio:1/1;}
.arch-strip img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease);}
.arch-strip a:hover img{transform:scale(1.07);}
.arch-strip .more-count{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	background:rgba(8,8,8,.55);color:#fff;font-family:'Montserrat',Arial,sans-serif;
	font-weight:600;font-size:.72rem;letter-spacing:.14em;pointer-events:none;
}
.arch-open{
	margin-top:auto;padding-top:1rem;
	font-family:'Montserrat',Arial,sans-serif;font-weight:700;font-size:.64rem;
	letter-spacing:.2em;text-transform:uppercase;color:#000!important;text-decoration:none;
	display:inline-flex;align-items:center;gap:.5rem;
}
.arch-open .icon-arrow_forward{color:var(--studio-primary);transition:transform .35s var(--ease);}
.arch-open:hover .icon-arrow_forward{transform:translateX(5px);}

/* Stato vuoto ricerca */
.archive-empty{display:none;text-align:center;padding:4.5rem 1rem;border:1px dashed var(--studio-line);}
.archive-empty.show{display:block;}
.archive-empty strong{font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:500;color:#000;display:block;margin-bottom:.6rem;}
.archive-empty p{margin:0 0 1.4rem;}

/* ------------------------------------------------------------
   12. FOOTER — chiusura editoriale
------------------------------------------------------------ */
.legal-footer{padding:0;}
.footer-brand{
	padding:4.2rem 0 3rem;border-bottom:1px solid rgba(255,255,255,.1);
	display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.6rem;
	text-align:left;
}
.footer-wordmark{
	font-family:'Cormorant Garamond',serif;font-weight:500;color:#fff;
	font-size:clamp(2.4rem,5vw,4rem);line-height:.95;letter-spacing:.01em;
}
.footer-wordmark i{font-style:normal;color:var(--studio-primary);}
.footer-tag{
	font-family:'Montserrat',Arial,sans-serif;font-size:.62rem;font-weight:600;
	letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.55);
}
.footer-legal{padding:2rem 0 2.4rem;}

/* ------------------------------------------------------------
   13. RESPONSIVE
------------------------------------------------------------ */
@media(max-width:991px){
	:root{--navh:72px;}
	.hero-media-portrait{background-size:cover;background-position:center;}
	.hero-premium.overlay:before{background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.52)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 34%);}
	.hero-premium .hero-frame{display:none;}
	.hero-foot{padding:0 1.35rem 1.6rem;}
	.hero-meta{display:none;}
	.work-grid{grid-template-columns:1fr;gap:2.6rem;}
	.work-card:nth-child(3n) .work-cover img{aspect-ratio:4/3;}
	.latest{grid-template-columns:1fr;}
	.latest-media{min-height:0;aspect-ratio:4/3;}
	.latest-body{padding:2rem 1.6rem 2.2rem;}
	.archive-toolbar{top:0;}
	.section-atm .atm-frame,.section-atm .atm-cross{display:none;}
	.section-atm .atm-grid{animation:none;}
	.footer-brand{padding:3rem 0 2.2rem;}
}
@media(max-width:575px){
	.work-open{display:none;}
	.arch-strip{grid-template-columns:repeat(3,1fr);}
	.hero-sub{font-size:.95rem;}
}

/* ------------------------------------------------------------
   14. ACCESSIBILITÀ — riduzione del movimento
------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
	.grain,.hero-media,.marquee-track,.section-atm .atm-grid,.section-atm .atm-frame,
	.section-atm .atm-cross,.scroll-cue-line:after,.latest-badge:before,
	.opening-kicker,.opening-title,.opening-sub,.opening-box:before,.opening-box:after{
		animation:none!important;
	}
	.opening-kicker,.opening-title,.opening-sub{opacity:1;transform:none;}
	.opening-box:before,.opening-box:after{transform:none;}
	#studio-opening{transition:opacity .3s ease,visibility .3s ease;}
	body.opening-exit #studio-opening{transform:none;opacity:0;visibility:hidden;}
	html.js .rv,html.js .reveal-img:before,html.js .reveal-img>img,
	html.js .hero-title .hl>span,html.js .hero-kicker,html.js .hero-sub,
	html.js .archive-title .hl>span,html.js .archive-lead,html.js .hero-foot{
		transition:none!important;
	}
	html.js .rv{opacity:1;transform:none;filter:none;}
	html.js .reveal-img:before{display:none;}
	html.js .reveal-img>img{transform:none;}
	html.js .hero-title .hl>span,html.js .archive-title .hl>span{transform:none;}
	html.js .hero-kicker,html.js .hero-sub,html.js .archive-lead,html.js .hero-foot{opacity:1;transform:none;}
}

/* ==================================================================
   CORREZIONI — schede uniformi e cursore nel lightbox
   Questo file viene caricato per ultimo: le regole qui sotto
   prevalgono su quelle scritte dentro le pagine HTML.
   ================================================================== */

/* 1 — Tutte le schede della stessa altezza.
   Prima era "align-items:start": ogni scheda si fermava all'altezza
   del proprio contenuto, quindi un progetto con la descrizione più
   corta produceva un rettangolo più basso. */
.archive-grid{align-items:stretch;}

/* La descrizione occupa sempre 3 righe (il testo è già troncato a 3
   da -webkit-line-clamp): così le miniature partono alla stessa quota. */
.arch-desc{min-height:5.55em;}

/* Miniature e link ancorati in basso: restano allineati anche quando
   un titolo lungo va a capo. Se un progetto non ha miniature, resta
   valido il comportamento di prima e il link scende comunque in fondo. */
.arch-body:has(.arch-strip) .arch-strip{margin-top:auto;}
.arch-body:has(.arch-strip) .arch-open{margin-top:0;}

/* 2 — Cursore personalizzato sempre visibile e sempre arancione.

   Due problemi risolti qui.

   (a) Dentro la galleria a schermo intero spariva del tutto: il pallino
       ha z-index 999999, identico a quello del lightbox, e a parità di
       z-index vince chi viene dopo nel DOM — il lightbox, che viene
       aggiunto in fondo alla pagina. Lo alziamo sopra.

   (b) Sul bordo nero della galleria non c'era nulla, mentre sulla foto
       comparivano la lente o la manina di sistema: GLightbox mette regole
       proprie di cursore sull'immagine e sui pulsanti, che vincono
       sull'ereditarietà. Le azzeriamo, così dentro la galleria si vede
       solo il cursore dello studio, uguale ovunque.

   Tutto scoped a schermi ≥992px: sotto quella soglia il cursore
   personalizzato è già disattivato e non va toccato. */
@media (min-width:992px){
	body.cursor-enabled #cursor-dot,
	body.cursor-enabled #cursor-ring{z-index:1000001!important;}

	body.cursor-enabled.lightbox-open,
	body.cursor-enabled.lightbox-open *{cursor:none!important;}
}

/* Il pallino resta del colore dello studio anche in hover.
   Prima diventava nero e su una fotografia scura si perdeva. */
body.cursor-enabled.cursor-hover #cursor-dot{background:var(--studio-primary)!important;}

/* ==================================================================
   SEZIONI — tinta piena al posto del reticolo tecnico
   ==================================================================
   Il pattern a quadratini (più le cornici e le crocette che lo
   accompagnavano) è stato rimosso: dietro le fotografie disturbava.
   Al suo posto ogni sezione tiene il proprio colore pieno. */
.section-atm{display:none!important;}

/* Senza il reticolo, "Servizi" e la sezione grigia che la precede
   diventavano un unico blocco indistinto. Invertiamo i due fondi per
   ripristinare l'alternanza bianco / grigio chiaro lungo la pagina. */
#servizi.bg-light{background:var(--studio-white)!important;}
#progetti.sec-5{background:var(--studio-light)!important;}

/* ==================================================================
   TIPOGRAFIA — Century Gothic su tutto il sito
   ==================================================================
   Century Gothic è un carattere proprietario Monotype: è installato
   su Windows e sui Mac con Office, ma NON esiste come font web e non
   può essere caricato dal sito senza licenza. Quindi:

     1º  Century Gothic, se presente nel computer di chi guarda
     2º  Jost   — geometrico, stessa impostazione, con tutti i pesi
     3º  Questrial — molto vicino a Century Gothic, un solo peso
     4º  Futura / Trebuchet MS / Arial — ultime spiagge di sistema

   Su telefoni e tablet, dove Century Gothic non c'è mai, si vede
   Jost: stessa famiglia di forme, quindi il salto è impercettibile. */
:root{
	--font-studio:'Century Gothic','Jost','Questrial','Futura','Avant Garde','Trebuchet MS',Arial,sans-serif;
}

html, body, body *{font-family:var(--font-studio)!important;}
html::before, html::after,
body::before, body::after,
body *::before, body *::after,
body *::placeholder,
body *::marker,
body *::file-selector-button{font-family:var(--font-studio)!important;}

/* Le icone hanno un carattere proprio: se lo sovrascrivessimo
   diventerebbero lettere a caso. */
[class*="icon-"],
[class*="icon-"]::before,
[class*="icon-"]::after{font-family:'icomoon'!important;}

/* Century Gothic e Jost sono più larghi dei caratteri precedenti:
   senza questa correzione i titoli grandi occupano troppo spazio. */
.hero-title,.opening-title,.archive-title,.latest-title,
.arch-title,.work-title,.footer-wordmark,.section-title{letter-spacing:-.015em;}
.studio-logo-main{letter-spacing:.06em;}
.studio-logo-num{letter-spacing:0;}

/* Le etichette maiuscole molto spaziate sono la parte più a rischio con
   un carattere largo: su schermi stretti riduciamo la spaziatura, così
   non arrivano mai a filo del bordo. */
@media(max-width:575px){
	.hero-kicker{letter-spacing:.16em;}
	.arch-index,.arch-photos,.work-meta,.latest-meta,.hero-meta b,.hero-meta small{letter-spacing:.12em;}
}

/* ==================================================================
   CORPO DEL TESTO — leggermente più grande
   ==================================================================
   Il carattere geometrico ha un'impronta ottica più piccola dei
   precedenti a parità di corpo: senza questo ritocco il testo risulta
   minuto. Aumento di circa il 10%, mantenendo la gerarchia esistente. */
body{font-size:18px;}

/* occhielli arancioni (LO STUDIO, SERVIZI, IDENTITÀ PROGETTUALE) */
.studio-label{font-size:.74rem;}

/* titoli di sezione: il tema li fissa a 40px con una regola più
   specifica di .heading, quindi vanno ridichiarati qui */
.section .heading{font-size:44px;}
/* questo il tema lo schiacciava a 14px, come il testo corrente */
.sec-2 .heading{font-size:28px;line-height:1.14;}

/* testi descrittivi con corpo proprio, che non seguirebbero quello del body */
.hero-sub,.about-intro,.about-copy p,.latest-desc,.arch-desc,.service-card p{font-size:18px;}

@media(max-width:767px){
	.section .heading{font-size:34px;}
}

/* ==================================================================
   MARCHIO — immagine al posto del testo
   ==================================================================
   Il marchio è un lettering a stencil, non un carattere disponibile:
   viene usata la grafica originale. Due versioni, bianca e nera,
   scelte in base al fondo su cui poggiano. */
.logo-img{display:block;height:auto;width:auto;}

/* barra di navigazione */
.studio-logo-mark .logo-img{height:22px;width:auto;}
/* Le voci di menu hanno un riquadro più alto del logo: senza correzione
   il marchio resta 7px sopra il loro centro ottico. Uso lo scostamento
   relativo e non il margine, perché l'ancora porta la classe Bootstrap
   "m-0" che azzera i margini con !important. */
.studio-logo-mark{position:relative;top:10px;}
@media(max-width:991px){.studio-logo-mark{top:0;}}
.site-nav.is-scrolled .studio-logo-mark .logo-img{height:20px;transition:height .4s var(--ease);}

/* schermata di apertura: non ingrandiamo oltre la risoluzione della
   grafica, altrimenti sgrana. Meglio piccolo e nitido. */
.opening-title{font-size:0!important;line-height:0!important;margin-bottom:1.6rem!important;}
.opening-title .logo-img{width:min(82vw,620px);height:auto;margin:0 auto;}

/* piè di pagina, su fondo nero */
.footer-wordmark .logo-img{width:min(56vw,300px);height:auto;}
.legal-footer .logo-footer{width:min(60vw,240px);margin:0 auto .2rem;}

@media(max-width:575px){
	.studio-logo-mark .logo-img{height:18px;}
	.site-nav.is-scrolled .studio-logo-mark .logo-img{height:17px;}
	.footer-wordmark .logo-img{width:min(70vw,260px);}
}
.footer-legal .logo-footer-legale{width:min(50vw,190px);margin:0 auto .55rem;}

/* Titolo della hero più contenuto */
.hero-2 h1{font-size:clamp(3rem,7vw,6.6rem);line-height:1.04;}