/* ============================================================
   DESIGN SYSTEM — Ing. Edoardo Pontiroli (shared)
   Geometric · Precise · Secure · Orange & White
   ============================================================ */
:root{
  --bg:#FCFBF9;--white:#FFFFFF;--orange:#E8531E;--amber:#B23A12;--apricot:#F6C9A8;
  --ink:#4F5050;--dark:#1E1F1F;--mist:#E7E4DF;--grid:rgba(79,80,80,.10);
  --font-display:"Sora",sans-serif;--font-body:"Inter",sans-serif;--font-mono:"Space Mono",monospace;
  --maxw:1280px;--ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.6;font-size:18px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
section{position:relative}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--orange)}
.sec-num{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--ink);opacity:.45}
h1,h2,h3{font-family:var(--font-display);color:var(--dark);line-height:1.06;letter-spacing:-.01em;font-weight:500}
h2{font-size:clamp(34px,5vw,54px)}
h3{font-size:clamp(20px,2.4vw,26px);font-weight:600}
p{max-width:62ch}

/* ============================================================ NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:18px 32px;transition:background .4s var(--ease),border-color .4s var(--ease);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(252,251,249,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--mist)}
.nav .brand{display:flex;align-items:center;gap:12px}
.nav .brand svg{width:34px;height:34px}
.nav .brand .bname{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--white)}
.nav.scrolled .brand .bname{color:var(--dark)}
.nav.scrolled .brand svg path,.nav.scrolled .brand svg rect{fill:var(--ink)}
.nav .brand svg path,.nav .brand svg rect{fill:var(--white);transition:fill .4s var(--ease)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--white);transition:color .3s;position:relative}
.nav.scrolled .nav-links a{color:var(--ink)}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--orange);transition:width .3s var(--ease)}
.nav-links a:not(.nav-cta):hover::after,.nav-links a.active:not(.nav-cta)::after{width:100%}
.nav-links a.active:not(.nav-cta){color:var(--orange)}
.nav-cta{border:1px solid currentColor;padding:10px 18px}
.nav-cta:hover{background:var(--orange);color:var(--white)!important;border-color:var(--orange)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:44px;min-height:44px;padding:0;-webkit-tap-highlight-color:transparent}
.nav-toggle span{width:24px;height:2px;background:var(--white)}
.nav.scrolled .nav-toggle span{background:var(--dark)}

/* ============================================================ BUTTONS */
.btn{font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:16px 28px;border:1px solid var(--orange);position:relative;overflow:hidden;cursor:pointer;display:inline-flex;align-items:center;gap:12px;transition:color .35s var(--ease);background:none;color:var(--ink)}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--orange);transform:translateY(100%);transition:transform .4s var(--ease);z-index:0}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--white)}
.btn-primary{background:var(--orange);color:var(--white)}
.btn-primary::before{background:var(--amber)}
.btn-ghost{color:var(--white)}
.btn-ghost:hover{color:var(--white)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}

/* text link */
.tlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);border-bottom:1px solid var(--orange);padding-bottom:3px;transition:gap .3s var(--ease)}
.tlink:hover{gap:14px}

/* ============================================================ HERO (home) */
.hero{min-height:max(100vh,640px);position:relative;display:flex;align-items:flex-end;overflow:hidden;background:var(--dark);padding-top:90px;box-sizing:border-box}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-fallback{position:absolute;inset:0;background:radial-gradient(120% 90% at 75% 20%, rgba(232,83,30,.40), transparent 55%),radial-gradient(90% 80% at 10% 90%, rgba(178,58,18,.35), transparent 60%),linear-gradient(160deg,#161717,#1E1F1F 60%,#101010)}
.hero-fallback::before{content:"";position:absolute;inset:-2px;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px;opacity:.5;animation:gridDrift 22s linear infinite}
@keyframes gridDrift{to{background-position:64px 64px}}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(30,31,31,.55) 0%,rgba(30,31,31,.15) 35%,rgba(30,31,31,.75) 100%)}
.hero-content{position:relative;z-index:2;width:100%;padding-bottom:8vh}
.hero h1{color:var(--white);font-size:clamp(44px,7.5vw,104px);font-weight:500;max-width:16ch;margin:18px 0 22px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .sub{color:rgba(255,255,255,.82);font-size:clamp(17px,1.7vw,21px);max-width:46ch;margin-bottom:34px}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:#fff}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.scroll-hint{position:absolute;right:32px;bottom:34px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint span{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.7);writing-mode:vertical-rl}
.scroll-hint .ln{width:1px;height:46px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.scroll-hint .ln::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--orange);animation:scrollLine 2s var(--ease) infinite}
@keyframes scrollLine{to{top:100%}}

