/* ============ CONCEPT C — "KINETIC" ============ */

/* Inter Tight servito dal sito, non da Google: toglie due connessioni esterne
   e un foglio di stile che bloccava il rendering. È un font variabile 300-600,
   quindi un solo file copre tutti i pesi. Licenza SIL Open Font License. */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:300 600;font-display:swap;
  src:url(../font/inter-tight-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:300 600;font-display:swap;
  src:url(../font/inter-tight-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#08090A; --bg2:#0E1012; --fg:#F2F1ED; --oro:#C78E3F; --oro2:#E2B878;
  --mut:#7A7C81; --line:rgba(242,241,237,.13);
  --f:"Inter Tight","Poppins",-apple-system,sans-serif;
  --pad:clamp(18px,4.4vw,80px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:var(--f);font-weight:300;font-size:16px;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock,body.menu-on{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1600px;margin:0 auto;padding-inline:var(--pad)}
::selection{background:var(--oro);color:#000}
/* ---------- tipografia ---------- */
.xl{font-size:clamp(38px,7.6vw,116px);font-weight:500;line-height:.86;letter-spacing:-.055em;text-transform:uppercase}
.lg{font-size:clamp(28px,4.4vw,64px);font-weight:500;line-height:.92;letter-spacing:-.045em;text-transform:uppercase}
.md{font-size:clamp(21px,2.5vw,38px);font-weight:400;line-height:1.02;letter-spacing:-.035em}
.tag{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--oro);
  display:inline-flex;align-items:center;gap:12px}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--oro);flex:none}
.lead{font-size:clamp(15.5px,1.15vw,19px);color:#A7A9AE;max-width:58ch;line-height:1.75;font-weight:300}
.mut{color:var(--mut)}
/* ---------- preloader ---------- */
#pre{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;align-items:flex-end;
  justify-content:space-between;padding:var(--pad);transition:transform 1.1s var(--ease)}
#pre.out{transform:translateY(-101%)}
#pre .cnt{font-size:clamp(70px,16vw,230px);font-weight:500;letter-spacing:-.06em;line-height:.8}
#pre .lbl{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);padding-bottom:14px}
#pre .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--oro);width:0}
/* ---------- cursore ---------- */
#cur{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--oro);
  z-index:900;pointer-events:none;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .35s}
#cur.big{width:88px;height:88px;background:rgba(199,142,63,.22);backdrop-filter:blur(2px)}
#cur.big::after{content:attr(data-l);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg)}
@media(hover:none){#cur{display:none}}
/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto;z-index:130;padding:22px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  transition:transform .55s var(--ease),background .4s,padding .4s}
header.hide{transform:translateY(-115%)}
header.solid{background:rgba(8,9,10,.82);backdrop-filter:blur(16px);padding:13px var(--pad);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:clamp(52px,4.8vw,66px);transition:height .4s var(--ease)}
header.solid .brand img{height:clamp(42px,3.8vw,52px)}
.brand span{font-size:13.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:500}
header nav{display:flex;gap:30px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase}
header nav a{position:relative;overflow:hidden;height:1.25em;display:block}
header nav a i{display:block;font-style:normal;transition:transform .45s var(--ease)}
header nav a i+i{position:absolute;top:100%;left:0;color:var(--oro)}
header nav a:hover i{transform:translateY(-100%)}
.hbtn{border:1px solid var(--line);border-radius:100px;padding:11px 22px;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;transition:.4s}
.hbtn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.hr{display:flex;align-items:center;gap:20px}
.lang{font-size:10.5px;letter-spacing:.16em;color:var(--mut)}
.lang b{color:var(--fg);font-weight:500}
/* ---------- progress ---------- */
#prog{position:fixed;top:0;left:0;height:2px;background:var(--oro);z-index:130;width:0}
/* ---------- hero ---------- */
.hero{position:relative;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:118%;object-fit:cover;filter:brightness(.55) contrast(1.15) grayscale(.15);will-change:transform}
.hero-media::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 70% 20%,transparent,rgba(8,9,10,.75) 70%),
             linear-gradient(180deg,rgba(8,9,10,.7),transparent 32%,rgba(8,9,10,.96))}
