:root{--navy:#0d1b2e;--navy2:#1a2d45;--gold:#c9a96e;--goldl:#e8cfa0;--w:#fff;--off:#f7f5f2;--gl:#eceae7;--gray:#9a9590;--nh:66px}



*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}



html{-webkit-text-size-adjust:100%}



body{font-family:'Barlow',sans-serif;background:var(--w);color:var(--navy);overflow-x:hidden}



img{max-width:100%;height:auto;display:block}



a{text-decoration:none;color:inherit}



button{cursor:pointer;font-family:inherit}



.fbrand{

	display: flex;

	flex-direction: column;

}



/*.sopra{

    display: grid;

    grid-template-columns: 1fr 1fr;

}



.cone{

    width: 40vh;

    aspect-ratio: 16 / 10;

}



.home_right{

  display: flex;

  justify-content: left;

  align-items: center;

}*/



.logo_pan {

  height: 10rem;

  width: auto;

}



.lg{



  height: 38px !important;



  width: auto !important;



  max-width: 160px;



  filter: brightness(0) invert(1);



  transition: filter .35s;



}



.lg_x{



  height: 10vh !important;



  width: auto !important;



  max-width: 160px;



  transition: filter .35s;



}



#nav.op .lg{



  filter: brightness(0);



}







/* NAV */



#nav{position:fixed;top:0;left:0;right:0;z-index:210;height:var(--nh);display:flex;align-items:center;justify-content:space-between;padding:0 3rem;transition:background .35s,box-shadow .35s;background:transparent}



#nav.op{background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(0,0,0,.07)}



.nl{display:flex;align-items:center;gap:.6rem}



.nl svg{width:32px;height:32px;flex-shrink:0;color:white;transition:color .35s}



#nav.op .nl svg{color:var(--navy)}



.lt{font-family:'HeadingProWide','Barlow Condensed',sans-serif;font-weight:900;font-size:1.1rem;letter-spacing:0.02em;line-height:1;color:white;transition:color .35s}



.lt small{display:block;font-weight:300;font-size:.58rem;letter-spacing:0.06em;margin-top:1px}



#nav.op .lt{color:var(--navy)}



.nlinks{display:flex;gap:2rem;list-style:none;align-items:center}



.nlinks a{font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;padding:.3rem 0;position:relative;color:rgba(255,255,255,.82);transition:color .25s}



.nlinks a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .3s}



.nlinks a:hover::after,.nlinks a.act::after{transform:scaleX(1)}



.nlinks a:hover,.nlinks a.act{color:var(--gold)}



#nav.op .nlinks a{color:var(--navy)}



#nav.op .nlinks a:hover{color:var(--gold)}



.ncta{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.32);color:white;padding:.48rem 1.3rem;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:all .25s}



.ncta:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}



#nav.op .ncta{background:var(--navy);border-color:var(--navy);color:white}



#nav.op .ncta:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}



button.hbg{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:none;padding:5px;position:relative;inset:auto}



.hbg span{display:block;width:100%;height:1.5px;transition:all .3s;transform-origin:center;background:white}



#nav.op .hbg span{background:var(--navy)}



.hbg.open span:nth-child(1){transform:rotate(45deg) translate(4.5px,4.5px)}



.hbg.open span:nth-child(2){opacity:0;transform:scaleX(0)}



.hbg.open span:nth-child(3){transform:rotate(-45deg) translate(4.5px,-4.5px)}



#mob{position:fixed;top:0;left:0;right:0;bottom:0;z-index:205;background:var(--navy);padding:calc(var(--nh) + 2rem) 2rem 3rem;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;transform:translateX(100%);transition:transform .4s cubic-bezier(.77,0,.18,1);pointer-events:none}



#mob.open{transform:translateX(0);pointer-events:all}



.mlinks{list-style:none}



.mlinks li{border-bottom:1px solid rgba(255,255,255,.07)}



.mlinks a{display:block;padding:1.1rem 0;font-family:'Barlow',serif;font-size:1.9rem;font-weight:300;color:white;transition:color .2s}



.mlinks a:hover{color:var(--gold)}



.mcta{margin-top:2rem;background:var(--gold);color:var(--navy);padding:.9rem 1.8rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border:none;display:inline-block;align-self:flex-start}







/* PAGES */



.pg{display:none;min-height:100vh}



.pg.on{display:block}







/* REVEAL */



.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}



.rv.in{opacity:1;transform:none}



.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}







/* TYPOGRAPHY */



.ey{font-family:'Barlow Condensed',sans-serif;font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.9rem}



.stitle{font-family:'Barlow',serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:300;line-height:1.15;color:var(--navy);margin-bottom:1.2rem}



.stitle em{font-style:italic}



.stitle.lgt{color:white}



.bt{font-size:.93rem;color:#4a5568;line-height:1.9;font-weight:300}



.bt.lgt{color:rgba(255,255,255,.48)}







/* BUTTONS */



.bgold{display:inline-flex;align-items:center;gap:.5rem;background:var(--gold);color:var(--navy);border:none;padding:.9rem 2rem;font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;transition:all .28s;white-space:nowrap}



.bgold:hover{background:var(--goldl);transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,169,110,.28)}



.bdark{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--navy);border:1.5px solid var(--navy);padding:.9rem 2rem;font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;transition:all .28s}



.bdark:hover{background:var(--navy);color:white}



.bghost{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:white;border:1px solid rgba(255,255,255,.33);padding:.9rem 2rem;font-size:.76rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;transition:all .28s}



.bghost:hover{border-color:var(--gold);color:var(--gold)}







/* TICKER */



.ticker{background:var(--navy);overflow:hidden;padding:.75rem 0;border-top:1px solid rgba(201,169,110,.13)}



.ttrack{display:flex;white-space:nowrap;animation:tickr 28s linear infinite}



.titem{font-family:'Barlow Condensed',sans-serif;font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.28);padding:0 2rem;flex-shrink:0}



.titem b{color:var(--gold);font-weight:400}



@keyframes tickr{from{transform:translateX(0)}to{transform:translateX(-50%)}}







/* WRAP */



.wrap{max-width:1160px;margin:0 auto;padding:0 2.5rem}







/* FOOTER */



footer{background:#06101a;padding:6rem 0 4rem;border-top:1px solid rgba(255,255,255,.04)}



.fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4.5rem;margin-bottom:4rem;padding-bottom:3.5rem;border-bottom:1px solid rgba(255,255,255,.05)}



.fbrand .lr{display:flex;align-items:center;gap:.55rem;margin-bottom:1rem}



.fbrand .lr svg{width:26px;height:26px}



.fbrand .lr span{font-family:'HeadingProWide','Barlow Condensed',sans-serif;font-weight:900;font-size:1rem;letter-spacing:0.02em;color:white}



.fbrand p{color:rgba(255,255,255,.26);font-size:.95rem;line-height:1.75;font-weight:300;max-width:280px}



.fcol h4{font-family:'Barlow Condensed',sans-serif;font-size:.78rem;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}



.fcol ul{list-style:none}



.fcol li{margin-bottom:.7rem}



.fcol a{color:rgba(255,255,255,.28);font-size:.92rem;font-weight:300;transition:color .22s}



.fcol a:hover{color:var(--gold)}



.fbot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}



.fleg{color:rgba(255,255,255,.16);font-size:.82rem;line-height:1.7}



.fmk{color:rgba(255,255,255,.11);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase}







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



   HOME



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



body.page-home{background:var(--navy)}



.hero{height:100svh;min-height:600px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}



.hero>.hbg,.hcta>.hbg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 65% at 58% 42%,rgba(42,66,101,.55) 0%,transparent 72%),radial-gradient(ellipse 45% 45% at 12% 78%,rgba(201,169,110,.06) 0%,transparent 65%)}



.hgrid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:72px 72px}



.hinn{position:relative;z-index:2;text-align:center;max-width:800px;padding:0 1.5rem}



.hey{font-family:'Barlow Condensed',sans-serif;font-size:.66rem;letter-spacing:.46em;text-transform:uppercase;color:var(--gold);margin-bottom:1.6rem;opacity:0;animation:fup .8s ease .15s forwards}



.hh1{font-family:'Barlow',serif;font-size:clamp(2.8rem,6.5vw,5.6rem);font-weight:300;color:white;line-height:1.06;margin-bottom:1.4rem;opacity:0;animation:fup .9s ease .35s forwards}



.hh1 em{font-style:italic;color:var(--goldl)}



.hsub{font-size:clamp(.88rem,1.8vw,1rem);color:rgba(255,255,255,.48);line-height:1.8;font-weight:300;max-width:500px;margin:0 auto 2.8rem;opacity:0;animation:fup .9s ease .55s forwards}



.hbtns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;opacity:0;animation:fup .9s ease .75s forwards}



.scrhint{position:absolute;bottom:2rem;left:0;right:0;margin:0 auto;width:fit-content;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:rgba(255,255,255,.28);font-size:.59rem;letter-spacing:.28em;text-transform:uppercase;opacity:0;animation:fup 1s ease 1.1s forwards;pointer-events:none}



.scrl{width:1px;height:34px;background:linear-gradient(to bottom,rgba(255,255,255,.4),transparent);animation:blnk 2s ease-in-out infinite}



@keyframes blnk{0%,100%{opacity:.3}50%{opacity:.9}}



@keyframes fup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}







/* pillars */



.hpillars{padding:6rem 0;background:#fff}



.hprow{padding: 6rem 0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}



.hpil{border:1px solid var(--gl);padding:2.8rem 2.2rem;background:white;transition:all .3s;position:relative}



.hpil:hover{box-shadow:0 12px 40px rgba(0,0,0,.07);transform:translateY(-4px);border-color:transparent}



.hpil-n{font-family:'Barlow',serif;font-size:3rem;font-weight:300;color:rgba(13,27,46,.1);line-height:1;margin-bottom:1.2rem;display:block;transition:color .3s}



.hpil:hover .hpil-n{color:rgba(201,169,110,.35)}



.hpil h3{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:.8rem}



.hpil p{font-size:.84rem;color:#5a6478;line-height:1.8;font-weight:300}







/* cta band */



.hcta{

	padding:5.5rem 0;

    position: relative;

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

}



.hctarow{display:flex;justify-content:space-between;align-items:center;gap:3rem;flex-wrap:wrap}







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



   CHI SIAMO



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



body.page-chisiamo{background:#fff}



.cshero{background:var(--navy);padding:5.5rem 0 4.5rem}



.cshg{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:end}



.csh1{font-family:'Barlow',serif;font-size:clamp(2.4rem,4.5vw,4rem);font-weight:300;color:white;line-height:1.1;margin-bottom:1.2rem}



.csh1 em{font-style:italic;color:var(--goldl)}



.cshimg{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.78}



.csabout{padding:5.5rem 0}



.csag{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}



.aiwrap{position:relative}



.aimgbox{position:relative}



.aimg{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s}



.aiwrap:hover .aimg{transform:scale(1.02)}



.aacc{position:absolute;bottom:-1.5rem;right:-1.5rem;width:40%;aspect-ratio:1;background:var(--gold);z-index:-1}



.astats{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem}



.astat{border-left:2px solid var(--gold);padding:1rem 1.2rem}



.astn{font-family:'Barlow',serif;font-size:2.2rem;font-weight:300;color:var(--navy);line-height:1}



.astl{font-size:.7rem;color:var(--gray);letter-spacing:.1em;text-transform:uppercase;margin-top:.2rem}



.csq{font-family:'Barlow',serif;font-size:1.5rem;font-weight:300;font-style:italic;color:var(--navy);line-height:1.55;margin-bottom:1.8rem;padding-left:1.4rem;border-left:3px solid var(--gold)}



.cspillars{background:var(--navy);padding:5.5rem 0}



.csprow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.07)}



.cspl{background:var(--navy);padding:2.5rem 2rem;transition:background .28s}



.cspl:hover{background:var(--navy2)}



.cspl-n{font-family:'Barlow',serif;font-size:3.5rem;font-weight:300;color:rgba(201,169,110,.17);line-height:1;margin-bottom:1.2rem;display:block;transition:color .28s}



.cspl:hover .cspl-n{color:rgba(201,169,110,.42)}



.cspl h3{font-family:'Barlow Condensed',sans-serif;font-size:1rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:white;margin-bottom:.7rem}



.cspl p{font-size:.84rem;color:rgba(255,255,255,.43);line-height:1.75;font-weight:300}



.cssvc{padding:5.5rem 0;background:var(--off)}



.cssvchd{text-align:center;margin-bottom:3.5rem}



.cssg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}



