/* Sito DRIP Studio, ricostruzione da zero. Solo ruoli e token di drip-system.css (design-lint a zero su questo foglio).
   Il colore è spazio: campi pieni dei sei colori Brand; geometria: raggi 8 · 13 · 21 · 34 · pill; spazio: scala 5…233. */
:root {
  --zp: clamp(var(--s4), 4vw, var(--s7));
  --world: var(--brand-off-white);
  --z-on: var(--brand-off-black);
  color-scheme: light;
}
html[data-z] { background: var(--world); }
html[data-z] body { margin: 0; background: transparent; color: var(--brand-off-black); font: 400 var(--fs-b)/1.55 var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
html[data-z] ::selection { background: var(--brand-cobalt); color: var(--brand-off-white); }
html[data-z] :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: var(--r-xs); }
:where(html[data-z]) a { color: inherit; } /* senza peso: i componenti (card, pulsanti) decidono il proprio colore */
html[data-z] em { font-family: var(--font-voice); font-style: italic; font-weight: 700; letter-spacing: -.01em; }
html[data-z] img { display: block; max-width: 100%; }

/* ——— palco spaziale ——— */
.zworld { position: fixed; inset: 0; z-index: 0; background: var(--world); }
.zworld-layer { position: absolute; inset: 0; will-change: clip-path; }
.zstage { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; transition: opacity var(--t-2) var(--ease-out); }
.zstage.is-off { opacity: 0; visibility: hidden; }
.zcam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.zc { position: absolute; left: -100px; top: -160px; border-radius: var(--r-m); overflow: hidden; background: var(--c); transform-origin: 50% 50%; backface-visibility: hidden; will-change: transform, opacity; pointer-events: auto; cursor: pointer; box-shadow: 0 13px 34px -13px rgba(13, 13, 13, .5); }
.zc img { width: 100%; height: 100%; object-fit: cover; }
html[data-nav='exiting'] .zc, html[data-nav='entering'] .zc { pointer-events: none; }

/* ——— volo dell'elemento condiviso e del titolo ——— */
.zflight { position: fixed; inset: 0; z-index: 30; overflow: hidden; transform-origin: 50% 50%; will-change: transform, clip-path; pointer-events: none; }
.zflight img { width: 100%; height: 100%; object-fit: cover; }
.ztitle-fly { position: fixed; z-index: 31; transform-origin: 0 0; font-weight: 700; font-family: var(--font-sans); line-height: .95; letter-spacing: -.035em; white-space: nowrap; pointer-events: none; will-change: transform, opacity; }