.hero-in{position:relative;z-index:3;padding:clamp(110px,14vh,150px) var(--pad) clamp(26px,4vh,54px)}
.hero h1{margin-bottom:26px}
.line{overflow:hidden;display:block}
.line>span{display:block;transform:translateY(105%);transition:transform 1.15s var(--ease)}
.ready .line>span{transform:none}
.line:nth-child(2)>span{transition-delay:.09s}
.line:nth-child(3)>span{transition-delay:.18s}
.hero h1 em{font-style:normal;color:var(--oro);-webkit-text-stroke:0}
.hero-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:22px}
.hero-bot .lead{max-width:44ch}
.scrollcue{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--mut)}
.scrollcue i{display:block;width:1px;height:40px;background:linear-gradient(var(--oro),transparent);animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* ---------- statement (fill on scroll) ---------- */
.stmt{padding-block:clamp(90px,16vh,190px)}
.stmt p,.stmt h2{font-size:clamp(24px,3vw,44px);font-weight:400;line-height:1.12;
  letter-spacing:-.04em;max-width:19ch;text-transform:none}
/* .38 è il minimo che regge il contrasto richiesto per il testo grande:
   sotto quel valore le parole spente risultano illeggibili a chi ci vede poco. */
.stmt w{display:inline-block;color:rgba(242,241,237,.38);transition:color .5s ease}
.stmt w.on{color:var(--fg)}
.stmt w.g.on{color:var(--oro)}
/* ---------- materiali orizzontale ---------- */
.hz{position:relative}
.hz-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.hz-track{display:flex;gap:22px;padding-inline:var(--pad);will-change:transform}
.hz-head{flex:none;width:min(38vw,470px);padding-right:40px}
.hz-card{flex:none;width:min(31vw,400px);height:min(70vh,600px);position:relative;overflow:hidden;margin:0}
.hz-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);filter:brightness(.92)}
.hz-card:hover img{filter:brightness(1)}
.hz-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(8,9,10,.9))}
.hz-card .meta{position:absolute;z-index:2;left:24px;right:24px;bottom:22px}
.hz-card .meta b{display:block;font-size:clamp(18px,1.7vw,26px);font-weight:500;letter-spacing:-.03em;text-transform:uppercase}
.hz-card .meta small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.hz-card .meta p{font-size:13px;color:#9EA0A5;margin-top:8px;opacity:0;max-height:0;transition:.5s var(--ease)}
.hz-card:hover .meta p{opacity:1;max-height:60px}
/* ---------- servizi ---------- */
.srv{padding-block:clamp(80px,12vh,150px);position:relative}
.srv-grid{display:grid;grid-template-columns:.34fr .66fr;gap:clamp(24px,4vw,70px);align-items:start}
.srv-left{position:sticky;top:clamp(90px,14vh,150px)}
.srv-list a{display:grid;grid-template-columns:56px 1fr auto;gap:20px;align-items:center;
  padding:24px 0;border-top:1px solid var(--line);position:relative;transition:.45s var(--ease)}
.srv-list a:last-child{border-bottom:1px solid var(--line)}
.srv-list .n{font-size:10.5px;letter-spacing:.2em;color:var(--oro)}
.srv-list h3{font-size:clamp(19px,2vw,30px);font-weight:400;letter-spacing:-.035em;
  transition:transform .5s var(--ease),color .4s}
.srv-list a:hover h3{transform:translateX(20px);color:var(--oro2)}
.srv-list .pl{font-size:20px;color:var(--mut);transition:.4s}
.srv-list a:hover .pl{transform:rotate(90deg);color:var(--oro)}
#hoverimg{position:fixed;width:270px;height:350px;z-index:80;pointer-events:none;overflow:hidden;
  opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .35s,transform .5s var(--ease)}
