/* ============================================================
   Manu Theme — projects.css  (v7.5)
   Pagine progetto art-directed, renderizzate dentro la modale.
   TUTTO è prefissato .pj- e annidato sotto .pj-modal:
   nessuna regola può "uscire" verso la home, e nessuna regola
   della home può "entrare" qui. Isolamento totale = cross-browser.
   ============================================================ */

/* La modale diventa il contenitore a pagina intera della scheda ricca.
   .project-modal porta già: position:fixed; inset:0; overflow-y:auto;
   opacity 0→1; pointer-events. Qui togliamo solo il padding base. */
.project-modal.pj-modal{
	padding:0;
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
	/* token base (sovrascrivibili per layout) — base allineata alla home (#060608) */
	--bg:#060608; --ink:#f4f6f8; --muted:#8a949f; --faint:#465058;
	--accent:#48e0ff; --accent2:#48e0ff; --warm:#ffcaa0;
	--hair:rgba(255,255,255,.10);
	--pj-ease:cubic-bezier(.2,.7,.2,1);
	--pad-x:clamp(20px,5.5vw,120px);
	background:var(--bg);
	color:var(--ink);
	font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
.pj-modal *{ box-sizing:border-box; }
.pj-modal a{ color:inherit; text-decoration:none; }
.pj-modal img{ display:block; max-width:100%; }
.pj-modal ::selection{ background:rgba(72,224,255,.25); color:#fff; }
.pj-modal button{ font:inherit; }

/* ---- atmosfera di sfondo (fissa al viewport mentre il contenuto scrolla) ---- */
.pj-scene{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* Eco dell'aurora della home: stessa luce, stesso angolo (alto-destra) su OGNI
   scheda → forte coerenza visiva tra home e pagine progetto, senza toccare lo
   sfondo del sito. Sta sopra il fondo del layout ma sotto gli elementi d'arte. */
.pj-scene::before{
	content:""; position:absolute; inset:0; pointer-events:none;
	background-image:
		repeating-linear-gradient(100deg,#000 0%,#000 7%,transparent 10%,transparent 12%,#000 16%),
		repeating-linear-gradient(100deg,#60a5fa 10%,#e879f9 15%,#60a5fa 20%,#5eead4 25%,#60a5fa 30%);
	background-size:300%,200%;
	filter:blur(11px) opacity(26%) saturate(170%);
	-webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 36%,transparent 82%);
	mask-image:radial-gradient(ellipse at 100% 0%,#000 36%,transparent 82%);
}
.pj-grain{ position:absolute; inset:0; opacity:.04; mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pj-vignette{ position:absolute; inset:0; box-shadow:inset 0 0 220px 60px rgba(0,0,0,.55); }
.pj-cglow{ position:fixed; width:520px; height:520px; border-radius:50%; z-index:1; pointer-events:none; opacity:0;
	background:radial-gradient(closest-side,rgba(72,224,255,.10),transparent 70%);
	transform:translate(-50%,-50%); transition:opacity .4s; }

/* (la vecchia top-bar della scheda è stata rimossa: ora resta visibile la
   navbar del sito, che fa da contesto e da uscita verso le sezioni della home) */

.pj-main{ position:relative; z-index:2; }
.pj-wrap{ max-width:1240px; margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x); }
.pj-blk{ padding:clamp(56px,9.5vh,112px) 0; }

.pj-kicker{ font-size:clamp(10px,1vw,12px); letter-spacing:.32em; text-transform:uppercase; color:var(--accent);
	display:flex; align-items:center; gap:1em; margin-bottom:16px; }
.pj-kicker::before{ content:""; width:clamp(20px,3vw,46px); height:1px; background:var(--accent); box-shadow:0 0 10px var(--accent); }

.pj-modal h1,.pj-modal h2,.pj-modal h3{ font-family:"Bricolage Grotesque","Manrope",sans-serif; letter-spacing:-.025em; line-height:.94; font-weight:800; overflow-wrap:break-word; word-break:break-word; }
.pj-modal h1{ font-size:clamp(2.6rem,8vw,6rem); }
.pj-modal h2{ font-size:clamp(1.8rem,4.2vw,3.3rem); }
.pj-grad{ background:linear-gradient(96deg,#fff,var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

.pj-lede{ font-weight:500; font-size:clamp(16px,2.1vw,22px); line-height:1.45; color:#d6dde4; max-width:34ch; }
.pj-lede b{ color:#fff; font-weight:700; }
.pj-subline{ font-size:clamp(13.5px,1.5vw,16px); color:var(--muted); line-height:1.5; max-width:46ch; }
.pj-pull{ font-family:"Bricolage Grotesque","Manrope",sans-serif; font-weight:800; font-size:clamp(1.5rem,3.4vw,2.6rem); letter-spacing:-.02em; line-height:1.08; color:#fff; }
.pj-pull em{ font-style:normal; color:var(--accent); }

.pj-flow{ display:flex; flex-direction:column; gap:2px; margin-top:22px; }
.pj-flow .pj-ln{ display:grid; grid-template-columns:minmax(120px,30%) 1fr; gap:16px; align-items:baseline; padding:15px 0; border-top:1px solid var(--hair); }
.pj-flow .pj-ln:last-child{ border-bottom:1px solid var(--hair); }
.pj-flow .pj-ln .pj-t{ font-family:"Bricolage Grotesque","Manrope",sans-serif; font-weight:700; font-size:clamp(14px,1.5vw,17px); color:#fff; }
.pj-flow .pj-ln .pj-d{ font-size:clamp(13px,1.3vw,15px); color:var(--muted); }
@media (max-width:560px){ .pj-flow .pj-ln{ grid-template-columns:1fr; gap:3px; padding:13px 0; } }

.pj-frame{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--hair);
	box-shadow:0 40px 120px -50px rgba(0,0,0,.9); background:#070a0c; }
.pj-frame img{ width:100%; height:100%; object-fit:cover; }
/* banda video responsive 16:9 (YouTube/Vimeo) */
.pj-videoband{ max-width:1240px; margin:0 auto; padding:clamp(8px,2vh,28px) var(--pad-x) 0; }
.pj-video{ position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--hair); background:#000; box-shadow:0 40px 120px -50px rgba(0,0,0,.9); }
.pj-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.pj-tick{ position:absolute; width:14px; height:14px; border:1.5px solid var(--accent); opacity:.6; z-index:3; }
.pj-tick.tl{ top:10px; left:10px; border-right:0; border-bottom:0; }
.pj-tick.tr{ top:10px; right:10px; border-left:0; border-bottom:0; }
.pj-tick.bl{ bottom:10px; left:10px; border-right:0; border-top:0; }
.pj-tick.br{ bottom:10px; right:10px; border-left:0; border-top:0; }
.pj-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--faint); font-size:11px;
	letter-spacing:.16em; text-transform:uppercase; text-align:center; padding:0 18px;
	background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 15px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 15px); }

.pj-btn{ display:inline-flex; align-items:center; gap:.6em; padding:14px 26px; border-radius:10px; font-weight:600; font-size:14px;
	letter-spacing:.02em; transition:.3s var(--pj-ease); cursor:pointer; border:1px solid transparent; background:none; color:inherit; }
.pj-btn .pj-arr{ transition:transform .3s var(--pj-ease); }
.pj-btn:hover .pj-arr{ transform:translateX(4px); }
.pj-btn.primary{ background:var(--accent); color:#04141a; }
.pj-btn.primary:hover,.pj-btn.primary:focus-visible{ box-shadow:0 0 36px -6px var(--accent); transform:translateY(-2px); outline:none; }

.pj-reveal{ opacity:0; transform:translateY(24px); transition:opacity .85s var(--pj-ease),transform .85s var(--pj-ease); transition-delay:var(--d,0s); }
.pj-reveal.in{ opacity:1; transform:none; }

.pj-strip{ display:grid; gap:14px; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:26px 0; }
.pj-strip .pj-v{ font-family:"Bricolage Grotesque","Manrope",sans-serif; font-weight:800; font-size:clamp(1.1rem,1.9vw,1.8rem); color:#fff; line-height:1; }
.pj-strip .pj-k{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:7px; }

.pj-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,68px); align-items:center; }
.pj-split.flip .pj-m{ order:2; }
@media (max-width:840px){ .pj-split,.pj-split.flip{ grid-template-columns:1fr; gap:28px; } .pj-split.flip .pj-m{ order:0; } }

/* "prossimo progetto" — riga compatta, una sola linea, niente a-capo */
.pj-nextp{ border-top:1px solid var(--hair); margin-top:8px; }
.pj-nextp .pj-nextp-a{ display:flex; justify-content:space-between; align-items:center; gap:18px; padding:22px var(--pad-x); max-width:1240px; margin:0 auto; transition:background .35s; cursor:pointer; width:100%; background:none; border:0; text-align:left; color:inherit; }
.pj-nextp .pj-nextp-a:hover,.pj-nextp .pj-nextp-a:focus-visible{ background:rgba(255,255,255,.03); outline:none; }
.pj-nextp .pj-nx{ display:flex; align-items:baseline; gap:.7em; min-width:0; }
.pj-nextp .pj-lbl{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); flex:none; }
.pj-nextp .pj-ttl{ font-family:"Bricolage Grotesque","Manrope",sans-serif; font-weight:700; font-size:clamp(1rem,2.2vw,1.5rem); letter-spacing:-.01em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .3s; }
.pj-nextp .pj-nextp-a:hover .pj-ttl{ color:var(--accent); }
.pj-nextp .pj-arr2{ font-size:1.4rem; color:var(--accent); flex:none; transition:transform .3s var(--pj-ease); }
.pj-nextp .pj-nextp-a:hover .pj-arr2{ transform:translateX(5px); }
@media (max-width:480px){ .pj-nextp .pj-nx{ flex-direction:column; gap:2px; } .pj-nextp .pj-ttl{ font-size:1.05rem; } }

.pj-foot{ border-top:1px solid var(--hair); padding:26px var(--pad-x); max-width:1240px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--faint); }
.pj-foot .pj-ee{ font-style:italic; }

.pj-hero{ min-height:90vh; display:grid; align-items:center; padding-top:clamp(78px,12vh,110px); padding-bottom:clamp(40px,8vh,80px); }
.pj-hero>*{ min-width:0; }
.pj-split>*{ min-width:0; }
.pj-lede,.pj-subline,.pj-pull,.pj-bigq{ overflow-wrap:break-word; }
@media (max-width:560px){ .pj-blk{ padding:clamp(46px,7vh,80px) 0; } .pj-hero{ min-height:84vh; } }

@media (prefers-reduced-motion:reduce){
	.pj-reveal{ opacity:1; transform:none; }
}

/* ============================================================
   01 · CUBO LED — blueprint tecnico, accento ciano
   ============================================================ */
.pj-modal[data-layout="cubo"]{ --accent:#48e0ff; --accent2:#5eead4; background:#060709; }
.pj-modal[data-layout="cubo"] .pj-bp{ position:absolute; inset:0;
	background-image:linear-gradient(rgba(72,224,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(72,224,255,.05) 1px,transparent 1px);
	background-size:40px 40px;
	-webkit-mask-image:radial-gradient(120% 100% at 62% 28%,#000 28%,transparent 78%);
	mask-image:radial-gradient(120% 100% at 62% 28%,#000 28%,transparent 78%); }
.pj-modal[data-layout="cubo"] .pj-scan{ position:absolute; left:0; right:0; height:150px;
	background:linear-gradient(180deg,transparent,rgba(72,224,255,.05),transparent); animation:pj-scan 7s linear infinite; }
@keyframes pj-scan{ 0%{ top:-150px; } 100%{ top:100%; } }
.pj-modal[data-layout="cubo"] .pj-hero{ grid-template-columns:1.1fr .9fr; gap:clamp(22px,4vw,60px); }
.pj-modal[data-layout="cubo"] .pj-cube{ width:100%; aspect-ratio:1/1; max-width:460px; display:block; cursor:grab; touch-action:none; margin:0 auto; }
.pj-modal[data-layout="cubo"] .pj-cube:active{ cursor:grabbing; }
.pj-modal[data-layout="cubo"] .pj-mono{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); text-align:center; margin-top:6px; }
.pj-modal[data-layout="cubo"] .pj-strip{ grid-template-columns:repeat(6,1fr); }
@media (max-width:900px){ .pj-modal[data-layout="cubo"] .pj-hero{ grid-template-columns:1fr; } .pj-modal[data-layout="cubo"] .pj-cube{ max-width:300px; order:-1; } }
@media (max-width:560px){ .pj-modal[data-layout="cubo"] .pj-strip{ grid-template-columns:repeat(3,1fr); gap:18px; } }

/* ============================================================
   02 · DUOMO — cinematografico, ambra calda + viola
   ============================================================ */
.pj-modal[data-layout="duomo"]{ --accent:#9b8cff; --warm:#ffcaa0; background:#06060e; }
.pj-modal[data-layout="duomo"] .pj-scene{ background:radial-gradient(120% 90% at 50% 0%,#0c0c1c,#06060e 72%); }
.pj-modal[data-layout="duomo"] .pj-beams{ position:absolute; inset:0; opacity:.5; mix-blend-mode:screen; }
.pj-modal[data-layout="duomo"] .pj-beam{ position:absolute; top:-20%; left:50%; width:36vw; height:140vh; transform-origin:top center;
	background:linear-gradient(180deg,rgba(255,202,160,.55),transparent 65%); filter:blur(14px); }
.pj-modal[data-layout="duomo"] .pj-beam.b1{ transform:translateX(-50%) rotate(-14deg); animation:pj-sway1 12s ease-in-out infinite; }
.pj-modal[data-layout="duomo"] .pj-beam.b2{ transform:translateX(-50%) rotate(8deg); opacity:.6; background:linear-gradient(180deg,rgba(155,140,255,.5),transparent 65%); animation:pj-sway2 15s ease-in-out infinite; }
@keyframes pj-sway1{ 0%,100%{ transform:translateX(-50%) rotate(-14deg); } 50%{ transform:translateX(-50%) rotate(-9deg); } }
@keyframes pj-sway2{ 0%,100%{ transform:translateX(-50%) rotate(8deg); } 50%{ transform:translateX(-50%) rotate(13deg); } }
.pj-modal[data-layout="duomo"] .pj-dhero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; }
.pj-modal[data-layout="duomo"] .pj-dhero .pj-bgimg{ position:absolute; inset:0; z-index:0; }
.pj-modal[data-layout="duomo"] .pj-dhero .pj-bgimg img{ width:100%; height:100%; object-fit:cover; opacity:.5; }
.pj-modal[data-layout="duomo"] .pj-dhero::after{ content:""; position:absolute; inset:0; z-index:1;
	background:linear-gradient(to top,#03040a 5%,transparent 58%),linear-gradient(to right,rgba(3,4,10,.75),transparent 60%); }
.pj-modal[data-layout="duomo"] .pj-duomofx{ position:absolute; inset:0; z-index:2; }
.pj-modal[data-layout="duomo"] .pj-bars{ position:absolute; left:0; right:0; height:6vh; background:#03040a; z-index:4; }
.pj-modal[data-layout="duomo"] .pj-bars.top{ top:0; } .pj-modal[data-layout="duomo"] .pj-bars.bot{ bottom:0; }
.pj-modal[data-layout="duomo"] .pj-dhero .pj-cap{ position:relative; z-index:5; padding:0 var(--pad-x) clamp(54px,11vh,120px); max-width:1240px; margin:0 auto; width:100%; }
.pj-modal[data-layout="duomo"] .pj-dhero h1{ font-size:clamp(2.8rem,10.5vw,8.5rem); line-height:.86; }
.pj-modal[data-layout="duomo"] .pj-ovl{ letter-spacing:.3em; text-transform:uppercase; font-size:clamp(10px,1.3vw,14px); color:var(--warm); margin-bottom:14px; }
.pj-modal[data-layout="duomo"] .pj-strip{ grid-template-columns:repeat(4,1fr); }
.pj-modal[data-layout="duomo"] .pj-bigq{ font-family:"Bricolage Grotesque","Manrope",sans-serif; font-weight:800; font-size:clamp(1.7rem,4.4vw,3.6rem); line-height:1.05; letter-spacing:-.02em; max-width:16ch; }
.pj-modal[data-layout="duomo"] .pj-bigq em{ font-style:normal; color:var(--warm); }
.pj-modal[data-layout="duomo"] .pj-bandimg{ position:relative; height:54vh; min-height:320px; overflow:hidden; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.pj-modal[data-layout="duomo"] .pj-bandimg img{ width:100%; height:100%; object-fit:cover; opacity:.72; transform:scale(1.05); }
.pj-modal[data-layout="duomo"] .pj-bandimg::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 100% at 50% 50%,transparent,#03040a); }
@media (max-width:560px){ .pj-modal[data-layout="duomo"] .pj-strip{ grid-template-columns:repeat(2,1fr); gap:20px; } }

/* ============================================================
   03 · AR MELAZETA — spaziale/mobile, verde menta
   ============================================================ */
.pj-modal[data-layout="ar"]{ --accent:#36f0c0; --accent2:#36f0c0; background:#06080c; }
.pj-modal[data-layout="ar"] .pj-scene{ background:radial-gradient(120% 90% at 70% 10%,#08140f,#06080c 72%); }
.pj-modal[data-layout="ar"] .pj-dots{ position:absolute; inset:0;
	background-image:radial-gradient(rgba(54,240,192,.12) 1px,transparent 1.4px); background-size:30px 30px;
	-webkit-mask-image:radial-gradient(120% 100% at 70% 20%,#000 30%,transparent 80%);
	mask-image:radial-gradient(120% 100% at 70% 20%,#000 30%,transparent 80%); }
.pj-modal[data-layout="ar"] .pj-hero{ grid-template-columns:1.05fr .95fr; gap:clamp(22px,4vw,56px); }
.pj-modal[data-layout="ar"] .pj-phone-stage{ position:relative; perspective:1100px; display:flex; justify-content:center; }
.pj-modal[data-layout="ar"] .pj-phone{ position:relative; width:min(264px,70vw); aspect-ratio:9/19.5; border-radius:32px; border:1px solid rgba(54,240,192,.3); background:#05080a;
	box-shadow:0 50px 120px -40px rgba(54,240,192,.35),0 0 0 8px rgba(255,255,255,.02); overflow:hidden; transform-style:preserve-3d; transition:transform .2s var(--pj-ease); }
.pj-modal[data-layout="ar"] .pj-phone img{ width:100%; height:100%; object-fit:cover; }
.pj-modal[data-layout="ar"] .pj-notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:84px; height:16px; border-radius:12px; background:#04060a; z-index:4; }
.pj-modal[data-layout="ar"] .pj-reticle{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.pj-modal[data-layout="ar"] .pj-reticle .pj-br{ position:absolute; width:24px; height:24px; border:2px solid var(--accent); opacity:.9; }
.pj-modal[data-layout="ar"] .pj-reticle .pj-br.a{ top:30%; left:24%; border-right:0; border-bottom:0; }
.pj-modal[data-layout="ar"] .pj-reticle .pj-br.b{ top:30%; right:24%; border-left:0; border-bottom:0; }
.pj-modal[data-layout="ar"] .pj-reticle .pj-br.c{ bottom:34%; left:24%; border-right:0; border-top:0; }
.pj-modal[data-layout="ar"] .pj-reticle .pj-br.d{ bottom:34%; right:24%; border-left:0; border-top:0; }
.pj-modal[data-layout="ar"] .pj-reticle .pj-line{ position:absolute; left:6%; right:6%; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); box-shadow:0 0 12px var(--accent); animation:pj-scanY 3s ease-in-out infinite; }
@keyframes pj-scanY{ 0%{ top:18%; } 50%{ top:78%; } 100%{ top:18%; } }
.pj-modal[data-layout="ar"] .pj-hud{ position:absolute; z-index:5; font-size:9px; letter-spacing:.16em; color:var(--accent); text-transform:uppercase; }
.pj-modal[data-layout="ar"] .pj-hud.tl{ top:-22px; left:0; } .pj-modal[data-layout="ar"] .pj-hud.br{ bottom:-22px; right:0; }
.pj-modal[data-layout="ar"] .pj-orbit{ position:relative; height:clamp(260px,40vh,400px); display:flex; align-items:center; justify-content:center; }
.pj-modal[data-layout="ar"] .pj-orbit .pj-core{ width:116px; height:116px; border-radius:50%; border:1px solid rgba(54,240,192,.4); display:flex; align-items:center; justify-content:center; text-align:center; font-family:"Bricolage Grotesque","Manrope",sans-serif; font-weight:800; font-size:13px; color:var(--accent); background:radial-gradient(circle,rgba(54,240,192,.15),transparent 70%); box-shadow:0 0 50px -10px rgba(54,240,192,.4); }
.pj-modal[data-layout="ar"] .pj-orbit .pj-ring{ position:absolute; border:1px dashed rgba(54,240,192,.18); border-radius:50%; }
.pj-modal[data-layout="ar"] .pj-chip{ position:absolute; font-size:11px; color:#cfeee6; border:1px solid rgba(54,240,192,.3); border-radius:20px; padding:6px 12px; background:rgba(4,6,10,.7); white-space:nowrap; transform:translate(-50%,-50%); }
@media (max-width:900px){ .pj-modal[data-layout="ar"] .pj-hero{ grid-template-columns:1fr; } .pj-modal[data-layout="ar"] .pj-phone-stage{ order:-1; margin-bottom:8px; } }
@media (max-width:560px){ .pj-modal[data-layout="ar"] .pj-orbit .pj-core{ width:92px; height:92px; } .pj-modal[data-layout="ar"] .pj-chip{ font-size:10px; padding:5px 9px; } }

/* ============================================================
   04 · JOIA — audio-reattivo, magenta + ciano
   ============================================================ */
.pj-modal[data-layout="joia"]{ --accent:#ff4d9d; --accent2:#48e0ff; background:#08060c; }
.pj-modal[data-layout="joia"] .pj-scene{ background:radial-gradient(120% 90% at 50% 10%,#180b1a,#08060c 74%); }
.pj-modal[data-layout="joia"] .pj-grad{ background:linear-gradient(100deg,#fff,var(--accent) 60%,var(--accent2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.pj-modal[data-layout="joia"] .pj-btn.primary{ color:#180009; }
.pj-modal[data-layout="joia"] .pj-jhero{ position:relative; min-height:94vh; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(22px,4vw,56px); align-items:center; padding-top:clamp(80px,12vh,110px); padding-bottom:clamp(40px,8vh,80px); overflow:hidden; }
.pj-modal[data-layout="joia"] .pj-eq{ position:absolute; left:0; right:0; bottom:0; height:44vh; z-index:0; opacity:.5; }
.pj-modal[data-layout="joia"] .pj-jhero .pj-inner{ position:relative; z-index:2; }
.pj-modal[data-layout="joia"] .pj-jhero h1{ font-size:clamp(3rem,13vw,10rem); line-height:.82; }
.pj-modal[data-layout="joia"] .pj-jhero .pj-frame{ aspect-ratio:3/4; max-width:320px; margin-left:auto; }
.pj-modal[data-layout="joia"] .pj-pulse{ animation:pj-pulse 1.7s ease-in-out infinite; }
@keyframes pj-pulse{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(255,77,157,0)); } 50%{ filter:drop-shadow(0 0 24px rgba(255,77,157,.5)); } }
@media (max-width:900px){ .pj-modal[data-layout="joia"] .pj-jhero{ grid-template-columns:1fr; } .pj-modal[data-layout="joia"] .pj-jhero .pj-frame{ margin:0 0 6px; max-width:260px; } }
.pj-modal[data-layout="joia"] .pj-signal{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; align-items:center; margin-top:30px; }
.pj-modal[data-layout="joia"] .pj-node{ border:1px solid var(--hair); border-radius:12px; padding:18px 12px; text-align:center; transition:.4s var(--pj-ease); background:rgba(255,255,255,.015); }
.pj-modal[data-layout="joia"] .pj-node .pj-nt{ font-family:"Bricolage Grotesque","Manrope",sans-serif; font-weight:700; font-size:clamp(12px,1.3vw,15px); }
.pj-modal[data-layout="joia"] .pj-node .pj-ns{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.pj-modal[data-layout="joia"] .pj-node.lit{ border-color:var(--accent); box-shadow:0 0 28px -6px var(--accent); background:rgba(255,77,157,.06); }
.pj-modal[data-layout="joia"] .pj-node.lit .pj-nt{ color:#fff; }
.pj-modal[data-layout="joia"] .pj-sarrow{ text-align:center; color:var(--faint); font-size:18px; }
@media (max-width:760px){ .pj-modal[data-layout="joia"] .pj-signal{ grid-template-columns:1fr; gap:8px; } .pj-modal[data-layout="joia"] .pj-sarrow{ transform:rotate(90deg); } }

/* layout "standard" (progetti senza art direction dedicata) eredita solo la base */
.pj-modal[data-layout="standard"] .pj-hero{ grid-template-columns:1fr; }

/* ============================================================
   Rifiniture responsive trasversali — impaginazione su ogni schermo
   ============================================================ */

/* ── 1700px+: widescreen ── */
@media (min-width:1700px){
	.pj-wrap{ max-width:1400px; }
	.project-modal.pj-modal{ --pad-x:clamp(60px,7vw,180px); }
}

/* ── 840px: tablet portrait (split già gestito sopra) ── */
@media (max-width:840px){
	.pj-blk{ padding:clamp(46px,7.5vh,88px) 0; }
}

/* ── 560px: phone landscape / tablet stretto ── */
@media (max-width:560px){
	.pj-lede    { max-width:none; }
	.pj-subline { max-width:none; }
	.pj-blk     { padding:clamp(40px,6.5vh,72px) 0; }
	.pj-hero    { min-height:82vh; padding-top:clamp(72px,11vh,94px); }
	.pj-foot    { flex-direction:column; gap:8px; }
	.pj-videoband{ padding-top:0; }
	/* strip: massimo 3 colonne su schermi medi */
	.pj-strip   { grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); }
}

/* ── 480px: phone portrait ── */
@media (max-width:480px){
	.pj-modal[data-layout="joia"] .pj-signal  { gap:6px; }
	.pj-modal[data-layout="joia"] .pj-node    { padding:12px 8px; }
	.pj-modal[data-layout="joia"] .pj-node .pj-nt{ font-size:11px; }
	.pj-modal[data-layout="duomo"] .pj-dhero  { min-height:76vh; }
	.pj-modal[data-layout="duomo"] .pj-bigq   { font-size:clamp(1.3rem,6vw,2rem); }
}

/* ── 420px: telefono piccolo ── */
@media (max-width:420px){
	.project-modal.pj-modal{ --pad-x:18px; }
	.pj-blk  { padding:clamp(32px,5.5vh,58px) 0; }
	.pj-hero { min-height:auto; padding-top:clamp(68px,12vh,88px); }
	/* H1 e H2 ridotti per evitare overflow su parole lunghe */
	.pj-modal h1{ font-size:clamp(1.95rem,9.5vw,2.8rem); }
	.pj-modal h2{ font-size:clamp(1.3rem,5.5vw,1.9rem); }
	.pj-modal[data-layout="duomo"] .pj-dhero h1{ font-size:clamp(2.1rem,9.5vw,3rem); }
	.pj-modal[data-layout="joia"]  .pj-jhero h1{ font-size:clamp(2.5rem,11vw,4rem); }
	.pj-modal[data-layout="joia"]  .pj-jhero{ min-height:auto; }
	/* kicker più compatto */
	.pj-kicker{ font-size:9px; letter-spacing:.24em; margin-bottom:12px; }
	.pj-kicker::before{ width:16px; }
	/* nextp più compatto */
	.pj-nextp .pj-nextp-a{ padding:16px var(--pad-x); gap:12px; }
	.pj-nextp .pj-ttl{ font-size:.9rem; }
}

/* ── 380px: telefono molto stretto ── */
@media (max-width:380px){
	/* flow: testo più piccolo su schermi minimi */
	.pj-flow .pj-ln  { padding:10px 0; gap:4px; }
	.pj-flow .pj-ln .pj-t{ font-size:13px; }
	.pj-flow .pj-ln .pj-d{ font-size:12px; }
	/* strip: forza 2 colonne per non avere celle troppo strette */
	.pj-strip{ grid-template-columns:repeat(2,1fr) !important; gap:14px; }
	/* cubo: cube più piccolo */
	.pj-modal[data-layout="cubo"] .pj-cube{ max-width:200px; }
}

/* ── landscape mobile / schermi molto bassi ── */
@media (max-height:520px) and (orientation:landscape){
	.pj-hero,
	.pj-modal[data-layout="ar"] .pj-hero  { min-height:auto; }
	.pj-modal[data-layout="duomo"] .pj-dhero{ min-height:88vh; }
	.pj-modal[data-layout="joia"] .pj-jhero { min-height:auto; }
}