/* =================================================
   CHI SIAMO — page-specific styles
   (rely on tokens + components from styles.css)
   ================================================= */

/* Header active link */
.hd__active{
  background:var(--primary-soft);
  color:var(--primary)!important;
}

/* Section system */
.sec{
  padding:clamp(64px, 7vw, 140px) 0;
}
.sec--alt{
  background:color-mix(in oklab, var(--primary-soft) 35%, var(--bg));
}
.sec__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter);
}
.sec__head{
  display:flex;align-items:end;justify-content:space-between;gap:32px;
  margin-bottom:clamp(40px, 4vw, 72px);
}
.sec__head--center{
  justify-content:center;text-align:center;
}
.sec__head--center .lede{margin-left:auto;margin-right:auto}

/* =================================================
   PAGE HERO
   ================================================= */
.ph{
  position:relative;overflow:hidden;
  padding:clamp(48px, 5vw, 96px) 0 clamp(40px, 4vw, 64px);
  background:
    radial-gradient(50% 80% at 100% 0%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 60%);
}
.ph__inner{
  max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter);
}

/* Breadcrumb */
.crumbs{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;
  color:var(--muted);letter-spacing:0.04em;
  margin-bottom:36px;
}
.crumbs a:hover{color:var(--primary)}
.crumbs span[aria-hidden]{opacity:.5}

.ph__grid{
  display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(40px, 4vw, 80px);
  align-items:end;
  margin-bottom:clamp(48px, 5vw, 96px);
}
.ph__copy .display{margin:14px 0 22px}
.ph__copy .lede{max-width:60ch}
.ph__copy .lede strong{font-weight:600;color:var(--ink)}
.ph__copy .lede em{font-family:var(--font-display);font-style:italic;color:var(--primary);font-weight:400}

.ph__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.tagchip{
  display:inline-flex;align-items:center;
  padding:6px 12px;border-radius:999px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.02em;
  color:var(--muted);
}

/* TOC */
.ph__side{
  align-self:stretch;
  border-left:1px solid var(--border);
  padding:0 0 0 32px;
}
.ph__sideHead{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px;
}
.toc{list-style:none;padding:0;margin:0;display:grid;gap:2px;counter-reset:toc}
.toc li{counter-increment:toc;position:relative}
.toc li::before{
  content:counter(toc, decimal-leading-zero);
  position:absolute;left:0;top:10px;
  font-family:var(--font-mono);font-size:11px;color:var(--muted);
}
.toc a{
  display:block;padding:10px 0 10px 36px;
  font-size:15px;color:var(--ink);
  border-bottom:1px dashed transparent;
  transition:color .2s,border-color .2s,padding .2s;
}
.toc a:hover{color:var(--primary);padding-left:44px}
.toc a:hover ~ *,
.toc li:has(a:hover)::before{color:var(--primary)}

/* Hero stats — same .stat from styles.css */
.ph__stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);
}

/* =================================================
   DESCRIZIONE — lead 2col
   ================================================= */
.lead2col{
  display:grid;grid-template-columns:0.8fr 1.2fr;gap:clamp(40px, 4vw, 96px);
  align-items:start;
}
.lead2col__left{position:sticky;top:96px}
.lead2col__right{display:grid;gap:20px}
.prose{
  font-size:clamp(16px, 1.05vw, 18px);
  line-height:1.65;color:var(--ink);
  max-width:62ch;margin:0;
}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}

.pull{
  margin:8px 0 0;padding:24px 28px;
  border-left:3px solid var(--primary);
  background:color-mix(in oklab, var(--primary-soft) 70%, transparent);
  border-radius:0 var(--r) var(--r) 0;
}
.pull p{
  margin:0;font-family:var(--font-display);font-style:italic;
  font-size:clamp(22px, 2vw, 30px);line-height:1.25;letter-spacing:-0.01em;
  color:var(--ink);
}
.pull p em{color:var(--primary)}
.pull footer{
  margin-top:10px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--muted);
}

/* =================================================
   TIMELINE
   ================================================= */
.tl{
  list-style:none;padding:0;margin:0;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  position:relative;
  gap:0;
}
.tl::before{
  content:"";position:absolute;top:36px;left:0;right:0;height:1px;
  background:linear-gradient(90deg, var(--border) 0%, var(--border) 95%, transparent);
}
.tl__item{
  position:relative;padding:0 16px 0 0;
}
.tl__item:not(:last-child){border-right:1px dashed transparent}
.tl__y{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(36px, 3.4vw, 56px);line-height:1;letter-spacing:-0.02em;
  color:var(--primary);
}
.tl__dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--surface);
  box-shadow:0 0 0 3px var(--primary);
  margin:12px 0 18px;position:relative;z-index:1;
}
.tl__t{
  font-size:16px;font-weight:600;letter-spacing:-0.005em;
  margin:0 0 6px;
}
.tl__d{
  font-size:13.5px;color:var(--muted);line-height:1.5;
  margin:0;max-width:30ch;
}

@media (max-width: 900px){
  .tl{grid-template-columns:1fr;gap:8px}
  .tl::before{display:none}
  .tl__item{
    padding:18px 0 18px 24px;
    border-left:1px solid var(--border);
  }
  .tl__dot{margin:8px 0 12px}
  .tl__y{font-size:32px}
}

/* =================================================
   ATTIVITÀ — card grid
   ================================================= */