#hoverimg.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#hoverimg img{width:100%;height:100%;object-fit:cover}
/* ---------- progetti stack ---------- */
.stack-sec{position:relative;padding-bottom:10vh}
.card-wrap{position:sticky;top:0;height:100svh;display:flex;align-items:center;justify-content:center}
.card{width:min(92vw,1200px);height:min(78vh,700px);position:relative;overflow:hidden;
  border:1px solid var(--line);will-change:transform}
.card img{width:100%;height:100%;object-fit:cover;filter:brightness(.82)}
.card .c-in{position:absolute;inset:auto 0 0 0;padding:clamp(24px,4vw,52px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:linear-gradient(transparent,rgba(8,9,10,.92))}
.card h3{font-size:clamp(21px,2.4vw,36px);font-weight:500;letter-spacing:-.04em;text-transform:uppercase;line-height:.95}
.card .c-meta{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--oro)}
.card .c-mat{font-size:12.5px;color:#A7A9AE}
.card .idx{position:absolute;top:clamp(20px,3vw,38px);right:clamp(20px,3vw,38px);
  font-size:11px;letter-spacing:.2em;color:var(--fg);border:1px solid var(--line);
  border-radius:100px;padding:8px 16px;background:rgba(8,9,10,.4);backdrop-filter:blur(6px)}
/* ---------- numeri ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.nums div{padding:38px 20px 40px;border-right:1px solid var(--line)}
.nums div:last-child{border-right:0}
.nums b{display:block;font-size:clamp(30px,3.4vw,54px);font-weight:500;letter-spacing:-.05em;line-height:1}
.nums small{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
/* ---------- brand ---------- */
.brands{padding-block:clamp(60px,9vh,110px);text-align:center;border-top:1px solid var(--line)}
.brow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(46px,9vw,130px);margin-top:40px}
.brow img{width:auto;opacity:.6;filter:grayscale(1) brightness(1.6);transition:.45s}
.brow img:hover{opacity:1;filter:grayscale(1) brightness(2);transform:translateY(-5px)}
/* i due lockup hanno proporzioni diverse: altezze diverse per equilibrio ottico */
.brow img.b-goyard{height:clamp(74px,7.4vw,112px)}
.brow img.b-pomellato{height:clamp(46px,4.6vw,70px)}
/* ---------- evento ---------- */
.evt{padding-block:clamp(80px,12vh,150px)}
.evt-g{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.6vw,80px);align-items:center}
.evt-img{overflow:hidden;height:min(70vh,620px)}
.evt-img img{width:100%;height:118%;object-fit:cover;will-change:transform}
.evt-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px solid var(--line);
  padding-top:22px;margin-top:30px}
.evt-meta small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.evt-meta p{font-size:15px;margin-top:7px}
/* ---------- cta ---------- */
.cta{padding-block:clamp(90px,15vh,180px);text-align:center;position:relative;overflow:hidden}
.cta .lead{margin:22px auto 0;text-align:center}
.mag{display:inline-flex;align-items:center;justify-content:center;width:clamp(150px,15vw,210px);
  height:clamp(150px,15vw,210px);border-radius:50%;background:var(--oro);color:#08090A;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-top:46px;
  transition:background .4s;will-change:transform}
