/**
 * Case history (tema-case.php). Si appoggia ai componenti delle pagine
 * interne (page-build): .crumbs, .section-head, .h2, .lead, .chip,
 * .round-btn, .pg-split-head, .stories, .reviews, .cta, .form.
 * Colori solo dalla palette del sito: arancio --human, viola --brand sul
 * chiaro, --purple-dark-bg (#a03eff) per testi e accenti sul fondo scuro.
 * Hover nel linguaggio morbido già usato (goccia di luce che segue il
 * mouse, angoli che si arrotondano, rimbalzi leggeri).
 */

.case-2026 { --ch-a: var(--human); --ch-b: var(--purple-dark-bg); --ch-c: rgba(243, 239, 232, .72); }

/* ---------- elementi comuni ---------- */
.ch-k { color: var(--faint); }
/* riquadro bianco che segue il logo: i loghi larghi restano bassi, quelli
   quadrati o alti lo fanno crescere in altezza (mai fuori dal bianco) */
.ch-logo {
  --logo-w: 200px; --logo-h: 88px;
  display: grid; place-items: center; min-width: 168px; min-height: 64px; padding: 12px 18px; flex: none;
  background: #fff; border-radius: 16px;
}
.ch-logo img { display: block; width: auto; height: auto; max-width: var(--logo-w); max-height: var(--logo-h); object-fit: contain; }
.ch-logo--sm { --logo-w: 130px; --logo-h: 56px; min-width: 116px; min-height: 46px; padding: 8px 12px; border-radius: 12px; }
.ch-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-tags li > * {
  display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border-radius: 99px;
  border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--fg);
  transition: background-color .35s var(--ease-out), color .35s, border-color .35s, translate .5s cubic-bezier(.34, 1.56, .64, 1);
}
.ch-tags a:hover { background: var(--human); border-color: var(--human); color: #fff; translate: 0 -2px; }

/* luce morbida che segue il mouse (--mx/--my da case2026.js) */
[data-ch-glow] { --mx: 50%; --my: 50%; }

/* ---------- 1. Hero ---------- */
.ch-hero {
  position: relative; isolation: isolate; overflow: hidden; color: var(--paper); background-color: var(--bg);
  padding-block: calc(var(--nav-h) + 36px) clamp(60px, 8vw, 110px);
  transition: background-color .9s var(--ease-out);
}
.ch-hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 80vw; aspect-ratio: 1; max-width: 1100px; right: -24vw; top: -30vw; border-radius: 50%;
  background: radial-gradient(circle at 40% 45%, rgba(252, 106, 58, .26), transparent 48%),
              radial-gradient(circle at 62% 60%, rgba(160, 62, 255, .34), transparent 55%);
  filter: blur(50px); animation: ch-orb 18s ease-in-out infinite alternate;
}
@keyframes ch-orb { to { transform: translate(-6vw, 4vw) scale(1.08); } }
.ch-hero .crumbs { color: rgba(243, 239, 232, .45); }
.ch-hero .crumbs a { color: rgba(243, 239, 232, .7); }
.ch-hero .crumbs a:hover, .ch-hero .crumbs [aria-current] { color: var(--paper); }
.ch-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end;
  margin-top: clamp(40px, 7vh, 88px);
}
.ch-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(22px, 3vw, 34px); }
.ch-badge {
  display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 14px;
  border-radius: 99px; border: 1px solid rgba(243, 239, 232, .14); color: rgba(243, 239, 232, .7); font-size: 11px;
}
.ch-badge--accent { color: var(--paper); border-color: rgba(252, 106, 58, .5); background: rgba(252, 106, 58, .1); }
.ch-hero__title {
  font-size: clamp(2.5rem, 5.4vw, 5.8rem); line-height: .94; letter-spacing: -0.05em; font-weight: 560;
  margin-left: -.03em; text-wrap: balance;
}
.ch-hero__title .serif { font-size: 1.06em; letter-spacing: -0.025em; }