.svc{background:white;padding:2.5rem 2rem;transition:all .32s;cursor:pointer;position:relative;overflow:hidden;border:none;text-align:left}



.svc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gold);transform:scaleX(0);transition:transform .32s}



.svc:hover::after{transform:scaleX(1)}



.svc:hover{transform:translateY(-5px);box-shadow:0 14px 38px rgba(0,0,0,.08)}



.svcbar{width:40px;height:2px;background:var(--gold);margin-bottom:1.8rem;transition:width .28s}



.svc:hover .svcbar{width:60px}



.svc h3{font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);margin-bottom:.6rem}



.svc p{font-size:.83rem;color:#6b7280;line-height:1.7;font-weight:300;margin-bottom:1.2rem}



.svclnk{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}



.svclnk::after{content:' →'}



.csvals{background:var(--navy);padding:5.5rem 0}



.csvrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.07)}



.csval{background:var(--navy);padding:2.5rem 2rem;transition:background .28s}



.csval:hover{background:var(--navy2)}



.vico{width:40px;height:40px;border:1px solid rgba(201,169,110,.38);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:.9rem;margin-bottom:1.5rem}



.csval h4{font-family:'Barlow Condensed',sans-serif;font-size:.95rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:white;margin-bottom:.6rem}



.csval p{font-size:.83rem;color:rgba(255,255,255,.44);line-height:1.7;font-weight:300}







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



   SERVIZI



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



body.page-servizi{background:#fff}



.srvhero{background:var(--navy);padding:5.5rem 0 4.5rem}



.srvh1{font-family:'Barlow',serif;font-size:clamp(2.4rem,4.5vw,4rem);font-weight:300;color:white;line-height:1.1;margin-bottom:1rem}



.srvh1 em{color:var(--goldl)}



.srvbody{padding:5rem 0}



.srvgg{display:grid;grid-template-columns:1fr 1fr;gap:2px}



.srvcrd{background:var(--off);padding:3rem 2.5rem;border:none;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:all .32s}



.srvcrd::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);transform:scaleY(0);transition:transform .32s;transform-origin:bottom}



.srvcrd:hover{background:white;box-shadow:0 8px 36px rgba(0,0,0,.07)}



.srvcrd:hover::before{transform:scaleY(1)}



.srvn{font-family:'Barlow',serif;font-size:3rem;font-weight:300;color:rgba(13,27,46,.1);line-height:1;margin-bottom:1.4rem;display:block;transition:color .28s}



.srvcrd:hover .srvn{color:rgba(201,169,110,.32)}



.srvcrd h3{font-family:'Barlow',sans-serif;font-size:2.5rem;font-weight:300;letter-spacing:.06em;color:var(--navy);margin-bottom:.8rem}



.srvcrd p{font-size:.87rem;color:#5a6478;line-height:1.8;font-weight:300;margin-bottom:1.4rem}



.srvcta{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;display:flex;align-items:center;gap:.4rem}



.srvcta::after{content:'→';transition:transform .28s}



.srvcrd:hover .srvcta::after{transform:translateX(5px)}







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



   LOCATION



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



body.page-location{background:#fff}



.lochero{background:var(--navy);padding:5.5rem 0 4.5rem}



.loch1{font-family:'Barlow',serif;font-size:clamp(2.4rem,4.5vw,4rem);font-weight:300;color:white;line-height:1.1;margin-bottom:1rem}



.loch1 em{color:var(--goldl)}



.loclist{padding:5rem 0}



.locitem{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding:4rem 0;border-bottom:1px solid var(--gl)}



.locitem:last-child{border-bottom:none}



.locitem.rev{direction:rtl}



.locitem.rev>*{direction:ltr}



.locimgb{position:relative;overflow:hidden;aspect-ratio:4/3}



.locimg{width:100%;height:100%;object-fit:cover;transition:transform .65s}



.locimgb:hover .locimg{transform:scale(1.05)}



.locbadge{position:absolute;top:1.2rem;left:1.2rem;background:var(--gold);color:var(--navy);font-size:.61rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;padding:.3rem .7rem}



.locinf h2{font-family:'Barlow',serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;color:var(--navy);margin-bottom:.4rem;line-height:1.15}



.loctag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-bottom:1.1rem}



.locinf p{font-size:.88rem;color:#4a5568;line-height:1.85;font-weight:300;margin-bottom:.9rem}



.lochl{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--navy);font-weight:500;margin-bottom:1.5rem}



.lochl::before{content:'→';color:var(--gold)}



.locbroch{background:var(--navy);padding:4rem 0}



.locbri{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}



.locbri p{color:rgba(255,255,255,.5);font-size:.9rem;font-weight:300;line-height:1.7}



.locbri strong{color:white;display:block;font-family:'Barlow',serif;font-size:1.35rem;font-weight:300;margin-bottom:.3rem}







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



   CONTATTI



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



body.page-contatti{background:var(--navy)}



.conhero{padding:5.5rem 0 3rem}



.conh1{font-family:'Barlow',serif;font-size:clamp(2.4rem,4.5vw,4rem);font-weight:300;color:white;line-height:1.1;margin-bottom:1rem}



.conh1 em{font-style:italic;color:var(--goldl)}



.congrid{display:grid;grid-template-columns:2fr 1fr;gap:5rem;padding:2rem 0 4rem;align-items:start}



.fbox{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);padding:3rem}



.prow{margin-bottom:2.5rem}



.pmeta{display:flex;justify-content:space-between;margin-bottom:.6rem}



.plbl{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500}



.ptime{font-size:.66rem;color:rgba(255,255,255,.22)}



.pbar{height:2px;background:rgba(255,255,255,.08)}



.pfill{height:100%;background:var(--gold);transition:width .5s}



.fsp{display:none}



.fsp.on{display:block}



.sth{font-family:'Barlow',serif;font-size:1.65rem;font-weight:300;color:white;margin-bottom:.4rem}



.sts{font-size:.82rem;color:rgba(255,255,255,.36);margin-bottom:1.7rem;line-height:1.6}



.opts{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1.7rem}



.opt{background:transparent;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.62);padding:.85rem 1rem;text-align:left;font-size:.82rem;font-weight:300;display:flex;align-items:center;gap:.6rem;transition:all .22s}



.opt:hover{border-color:var(--gold);color:white;background:rgba(201,169,110,.05)}



.opt.sel{border-color:var(--gold);background:rgba(201,169,110,.1);color:white}



.odot{width:15px;height:15px;border:1px solid rgba(255,255,255,.2);border-radius:2px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.52rem;color:var(--gold);transition:all .2s}



.opt.sel .odot{background:var(--gold);border-color:var(--gold);color:var(--navy)}



.ofull{grid-column:span 2}



.fi{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:white;padding:.88rem 1.1rem;font-family:'Barlow',sans-serif;font-size:.87rem;font-weight:300;outline:none;transition:border-color .28s;display:block;margin-bottom:.85rem}



.fi::placeholder{color:rgba(255,255,255,.2)}



.fi:focus{border-color:var(--gold)}



.fnav{display:flex;justify-content:space-between;align-items:center;margin-top:1.8rem}



.bback{background:transparent;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.42);padding:.7rem 1.3rem;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;transition:all .25s}



.bback:hover{border-color:rgba(255,255,255,.4);color:white}



.bfwd{background:var(--gold);color:var(--navy);border:none;padding:.78rem 1.7rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:.5rem;transition:all .25s}



.bfwd:hover{background:var(--goldl)}



.cbw{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;margin-bottom:1.2rem}



.cbw input{display:none}



.cbb{width:16px;height:16px;border:1px solid rgba(255,255,255,.2);border-radius:2px;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;font-size:.52rem;color:var(--gold);transition:all .2s}



.cbw input:checked+.cbb{background:var(--gold);border-color:var(--gold);color:var(--navy)}



.cbw span{font-size:.79rem;color:rgba(255,255,255,.36);line-height:1.6;font-weight:300}



.spin{width:14px;height:14px;border:2px solid var(--navy);border-top-color:transparent;border-radius:50%;animation:sp .6s linear infinite}



@keyframes sp{to{transform:rotate(360deg)}}



.fsok{display:none;text-align:center;padding:2rem 0}



.fsok.on{display:block}



.fsl{width:48px;height:2px;background:var(--gold);margin:0 auto 1.5rem}



.fsok h3{font-family:'Barlow',serif;font-size:2.1rem;font-weight:300;color:white;margin-bottom:1rem}



.fsok p{color:rgba(255,255,255,.43);font-size:.88rem;line-height:1.8;font-weight:300;max-width:400px;margin:0 auto}



.coninfo h3{font-family:'Barlow',serif;font-size:1.45rem;font-weight:300;color:white;margin-bottom:1.5rem}



.iitem{border-top:1px solid rgba(255,255,255,.07);padding:1.1rem 0}



.iitem:last-child{border-bottom:1px solid rgba(255,255,255,.07)}



.ilbl{font-size:.63rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:.38rem}



.ival{font-size:.86rem;color:rgba(255,255,255,.46);font-weight:300;line-height:1.6}



.ival a{color:rgba(255,255,255,.46);transition:color .2s}



.ival a:hover{color:var(--gold)}



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



   DOVE SIAMO



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



.dshero{background:var(--navy);padding:5.5rem 0 4.5rem}



.dsh1{font-family:'Barlow',serif;font-size:clamp(2.4rem,4.5vw,4rem);font-weight:300;color:white;line-height:1.1;margin-bottom:1rem}



