/* ============================================================
   SmartPuzzle — smartpuzzle.eu
   Palette e tipografia: modificare SOLO le variabili qui sotto.
   ============================================================ */

:root{
  /* — Palette (approvata, editabile) — */
  --petrolio:      #0E2C2C;  /* fondo scuro */
  --superficie:    #16403D;  /* schede e blocchi rialzati su fondo scuro */
  --marchio:       #0B4344;  /* verde del logo, su fondi chiari */
  --calce:         #E9E4D7;  /* fondo chiaro */
  --chiaro:        #F1EEE4;  /* testo su fondo scuro */
  --salvia:        #A8B8B2;  /* testo secondario su fondo scuro */
  --inchiostro:    #12211F;  /* testo su fondo chiaro */
  --grigio-medio:  #4A5654;  /* testo secondario su fondo chiaro */
  --ocra:          #D9A441;  /* accento: azioni, numeri, punti attivi */
  --filetto:       #636363;  /* linee sottili, bordi */

  /* — Tipografia — */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* — Scala (rapporto 1.25, base 16) — */
  --t-xs: .75rem;    /* 12 */
  --t-sm: .8125rem;  /* 13 */
  --t-base: 1rem;    /* 16 */
  --t-md: 1.25rem;   /* 20 */
  --t-lg: 1.5625rem; /* 25 */
  --t-xl: 1.953rem;  /* 31 */
  --t-2xl: 2.441rem; /* 39 */
  --t-hero: clamp(2.75rem, 6.5vw, 6rem); /* 44 → 96 */

  --maxw: 1120px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 10px;
}

/* — Font self-hosted (nessuna chiamata a CDN esterni) — */
@font-face{
  font-family:"Fraunces";
  src:url("../fonts/fraunces-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plexmono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("../fonts/plexmono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--chiaro);
  background:var(--petrolio);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ocra); outline-offset:3px; border-radius:2px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ocra); color:var(--petrolio);
  padding:.6rem 1rem; font-size:var(--t-sm); border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}

/* — occhielli mono — */
.eyebrow{
  font-family:var(--f-mono); font-weight:400;
  font-size:var(--t-xs); letter-spacing:.16em; text-transform:uppercase;
  color:var(--salvia); margin:0 0 1rem;
}
.on-light .eyebrow{color:var(--grigio-medio)}

/* — titoli — */
h1,h2,h3{font-family:var(--f-display); font-weight:480; line-height:1.12; margin:0 0 .75em; letter-spacing:-.01em}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-md); font-weight:520}

/* ============ Header ============ */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--petrolio) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid color-mix(in srgb, var(--chiaro) 10%, transparent);
}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:.8rem; padding-bottom:.8rem}
.brand{display:inline-flex; background:#fff; padding:8px 12px; border-radius:8px; line-height:0;
  box-shadow:0 1px 4px color-mix(in srgb, #000 18%, transparent)}
.site-head .brand img{height:30px; width:auto}
.nav{display:flex; gap:1.5rem; flex-wrap:wrap}
.nav a{
  font-size:var(--t-sm); text-decoration:none; color:var(--salvia);
  padding:.25rem 0; border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--chiaro); border-bottom-color:var(--ocra)}
@media (max-width:760px){ .nav{display:none} }

/* ============ Hero (video showreel) ============ */
.hero{
  position:relative; min-height:88vh; overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; background:#0a1f1f;
}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:75% center; display:block}
/* Su schermi via via più stretti il ritaglio si sposta a sinistra (l'immagine
   scivola a destra), così il lato sinistro del volto non viene tagliato. */
@media (max-width:900px){ .hero-media img{object-position:70% center} }
@media (max-width:760px){ .hero-media img{object-position:64% center} }
@media (max-width:600px){ .hero-media img{object-position:60% center} }
@media (max-width:480px){ .hero-media img{object-position:57% center} }
@media (max-width:380px){ .hero-media img{object-position:54% center} }
.hero-shade{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--petrolio) 82%, transparent) 0%,
      color-mix(in srgb, var(--petrolio) 30%, transparent) 55%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 30%,
      color-mix(in srgb, var(--petrolio) 80%, transparent) 100%);
}
@media (max-width:760px){
  .hero-shade{
    background:linear-gradient(to bottom,
      color-mix(in srgb, var(--petrolio) 45%, transparent) 0%,
      color-mix(in srgb, var(--petrolio) 92%, transparent) 100%);
  }
}
.hero-content{position:relative; z-index:2; padding-top:6rem; padding-bottom:clamp(2.5rem,7vh,5rem); width:100%}
.hero h1{font-size:var(--t-hero); max-width:14ch; margin-bottom:.4em}
.hero .lede{font-size:var(--t-md); color:var(--chiaro); max-width:52ch; margin:0 0 2rem;
  text-shadow:0 1px 12px color-mix(in srgb, var(--petrolio) 60%, transparent)}