/* scheda progetto: vetro con goccia di luce */
.ch-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 22px; justify-items: start; padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius-lg); background: rgba(255, 255, 255, .035); border: 1px solid rgba(243, 239, 232, .12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: border-radius .9s cubic-bezier(.22, 1, .36, 1), border-color .6s;
}
.ch-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .6s;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(160, 62, 255, .2), transparent 65%);
}
.ch-card:hover { border-radius: 44px; border-color: rgba(160, 62, 255, .35); }
.ch-card:hover::before { opacity: 1; }
.ch-card__top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ch-card__label { color: rgba(243, 239, 232, .45); }
.ch-facts { width: 100%; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.ch-facts div { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid rgba(243, 239, 232, .12); }
.ch-facts dt { color: rgba(243, 239, 232, .45); font-size: 11px; }
.ch-facts dd { margin: 0; font-size: 17px; font-weight: 520; letter-spacing: -0.02em; }
.ch-card__services { display: grid; gap: 12px; width: 100%; }
.ch-card__services .ch-k { color: rgba(243, 239, 232, .45); }
.ch-card .ch-tags li > * { border-color: rgba(243, 239, 232, .16); color: var(--paper); height: 32px; font-size: 13px; padding: 0 13px; }
.ch-card .link-arrow { color: var(--paper); }

.ch-hero__cover {
  margin: clamp(48px, 7vw, 96px) 0 0; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 1920 / 500; background: var(--ink-2);
}
.ch-hero__cover img { width: 100%; height: 100%; object-fit: cover; transform-origin: center top; will-change: transform; }

@media (max-width: 1000px) {
  .ch-hero__grid { grid-template-columns: 1fr; align-items: start; }
  .ch-card { max-width: 560px; }
}
@media (max-width: 700px) {
  .ch-hero__cover { aspect-ratio: 16 / 9; }
  .ch-hero__cover img { object-position: 30% center; }
  .ch-facts dd { font-size: 15.5px; }
  .ch-logo { --logo-w: 150px; --logo-h: 72px; min-width: 132px; min-height: 52px; }
}

/* ---------- 2. La sfida ---------- */
.ch-challenge { padding-block: clamp(100px, 12vw, 170px); }
.ch-challenge__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.ch-challenge__head .serif { color: var(--brand); }
.ch-challenge__context { display: grid; gap: 1em; }
/* obiettivo (sinistra, luminoso) e sfida (destra), stessa altezza */
.ch-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ch-duo.is-single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.ch-step {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start; gap: 18px;
  padding: clamp(28px, 3.2vw, 48px); border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: rgba(255, 255, 255, .6);
  transition: border-radius .9s cubic-bezier(.22, 1, .36, 1), translate .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .6s var(--ease-out);
}
.ch-step:hover { border-radius: 44px; translate: 0 -4px; }
.ch-step__k { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 450; }
.ch-step__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.ch-step__text { display: grid; gap: .8em; }
.ch-step__text p { color: var(--muted); font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.45; letter-spacing: -0.015em; }
.ch-step strong { color: var(--fg); font-weight: 560; }

/* obiettivo: filo sfumato arancio → viola e alone morbido che respira */
.ch-step--glow { background: #fff; border-color: transparent; box-shadow: 0 30px 60px -40px rgba(98, 37, 157, .45); }
.ch-step--glow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 1; pointer-events: none;
  background: var(--grad-hybrid);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ch-step--glow::after { /* luce che segue il mouse */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .6s;
  background: radial-gradient(300px circle at var(--mx) var(--my), rgba(252, 106, 58, .14), transparent 70%);
}
.ch-step--glow:hover::after { opacity: 1; }
.ch-step__halo {
  position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -22%; top: -40%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(160, 62, 255, .22), rgba(252, 106, 58, .1) 55%, transparent);
  filter: blur(8px); animation: ch-breathe 7s ease-in-out infinite alternate;
}
@keyframes ch-breathe { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8%, 10%) scale(1.12); } }
.ch-step--glow .ch-step__dot { background: var(--human); box-shadow: 0 0 0 5px rgba(252, 106, 58, .18); }
.ch-step--glow .ch-step__k { color: var(--fg); }
.ch-step--glow .ch-step__text p { color: rgba(10, 6, 18, .78); }

