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

   STAGEO - CHI SIAMO FINALE ALTO PROFILO

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



.chi-page{background:#fff}



/* Cursor visibile anche su bianco */

.cursor-glow{

  position:fixed;

  width:34px;

  height:34px;

  border-radius:50%;

  pointer-events:none;

  z-index:100000;

  transform:translate(-50%,-50%);

  background:rgba(255,119,0,.16);

  border:2px solid rgba(255,130,0,.95);

  box-shadow:0 0 13px rgba(255,120,0,.50),0 0 32px rgba(255,120,0,.34);

  backdrop-filter:blur(2px);

  opacity:1;

  transition:width .22s ease,height .22s ease,background .22s ease,border .22s ease,opacity .22s ease;

}



.cursor-active .cursor-glow{

  width:66px;

  height:66px;

  background:rgba(255,119,0,.10);

  border-color:rgba(255,130,0,.75);

  box-shadow:0 0 18px rgba(255,120,0,.62),0 0 46px rgba(255,120,0,.40);

}



/* HERO */

.chi-hero{

  position:relative;

  min-height:780px;

  display:flex;

  align-items:center;

  overflow:hidden;

  color:#fff;

  background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.38)),url("img/chi-hero.jpg") center/cover no-repeat;

}



.hero-dark{

  position:absolute;

  inset:0;

  background:radial-gradient(circle at 18% 24%,rgba(242,106,0,.24),transparent 30%),linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.74));

  z-index:1;

}



.grid-lines{

  position:absolute;

  inset:0;

  z-index:2;

  opacity:.14;

  background:

    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);

  background-size:80px 80px;

  mask-image:linear-gradient(to bottom,transparent,black 20%,black 75%,transparent);

}



.hero-inner{

  position:relative;

  z-index:3;

  width:min(1180px,86%);

  margin:0 auto;

  padding-top:55px;

}



.kicker,.label{

  font-family:"Barlow Condensed",Arial,sans-serif;

  color:#f26a00;

  font-size:24px;

  line-height:1;

  font-weight:800;

  letter-spacing:1.4px;

  margin:0 0 18px;

  text-transform:uppercase;

}



.hero-inner h1{

  font-family:"Barlow Condensed",Arial,sans-serif;

  font-size:clamp(58px,7vw,118px);

  line-height:.88;

  margin:0 0 32px;

  max-width:1100px;

  font-weight:800;

  text-transform:uppercase;

  text-shadow:0 18px 55px rgba(0,0,0,.48);

}



.hero-inner p{

  max-width:930px;

  font-size:clamp(19px,1.7vw,28px);

  line-height:1.45;

  font-weight:700;

  color:rgba(255,255,255,.92);

}



.hero-metrics{

  position:absolute;

  z-index:4;

  left:7%;

  right:7%;

  bottom:38px;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:1px;

  background:rgba(255,255,255,.16);

  backdrop-filter:blur(10px);

  border:1px solid rgba(255,255,255,.14);

}



.hero-metrics div{

  background:rgba(7,12,14,.58);

  padding:22px 26px;

}



.hero-metrics strong{

  display:block;

  color:#f26a00;

  font-family:"Barlow Condensed";

  font-size:44px;

  line-height:1;

  text-transform:uppercase;

}



.hero-metrics span{

  display:block;

  color:#fff;

  font-weight:800;

  font-size:14px;

  margin-top:6px;

}



/* quotes in movimento */

.quote-marquee-section{

  background:#06090b;

  padding:30px 0;

  overflow:hidden;

  border-top:1px solid rgba(255,255,255,.05);

  border-bottom:1px solid rgba(255,255,255,.05);

}