.dsh1 em{font-style:italic;color:var(--goldl)}



    :root {



      --white:   #ffffff;



      --blue:    #0B1C2D;



      --gold:    #C8A96A;



      --gold-border: rgba(200, 169, 106, 0.35);



      --gold-hover:  rgba(200, 169, 106, 0.60);



      --text-muted:  #6B7280;



      --text-body:   #2E3A47;



      --section-gap: 120px;



    }



    /* ─── UTILITY ─────────────────────────────────────── */



    .container {



      width: 100%;



      max-width: 1100px;



      margin-left: auto;



      margin-right: auto;



      padding-left: 48px;



      padding-right: 48px;



    }







    .eyebrow {



      display: block;



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



      font-size: 11px;



      font-weight: 500;



      letter-spacing: 0.20em;



      text-transform: uppercase;



      color: var(--gold);



      margin-bottom: 20px;



    }







    .section-title {



      font-family: 'Barlow', serif;



      font-size: clamp(28px, 4vw, 38px);



      font-weight: 400;



      color: var(--blue);



      line-height: 1.2;



      margin-bottom: 28px;



    }







    .divider-gold {



      width: 48px;



      height: 1px;



      background: var(--gold);



      margin: 0 auto 32px;



    }







    .divider-gold--left {



      margin-left: 0;



    }







    /* ─── HERO ────────────────────────────────────────── */



    .hero {



      padding-top: 140px;



      padding-bottom: 130px;



      text-align: center;



      border-bottom: 1px solid var(--gold-border);



    }







    .hero__title {



      font-family: 'Barlow', serif;



      font-size: clamp(44px, 7vw, 76px);



      font-weight: 300;



      color: var(--blue);



      line-height: 1.1;



      letter-spacing: -0.01em;



      margin-bottom: 24px;



    }







    .hero__subtitle {



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



      font-size: 15px;



      font-weight: 300;



      color: var(--text-muted);



      max-width: 520px;



      margin: 0 auto;



      line-height: 1.75;



    }







    /* ─── ADDRESS ─────────────────────────────────────── */



    .address {



      padding-top: var(--section-gap);



      padding-bottom: var(--section-gap);



    }







    .address__inner {



      display: grid;



      grid-template-columns: 1fr 1fr;



      gap: 80px;



      align-items: start;



    }







    .address__label {



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



      font-size: 11px;



      font-weight: 500;



      letter-spacing: 0.18em;



      text-transform: uppercase;



      color: var(--gold);



      margin-bottom: 12px;



    }







    .address__lines {



      font-family: 'Barlow', serif;



      font-size: clamp(18px, 2.5vw, 22px);



      font-weight: 400;



      color: var(--blue);



      line-height: 1.8;



    }







    .address__micro {



      margin-top: 24px;



      font-size: 13px;



      font-weight: 300;



      color: var(--text-muted);



      line-height: 1.7;



      max-width: 340px;



    }







    .address__right {



      padding-top: 4rem;



    }







    .address__palace-name {



      font-family: 'Barlow', serif;



      font-size: clamp(32px, 4vw, 48px);



      font-weight: 300;



      color: var(--blue);



      line-height: 1.15;



      margin-bottom: 16px;



    }







    .address__palace-desc {



      font-size: 14px;



      font-weight: 300;



      color: var(--text-muted);



      line-height: 1.8;



      max-width: 400px;



    }







    /* ─── MAP + PHOTO ────────────────────────────────── */



    .map-section {



      padding-top: 0;



      padding-bottom: var(--section-gap);



    }







    .map-section__header {



      text-align: center;



      margin-bottom: 48px;



    }







    /* Outer wrapper: full-bleed padding symmetry */



    .map-duo {



      display: grid;



      grid-template-columns: 1fr 1fr;



      gap: 32px;



      max-width: 1100px;



      margin: 0 auto;



      padding: 0 48px;



    }







    /* Each panel: identical border + overflow */



    .map-panel {



      border: 1px solid var(--gold-border);



      overflow: hidden;



      transition: border-color 0.3s ease;



      position: relative;



    }







    .map-panel:hover {



      border-color: var(--gold-hover);



    }







    /* iframe fills its panel */



    .map-panel iframe {



      display: block;



      width: 100%;



      height: 480px;



      border: none;



    }







    /* photo fills its panel at identical height */



    .map-panel__photo {



      display: block;



      width: 100%;



      height: 480px;



      object-fit: cover;



      object-position: center 20%;



    }







    /* footer link — centrato sotto il pannello mappa */



    .map-link-wrapper {



      display: grid;



      grid-template-columns: 1fr 1fr;



      gap: 32px;



      max-width: 1100px;



      margin: 20px auto 0;



      padding: 0 48px;



    }







    .map-link {



      display: block;



      text-align: center;



      font-size: 12px;



      font-weight: 400;



      letter-spacing: 0.12em;



      text-transform: uppercase;



      color: var(--gold);



      text-decoration: none;



      transition: opacity 0.2s ease;



      /* occupa solo la colonna sinistra (mappa) */



      grid-column: 1 / 2;



    }







    .map-link:hover {



      opacity: 0.7;



    }







    .map-link::after {



      content: ' ↗';



      font-size: 10px;



    }







    /* ─── ACCESSIBILITY ───────────────────────────────── */



    .access {



      padding-top: var(--section-gap);



      padding-bottom: var(--section-gap);



      border-top: 1px solid var(--gold-border);



    }







    .access__header {



      text-align: center;



      margin-bottom: 64px;



    }







    .access__grid {



      display: grid;



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



      gap: 40px;



    }







    .access__item {



      padding: 36px 32px;



      border: 1px solid var(--gold-border);



      transition: border-color 0.3s ease;



    }







    .access__item:hover {



      border-color: var(--gold-hover);



    }







    .access__icon {



      width: 36px;



      height: 36px;



      margin-bottom: 20px;



      opacity: 0.75;



    }







    .access__type {



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



      font-size: 10px;



      font-weight: 500;



      letter-spacing: 0.20em;



      text-transform: uppercase;



      color: var(--gold);



      margin-bottom: 12px;



    }







    .access__detail {



      font-family: 'Barlow', serif;



      font-size: 20px;



      font-weight: 400;



      color: var(--blue);



      line-height: 1.4;



      margin-bottom: 8px;



    }







    .access__sub {



      font-size: 12px;



      font-weight: 300;



      color: var(--text-muted);



      line-height: 1.6;



    }







    /* ─── CONTACTS ────────────────────────────────────── */



    .contacts {



      padding-top: var(--section-gap);



      padding-bottom: var(--section-gap);



      background-color: #FAFAF9;



      border-top: 1px solid var(--gold-border);



    }







    .contacts__inner {



      max-width: 640px;



      margin: 0 auto;



      text-align: center;



    }







    .contacts__grid {



      display: flex;



      flex-direction: column;



      gap: 12px;



      margin-bottom: 48px;



    }







    .contacts__item {



      display: flex;



      justify-content: center;



      align-items: center;



      gap: 12px;



    }







    .contacts__item-label {



      font-size: 10px;



      font-weight: 500;



      letter-spacing: 0.18em;



      text-transform: uppercase;



      color: var(--gold);



      min-width: 60px;



      text-align: right;



    }







    .contacts__item-value {



      font-family: 'Barlow', serif;



      font-size: 19px;



      font-weight: 400;



      color: var(--blue);



    }







    .contacts__item-value a {



      color: var(--blue);



      text-decoration: none;



      transition: color 0.2s ease;



    }







    .contacts__item-value a:hover {



      color: var(--gold);



    }







    .contacts__separator {



      width: 1px;



      height: 16px;



      background: var(--gold-border);



    }







    .btn-gold {



      display: inline-block;



      padding: 14px 40px;



      border: 1px solid var(--gold);



      color: var(--gold);



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



      font-size: 11px;



      font-weight: 500;



      letter-spacing: 0.18em;



      text-transform: uppercase;



      text-decoration: none;



      background: transparent;



      cursor: pointer;



      transition: background-color 0.28s ease, color 0.28s ease;



    }







    .btn-gold:hover {



      background-color: var(--gold);



      color: var(--white);



    }







    /* ─── RESPONSIVE ──────────────────────────────────── */



    @media (max-width: 900px) {



      :root {



        --section-gap: 80px;



      }







      .container {



        padding-left: 24px;



        padding-right: 24px;



      }







      .hero {



        padding-top: 96px;



        padding-bottom: 88px;



      }







      .address__inner {



        grid-template-columns: 1fr;



        gap: 48px;



      }







      .access__grid {



        grid-template-columns: 1fr;



        gap: 20px;



      }







      .map-duo {



        grid-template-columns: 1fr;



        gap: 20px;



        padding: 0 24px;



      }







      .map-panel iframe,



      .map-panel__photo {



        height: 320px;



      }







      .map-link-wrapper {



        grid-template-columns: 1fr;



        padding: 0 24px;



      }







      .map-link {



        grid-column: 1 / 2;



      }







      .contacts__item {



        flex-direction: column;



        gap: 4px;



      }







      .contacts__item-label {



        text-align: center;



        min-width: unset;



      }







      .contacts__separator {



        display: none;



      }



    }







    @media (max-width: 600px) {



      .hero {



        padding-top: 72px;



        padding-bottom: 64px;



      }







      .divider-gold--left {



        margin-left: auto;



      }







      .address__micro {



        max-width: 100%;



      }







      .address__palace-desc {



        max-width: 100%;



      }



    }



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



   RESPONSIVE



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



@media(max-width:1024px){



  .cshg,.csag,.congrid,.sopra{grid-template-columns:1fr;gap:3rem}



  .csprow,.cssg,.csvrow,.srvgg,.hprow{grid-template-columns:1fr 1fr}



  .locitem{grid-template-columns:1fr;gap:2.5rem}



  .locitem.rev{direction:ltr}



  .fg{grid-template-columns:1fr 1fr;gap:2.5rem}



}



@media(max-width:768px){

	

  :root{--nh:56px}



  #nav{padding:0 1.2rem}



  .nlinks,.ncta{display:none}



  button.hbg{display:flex;margin-left:auto}



  .wrap{padding:0 1.2rem}



  .hh1{font-size:clamp(2.2rem,8vw,3rem)}



  .hbtns{flex-direction:column;align-items:center}



  .bgold,.bdark,.bghost{width:100%;justify-content:center}



  .cshero,.srvhero,.lochero,.conhero{padding:4rem 0 3rem}



  .csabout,.csvals,.cspillars,.cssvc{padding:4rem 0}



  .aacc{display:none}



  .astats{grid-template-columns:1fr 1fr}



  .csprow,.cssg,.csvrow,.srvgg{grid-template-columns:1fr}



  .hprow{grid-template-columns:1fr}



  .hctarow{flex-direction:column;align-items:flex-start}



  .loclist,.srvbody{padding:3.5rem 0}



  .locitem{padding:3rem 0}



  .locbri{flex-direction:column;align-items:flex-start}



  .congrid{grid-template-columns:1fr;padding:1.5rem 0 4rem}



  .fbox{padding:1.6rem 1.1rem}



  .opts{grid-template-columns:1fr}



  .ofull{grid-column:span 1}



  .fg{grid-template-columns:1fr;gap:2rem}



  .fbot{flex-direction:column;align-items:flex-start}
  
  .fbrand{align-items: center}

  .fbot{align-items: center}

  .hpillars,.hcta{padding:4rem 0}



  .hctarow .bgold{width:auto;min-width:200px}



  /* nascondi scroll indicator (evita overlap con bottoni hero) */

  .scrhint{display:none}



  /* nascondi foto sotto cards (disallineata su mobile) 

  .home_right{display:none}

*/

}