.mag:hover{background:var(--fg)}
/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding-block:60px 26px}
.f-logo{height:clamp(96px,10vw,140px);width:auto}
.f-g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px}
footer .f-tit{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro);margin-bottom:16px;font-weight:500}
footer ul{list-style:none;font-size:14.5px;color:#8B8D92}
footer li+li{margin-top:9px}
footer a:hover{color:var(--fg)}
.f-b{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:52px;padding-top:22px;
  border-top:1px solid var(--line);font-size:11.5px;color:#7A7C81}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(38px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.clip.in{clip-path:inset(0 0 0 0)}
@media(max-width:1100px){
  header nav{display:none}
  .srv-grid{grid-template-columns:1fr}
  .srv-left{position:static}
  .evt-g{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr 1fr}
  .nums div:nth-child(2){border-right:0}
  .f-g{grid-template-columns:1fr 1fr}
  .hz-head{width:78vw}
  .hz-card{width:66vw;height:58vh}
}
@media(max-width:700px){
  header .hbtn{display:none}
  .f-g{grid-template-columns:1fr}
  .card{height:64vh}
  #hoverimg{display:none}
}

/* ============================================================
   PAGINE INTERNE
   ============================================================ */
/* hero interno */
.ih{position:relative;min-height:clamp(420px,62vh,660px);display:flex;align-items:flex-end;overflow:hidden}
.ih-bg{position:absolute;inset:0}
.ih-bg img{width:100%;height:112%;object-fit:cover;filter:brightness(.5) grayscale(.2);will-change:transform}
.ih-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,9,10,.86),transparent 38%,rgba(8,9,10,.96))}
.ih-in{position:relative;z-index:2;width:100%;
  padding:clamp(120px,15vh,170px) var(--pad) clamp(34px,6vh,68px)}
.ih h1{margin:20px 0 18px;max-width:16ch}
.crumb{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.crumb a:hover{color:var(--oro)}
.crumb i{font-style:normal;color:var(--oro);margin:0 8px}
/* blocchi testo */
.two{display:grid;grid-template-columns:.34fr .66fr;gap:clamp(24px,4vw,70px);align-items:start}
.two-b{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.4vw,72px);align-items:center}
.sec{padding-block:clamp(66px,10vh,130px)}
.sec-t{border-top:1px solid var(--line)}
.stack>*+*{margin-top:22px}
/* timeline */
.tl{border-top:1px solid var(--line);margin-top:44px}
.tl-row{display:grid;grid-template-columns:150px 1fr;gap:clamp(18px,3vw,50px);
  padding:32px 0;border-bottom:1px solid var(--line)}
.tl-row b{font-size:clamp(22px,2.4vw,34px);font-weight:500;letter-spacing:-.04em;color:var(--oro)}
.tl-row h3{font-size:clamp(19px,1.9vw,26px);font-weight:400;letter-spacing:-.03em;margin-bottom:10px}
/* valori */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:46px}
.vals div{background:var(--bg);padding:34px 26px 40px;transition:.4s}
.vals div:hover{background:var(--bg2)}
.vals span{font-size:10.5px;letter-spacing:.24em;color:var(--oro)}
.vals h3{font-size:22px;font-weight:400;letter-spacing:-.03em;margin:14px 0 10px}
.vals p{font-size:14px;color:#9EA0A5;line-height:1.7}
/* materiali card */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);margin-top:50px}
.mcard{position:relative;display:block;overflow:hidden;aspect-ratio:1/1.18;margin:0}
.mcard img{width:100%;height:100%;object-fit:cover;transition:1.2s var(--ease);filter:brightness(.86)}
.mcard:hover img{filter:brightness(1)}
.mcard::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(8,9,10,.92))}
.mcard .mi{position:absolute;z-index:2;left:26px;right:26px;bottom:24px}
.mcard .mi b{display:block;font-size:clamp(19px,1.8vw,26px);font-weight:500;
  letter-spacing:-.035em;text-transform:uppercase}
