/* Firstalia — foglio di stile del sito vetrina */
:root{
  --ink:#1f2124;
  --deep:#3d4045;
  --deep-2:#50545a;
  --brick:#a8322c;
  --brick-2:#8f2a25;
  --brick-soft:#b9625d;
  --paper:#ffffff;
  --stone:#f3f3f3;
  --line:#dcdcdc;
  --muted:#66686c;
  --red:#ee0000;
  --max:1160px;
  --gutter:24px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Gill Sans","Gill Sans MT","Gill Sans Nova",Calibri,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:18px;line-height:1.55;color:var(--ink);background:var(--paper);
}
a{color:inherit}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:600;line-height:1.1;letter-spacing:-.01em}
h1{font-size:clamp(2.25rem,5.2vw,4.1rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
ul{margin:0;padding-left:1.1em}
li{margin:.35em 0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{display:block;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:1.4em;font-weight:600}
.lead{font-size:clamp(1.1rem,1.6vw,1.35rem);max-width:44em;color:#2a2a2a}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* testata */
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand svg,.brand img{height:40px;width:auto}
.brand.brand-sc svg{height:54px}
.brand .who{font-size:.8rem;letter-spacing:.06em;color:var(--muted);border-left:1px solid var(--line);padding-left:14px;line-height:1.2}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;font-size:.9rem;letter-spacing:.04em}
nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:var(--ink)}
nav a.hl{border:1px solid var(--ink);padding:6px 12px}
nav a.hl:hover{background:var(--deep);color:#fff}
nav .menu{position:relative;display:flex;align-items:center}
nav .menu>a::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:.55em;border:solid currentColor;border-width:0 1px 1px 0;transform:rotate(45deg);position:relative;top:-.15em}
nav .menu ul{position:absolute;top:100%;right:0;min-width:300px;margin:0;padding:8px 0;list-style:none;background:var(--paper);border:1px solid var(--line);box-shadow:0 10px 28px rgba(0,0,0,.08);display:none;z-index:20}
nav .menu li{margin:0}
nav .menu ul a{display:block;padding:10px 20px;border:0;white-space:nowrap;letter-spacing:.02em}
nav .menu ul a:hover{background:var(--stone)}
nav .menu:hover ul,nav .menu:focus-within ul{display:block}
[id]{scroll-margin-top:96px}

/* sezioni */
section{padding:64px 0}
section.alt{background:var(--stone)}
.hero{padding:calc(104px + var(--ov,0px)) 0 96px}
.hero h1{max-width:15em}
.dot{display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--red);margin-left:.08em;vertical-align:baseline}
.hero .lead{margin-top:1.4em}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2em}
.btn{display:inline-block;padding:14px 24px;border:1px solid var(--ink);text-decoration:none;font-size:.95rem;letter-spacing:.03em}
.btn:hover{background:var(--stone)}
.btn.primary{background:var(--deep);color:#fff}
.btn.primary:hover{background:var(--deep-2)}
.head{max-width:40em;margin-bottom:2.2em}
.head p{margin-top:1em;color:#2a2a2a}

.cols{display:grid;gap:40px 48px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cols h3{margin-bottom:.5em}

.cards{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{border-top:2px solid var(--ink);padding-top:22px;display:flex;flex-direction:column;gap:.6em}
.card .n{font-size:.8rem;letter-spacing:.14em;color:var(--red)}
.card p{flex:1;color:#2a2a2a}
.card a{font-size:.9rem;letter-spacing:.03em}

.services{display:grid;gap:56px 48px;grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.services{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.services{grid-template-columns:1fr}}
.service h3{font-size:1.45rem;margin-bottom:.6em;padding-bottom:.5em;border-bottom:1px solid var(--line)}
.service .n{display:block;font-size:.8rem;letter-spacing:.14em;color:var(--red);margin-bottom:.8em}
.service ul{padding-left:1.1em}
.service li{margin:.5em 0}

.firms{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.firm{background:var(--paper);border:1px solid var(--line);padding:32px}
.firm .where{font-size:.85rem;letter-spacing:.06em;color:var(--muted);margin:.4em 0 1em}
.firm h3{font-size:1.4rem}
.firm .brandline{font-size:.95rem;color:var(--muted);margin-top:-.2em}

.facts{display:flex;flex-wrap:wrap;gap:28px 56px;margin-top:2.4em;padding-top:1.6em;border-top:1px solid var(--line)}
.facts div{font-size:.95rem}
.facts b{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.3em;font-weight:600}

/* dicitura sul network */
.notice{border-left:5px solid var(--red);background:var(--paper);padding:36px 40px;max-width:60em}
section.alt .notice{background:var(--paper)}
section:not(.alt) .notice{background:var(--stone)}
.notice h2{font-size:1.5rem;margin-bottom:.8em}
.notice p{font-size:1.05rem}
.notice p:last-child{margin-bottom:0}

/* contatti */
.contacts{display:grid;gap:36px 48px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.contacts b{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.5em;font-weight:600}
.contacts p{margin-bottom:.4em}
.contacts a{text-decoration-thickness:1px;text-underline-offset:3px}

/* piè di pagina */
footer{background:var(--deep);color:#dedede;padding:56px 0 40px;font-size:.85rem;line-height:1.6}
footer a{color:#fff}
footer .payoff{display:flex;align-items:center;gap:.6em;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 2.2em}
footer .legal{max-width:70em}
footer .legal p{margin-bottom:1em}
footer .links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:2em;padding-top:1.4em;border-top:1px solid #5a5e64}
footer .links a{text-decoration:none}
footer .links a:hover{text-decoration:underline}

@media (max-width:720px){
  :root{--gutter:16px}
  body{font-size:17px}
  section{padding:60px 0}
  .hero{padding:calc(64px + var(--ov,0px)) 0 60px}
  .top .wrap{padding-top:12px;padding-bottom:12px}
  .brand svg,.brand img{height:32px}
  .brand.brand-sc svg{height:46px}
  nav{gap:4px 16px;font-size:.85rem}
  nav .menu ul{right:auto;left:0;min-width:260px}
  .notice{padding:26px 22px}
  .firm{padding:24px}
}

/* apertura scura, sul modello Provasoli */
.hero.dark{background:var(--deep);color:#fff}
.hero.dark .eyebrow{color:#d8d8d8}
.hero.dark h1{max-width:13em}
.hero.dark .sub{margin-top:2em;max-width:60em;font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;line-height:1.9;color:#ececec}
.hero.dark .btn{border-color:#fff;color:#fff}
.hero.dark .btn:hover{background:var(--deep-2)}
.hero.dark .btn.primary{background:#fff;color:var(--deep)}
.hero.dark .btn.primary:hover{background:#e6e6e6}
.firm .eyebrow{margin-bottom:.9em}
.firm .n{display:block;font-size:.8rem;letter-spacing:.14em;color:var(--red);margin-bottom:.8em}
section:not(.alt) .firm{background:var(--stone);border-color:transparent}
@media (max-width:720px){.hero.dark .sub{letter-spacing:.12em;font-size:.85rem}}

/* apertura con foto, sul modello Provasoli */
.hero.photo{position:relative;color:#fff;background:var(--deep) url("gae-aulenti.jpg") center center/cover no-repeat;padding:calc(150px + var(--ov,0px)) 0 140px;text-align:center}
.hero.photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(33,24,21,.40) 0%,rgba(33,24,21,.30) 55%,rgba(84,34,28,.28) 100%)}
.hero.photo{display:flex;align-items:center}
.hero.photo .wrap{position:relative;width:100%}
.hero.photo h1{max-width:14em;margin:0 auto;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero.photo .sub{text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero.photo .eyebrow{text-align:center;color:#e6e6e6}
.hero.photo .sub{margin:1.6em auto 0;max-width:46em;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.7;color:#f2f2f2;font-variant-caps:small-caps;letter-spacing:.05em}
.hero.photo .sub .l{display:block}
@media (max-width:720px){.hero.photo .sub .l{display:inline}}
@media (max-width:720px){.hero.photo{background-position:center center}}
.center{text-align:center}
.head.center{margin-left:auto;margin-right:auto}
.head.center p{max-width:40em;margin-left:auto;margin-right:auto}
.big{display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;max-width:980px;margin:0 auto}
.bigbtn{display:block;padding:32px;background:#fff;color:var(--ink);text-decoration:none;text-align:left;border:1px solid #e6e6e6;border-top:3px solid var(--red);border-radius:4px;transition:border-color .2s ease}
.bigbtn:hover{border-color:rgba(238,0,0,.4);border-top-color:var(--red)}
.bigbtn .name{display:block;font-size:1.6rem;font-weight:600;letter-spacing:-.01em;color:#000}
.bigbtn .line{display:block;margin-top:1em;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
@media (max-width:720px){
  .hero.photo{padding:calc(90px + var(--ov,0px)) 0 80px}
  .hero.photo .sub{font-size:1rem}
  .big{grid-template-columns:1fr}
  .bigbtn{padding:24px}
  .bigbtn .name{font-size:1.35rem}
}

/* contattaci: immagine stilizzata a sinistra, modulo a destra */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:0}
.split .art{background:var(--brick) url("skyline-contatti.png") 45% bottom/150% auto no-repeat}
#contatti{padding:0}
.split .panel{padding:48px clamp(24px,5vw,80px);background:var(--paper)}
.split .panel h2{margin-bottom:.3em;font-size:clamp(1.5rem,2.6vw,2rem)}
.split form{margin-top:1.2em;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.split form .full{grid-column:1/-1}
.split label{display:block}
.split label span{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.35em}
.split input[type=text],.split input[type=tel],.split input[type=email],.split textarea{width:100%;padding:10px 12px;border:1px solid var(--line);background:var(--stone);font:inherit;color:var(--ink);border-radius:0}
.split input:focus,.split textarea:focus{outline:2px solid var(--ink);outline-offset:0;background:#fff}
.split textarea{resize:vertical;min-height:84px}
.split .check{display:flex;gap:.7em;align-items:flex-start;font-size:.9rem;margin-top:.4em}
.split .check input{width:1.1em;height:1.1em;margin-top:.2em;accent-color:var(--red);flex:none}
.split .check span{display:inline;text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink);margin:0}
.split .send{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:.6em}
.split .btn{border-radius:0;cursor:pointer;font-family:inherit}
.split .btn.primary{background:var(--brick);border-color:var(--brick)}
.split .btn.primary:hover{background:var(--brick-2)}
section.alt .split .panel{background:var(--paper)}
@media (max-width:820px){
  .split{grid-template-columns:1fr;min-height:0}
  .split form{grid-template-columns:1fr}
  .split .art{min-height:220px}
  .split .panel{padding:48px 20px}
}

/* descrizione nei pulsantoni, modulo compatto */
.bigbtn .desc{display:block;margin-top:1.4em;font-size:.95rem;line-height:1.6;color:var(--deep);letter-spacing:0;text-transform:none}
form.compact{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;max-width:820px}
form.compact label{display:block}
form.compact .full{grid-column:1/-1}
form.compact label span{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.35em}
form.compact input[type=text],form.compact input[type=tel],form.compact input[type=email],form.compact textarea{width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--paper);font:inherit;color:var(--ink);border-radius:0}
form.compact input:focus,form.compact textarea:focus{outline:2px solid var(--ink);outline-offset:0}
form.compact textarea{resize:vertical;min-height:110px}
form.compact .check{display:flex;gap:.7em;align-items:flex-start;font-size:.9rem}
form.compact .check input{width:1.1em;height:1.1em;margin-top:.2em;accent-color:var(--red);flex:none}
form.compact .check span{display:inline;text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink);margin:0}
form.compact .send{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
form.compact .btn{border-radius:0;cursor:pointer;font-family:inherit}
@media (max-width:720px){form.compact{grid-template-columns:1fr}}

/* pagine di testo */
.prose{max-width:52em}
.prose h2{font-size:1.35rem;margin:2em 0 .6em}
.prose p{margin-bottom:1em}

/* logo e payoff, sul modello Valtus */
.brandline{padding:110px 0 100px;background:var(--paper)}
.brandline img{width:min(360px,70vw);height:auto;margin:0 auto 44px}
.brandline .payoff-big{margin:0;font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.25;letter-spacing:.06em;text-transform:uppercase;color:var(--deep);font-weight:400}
@media (max-width:720px){.brandline{padding:70px 0 60px}.brandline img{margin-bottom:30px}}

/* partner: loghi */
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:40px 96px;max-width:980px;margin:0 auto}
.logos a{display:block;line-height:0}
.logos img{height:92px;width:auto;display:block}
@media (max-width:720px){.logos{gap:28px 48px}.logos img{height:64px}}

/* spazi attorno alla sezione advisory */
#servizi{padding-bottom:40px}
#per-chi{padding:40px 0}
.brandline{padding-top:40px}

/* aperture delle pagine delle società: foto con il velo della Home */
.hero.dark.pic{position:relative;background-color:var(--deep);background-position:center center;background-size:cover;background-repeat:no-repeat}
.hero.dark.pic::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(61,64,69,.72),rgba(61,64,69,.64))}
.hero.dark.pic .wrap{position:relative}
.hero.dark.pic h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero.dark.torri{background-image:url("grattacieli.jpg");background-position:center 38%;min-height:calc(600px + var(--ov,0px));display:flex;align-items:center}
.hero.dark.torri .wrap{width:100%}
.hero.dark.torri::before{background:rgba(0,0,0,.6)}
@media (max-width:720px){.hero.dark.torri{background-position:center 38%;min-height:calc(480px + var(--ov,0px))}}
.hero.dark.galleria{background-image:url("galleria.jpg");background-position:center 40%}
.hero.dark.ufficio{background-image:url("ufficio.jpg");background-position:center 60%;min-height:calc(520px + var(--ov,0px));display:flex;align-items:center}
.hero.dark.ufficio .wrap{width:100%}
@media (max-width:720px){.hero.dark.ufficio{min-height:calc(420px + var(--ov,0px))}}
.hero.dark.portanuova{background-image:url("porta-nuova.jpg");background-position:center 42%;min-height:calc(clamp(520px,33.65vw,700px) + var(--ov,0px));display:flex;align-items:center}
.hero.dark.portanuova .wrap{width:100%}
@media (max-width:720px){.hero.dark.portanuova{min-height:calc(420px + var(--ov,0px));background-position:50% 42%}}

/* elenco in evidenza */
.elenco{margin:.9em 0 0 1.3em;padding:0}
.elenco li{margin:.45em 0}

/* bandierine per il cambio di lingua, nel menu */
nav .lang{display:flex;align-items:center;gap:10px;margin-left:4px;padding-left:20px;border-left:1px solid var(--line)}
nav .lang a{padding:4px 0;border-bottom:2px solid transparent;line-height:0;opacity:.45;transition:opacity .15s}
nav .lang a:hover,nav .lang a:focus-visible,nav .lang a.on{opacity:1}
nav .lang a.on{border-bottom-color:var(--ink)}
nav .lang img{width:24px;height:16px;display:block;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
@media (max-width:720px){nav .lang{padding-left:14px;margin-left:0}}

/* identificatori inglesi delle sezioni della Home */
#servizi,#services{padding-bottom:40px}
#per-chi,#who-for{padding:40px 0}
#contatti,#contact{padding:0}

/* Track Record */
.cases{display:grid;gap:28px;margin-top:2.4em}
.case{border:1px solid var(--line);padding:32px 36px}
.case .n{display:block;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:.8em}
.case h3{font-size:1.45rem}
.case .meta{margin:.8em 0 0;font-size:.95rem;line-height:1.5}
.case .meta div{display:flex;flex-wrap:wrap;gap:0 .4em}
.case .meta dt{color:var(--muted)}
.case .meta dt::after{content:":"}
.case .meta dd{margin:0;color:var(--ink)}
.case .meta strong{font-weight:600}
.case .cols{margin-top:1.4em;gap:28px 40px}
.case h4{margin:0 0 .4em;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--deep)}
.case .cols p{margin:0 0 .7em;color:#2a2a2a}.case .cols p:last-child{margin-bottom:0}
section.tr{border-top:1px solid var(--line)}
@media (max-width:720px){.case{padding:24px 20px}}

/* testata trasparente sulla foto di apertura, bianca quando si scorre (modello valtus.it) */
.brand img.chiaro{display:none}
body.over{--ov:69px}
@media (max-width:720px){body.over{--ov:116px}}
body.over [id]{scroll-margin-top:calc(var(--ov,116px) + 16px)}
body.over .top{position:fixed;top:0;left:0;right:0}
body.over .brand{position:relative}
body.over .brand img.chiaro{display:block;position:absolute;left:0;top:0;opacity:0}
body.over .top.sulla-foto{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.over .top.sulla-foto .brand img{opacity:0}
body.over .top.sulla-foto .brand img.chiaro{opacity:1}
body.over .top.pronta{transition:background-color .3s ease,border-color .3s ease}
body.over .top.pronta .brand img,body.over .top.pronta nav>a,body.over .top.pronta nav .menu>a{transition:opacity .3s ease,color .3s ease,border-color .3s ease}
body.over .top.sulla-foto nav>a,body.over .top.sulla-foto nav .menu>a{color:#fff}
body.over .top.sulla-foto nav>a:hover,body.over .top.sulla-foto nav .menu>a:hover{border-bottom-color:#fff}
body.over .top.sulla-foto nav .lang{border-left-color:rgba(255,255,255,.45)}
body.over .top.sulla-foto nav .lang a.on{border-bottom-color:#fff}
body.over .top.sulla-foto nav .lang img{box-shadow:0 0 0 1px rgba(255,255,255,.35)}

/* contrasto: occhielli rossi sul grigio in mattone, fuoco visibile sulle schede */
section.alt .eyebrow{color:#a8322c}
.bigbtn:focus-visible{outline:3px solid #a8322c;outline-offset:4px}

/* ingresso della Home: logo al centro di una pagina bianca, una volta per sessione */
.intro{display:none}
html.intro-on .intro{display:flex;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;background:#fff;pointer-events:none;animation:intro-via .6s ease 1.5s forwards}
html.intro-on .intro img{width:min(340px,62vw);height:auto;opacity:0;animation:intro-logo .9s ease .15s forwards}
@keyframes intro-logo{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes intro-via{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){html.intro-on .intro{animation-duration:.3s;animation-delay:.9s}html.intro-on .intro img{animation:none;opacity:1}}