/* ——— testata: 60 px come ogni prodotto DRIP; il colore segue il mondo ——— */
.zhd { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--shell-h); display: flex; align-items: center; gap: var(--s5); padding: 0 var(--zp); color: var(--z-on); transition: color var(--t-2) var(--ease-out), background-color var(--t-2) var(--ease-out); }
.zhd-logo { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; font: 700 var(--fs-s)/1 var(--font-sans); letter-spacing: -.01em; }
.zhd-mark { height: 21px; width: auto; fill: currentColor; }
.zhd-word i { font: italic 700 var(--fs-s)/1 var(--font-voice); }
.zhd-nav { margin-left: auto; display: flex; gap: var(--s4); }
.zhd-nav a, .zhd-cta { font: 500 var(--fs-xs)/1 var(--font-sans); text-decoration: none; }
.zhd-nav a { padding: var(--s2) 0; text-decoration: underline transparent; text-decoration-thickness: 1px; text-underline-offset: .45em; transition: text-decoration-color var(--t-2) var(--ease-out); }
.zhd-nav a[aria-current], .zhd-nav a:hover { text-decoration-color: currentColor; }
.zhd-cta { display: inline-flex; align-items: center; height: 40px; padding: 0 var(--s4); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px currentColor; }
html[data-z]:not(.z-chrome-in) .zhd-nav, html[data-z]:not(.z-chrome-in) .zhd-cta { opacity: 0; transform: translateY(-8px); }
.zhd-nav, .zhd-cta { transition: opacity var(--t-3) var(--ease-out), transform var(--t-3) var(--ease-out); }
/* sul progetto la testata è una fascia nel colore del progetto, sopra la fotografia */
html[data-route='project']:not(.z-solid) .zhd { background: var(--world); }
/* sopra le pagine la testata prende il campo che le scorre sotto (reveal.js): mai una fascia d'altro colore */
html.z-solid .zhd { background: color-mix(in srgb, var(--hd-bg, var(--brand-off-white)) var(--chrome-tint), transparent); -webkit-backdrop-filter: var(--chrome-glass); backdrop-filter: var(--chrome-glass); color: var(--hd-on, var(--brand-off-black)); box-shadow: 0 1px 0 color-mix(in srgb, var(--hd-on, var(--brand-off-black)) 10%, transparent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { html.z-solid .zhd { background: var(--hd-bg, var(--brand-off-white)); } }

/* ——— pulsanti e link ——— */
.zbtn { display: inline-flex; align-items: center; height: 48px; padding: 0 var(--s4); border-radius: var(--r-pill); background: var(--brand-off-black); color: var(--brand-off-white) !important; font: 700 var(--fs-s)/1 var(--font-sans); text-decoration: none; transition: transform var(--t-1) var(--ease-out); }
.zbtn-on { background: var(--z-on); color: var(--world) !important; }
.zbtn:active { transform: scale(.97); }
.zlink { font: 500 var(--fs-s)/1.3 var(--font-sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.zlink:hover { text-decoration-thickness: 2px; }

main#main { position: relative; z-index: 2; display: block; }
main#main:focus { outline: none; }

/* ——— Home: l'arco è l'hero ——— */
.zh { position: relative; height: 100svh; color: var(--z-on); pointer-events: none; }
.zh a { pointer-events: auto; }
/* il contatore sta al mozzo della ruota, in basso al centro, dove le card partono */
/* manifesto: il titolo in alto a sinistra, il lead e le azioni alla sua base a destra (5:8); sotto, la ruota dei lavori */
.zh-copy { position: absolute; left: var(--zp); right: var(--zp); top: calc(var(--shell-h) + var(--s5)); display: grid; grid-template-columns: 8fr 5fr; gap: var(--s6); align-items: end; }
.zh-title { margin: 0; font: 700 var(--fs-h1)/.86 var(--font-sans); letter-spacing: -.04em; white-space: nowrap; }
.zh-lead { margin: 0; max-width: 38ch; font: 400 var(--fs-s)/1.5 var(--font-sans); }
.zh-act { display: flex; align-items: center; gap: var(--s4); margin: var(--s4) 0 0; }
.zh-copy > * { opacity: 0; transform: translateY(var(--s5)); transition: opacity var(--t-3) var(--ease-out), transform var(--t-3) var(--ease-out); }
.zh.is-ready .zh-copy > * { opacity: 1; transform: none; }
/* il manifesto c'è dal primo fotogramma (identità subito, LCP precoce): cambia solo colore quando il mondo diventa cobalto */
.zh-copy > .zh-title { opacity: 1; transform: none; transition: color var(--motion-l1) var(--ease-out); }
.zh.is-ready .zh-copy > :nth-child(2) { transition-delay: calc(var(--stagger) * 3); }
.zh.is-ready .zh-copy > :nth-child(3) { transition-delay: calc(var(--stagger) * 6); }
.zh.is-leaving .zh-copy > * { opacity: 0; transform: translateY(calc(-1 * var(--s4))); transition-duration: var(--t-2); transition-delay: 0s; }

/* ——— Work: la mostra cilindrica ——— */
.zw { position: relative; color: var(--on, var(--brand-off-black)); }
.zw-pin { position: sticky; top: 0; height: 100svh; pointer-events: none; }
.zw-pin a { pointer-events: auto; }
.zw-h { position: absolute; left: var(--zp); top: calc(var(--shell-h) + var(--s4)); margin: 0; font: 700 var(--fs-h4)/1 var(--font-sans); letter-spacing: -.02em; }
.zw-focus { position: absolute; left: var(--zp); bottom: var(--s6); width: min(600px, 44vw); }
.zw-title { margin: 0; font: 700 var(--fs-h2)/1 var(--font-sans); letter-spacing: -.04em; }
.zw-title a { text-decoration: none; }
.zw-title.is-long { font-size: var(--fs-h3); line-height: .96; }
.zw-meta { margin: var(--s4) 0 0; font: 500 var(--fs-xs)/1.4 var(--font-sans); }
.zw-reason { margin: var(--s3) 0 var(--s4); max-width: 46ch; font: 400 var(--fs-xs)/1.5 var(--font-sans); }
.zw-n { position: absolute; right: var(--zp); top: calc(var(--shell-h) + var(--s4)); margin: 0; font: 500 var(--fs-xs)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.zw-n b { font: 900 var(--fs-h4)/1 var(--font-wide); }
.zw-index { position: absolute; right: var(--zp); bottom: var(--s6); display: grid; gap: var(--s1); justify-items: end; }
.zw-index a { font: 500 var(--fs-xs)/1.5 var(--font-sans); text-decoration: none; opacity: .62; transition: opacity var(--t-1) var(--ease-out); }
.zw-index a[aria-current], .zw-index a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .3em; }
.zw-focus.is-swap .zw-title, .zw-focus.is-swap .zw-meta, .zw-focus.is-swap .zw-reason { animation: z-swap var(--t-2) var(--ease-out) both; }
@keyframes z-swap { from { opacity: 0; transform: translateY(var(--s3)); } }
.zw-pin > * { opacity: 0; transition: opacity var(--t-3) var(--ease-out); }
.zw.is-in .zw-pin > * { opacity: 1; }
.zw.is-leaving .zw-pin > * { opacity: 0; transition-duration: var(--t-1); }

/* ——— Progetto ——— */
.zp.is-pre { visibility: hidden; }
.zp-hero { position: relative; height: 100svh; overflow: hidden; background: var(--pc); color: var(--pon); }
.zp-hero-fig { position: absolute; inset: 0; margin: 0; }
.zp-hero-fig img { width: 100%; height: 100%; object-fit: cover; }
.zp-hero-copy { position: absolute; left: 0; bottom: 0; width: min(61.8vw, 1040px); box-sizing: border-box; padding: var(--s6) var(--zp) var(--s5); background: var(--pc); color: var(--pon); border-top-right-radius: var(--r-xl); }
.zp-hero.is-field .zp-hero-copy { width: auto; right: 0; border-radius: 0; background: none; }
.zp-title { margin: 0; font: 700 var(--fs-h2)/.92 var(--font-sans); letter-spacing: -.04em; }
.zp-hero.is-field .zp-title { font-size: var(--fs-h1); }
.zp-lead { margin: var(--s4) 0 0; max-width: 46ch; font: 400 var(--fs-l)/1.4 var(--font-sans); }
.zp-info { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: var(--s5) 0 0; }
.zp-info dt { font: 500 var(--fs-2xs)/1.3 var(--font-sans); opacity: .78; }
.zp-info dd { margin: 0; font: 700 var(--fs-xs)/1.4 var(--font-sans); }
.zp-hero-copy { transform: translateY(101%); transition: transform var(--motion-l2) var(--ease-sport); }
.zp.is-in .zp-hero-copy { transform: none; }
/* con il titolo in volo il pannello è già al suo posto: si accende, il titolo lo raggiunge */
.zp.is-flown .zp-hero-copy { transform: none; opacity: 0; transition: opacity var(--t-2) var(--ease-out); }
.zp.is-flown.is-in .zp-hero-copy { opacity: 1; }
.zp.is-leaving > :not(.zp-hero) { opacity: 0; transition: opacity var(--t-1) var(--ease-out); }
.zp-next { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); padding: var(--s8) var(--zp) var(--s6); background: var(--nc); color: var(--non); }
.zp-next > a:first-child { display: grid; gap: var(--s5); text-decoration: none; }
.zp-next span { font: 500 var(--fs-xs)/1 var(--font-sans); }
.zp-next b { font: 700 var(--fs-h1)/1 var(--font-sans); letter-spacing: -.04em; }

/* ——— sezioni: campi pieni ——— */
.zs { position: relative; padding: var(--s8) var(--zp); }
:is(.zs, .zk)[data-field='paper'] { background: var(--brand-off-white); color: var(--brand-off-black); --em: var(--drip-ink); }
:is(.zs, .zk)[data-field='warm'] { background: var(--tone-warm); color: var(--brand-off-black); --em: var(--drip-ink); }
:is(.zs, .zk)[data-field='ink'] { background: var(--brand-off-black); color: var(--brand-off-white); --em: var(--brand-powder-blue); }
:is(.zs, .zk)[data-field='blue'] { background: var(--brand-powder-blue); color: var(--brand-off-black); --em: var(--brand-off-black); }
:is(.zs, .zk)[data-field='pink'] { background: var(--brand-powder-pink); color: var(--brand-off-black); --em: var(--brand-off-black); }
:is(.zs, .zk)[data-field='cobalt'] { background: var(--brand-cobalt); color: var(--brand-off-white); --em: var(--brand-off-white); }
:is(.zs, .zk)[data-field='coral'] { background: var(--brand-orange); color: var(--brand-off-black); --em: var(--brand-off-black); }
.zs em { color: var(--em); }
:is(.zs, .zk)[data-field='ink'] .zbtn, :is(.zs, .zk)[data-field='cobalt'] .zbtn { background: var(--brand-off-white); color: var(--brand-off-black) !important; }
.zs p { margin: 0 0 var(--s3); }
.zs-h { margin: 0; font: 700 var(--fs-h3)/1 var(--font-sans); letter-spacing: -.035em; text-wrap: balance; }
.zs-big { margin: 0; font: 700 var(--fs-h2)/.92 var(--font-sans); letter-spacing: -.04em; text-wrap: balance; }
.zs-mega { margin: 0; font: 700 var(--fs-h1)/.88 var(--font-sans); letter-spacing: -.04em; }
.zs-lead { max-width: 46ch; font: 400 var(--fs-l)/1.45 var(--font-sans); }
.zs-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s5) !important; }
.zs-head { display: grid; grid-template-columns: 5fr 8fr; gap: var(--s6); align-items: end; margin-bottom: var(--s7); }
.zs-head .zs-lead { margin: 0; }
.zs-split { display: grid; grid-template-columns: 5fr 8fr; gap: var(--s6); align-items: start; }
.zs-body { max-width: 66ch; }
.zs-body.is-big p:first-child { font: 400 var(--fs-l)/1.45 var(--font-sans); }
.zs-body .zf { margin-top: var(--s5); }
.zf { margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--brand-off-black); }
.zf img { width: 100%; height: 100%; object-fit: var(--fit, cover); object-position: var(--fx, 50%) var(--fy, 50%); }
.zs-statement { margin: 0; max-width: 20ch; font: 700 var(--fs-h2)/.98 var(--font-sans); letter-spacing: -.04em; text-wrap: balance; }
.zs-quote { margin: 0; }
.zs-quote p { max-width: 18ch; }
.zs-quote p { font: 700 var(--fs-h2)/1 var(--font-sans); letter-spacing: -.035em; text-wrap: balance; }
.zs-quote footer { margin-top: var(--s5); font: 500 var(--fs-xs)/1.4 var(--font-sans); }
/* citazione con la sua foto: la frase a sinistra, l'immagine in piedi a destra */
.zs-quote-fig { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: center; }
.zs-quote-fig .zf { aspect-ratio: 5 / 6; margin: 0; }
@media (max-width: 768px) { .zs-quote-fig { grid-template-columns: 1fr; gap: var(--s5); } .zs-quote-fig .zf { aspect-ratio: 4 / 5; } }
.zs-cta { display: grid; grid-template-columns: 8fr 5fr; gap: var(--s6); align-items: end; min-height: 61.8svh; }
/* poster: titolo enorme e foto vera a tutta larghezza sotto */
.zt-hero { padding-top: calc(var(--shell-h) + var(--s7)); }
.zs-poster { display: grid; gap: var(--s4); max-width: 1180px; }
.zs-poster .zs-lead { margin-top: var(--s3); }
.zs-info { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: var(--s4) 0 0; }
.zs-info dt { font: 500 var(--fs-2xs)/1.3 var(--font-sans); opacity: .7; } .zs-info dd { margin: 0; font: 700 var(--fs-xs)/1.4 var(--font-sans); }
.zs-poster-fig { margin-top: var(--s7); aspect-ratio: 8 / 5; max-height: 89svh; width: 100%; }
.zs-feature { display: grid; grid-template-columns: 8fr 5fr; gap: var(--s6); align-items: end; }
.zs-feature.is-rev { grid-template-columns: 5fr 8fr; }
.zs-feature.is-rev > :first-child { order: 2; }
.zs-feature-fig { aspect-ratio: 8 / 5; max-height: 89svh; }
.zs-feature > div .zs-h { margin-bottom: var(--s4); }
.zs-world { position: relative; margin: calc(-1 * var(--s8)) calc(-1 * var(--zp)); min-height: 100svh; }
.zs-world-fig { position: absolute; inset: 0; border-radius: 0; }
.zs-world-copy { position: absolute; left: 0; bottom: 0; width: min(61.8vw, 980px); box-sizing: border-box; padding: var(--s6) var(--zp) var(--s5); background: var(--brand-off-black); color: var(--brand-off-white); border-top-right-radius: var(--r-xl); }
.zs-world-copy .zs-h { margin-bottom: var(--s4); }
.zs-story { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s6) var(--s5); }
.zs-story li { border-top: 1px solid currentColor; padding-top: var(--s4); }
.zs-story h3, .zs-list h3, .zs-works h3, .zs-contact h3, .zs-type h3, .zs-news h3 { margin: 0 0 var(--s2); font: 700 var(--fs-h5)/1.15 var(--font-sans); letter-spacing: -.015em; }
.zs-story .zf { aspect-ratio: 8 / 5; margin-bottom: var(--s4); }
.zs-list { list-style: none; margin: 0; padding: 0; }
.zs-list-lines li, .zs-list-timeline li, .zs-list-services li { position: relative; display: grid; grid-template-columns: 5fr 8fr; gap: var(--s6); padding: var(--s4) 0; }
/* il filetto è un segno a sé: entrando si disegna da sinistra */
.zs-list-lines li::before, .zs-list-timeline li::before, .zs-list-services li::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: currentColor; transform-origin: 0 50%; transition: transform var(--t-4) var(--ease-out); transition-delay: inherit; }
.zs-list li.zr-pend::before { transform: scaleX(0); }
.zs-list-go { display: inline-flex; align-items: baseline; gap: .25em; text-decoration: none; }
.zs-list-go i { font-style: normal; display: inline-block; opacity: 0; transform: translateX(calc(-1 * var(--s3))); transition: opacity var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out); }
.zs-list-go:hover i, .zs-list-go:focus-visible i { opacity: 1; transform: none; }
.zs-list-services li { transition-property: opacity, transform, padding; }
@media (hover: hover) and (pointer: fine) { .zs-list-services li:hover { padding-left: var(--s3); } }
.zs-list-services h3 { font-size: var(--fs-h3); line-height: 1; letter-spacing: -.035em; }
.zs-list-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s5); }
.zs-list-cols li { border-top: 1px solid currentColor; padding-top: var(--s4); }
.zs-list-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s3); }
.zs-list-products a { position: relative; display: block; height: 100%; box-sizing: border-box; padding: var(--s5) var(--s4); border-radius: var(--r-l); background: var(--brand-off-black); color: var(--brand-off-white); text-decoration: none; transition: transform var(--t-2) var(--ease-out), background-color var(--t-2) var(--ease-out); }
.zs-list-products a::after { content: '↗'; position: absolute; top: var(--s4); right: var(--s4); font: 700 var(--fs-h5)/1 var(--font-sans); transition: transform var(--t-2) var(--ease-out); }
.zs-list-products a:hover { background: var(--brand-cobalt); }
.zs-list-products a:hover::after { transform: translate(3px, -3px); }
.zs-list-products a:hover { transform: translateY(calc(-1 * var(--s1))); }
.zs-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s3); }
.zs-gallery .zf { grid-column: span 4; aspect-ratio: 5 / 8; }
.zs-gallery .zf.g0 { grid-column: span 7; aspect-ratio: 8 / 5; } .zs-gallery .zf.g1 { grid-column: span 5; aspect-ratio: auto; }
.zs-gallery .zf.g2 { grid-column: span 4; } .zs-gallery .zf.g3 { grid-column: span 8; aspect-ratio: 8 / 5; }
.zs-gallery .zf.g4 { grid-column: span 6; aspect-ratio: 8 / 5; } .zs-gallery .zf.g5 { grid-column: span 6; aspect-ratio: 8 / 5; }
.zs-gallery-strip { grid-auto-flow: column; grid-auto-columns: minmax(280px, 34vw); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.zs-gallery-strip .zf { grid-column: auto !important; aspect-ratio: 8 / 5 !important; scroll-snap-align: start; }
.zs-palette, .zs-swatches { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s2); }
.zs-palette li, .zs-swatches li { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s1); min-height: 144px; padding: var(--s3); border-radius: var(--r-m); font: 500 var(--fs-xs)/1.3 var(--font-sans); box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .10); }
.zs-swatches { margin-top: var(--s7); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.zs-swatches li { min-height: 233px; }
.zs-swatches b { font: 700 var(--fs-h5)/1.1 var(--font-sans); }
.zs-works { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s6) var(--s4); }
.zs-works a { display: block; text-decoration: none; }
.zs-works .zf, .zs-work-field { aspect-ratio: 5 / 8; margin-bottom: var(--s3); transition: border-radius var(--t-2) var(--ease-out); }
.zs-work-field { display: flex; align-items: flex-end; padding: var(--s4); box-sizing: border-box; border-radius: var(--r-xl); background: var(--wc); color: var(--won); font: 700 var(--fs-h4)/1 var(--font-sans); letter-spacing: -.02em; }
.zs-works a:hover .zf, .zs-works a:hover .zs-work-field { border-radius: var(--r-m); }
.zs-works p, .zs-news p { margin: 0; font: 400 var(--fs-xs)/1.4 var(--font-sans); opacity: .8; }
.zs-type { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s5); }
.zs-type-spec { display: block; font: 700 var(--fs-mega)/1.15 var(--font-sans); letter-spacing: -.05em; margin-bottom: var(--s4); }
.zs-type-spec.is-voice { font-family: var(--font-voice); font-style: italic; color: var(--em); }
/* la sezione aurea come la scala dello spazio: quadrati di Fibonacci 89 · 55 · 34 · 21 · 13 · 8 in un rettangolo 13 : 8 */
.zs-golden { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); aspect-ratio: 13 / 8; width: min(100%, 1100px); margin: var(--s7) 0 0 auto; gap: var(--s2); }
.zs-golden i { position: relative; display: flex; align-items: flex-end; padding: var(--s3); box-sizing: border-box; border-radius: var(--r-m); font-style: normal; }
.zs-golden b { font: 900 var(--fs-h5)/1 var(--font-wide); letter-spacing: -.02em; }
.zs-golden i:nth-child(1) { grid-area: 1 / 1 / 9 / 9; background: var(--brand-cobalt); color: var(--brand-off-white); }
.zs-golden i:nth-child(1) b { font-size: var(--fs-h1); }
.zs-golden i:nth-child(2) { grid-area: 1 / 9 / 6 / 14; background: var(--brand-powder-pink); color: var(--brand-off-black); }
.zs-golden i:nth-child(2) b { font-size: var(--fs-h3); }
.zs-golden i:nth-child(3) { grid-area: 6 / 11 / 9 / 14; background: var(--brand-orange); color: var(--brand-off-black); }
.zs-golden i:nth-child(4) { grid-area: 7 / 9 / 9 / 11; background: var(--brand-powder-blue); color: var(--brand-off-black); }
.zs-golden i:nth-child(5) { grid-area: 6 / 9 / 7 / 10; background: var(--brand-off-black); color: var(--brand-off-white); padding: var(--s2); }
.zs-golden i:nth-child(6) { grid-area: 6 / 10 / 7 / 11; box-shadow: inset 0 0 0 1px currentColor; padding: var(--s2); }
.zs-golden i:nth-child(n+5) b { font-size: var(--fs-xs); }
.zs-logos { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s3); }
.zs-logos li { display: grid; place-items: center; gap: var(--s3); aspect-ratio: 1; padding: var(--s5); border-radius: var(--r-l); }
.zs-logos img { max-height: 89px; width: auto; }
.zs-logos span { font: 500 var(--fs-xs)/1.3 var(--font-sans); align-self: end; }
.zs-facts { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s5); }
.zs-facts b { display: block; font: 900 var(--fs-h3)/1 var(--font-wide); letter-spacing: -.04em; } /* Ginto Nord è largo: la cifra deve stare nella sua colonna */
.zs-contact { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s6) var(--s5); }
.zs-contact-v { display: inline-block; margin-bottom: var(--s3); font: 700 var(--fs-h4)/1.1 var(--font-sans); letter-spacing: -.02em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.zs-news { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s5); }
.zs-news a { text-decoration: none; display: block; }
.zs-news .zf, .zs-news-field { aspect-ratio: 8 / 5; margin-bottom: var(--s3); }
/* articolo senza fotografia: un campo del Brand con la sua rubrica, la griglia resta allineata */
.zs-news-field { display: flex; align-items: flex-end; padding: var(--s4); box-sizing: border-box; border-radius: var(--r-xl); background: var(--brand-cobalt); color: var(--brand-off-white); font: 700 var(--fs-h5)/1.1 var(--font-sans); letter-spacing: -.02em; transition: border-radius var(--t-2) var(--ease-out); }
.zs-news-field[data-n='1'] { background: var(--brand-powder-pink); color: var(--brand-off-black); }
.zs-news-field[data-n='2'] { background: var(--brand-orange); color: var(--brand-off-black); }
.zs-news-field[data-n='3'] { background: var(--brand-off-black); color: var(--brand-off-white); }
.zs-news a:hover .zs-news-field, .zs-news a:hover .zf { border-radius: var(--r-m); }
.zs-credits { list-style: none; margin: 0; padding: 0; columns: 2 320px; gap: var(--s6); }
.zs-credits li { break-inside: avoid; padding: var(--s2) 0; border-top: 1px solid rgba(13, 13, 13, .10); display: grid; font: 400 var(--fs-xs)/1.4 var(--font-sans); }
.zs-cap { margin: 0; font: 400 var(--fs-xs)/1.4 var(--font-sans); }
.zpage > .zs:first-child:not(.zt-hero) { padding-top: calc(var(--shell-h) + var(--s7)); }