/* ============================================================ PAGE HERO (interior) */
.page-hero{background:var(--dark);color:#fff;position:relative;overflow:hidden;padding:158px 0 92px}
.page-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:60px 60px}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 88% 0%,rgba(232,83,30,.35),transparent 55%)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .eyebrow{color:#fff}.page-hero .eyebrow::before{background:#fff}
.page-hero h1{color:#fff;font-size:clamp(38px,6vw,74px);max-width:17ch;margin:16px 0 18px}
.page-hero h1 em{font-style:normal;color:var(--orange)}
.page-hero .lead{color:rgba(255,255,255,.8);max-width:54ch;font-size:clamp(17px,1.6vw,21px)}
.crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:22px;display:flex;gap:10px;align-items:center}
.crumb a{color:rgba(255,255,255,.55)}.crumb a:hover{color:#fff}
.crumb .sep{color:var(--orange)}
.page-hero .hero-actions{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap}

/* ============================================================ REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================ GENERIC SECTIONS */
.section{padding:130px 0}
.section.line{border-top:1px solid var(--mist)}
.section.dark{background:var(--dark);color:var(--white)}
.section.dark h2{color:#fff}.section.dark .eyebrow{color:var(--orange)}.section.dark .sec-num{color:rgba(255,255,255,.5)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:54px;flex-wrap:wrap}
.sec-head h2{max-width:18ch}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}

/* generic card grids */
.gcards{display:grid;gap:1px;background:var(--mist);border:1px solid var(--mist)}
.gcards.c2{grid-template-columns:repeat(2,1fr)}
.gcards.c3{grid-template-columns:repeat(3,1fr)}
.gcards.c4{grid-template-columns:repeat(4,1fr)}
.gcard{background:var(--bg);padding:38px 32px;transition:background .4s var(--ease)}
.gcard:hover{background:var(--white)}
.gcard .n{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--orange)}
.gcard .ic{width:38px;height:38px;stroke:var(--orange);stroke-width:1.5;fill:none;margin-bottom:22px}
.gcard h3{font-size:20px;margin:14px 0 10px}
.gcard p{font-size:15px;color:var(--ink);max-width:38ch}
.section.dark .gcards{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
.section.dark .gcard{background:var(--dark)}
.section.dark .gcard:hover{background:#262727}
.section.dark .gcard h3{color:#fff}
.section.dark .gcard p{color:rgba(255,255,255,.62)}

/* ============================================================ SIGNATURE (home) */
.signature{padding:40px 0 140px}
.sig-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:38px;flex-wrap:wrap}
.sig-head .txt{max-width:42ch}
.xray{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--ink);background:var(--white);overflow:hidden;cursor:crosshair}
.xray svg{position:absolute;inset:0;width:100%;height:100%}
.xray .layer-tech{-webkit-mask-image:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,50%),#000 0,#000 96%,transparent 100%);mask-image:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,50%),#000 0,#000 96%,transparent 100%)}
.xray-bg{position:absolute;inset:0;background:var(--dark);-webkit-mask-image:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,50%),#000 0,#000 96%,transparent 100%);mask-image:radial-gradient(circle var(--r,0px) at var(--x,50%) var(--y,50%),#000 0,#000 96%,transparent 100%)}
.xray-hint{position:absolute;left:24px;bottom:20px;z-index:5;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:10px;background:rgba(252,251,249,.8);padding:8px 12px;pointer-events:none;transition:opacity .4s}
.xray-hint .dot{width:8px;height:8px;background:var(--orange);border-radius:50%;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.4}}
.xray.active .xray-hint{opacity:0}
.crosshair-tag{position:absolute;top:16px;right:16px;z-index:5;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);pointer-events:none}