.mcard .mi small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.mcard .mi p{font-size:13.5px;color:#A7A9AE;margin-top:10px;line-height:1.65}
/* specifiche */
.specs{border-top:1px solid var(--line);margin-top:38px}
.specs div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.specs dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--oro);padding-top:4px}
.specs dd{font-size:15px;color:#C3C5CA}
/* filtri */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.filters button{background:none;border:1px solid var(--line);color:#9EA0A5;border-radius:100px;
  padding:10px 20px;font:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:.35s}
.filters button:hover{border-color:var(--oro);color:var(--fg)}
.filters button.on{background:var(--oro);border-color:var(--oro);color:#08090A}
/* griglia progetti */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.7vw,26px);margin-top:44px}
.pgrid article{transition:opacity .4s,transform .4s}
.pgrid article.hide{display:none}
.pcard{display:block;overflow:hidden;aspect-ratio:4/3.1;position:relative;margin:0}
.pcard img{width:100%;height:100%;object-fit:cover;transition:1.2s var(--ease);filter:brightness(.86)}
.pgrid article:hover .pcard img{filter:brightness(1)}
.pinfo{padding:16px 2px 0}
.pinfo small{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--oro)}
.pinfo b{display:block;font-size:19px;font-weight:400;letter-spacing:-.02em;margin-top:6px}
/* galleria */
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,20px);margin-top:44px}
.gal a,.gal figure{overflow:hidden;display:block;margin:0}
.gal img{width:100%;height:100%;object-fit:cover;transition:1.1s var(--ease)}
.gal a:hover img{transform:scale(1.05)}
.gal figure img{transition:filter 1s var(--ease);filter:brightness(.92)}
.gal figure:hover img{filter:brightness(1)}
.g6{grid-column:span 6;aspect-ratio:4/3}
.g4{grid-column:span 4;aspect-ratio:1/1.2}
.g8{grid-column:span 8;aspect-ratio:16/9}
.g12{grid-column:span 12;aspect-ratio:21/9}
/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.f-full{grid-column:span 2}
.field label{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mut);margin-bottom:9px}
.field input,.field textarea,.field select{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--line);color:var(--fg);font:inherit;font-size:15.5px;
  padding:12px 0;transition:.35s;border-radius:0}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--oro)}
.field textarea{min-height:130px;resize:vertical}
.field select option{background:var(--bg2)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;color:#8B8D92;margin-top:6px}
.consent input{width:16px;height:16px;accent-color:var(--oro);margin-top:3px;flex:none}
.consent a{color:var(--oro);text-decoration:underline}
.submit{background:var(--oro);color:#08090A;border:0;font:inherit;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;padding:19px 40px;cursor:pointer;transition:.35s;justify-self:start}
.submit:hover{background:var(--fg)}
/* contatti info */
.cinfo{border-top:1px solid var(--line)}
.cinfo div{padding:22px 0;border-bottom:1px solid var(--line)}
.cinfo small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.cinfo p{font-size:16.5px;margin-top:8px}
.cinfo a:hover{color:var(--oro)}
.map{display:block;border:0;aspect-ratio:16/10;width:100%;
  filter:grayscale(.55) contrast(1.05) brightness(.82)}
/* prossimo progetto */
.next{position:relative;overflow:hidden;display:block;min-height:clamp(280px,42vh,440px);
  display:flex;align-items:center;justify-content:center;text-align:center}
.next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.4);transition:1.4s var(--ease)}
.next:hover img{transform:scale(1.06);filter:brightness(.55)}
.next .ni{position:relative;z-index:2}
@media(max-width:1100px){
  .two,.two-b,.sv{grid-template-columns:1fr}
  .sv:nth-child(even) .sv-img{order:0}
  .vals{grid-template-columns:1fr 1fr}
  .mgrid,.pgrid{grid-template-columns:1fr 1fr}
  .tl-row{grid-template-columns:100px 1fr}
  .g6,.g4,.g8{grid-column:span 12;aspect-ratio:4/3}
}
@media(max-width:700px){
  .vals,.mgrid,.pgrid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .f-full{grid-column:span 1}
  .specs div{grid-template-columns:1fr;gap:6px}
}