@media(max-width:400px){



  .hh1{font-size:2.1rem}



  .astats{grid-template-columns:1fr}



}



/* Fix mobile: ecosistema hero padding */

@media(max-width:768px){

  .hero-e{padding:calc(var(--nh,56px) + 2.5rem) 1.5rem 4rem !important;}

}



/*             ECOSISTEMA     */



:root {



            --bg:          #0B1C2D;



            --bg-dark:     #070F18;



            --ivory:       #F5F3EF;



            --gold:        #C8A96A;



            --gold-dim:    rgba(200,169,106,0.2);



            --gold-faint:  rgba(200,169,106,0.06);



            --accent:      #6E4CF5;



            --text:        #E8E6E3;



            --text-dim:    #8A8886;



            --transition:  250ms cubic-bezier(0.4,0,0.2,1);



        }



        



        .pe {



            background: var(--bg-dark);



            color: var(--text);



            font-family: 'Georgia', 'Times New Roman', serif;



            overflow-x: hidden;



            -webkit-font-smoothing: antialiased;



        }



        /* ─── HERO ─────────────────────────────── */



        .hero-e {



            min-height: 100vh;



            display: flex;



            align-items: center;



            justify-content: center;



            padding: 140px 56px 100px;



            position: relative;



            background:



                radial-gradient(ellipse 70% 60% at 50% 55%, rgba(110,76,245,0.07) 0%, transparent 70%),



                linear-gradient(180deg, var(--bg-dark) 0%, var(--bg) 100%);



            overflow: hidden;



        }







        .hero-e::before {



            content: '';



            position: absolute;



            top: 50%; left: 50%;



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



            width: 700px; height: 700px;



            border-radius: 50%;



            border: 1px solid rgba(200,169,106,0.04);



            pointer-events: none;



        }







        .hero-e::after {



            content: '';



            position: absolute;



            top: 50%; left: 50%;



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



            width: 420px; height: 420px;



            border-radius: 50%;



            border: 1px solid rgba(200,169,106,0.07);



            pointer-events: none;



        }







        .hero-content {



            max-width: 820px;



            text-align: center;



            position: relative;



            z-index: 1;



        }







        .eyebrow {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 10px;



            font-weight: 400;



            letter-spacing: 0.5em;



            text-transform: uppercase;



            color: var(--gold);



            display: block;



            margin-bottom: 44px;



            opacity: 0;



            animation: riseIn 1s ease 0.3s forwards;



        }







        .hero-h1 {



            font-size: clamp(46px, 8vw, 96px);



            font-weight: 400;



            line-height: 1.03;



            letter-spacing: -0.025em;



            color: var(--ivory);



            margin-bottom: 40px;



            opacity: 0;



            animation: riseIn 1s ease 0.6s forwards;



        }







        .hero-h1 em {



            font-style: italic;



            color: var(--text);



        }







        .hero-sub {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: clamp(15px, 2vw, 19px);



            font-weight: 300;



            line-height: 1.85;



            color: var(--text-dim);



            max-width: 520px;



            margin: 0 auto;



            opacity: 0;



            animation: riseIn 1s ease 0.9s forwards;



        }







        .hero-sub strong {



            color: var(--text);



            font-weight: 400;



        }







        .scroll-indicator {



            margin-top: 90px;



            display: flex;



            flex-direction: column;



            align-items: center;



            gap: 14px;



            opacity: 0;



            animation: riseIn 1s ease 1.4s forwards;



        }







        .scroll-bar {



            width: 1px;



            height: 64px;



            background: linear-gradient(180deg, transparent, var(--gold));



            animation: pulse 2.4s ease-in-out infinite;



        }







        .scroll-label {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 9px;



            letter-spacing: 0.45em;



            text-transform: uppercase;



            color: var(--text-dim);



        }







        /* ─── CONCEPT ──────────────────────────── */



        .concept-section {



            padding: 130px 56px;



            background: var(--bg);



            position: relative;



        }







        .concept-section::before {



            content: '';



            position: absolute;



            top: 0; left: 50%;



            transform: translateX(-50%);



            width: 1px; height: 80px;



            background: linear-gradient(180deg, var(--gold-dim), transparent);



        }







        .concept-inner {



            max-width: 700px;



            margin: 0 auto;



            text-align: center;



        }







        .section-tag {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 9px;



            font-weight: 400;



            letter-spacing: 0.5em;



            text-transform: uppercase;



            color: var(--gold);



            display: block;



            margin-bottom: 44px;



        }







        .concept-body {



            font-size: clamp(19px, 2.8vw, 27px);



            font-weight: 400;



            line-height: 1.7;



            color: var(--text);



        }







        .concept-body em {



            font-style: normal;



            color: var(--ivory);



        }







        /* ─── SYSTEM SECTION ──────────────────────── */



        .system-section {



            background: #070F18;



            padding: 0;



        }







        .system-header {



            text-align: center;



            padding: 100px 56px 52px;



        }







        .system-h2 {



            font-size: clamp(28px, 4vw, 46px);



            font-weight: 400;



            color: var(--ivory);



            letter-spacing: -0.015em;



        }







        /* Micro testo sopra la griglia */



        .system-grid-intro {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 9px;



            font-weight: 300;



            letter-spacing: 0.40em;



            text-transform: uppercase;



            color: rgba(200,169,106,0.30);



            text-align: center;



            padding: 0 56px;



            margin-bottom: 36px;



        }







        /* Griglia 3×2 — moduli separati con respiro */



        .system-grid {



            display: grid;



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



            gap: 24px;



            max-width: 1100px;



            margin: 0 auto;



            padding: 0 56px;



        }







        /* Card: entità autonoma */



        .svc-card {



            background: rgba(200,169,106,0.02);



            border: 0.8px solid rgba(200,169,106,0.25);



            transition: border-color 300ms ease,



                        transform 300ms ease,



                        opacity 850ms cubic-bezier(0.4,0,0.2,1);



        }







        .svc-card:hover {



            border-color: rgba(200,169,106,0.60);



            transform: translateY(-6px);



        }







        /* Stato "richiamato" — attivato dallo stagger JS */



        .svc-card.recalled {



            opacity: 0.15;



            transform: translateY(14px) scale(0.97);



        }







        .svc-img {



            width: 100%;



            height: 200px;



            background: rgba(200,169,106,0.022);



            border-bottom: 0.8px solid rgba(200,169,106,0.09);

            

            overflow: hidden;



        }

        

        .svc-img img {

			width: 100%;

			height: 100%;

			object-fit: cover;

		}







        .svc-footer {



            padding: 28px;



            text-align: center;



        }







        .svc-label {



            display: block;



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 11px;



            font-weight: 400;



            letter-spacing: 0.15em;



            text-transform: uppercase;



            color: #F5F3EF;



        }







        .svc-desc-mini {



            margin-top: 14px;



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 13px;



            font-weight: 300;



            line-height: 1.6;



            letter-spacing: 0.02em;



            color: rgba(232,230,227,0.65);



        }







        .system-connector {



            display: flex;



            justify-content: center;



            padding: 32px 0;



        }







        .system-connector-line {



            position: relative;



            width: 1px;



            height: 72px;



            background: linear-gradient(180deg, rgba(200,169,106,0.15), rgba(200,169,106,0.75));



        }







        .system-connector-line::after {



            content: '';



            position: absolute;



            bottom: -6px;



            left: 50%;



            transform: translateX(-50%);



            width: 0;



            height: 0;



            border-left: 5px solid transparent;



            border-right: 5px solid transparent;



            border-top: 7px solid rgba(200,169,106,0.75);



        }







        .system-hub-wrap {



            padding: 0 56px;



        }







        .system-hub {



            max-width: 520px;



            margin: 0 auto;



            border: 1.4px solid rgba(200,169,106,0.65);



            background: rgba(200,169,106,0.03);



            padding: 80px 60px;



            text-align: center;



            box-shadow: 0 20px 60px rgba(0,0,0,0.45);



        }







        .hub-logo {



            max-width: 260px;



            width: 100%;



            height: auto;



            margin: 0 auto 24px;



            display: block;



        }







        .system-hub-sub {



            display: block;



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 9px;



            font-weight: 300;



            letter-spacing: 0.24em;



            text-transform: uppercase;



            color: rgba(200,169,106,0.40);



        }







        .system-client {



            padding: 40px 56px 60px;



            text-align: center;



        }







        .system-client-label {



            display: block;



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 9px;



            font-weight: 400;



            letter-spacing: 0.5em;



            text-transform: uppercase;



            color: rgba(200,169,106,0.70);



            margin-bottom: 32px;



        }







        .system-client-name {



            font-size: clamp(44px, 7vw, 90px);



            font-weight: 200;



            color: var(--ivory);



            letter-spacing: -0.025em;



            line-height: 1.05;



            margin-bottom: 28px;



        }







        .system-client-tagline {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 13px;



            font-weight: 300;



            color: rgba(200,169,106,0.70);



            letter-spacing: 0.04em;



        }







        .system-output {



            padding: 0 56px 130px;



            text-align: center;



        }







        .system-output-text {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 10px;



            font-weight: 300;



            letter-spacing: 0.55em;



            text-transform: uppercase;



            color: var(--gold);



        }







        /* ─── OFFICE SECTION ───────────────────── */



        .office-section {



            padding: 140px 56px;



            background: var(--bg-dark);



            position: relative;



            overflow: hidden;



        }







        .office-section::before {



            content: '';



            position: absolute;



            right: -220px; top: 50%;



            transform: translateY(-50%);



            width: 580px; height: 580px;



            border-radius: 50%;



            border: 1px solid rgba(200,169,106,0.05);



            pointer-events: none;



        }







        .office-section::after {



            content: '';



            position: absolute;



            right: -100px; top: 50%;



            transform: translateY(-50%);



            width: 320px; height: 320px;



            border-radius: 50%;



            border: 1px solid rgba(200,169,106,0.07);



            pointer-events: none;



        }







        .office-grid {



            max-width: 1100px;



            margin: 0 auto;



            display: grid;



            grid-template-columns: 1fr 1fr;



            gap: 110px;



            align-items: center;



            position: relative;



            z-index: 1;



        }







        .office-h2 {



            font-size: clamp(30px, 4vw, 52px);



            font-weight: 400;



            color: var(--ivory);



            letter-spacing: -0.02em;



            line-height: 1.12;



            margin-bottom: 32px;



        }







        .office-body {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 16px;



            font-weight: 300;



            line-height: 1.85;



            color: var(--text-dim);



        }







        .metrics {



            display: flex;



            flex-direction: column;



            gap: 52px;



        }







        .metric {



            border-left: 1px solid var(--gold-dim);



            padding-left: 36px;



        }







        .metric-num {



            font-size: clamp(40px, 6vw, 68px);



            font-weight: 200;



            color: var(--ivory);



            line-height: 1;



            letter-spacing: -0.03em;



            margin-bottom: 10px;



        }







        .metric-num sup {



            font-size: 0.45em;



            color: var(--gold);



            vertical-align: super;



        }







        .metric-lbl {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 13px;



            font-weight: 300;



            letter-spacing: 0.06em;



            color: var(--text-dim);



        }







        /* ─── SERVICES ─────────────────────────── */



        .services-section {



            padding: 140px 56px;



            background: linear-gradient(180deg, var(--bg) 0%, #0e1f30 50%, var(--bg) 100%);



        }







        .services-inner {



            max-width: 920px;



            margin: 0 auto;



        }







        .services-hdr {



            margin-bottom: 72px;



        }







        .services-h2 {



            font-size: clamp(30px, 4.5vw, 52px);



            font-weight: 400;



            color: var(--ivory);



            letter-spacing: -0.02em;



            margin-bottom: 20px;



        }







        .services-intro {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 16px;



            font-weight: 300;



            color: #A8A099;



            line-height: 1.75;



            max-width: 480px;



        }







        .svc-list { border-top: 1px solid rgba(200,169,106,0.18); }







        .svc-row {



            display: grid;



            grid-template-columns: 200px 1fr 24px;



            gap: 40px;



            align-items: start;



            padding: 48px 0;



            border-bottom: 1px solid rgba(200,169,106,0.18);



            border-left: 2px solid transparent;



            padding-left: 20px;



            margin-left: -22px;



            transition: border-color var(--transition), background var(--transition);



        }







        .svc-row:hover {



            border-bottom-color: rgba(200,169,106,0.35);



            border-left-color: var(--gold);



            background: rgba(200,169,106,0.03);



        }



        .svc-row:hover .svc-name { color: var(--ivory); }



        .svc-row:hover .svc-dot { background: var(--gold); transform: scale(1.6); }



        .svc-row:hover .svc-desc { color: #C4BAB0; }







        .svc-idx {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 10px;



            font-weight: 500;



            letter-spacing: 0.3em;



            color: rgba(200,169,106,0.85);



            display: block;



            margin-bottom: 10px;



        }







        .svc-name {



            font-size: clamp(20px, 2.8vw, 30px);



            font-weight: 400;



            color: #D8D2CA;



            letter-spacing: -0.01em;



            transition: color var(--transition);



        }







        .svc-desc {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 15px;



            font-weight: 300;



            line-height: 1.8;



            color: #A8A099;



            padding-top: 4px;



            transition: color var(--transition);



        }







        .svc-dot {



            width: 6px; height: 6px;



            border-radius: 50%;



            background: rgba(200,169,106,0.45);



            margin-top: 14px;



            transition: background var(--transition), transform var(--transition);



        }







        /* ─── CTA ──────────────────────────────── */



        .cta-section {



            padding: 170px 56px;



            background: var(--bg);



            text-align: center;



            position: relative;



            overflow: hidden;



        }







        .cta-section::before {



            content: '';



            position: absolute;



            top: 50%; left: 50%;



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



            width: 900px; height: 900px;



            border-radius: 50%;



            border: 1px solid rgba(200,169,106,0.04);



        }







        .cta-section::after {



            content: '';



            position: absolute;



            top: 50%; left: 50%;



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



            width: 520px; height: 520px;



            border-radius: 50%;



            border: 1px solid rgba(200,169,106,0.07);



        }







        .cta-inner {



            position: relative;



            z-index: 1;



        }







        .cta-h2 {



            font-size: clamp(40px, 7vw, 82px);



            font-weight: 400;



            color: var(--ivory);



            letter-spacing: -0.025em;



            line-height: 1.05;



            margin-bottom: 24px;



        }







        .cta-sub {



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 17px;



            font-weight: 300;



            color: var(--text-dim);



            margin-bottom: 64px;



        }







        .cta-btn {



            display: inline-block;



            padding: 20px 56px;



            border: 1px solid var(--gold);



            color: var(--gold);



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 11px;



            font-weight: 400;



            letter-spacing: 0.35em;



            text-transform: uppercase;



            text-decoration: none;



            position: relative;



            overflow: hidden;



            transition: color 0.4s ease;



        }







        .cta-btn::before {



            content: '';



            position: absolute;



            top: 0; left: -100%;



            width: 100%; height: 100%;



            background: var(--gold);



            transition: left 0.4s cubic-bezier(0.4,0,0.2,1);



            z-index: -1;



        }







        .cta-btn:hover { color: var(--bg-dark); }



        .cta-btn:hover::before { left: 0; }







        .cta-email {



            display: block;



            margin-top: 36px;



            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;



            font-size: 14px;



            font-weight: 300;



            letter-spacing: 0.08em;



            color: var(--text-dim);



            text-decoration: none;



            transition: color var(--transition);



        }







        .cta-email:hover { color: var(--gold); }







        /* ─── ANIMATIONS ───────────────────────── */



        @keyframes riseIn {



            from { opacity: 0; transform: translateY(22px); }



            to   { opacity: 1; transform: translateY(0); }



        }







        @keyframes pulse {



            0%, 100% { opacity: 0.3; }



            50% { opacity: 1; }



        }







        /* ─── SCROLL REVEAL ────────────────────── */



        /*.reveal {







            transform: translateY(28px);



            transition: opacity 0.85s ease, transform 0.85s ease;



        }







        .reveal.on { opacity: 1; transform: translateY(0); }







        .reveal-delay-1 { transition-delay: 0.12s; }



        .reveal-delay-2 { transition-delay: 0.24s; }*/







        /* ─── RESPONSIVE ───────────────────────── */



        @media (max-width: 800px) {



            nav { padding: 20px 24px; }







            .hero { padding: 110px 24px 80px; }



            .concept-section { padding: 80px 24px; }







            .system-header { padding: 64px 24px 52px; }



            .system-grid {



                grid-template-columns: 1fr;



                padding: 0 24px;



            }



            .system-hub-wrap { padding: 0 24px; }



            .system-client { padding: 72px 24px 56px; }



            .system-output { padding: 0 24px 90px; }







            .office-section { padding: 90px 24px; }



            .office-grid {



                grid-template-columns: 1fr;



                gap: 64px;



            }







            .services-section { padding: 90px 24px; }



            .svc-row {



                grid-template-columns: 1fr;



                gap: 16px;



            }



            .svc-dot { display: none; }







            .cta-section { padding: 110px 24px; }







            footer {



                padding: 28px 24px;



                flex-direction: column;



                gap: 14px;



                text-align: center;



            }



        }



/*I Nostri Format*/



    :root {



      /* Palette editoriale — viola elegante con profondità */



      --bg-void:        #0B0614;   /* viola quasi nero — base assoluta */



      --bg-dark:        #130C22;   /* viola scuro profondo */



      --bg-mid:         #1C1230;   /* viola medio — card / alternanza */



      --bg-surface:     #271940;   /* viola elevato — superfici hover */







      /* Accenti */



      --gold:           #C8A96E;   /* oro antico — calore, autorevolezza */



      --gold-light:     #E2C99A;   /* oro chiaro per testo su scuro */



      --gold-dim:       #7A6340;   /* oro scuro per borders sottili */



      --electric:       #4F6EF5;   /* blue accent — link, hover, badge */



      --electric-dim:   #2A3A8A;   /* versione più scura per bg badge */







      /* Testo */



      --text-primary:   #F0EBE0;   /* avorio caldo — corpo principale */



      --text-secondary: #9090A8;   /* grigio freddo — didascalie, label */



      --text-muted:     #50506A;   /* molto attenuato */



      --text-on-gold:   #09090F;   /* testo scuro su sfondo oro */







      /* Tipografia */



      --font-serif:     'Playfair Display', Georgia, serif;



      --font-sans:      'DM Sans', system-ui, sans-serif;



      --font-mono:      'DM Mono', monospace;







      /* Spacing */



      --gap-xs:   0.5rem;



      --gap-sm:   1rem;



      --gap-md:   2rem;



      --gap-lg:   4rem;



      --gap-xl:   6rem;



      --gap-xxl:  10rem;







      /* Borders */



      --radius-sm: 4px;



      --radius-md: 8px;



      --radius-lg: 16px;







      /* Transitions */



      --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);



    }







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



       RESET & BASE



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



    .nf {



      background-color: var(--bg-void);



      color: var(--text-primary);



      font-family: var(--font-sans);



      font-weight: 300;



      line-height: 1.7;



      -webkit-font-smoothing: antialiased;



      overflow-x: hidden;



    }







    .nf > img { display: block; max-width: 100%; }







    .nf > a {



      color: var(--gold-light);



      text-decoration: none;



      transition: color 0.2s var(--ease);



    }



    .nf > a:hover { color: var(--gold); }







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



       TYPOGRAPHY SYSTEM



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



    .nf > .t-display {



      font-family: var(--font-serif);



      font-size: clamp(3rem, 8vw, 7rem);



      font-weight: 700;



      line-height: 1.05;



      letter-spacing: -0.02em;



    }



    .nf > .t-display-italic {



      font-family: var(--font-serif);



      font-style: italic;



      font-size: clamp(2.5rem, 6vw, 5.5rem);



      font-weight: 400;



      line-height: 1.1;



      letter-spacing: -0.01em;



    }



    .nf > .t-h1 {



      font-family: var(--font-serif);



      font-size: clamp(2rem, 4vw, 3.5rem);



      font-weight: 600;



      line-height: 1.2;



    }



    .nf > .t-h2 {



      font-family: var(--font-serif);



      font-size: clamp(1.5rem, 3vw, 2.5rem);



      font-weight: 600;



      line-height: 1.3;



    }



    .nf > .t-h3 {



      font-family: var(--font-sans);



      font-size: 1.2rem;



      font-weight: 500;



      letter-spacing: 0.02em;



    }



    .nf > .t-label {



      font-family: var(--font-mono);



      font-size: 0.7rem;



      font-weight: 500;



      letter-spacing: 0.2em;



      text-transform: uppercase;



      color: var(--gold);



    }



    .nf > .t-body {



      font-family: var(--font-sans);



      font-size: 1rem;



      font-weight: 300;



      line-height: 1.8;



      color: var(--text-secondary);



    }



    .nf > .t-body-lg {



      font-family: var(--font-sans);



      font-size: clamp(1rem, 1.8vw, 1.25rem);



      font-weight: 300;



      line-height: 1.9;



      color: var(--text-secondary);



    }







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



       LAYOUT UTILITIES



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



    .nf > .container {



      width: 100%;



      max-width: 1280px;



      margin-inline: auto;



      padding-inline: clamp(1.25rem, 5vw, 4rem);



    }



    .nf > .container--narrow {



      max-width: 860px;



    }



    .nf > .container--wide {



      max-width: 1440px;



    }







    .nf > .section {



      padding-block: var(--gap-xl);



    }



    .nf > .section--xl {



      padding-block: var(--gap-xxl);



    }







    .nf > .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }



    .nf > .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); }



    .nf > .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }







    @media (max-width: 900px) {



      .nf > .grid-3 { grid-template-columns: 1fr 1fr; }



      .nf > .grid-4 { grid-template-columns: 1fr 1fr; }



    }



    @media (max-width: 600px) {



      .nf > .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }



    }







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



       DECORATIVE ELEMENTS



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



    .nf > .gold-line {



      display: inline-block;



      width: 48px;



      height: 2px;



      background: var(--gold);



      margin-bottom: var(--gap-md);



    }







    .nf > .badge {



      display: inline-flex;



      align-items: center;



      gap: 0.4rem;



      padding: 0.3rem 0.8rem;



      border: 1px solid var(--gold-dim);



      border-radius: 100px;



      font-family: var(--font-mono);



      font-size: 0.65rem;



      letter-spacing: 0.15em;



      text-transform: uppercase;



      color: var(--gold);



      background: transparent;



    }



    .nf > .badge::before {



      content: '';



      display: inline-block;



      width: 5px;



      height: 5px;



      border-radius: 50%;



      background: var(--gold);



    }







    .nf > .noise-overlay {



      position: fixed;



      top: 0; left: 0;



      width: 100%; height: 100%;



      pointer-events: none;



      z-index: 999;



      opacity: 0.025;



      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");



      background-size: 200px 200px;



    }











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



       01 — HERO SECTION



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



    .nf > .hero {



      position: relative;



      min-height: 100svh;



      display: flex;



      align-items: flex-end;



      padding-bottom: var(--gap-xl);



      overflow: hidden;



      background-color: var(--bg-void);



    }







    /* Gradient di sfondo astratto */



    .nf > .hero__bg {



      position: absolute;



      inset: 0;



      z-index: 0;



      background:



        radial-gradient(ellipse 80% 60% at 70% 20%, rgba(130, 60, 255, 0.12) 0%, transparent 60%),



        radial-gradient(ellipse 50% 70% at 10% 80%, rgba(200, 169, 110, 0.06) 0%, transparent 60%),



        linear-gradient(180deg, #0B0614 0%, #100818 100%);



    }







    /* Grid di linee decorative */



    .nf > .hero__grid {



      position: absolute;



      inset: 0;



      z-index: 1;



      background-image:



        linear-gradient(rgba(200,169,110,0.04) 1px, transparent 1px),



        linear-gradient(90deg, rgba(200,169,110,0.04) 1px, transparent 1px);



      background-size: 60px 60px;



      mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);



      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);



    }







    /* Elemento grafico grande — numero in background */



    .nf > .hero__bg-number {



      position: absolute;



      right: -5%;



      top: 50%;



      transform: translateY(-50%);



      font-family: var(--font-serif);



      font-size: clamp(20rem, 35vw, 45rem);



      font-weight: 700;



      line-height: 1;



      color: transparent;



      -webkit-text-stroke: 1px rgba(200, 169, 110, 0.06);



      pointer-events: none;



      z-index: 1;



      user-select: none;



    }







    .nf > .hero__content {



      position: relative;



      z-index: 2;



      width: 100%;



    }







    .nf > .hero__eyebrow {



      display: flex;



      align-items: center;



      gap: var(--gap-sm);



      margin-bottom: var(--gap-md);



    }



    .nf > .hero__eyebrow-line {



      display: block;



      width: 40px;



      height: 1px;



      background: var(--gold);



    }



    .nf > .hero__eyebrow-text {



      font-family: var(--font-mono);



      font-size: 0.65rem;



      letter-spacing: 0.3em;



      text-transform: uppercase;



      color: var(--gold);



    }







    .nf > .hero__title {



      font-family: var(--font-serif);



      font-size: clamp(3.5rem, 9vw, 8.5rem);



      font-weight: 700;



      line-height: 1.0;



      letter-spacing: -0.03em;



      margin-bottom: var(--gap-sm);



    }



    .nf > .hero__title em {



      font-style: italic;



      font-weight: 400;



      color: var(--gold-light);



    }







    .nf > .hero__subtitle {



      font-family: var(--font-sans);



      font-size: clamp(1rem, 1.8vw, 1.3rem);



      font-weight: 300;



      color: var(--text-secondary);



      max-width: 560px;



      line-height: 1.7;



      margin-bottom: var(--gap-lg);



    }







    .nf > .hero__bottom {



      display: flex;



      align-items: center;



      justify-content: space-between;



      flex-wrap: wrap;



      gap: var(--gap-md);



    }



    .nf > .hero__ctas {



      display: flex;



      align-items: center;



      gap: var(--gap-sm);



      flex-wrap: wrap;



    }







    .nf > .hero__scroll {



      display: flex;



      align-items: center;



      gap: 0.75rem;



      font-family: var(--font-mono);



      font-size: 0.6rem;



      letter-spacing: 0.2em;



      text-transform: uppercase;



      color: var(--text-muted);



    }



    .nf > .hero__scroll-icon {



      display: flex;



      flex-direction: column;



      align-items: center;



      gap: 4px;



    }



    .nf > .hero__scroll-dot {



      width: 4px;



      height: 4px;



      border-radius: 50%;



      background: var(--gold);



      animation: scrollDot 1.8s ease-in-out infinite;



    }



    .nf > .hero__scroll-line {



      width: 1px;



      height: 32px;



      background: linear-gradient(to bottom, var(--gold), transparent);



    }



    @keyframes scrollDot {



      0%, 100% { opacity: 0; transform: translateY(0); }



      50% { opacity: 1; transform: translateY(6px); }



    }







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



       BUTTONS



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



    .nf > .btn {



      display: inline-flex;



      align-items: center;



      gap: 0.6rem;



      padding: 0.85rem 2rem;



      border-radius: 100px;



      font-family: var(--font-mono);



      font-size: 0.7rem;



      letter-spacing: 0.15em;



      text-transform: uppercase;



      font-weight: 500;



      cursor: pointer;



      transition: all 0.25s var(--ease);



      white-space: nowrap;



      border: none;



    }



    .nf > .btn--primary {



      background: var(--gold);



      color: var(--text-on-gold);



    }



    .nf > .btn--primary:hover {



      background: var(--gold-light);



      transform: translateY(-2px);



      box-shadow: 0 16px 40px rgba(200, 169, 110, 0.25);



    }



    .nf > .btn--ghost {



      background: transparent;



      color: var(--text-primary);



      border: 1px solid rgba(240, 235, 224, 0.2);



    }



    .nf > .btn--ghost:hover {



      border-color: var(--gold-dim);



      color: var(--gold-light);



      transform: translateY(-2px);



    }



    .nf > .btn--gold-outline {



      background: transparent;



      color: var(--gold);



      border: 1px solid var(--gold-dim);



    }



    .nf > .btn--gold-outline:hover {



      background: rgba(200, 169, 110, 0.08);



      border-color: var(--gold);



      transform: translateY(-2px);



    }



    .nf > .btn__arrow {



      transition: transform 0.25s var(--ease);



    }



    .nf > .btn:hover .btn__arrow { transform: translateX(4px); }







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



       02 — MANIFESTO



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



    .nf > .manifesto {



      background-color: var(--bg-dark);



      padding-block: var(--gap-xxl);



      text-align: center;



      position: relative;



      overflow: hidden;



    }



    .nf > .manifesto::before {



      content: '"';



      position: absolute;



      top: -2rem;



      left: 50%;



      transform: translateX(-50%);



      font-family: var(--font-serif);



      font-size: 40rem;



      color: rgba(200, 169, 110, 0.025);



      line-height: 1;



      pointer-events: none;



      z-index: 0;



    }



    .nf > .manifesto__inner {



      position: relative;



      z-index: 1;



    }



    .nf > .manifesto__text {



      font-family: var(--font-serif);



      font-size: clamp(1.5rem, 3.5vw, 2.8rem);



      font-weight: 400;



      line-height: 1.5;



      color: var(--text-primary);



      max-width: 900px;



      margin-inline: auto;



      margin-bottom: var(--gap-md);



    }



    .nf > .manifesto__text em {



      font-style: italic;



      color: var(--gold-light);



    }



    .nf > .manifesto__sign {



      font-family: var(--font-mono);



      font-size: 0.65rem;



      letter-spacing: 0.25em;



      text-transform: uppercase;



      color: var(--text-muted);



    }







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



       03 — COSA SONO I FORMAT



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



    .nf > .cosa-sono {



      background-color: var(--bg-void);



      padding-block: var(--gap-xl);



    }



    .nf > .cosa-sono__layout {



      display: grid;



      grid-template-columns: 1fr 1fr;



      gap: var(--gap-lg);



      align-items: center;



    }



    .nf > .cosa-sono__visual {



      position: relative;



      aspect-ratio: 4/5;



      background: var(--bg-mid);



      border-radius: var(--radius-md);



      overflow: hidden;



    }



    .nf > .cosa-sono__visual-inner {



      position: absolute;



      inset: 0;



      display: flex;



      align-items: center;



      justify-content: center;



      flex-direction: column;



      gap: var(--gap-sm);



    }







    /* Placeholder video/immagine stilizzato */



    .nf > .video-placeholder {



      width: 100%;



      height: 100%;



      position: relative;



      background: linear-gradient(135deg, #130C22 0%, #1C1230 50%, #0F0819 100%);



    }



    .nf > .video-placeholder__lines {



      position: absolute;



      inset: 0;



      background-image:



        repeating-linear-gradient(



          -45deg,



          transparent,



          transparent 40px,



          rgba(200, 169, 110, 0.03) 40px,



          rgba(200, 169, 110, 0.03) 41px



        );



    }



    .nf > .video-placeholder__center {



      position: absolute;



      top: 50%; left: 50%;



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



      display: flex;



      flex-direction: column;



      align-items: center;



      gap: var(--gap-sm);



    }



    .nf > .play-btn {



      width: 72px;



      height: 72px;



      border-radius: 50%;



      background: rgba(200, 169, 110, 0.15);



      border: 1px solid rgba(200, 169, 110, 0.3);



      display: flex;



      align-items: center;



      justify-content: center;



      cursor: pointer;



      transition: all 0.3s;



    }



    .nf > .play-btn:hover {



      background: rgba(200, 169, 110, 0.25);



      transform: scale(1.08);



    }



    .nf > .play-btn svg { fill: var(--gold); margin-left: 4px; }



    .nf > .video-placeholder__label {



      font-family: var(--font-mono);



      font-size: 0.6rem;



      letter-spacing: 0.2em;



      text-transform: uppercase;



      color: var(--text-muted);



    }







    /* Decorazione angolare */



    .nf > .corner-decoration {



      position: absolute;



      width: 40px;



      height: 40px;



    }



    .nf > .corner-decoration--tl { top: 16px; left: 16px; border-top: 1px solid var(--gold-dim); border-left: 1px solid var(--gold-dim); }



    .nf > .corner-decoration--br { bottom: 16px; right: 16px; border-bottom: 1px solid var(--gold-dim); border-right: 1px solid var(--gold-dim); }







    .nf > .cosa-sono__text { }



    .nf > .cosa-sono__stats {



      display: grid;



      grid-template-columns: 1fr 1fr;



      gap: var(--gap-sm);



      margin-top: var(--gap-md);



    }



    .nf > .stat {



      padding: var(--gap-sm);



      background: var(--bg-mid);



      border-radius: var(--radius-md);



      border: 1px solid rgba(200, 169, 110, 0.08);



    }



    .nf > .stat__num {



      font-family: var(--font-serif);



      font-size: 2.5rem;



      font-weight: 700;



      color: var(--gold);



      line-height: 1;



    }



    .nf > .stat__label {



      font-family: var(--font-mono);



      font-size: 0.6rem;



      letter-spacing: 0.15em;



      text-transform: uppercase;



      color: var(--text-muted);



      margin-top: 0.25rem;



    }







    @media (max-width: 768px) {



      .nf > .cosa-sono__layout { grid-template-columns: 1fr; }



      .nf > .cosa-sono__visual { aspect-ratio: 16/9; }



    }







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



       04 — GRID FORMAT CARDS



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



    .nf > .format-grid {



      background-color: var(--bg-dark);



      padding-block: var(--gap-xl);



    }



    .nf > .format-grid__header {



      display: flex;



      align-items: flex-end;



      justify-content: space-between;



      margin-bottom: var(--gap-lg);



      flex-wrap: wrap;



      gap: var(--gap-md);



    }







    .nf > .cards-grid {



      display: grid;



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



      gap: 1.5px; /* gap minimo per effetto "magazine" */



      background: rgba(200, 169, 110, 0.06);



    }







    @media (max-width: 900px) { .nf > .cards-grid { grid-template-columns: 1fr 1fr; } }



    @media (max-width: 600px) { .nf > .cards-grid { grid-template-columns: 1fr; } }







    .nf > .format-card {



      position: relative;



      aspect-ratio: 3/4;



      overflow: hidden;



      cursor: pointer;



      background: var(--bg-mid);



    }







    /* Card feature — grande, 2 colonne */



    .nf > .format-card--feature {



      grid-column: span 2;



      aspect-ratio: 16/9;



    }



    @media (max-width: 900px) {



      .nf > .format-card--feature { grid-column: span 1; aspect-ratio: 3/4; }



    }







    .nf > .format-card__bg {



      position: absolute;



      inset: 0;



      transition: transform 0.6s var(--ease);



    }



    .nf > .format-card:hover .format-card__bg {



      transform: scale(1.04);



    }







    /* Sfondo placeholder card — The Trauma Show: viola profondo con sfumatura drammatica */



    .format-card:nth-child(1) .format-card__bg { background: linear-gradient(160deg, #130C22 0%, #2D0C2E 45%, #1A0520 100%); }



    /* WIP card: buio quasi assoluto, mistero */



    .format-card:nth-child(2) .format-card__bg { background: linear-gradient(135deg, #0C0A18 0%, #16102A 100%); }







    /* Pattern decorativi interni alle card */



    .format-card__pattern {



      position: absolute;



      inset: 0;



      opacity: 0.18;



    }



    .format-card:nth-child(odd) .format-card__pattern {



      background-image: radial-gradient(circle at 30% 70%, rgba(200,169,110,0.5) 0%, transparent 55%);



    }



    .format-card:nth-child(even) .format-card__pattern {



      background-image: radial-gradient(circle at 70% 30%, rgba(160,100,255,0.45) 0%, transparent 55%);



    }







    .format-card__overlay {



      position: absolute;



      inset: 0;



      background: linear-gradient(to top, rgba(11,6,20,0.97) 0%, rgba(11,6,20,0.45) 50%, rgba(11,6,20,0.08) 100%);



      transition: opacity 0.4s;



    }







    .format-card__content {



      position: absolute;



      bottom: 0;



      left: 0;



      right: 0;



      padding: var(--gap-md);



      z-index: 2;



    }







    .format-card__type {



      font-family: var(--font-mono);



      font-size: 0.55rem;



      letter-spacing: 0.25em;



      text-transform: uppercase;



      color: var(--gold);



      margin-bottom: 0.5rem;



      display: flex;



      align-items: center;



      gap: 0.5rem;



    }



    .format-card__type::before {



      content: '';



      display: inline-block;



      width: 16px;



      height: 1px;



      background: var(--gold);



    }







    .format-card__title {



      font-family: var(--font-serif);



      font-size: clamp(1.2rem, 2vw, 1.8rem);



      font-weight: 700;



      line-height: 1.2;



      color: var(--text-primary);



      margin-bottom: 0.5rem;



    }



    .format-card--feature .format-card__title {



      font-size: clamp(1.5rem, 3vw, 2.5rem);



    }







    .format-card__desc {



      font-size: 0.85rem;



      color: var(--text-secondary);



      line-height: 1.5;



      max-width: 360px;



      opacity: 0;



      transform: translateY(8px);



      transition: all 0.3s var(--ease);



    }



    .format-card:hover .format-card__desc {



      opacity: 1;



      transform: translateY(0);



    }







    .format-card__tag {



      position: absolute;



      top: var(--gap-sm);



      right: var(--gap-sm);



      font-family: var(--font-mono);



      font-size: 0.55rem;



      letter-spacing: 0.15em;



      text-transform: uppercase;



      padding: 0.3rem 0.7rem;



      background: rgba(11, 6, 20, 0.85);



      border: 1px solid rgba(200, 169, 110, 0.2);



      border-radius: 100px;



      color: var(--text-secondary);



      z-index: 2;



      backdrop-filter: blur(8px);



    }







    /* Numero di card */



    .format-card__num {



      position: absolute;



      top: var(--gap-sm);



      left: var(--gap-sm);



      font-family: var(--font-serif);



      font-size: 5rem;



      font-weight: 700;



      color: transparent;



      -webkit-text-stroke: 1px rgba(200, 169, 110, 0.12);



      line-height: 1;



      z-index: 2;



      user-select: none;



    }







    /* Tag "attivo" — evidenziato oro */



    .format-card__tag--active {



      background: rgba(200, 169, 110, 0.12);



      border-color: rgba(200, 169, 110, 0.4);



      color: var(--gold-light);



    }







    /* ——— CARD WIP — "in costruzione" ——————————————————— */



    .format-card--wip {



      cursor: default;



    }



    .format-card--wip .format-card__overlay {



      background: linear-gradient(to top, rgba(11,6,20,0.98) 0%, rgba(11,6,20,0.82) 100%);



    }



    .format-card--wip .format-card__content {



      display: flex;



      flex-direction: column;



      justify-content: center;



      align-items: flex-start;



      height: 100%;



      padding-bottom: 0;



    }



    /* Il titolo e la desc della WIP sono sempre visibili */



    .format-card--wip .format-card__title {



      color: var(--text-secondary);



      font-style: italic;



      font-size: clamp(1rem, 1.6vw, 1.5rem);



      opacity: 0.6;



    }



    .format-card--wip .format-card__desc {



      opacity: 1;



      transform: none;



      color: var(--text-muted);



      font-size: 0.75rem;



    }



    /* Etichetta "In sviluppo" con punto pulsante */



    .wip-label {



      display: flex;



      align-items: center;



      gap: 0.45rem;



      font-family: var(--font-mono);



      font-size: 0.55rem;



      letter-spacing: 0.22em;



      text-transform: uppercase;



      color: var(--gold);



      margin-bottom: 0.75rem;



    }



    .wip-dot {



      display: inline-block;



      width: 5px;



      height: 5px;



      background: var(--gold);



      border-radius: 50%;



      flex-shrink: 0;



      animation: wip-pulse 2.4s ease-in-out infinite;



    }



    @keyframes wip-pulse {



      0%, 100% { opacity: 1;   transform: scale(1);   }



      50%       { opacity: 0.25; transform: scale(0.6); }



    }



    /* Pattern decorativo WIP: linee diagonali sottilissime */



    .format-card--wip .format-card__pattern {



      background-image: repeating-linear-gradient(



        -45deg,



        rgba(200,169,110,0.025) 0px,



        rgba(200,169,110,0.025) 1px,



        transparent 1px,



        transparent 14px



      );



      opacity: 1;



    }







    /* ——— TEASER STRIP — "Prossimamente" ——————————————— */



    .format-teaser {



      margin-top: 2px; /* gap minimo, stesso del grid */



      background: var(--bg-void);



      padding: var(--gap-lg) 0;



      display: flex;



      align-items: center;



      justify-content: center;



      gap: var(--gap-md);



    }



    .format-teaser__line {



      flex: 1;



      height: 1px;



      background: linear-gradient(to right, transparent, rgba(200,169,110,0.15), transparent);



      max-width: 120px;



    }



    .format-teaser__body {



      display: flex;



      flex-direction: column;



      align-items: center;



      gap: 0.6rem;



      text-align: center;



    }



    .format-teaser__label {



      font-family: var(--font-mono);



      font-size: 0.5rem;



      letter-spacing: 0.3em;



      text-transform: uppercase;



      color: var(--text-muted);



    }



    .format-teaser__text {



      font-family: var(--font-serif);



      font-size: clamp(1rem, 2vw, 1.35rem);



      font-style: italic;



      color: var(--text-secondary);



      line-height: 1.4;



    }



    .format-teaser__cta {



      display: inline-block;



      margin-top: 0.5rem;



      font-family: var(--font-mono);



      font-size: 0.55rem;



      letter-spacing: 0.2em;



      text-transform: uppercase;



      color: var(--gold);



      text-decoration: none;



      border-bottom: 1px solid rgba(200,169,110,0.3);



      padding-bottom: 2px;



      transition: color 0.2s, border-color 0.2s;



    }



    .format-teaser__cta:hover {



      color: var(--gold-light);



      border-color: var(--gold-light);



    }







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



       05 — STORYTELLING



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



    .storytelling {



      background-color: var(--bg-void);



      padding-block: var(--gap-xxl);



      overflow: hidden;



    }



    .storytelling__layout {



      display: grid;



      grid-template-columns: 1fr 2fr;



      gap: var(--gap-lg);



      align-items: start;



    }



    .storytelling__sidebar {



      position: sticky;



      top: 6rem;



    }



    .storytelling__chapter {



      padding: var(--gap-md) 0;



      border-top: 1px solid rgba(200, 169, 110, 0.1);



    }



    .storytelling__chapter:last-child {



      border-bottom: 1px solid rgba(200, 169, 110, 0.1);



    }



    .storytelling__chapter-num {



      font-family: var(--font-mono);



      font-size: 0.6rem;



      letter-spacing: 0.2em;



      color: var(--gold);



      margin-bottom: 0.5rem;



    }



    .storytelling__chapter-title {



      font-family: var(--font-serif);



      font-size: 1.1rem;



      font-weight: 600;



      color: var(--text-primary);



    }







    .storytelling__content {}



    .storytelling__block {



      margin-bottom: var(--gap-lg);



    }



    .storytelling__block:last-child { margin-bottom: 0; }



    .storytelling__quote {



      font-family: var(--font-serif);



      font-size: clamp(1.3rem, 2.5vw, 2rem);



      font-style: italic;



      font-weight: 400;



      color: var(--text-primary);



      line-height: 1.5;



      border-left: 2px solid var(--gold);



      padding-left: var(--gap-md);



      margin-block: var(--gap-md);



    }



    .storytelling__image-placeholder {



      aspect-ratio: 16/9;



      background: var(--bg-mid);



      border-radius: var(--radius-md);



      display: flex;



      align-items: center;



      justify-content: center;



      border: 1px solid rgba(200, 169, 110, 0.08);



      overflow: hidden;



      position: relative;



      margin-block: var(--gap-md);



    }



    .storytelling__image-placeholder::before {



      content: 'IMMAGINE EDITORIALE';



      font-family: var(--font-mono);



      font-size: 0.6rem;



      letter-spacing: 0.2em;



      color: var(--text-muted);



    }



    .storytelling__image-grad {



      position: absolute;



      inset: 0;



      background: linear-gradient(135deg, rgba(130,60,255,0.07) 0%, rgba(200,169,110,0.05) 100%);



    }







    @media (max-width: 900px) {



      .storytelling__layout { grid-template-columns: 1fr; }



      .storytelling__sidebar { position: relative; top: auto; }



    }







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



       06 — SU MISURA



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



    .su-misura {



      background: var(--bg-dark);



      padding-block: var(--gap-xl);



      position: relative;



      overflow: hidden;



    }



    .su-misura::before {



      content: 'SU MISURA';



      position: absolute;



      top: 50%;



      left: 50%;



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



      font-family: var(--font-serif);



      font-size: clamp(6rem, 15vw, 20rem);



      font-weight: 700;



      color: transparent;



      -webkit-text-stroke: 1px rgba(200, 169, 110, 0.04);



      white-space: nowrap;



      pointer-events: none;



      z-index: 0;



    }



    .su-misura__inner { position: relative; z-index: 1; }



    .su-misura__layout {



      display: grid;



      gap: var(--gap-xl);



      align-items: center;



    }



    @media (max-width: 768px) { .su-misura__layout { grid-template-columns: 1fr; } }







    .capabilities-list { margin-top: var(--gap-md); }



    .capability-item {



      display: flex;



      align-items: flex-start;



      gap: var(--gap-sm);



      padding: var(--gap-sm) 0;



      border-bottom: 1px solid rgba(200, 169, 110, 0.06);



    }



    .capability-item:last-child { border-bottom: none; }



    .capability-num {



      font-family: var(--font-mono);



      font-size: 0.6rem;



      letter-spacing: 0.1em;



      color: var(--gold);



      min-width: 2rem;



      padding-top: 0.15rem;



    }



    .capability-text {



      font-family: var(--font-sans);



      font-size: 0.95rem;



      color: var(--text-secondary);



      line-height: 1.5;



    }



    .capability-text strong {



      color: var(--text-primary);



      font-weight: 500;



    }



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



       07 — PARTNERSHIP



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



    .partnership {



      background: var(--bg-void);



      padding-block: var(--gap-xl);



    }



    .partnership__header { text-align: center; margin-bottom: var(--gap-xl); }



    .partnership__types {



      display: grid;



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



      gap: var(--gap-md);



    }



    @media (max-width: 768px) { .partnership__types { grid-template-columns: 1fr; } }







    .partnership-card {



      padding: var(--gap-md);



      border: 1px solid rgba(200, 169, 110, 0.1);



      border-radius: var(--radius-md);



      background: var(--bg-mid);



      transition: all 0.3s var(--ease);



      position: relative;



      overflow: hidden;



    }



    .partnership-card::before {



      content: '';



      position: absolute;



      inset: 0;



      background: linear-gradient(135deg, rgba(200,169,110,0.04) 0%, transparent 60%);



      opacity: 0;



      transition: opacity 0.3s;



    }



    .partnership-card:hover {



      border-color: var(--gold-dim);



      transform: translateY(-4px);



      box-shadow: 0 24px 48px rgba(0,0,0,0.4);



    }



    .partnership-card:hover::before { opacity: 1; }







    .partnership-card__icon {



      width: 48px;



      height: 48px;



      border-radius: var(--radius-sm);



      background: rgba(200, 169, 110, 0.08);



      border: 1px solid rgba(200, 169, 110, 0.15);



      display: flex;



      align-items: center;



      justify-content: center;



      font-size: 1.3rem;



      margin-bottom: var(--gap-sm);



    }



    .partnership-card__title {



      font-family: var(--font-serif);



      font-size: 1.2rem;



      font-weight: 600;



      margin-bottom: 0.5rem;



    }



    .partnership-card__desc {



      font-size: 0.85rem;



      color: var(--text-secondary);



      line-height: 1.6;



      margin-bottom: var(--gap-sm);



    }



    .partnership-card__targets {



      display: flex;



      flex-wrap: wrap;



      gap: 0.4rem;



    }



    .target-tag {



      font-family: var(--font-mono);



      font-size: 0.55rem;



      letter-spacing: 0.1em;



      text-transform: uppercase;



      padding: 0.25rem 0.6rem;



      border: 1px solid rgba(130, 60, 255, 0.2);



      border-radius: 100px;



      color: rgba(130, 60, 255, 0.8);



      background: rgba(130, 60, 255, 0.05);



    }







    /* Logos partner (placeholder) */



    .logos-strip {



      margin-top: var(--gap-xl);



      padding-top: var(--gap-lg);



      border-top: 1px solid rgba(200, 169, 110, 0.08);



    }



    .logos-strip__label {



      text-align: center;



      font-family: var(--font-mono);



      font-size: 0.6rem;



      letter-spacing: 0.2em;



      text-transform: uppercase;



      color: var(--text-muted);



      margin-bottom: var(--gap-md);



    }



    .logos-strip__grid {



      display: flex;



      align-items: center;



      justify-content: center;



      gap: var(--gap-lg);



      flex-wrap: wrap;



    }



    .logo-placeholder {



      width: 80px;



      height: 30px;



      background: rgba(240, 235, 224, 0.06);



      border-radius: var(--radius-sm);



    }







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



       08 — CTA FINALE



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



    .nf > .cta-final {



      background: var(--bg-dark);



      padding-block: var(--gap-xxl);



      position: relative;



      overflow: hidden;



      text-align: center;



    }







    /* Background grafico */



    .nf > .cta-final__bg {



      position: absolute;



      inset: 0;



      background:



        radial-gradient(ellipse 80% 80% at 50% 50%, rgba(200, 169, 110, 0.06) 0%, transparent 70%),



        radial-gradient(ellipse 40% 40% at 20% 80%, rgba(130, 60, 255, 0.07) 0%, transparent 60%),



        radial-gradient(ellipse 40% 40% at 80% 20%, rgba(130, 60, 255, 0.05) 0%, transparent 60%);



    }



    .nf > .cta-final__ring {



      position: absolute;



      top: 50%; left: 50%;



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



      width: clamp(400px, 60vw, 800px);



      height: clamp(400px, 60vw, 800px);



      border-radius: 50%;



      border: 1px solid rgba(200, 169, 110, 0.06);



      pointer-events: none;



    }



    .nf > .cta-final__ring:nth-child(2) {



      width: clamp(300px, 45vw, 600px);



      height: clamp(300px, 45vw, 600px);



      border-color: rgba(200, 169, 110, 0.04);



    }







    .nf > .cta-final__content {



      position: relative;



      z-index: 1;



    }



    .nf > .cta-final__title {



      font-family: var(--font-serif);



      font-size: clamp(2rem, 5vw, 4.5rem);



      font-weight: 700;



      line-height: 1.1;



      margin-bottom: var(--gap-md);



    }



    .nf > .cta-final__title em {



      font-style: italic;



      font-weight: 400;



      color: var(--gold-light);



    }



    .nf > .cta-final__sub {



      font-size: clamp(0.95rem, 1.5vw, 1.15rem);



      color: var(--text-secondary);



      max-width: 520px;



      margin-inline: auto;



      margin-bottom: var(--gap-lg);



      line-height: 1.7;



    }



    .nf > .cta-final__btns {



      display: flex;



      align-items: center;



      justify-content: center;



      gap: var(--gap-sm);



      flex-wrap: wrap;



    }



    .nf > .cta-final__contact {



      margin-top: var(--gap-lg);



      font-family: var(--font-mono);



      font-size: 0.65rem;



      letter-spacing: 0.15em;



      color: var(--text-muted);



    }



    .nf > .cta-final__contact a {



      color: var(--gold);



      text-decoration: underline;



      text-underline-offset: 3px;



    }







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



       FOOTER MINI



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



    .footer-mini {



      background: var(--bg-void);



      border-top: 1px solid rgba(200, 169, 110, 0.06);



      padding: var(--gap-md) 0;



    }



    .footer-mini__inner {



      display: flex;



      align-items: center;



      justify-content: space-between;



      flex-wrap: wrap;



      gap: var(--gap-sm);



    }



    .footer-mini__copy {



      font-family: var(--font-mono);



      font-size: 0.6rem;



      letter-spacing: 0.1em;



      color: var(--text-muted);



    }



    .footer-mini__back {



      font-family: var(--font-mono);



      font-size: 0.6rem;



      letter-spacing: 0.1em;



      text-transform: uppercase;



      color: var(--text-muted);



      display: flex;



      align-items: center;



      gap: 0.5rem;



      transition: color 0.2s;



    }



    .footer-mini__back:hover { color: var(--gold); }







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



       SECTION HEADER COMPONENT



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



    .section-header {



      margin-bottom: var(--gap-lg);



    }



    .section-header--center { text-align: center; }



    .section-header__label {



      font-family: var(--font-mono);



      font-size: 0.65rem;



      letter-spacing: 0.3em;



      text-transform: uppercase;



      color: var(--gold);



      display: flex;



      align-items: center;



      gap: 0.75rem;



      margin-bottom: var(--gap-sm);



    }



    .section-header--center .section-header__label {



      justify-content: center;



    }



    .section-header__label::before {



      content: '';



      display: inline-block;



      width: 24px;



      height: 1px;



      background: var(--gold);



    }



    .section-header__title {



      font-family: var(--font-serif);



      font-size: clamp(1.8rem, 3.5vw, 3rem);



      font-weight: 700;



      line-height: 1.2;



      color: var(--text-primary);



    }



    .section-header__desc {



      margin-top: var(--gap-sm);



      font-size: clamp(0.9rem, 1.4vw, 1.05rem);



      color: var(--text-secondary);



      max-width: 560px;



      line-height: 1.8;



    }



    .section-header--center .section-header__desc {



      margin-inline: auto;



    }







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



       SCROLLING TICKER



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



    .ticker {



      background: var(--gold);



      padding: 0.6rem 0;



      overflow: hidden;



      white-space: nowrap;



    }



    .ticker__track {



      display: inline-flex;



      animation: ticker 20s linear infinite;



    }



    .ticker__item {



      font-family: var(--font-mono);



      font-size: 0.65rem;



      letter-spacing: 0.2em;



      text-transform: uppercase;



      color: var(--text-on-gold);



      padding-inline: 2rem;



    }



    .ticker__item::after {



      content: '·';



      margin-left: 2rem;



      opacity: 0.4;



    }



    @keyframes ticker {



      from { transform: translateX(0); }



      to { transform: translateX(-50%); }



    }







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



       UTILITY



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



    .text-gold { color: var(--gold); }



    .text-center { text-align: center; }



    .mt-sm { margin-top: var(--gap-sm); }



    .mt-md { margin-top: var(--gap-md); }



    .mt-lg { margin-top: var(--gap-lg); }







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



       ANNOTATION LAYER (solo per preview)



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



    .wp-note {



      display: inline-flex;



      align-items: center;



      gap: 0.3rem;



      font-family: var(--font-mono);



      font-size: 0.55rem;



      letter-spacing: 0.1em;



      padding: 0.2rem 0.5rem;



      background: rgba(130, 60, 255, 0.15);



      border: 1px solid rgba(130, 60, 255, 0.3);



      border-radius: 4px;



      color: rgba(130, 60, 255, 0.9);



      vertical-align: middle;



      margin-left: 0.5rem;



    }