/* ============================================================ SERVIZI / PATHS */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--mist);border:1px solid var(--mist)}
.path{background:var(--bg);padding:48px;transition:background .4s var(--ease);position:relative;display:flex;flex-direction:column}
.path:hover{background:var(--white)}
.path .tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:18px}
.path h3{margin-bottom:16px}
.path ul{list-style:none;margin-top:24px}
.path li{padding:14px 0;border-top:1px solid var(--mist);display:flex;gap:14px;font-size:16px;color:var(--ink)}
.path li::before{content:"→";color:var(--orange);font-family:var(--font-mono)}
.path .goto{position:absolute;top:48px;right:48px;width:22px;height:22px;opacity:.35;transition:opacity .4s var(--ease),transform .4s var(--ease);stroke:var(--orange);fill:none;stroke-width:2}
.path:hover .goto{opacity:1;transform:translate(3px,-3px)}
.path .more{margin-top:28px}

/* ============================================================ PORTFOLIO */
.pf-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:50px}
.pf-colhead{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);padding-bottom:16px;border-bottom:1px solid var(--ink);margin-bottom:26px}
.pf-colhead .c{color:var(--ink);opacity:.5}
.pf-stack{display:flex;flex-direction:column;gap:26px}
.pf-card{border:1px solid var(--mist);background:var(--white);overflow:hidden;transition:border-color .4s var(--ease)}
.pf-card:hover{border-color:var(--ink)}
.pf-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--dark)}
.pf-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03) brightness(.95);transition:filter .6s var(--ease),transform .8s var(--ease)}
.pf-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(232,83,30,.18),rgba(30,31,31,.42));mix-blend-mode:multiply;opacity:1;transition:opacity .6s}
.pf-card:hover .pf-img img{filter:none;transform:scale(1.05)}
.pf-card:hover .pf-img::after{opacity:.12}
.pf-img.blueprint{display:flex;align-items:center;justify-content:center}
.pf-img.blueprint::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:34px 34px}
.pf-img.blueprint::after{background:radial-gradient(80% 80% at 70% 20%,rgba(232,83,30,.30),transparent 60%);mix-blend-mode:normal}
.pf-img.blueprint .bp{position:relative;z-index:1;font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--apricot);text-transform:uppercase;display:flex;align-items:center;gap:10px}
.pf-img.blueprint .bp .d{width:7px;height:7px;background:var(--orange);border-radius:50%;animation:pulse 1.6s infinite}
.pf-status{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(30,31,31,.55);border:1px solid rgba(255,255,255,.35);padding:5px 9px}
.pf-body{padding:24px}
.pf-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.pf-body h3{font-size:20px;margin:12px 0 6px}
.pf-loc{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ink);opacity:.65;margin-bottom:14px}
.pf-desc{font-size:15px;color:var(--ink)}

/* ============================================================ CAPS (home competenze) */
.caps{padding:140px 0;background:var(--dark);color:var(--white)}
.caps h2{color:var(--white)}
.caps .eyebrow{color:var(--orange)}
.caps .sec-num{color:rgba(255,255,255,.5)}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);margin-top:50px}
.cap{background:var(--dark);padding:40px;min-height:240px;display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;align-content:start;transition:background .4s var(--ease)}
.cap:hover{background:#262727}
.cap .ic{width:40px;height:40px;stroke:var(--orange);stroke-width:1.5;fill:none;margin-bottom:28px}
.cap h3{color:var(--white);margin:0 0 12px}
.cap p{color:rgba(255,255,255,.6);font-size:15px;max-width:34ch;margin:0}

/* ============================================================ METODO */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--mist);border:1px solid var(--mist);margin-top:50px}
.step{background:var(--bg);padding:40px 32px;transition:background .4s var(--ease)}
.step:hover{background:var(--white)}
.step .n{font-family:var(--font-mono);font-size:13px;color:var(--orange);letter-spacing:.1em}
.step h3{font-size:21px;margin:22px 0 10px}
.step p{font-size:15px;color:var(--ink)}
.step p em{font-style:italic;color:var(--orange);font-weight:500}