/* ingresso delle pagine e dei capitoli: un solo gesto quieto (il gesto forte è quello della scena) */
.zpage { opacity: 0; transform: translateY(var(--s5)); transition: opacity var(--t-3) var(--ease-out), transform var(--t-3) var(--ease-out); }
.zpage.is-in { opacity: 1; transform: none; }
.zpage.is-leaving { opacity: 0; transform: translateY(calc(-1 * var(--s3))); transition-duration: var(--t-1); }
/* ——— moto di lettura (reveal.js) ——— */
/* titoli: ogni parola sale dalla sua maschera; il margine negativo tiene la riga com'era, il cuscinetto salva aste e corsivi */
.zr-w { display: inline-block; overflow: clip; padding: .14em .06em; margin: -.14em -.06em; vertical-align: top; }
.zr-w > .zr-i { display: inline-block; transition: transform var(--t-4) var(--ease-out); transition-delay: calc(var(--i) * var(--stagger) * 1.5); }
.zr-pend .zr-w > .zr-i { transform: translate3d(0, 115%, 0); }
/* dichiarazioni e citazioni: le parole si accendono con lo scroll */
.zr-scrub .zr-i { opacity: .18; transition: opacity var(--t-2) var(--ease-out); }
.zr-scrub .zr-i.is-lit { opacity: 1; }
/* righe, card, paragrafi: in fila dentro il loro gruppo */
.zr-item { transition: opacity var(--t-3) var(--ease-out), transform var(--t-4) var(--ease-out); transition-delay: calc(var(--d, 0) * var(--stagger) * 3); }
.zr-item.zr-pend { opacity: 0; transform: translate3d(0, var(--s6), 0); }
/* fotografie: il riquadro si apre dal centro, la foto si posa e poi scorre più lenta della pagina */
.zr-fig { clip-path: inset(0 round 0); transition: clip-path var(--t-4) var(--ease-out); }
.zr-fig.zr-pend { clip-path: inset(13% 8% round var(--r-xl)); }
.zr-fig img { translate: 0 var(--py, 0%); scale: 1.14; transition: scale var(--t-4) var(--ease-out); will-change: translate; }
.zr-fig.zr-pend img { scale: 1.34; }
@media (hover: hover) and (pointer: fine) { .zs-works a:hover .zr-fig img, .zs-news a:hover .zr-fig img { scale: 1.2; } }
/* campi pieni: il colore sale dal basso con il bordo a 13° del marchio (il testo è sopra, nel suo colore) */
.zr-field { position: relative; isolation: isolate; background: var(--fprev) !important; }
.zr-field::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--fbg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path var(--t-4) var(--ease-io); }
.zr-field.zr-pend::before { clip-path: polygon(0 62%, 100% 40%, 100% 100%, 0 100%); }
/* nastro dei servizi */
.zs-marquee { overflow: hidden; margin: 0 calc(-1 * var(--zp)) var(--s7); padding: var(--s3) 0; border-block: 1px solid currentColor; }
.zs-marquee > div { display: flex; width: max-content; will-change: transform; }
.zs-marquee span { padding: 0 var(--s5); font: 700 var(--fs-h2)/1 var(--font-sans); letter-spacing: -.04em; white-space: nowrap; }
.zs-marquee span:nth-child(even) { font-family: var(--font-voice); font-style: italic; color: var(--em); }
.zs-marquee span::after { content: '·'; margin-left: var(--s5); font-family: var(--font-sans); font-style: normal; }
/* porta: il nome del capitolo dopo scivola dentro (--dx da reveal.js) */
.zdoor-t { translate: var(--dx, 0) 0; }
/* card dei lavori: inclinazione sotto il puntatore */
.zs-works a { transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--t-2) var(--ease-out); }