/* da → a: un impulso percorre il filo, sotto i due riquadri */
.glocal { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.glocal__node {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 99px;
  background: var(--brand); color: #fff; font-size: 11px; flex: none;
}
.glocal__node--to { background: var(--human); }
.glocal__wire { position: relative; flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.glocal__wire i {
  position: absolute; inset: 0 auto 0 0; width: 34%; border-radius: inherit;
  background: var(--grad-hybrid); animation: ch-glocal 2.6s var(--ease-io) infinite;
}
@keyframes ch-glocal { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }

/* foto affiancate alla stessa altezza (colonne in proporzione ai formati) */
.ch-challenge__media { display: grid; grid-template-columns: 1.78fr .975fr; gap: 16px; margin-top: clamp(40px, 5vw, 72px); }
.ch-challenge__media.is-single { grid-template-columns: minmax(0, 1fr); }
.ch-shot { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-2); }
.ch-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* foto: angoli che si arrotondano e leggero ingrandimento al passaggio */
[data-ch-zoom] { transition: border-radius .9s cubic-bezier(.22, 1, .36, 1); }
[data-ch-zoom] img { transition: transform 1.2s var(--ease-out); }
[data-ch-zoom]:hover { border-radius: 44px; }
[data-ch-zoom]:hover img { transform: scale(1.04); }

@media (max-width: 1000px) {
  .ch-challenge__head { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  .ch-duo, .ch-challenge__media { grid-template-columns: 1fr; }
}

/* ---------- 3. La soluzione: mappa ---------- */
.ch-solution { padding-block: clamp(100px, 12vw, 170px); }
.ch-solution__head .serif { color: var(--human); }
.arch__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.arch__filters .chip { display: inline-flex; align-items: center; gap: 8px; }
.arch__filters .chip--a::before, .arch__filters .chip--b::before, .arch__filters .chip--c::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, currentColor);
}
.chip--a { --c: var(--ch-a); } .chip--b { --c: var(--ch-b); } .chip--c { --c: var(--ch-c); }
.arch__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }

.arch__map {
  position: relative; aspect-ratio: 1.25 / 1; border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 50%, rgba(160, 62, 255, .16), transparent 55%), var(--ink-2);
  border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; isolation: isolate;
}
.arch__map::before { /* griglia a punti */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 75%); mask-image: radial-gradient(circle at center, #000 30%, transparent 75%);
}
.arch__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arch__wire { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.2; transition: stroke .4s, opacity .4s; }
.arch__wire--c { stroke-dasharray: 3 5; }
.arch__flow { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 14; opacity: .55; animation: ch-flow 1.6s linear infinite; transition: opacity .4s, stroke-width .4s; }
.arch__flow--a { stroke: var(--ch-a); }
.arch__flow--b { stroke: var(--ch-b); }
.arch__flow--c { stroke: var(--ch-c); animation-duration: 2.6s; opacity: .3; }
@keyframes ch-flow { to { stroke-dashoffset: -32; } }
.arch__wire.is-hot { stroke: rgba(255, 255, 255, .45); }
.arch__flow.is-hot { opacity: 1; stroke-width: 2.4; }
.arch__wires .is-dim { opacity: .1; }