/* ============================================================ CREDIBILITY / CHIPS */
.cred{padding:140px 0;border-top:1px solid var(--mist)}
.cred-cols{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.chip{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--mist);padding:12px 16px;color:var(--ink);transition:border-color .3s,color .3s}
.chip:hover{border-color:var(--orange);color:var(--orange)}
.lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:700;margin-bottom:8px}
.cred-center{max-width:660px;margin:0 auto;text-align:center}
.cred-center .eyebrow{justify-content:center}
.cred-center p{margin:22px auto 0;max-width:58ch}
.cred-boxes{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--mist);border:1px solid var(--mist);margin-top:56px}
.cred-box{background:var(--bg);padding:44px 40px;text-align:center;transition:background .4s var(--ease)}
.cred-box:hover{background:var(--white)}
.cred-box .chips{justify-content:center;margin-top:22px}

/* ============================================================ CTA BAND */
.cta{background:var(--dark);color:#fff;padding:110px 0;position:relative;overflow:hidden;text-align:center}
.cta::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:60px 60px}
.cta::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 50% 0%,rgba(232,83,30,.28),transparent 60%)}
.cta .wrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.cta h2{color:#fff;max-width:18ch}
.cta p{color:rgba(255,255,255,.72);margin:20px 0 34px;max-width:50ch}

/* ============================================================ CONTACT / FORM */
.contact{padding:140px 0;background:var(--dark);color:var(--white);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:60px 60px}
.contact .wrap{position:relative;z-index:1}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start;margin-top:40px}
.contact h2{color:var(--white);max-width:14ch}
.contact .sub{color:rgba(255,255,255,.7);margin-top:20px;max-width:40ch}
.contact .direct{margin-top:36px;display:flex;flex-direction:column;gap:14px}
.contact .direct a{font-family:var(--font-mono);font-size:14px;letter-spacing:.06em;color:var(--white);display:inline-flex;gap:12px;align-items:center}
.contact .direct a:hover{color:var(--orange)}
form{display:grid;gap:26px}
.field{position:relative}
.field label,.field .label-gruppo{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);display:block;margin-bottom:10px}
.field input,.field textarea,.field select{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.3);color:var(--white);font-family:var(--font-body);font-size:16px;padding:10px 0;transition:border-color .3s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--orange)}
.field select option{color:var(--dark)}
.field textarea{resize:vertical;min-height:90px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.seg{display:flex;gap:0;border:1px solid rgba(255,255,255,.3)}
.seg input{display:none}
.seg label{flex:1;text-align:center;padding:14px;margin:0;cursor:pointer;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.7);transition:all .3s;border-right:1px solid rgba(255,255,255,.3)}
.seg label:last-child{border-right:none}
.seg input:checked + label{background:var(--orange);color:var(--white)}
.form-submit{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:6px}
.wa-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.5);max-width:34ch}