.quote-marquee-section.light{background:#f2f2f2;border-color:rgba(0,0,0,.06)}

.quote-marquee{width:100%;overflow:hidden;position:relative;pointer-events:none}

.quote-track{

  display:flex;

  width:max-content;

  gap:96px;

  animation:scrollQuotes 42s linear infinite;

  will-change:transform;

}

.quote-track.reverse{animation-duration:50s}

.quote-item{

  font-family:"Cormorant Garamond",Georgia,serif;

  font-size:clamp(24px,2.2vw,42px);

  font-style:italic;

  font-weight:600;

  color:rgba(190,190,190,.82);

  white-space:nowrap;

  letter-spacing:.2px;

}

.light .quote-item{color:rgba(45,52,56,.62)}

.quote-item span{

  font-family:Inter,Arial,sans-serif;

  color:#f26a00;

  font-size:12px;

  font-weight:800;

  font-style:normal;

  margin-left:14px;

  letter-spacing:1.6px;

  text-transform:uppercase;

}

@keyframes scrollQuotes{from{transform:translateX(100vw)}to{transform:translateX(-50%)}}



/* identity */

.identity-section{

  display:grid;

  grid-template-columns:1.22fr .78fr;

  gap:42px;

  align-items:stretch;

  padding:95px 7%;

  background:linear-gradient(135deg,#f3f3f3,#fff 58%,#eee);

}

.identity-copy{

  background:#fff;

  border-top:7px solid #f26a00;

  padding:58px;

  box-shadow:0 25px 70px rgba(0,0,0,.08);

}

.identity-copy h2,.vision-card h2,.core-copy h2,.catasto-head h2,.photo-head h2,.competence-head h2{

  font-family:"Barlow Condensed",Arial,sans-serif;

  font-size:clamp(46px,4.7vw,78px);

  line-height:.95;

  margin:0 0 32px;

  color:#111820;

  text-transform:uppercase;

}

.identity-copy p{

  font-size:18px;

  line-height:1.72;

  margin:0 0 20px;

  color:#273238;

}

.identity-stat{

  position:relative;

  overflow:hidden;

  color:#fff;

  padding:55px;

  display:flex;

  flex-direction:column;

  justify-content:flex-end;

  min-height:540px;

  background:linear-gradient(160deg,rgba(15,24,28,.96),rgba(5,8,10,.98));

  box-shadow:0 28px 80px rgba(0,0,0,.22);

}

.identity-stat:before{

  content:"";

  position:absolute;

  inset:-30%;

  background:radial-gradient(circle at 30% 18%,rgba(242,106,0,.38),transparent 30%),radial-gradient(circle at 90% 85%,rgba(255,255,255,.10),transparent 32%);

}

.identity-stat>*{position:relative;z-index:2}

.identity-stat strong{

  font-family:"Barlow Condensed",Arial,sans-serif;

  color:#f26a00;

  font-size:154px;

  line-height:.75;

  font-weight:800;

  margin-bottom:30px;

}

.identity-stat span{

  font-family:"Barlow Condensed",Arial,sans-serif;

  font-size:42px;

  line-height:1;

  font-weight:800;

  text-transform:uppercase;

  margin-bottom:18px;

}

.identity-stat p{font-size:19px;line-height:1.55;font-weight:750;margin:0}



/* single quote */

.single-quote{background:#f2f2f2;padding:46px 7%;overflow:hidden}

.single-quote blockquote{

  margin:0 auto;

  max-width:1500px;

  font-family:"Cormorant Garamond",Georgia,serif;

  font-size:clamp(27px,2.7vw,48px);

  line-height:1.15;

  font-style:italic;

  color:rgba(45,52,56,.68);

  white-space:nowrap;

}

.single-quote cite{

  display:inline-block;

  font-family:Inter,Arial,sans-serif;

  font-style:normal;

  color:#f26a00;

  font-size:12px;

  font-weight:800;

  margin-left:16px;

  letter-spacing:1.6px;

  text-transform:uppercase;

}



/* mission vision */

.vision-section{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#111820}

.vision-card{padding:86px 7vw;background:#fff;position:relative;overflow:hidden}

.vision-card:after{

  content:"";

  position:absolute;

  right:-140px;

  bottom:-140px;

  width:300px;

  height:300px;

  border-radius:50%;

  background:rgba(242,106,0,.07);

}

.vision-card.dark{background:#10181b;color:#fff}

.vision-card.dark h2{color:#fff}

.vision-card p{font-size:20px;line-height:1.65;color:#2a353a;position:relative;z-index:2}

.vision-card.dark p{color:rgba(255,255,255,.84)}



/* core */

.core-section{

  background:#070b0d;

  color:#fff;

  padding:105px 7%;

  position:relative;

  overflow:hidden;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:54px;

  align-items:start;

}

.core-section:before{

  content:"";

  position:absolute;

  inset:0;

  opacity:.22;

  background:radial-gradient(circle at 15% 20%,rgba(242,106,0,.50),transparent 26%),radial-gradient(circle at 85% 78%,rgba(255,255,255,.15),transparent 28%),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0,rgba(255,255,255,.08) 1px,transparent 1px,transparent 90px);

}

.core-copy,.process-stack{position:relative;z-index:2}

.core-copy{border-left:8px solid #f26a00;padding:35px 0 35px 46px}

.core-copy h2{color:#fff}

.core-copy p{font-size:21px;line-height:1.58;margin:0 0 24px;color:rgba(255,255,255,.90)}

.core-copy strong{color:#fff;font-weight:900}

.process-stack{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.process-stack article{

  min-height:250px;

  background:rgba(255,255,255,.055);

  border:1px solid rgba(255,255,255,.08);

  padding:32px;

  transition:.34s cubic-bezier(.2,.8,.2,1);

}

.process-stack article:hover{transform:translateY(-8px);background:rgba(242,106,0,.92)}

.process-stack span{display:block;font-family:"Barlow Condensed";font-size:42px;font-weight:800;color:#f26a00;margin-bottom:16px}

.process-stack article:hover span{color:#fff}

.process-stack h3{font-family:"Barlow Condensed";font-size:42px;line-height:1;margin:0 0 16px;text-transform:uppercase}

.process-stack p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.86)}



/* catasto */

.catasto-section{padding:100px 7%;background:#fff}

.catasto-head{max-width:1120px;margin-bottom:44px}

.catasto-head p,.photo-head p{font-size:19px;line-height:1.65;color:#2c383d}

.catasto-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#131b1f}

.catasto-grid article{

  background:#10181b;

  color:#fff;

  min-height:270px;

  padding:34px;

  transition:.34s ease;

}

.catasto-grid article:hover{transform:translateY(-7px);background:#f26a00}

.catasto-grid strong{display:block;font-family:"Barlow Condensed";font-size:36px;line-height:1;text-transform:uppercase;margin-bottom:18px}

.catasto-grid p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.86)}



/* photo */

.photo-section{padding:100px 7%;background:#f4f4f4}

.photo-head{max-width:980px;margin-bottom:45px}

.photo-grid{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:repeat(2,360px);gap:24px}

.photo-card{

  position:relative;

  overflow:hidden;

  background:#111;

  color:#fff;

  min-height:360px;

  box-shadow:0 22px 60px rgba(0,0,0,.16);

}

.photo-card.large{grid-row:span 2}

.photo-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}

.photo-card:hover img{transform:scale(1.055)}

.photo-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.84),rgba(0,0,0,.18) 55%,rgba(0,0,0,.08))}

.photo-card div{position:absolute;z-index:3;left:34px;right:34px;bottom:30px}

.photo-card span{font-family:"Barlow Condensed";color:#f26a00;font-size:24px;font-weight:800;text-transform:uppercase}

.photo-card h3{font-family:"Barlow Condensed";font-size:42px;line-height:1;margin:10px 0 12px;text-transform:uppercase}

.photo-card p{font-size:16px;line-height:1.55;margin:0;color:rgba(255,255,255,.88)}



/* competenze */

.competence-section{background:#fff;padding:100px 7%}

.competence-head{max-width:1050px;margin-bottom:42px}

.competence-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#111820}

.competence-grid article{

  min-height:230px;

  background:#10181b;

  color:#fff;

  padding:32px;

  transition:.34s ease;

}

.competence-grid article:hover{background:#f26a00;transform:translateY(-7px)}

.competence-grid strong{display:block;font-family:"Barlow Condensed";font-size:36px;line-height:1;margin-bottom:18px;text-transform:uppercase}

.competence-grid p{font-size:15px;line-height:1.58;margin:0;color:rgba(255,255,255,.85)}



/* reveal */

.reveal{opacity:0;transform:translateY(38px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1)}

.reveal.visible,.reveal.active{opacity:1;transform:translateY(0)}



@media(max-width:1100px){

  .identity-section,.vision-section,.core-section{grid-template-columns:1fr}

  .photo-grid{grid-template-columns:1fr;grid-template-rows:auto}

  .photo-card,.photo-card.large{min-height:430px;grid-row:auto}

  .catasto-grid,.competence-grid{grid-template-columns:1fr 1fr}

  .hero-metrics{position:relative;left:auto;right:auto;bottom:auto;margin:30px 7% 0;grid-template-columns:1fr}

}

@media(max-width:760px){

  .cursor-glow{display:none}

  .chi-hero{min-height:720px;align-items:flex-start;padding-top:90px}

  .hero-inner{width:88%}

  .hero-inner h1{font-size:50px}

  .hero-inner p{font-size:18px}

  .hero-metrics{margin:20px 22px 0}

  .quote-marquee-section{padding:22px 0}

  .quote-track{animation-duration:34s;gap:52px}

  .quote-item{font-size:25px}

  .single-quote blockquote{white-space:normal}

  .identity-section,.vision-card,.core-section,.catasto-section,.photo-section,.competence-section{padding:58px 22px}

  .identity-copy,.identity-stat{padding:32px}

  .identity-copy h2,.vision-card h2,.core-copy h2,.catasto-head h2,.photo-head h2,.competence-head h2{font-size:42px}

  .identity-copy p,.core-copy p,.vision-card p{font-size:16.5px}

  .identity-stat strong{font-size:108px}

  .identity-stat span{font-size:34px}

  .core-copy{padding-left:26px}

  .process-stack{grid-template-columns:1fr}

  .catasto-grid,.competence-grid{grid-template-columns:1fr}

  .photo-card,.photo-card.large{min-height:360px}

  .photo-card div{left:24px;right:24px;bottom:24px}

  .photo-card h3{font-size:34px}

}