/* input file */
.field input[type=file]{font-size:13px;color:#9EA0A5;padding:14px 0}
.field input[type=file]::file-selector-button{background:transparent;border:1px solid var(--line);
  color:var(--fg);font:inherit;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:11px 20px;margin-right:16px;border-radius:100px;cursor:pointer;transition:.35s}
.field input[type=file]::file-selector-button:hover{border-color:var(--oro);color:var(--oro)}

/* ============================================================
   SERVIZI — stage fisso + lista che scorre
   ============================================================ */
.srv-stage{position:relative}
.ss-wrap{display:grid;grid-template-columns:.44fr .56fr;gap:clamp(30px,5vw,90px);align-items:start}
/* colonna immagine */
.ss-media{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding-block:clamp(70px,10vh,110px)}
.ss-imgs{position:relative;width:100%;height:min(72vh,700px);overflow:hidden}
.ss-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  clip-path:inset(0 0 100% 0);transform:scale(1.08);
  transition:clip-path 1s var(--ease),transform 1.4s var(--ease),opacity .6s;opacity:0}
.ss-imgs img.on{clip-path:inset(0 0 0 0);transform:scale(1);opacity:1}
.ss-foot{display:flex;align-items:center;gap:20px;margin-top:22px}
.ss-count{font-size:12px;letter-spacing:.2em;color:var(--mut);white-space:nowrap}
.ss-count b{color:var(--oro);font-weight:500;font-size:15px}
.ss-bar{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.ss-bar i{position:absolute;inset:0 auto 0 0;width:11%;background:var(--oro);
  transition:width .6s var(--ease)}
.ss-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);
  white-space:nowrap;overflow:hidden}
/* colonna testi */
.ss-list{padding-block:clamp(70px,10vh,120px)}
.ss-item{position:relative;min-height:78svh;display:flex;flex-direction:column;
  justify-content:center;padding-block:40px;transition:opacity .6s}
.ss-item::before{content:attr(data-n);position:absolute;top:2%;right:0;z-index:0;
  font-size:clamp(80px,10vw,170px);font-weight:600;letter-spacing:-.07em;line-height:.78;
  color:var(--oro);opacity:.11;pointer-events:none}
.ss-item>*{position:relative;z-index:1}
.ss-item .n{font-size:11px;letter-spacing:.24em;color:var(--oro);font-weight:500}
.ss-item h3{font-size:clamp(24px,3vw,44px);font-weight:500;letter-spacing:-.045em;
  text-transform:uppercase;line-height:.94;margin:16px 0 20px}
.ss-item p{font-size:clamp(15px,1.15vw,18px);color:#A7A9AE;line-height:1.75;max-width:46ch}
.ss-item ul{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.ss-item li{font-size:14px;color:#9EA0A5;padding:13px 0 13px 26px;position:relative;
  border-bottom:1px solid var(--line)}
.ss-item li::before{content:"";position:absolute;left:0;top:21px;width:12px;height:1px;background:var(--oro)}
/* .32 rendeva il testo delle fasi non attive praticamente illeggibile (contrasto 1,7:1).
   A .8 la fase attiva si distingue ancora, ma le altre restano leggibili. */
.ss-item.off{opacity:.8}
/* indice rapido */
.ss-idx{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.ss-idx a{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:100px;padding:9px 17px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#9EA0A5;transition:.35s}
.ss-idx a b{color:var(--oro);font-weight:500}
.ss-idx a:hover{border-color:var(--oro);color:var(--fg);transform:translateY(-2px)}
@media(max-width:1100px){
  .ss-wrap{grid-template-columns:1fr;gap:0}
  /* l'immagine resta agganciata in alto e cambia mentre scorrono le fasi sotto */
  .ss-media{position:sticky;top:0;height:auto;padding:64px 0 16px;
    background:var(--bg);box-shadow:0 18px 22px -8px var(--bg);z-index:5}
  .ss-imgs{height:min(42svh,340px)}
  .ss-foot{margin-top:14px}
  .ss-label{font-size:10px}
  .ss-list{padding-block:0 40px}
  .ss-item{min-height:62svh;padding-block:30px}
  .ss-item::before{font-size:clamp(90px,26vw,150px);top:-6px;right:0}
}

/* etichetta evento concluso */
.past{display:inline-block;border:1px solid var(--line);border-radius:100px;padding:5px 13px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--oro);
  margin-right:12px;vertical-align:2px}

/* ============================================================
   MENU MOBILE
   ============================================================ */
.burger{display:none;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;
  position:relative;z-index:130}
.burger span{position:absolute;left:9px;width:26px;height:1.5px;background:var(--fg);
  transition:transform .45s var(--ease),opacity .3s}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:26px}
body.menu-on .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-on .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:125;background:var(--bg);display:flex;flex-direction:column;
  justify-content:center;padding:96px var(--pad) 34px;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);
  visibility:hidden;overflow-y:auto}