/* ——— piede ——— */
.zft { position: relative; z-index: 2; background: var(--brand-off-black); color: var(--brand-off-white); padding: var(--s8) var(--zp) var(--s5); --em: var(--brand-powder-blue); }
.zft em { color: var(--em); }
.zft-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5); margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid rgba(243, 239, 232, .2); font: 400 var(--fs-xs)/1.5 var(--font-sans); }
.zft-base a { text-decoration: none; }
.zft-sign { font-family: var(--font-voice); font-style: italic; font-weight: 800; }
/* l'epilogo (direttiva di espansione, punti 24–27): dopo la città la frase dello Studio si risolve in grande, una sola
   azione, poi i quattro gruppi pratici. Il mazzo si è già posato (deck.js, is-rest): qui il moto è solo d'arrivo */
.zft-epi { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); align-items: end; gap: var(--s4) var(--s6); padding: var(--s8) 0 var(--s7); }
.zft-epi > :not(.zft-act) { grid-column: 1; }
.zft-act { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.zft-k { margin: 0; font: 700 var(--fs-xs)/1.3 var(--font-sans); color: var(--brand-powder-blue); }
.zft-title { margin: 0; font: 700 var(--fs-h3)/1 var(--font-sans); letter-spacing: -.035em; text-wrap: balance; }
.zft-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.zft .zft-cta { background: var(--brand-off-white); color: var(--brand-off-black) !important; }
.zft-mail { display: inline-grid; gap: 2px; font: 700 var(--fs-s)/1.2 var(--font-sans); text-decoration: none; }
.zft-mail span { font-weight: 400; font-size: var(--fs-xs); color: color-mix(in srgb, var(--brand-off-white) 66%, transparent); }
.zft-mail:hover { text-decoration: underline; text-underline-offset: .3em; }
.zft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); padding-top: var(--s5); border-top: 1px solid color-mix(in srgb, var(--brand-off-white) 20%, transparent); }
.zft-col { display: grid; align-content: start; justify-items: start; gap: var(--s2); min-width: 0; font: 500 var(--fs-s)/1.5 var(--font-sans); }
.zft-col a { text-decoration: none; }
.zft-col a:hover { text-decoration: underline; text-underline-offset: .3em; }
.zft-col address { font-style: normal; color: color-mix(in srgb, var(--brand-off-white) 72%, transparent); }
.zft-h { margin: 0 0 var(--s1); font: 700 var(--fs-xs)/1.3 var(--font-sans); color: color-mix(in srgb, var(--brand-off-white) 56%, transparent); }
.zft-lang { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.zft-lang-b { height: 32px; padding: 0 var(--s2); border: 1px solid color-mix(in srgb, var(--brand-off-white) 28%, transparent); border-radius: var(--r-pill); background: none; color: inherit; font: 600 var(--fs-xs)/1 var(--font-sans); cursor: pointer; transition: background var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out); }
.zft-lang-b:hover { border-color: var(--brand-off-white); }
.zft-lang-b[aria-pressed='true'] { background: var(--brand-off-white); border-color: var(--brand-off-white); color: var(--brand-off-black); }
@media (max-width: 1024px) { .zft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zft-epi { grid-template-columns: minmax(0, 1fr); } .zft-act { grid-column: 1; grid-row: auto; justify-self: start; } }
@media (max-width: 560px) { .zft-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } .zft-epi { padding: var(--s7) 0 var(--s6); } }