.arch__orbit {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .08);
  transform: translate(-50%, -50%); pointer-events: none; animation: ch-spin 60s linear infinite;
}
.arch__orbit--1 { width: 58%; aspect-ratio: 1; }
.arch__orbit--2 { width: 96%; aspect-ratio: 1; animation-direction: reverse; animation-duration: 90s; }
@keyframes ch-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.arch__hub, .arch__node { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); translate: -50% -50%; }
.arch__hub {
  display: grid; place-items: center; align-content: center; text-align: center; gap: 4px;
  width: clamp(116px, 14vw, 168px); aspect-ratio: 1; border-radius: 50%; padding: 16px; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #8a45dc, var(--brand) 70%);
  border: 1px solid rgba(160, 62, 255, .45);
  box-shadow: 0 0 0 10px rgba(160, 62, 255, .06), 0 0 60px -10px rgba(160, 62, 255, .6);
}
.arch__hub::before { /* alone che respira */
  content: ""; position: absolute; inset: -10px; border-radius: inherit; border: 1px solid rgba(160, 62, 255, .4);
  animation: ch-halo 3s var(--ease-out) infinite; pointer-events: none;
}
@keyframes ch-halo { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.arch__hub .mono { color: rgba(255, 255, 255, .72); font-size: 10px; }
.arch__hub strong { color: var(--paper); font-size: clamp(13px, 1.2vw, 16px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 560; }

.arch__node {
  --c: var(--ch-a);
  z-index: 3; display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 16px 0 7px; border-radius: 99px; white-space: nowrap;
  background: rgba(18, 11, 31, .92); border: 1px solid rgba(255, 255, 255, .12); color: rgba(243, 239, 232, .82);
  font: 500 14px/1 var(--f-sans); letter-spacing: -0.01em; cursor: pointer;
  transition: background-color .4s, border-color .4s, color .4s, opacity .4s, transform .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .5s;
}
.arch__node--b { --c: var(--ch-b); }
.arch__node--c { --c: var(--ch-c); height: 38px; font-size: 13px; }
.arch__node svg {
  width: 30px; height: 30px; padding: 6px; border-radius: 50%; flex: none;
  fill: none; stroke: var(--c); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  background: color-mix(in oklab, var(--c) 14%, transparent);
  transition: background-color .4s, stroke .4s;
}
.arch__node--c svg { width: 26px; height: 26px; padding: 5px; }
.arch__node:hover { border-color: color-mix(in oklab, var(--c) 60%, transparent); color: #fff; transform: scale(1.06); }
.arch__node:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.arch__node.is-active {
  background: var(--c); border-color: var(--c); color: var(--ink); transform: scale(1.08);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--c) 18%, transparent), 0 14px 40px -10px color-mix(in oklab, var(--c) 70%, transparent);
}
.arch__node--b.is-active { color: #fff; }
.arch__node.is-active svg { stroke: currentColor; background: rgba(10, 6, 18, .12); }
.arch__node.is-dim { opacity: .22; }

.arch__panel {
  position: relative; display: flex; flex-direction: column; gap: 18px; overflow: hidden; isolation: isolate;
  padding: clamp(22px, 2.6vw, 34px); border-radius: var(--radius-lg);
  background: var(--ink-2); border: 1px solid rgba(255, 255, 255, .08); color: var(--paper);
}
.arch__panel::before { /* goccia del colore dell'area attiva */
  content: ""; position: absolute; z-index: -1; right: -30%; top: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--lane, var(--ch-a)) 22%, transparent), transparent);
  transition: background .8s;
}
.arch__panel .round-btn { border-color: rgba(255, 255, 255, .14); }
.arch__panel .round-btn:hover { background: var(--paper); color: var(--ink); }
.arch__panel-top { display: flex; align-items: center; gap: 16px; }
.arch__count { color: rgba(243, 239, 232, .4); flex: none; }
.arch__count b { color: var(--paper); font-weight: 500; }
.arch__timer { flex: 1; height: 2px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; }
.arch__timer i { display: block; height: 100%; background: var(--grad-hybrid); transform-origin: left; transform: scaleX(0); }
.arch__detail { display: grid; gap: 14px; align-content: start; flex: 1; }
.arch__detail[hidden] { display: none; }
.arch__detail.is-in > * { animation: ch-in .7s var(--ease-out) both; }
.arch__detail.is-in > *:nth-child(2) { animation-delay: .05s; }
.arch__detail.is-in > *:nth-child(3) { animation-delay: .1s; }
.arch__detail.is-in > *:nth-child(4) { animation-delay: .15s; }
@keyframes ch-in { from { opacity: 0; transform: translateY(14px); } }
.arch__detail h3 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1; letter-spacing: -0.045em; font-weight: 560; }
.arch__detail p { color: rgba(243, 239, 232, .72); font-size: 1.06rem; max-width: 30em; }
.arch__result {
  display: grid; gap: 8px; margin-top: 6px; padding: 16px 18px; border-radius: 18px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  color: var(--paper) !important;
}
.arch__result .mono { color: var(--human); font-size: 11px; }
.arch__lane { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; }
.arch__lane::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.arch__lane--a { color: var(--ch-a); }
.arch__lane--b { color: var(--ch-b); }
.arch__lane--c { color: var(--ch-c); }
.arch__nav { display: flex; gap: 10px; }