/* ============================================================ FOOTER */
footer{background:var(--bg);padding:80px 0 40px;border-top:1px solid var(--mist)}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:40px}
.foot-brand svg{width:46px;height:46px;margin-bottom:18px}
.foot-brand svg path,.foot-brand svg rect{fill:var(--ink)}
.foot-brand .desc{font-size:14px;color:var(--ink);max-width:34ch}
.foot-col h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
.foot-col a,.foot-col p{display:block;font-size:14px;color:var(--ink);margin-bottom:12px;transition:color .3s}
.foot-col a:hover{color:var(--orange)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:60px;padding-top:28px;border-top:1px solid var(--mist)}
.foot-bottom .legal{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--ink);opacity:.7}
.foot-bottom .legal a{color:var(--ink);border-bottom:1px solid var(--mist)}
.foot-bottom .legal a:hover{color:var(--orange)}
.foot-social{display:flex;gap:18px}
.foot-social a{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.foot-social a:hover{color:var(--orange)}

/* ============================================================ COOKIE */
.cookie{position:fixed;left:24px;right:24px;bottom:24px;z-index:80;background:var(--dark);color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 26px;border:1px solid var(--orange);transform:translateY(140%);transition:transform .6s var(--ease);flex-wrap:wrap}
.cookie.show{transform:none}
/* Finche' il banner e' a schermo lascia spazio sotto il contenuto della
   hero: altrimenti copre "Richiedi un preventivo", cioe' l'azione
   principale, proprio alla prima visita. */
/* Il banner non deve coprire la CTA della hero. Lo spostamento e' pero'
   limitato: su schermi bassi spingere il contenuto per l'intera altezza del
   banner lo farebbe finire sotto la barra di navigazione. */
body.cookie-attivo .hero-content{
  padding-bottom:calc(var(--cookie-h,0px) + 40px);
  transition:padding-bottom .3s var(--ease);
}

/* Su schermi stretti il banner si compatta, cosi' serve meno spazio. */
@media(max-width:560px){
  .cookie{left:12px;right:12px;bottom:12px;padding:16px 16px;gap:12px}
  .cookie p{font-size:12px;line-height:1.45}
  .cookie-actions{width:100%;gap:8px}
  .cookie button{flex:1;padding:11px 8px;font-size:11px;letter-spacing:.06em}
}
.cookie p{font-size:13px;color:rgba(255,255,255,.8);max-width:64ch}
.cookie p a{color:var(--orange);border-bottom:1px solid var(--orange)}
.cookie-actions{display:flex;gap:12px}
.cookie button{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;cursor:pointer;border:1px solid var(--orange);background:none;color:var(--white);transition:all .3s}
.cookie button.accept{background:var(--orange)}
.cookie button:hover{background:var(--amber);border-color:var(--amber)}

/* ============================================================ RESPONSIVE */
@media(max-width:960px){
  .nav-links{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;gap:26px;transform:translateX(100%);transition:transform .5s var(--ease)}
  .nav-links.open{transform:none}
  .nav-links a{color:var(--dark)!important;font-size:16px}
  .nav-toggle{display:flex}
  /* A menu aperto il fondo diventa avorio: logo, nome e hamburger devono
     scurirsi, altrimenti restano bianco su bianco e l'utente non ha
     nessun modo visibile di richiudere il menu. */
  /* L'overlay del menu e' figlio di .nav e viene dopo nel DOM: senza
     alzarli, logo e hamburger ci finiscono sotto e spariscono.
     Doppio selettore: :has() regge anche se il JS non ha ancora
     aggiunto la classe. */
  .nav:has(.nav-links.open) .brand,
  .nav:has(.nav-links.open) .nav-toggle,
  .nav.nav-open .brand,
  .nav.nav-open .nav-toggle{position:relative;z-index:2}

  /* Sul fondo avorio del menu servono in scuro, non in bianco. */
  .nav:has(.nav-links.open) .nav-toggle span,
  .nav.nav-open .nav-toggle span{background:var(--dark)}
  .nav:has(.nav-links.open) .bname,
  .nav.nav-open .bname{color:var(--dark)}
  .nav:has(.nav-links.open) .brand svg path,
  .nav:has(.nav-links.open) .brand svg rect,
  .nav.nav-open .brand svg path,
  .nav.nav-open .brand svg rect{fill:var(--dark)}

  /* L'hamburger diventa una X: dice che si puo' richiudere. */
  .nav:has(.nav-links.open) .nav-toggle span:nth-child(1),
  .nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav:has(.nav-links.open) .nav-toggle span:nth-child(2),
  .nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
  .nav:has(.nav-links.open) .nav-toggle span:nth-child(3),
  .nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-toggle span{transition:transform .3s var(--ease),opacity .2s,background .3s}
  .paths,.contact-grid,.cred-cols,.cred-boxes,.foot-top,.pf-cols,.lead-grid{grid-template-columns:1fr}
  .cap-grid,.gcards.c3,.gcards.c4{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .sig-head,.sec-head{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .nav{padding:14px 20px}
  .section,.caps,.cred,.contact,.signature{padding-top:88px;padding-bottom:88px}
  .page-hero{padding:130px 0 70px}
  .cap-grid,.steps,.gcards.c2,.gcards.c3,.gcards.c4{grid-template-columns:1fr}
  .path{padding:34px}
  .two{grid-template-columns:1fr}
  .scroll-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* --- Legenda sotto l'X-ray (home) --- */
.xray-legend{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.xray-legend span{display:inline-flex;align-items:center;gap:10px}
.xray-legend i{width:14px;height:3px;flex:none}

/* --- Scheda portfolio larga: immagine e testo affiancati (privati) --- */
.pf-wide{display:grid;grid-template-columns:1.05fr 1fr}
.pf-wide .pf-img{aspect-ratio:auto;height:100%;min-height:340px}
.pf-wide .pf-body{padding:34px}
@media(max-width:860px){
  .pf-wide{grid-template-columns:1fr}
  .pf-wide .pf-img{aspect-ratio:4/3;min-height:0}
  .pf-wide .pf-body{padding:24px}
}


/* ==========================================================================
   CONTRASTO — audit del 12/09/2026
   Misurato sui pixel realmente renderizzati, non dedotto dal DOM.

   --orange (#E8531E) non raggiunge 4.5:1 ne' sul fondo avorio (3.57:1)
   ne' sul fondo scuro (4.47:1). Basta per il testo grande (soglia 3:1),
   non per quello piccolo.

   Invece di correggere selettore per selettore, il token cambia valore
   dentro i contenitori scuri: ogni regola che lo usa si adatta da sola.
   ========================================================================== */

:root{
  --orange-testo:#9E320E;    /* piccolo su fondo chiaro  -> 5.2:1 */
  --orange-btn:#C4441A;      /* fondo bottoni, testo bianco -> 5.0:1 */
  --orange-su-scuro:#EC5F2C; /* piccolo su fondo scuro   -> 4.9:1 */
}

/* Dentro questi contenitori il fondo e' scuro: il token si ribalta. */
.hero, .page-hero, .pd-head,
.section.dark, .caps, .cap,
.cta, .contact, .cookie,
.pf-img, .xray-bg, .ba{--orange-testo:var(--orange-su-scuro)}
/* .gcard NON va in elenco: esiste sia su sezioni chiare sia su scure.
   Dentro .section.dark eredita gia' il token ribaltato dal genitore. */

/* Testo piccolo in arancione: usa sempre il token, mai --orange diretto. */
.eyebrow,
.tlink,
.crumb .sep,
.gcard .n,
.path .tag,
.path li::before,
.pf-colhead,
.pf-tag,
.step .n,
.step p em,
.lbl,
.foot-col h3,
.crosshair-tag,
.sec-num,
.cookie p a,
.nav.scrolled .nav-links a.active:not(.nav-cta){color:var(--orange-testo)}

.tlink{border-bottom-color:var(--orange-testo)}

/* Bottoni pieni: il bianco sull'arancione originale stava a 3.69:1.
   Sono le CTA principali: e' il punto dove il contrasto conta di piu'. */
.btn-primary,
.cookie button.accept,
.seg input:checked + label{background:var(--orange-btn)}
.btn-primary:hover,
.cookie button.accept:hover{background:var(--amber)}

/* Dove il fondo e' un gradiente arancione su scuro, nemmeno il tono chiaro
   basta: il design usa gia' l'eyebrow bianca con il trattino arancione su
   hero e page-hero, quindi si applica lo stesso trattamento. */
/* Piu' specifica di .section.dark .eyebrow{color:var(--orange)} definita sopra. */
.section.dark .eyebrow,
.caps .eyebrow{color:var(--orange-testo)}

.hero .eyebrow,
.page-hero .eyebrow,
.cta .eyebrow{color:#fff}
.hero .eyebrow::before,
.page-hero .eyebrow::before,
.cta .eyebrow::before{background:var(--orange)}

/* Voce di menu attiva sopra la hero: bianca, con la sottolineatura
   arancione a segnalare la pagina corrente. */
.nav:not(.scrolled) .nav-links a.active:not(.nav-cta){color:#fff}

/* Nel menu mobile a schermo intero il fondo e' chiaro. */
@media(max-width:960px){
  .nav-links a.active:not(.nav-cta){color:#9E320E!important}
}