/* ——— ricomporre, non rimpicciolire ——— */
@media (max-width: 1024px) {
  .zhd-nav { display: none; }
  .zhd-cta { margin-left: auto; }
}
@media (max-width: 768px) {
  .zh-copy { grid-template-columns: 1fr; gap: var(--s4); }
  .zh-title { font-size: clamp(56px, 18vw, 89px); white-space: normal; }
  .zw-focus { width: auto; right: var(--zp); bottom: calc(var(--s7) + var(--s4)); }
  .zw-reason { display: none; }
  .zw-index { left: 0; right: 0; bottom: var(--s4); padding: 0 var(--zp); grid-auto-flow: column; grid-auto-columns: max-content; gap: var(--s4); overflow-x: auto; justify-items: start; scrollbar-width: none; }
  .zp-hero-copy { width: auto; right: 0; border-top-right-radius: var(--r-l); }
  .zs { padding: var(--s7) var(--zp); }
  .zs-head, .zs-split, .zs-feature, .zs-feature.is-rev, .zs-cta, .zs-list-lines li, .zs-list-timeline li, .zs-list-services li, .zft-top { grid-template-columns: 1fr; gap: var(--s4); }
  .zs-feature.is-rev > :first-child { order: 0; }
  .zs-gallery .zf, .zs-gallery .zf[class*='g'] { grid-column: span 12; }
  .zs-world-copy { width: auto; right: 0; }
  .zp-next { flex-direction: column; align-items: flex-start; }
  /* un nome di una parola sola («Frattamaggiore») non deve allargare la pagina: la misura segue lo schermo */
  .zp-next > a:first-child { max-width: 100%; }
  .zp-next b { font-size: min(var(--fs-h1), 11vw); overflow-wrap: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  .zh-copy > *, .zpage, .zp-hero-copy, .zw-pin > *, .zs .zs-h, .zs .zs-big, .zs .zs-statement, .zs .zs-quote { transition-duration: var(--motion-duration-fast); transform: none !important; }
  .zw-focus.is-swap .zw-title, .zw-focus.is-swap .zw-meta, .zw-focus.is-swap .zw-reason { animation: none; }
}

/* salto al contenuto: visibile solo con la tastiera */
.zskip { position: fixed; left: var(--s3); top: var(--s3); z-index: 60; padding: var(--s2) var(--s3); border-radius: var(--r-s); background: var(--brand-off-black); color: var(--brand-off-white); font: 500 var(--fs-xs)/1 var(--font-sans); transform: translateY(-200%); }
.zskip:focus { transform: none; }

/* ——— Kick-off: ogni domanda è un campo pieno a tutta finestra; il piano cresce a lato ——— */
.zk { min-height: 100svh; box-sizing: border-box; padding: calc(var(--shell-h) + var(--s6)) var(--zp) var(--s6); transition: background-color var(--t-3) var(--ease-out), color var(--t-3) var(--ease-out); }
.zk-in { display: grid; grid-template-columns: 8fr 5fr; grid-template-rows: auto 1fr; gap: var(--s6); min-height: calc(100svh - var(--shell-h) - 2 * var(--s6)); }
.zk-head { grid-column: 1 / -1; display: grid; grid-template-columns: 8fr 5fr; gap: var(--s2) var(--s6); align-items: end; }
.zk-title { margin: 0; font: 700 var(--fs-h2)/.92 var(--font-sans); letter-spacing: -.04em; }
.zk-lead { margin: 0; max-width: 46ch; font: 400 var(--fs-s)/1.5 var(--font-sans); }
.zk-bar { grid-column: 1 / -1; height: 2px; background: color-mix(in srgb, currentColor 22%, transparent); }
.zk-bar i { display: block; height: 100%; background: currentColor; transform-origin: 0 50%; transition: transform var(--t-2) var(--ease-out); }
.zk-prog { grid-column: 1 / -1; margin: 0; font: 500 var(--fs-xs)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.zk-form { display: flex; flex-direction: column; justify-content: center; }
.zk-q { margin: 0; padding: 0; border: 0; }
.zk-q legend, .zk-contact { margin-bottom: var(--s5); font: 700 var(--fs-h3)/1 var(--font-sans); letter-spacing: -.035em; outline: none; }
.zk-opts { display: grid; gap: var(--s2); }
.zk-opt { position: relative; display: flex; align-items: center; min-height: 64px; padding: 0 var(--s4); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px currentColor; font: 500 var(--fs-l)/1.2 var(--font-sans); cursor: pointer; transition: background-color var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out); }
.zk-opt input { position: absolute; opacity: 0; pointer-events: none; }
.zk-opt:has(input:checked) { background: currentColor; }
.zk-opt:has(input:checked) span { color: var(--z-field-bg, var(--brand-off-white)); }
.zk[data-field='paper'] .zk-opt:has(input:checked) span, .zk[data-field='blue'] .zk-opt:has(input:checked) span, .zk[data-field='pink'] .zk-opt:has(input:checked) span, .zk[data-field='coral'] .zk-opt:has(input:checked) span { color: var(--brand-off-white); }
.zk[data-field='cobalt'] .zk-opt:has(input:checked) span { color: var(--brand-cobalt); }
.zk[data-field='ink'] .zk-opt:has(input:checked) span { color: var(--brand-off-black); }
.zk-opt:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; }
.zk-msg { min-height: 1.5em; margin: var(--s3) 0 0; font: 500 var(--fs-xs)/1.4 var(--font-sans); }
.zk-act { display: flex; align-items: center; gap: var(--s4); margin: var(--s4) 0 0; }
.zk-back { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.zk-next { border: 0; cursor: pointer; }
.zk-next:disabled { opacity: .45; cursor: default; }
.zk[data-field='ink'] .zbtn, .zk[data-field='cobalt'] .zbtn { background: var(--brand-off-white); color: var(--brand-off-black) !important; }
.zk-sum { align-self: start; padding: var(--s5); border-radius: var(--r-l); box-shadow: inset 0 0 0 1px currentColor; }
.zk-sum h2, .zk-sum h3 { margin: 0 0 var(--s3); font: 700 var(--fs-xs)/1.3 var(--font-sans); }
.zk-sum h3 { margin-top: var(--s4); }
.zk-ans, .zk-plan { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); font: 500 var(--fs-s)/1.4 var(--font-sans); }
.zk-plan { list-style: decimal inside; font-weight: 700; }
.zk-svcs { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s2); }
.zk-svcs a { display: grid; gap: var(--s1); padding: var(--s3) var(--s4); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px currentColor; text-decoration: none; }
.zk-svcs span { font: 500 var(--fs-2xs)/1 var(--font-sans); } .zk-svcs b { font: 700 var(--fs-h5)/1.2 var(--font-sans); } .zk-svcs small { font: 400 var(--fs-xs)/1.4 var(--font-sans); }
.zk-est { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: 0 0 var(--s3); }
.zk-est dt { font: 500 var(--fs-2xs)/1.3 var(--font-sans); } .zk-est dd { margin: 0; font: 700 var(--fs-s)/1.4 var(--font-sans); }
.zk-note { font: 400 var(--fs-xs)/1.5 var(--font-sans); max-width: 62ch; }
.zk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.zk-fields label { display: grid; gap: var(--s1); font: 500 var(--fs-xs)/1.3 var(--font-sans); }
.zk-fields .is-wide { grid-column: 1 / -1; }
.zk-fields input:not([type='checkbox']), .zk-fields textarea { box-sizing: border-box; width: 100%; padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-s); background: var(--brand-off-white); color: var(--brand-off-black); font: 400 var(--fs-s)/1.4 var(--font-sans); box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .18); }
.zk-fields input:not([type='checkbox']) { height: 44px; }
.zk-check { display: flex !important; align-items: flex-start; gap: var(--s2); }
@media (max-width: 768px) {
  .zk-in, .zk-head { grid-template-columns: 1fr; }
  .zk-fields { grid-template-columns: 1fr; }
}