/* desktop: la mappa si ferma e lo scroll manda avanti le card una alla volta
   (case2026.js legge l'avanzamento). La corsa è di mezzo schermo per card. */
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
  .arch-pin { height: calc(100svh + (var(--n, 1) - 1) * 50svh); }
  .arch-pin > .arch { position: sticky; top: calc(var(--nav-h) + max(24px, (100svh - var(--nav-h) - 690px) / 2)); }
  .arch-pin .arch__map { max-height: calc(100svh - var(--nav-h) - 110px); }
}
/* card che entra: dal basso andando avanti, dall'alto tornando indietro */
.arch__detail.is-in-up > * { animation: ch-in-up .75s var(--ease-out) both; }
.arch__detail.is-in-down > * { animation: ch-in-down .75s var(--ease-out) both; }
.arch__detail.is-in-up > *:nth-child(2), .arch__detail.is-in-down > *:nth-child(2) { animation-delay: .05s; }
.arch__detail.is-in-up > *:nth-child(3), .arch__detail.is-in-down > *:nth-child(3) { animation-delay: .1s; }
.arch__detail.is-in-up > *:nth-child(4), .arch__detail.is-in-down > *:nth-child(4) { animation-delay: .15s; }
@keyframes ch-in-up { from { opacity: 0; transform: translateY(40px); } }
@keyframes ch-in-down { from { opacity: 0; transform: translateY(-40px); } }
/* indicatore a punti: una tacca per card */
.arch__steps { display: flex; gap: 6px; }
.arch__steps i { width: 18px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); transition: background-color .4s, width .5s var(--ease-out); }
.arch__steps i.is-done { background: rgba(255, 255, 255, .45); }
.arch__steps i.is-on { width: 34px; background: var(--lane, var(--ch-a)); }

@media (max-width: 1100px) {
  .arch__body { grid-template-columns: 1fr; }
  .arch__map { aspect-ratio: 1.5 / 1; }
}
@media (max-width: 700px) {
  .arch__map { aspect-ratio: 3 / 4.2; }
  .arch__node { left: calc(var(--xm, var(--x)) * 1%); top: calc(var(--ym, var(--y)) * 1%); }
  /* icona sopra l'etichetta: ogni nodo entra nella mappa di un telefono */
  .arch__node, .arch__node--c {
    flex-direction: column; justify-content: center; height: auto; gap: 4px;
    padding: 7px 8px 8px; border-radius: 16px; font-size: 11.5px; text-align: center;
  }
  .arch__node svg, .arch__node--c svg { width: 26px; height: 26px; padding: 5px; }
  .arch__node span { width: 6.8em; white-space: normal; line-height: 1.12; }
  .arch__hub { width: 92px; padding: 8px; }
  .arch__hub strong { font-size: 11.5px; }
  .arch__hub .mono { font-size: 8.5px; }
  .arch__orbit--2 { width: 130%; }
}