body.menu-on .mnav{clip-path:inset(0 0 0 0);visibility:visible}
.mnav ul{list-style:none}
.mnav li{overflow:hidden}
.mnav li+li{margin-top:2px}
.mnav a{display:block;font-size:clamp(30px,8.6vw,46px);font-weight:500;letter-spacing:-.04em;
  text-transform:uppercase;line-height:1.18;padding:5px 0;
  transform:translateY(105%);transition:transform .7s var(--ease),color .3s}
body.menu-on .mnav a{transform:none}
.mnav li:nth-child(1) a{transition-delay:.10s}
.mnav li:nth-child(2) a{transition-delay:.16s}
.mnav li:nth-child(3) a{transition-delay:.22s}
.mnav li:nth-child(4) a{transition-delay:.28s}
.mnav li:nth-child(5) a{transition-delay:.34s}
.mnav li:nth-child(6) a{transition-delay:.40s}
.mnav li:nth-child(7) a{transition-delay:.46s}
.mnav a:active{color:var(--oro)}
.mnav-foot{margin-top:auto;padding-top:38px;border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  opacity:0;transition:opacity .5s ease .55s}
body.menu-on .mnav-foot{opacity:1}
.mnav-foot small{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--oro);margin-bottom:10px}
.mnav-foot a{display:block;font-size:15.5px;color:#A7A9AE;padding:2px 0;
  text-transform:none;font-weight:300;letter-spacing:0;transform:none}
/* il pulsante nel piede del pannello mantiene lo stile degli altri pulsanti */
.mnav-foot .hbtn{display:inline-block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fg);padding:12px 22px;font-weight:400;flex:none}
@media(max-width:1100px){
  .burger{display:block}
  header{padding:16px var(--pad)}
  header.solid{padding:12px var(--pad)}
  .hr{gap:14px}
}
@media(min-width:1101px){
  .mnav{display:none}
}

/* miniatura nell'elenco servizi: sostituisce l'anteprima al cursore dove il cursore non c'è */
.srv-thumb{display:none}
@media(max-width:1100px){
  .srv-list a{grid-template-columns:44px 1fr 58px;gap:14px;align-items:center}
  .srv-list .pl{display:none}
  .srv-thumb{display:block;width:58px;height:72px;object-fit:cover;justify-self:end;
    filter:brightness(.9);transition:filter .4s}
  .srv-list a:active .srv-thumb{filter:brightness(1.1)}
  .srv-list a:active h3{color:var(--oro2)}
}
/* riscontro al tocco dove il cursore custom e il magnetico non arrivano */
@media(hover:none){
  .mag{transition:transform .25s var(--ease),background .3s}
  .mag:active{transform:scale(.94);background:var(--fg)}
  .hbtn:active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
  .hz-card:active img{filter:brightness(1.05)}
  .hz-card .meta p{opacity:1;max-height:60px}
}

/* sezione maison — desktop: due colonne con la foto, loghi allineati al testo */
.maison .brow{justify-content:flex-start;margin-top:34px}
/* sotto i 1100px: niente foto, testo a sinistra e loghi centrati */
@media(max-width:1100px){
  .maison-foto{display:none}
  .maison .brow{justify-content:center;margin-top:clamp(40px,6vh,70px)}
}

/* mappa contatti */
.mapbox{margin-top:26px;border:1px solid var(--line);overflow:hidden}
.map-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-top:1px solid var(--line);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.map-foot a{color:var(--oro);transition:.3s}
.map-foot a:hover{color:var(--fg)}
@media(max-width:700px){
  .map{aspect-ratio:1/1}
  .map-foot{font-size:10.5px;padding:13px 14px}
}

