/* chi-siamo.css: pagina /azienda/chi-siamo/. Si carica dopo casi-studio.css (da cui riusa la fascia dei numeri). */

/* hero a tutta altezza, in pesca chiaro (gli accenti caldi della palette, distinti dal verde delle hero prodotto);
   l'immagine sotto sta a cavallo tra la hero e il resto della pagina */
.ab-hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:120px 0 300px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#fff 0,#fffbf7 45%,#fef1e5 100%)}
.ab-hero:before,.ab-hero:after{content:"";position:absolute;border-radius:50%;pointer-events:none;border-style:solid;border-color:rgba(247,169,99,.08)}
.ab-hero:before{width:560px;height:560px;left:-380px;top:120px;border-width:110px}
.ab-hero:after{width:760px;height:760px;right:-200px;top:140px;border-width:80px}
.ab-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:end;position:relative;z-index:1}
.ab-hero h1{margin-top:24px;font-size:var(--fs-dl);line-height:var(--lh-dl);letter-spacing:var(--ls-dl);font-weight:var(--fw-dl)}
.ab-hero h1 .hl{display:block}
.ab-hero .sub{color:var(--ink-2);font-size:var(--fs-tl);line-height:30px;font-weight:400;max-width:620px}
.ab-hero .sub b{font-weight:600;color:var(--ink)}
.ab-media{position:relative;z-index:2;margin-top:-260px}
.ab-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-xl);box-shadow:0 24px 60px -12px rgba(43,48,54,.28)}