.cta-row{display:flex; gap:.75rem; flex-wrap:wrap}
.btn{
  display:inline-block; font-size:var(--t-sm); text-decoration:none;
  padding:.75rem 1.4rem; border-radius:var(--radius);
  border:1px solid var(--salvia); color:var(--chiaro);
  transition:background .15s ease;
}
.btn:hover{background:var(--superficie)}
.btn-primary{background:var(--ocra); border-color:var(--ocra); color:var(--petrolio); font-weight:500}
.btn-primary:hover{background:color-mix(in srgb, var(--ocra) 88%, white)}

/* ============ Sezioni ============ */
section{padding:clamp(3.5rem,9vh,6.5rem) 0}
.on-light{background:var(--calce); color:var(--inchiostro)}
.on-light h2,.on-light h3{color:var(--inchiostro)}
.muted{color:var(--salvia)}
.on-light .muted{color:var(--grigio-medio)}
.prose{max-width:62ch}
.prose p{margin:0 0 1.1em}

/* — credibilità — */
.clients{
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
  font-family:var(--f-mono); font-size:var(--t-sm); color:var(--salvia);
  padding:0; margin:0 0 1.5rem; list-style:none;
}
.clients li::after{content:"·"; margin-left:1.6rem; color:var(--filetto)}
.clients li:last-child::after{content:""}
.attrib{font-size:var(--t-sm); color:var(--salvia); max-width:70ch; border-left:2px solid var(--ocra); padding-left:1rem}

/* — tre affermazioni — */
.claims{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem; margin-top:2.5rem}
.claims h3{margin-bottom:.35em}
.claims p{margin:0; font-size:var(--t-sm); line-height:1.6}

/* — prodotti — */
.products{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; margin-top:2rem}
.card{
  background:var(--superficie); border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.4rem;
  border:1px solid color-mix(in srgb, var(--chiaro) 8%, transparent);
}
.on-light .card{background:#fff; border-color:color-mix(in srgb, var(--inchiostro) 10%, transparent)}
.card .tag{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ocra); display:block; margin-bottom:.6rem;
}
.group-head{grid-column:1/-1; display:flex; align-items:center; gap:1rem; margin:.75rem 0 0}
.group-head:first-child{margin-top:0}
.group-head span{
  font-family:var(--f-mono); font-size:var(--t-sm); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ocra); white-space:nowrap;
}
.group-head::after{content:""; flex:1; height:1px; background:color-mix(in srgb, var(--ocra) 40%, transparent)}
.on-light .group-head span{color:var(--marchio)}
.on-light .group-head::after{background:color-mix(in srgb, var(--marchio) 35%, transparent)}
.on-light .card .tag{color:var(--marchio)}
.card h3{margin-bottom:.4em}
.card p{margin:0; font-size:var(--t-sm); line-height:1.6}
.also{font-size:var(--t-sm); color:var(--salvia); margin-top:1.75rem; font-style:italic}

/* — processo — */
.steps{counter-reset:step; display:grid; gap:0; margin-top:2rem; max-width:760px}
.step{
  counter-increment:step; position:relative;
  padding:1.4rem 0 1.4rem 4.2rem;
  border-top:1px solid color-mix(in srgb, var(--chiaro) 14%, transparent);
}
.step:last-child{border-bottom:1px solid color-mix(in srgb, var(--chiaro) 14%, transparent)}
.step::before{
  content:"0" counter(step);
  position:absolute; left:0; top:1.25rem;
  font-family:var(--f-mono); font-size:var(--t-md); color:var(--ocra);
}
.step h3{margin-bottom:.25em}
.step p{margin:0; font-size:var(--t-sm)}
.process-close{
  margin-top:2.25rem; max-width:56ch;
  font-family:var(--f-display); font-size:var(--t-base); line-height:1.5; color:var(--chiaro);
}