/* ——— articolo della newsroom: misura di lettura, blocchi dell'editor unico ——— */
.za-meta { margin: 0; font: 500 var(--fs-xs)/1.4 var(--font-sans); }
.za-title { font-size: var(--fs-h2); max-width: 22ch; text-wrap: balance; }
.za-body { max-width: 68ch; margin: 0 auto; }
.za-body p { font: 400 var(--fs-b)/1.7 var(--font-sans); margin: 0 0 var(--s4); }
.za-body p.lead { font-size: var(--fs-l); line-height: 1.5; }
.za-body h2 { margin: var(--s6) 0 var(--s3); font: 700 var(--fs-h4)/1.15 var(--font-sans); letter-spacing: -.02em; }
.za-body blockquote { margin: var(--s6) 0; font: 700 var(--fs-h4)/1.2 var(--font-sans); letter-spacing: -.02em; }
.za-body blockquote footer { margin-top: var(--s3); font: 500 var(--fs-xs)/1.4 var(--font-sans); }
.za-body .art-list { margin: 0 0 var(--s4); padding-left: var(--s4); font: 400 var(--fs-b)/1.7 var(--font-sans); }
.za-body .art-fig { margin: var(--s6) 0; overflow: hidden; border-radius: var(--r-xl); }
.za-body .art-fig.wide { margin-inline: calc(-1 * min(var(--s8), 8vw)); }
.za-body .art-fig figcaption { padding: var(--s2) 0; font: 400 var(--fs-xs)/1.4 var(--font-sans); }
.za-body .art-note { margin: var(--s5) 0; padding: var(--s4); border-radius: var(--r-m); background: var(--brand-powder-blue); color: var(--brand-off-black); }
.za-body .art-note .label { display: block; margin-bottom: var(--s2); font: 700 var(--fs-xs)/1.3 var(--font-sans); }
.zt-module { padding-top: calc(var(--shell-h) + var(--s5)); }
.zft-legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s6); font: 500 var(--fs-xs)/1.5 var(--font-sans); }
.zft-legal a, .zft-legal button { color: inherit; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.zft-legal a:hover, .zft-legal button:hover { text-decoration: underline; text-underline-offset: .3em; }

/* ——— Elios, il concierge del sito (modules/concierge.js): compare solo con l'AI attiva sul server ——— */
.cg { position: fixed; z-index: 45; right: var(--zp); bottom: var(--s4); display: grid; justify-items: end; gap: var(--s3); }
.cg-open { display: inline-flex; align-items: center; gap: var(--s2); height: 48px; padding: 0 var(--s4); border: 0; border-radius: var(--r-pill); background: var(--brand-off-black); color: var(--brand-off-white); font: 700 var(--fs-xs)/1 var(--font-sans); box-shadow: var(--shadow-2); cursor: pointer; transition: transform var(--t-1) var(--ease-out); }
.cg-open:active { transform: scale(.97); }
.cg-panel { width: min(400px, calc(100vw - 2 * var(--s4))); max-height: min(560px, 70vh); display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--s3); padding: var(--s4); border-radius: var(--r-l); background: var(--brand-off-white); color: var(--brand-off-black); box-shadow: var(--shadow-3); }
.cg-panel header { display: flex; justify-content: space-between; align-items: start; gap: var(--s2); }
.cg-panel h2 { margin: 0; font: 700 var(--fs-h5)/1.1 var(--font-sans); letter-spacing: -.02em; }
.cg-x { width: 40px; height: 40px; border: 0; border-radius: var(--r-pill); background: none; color: inherit; font-size: var(--fs-l); cursor: pointer; }
.cg-log { overflow: auto; display: grid; gap: var(--s2); align-content: start; font: 400 var(--fs-s)/1.5 var(--font-sans); }
.cg-log .me, .cg-log .bot { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-m); max-width: 88%; }
.cg-log .me { justify-self: end; background: var(--brand-off-black); color: var(--brand-off-white); }
.cg-log .bot { background: var(--paper-3); }
.cg-form { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); }
.cg-form input { height: 44px; padding: 0 var(--s3); border: 0; border-radius: var(--r-s); background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); font: 400 var(--fs-s)/1 var(--font-sans); }
.cg-form .btn { height: 44px; padding: 0 var(--s4); border: 0; border-radius: var(--r-pill); background: var(--brand-off-black); color: var(--brand-off-white); font: 700 var(--fs-xs)/1 var(--font-sans); cursor: pointer; }
.cg-note { margin: 0; font: 400 var(--fs-2xs)/1.4 var(--font-sans); color: var(--ink-3); }