/* sezioni */
.ab-sec{padding:112px 0}
.ab-sec.alt{background:#f7f8f9}
.ab-sec h2,.cs-nums h2{margin-top:24px;max-width:860px;font-size:var(--fs-ds);line-height:var(--lh-ds);letter-spacing:var(--ls-ds);font-weight:var(--fw-ds)}
.ab-sec .lead2{margin-top:20px;max-width:760px}
.cs-nums .tag{position:relative}

/* missione */
.ab-mis{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:56px}
.ab-mis>*{min-width:0}
.ab-mis .it{background:#fff;border:1px solid #dfe3e7;border-radius:var(--r-xl);padding:32px}
.ab-mis .ic{width:48px;height:48px;border-radius:12px;background:#348e9e;display:grid;place-items:center}
.ab-mis .ic img{display:block}
.ab-mis h3{margin-top:24px;font-size:var(--fs-hs);line-height:var(--lh-hs);font-weight:var(--fw-hs)}
.ab-mis p{margin-top:12px;color:var(--ink-2);font-size:var(--fs-bm);line-height:var(--lh-bm)}
.ab-mis b{font-weight:600}

/* business unit */
.ab-bu{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
.ab-bu>*{min-width:0}
.ab-bu .bu{background:var(--card);border-radius:var(--r-xl);padding:28px;box-shadow:0 16px 40px -8px rgba(75,85,99,.16);border-top:4px solid var(--teal)}
.ab-bu .nm{font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:var(--fs-bm);color:var(--teal-700)}
.ab-bu .nm span{color:#9cc5c6;padding:0 4px}
.ab-bu h3{margin-top:16px;font-size:var(--fs-tl);line-height:var(--lh-tl);font-weight:var(--fw-tl)}
.ab-bu p:last-child{margin-top:12px;color:var(--muted);font-size:var(--fs-bm);line-height:var(--lh-bm)}

/* storia: linea del tempo */
.ab-story{list-style:none;margin:64px 0 0;padding:0;position:relative}
/* la linea collega le date e si ferma all’ultima */
.ab-story li:not(:last-child):after{content:"";position:absolute;left:79px;top:20px;bottom:-20px;width:2px;background:#d3e3e4}
.ab-story li{display:grid;grid-template-columns:160px minmax(0,1fr);gap:0 40px;padding-bottom:56px;position:relative}
.ab-story li.pic{grid-template-columns:160px minmax(0,1fr) minmax(0,420px)}
.ab-story li:last-child{padding-bottom:0}
.ab-story .y{position:relative;z-index:1;align-self:start;justify-self:center;background:var(--teal);color:#fff;font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:var(--fs-bm);padding:8px 14px;border-radius:999px;white-space:nowrap}
.ab-story h3{font-size:var(--fs-hs);line-height:var(--lh-hs);font-weight:var(--fw-hs)}
.ab-story p{margin-top:12px;color:var(--ink-2);font-size:var(--fs-bm);line-height:var(--lh-bm);max-width:620px}
.ab-story b{font-weight:600;color:var(--ink)}
.ab-story .hl2{display:inline-block;margin-top:20px;padding:6px 14px;border-radius:999px;background:#fde6d2;color:#8a5a2a;font-weight:600;font-size:var(--fs-bs)}
.ab-story img{width:100%;height:auto;border-radius:var(--r-lg);background:#fff}

/* modulo: scelta delle funzionalità a pillole */
.fm .fset{border:0;margin:0;padding:0;min-width:0}
.fm .fset legend{padding-left:24px;font-size:var(--fs-bs);color:#e6f0f0}
.fm .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fm .chip{position:relative;cursor:pointer}
.fm .chip input{position:absolute;opacity:0;width:1px;height:1px}
.fm .chip span{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border:1.5px solid rgba(252,252,252,.35);border-radius:999px;font-size:var(--fs-bs);line-height:1.2;color:#e6f0f0;transition:background .25s ease,border-color .25s ease,color .25s ease}
.fm .chip:hover span{border-color:rgba(252,252,252,.7)}
.fm .chip input:checked+span{background:var(--amber);border-color:var(--amber);color:#2b3036;font-weight:600}
.fm .chip input:checked+span:before{content:"✓"}
.fm .chip input:focus-visible+span{outline:3px solid #fcd4b0;outline-offset:2px}

@media (max-width:1100px){
  .ab-hero .wrap{grid-template-columns:1fr;gap:32px;align-items:start}
  .ab-bu{grid-template-columns:1fr 1fr}
  .ab-story li.pic{grid-template-columns:160px minmax(0,1fr)}
  .ab-story li.pic img{grid-column:2;margin-top:24px;max-width:420px}
}
@media (max-width:720px){
  .ab-hero{padding:112px 0 140px}
  .ab-hero .sub{font-size:var(--fs-bl);line-height:var(--lh-bl)}
  .ab-media{margin-top:-100px}
  .ab-sec{padding:72px 0}
  .ab-mis,.ab-bu{grid-template-columns:1fr}
  .ab-mis .it{padding:24px}
  .ab-story li:not(:last-child):after{left:7px;top:26px}
  .ab-story li,.ab-story li.pic{grid-template-columns:1fr;padding-left:32px}
  .ab-story .y{justify-self:start;margin-bottom:12px}
  .ab-story li.pic img{grid-column:1}
  .ab-story li:before{content:"";position:absolute;left:0;top:10px;width:16px;height:16px;border-radius:50%;background:var(--teal);border:3px solid #fff;box-shadow:0 0 0 1px #d3e3e4}
}

/* com'è nata ibrida.io: 6 tappe con icona */
.ab-val{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.ab-val>*{min-width:0}
.ab-val .v{background:#fff;border:1px solid #dfe3e7;border-radius:var(--r-xl);padding:32px}
.ab-val .ic{width:48px;height:48px;border-radius:12px;background:#348e9e;color:#fff;display:grid;place-items:center}
.ab-val .ic svg{width:26px;height:26px}
.ab-val .y{display:block;margin-top:24px;font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:var(--fs-bs);letter-spacing:.5px;color:var(--teal-700)}
.ab-val h3{margin-top:6px;font-size:var(--fs-hs);line-height:var(--lh-hs);font-weight:var(--fw-hs)}
.ab-val p{margin-top:12px;color:var(--ink-2);font-size:var(--fs-bm);line-height:var(--lh-bm)}
/* immagini della storia in 4:3 */
.ab-story img{aspect-ratio:4/3;object-fit:contain}
.ab-team{margin-top:48px}
@media (max-width:1100px){.ab-val{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.ab-val{grid-template-columns:1fr}.ab-val .v{padding:24px}}
/* su mobile un solo cerchio nella hero, altrimenti si sovrappongono */
@media (max-width:720px){.ab-hero:after{display:none}}

/* Chi siamo: un unico sfondo chiaro, senza fasce alternate */
[data-page="azienda-chi-siamo"] main{background:#f6f7f8}
[data-page="azienda-chi-siamo"] .ab-sec.alt,[data-page="azienda-chi-siamo"] .ctx{background:transparent}
[data-page="azienda-chi-siamo"] .ab-sec+.ab-sec:not(.ab-why):not(.ab-why+.ab-sec){padding-top:0}

/* «Perché sceglierci»: unica fascia verde scuro, testi al centro, per spezzare il ritmo */
.ab-why{background:linear-gradient(160deg,#162d31 0,#1a4345 55%,#1f5558 100%);color:#fcfcfc;text-align:center;position:relative;overflow:hidden}
.ab-why:before{content:"";position:absolute;width:900px;height:900px;left:-420px;top:-200px;border-radius:50%;border:80px solid rgba(143,191,194,.06);pointer-events:none}
.ab-why .wrap{position:relative}
.ab-why h2{color:#fcfcfc;margin-left:auto;margin-right:auto}
.ab-why .lead2{color:#d5e2e3;margin-left:auto;margin-right:auto}
.ab-why .ab-val .v{background:rgba(252,252,252,.06);border-color:rgba(252,252,252,.14);display:flex;flex-direction:column;align-items:center}
.ab-why .ab-val .ic{background:#348e9e}
.ab-why .ab-val .y{color:#fcd4b0}
.ab-why .ab-val h3{color:#fcfcfc}
.ab-why .ab-val p{color:#d5e2e3}
/* Chi siamo: #F6F7F8 fino alla fascia scura, poi il colore della pagina */
[data-page="azienda-chi-siamo"] .ab-why~.ab-sec,[data-page="azienda-chi-siamo"] .ab-why~.ctx{background:var(--page)}