/* — progetti — */
.projects{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.25rem; margin-top:2rem}
.proj{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--superficie); border-radius:var(--radius); overflow:hidden;
  border:1px solid color-mix(in srgb, var(--chiaro) 8%, transparent);
  transition:transform .15s ease, border-color .15s ease;
}
.proj:hover{transform:translateY(-3px); border-color:var(--ocra)}
.proj .thumb{aspect-ratio:16/9; background:#0a1f1f}
.proj .thumb svg{width:100%; height:100%; display:block}
.proj .body{padding:1.1rem 1.25rem 1.25rem}
.proj .meta{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--salvia); margin-bottom:.4rem;
}
.proj h3{margin-bottom:.3em}
.proj p{margin:0; font-size:var(--t-sm); color:var(--salvia); line-height:1.55}

/* — numeri — */
.numbers{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:2rem 2.5rem; margin-top:2.5rem}
.num .val{
  font-family:var(--f-display); font-size:var(--t-2xl); line-height:1;
  color:var(--ocra); display:block; margin-bottom:.35rem;
}
.num .lbl{font-size:var(--t-sm); color:var(--salvia); max-width:26ch}
.num .pre{display:block; font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.02em; color:var(--salvia); margin-bottom:.1rem}
.on-light .num .pre{color:var(--grigio-medio)}
.num-note{font-size:var(--t-xs); color:var(--salvia); margin-top:2rem; opacity:.85}

/* — team — */
.legal-note{max-width:66ch; font-size:var(--t-sm); margin-bottom:2.5rem}
.team{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.25rem}
.person{
  background:#fff; border-radius:var(--radius); padding:1.4rem 1.5rem;
  border:1px solid color-mix(in srgb, var(--inchiostro) 10%, transparent);
}
.person.socio{border-top:3px solid var(--ocra); border-radius:0 0 var(--radius) var(--radius)}
.person .role{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--marchio); display:block; margin-bottom:.5rem;
}
.person h3{margin-bottom:.4em}
.person p{margin:0; font-size:var(--t-sm); line-height:1.6}
.person a{color:var(--marchio)}

/* — come si acquista — */
.buy{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; margin-top:2rem}
.buy .card h3{font-family:var(--f-body); font-weight:600; font-size:var(--t-base)}
.admin-note{
  font-family:var(--f-mono); font-size:var(--t-xs); color:var(--salvia);
  margin-top:2rem; letter-spacing:.02em; max-width:80ch; line-height:1.8;
}

/* — contatti — */
.contact h2{max-width:18ch}
.contact-card{
  margin-top:1.5rem; font-size:var(--t-sm);
}
.contact .muted{font-size:var(--t-sm)}
.contact-card a{color:var(--ocra); text-decoration-color:color-mix(in srgb, var(--ocra) 50%, transparent)}
/* la sezione contatti ora è su fondo chiaro: link email in verde marchio per contrasto */
.on-light .contact-card a{color:var(--marchio); text-decoration-color:color-mix(in srgb, var(--marchio) 45%, transparent)}


.brand-foot{display:inline-flex; margin-bottom:.6rem}
.payoff-line{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ocra); margin:0 0 1.4rem;
}
.brand-foot img{height:30px; width:auto}

/* — schede prodotti/servizi (sez. 03) — */
.card-img{display:block; margin:1rem 0 0; border-radius:var(--radius); overflow:hidden; line-height:0}
.card-img img{width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover;
  background:color-mix(in srgb, var(--superficie) 60%, var(--petrolio))}
.card-more{margin-top:1rem}
.card-more>summary{
  cursor:pointer; list-style:none; font-family:var(--f-mono); font-size:var(--t-sm);
  letter-spacing:.02em; color:var(--ocra); display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem 0;
}
.card-more>summary::-webkit-details-marker{display:none}
.card-more>summary::after{content:"+"; font-size:1.1em; line-height:1}
.card-more[open]>summary::after{content:"–"}
.card-more>summary:hover{color:color-mix(in srgb, var(--ocra) 85%, white)}
.card-more-body{padding-top:.5rem}
.card-more-body p{margin:0 0 .8rem}
.card-more-body p:last-child{margin-bottom:0}
.card-more-body .card-cta{display:inline-block; margin-top:1rem}


/* — selettore lingua — */
.lang-switch{display:flex; gap:.4rem; align-items:center; margin-left:1.25rem}
.lang-btn{
  background:none; border:1px solid transparent; padding:2px; cursor:pointer;
  line-height:0; border-radius:3px; opacity:.45; transition:opacity .2s ease, border-color .2s ease;
}
.lang-btn:hover{opacity:.8}
.lang-btn.active{opacity:1; border-color:color-mix(in srgb, var(--chiaro) 45%, transparent)}
.lang-btn svg{width:24px; height:16px; display:block; border-radius:2px}
.lang-btn:focus-visible{outline:2px solid var(--ocra); outline-offset:2px}
@media (max-width:760px){ .lang-switch{margin-left:auto} }