/* ---------- 4. I risultati ---------- */
.ch-results { padding-block: clamp(100px, 12vw, 170px); }
.ch-results .pg-split-head .serif { color: var(--brand); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpis--1 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
.kpi {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: space-between; gap: 28px; min-height: 280px;
  padding: clamp(22px, 2.4vw, 32px); border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line);
  transition: border-radius .9s cubic-bezier(.22, 1, .36, 1), translate .6s cubic-bezier(.34, 1.56, .64, 1), box-shadow .6s var(--ease-out);
}
.kpi::after { /* goccia viola che segue il mouse */
  content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0; transition: opacity .6s;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(98, 37, 157, .14), transparent 70%);
}
.kpi:hover { border-radius: 40px; translate: 0 -6px; box-shadow: 0 24px 40px -26px rgba(40, 10, 80, .45); }
.kpi:hover::after { opacity: 1; }
.kpi__num {
  font-size: clamp(4.2rem, 7.4vw, 7.4rem); line-height: .82; letter-spacing: -0.07em; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--brand); white-space: nowrap;
}
.kpi { container-type: inline-size; grid-template-columns: minmax(0, 1fr); }
.kpi__note, .kpi__label { overflow-wrap: anywhere; }
/* il numero non esce mai dal riquadro: al massimo un terzo della sua larghezza */
.kpi .kpi__num { font-size: min(var(--kpi-fs, clamp(4.2rem, 7.4vw, 7.4rem)), 32cqi); }
.kpis--4 { --kpi-fs: clamp(3.6rem, 6vw, 6.4rem); }
.kpi__unit { font-size: .5em; letter-spacing: -0.03em; vertical-align: .62em; margin-inline: .04em; }
.kpi__foot { display: grid; gap: 8px; }
.kpi__label { font-size: 17px; font-weight: 540; letter-spacing: -0.02em; line-height: 1.25; max-width: 15em; }
.kpi__note { color: var(--faint); font-size: 10.5px; line-height: 1.5; }
/* in evidenza: viola del marchio (niente fondi neri) */
.kpi--accent { background: var(--brand); color: #fff; border-color: var(--brand); }
.kpi--accent::after { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(252, 106, 58, .35), transparent 70%); }
.kpi--accent .kpi__num { color: #fff; }
.kpi--accent .kpi__note { color: rgba(255, 255, 255, .7); }

.ch-final {
  margin: clamp(56px, 7vw, 100px) 0 0; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 1920 / 760; background: var(--paper-2);
}
.ch-final img { width: 100%; height: 110%; object-fit: cover; }

.ch-legacy { display: grid; gap: 1em; max-width: 46em; margin-top: 48px; color: var(--muted); font-size: 1.08rem; }
.ch-legacy strong { color: var(--fg); font-weight: 560; }

.ch-impact { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: end; margin-top: clamp(64px, 8vw, 120px); }
.ch-impact__text { font-size: clamp(1.7rem, 3.4vw, 3.2rem); line-height: 1.08; letter-spacing: -0.04em; font-weight: 520; }
.ch-impact__text .w { opacity: .16; }
.ch-impact > :only-child { grid-column: 1 / -1; max-width: 24em; }
.ch-impact__text strong { color: var(--brand); font-weight: 560; }
.ch-impact__side { display: grid; gap: 16px; }
.ch-impact__side > p:not(.mono) { color: var(--muted); }
.ch-tags--static li > * { background: rgba(98, 37, 157, .06); border-color: rgba(98, 37, 157, .18); }

/* galleria: due righe che si incastrano (quadrata + larga / larga + quadrata) */
.bento { display: grid; grid-template-columns: 1fr .78fr 1fr; gap: 12px; margin-top: clamp(56px, 7vw, 100px); }
.bento__item { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); aspect-ratio: 1; }
.bento__item img { width: 100%; height: 100%; object-fit: cover; }
.bento--4 .bento__item:nth-child(4n+2) { grid-column: 2 / 4; aspect-ratio: 1.78 / 1; }
.bento--4 .bento__item:nth-child(4n+3) { grid-column: 1 / 3; aspect-ratio: 1.78 / 1; }
.bento--1, .bento--2, .bento--3 { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.bento--3 { --n: 3; } .bento--1 { --n: 1; }
.bento--3 .bento__item { aspect-ratio: 4 / 3; }
.bento--1 .bento__item { aspect-ratio: auto; }
.bento--1 .bento__item img { height: auto; }
.ch-video { margin-top: 28px; }
/* due foto: una larga e una verticale alla stessa altezza, come nella sfida */
.bento--2 { grid-template-columns: 1.8fr .89fr; }
.bento--2 .bento__item:first-child { aspect-ratio: 1.8; }
.bento--2 .bento__item:last-child { aspect-ratio: .89; }

@media (max-width: 1100px) { .kpis, .kpis--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .ch-impact { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 700px) {
  .ch-final { aspect-ratio: 4 / 3; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento--4 .bento__item:nth-child(4n+2), .bento--4 .bento__item:nth-child(4n+3) { grid-column: 1 / -1; aspect-ratio: 710 / 399; }
  .bento--3, .bento--2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .kpi { min-height: 200px; gap: 20px; padding: 20px; }
  .kpi { --kpi-fs: 3.6rem; }
  .kpi__label { font-size: 15px; }
}

/* ---------- 5. Testimonianza ---------- */
.ch-quote { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(100px, 12vw, 170px); }
.ch-quote__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; transition: opacity .9s var(--ease-out); }
.ch-quote__media img { width: 100%; height: 124%; margin-top: -12%; object-fit: cover; opacity: .55; }
.ch-quote__media::after { /* sfuma sopra e sotto nel fondo scuro */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(10, 6, 18, .55) 28%, rgba(10, 6, 18, .55) 72%, var(--ink) 100%);
}
/* quando la pagina passa al chiaro (sezione successiva) la foto sparisce */
body[data-theme="light"] .ch-quote__media { opacity: 0; }
.quote-card {
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  padding: clamp(32px, 6vw, 96px) clamp(24px, 6vw, 110px);
  border-radius: var(--radius-lg); background: rgba(18, 11, 31, .72); color: var(--paper);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  display: grid; gap: clamp(28px, 4vw, 48px);
}
.quote-card::before { /* filo sfumato arancio → viola */
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1;
  background: var(--grad-hybrid);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.quote-card::after { /* luce che segue il mouse */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx) var(--my), rgba(160, 62, 255, .22), transparent 60%);
}
.quote-card__mark {
  position: absolute; right: clamp(16px, 4vw, 60px); top: clamp(-40px, -2vw, -10px);
  font-size: clamp(12rem, 26vw, 24rem); line-height: 1; color: var(--human); opacity: .9; pointer-events: none;
}
.quote-card__text { margin: 0; }
.quote-card__text p { max-width: 21em; text-wrap: pretty; font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 1.06; letter-spacing: -0.045em; font-weight: 520; }
.quote-card__text .serif { font-size: 1.04em; }
.quote-card__by { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.quote-card__by > span:last-child { display: grid; gap: 4px; }
.quote-card__by strong { font-weight: 560; letter-spacing: -0.02em; font-size: 18px; }
.quote-card__role { color: rgba(243, 239, 232, .72); }
.quote-card__by .mono { color: rgba(243, 239, 232, .45); }
.quote-card__avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 3px rgba(252, 106, 58, .5); }
.quote-card__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- smartphone: ritmo verticale delle interne ---------- */
@media (max-width: 768px) {
  .ch-challenge, .ch-solution, .ch-results, .ch-quote { padding-block: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-hero__glow, .arch__orbit, .arch__flow, .arch__hub::before, .glocal__wire i { animation: none; }
  .arch__detail.is-in > *, .arch__detail.is-in-up > *, .arch__detail.is-in-down > * { animation: none; }
}