.acts{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;
}
.actcard{
  position:relative;
  padding:28px;border-radius:var(--r);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);
  display:flex;flex-direction:column;gap:16px;
  min-height:220px;
  animation:cardIn .5s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:calc(var(--i) * 40ms);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.actcard:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--primary) 30%, transparent),
    0 24px 40px -22px color-mix(in oklab, var(--primary) 30%, transparent);
}
.actcard__top{display:flex;align-items:center;justify-content:space-between}
.actcard__n{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;
  color:var(--muted);
}
.actcard__icon{
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:12px;
  background:var(--primary-soft);color:var(--primary);
}
.actcard__t{
  font-size:18px;font-weight:600;letter-spacing:-0.01em;line-height:1.25;
  margin:0;
}
.actcard__d{
  font-size:14px;color:var(--muted);line-height:1.5;margin:0;
}

@media (max-width:900px){.acts{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.acts{grid-template-columns:1fr}}

/* =================================================
   GUIDE — cloud
   ================================================= */
.cloud{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;
  max-width:1100px;margin:0 auto;
}
.cloud__chip{
  display:flex;align-items:center;gap:14px;
  padding:18px 22px;border-radius:var(--r);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
  animation:cardIn .5s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:calc(var(--i) * 30ms);
}
.cloud__chip:hover{
  background:var(--primary);color:#fff;
  box-shadow:inset 0 0 0 1px transparent,
             0 16px 28px -16px color-mix(in oklab, var(--primary) 50%, transparent);
  transform:translateY(-1px);
}
.cloud__n{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;
  color:var(--muted);min-width:24px;
  transition:color .2s;
}
.cloud__chip:hover .cloud__n{color:color-mix(in oklab, white 70%, transparent)}
.cloud__t{
  flex:1;font-size:14.5px;font-weight:500;
}
.cloud__arr{opacity:0;transform:translateX(-4px);transition:opacity .2s, transform .2s, color .2s;color:var(--muted)}
.cloud__chip:hover .cloud__arr{opacity:1;transform:none;color:#fff}

@media (max-width:1024px){.cloud{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.cloud{grid-template-columns:1fr}}

/* =================================================
   OBIETTIVI
   ================================================= */
.obj{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
}
.obj__lbl{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--muted);
  padding-bottom:14px;border-bottom:1px solid var(--border);
  margin-bottom:22px;
}
.numlist{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.numlist li{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  font-size:16px;line-height:1.55;color:var(--ink);
  padding:6px 0;
}
.numlist__n{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.04em;
  color:var(--muted);min-width:24px;margin-top:4px;
}
.numlist--accent .numlist__n{color:var(--primary)}

@media (max-width:900px){.obj{grid-template-columns:1fr;gap:40px}}

/* =================================================
   RISULTATI
   ================================================= */
.results{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(2, 1fr);
  gap:0;
  border-top:1px solid var(--border);
}
.results__item{
  display:flex;gap:18px;align-items:flex-start;
  padding:28px 28px 28px 0;
  border-bottom:1px solid var(--border);
}
.results__item:nth-child(odd){padding-right:48px}
.results__item:nth-child(even){padding-left:48px;border-left:1px solid var(--border)}
.results__c{
  display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--primary);color:#fff;flex-shrink:0;
}
.results__t{
  font-size:17px;font-weight:600;letter-spacing:-0.01em;margin:2px 0 6px;
}
.results__d{
  font-size:14px;color:var(--muted);line-height:1.55;margin:0;
}

@media (max-width:900px){
  .results{grid-template-columns:1fr}
  .results__item:nth-child(even){padding-left:0;border-left:0}
  .results__item:nth-child(odd){padding-right:0}
}

/* =================================================
   SOSTENIBILITÀ
   ================================================= */
#sostenibilita.sec--alt{
  /* Fade smoothly into page bg towards the bottom so the
     transition to the CTA / footer is seamless */
  background:linear-gradient(
    180deg,
    color-mix(in oklab, var(--primary-soft) 35%, var(--bg)) 0%,
    color-mix(in oklab, var(--primary-soft) 35%, var(--bg)) 35%,
    color-mix(in oklab, var(--primary-soft) 18%, var(--bg)) 65%,
    var(--bg) 100%
  );
  padding-bottom:clamp(96px, 8vw, 180px);
}
.sustain{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px, 5vw, 96px);
  align-items:center;
}
.sustain__pillars{
  display:grid;gap:12px;
}
.pillar{
  display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:4px;
  padding:22px 24px;border-radius:var(--r);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border);
  align-items:start;
}
.pillar__n{
  grid-row:1 / span 2;
  font-family:var(--font-display);font-size:36px;line-height:1;color:var(--primary);
  width:48px;
}
.pillar__t{font-size:16px;font-weight:600;letter-spacing:-0.005em}
.pillar__d{font-size:13.5px;color:var(--muted);line-height:1.5}

@media (max-width:900px){.sustain{grid-template-columns:1fr;gap:48px}}

/* =================================================
   PAGE HERO — responsive
   ================================================= */
@media (max-width:1024px){
  .ph__grid{grid-template-columns:1fr;gap:40px}
  .ph__side{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:28px}
  .ph__stats{grid-template-columns:repeat(2, 1fr)}
  .lead2col{grid-template-columns:1fr;gap:32px}
  .lead2col__left{position:static}
}
@media (max-width:600px){
  .ph__stats{grid-template-columns:1fr}
}