/* ============================================================
   ELEMENTI INTRODOTTI DAL TEMA WORDPRESS
   ============================================================ */
/* salto al contenuto: si vede solo arrivandoci da tastiera */
.salta{position:absolute;left:-9999px;top:0;z-index:200;background:var(--oro);color:#08090A;
  padding:14px 22px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.salta:focus{left:12px;top:12px}
/* esito dell'invio del modulo */
.esito{margin-top:26px;padding:16px 20px;border:1px solid var(--line);font-size:14.5px;line-height:1.6}
.esito.ok{border-color:var(--oro);color:var(--fg);background:rgba(199,142,63,.09)}
.esito.ko{border-color:#8a4a4a;color:#E7C9C9;background:rgba(138,74,74,.12)}
/* nota sotto il campo allegati */
.aiuto{display:block;margin-top:10px;font-size:12px;color:var(--mut);letter-spacing:0;text-transform:none}
/* campo esca: fuori dallo schermo, invisibile anche ai lettori di schermo */
.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* pagine di servizio scritte nell'editor di WordPress */
.testo-editor{font-size:16.5px;line-height:1.85;color:#A7A9AE;max-width:70ch}
.testo-editor h2{font-size:clamp(24px,2.6vw,38px);font-weight:500;letter-spacing:-.035em;
  color:var(--fg);margin:44px 0 16px;text-transform:none}
.testo-editor h3{font-size:clamp(19px,1.9vw,24px);font-weight:500;color:var(--fg);margin:32px 0 12px}
.testo-editor p+p{margin-top:18px}
.testo-editor a{color:var(--oro);text-decoration:underline;text-underline-offset:3px}
.testo-editor ul,.testo-editor ol{margin:18px 0 18px 22px}
.testo-editor li+li{margin-top:8px}
.testo-editor strong{color:var(--fg);font-weight:500}
/* impaginazione degli archivi */
.nav-links{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;letter-spacing:.16em}
.nav-links .page-numbers{border:1px solid var(--line);padding:10px 16px;border-radius:100px;transition:.3s}
.nav-links .page-numbers.current,.nav-links .page-numbers:hover{border-color:var(--oro);color:var(--oro)}

/* ============================================================
   VIDEO DELL'ESPOSIZIONE
   ============================================================ */
.video-blocco{display:grid;grid-template-columns:1fr auto;gap:clamp(30px,5vw,90px);align-items:center}
.video-cornice{position:relative;margin:0;overflow:hidden;border:1px solid var(--line);
  background:#000;aspect-ratio:464/832;height:min(76vh,680px);width:auto;justify-self:end}
.video-cornice video{width:100%;height:100%;object-fit:cover;display:block}
/* la copertina resta finché non si preme play: evita il fotogramma nero del caricamento */
.video-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .6s var(--ease)}
.video-cornice.va .video-cover{opacity:0;pointer-events:none}
.video-cornice::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(transparent 55%,rgba(8,9,10,.55));transition:opacity .5s}
.video-cornice.va::after{opacity:0}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(74px,7vw,104px);height:clamp(74px,7vw,104px);border-radius:50%;border:0;
  background:var(--oro);color:#08090A;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:transform .35s var(--ease),background .3s,opacity .4s}
.video-play::before{content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #08090A;margin-left:5px}
.video-play:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--fg)}
.video-cornice.va .video-play{opacity:0;pointer-events:none}
.video-didascalia{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);
  transition:opacity .4s;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.video-cornice.va .video-didascalia{opacity:0}
.video-credito{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px;color:var(--mut);line-height:1.7}
.video-credito b{color:var(--fg);font-weight:500}
@media(max-width:1100px){
  .video-blocco{grid-template-columns:1fr;gap:34px}
  .video-cornice{justify-self:center;height:auto;width:100%;max-width:380px;margin-inline:auto}
}