/* — footer — */
.site-foot{
  background:color-mix(in srgb, var(--petrolio) 88%, transparent);
  border-top:1px solid color-mix(in srgb, var(--chiaro) 10%, transparent);
  padding:2.5rem 0 3rem; font-size:var(--t-xs); color:var(--salvia);
}
.site-foot .wrap{display:block}
.foot-row{display:flex; flex-wrap:wrap; gap:1.5rem 3rem; justify-content:space-between; align-items:flex-start}
.site-foot p{margin:0 0 .4rem; line-height:1.8}
.foot-contacts p{margin-bottom:0}
.site-foot a{color:var(--salvia)}

/* ============ Pagine progetto ============ */
.case-hero{padding:clamp(2.5rem,6vh,4.5rem) 0 0}
.case-hero .back{
  font-family:var(--f-mono); font-size:var(--t-sm); color:var(--salvia);
  text-decoration:none; display:inline-block; margin-bottom:2rem;
}
.case-hero .back:hover{color:var(--ocra)}
.case-hero h1{font-size:clamp(2rem,4.5vw,3.4rem); max-width:20ch}
.case-meta{
  display:flex; flex-wrap:wrap; gap:.4rem 2rem; margin:1.5rem 0 2.5rem;
  font-family:var(--f-mono); font-size:var(--t-sm); color:var(--salvia);
}
.case-meta b{color:var(--chiaro); font-weight:500}
.case-visual{
  border-radius:var(--radius); overflow:hidden; margin-bottom:3rem;
  border:1px solid color-mix(in srgb, var(--chiaro) 12%, transparent);
  background:#0a1f1f; aspect-ratio:16/9;
}
.case-visual svg{width:100%; height:100%; display:block}
.case-body{max-width:66ch; padding-bottom:3rem}
.case-body p{margin:0 0 1.1em}
.case-links{padding-bottom:4rem}
.case-links .btn{margin-right:.6rem}

/* — facciata Sketchfab / model-viewer — */
.facade{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:#0a1f1f; aspect-ratio:16/9; margin-bottom:1rem;
  border:1px solid color-mix(in srgb, var(--chiaro) 12%, transparent);
}
.facade svg{width:100%; height:100%; display:block; opacity:.9}
.facade .thumb, .facade .thumb img{width:100%; height:100%; display:block}
.facade .thumb img{object-fit:cover}
.facade iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.facade .facade-btn{
  position:absolute; inset:0; margin:auto; width:max-content; height:max-content;
  background:var(--ocra); color:var(--petrolio); border:0; border-radius:var(--radius);
  font-family:var(--f-body); font-weight:500; font-size:var(--t-sm);
  padding:.85rem 1.5rem; cursor:pointer;
}
.facade .facade-btn:hover{background:color-mix(in srgb, var(--ocra) 88%, white)}

