/* costantini - foglio di stile */

*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0c0e11;--bg2:#13171c;--line:#242a32;--red:#e0362c;--txt:#eef1f4;--mut:#767f8b}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--txt);overflow-x:hidden;
 font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
a{color:inherit;text-decoration:none}
.w{width:min(1160px,100% - 40px);margin-inline:auto}
.lbl{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:2.4px;
 color:var(--mut);text-transform:uppercase}
/* ── topbar (hairline, non è una barra piena) ── */
.top{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid var(--line);
 background:rgba(12,14,17,.86);backdrop-filter:blur(10px)}
.top .w{display:flex;align-items:center;justify-content:space-between;height:56px}
.mark{font-weight:800;font-size:14px;letter-spacing:1.6px}
.mark i{color:var(--red);font-style:normal}
.tel{font-family:ui-monospace,Menlo,monospace;font-size:14px;letter-spacing:.6px;
 border:1px solid var(--line);padding:7px 14px;border-radius:3px;transition:border-color .2s,color .2s}
.tel:hover{border-color:var(--red);color:var(--red)}
/* ── hero: griglia asimmetrica, non centrata ── */
.hero{padding:150px 0 90px;position:relative}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(105deg,transparent 55%,rgba(224,54,44,.07) 100%)}
.hero .w{display:grid;grid-template-columns:1.45fr .85fr;gap:64px;align-items:end;position:relative}
h1{font-size:clamp(40px,7.2vw,86px);line-height:.98;font-weight:800;letter-spacing:-3px}
h1 i{font-style:normal;color:var(--red)}
.lede{margin-top:26px;font-size:clamp(16px,2vw,19px);color:#aeb7c2;max-width:44ch}
.acts{display:flex;gap:11px;margin-top:34px;flex-wrap:wrap}
.go{background:var(--red);color:#fff;font-weight:700;padding:15px 28px;border-radius:3px;font-size:16px;
 transition:transform .18s}
.go:hover{transform:translateY(-2px)}
.go2{border:1px solid var(--line);padding:15px 28px;border-radius:3px;font-size:16px;font-weight:600}
/* spec sheet a destra */
.spec{border-top:2px solid var(--red);padding-top:18px}
.spec .lbl{display:block;margin-bottom:14px}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:0 16px;font-size:13.5px}
.spec dt{color:var(--mut);padding:9px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.spec dd{padding:9px 0;border-bottom:1px solid var(--line);text-align:right;font-weight:600}
/* ── timeline orizzontale ── */
.tl{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0;background:var(--bg2)}
.tl .w{position:relative}
.tl .rail{position:absolute;left:0;right:0;top:46px;height:1px;background:var(--line)}
.tl ol{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.tl li{padding-top:0}
.tl .yr{font-size:clamp(20px,2.6vw,30px);font-weight:800;letter-spacing:-1px;line-height:1;
 margin-bottom:14px}
.tl li:last-child .yr{color:var(--red)}
.tl .node{width:9px;height:9px;background:var(--red);border-radius:50%;margin-bottom:16px;
 box-shadow:0 0 0 5px var(--bg2)}
.tl p{font-size:13.5px;color:var(--mut);line-height:1.5;padding-right:12px}
/* ── servizi: righe, non riquadri ── */
.svc{padding:96px 0}
.h2{font-size:clamp(28px,4.6vw,46px);font-weight:800;letter-spacing:-1.4px;line-height:1.08;
 margin:14px 0 46px;max-width:20ch}
.row{display:grid;grid-template-columns:64px 1fr 1.15fr;gap:26px;align-items:baseline;
 padding:26px 0;border-top:1px solid var(--line);transition:padding-left .22s ease}
.row:last-child{border-bottom:1px solid var(--line)}
.row:hover{padding-left:12px}
.row .n{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--red);letter-spacing:1px}
.row h3{font-size:clamp(19px,2.4vw,25px);font-weight:750;letter-spacing:-.5px}
.row p{color:#98a1ad;font-size:15.5px}
.tbd{color:#6d7784;font-style:italic}
/* ── officina: due blocchi affiancati ── */
.shop{background:var(--bg2);border-top:1px solid var(--line);padding:96px 0}
.shop .w{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.shop p{color:#a3acb8;margin-bottom:16px;font-size:16.5px}
.gearlist{border-top:1px solid var(--line)}
.gearlist div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;
 border-bottom:1px solid var(--line);font-size:14.5px}
.gearlist span:first-child{color:var(--mut)}
.gearlist span:last-child{font-weight:700;font-family:ui-monospace,Menlo,monospace;font-size:13px;
 letter-spacing:.4px}
.ph{margin-top:26px;border:1px solid var(--line);border-radius:4px;min-height:200px;
 background:repeating-linear-gradient(45deg,#13171c 0 12px,#161b21 12px 24px);
 display:flex;align-items:center;justify-content:center;color:#5e6773;font-size:12px;
 letter-spacing:2px;font-family:ui-monospace,Menlo,monospace;text-align:center;padding:20px}
/* ── contatti: numero gigante ── */
.cta{padding:100px 0 84px}
.phone{display:block;font-size:clamp(38px,9vw,104px);font-weight:800;letter-spacing:-4px;
 line-height:.95;margin:20px 0 8px;transition:color .2s}
.phone:hover{color:var(--red)}
.meta{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;
 border-top:1px solid var(--line);padding-top:26px}
.meta .lbl{display:block;margin-bottom:8px}
.meta p,.meta a{font-size:15.5px;color:#c3cbd4;line-height:1.5}
.meta a{border-bottom:1px solid var(--red);padding-bottom:1px}
footer{border-top:1px solid var(--line);padding:22px 0;color:#5e6773;font-size:13px}
footer .w{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* reveal */
.js .rv{opacity:0;transform:translateY(16px)}
.rv.on{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease}
@media(max-width:900px){
 .hero .w,.shop .w{grid-template-columns:1fr;gap:40px}
 .hero{padding:112px 0 62px}
 .tl ol{grid-template-columns:1fr 1fr;gap:28px}
 .tl .rail{display:none}
 .row{grid-template-columns:1fr;gap:8px;padding:20px 0}
 .row .n{margin-bottom:2px}
 .meta{grid-template-columns:1fr;gap:24px}
 .go,.go2{flex:1;text-align:center}
 .svc,.shop{padding:64px 0}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}*{transition:none!important}}