/* chalco · homepage */

/* ---------- sezione 1 · hero */
.hero { padding-top: 96px; }

/* titolo a sinistra, testo di spiegazione sotto, sulla destra */
.hero__head { row-gap: 36px; align-items: end; }
.hero__title { grid-column: 1 / span 9; margin: 0;
  font-size: var(--fs-section); font-weight: 800; letter-spacing: var(--ls-display); line-height: 1; }
.hero__text { grid-column: 8 / span 5; margin: 0; padding-left: 22px; border-left: 3px solid var(--c-black);
  font-size: var(--fs-body); line-height: 1.75; color: var(--c-ink-2); }

/* spazio per l'infografica centrale, grande */
.infographic { margin: 88px 0 0; }
.infographic__stage { position: relative; aspect-ratio: 1440 / 740; background: rgba(251,250,248,.72); }
.infographic__svg { position: absolute; inset: 3% 2.5%; display: flex; align-items: center; }
.infographic__svg svg { width: 100%; height: auto; }
/* animazione d'ingresso dell'infografica (classi a-* generate nello svg)
   .anim-ready: aggiunta da infografiche.js; .is-played: la prima volta che entra nello schermo */
.anim-ready .a-fade, .anim-ready .a-pop, .anim-ready .a-layer, .anim-ready .a-stamp { opacity: 0; }
.anim-ready .a-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-played .a-fade  { animation: aFade .6s ease var(--d, 0s) both; }
.is-played .a-pop   { transform-box: fill-box; transform-origin: center; animation: aPop .6s cubic-bezier(.2,.9,.3,1.25) var(--d, 0s) both; }
.is-played .a-layer { animation: aLayer .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) both; }
.is-played .a-draw  { animation: aDraw 1.4s cubic-bezier(.4,0,.2,1) var(--d, 0s) both; }
/* timbro: arriva dall'alto, più grande, e si appoggia */
.is-played .a-stamp { transform-box: fill-box; transform-origin: center; animation: aStamp .45s cubic-bezier(.3,1.4,.5,1) var(--d, 0s) both; }
@keyframes aStamp { 0% { opacity: 0; transform: scale(1.8); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes aFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes aPop   { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes aLayer { from { opacity: 0; transform: translate(28px, -22px); } to { opacity: 1; transform: none; } }
@keyframes aDraw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* crocini agli angoli, come nelle tavole delle infografiche */
.infographic__corner { position: absolute; width: 26px; height: 26px; border-color: var(--c-black); border-style: solid; border-width: 0; }
.infographic__corner--tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.infographic__corner--tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.infographic__corner--bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.infographic__corner--br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* segnaposto: da togliere quando arriva l'svg */
.infographic__placeholder { position: absolute; inset: 40px; border: 1px dashed rgba(14,14,16,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.infographic__code { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.infographic__note { font-size: 13px; color: var(--c-ink-3); }
.infographic__hint { display: none; }

@media (max-width: 1023px) {
  .hero { padding-top: 64px; }
  .hero__title { grid-column: 1 / -1; }
  .hero__text { grid-column: 2 / -1; }
  .infographic { margin-top: 56px; }
}
@media (max-width: 767px) {
  .hero { padding-top: 40px; }
  .hero__text { grid-column: 1 / -1; }
  /* su mobile l'infografica scorre in orizzontale; più avanti si può disegnare una versione verticale */
  .infographic { margin-left: calc(var(--gutter-x) * -1); margin-right: calc(var(--gutter-x) * -1); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .infographic__stage { width: 960px; margin: 0 var(--gutter-x); }
  .infographic__hint { display: block; margin: 12px 0 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-3); }
}

/* ---------- hero, nuova disposizione: testo sotto il titolo, a sinistra */
.hero__head { row-gap: 32px; align-items: start; }
.hero__title { grid-column: 1 / span 10; }
.hero__text { grid-column: 1 / span 6; padding-left: 0; border-left: 0; }
.lead-l { font-size: 20px; line-height: 1.65; color: var(--c-ink-2); margin: 0; max-width: 62ch; }

/* ---------- testata comune delle sezioni */
.section + .section { padding-top: 168px; }
.sec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.sec-head .label { color: var(--c-ink-2); }
.sec-intro { row-gap: 28px; }
.sec-title { grid-column: 1 / span 10; margin: 0; font-size: var(--fs-section); font-weight: 800; letter-spacing: var(--ls-display); line-height: 1; text-wrap: balance; }
.sec-title--m { font-size: var(--fs-info); letter-spacing: -.045em; line-height: .98; }
.sec-text { grid-column: 1 / span 7; }

/* ---------- 02 · clienti */
.clients { padding-top: 120px; }
.clients__grid { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); border-top: 1px solid var(--c-black); border-bottom: 1px solid var(--c-black); }
.clients__grid li { height: 104px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--c-ink-3); letter-spacing: .04em; }
.clients__grid li + li { border-left: 1px dashed rgba(14,14,16,.3); }

/* ---------- 04 · servizi AI: scheda prodotto al centro, quattro riquadri intorno */
.ai__stage { margin-top: 88px; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--col-gap); row-gap: 40px; align-items: start; }
.ai__card { position: relative; z-index: 2; }
.ai__card--meta   { grid-column: 1 / span 4; grid-row: 1; margin-top: 24px; }
.ai__card--desc   { grid-column: 1 / span 4; grid-row: 2; }
.ai__product      { grid-column: 5 / span 4; grid-row: 1 / span 2; }
.ai__card--visual { grid-column: 9 / span 4; grid-row: 1; }
.ai__card--lang   { grid-column: 9 / span 4; grid-row: 2; margin-top: 8px; }
.ai__body { padding: 18px 22px 20px; display: grid; gap: 14px; }
.ai__body p { margin: 0; font-size: var(--fs-body-s); line-height: 1.65; color: var(--c-ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { font-size: 12px; font-weight: 600; padding: 5px 9px; border: 1px solid var(--c-black); background: #fff; }
.ai__rows { margin: 0; }
.ai__rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 22px; border-bottom: 1px solid var(--c-line); }
.ai__rows dt { font-size: 13px; font-weight: 600; }
.ai__rows dd { margin: 0; text-align: right; }
.ai__rows--lang dt { font-family: var(--font-mono); font-size: 10px; font-weight: 600; border: 1px solid var(--c-black); padding: 1px 6px; height: fit-content; }
.ai__rows--lang dd { font-size: 13px; color: var(--c-ink); text-align: left; flex: 1; }
.ai__draft { position: relative; font-size: 13px; line-height: 1.55; padding: 16px 14px 12px; border: 1px solid var(--c-black); background: #fff; }
.ai__flag { position: absolute; top: -10px; right: 10px; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 3px 7px; background: var(--c-yellow); border: 1px solid var(--c-black); }
.ai__crops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 22px 0; }
.ai__crops figure { position: relative; margin: 0; aspect-ratio: var(--r); border: 1px solid var(--c-black); overflow: hidden; max-width: 100%; }
.ai__crops .wide { grid-column: 1 / -1; }
.ai__crops img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.ai__crops figcaption { position: absolute; left: 6px; bottom: 6px; background: #fff; border: 1px solid var(--c-black); padding: 1px 6px; font-size: 10px; }
.ai__sheet { position: relative; background: #fff; border: 1px solid var(--c-black); outline: 1px dashed rgba(14,14,16,.55); outline-offset: 8px; padding: 18px 18px 0; }
.ai__sheet::before { content: ""; display: block; height: 2px; background: var(--c-red); margin-bottom: 18px; }
.ai__photo { position: relative; background: var(--c-photo-bg); aspect-ratio: 3 / 4; }
.ai__photo img { width: 100%; height: 100%; object-fit: contain; }
.pin { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 4px 8px 4px 6px; background: #fff; border: 1px solid var(--c-black); white-space: nowrap; }
.pin::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-blue); }
.ai__approve { display: flex; align-items: center; gap: 2px; margin: 0 -18px; padding: 14px 18px; border-top: 1px solid var(--c-black); margin-top: 18px; font-size: 12px; font-weight: 600; }
.ai__check { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; background: var(--c-black); color: #fff; padding: 7px 12px; }

/* ---------- 05 · case history */
.case__grid { align-items: center; row-gap: 40px; }
.case__video { grid-column: 1 / span 7; position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; background: var(--c-black);
  border: 1px solid var(--c-black); outline: 1px dashed rgba(14,14,16,.55); outline-offset: 8px; overflow: hidden; }
.case__video::before { content: ""; position: absolute; inset: 0; background: url("../img/prodotto/giacca_editorial.webp") center 30% / cover; opacity: .55; transition: opacity .3s, transform .6s; }
.case__video:hover::before { opacity: .7; transform: scale(1.03); }
.case__play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: #fff; border: 1px solid var(--c-black); }
.case__play::after { content: ""; position: absolute; left: 34px; top: 27px; border-left: 22px solid var(--c-black); border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.case__vlabel { position: absolute; left: 16px; top: 16px; font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; background: #fff; padding: 6px 10px; border: 1px solid var(--c-black); }
.case__time { position: absolute; right: 16px; bottom: 14px; color: #fff; }
.case__text { grid-column: 8 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; padding-left: 24px; }
.case__text .sec-title { grid-column: auto; }
.case__results { margin-top: 88px; }
.case__results .label { margin: 0 0 20px; color: var(--c-ink-2); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.stats li { padding: 26px 26px 24px; display: grid; gap: 10px; }
.stats__n { font-size: 81px; font-weight: 800; letter-spacing: -.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.stats__l { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

/* ---------- 06 · dicono di noi */
.press .sec-title { margin-bottom: 56px; }
.press__list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.press__item { display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s; }
.press__item:hover { box-shadow: 8px 8px 0 var(--box-c); transform: translate(-2px,-2px); }
.press__item .box__head .data { letter-spacing: 0; text-transform: none; font-weight: 400; }
.press__body { padding: 22px; display: grid; gap: 28px; flex: 1; align-content: space-between; min-height: 180px; }
.press__body h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.press__link { font-size: 10px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.press__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- footer */
.site-footer { margin-top: 168px; border-top: 1px solid var(--c-black); background: rgba(251,250,248,.9); }
.site-footer__top { padding: 64px 0 56px; row-gap: 40px; align-items: start; }
.site-footer__brand { grid-column: 1 / span 3; display: grid; gap: 20px; }
.site-footer__brand p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--c-ink-2); }
.site-footer__nav { grid-column: 4 / span 6; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.site-footer__nav div { display: grid; gap: 10px; align-content: start; }
.site-footer__nav .label { margin: 0 0 4px; }
.site-footer__nav a { font-size: 14px; color: var(--c-ink-2); }
.site-footer__nav a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__demo { grid-column: 10 / span 3; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 20px 0 28px; border-top: 1px solid var(--c-line); font-size: 12px; color: var(--c-ink-3); }

/* ---------- responsive delle nuove sezioni */
@media (max-width: 1023px) {
  .hero__title, .hero__text, .sec-title, .sec-text { grid-column: 1 / -1; }
  .section + .section { padding-top: 112px; }
  .clients__grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .clients__grid li:nth-child(5) { border-left: 0; }
  .clients__grid li:nth-child(n+5) { border-top: 1px dashed rgba(14,14,16,.3); }
  .ai__stage { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ai__stage > * { grid-column: auto !important; grid-row: auto !important; margin-top: 0 !important; }
  .ai__product { grid-column: 1 / -1 !important; max-width: 420px; justify-self: center; width: 100%; }
  .case__video, .case__text { grid-column: 1 / -1; }
  .case__text { padding-left: 0; }
  .stats__n { font-size: 56px; }
  .site-footer__brand, .site-footer__nav, .site-footer__demo { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .lead-l { font-size: 17px; }
  .clients__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .clients__grid li:nth-child(odd) { border-left: 0; }
  .clients__grid li:nth-child(n+3) { border-top: 1px dashed rgba(14,14,16,.3); }
  .ai__stage, .stats, .press__list { grid-template-columns: 1fr; }
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---------- revisione 21.10 · testi neri, riquadri a corpo bianco, risultati trasparenti, stampa in nero */
:root { --c-ink-2: var(--c-ink); --c-ink-3: var(--c-ink); }
.box--y, .box--r, .box--b, .box--k { --box-bg: #fff; }
.hero { padding-top: 72px; }
.infographic--os .infographic__stage { aspect-ratio: 1440 / 760; }

/* risultati: riquadro trasparente, si vede la griglia di fondo */
.stats li { --box-bg: transparent; padding: 0; gap: 0; }
.stats .stats__l { order: -1; display: flex; align-items: center; height: var(--box-head-h); padding: var(--box-head-pad);
  background: var(--box-c); color: var(--box-head-ink, #fff); font-size: var(--fs-label); letter-spacing: .26em; font-weight: 600; }
.stats .stats__n { padding: 30px 26px 30px; }

/* dicono di noi: tutto nero */
.press__item, .press__item.box--b, .press__item.box--r { --box-c: var(--c-black); --box-bg: #fff; }

/* ======================================================= revisione 21.10 (2) · composizione sfalsata */
/* sezioni a destra: testata, titolo e testo partono dalla colonna 5 */
.sec--right .sec-head { margin-left: calc((100% + var(--col-gap)) / 12 * 4); }
.sec--right .sec-title { grid-column: 5 / -1; }
.sec--right .sec-text  { grid-column: 6 / -1; }
.press.sec--right .sec-title { margin-left: calc((100% + var(--col-gap)) / 12 * 4); }
/* l'infografica 02 rientra a sinistra ed esce a destra: niente bande allineate */
.infographic--os { margin-left: calc((100% + var(--col-gap)) / 12); margin-right: calc(var(--gutter-x) * -1 + 16px); }
/* rassegna stampa sfalsata */
.press__list { align-items: start; }
.press__item:nth-child(2) { margin-top: 56px; }
.press__item:nth-child(3) { margin-top: 112px; }

/* ---------- 04 · livelli sovrapposti su fondo topografico */
.ai__stage { position: relative; isolation: isolate; margin-top: 72px; padding: 56px 0 72px; row-gap: 0; }
.ai__topo { position: absolute; z-index: -1; inset: 0 calc(var(--gutter-x) * -1); background: var(--c-paper) url("../img/topografia.svg") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 55%, transparent 100%); }
.ai__links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.ai__product      { grid-column: 4 / span 6; grid-row: 1 / span 3; z-index: 1; padding: 0 6%; }
.ai__card--meta   { grid-column: 1 / span 4; grid-row: 1; margin-top: 40px; z-index: 3; }
.ai__card--desc   { grid-column: 2 / span 4; grid-row: 3; margin-top: 0; align-self: end; z-index: 3; }
.ai__card--visual { grid-column: 9 / span 4; grid-row: 1 / span 2; margin-top: -12px; z-index: 3; }
.ai__card--lang   { grid-column: 8 / span 4; grid-row: 3; align-self: end; margin-top: 0; margin-bottom: -40px; z-index: 4; }
.ai__card { transition: transform .25s ease, box-shadow .25s ease; outline: none; }
.ai__card:hover, .ai__card:focus-visible, .ai__card.is-on { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--box-c); z-index: 8; }
.ai__card:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 4px; }

/* pop up al passaggio: esce dal riquadro verso il prodotto */
.ai__pop { position: absolute; z-index: 9; width: 270px; background: #fff; border: 1px solid var(--c-black); box-shadow: 6px 6px 0 var(--pop-c, var(--c-black));
  padding: 14px 16px 16px; display: grid; gap: 10px; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(var(--px, 0), var(--py, 0)) scale(.92); transform-origin: var(--po, left top);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2,.9,.3,1.2), visibility 0s linear .28s; }
.ai__pop::before { content: ""; position: absolute; width: 34px; border-top: 1px dashed var(--c-black); top: 26px; }
.ai__pop--b { --pop-c: var(--c-blue); left: calc(100% - 40px); top: -34px; --po: left bottom; }
.ai__pop--y { --pop-c: var(--c-yellow); left: calc(100% - 30px); bottom: 36px; --po: left bottom; }
.ai__pop--r { --pop-c: var(--c-red); right: calc(100% - 30px); top: 44%; --po: right top; }
.ai__pop--k { --pop-c: var(--c-black); right: calc(100% - 26px); bottom: 70%; --po: right bottom; }
.ai__pop--b::before, .ai__pop--y::before { right: 100%; }
.ai__pop--r::before, .ai__pop--k::before { left: 100%; }
.ai__card:hover .ai__pop, .ai__card:focus-within .ai__pop, .ai__card.is-on .ai__pop { opacity: 1; visibility: visible; transform: none; transition-delay: .06s, .06s, 0s; }
.ai__pop-head { margin: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.ai__pop-foot { margin: 0; font-size: 12px; font-weight: 600; display: flex; align-items: center; }
.ai__pop .tags li { border-style: dashed; }
.ai__rows--pop > div, .ai__pop .ai__rows--lang > div { padding: 8px 0; }
.ai__rows--pop dt { font-size: 12px; white-space: nowrap; }
.ai__rows--pop dd { font-size: 12px; text-align: right; }
.ai__worn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai__worn figure { position: relative; margin: 0; aspect-ratio: 3 / 4; border: 1px solid var(--c-black); overflow: hidden; background: #fff; }
.ai__worn img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.ai__worn figcaption { position: absolute; left: 5px; bottom: 5px; background: #fff; border: 1px solid var(--c-black); padding: 1px 6px; font-size: 10px; }
/* i tag sul prodotto rispondono al riquadro metadatazione */
.pin { transition: transform .2s, background-color .2s, color .2s; }
.ai__stage.pins-on .pin[data-pin="meta"] { background: var(--c-blue); color: #fff; transform: scale(1.06); }
.ai__stage.pins-on .pin[data-pin="meta"]::before { background: #fff; }

/* ---------- 05 · case history su banda nera, come nella home hyphen */
.case { padding-top: 168px; }
.case__band { background: var(--c-black); color: #fff; padding: 96px 0; }
.case__band .sec-head .badge { background: var(--c-black); color: #fff; border-color: rgba(255,255,255,.75); }
.case__band .sec-head .label, .case__band .lead-l { color: #fff; }
.case__grid { align-items: center; row-gap: 48px; }
.case__text { grid-column: 1 / span 5; padding-left: 0; gap: 28px; }
.case__text .sec-head { margin-bottom: 0; }
.case__links { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.btn--light { background: transparent; color: #fff; border-color: #fff; border-radius: 999px; padding: 12px 22px; letter-spacing: .14em; }
.btn--light:hover { background: #fff; color: var(--c-black); }
.case__video-link { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.case__video-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.case__play-s { width: 26px; height: 26px; border: 1px solid #fff; border-radius: 50%; position: relative; }
.case__play-s::after { content: ""; position: absolute; left: 10px; top: 7px; border-left: 8px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.case__img { grid-column: 7 / -1; position: relative; margin: 0 calc(var(--gutter-x) * -1) 0 0; aspect-ratio: 800 / 826; max-height: 640px; max-width: 100%;
  background: #1c1c1f; border: 1px solid rgba(255,255,255,.35); overflow: hidden; }
.case__img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.case__ph { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.75); }
.case__ph span { font-family: var(--font-mono); font-size: 11px; }
.case__results { margin-top: 64px; }

@media (max-width: 1023px) {
  .sec--right .sec-head, .press.sec--right .sec-title { margin-left: 0; }
  .sec--right .sec-title, .sec--right .sec-text { grid-column: 1 / -1; }
  .infographic--os { margin-left: 0; margin-right: 0; }
  .press__item:nth-child(n) { margin-top: 0; }
  .ai__stage { padding: 32px 0; row-gap: 32px; }
  .ai__links { display: none; }
  .ai__card { margin: 0 !important; }
  .ai__pop { position: static; width: auto; margin: 0 16px 16px; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-style: dashed; }
  .ai__pop::before { content: none; }
  .case__text, .case__img { grid-column: 1 / -1; }
  .case__img { margin-right: 0; }
}
/* la riga di approvazione sale in cima alla scheda, così resta visibile tra i livelli */
.ai__sheet { display: flex; flex-direction: column; padding-bottom: 18px; }
.ai__sheet::before { order: -2; }
.ai__approve { order: -1; margin: -18px -18px 18px; border-top: 0; border-bottom: 1px solid var(--c-black); }

/* ---------- 04 · frecce dal prodotto ai riquadri (disegnate da infografiche.js) e linea scanner */
.ai__links { z-index: 2; overflow: visible; }
.ai__links .band { fill: none; stroke-width: 16; stroke-linecap: round; }
.ai__links .dots { fill: none; stroke-width: 1.3; stroke-dasharray: 2 5; animation: aiDash 2.4s linear infinite; }
.ai__links .head { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes aiDash { to { stroke-dashoffset: -28; } }
.ai__sheet::before { display: none; }
.ai__photo { overflow: hidden; }
.ai__scan { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 2px; background: var(--c-red);
  box-shadow: 0 0 14px 3px rgba(233,79,55,.35); animation: aiScan 4.2s cubic-bezier(.45,0,.55,1) infinite alternate; pointer-events: none; }
.ai__scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 70px;
  background: linear-gradient(to top, rgba(233,79,55,.16), rgba(233,79,55,0)); }
@keyframes aiScan { from { top: 0; } to { top: calc(100% - 2px); } }
@media (prefers-reduced-motion: reduce) { .ai__scan { animation: none; top: 0; } .ai__links .dots { animation: none; } }
@media (max-width: 1023px) { .ai__links { display: none; } }
/* spazio tra scheda e riquadri, perché si vedano le frecce */
.ai__product      { grid-column: 5 / span 4; padding: 0; }
.ai__card--meta   { grid-column: 1 / span 4; margin-right: 56px; }
.ai__card--desc   { grid-column: 1 / span 4; margin-left: 72px !important; margin-right: -16px; }
.ai__card--visual { grid-column: 9 / span 4; margin-left: 64px; margin-right: -24px; }
.ai__card--lang   { grid-column: 9 / span 4; margin-left: 24px; margin-right: 24px; }

/* ======================================================= revisione 21.10 (3) */
/* 05 · guess su fondo carta: foto grande + livello chalco shooting */
.case__grid { align-items: center; }
.case__text { grid-column: 1 / span 4; }
.case__text .sec-head .label { color: var(--c-ink); }
.case__video-link { color: var(--c-ink); }
.case__play-s { border-color: var(--c-black); }
.case__play-s::after { border-left-color: var(--c-black); }
.case__media { grid-column: 6 / -1; position: relative; margin-right: calc(var(--gutter-x) * -1 + 24px); padding-bottom: 120px; }
.case__photo { margin: 0; aspect-ratio: 1600 / 786; max-width: 100%; border: 1px solid var(--c-black); outline: 1px dashed rgba(14,14,16,.55); outline-offset: 8px; overflow: hidden; }
.case__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.case__media:hover .case__photo img { transform: scale(1.03); }
.case__layer { position: absolute; left: -64px; bottom: 0; width: 56%; margin: 0; z-index: 3; }
.case__layer img { display: block; width: 100%; height: auto; border-top: 1px solid var(--c-black); }
.case__layer .box__head .data { letter-spacing: 0; text-transform: none; }
.case__results { margin-top: 72px; }
@media (max-width: 1023px) {
  .case__text, .case__media { grid-column: 1 / -1; }
  .case__media { margin-right: 0; padding-bottom: 0; }
  .case__layer { position: relative; left: auto; width: 86%; margin: -40px 0 0 auto; }
}

/* 04 · il riquadro rosso sale accanto al testo sotto il titolo */
.ai__card--visual { grid-row: 1; margin-top: -250px !important; }
.ai__card--lang { grid-row: 2 / span 2; align-self: end; }
.case__text { grid-column: 1 / span 5; }
.case__media { grid-column: 7 / -1; }
.ai__card--visual { margin-top: -215px !important; }
@media (max-width: 1023px) { .case__text, .case__media { grid-column: 1 / -1; } .ai__card--visual { margin-top: 0 !important; } }

/* ======================================================= revisione 21.10 (4) */
/* 06 · risultati: caselle trasparenti, bordo nero sottile, nessun colore */
.stats { gap: 0; border: 1px solid var(--c-black); }
.stats .stat { display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 30px; background: transparent; }
.stats .stat + .stat { border-left: 1px solid var(--c-black); }
.stats .stat .stats__n { padding: 0; order: 0; }
.stats .stat .stats__l { order: 1; height: auto; padding: 0; background: none; color: var(--c-ink); font-size: 11px; letter-spacing: .22em; }
.case__results .sec-head { margin-bottom: 24px; }
@media (max-width: 767px) { .stats .stat + .stat { border-left: 0; border-top: 1px solid var(--c-black); } }

/* 05 · foto guess più grande e in bianco e nero, livello shooting tutto nero */
.case__text { grid-column: 1 / span 4; }
.case__media { grid-column: 5 / -1; margin-right: calc(var(--gutter-x) * -1); padding-bottom: 150px; }
.case__photo { aspect-ratio: 16 / 9.4; }
.case__photo img { filter: grayscale(1) contrast(1.08); }
.case__layer { width: 50%; left: -48px; }
@media (max-width: 1023px) { .case__text, .case__media { grid-column: 1 / -1; } .case__media { margin-right: 0; padding-bottom: 0; } }

/* 04 · la sezione sale e si aggancia per un angolo all'infografica 02 */
#s4-ai { padding-top: 0; margin-top: -180px; position: relative; z-index: 4; }
#s4-ai .sec-head, #s4-ai .sec-intro { position: relative; }
#s4-ai .sec-head { padding-top: 0; }
@media (max-width: 1023px) { #s4-ai { margin-top: 0; padding-top: 112px; } }
.case__layer { left: auto; right: 48px; width: 46%; }
.case__text .sec-title--m { font-size: 48px; }
.case__results .sec-head .label { margin: 0; }
#s4-ai { margin-top: -110px; }
@media (max-width: 1023px) { .case__layer { right: auto; } #s4-ai { margin-top: 0; } }

/* ======================================================= revisione 21.10 (5) */
/* 03 · testo allineato al titolo */
.sec--right .sec-text { grid-column: 5 / -1; }
/* 04 · si sovrappone poco all'infografica e il titolo resta leggibile */
#s4-ai { margin-top: -40px; }
#s4-ai .sec-title { text-shadow: 0 0 18px var(--c-paper), 0 0 6px var(--c-paper); }
/* 06 · risultati su tre blocchi a colore pieno */
.stats { border: 0; gap: 24px; }
.stats .stat + .stat { border-left: 0; }
.stats .stat { border: 1px solid var(--c-black); }
.stats .stat:nth-child(1) { background: var(--c-yellow); color: var(--c-ink); }
.stats .stat:nth-child(2) { background: var(--c-red); color: #fff; }
.stats .stat:nth-child(3) { background: var(--c-blue); color: #fff; }
.stats .stat:nth-child(n+2) .stats__l { color: #fff; }
/* 07 · rassegna stampa più leggera: testata chiara, niente spessore nero */
.press__item { box-shadow: none; background: #fff; }
.press__item .box__head { background: #fff; color: var(--c-ink); border-bottom: 1px solid var(--c-black); }
.press__item .box__head::before { content: ""; width: 10px; height: 10px; background: var(--c-black); margin-right: 12px; flex-shrink: 0; }
.press__item .box__head { justify-content: flex-start; }
.press__item .box__head .data { margin-left: auto; }
.press__item:hover { box-shadow: 6px 6px 0 var(--c-black); }
@media (max-width: 1023px) { .sec--right .sec-text { grid-column: 1 / -1; } #s4-ai { margin-top: 0; } }
@media (max-width: 767px) { .stats .stat + .stat { border-top: 1px solid var(--c-black); } }
/* 06 · anche sul giallo numero ed etichetta in bianco */
.stats .stat:nth-child(1), .stats .stat:nth-child(1) .stats__l { color: #fff; }

/* 02 · loghi clienti scorrevoli (segnaposto LOGO) */
.clients__marquee { display: flex; overflow: hidden; border-top: 1px solid var(--c-black); border-bottom: 1px solid var(--c-black);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clients__track { display: flex; flex-shrink: 0; animation: clientsScroll 40s linear infinite; }
.clients__track li { width: 200px; height: 112px; display: flex; align-items: center; justify-content: center; border-right: 1px dashed rgba(14,14,16,.3); }
.logo-ph { font-size: 26px; font-weight: 800; letter-spacing: .12em; color: var(--c-ink); opacity: .35; transition: opacity .2s; }
.clients__track li:hover .logo-ph { opacity: 1; }
.clients__marquee:hover .clients__track { animation-play-state: paused; }
@keyframes clientsScroll { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .clients__track { animation: none; } }
@media (max-width: 767px) { .clients__track li { width: 140px; height: 88px; } .logo-ph { font-size: 20px; } }
.logo-ph { opacity: 1; color: var(--c-black); font-weight: 800; }

/* ---------- versioni verticali delle infografiche per il telefono */
.infographic-m { display: none; margin: 40px 0 0; }
.infographic-m__svg svg { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
  .infographic--hasm { display: none; }
  .infographic-m { display: block; }
}

/* ======================================================= 04 · tablet e telefono (revisione 21.10 sera)
   tablet: prodotto al centro, quattro riquadri compatti agganciati agli angoli con le frecce;
   telefono: prodotto in alto e una dorsale che porta ai quattro riquadri, i pop up si aprono col tocco */
@media (max-width: 1023px) {
  .ai__stage { grid-template-columns: repeat(6, minmax(0,1fr)); column-gap: 16px; row-gap: 0; padding: 24px 0 40px; margin-top: 48px; }
  .ai__stage > * { margin: 0 !important; }
  .ai__product { grid-column: 2 / span 4 !important; grid-row: 2 !important; max-width: none; justify-self: stretch; z-index: 1; }
  .ai__card--meta   { grid-column: 1 / span 3 !important; grid-row: 1 !important; margin-bottom: -70px !important; }
  .ai__card--visual { grid-column: 4 / span 3 !important; grid-row: 1 !important; margin-bottom: -70px !important; margin-top: 40px !important; }
  .ai__card--desc   { grid-column: 1 / span 3 !important; grid-row: 3 !important; margin-top: -90px !important; }
  .ai__card--lang   { grid-column: 4 / span 3 !important; grid-row: 3 !important; margin-top: -50px !important; }
  .ai__card { align-self: start; z-index: 3; }
  .ai__links { display: block; z-index: 2; }
  /* riquadri compatti */
  .ai__card .ai__body p { font-size: 13px; }
  .ai__crops { grid-template-columns: 1fr 1fr; padding: 12px 16px 0; }
  .ai__crops .wide { display: none; }
  .ai__card--desc .ai__rows { display: none; }
  .ai__rows--lang > div { padding: 8px 16px; }
  .ai__body { padding: 14px 16px 16px; gap: 10px; }
  /* pop up: sopra il riquadro, si apre al passaggio o al tocco */
  .ai__pop { position: absolute; left: 12px; right: 12px; top: 46px; width: auto; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px);
    border-style: solid; box-shadow: 6px 6px 0 var(--pop-c, var(--c-black)); }
  .ai__card:hover .ai__pop, .ai__card.is-on .ai__pop, .ai__card:focus-within .ai__pop { opacity: 1; visibility: visible; transform: none; }
  .ai__card .box__head::after { content: "+"; font-size: 16px; font-weight: 400; letter-spacing: 0; margin-left: auto; }
  .ai__card.is-on .box__head::after { content: "–"; }
}
@media (max-width: 767px) {
  .ai__stage { display: block; position: relative; padding: 0 0 8px; }
  .ai__links, .ai__topo { display: none; }
  .ai__product { margin: 0 0 8px !important; padding: 0 6px; }
  .ai__approve { font-size: 11px; }
  /* dorsale tratteggiata dal prodotto in giù, con un ramo a freccia nel colore di ogni riquadro */
  .ai__stage::before { content: ""; position: absolute; left: 14px; top: 260px; bottom: 60px; border-left: 2px dashed var(--c-black); opacity: .55; }
  .ai__card { margin: 28px 0 0 40px !important; }
  .ai__card::before { content: ""; position: absolute; left: -26px; top: 21px; width: 22px; height: 2px; background: var(--box-c); }
  .ai__card::after { content: ""; position: absolute; left: -10px; top: 16px; border-left: 8px solid var(--box-c); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
  .ai__card .ai__body p { font-size: 13px; }
  .ai__pop { top: auto; bottom: calc(100% + 8px); left: 0; right: 0; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ai__card--meta, .ai__card--visual { margin-bottom: -40px !important; }
  .ai__card--visual { margin-top: 70px !important; }
}
@media (max-width: 767px) {
  .ai__stage { display: flex; flex-direction: column; }
  .ai__stage::before { content: none; }
  .ai__product { order: -1; }
  /* dorsale: un tratto verticale sopra ogni riquadro e una freccia nel suo colore */
  .ai__card::before { left: -26px; top: -30px; bottom: auto; height: 52px; width: 0; background: none; border-left: 2px dashed rgba(14,14,16,.6); }
  .ai__card::after { left: -26px; top: 16px; width: 26px; height: 12px; border: 0; background: var(--box-c); clip-path: polygon(0 42%, 66% 42%, 66% 0, 100% 50%, 66% 100%, 66% 58%, 0 58%); }
  .ai__card + .ai__card::before { top: -400px; height: 422px; }
  .ai__card--meta::before { top: -36px; height: 58px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ai__card--meta { margin-bottom: -30px !important; }
  .ai__card--visual { margin-top: 30px !important; margin-bottom: -10px !important; }
}
@media (max-width: 767px) {
  .ai__card::before, .ai__card + .ai__card::before, .ai__card--meta::before { top: -30px; height: calc(100% + 30px); }
  .ai__card--lang::before { height: 52px !important; }
}

/* ======================================================= revisione 21.10 notte */
/* animazioni d'ingresso più rapide (metà dei tempi) */
.is-played .a-fade, .is-played .a-pop, .is-played .a-layer, .is-played .a-draw, .is-played .a-stamp, .is-played .a-draw-x { animation-delay: calc(var(--d, 0s) * .45) !important; }
.is-played .a-draw { animation-duration: .9s; }

/* 04 · tablet e telefono: niente pop up sovrapposti, il dettaglio si apre dentro il riquadro toccando la testata */
@media (max-width: 1023px) {
  .ai__pop { position: static !important; display: none; width: auto; margin: 0 16px 16px; opacity: 1 !important; visibility: visible !important;
    transform: none !important; box-shadow: none !important; border: 1px dashed var(--c-black) !important; transition: none; }
  .ai__pop::before { content: none !important; }
  .ai__card.is-on .ai__pop { display: grid; }
  .ai__card:hover .ai__pop { display: none; }
  .ai__card.is-on:hover .ai__pop { display: grid; }
  .ai__card .box__head { cursor: pointer; }
  .ai__card .box__head::after { content: "+ dettagli"; font-size: 10px; letter-spacing: .14em; }
  .ai__card.is-on .box__head::after { content: "– chiudi"; }
  .ai__card:hover { transform: none; box-shadow: 6px 6px 0 var(--box-c); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* i riquadri toccano la scheda solo sui bordi, senza coprire foto e tag */
  .ai__product { grid-column: 2 / span 4 !important; }
  .ai__card--meta, .ai__card--visual { margin-bottom: -18px !important; }
  .ai__card--visual { margin-top: 36px !important; }
  .ai__card--desc { margin-top: -18px !important; }
  .ai__card--lang { margin-top: 18px !important; }
  .ai__sheet { margin: 0 8px; }
}
/* telefono: le infografiche verticali usano tutta la larghezza dello schermo, così i testi restano a misura reale */
@media (max-width: 767px) {
  .infographic-m { margin-left: calc(var(--gutter-x) * -1); margin-right: calc(var(--gutter-x) * -1); }
}
@media (max-width: 1023px) {
  .ai__card .box__head::after { content: "+"; font-size: 20px; font-weight: 400; letter-spacing: 0; line-height: 1; margin-left: 12px; }
  .ai__card.is-on .box__head::after { content: "–"; }
  .ai__card.is-on { z-index: 8; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ai__card--visual { margin-top: 0 !important; margin-bottom: -12px !important; }
  .ai__card--meta { margin-bottom: -12px !important; }
}