/* ============ Progetti espandibili (sostituisce le pagine separate) ============ */
.proj-list{display:grid; gap:.9rem; margin-top:2rem}
.proj-acc{
  background:var(--superficie); border-radius:var(--radius);
  border:1px solid color-mix(in srgb, var(--chiaro) 8%, transparent);
  overflow:hidden;
}
.proj-acc[open]{border-color:color-mix(in srgb, var(--ocra) 55%, transparent)}
.proj-acc summary{
  display:grid; grid-template-columns:2.6rem 1fr auto; align-items:baseline;
  gap:0 1.1rem; padding:1.15rem 1.4rem; cursor:pointer; list-style:none;
}
.proj-acc summary::-webkit-details-marker{display:none}
.proj-acc summary:hover{background:color-mix(in srgb, var(--chiaro) 4%, transparent)}
.proj-acc .n{
  font-family:var(--f-mono); font-size:var(--t-sm); color:var(--ocra);
}
.proj-acc .head h3{margin:0 0 .15em; font-size:var(--t-md)}
.proj-acc .head .meta{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--salvia);
}
.proj-acc .chev{
  font-family:var(--f-mono); font-size:var(--t-sm); color:var(--salvia);
  transition:transform .15s ease; align-self:center;
}
.proj-acc[open] .chev{transform:rotate(45deg); color:var(--ocra)}
.proj-body{
  padding:1.25rem 1.4rem 1.5rem;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:1.75rem; align-items:start;
}
@media (max-width:820px){ .proj-body{grid-template-columns:1fr} }
.proj-body .text{max-width:60ch}
.proj-body .text p{margin:0 0 1em; font-size:var(--t-sm); line-height:1.65; color:var(--chiaro)}
.proj-body .text p:last-of-type{margin-bottom:1.25rem}
.proj-body .visual{position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid color-mix(in srgb, var(--chiaro) 10%, transparent); background:#0a1f1f}
.proj-body .visual svg{width:100%; height:auto; display:block}
.proj-body .visual .thumb, .proj-body .visual .thumb img{display:block; width:100%}
.proj-body .visual .thumb img{height:auto; aspect-ratio:16/9; object-fit:cover}
.proj-body .facade{margin-bottom:.5rem; aspect-ratio:16/9}
.proj-body .btn{font-size:var(--t-xs); padding:.6rem 1.1rem}

/* ============ Innesti dalla grammatica Baceno ============ */

/* filetto corto sotto i titoli di sezione */
.hr{width:44px; height:2px; background:var(--ocra); border:0; margin:1.25rem 0 2rem}
.on-light .hr{background:var(--marchio)}

/* griglia di metadati bordata (schede progetto) */
.meta-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border:1px solid color-mix(in srgb, var(--chiaro) 22%, transparent);
  margin:0 0 1.5rem;
}
.meta-item{
  padding:.9rem 1.1rem;
  border-right:1px solid color-mix(in srgb, var(--chiaro) 14%, transparent);
}
.meta-item:last-child{border-right:0}
@media (max-width:580px){
  .meta-item{border-right:0; border-bottom:1px solid color-mix(in srgb, var(--chiaro) 14%, transparent)}
  .meta-item:last-child{border-bottom:0}
}
.meta-key{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.16em;
  text-transform:uppercase; color:var(--salvia); margin-bottom:.2rem;
}
.meta-val{font-size:var(--t-sm); color:var(--chiaro); line-height:1.45}

/* sottotitolo interno alla sezione unificata */
.subhead{
  font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.18em;
  text-transform:uppercase; color:var(--salvia);
  margin:3.5rem 0 0; padding-top:2rem;
  border-top:1px solid color-mix(in srgb, var(--chiaro) 10%, transparent);
}

/* comparsa allo scorrimento: lo stato nascosto esiste solo con JS attivo */
.js .fade-in{opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease}
.js .fade-in.visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .js .fade-in{opacity:1; transform:none; transition:none}
}

/* ============ Barra clienti scorrevole ============ */
.ticker{
  overflow:hidden; position:relative; margin:0 0 1.75rem;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track{
  display:flex; align-items:baseline; gap:2.4rem;
  width:max-content; padding:1.1rem 0;
  animation:ticker 95s linear infinite;
}
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker-track span{
  font-family:var(--f-mono); font-size:var(--t-base);
  color:var(--salvia); white-space:nowrap; line-height:1.4;
}
.ticker-track span::after{
  content:"·"; margin-left:2.4rem; color:var(--filetto);
}
@keyframes ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{animation:none}
  .ticker{
    overflow-x:auto; -webkit-mask-image:none; mask-image:none;
    scrollbar-width:thin;
  }
}

/* — sez. 04 Progetti su fondo chiaro: adattamento degli accordion — */
.on-light .proj-acc{background:#fff; border-color:color-mix(in srgb, var(--inchiostro) 12%, transparent)}
.on-light .proj-acc[open]{border-color:color-mix(in srgb, var(--ocra) 55%, transparent)}
.on-light .proj-acc summary:hover{background:color-mix(in srgb, var(--inchiostro) 4%, transparent)}
.on-light .proj-acc .head .meta{color:var(--grigio-medio)}
.on-light .proj-acc .chev{color:var(--grigio-medio)}
.on-light .proj-body .text p{color:var(--inchiostro)}
.on-light .meta-grid{border-color:color-mix(in srgb, var(--inchiostro) 20%, transparent)}
.on-light .meta-item{border-color:color-mix(in srgb, var(--inchiostro) 12%, transparent)}
@media (max-width:580px){ .on-light .meta-item{border-color:color-mix(in srgb, var(--inchiostro) 12%, transparent)} }
.on-light .meta-key{color:var(--grigio-medio)}
.on-light .meta-val{color:var(--inchiostro)}
.on-light .num .lbl{color:var(--grigio-medio)}

/* — contatori d'impatto dentro la scheda progetto — */
.proj-impact{display:flex; flex-wrap:wrap; gap:1.1rem 2rem; margin:0 0 1.4rem}
.proj-impact .num{min-width:6.5rem}
.proj-impact .val{font-size:var(--t-lg)}
.proj-impact .lbl{max-width:18ch}