/* ——— consenso cookie (packages/shell/src/consent.js): rifiuta e accetta con lo stesso peso (Garante 2021) ——— */
.consent { position: fixed; z-index: 55; right: var(--zp); bottom: var(--s7); width: min(440px, calc(100vw - 2 * var(--s4))); box-sizing: border-box; display: grid; gap: var(--s3); padding: var(--s4); border-radius: var(--r-l); background: var(--brand-off-white); color: var(--brand-off-black); box-shadow: var(--shadow-3); opacity: 0; transform: translateY(var(--s3)); transition: opacity var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out); }
.consent.on { opacity: 1; transform: none; }
/* durante l'assemblaggio della Home la scelta aspetta: compare a caricamento finito, lontano dal manifesto */
html:not(.z-chrome-in) .consent { visibility: hidden; }
.consent h2 { margin: 0; padding-right: var(--s6); font: 700 var(--fs-h5)/1.1 var(--font-sans); letter-spacing: -.02em; }
.consent p { margin: 0; font: 400 var(--fs-xs)/1.5 var(--font-sans); color: var(--brand-off-black); }
.consent .link { font-weight: 700; color: var(--brand-off-black); }
.consent .btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.consent .btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 var(--s3); border: 0; border-radius: var(--r-pill); background: var(--brand-off-black); color: var(--brand-off-white); font: 700 var(--fs-xs)/1 var(--font-sans); cursor: pointer; }
.consent [data-c='custom'], .consent [data-c='save'] { grid-column: 1 / -1; order: 3; background: none; color: var(--brand-off-black); box-shadow: inset 0 0 0 1px var(--line-2); }
.consent-x { position: absolute; right: var(--s3); top: var(--s3); width: 40px; height: 40px; border: 0; border-radius: var(--r-pill); background: none; cursor: pointer; }
.consent-x i, .consent-x i::after { position: absolute; left: var(--s3); right: var(--s3); top: 19px; height: 2px; background: currentColor; transform: rotate(45deg); content: ''; }
.consent-x i::after { left: 0; right: 0; top: 0; transform: rotate(-90deg); }
.consent-cats { display: grid; }
.consent-cat { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); cursor: pointer; font: 700 var(--fs-xs)/1.3 var(--font-sans); }
.consent-cat span { grid-column: 1; font-weight: 400; color: var(--ink-3); }
.consent-cat input { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; accent-color: var(--brand-cobalt); }
@media (max-width: 768px) { .consent { left: var(--s3); right: var(--s3); bottom: var(--s3); width: auto; } }

/* ——— testata verso l'ecosistema: launcher dei servizi, DRIP ID, menu sotto i 1024 px ——— */
.zhd-eco { display: flex; align-items: center; gap: var(--s2); }
.zhd .dp-tool, .zhd .dp-avatar { color: inherit; }
/* senza accesso il DRIP ID segue la testata come il Menu: su blu e nero un fondo chiaro nasconderebbe l'icona chiara */
.zhd .dp-avatar.is-anon { background: none; box-shadow: inset 0 0 0 1px currentColor; }
.zhd-menu { display: none; height: 40px; padding: 0 var(--s3); border: 0; border-radius: var(--r-pill); background: none; box-shadow: inset 0 0 0 1px currentColor; color: inherit; font: 500 var(--fs-xs)/1 var(--font-sans); cursor: pointer; }
html.z-menu-on .zhd { background: var(--brand-cobalt); color: var(--brand-off-white); }
html.z-menu-on body { overflow: hidden; }
@media (max-width: 768px) { .zhd-cta { display: none; } .zhd-eco { margin-left: auto; } .zhd-eco .zhd-tool { display: none; } }

/* ——— porta del capitolo successivo (door.js): un campo pieno a tutta larghezza, il nome del capitolo in grande ——— */
.zdoor { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); grid-template-rows: auto 1fr; align-items: end; gap: var(--s4) var(--s6); min-height: clamp(377px, 62svh, 610px); box-sizing: border-box; padding: var(--s6) var(--zp) var(--s5); background: var(--door); color: var(--door-on); text-decoration: none; overflow: hidden; }
.zdoor-n { grid-column: 1 / -1; align-self: start; font: 700 var(--fs-xs)/1 var(--font-wide); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.zdoor-t { display: block; font: 700 var(--fs-mega)/.82 var(--font-sans); letter-spacing: -.05em; transition: transform var(--t-2) var(--ease-out); }
.zdoor-l { max-width: 38ch; padding-bottom: var(--s2); font: 400 var(--fs-s)/1.5 var(--font-sans); }
@media (hover: hover) and (pointer: fine) { .zdoor:hover .zdoor-t { transform: translateX(var(--s3)); } }
.zdoor:focus-visible { outline: 3px solid currentColor; outline-offset: -8px; }
/* il campo in volo: sale dai bordi della porta a tutto schermo, sotto la testata */
.zdoor-fly { position: fixed; inset: 0; z-index: 30; pointer-events: none; will-change: clip-path, opacity; }
.zdoor-fly .zdoor-t { position: absolute; margin: 0; white-space: nowrap; will-change: transform, opacity; }
@media (max-width: 768px) {
  .zdoor { grid-template-columns: 1fr; min-height: clamp(377px, 70svh, 610px); }
  .zdoor-t { font-size: clamp(64px, 22vw, 144px); line-height: .96; }
  .zdoor-l { padding-top: var(--s2); }
  .zdoor-fly .zdoor-t { font-size: clamp(64px, 22vw, 144px); }
}

/* negozio del sito (platform/shop/widget.js, blocchi shop* di sections.js): i colori e i raggi del sistema; il pannello
   del carrello sta sul body, quindi le variabili vanno sulla radice */
:root { --drip-shop-accent: var(--brand-off-black); --drip-shop-on-accent: var(--brand-off-white); --drip-shop-radius: var(--r-m); --drip-shop-surface: var(--brand-off-white); }
.zt-shop .zshop { margin-top: var(--s5); }