/* Foglio di stile del sito */
@font-face{font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/manrope-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap; src:url('../fonts/manrope-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'DM Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/dm-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/dm-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'DM Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/dm-mono-latin-500-normal.woff2') format('woff2')}

/* Layout: soft, rounded and typographic. Menu on the left of the bar, brand on the right; in every two-column block
   the graphic or data sits left and the text right. One deep bordeaux panel opens the page with a three-circle
   figure (three disciplines, one partner); the nine areas live in a tabbed deck. Everything else stays quiet. */
:root{
  --bg:#f7f4f1; --surface:#ffffff; --ink:#1d1519; --ink-2:#5a4b51; --muted:#786a70;
  --line:#e7deda; --line-2:#cfc1c2;
  --accent:#7a1535; --accent-hover:#5f0f29; --accent-ink:#ffffff; --accent-soft:#f4e3e7; --accent-text:#7a1535;
  --panel:#4a0c20; --panel-2:#7a1535; --panel-ink:#fcf1f3; --panel-muted:#e6bfc9; --panel-line:rgba(255,255,255,.28); --panel-fill:rgba(255,255,255,.06); --pop:#ffa08c;
  --focus:rgba(122,21,53,.5);
  --display:'Manrope','Helvetica Neue',Arial,sans-serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'DM Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#130d10; --surface:#1e161a; --ink:#f4ecef; --ink-2:#cbbbc1; --muted:#9d8b92;
    --line:#2f2328; --line-2:#4b3941;
    --accent:#f29bb0; --accent-hover:#f7b6c6; --accent-ink:#3a0717; --accent-soft:#2c1820; --accent-text:#f29bb0;
    --panel:#3d0a1b; --panel-2:#6a1330; --panel-ink:#fcf1f3; --panel-muted:#e6bfc9; --panel-line:rgba(255,255,255,.28); --panel-fill:rgba(255,255,255,.06); --pop:#ffa08c;
    --focus:rgba(242,155,176,.6);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#130d10; --surface:#1e161a; --ink:#f4ecef; --ink-2:#cbbbc1; --muted:#9d8b92;
  --line:#2f2328; --line-2:#4b3941;
  --accent:#f29bb0; --accent-hover:#f7b6c6; --accent-ink:#3a0717; --accent-soft:#2c1820; --accent-text:#f29bb0;
  --panel:#3d0a1b; --panel-2:#6a1330; --panel-ink:#fcf1f3; --panel-muted:#e6bfc9; --panel-line:rgba(255,255,255,.28); --panel-fill:rgba(255,255,255,.06); --pop:#ffa08c;
  --focus:rgba(242,155,176,.6);
}
:root:not([data-lang="en"]) .en, :root[data-lang="en"] .it{display:none !important}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:88px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg)}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:6px}
h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.02em}
p{margin:0} ul,ol{margin:0; padding:0; list-style:none} dl,dd{margin:0}
.wrap{max-width:1200px; margin-inline:auto; padding-left:max(20px,env(safe-area-inset-left,0px)); padding-right:max(20px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text)}
.lead{font-size:18.5px; color:var(--ink-2); max-width:58ch}
.ph{border-bottom:1px dashed var(--line-2); color:var(--muted)}

/* bar: menu left, brand right */
.hdr{position:sticky; top:env(safe-area-inset-top,0px); z-index:9; background:var(--bg)}
.hdr .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; min-height:72px}
.nav{display:flex; gap:4px; font-size:15px; font-weight:500}
.nav a{text-decoration:none; color:var(--ink-2); padding:8px 14px; border-radius:999px; transition:background .15s, color .15s}
.nav a:hover{background:var(--accent-soft); color:var(--accent-text)}
.lang{display:flex; border:1px solid var(--line-2); border-radius:999px; padding:3px; margin-left:auto}
.lang button{font-family:var(--mono); font-size:12.5px; font-weight:500; border:0; background:transparent; color:var(--ink-2); padding:6px 12px; border-radius:999px; cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:800; font-size:18px; min-width:0}
.brand .ph{color:var(--ink); border-bottom-color:var(--line-2)}
.mark{width:30px; height:30px; flex:none; fill:none; stroke:var(--accent); stroke-width:2.2}
.menu-btn{display:none; width:44px; height:44px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--ink); cursor:pointer; place-items:center}
.menu-btn i{display:block; width:18px; height:12px; border-block:2px solid currentColor; position:relative}
.menu-btn i::after{content:""; position:absolute; inset:3px 0 auto; border-top:2px solid currentColor}
@media (max-width:900px){
  .menu-btn{display:grid}
  .lang{margin-left:0}
  .brand{margin-left:auto; font-size:16px}
  .hdr .nav{display:none; order:9; flex-basis:100%; padding-bottom:14px}
  .hdr.open .nav{display:grid}
  .nav a{font-family:var(--display); font-weight:700; font-size:22px; padding:12px 6px; border-radius:0; border-top:1px solid var(--line)}
}

.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:15.5px; text-decoration:none; padding:13px 24px; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-light{background:var(--panel-ink); color:var(--panel)}
.btn-ghost{border-color:var(--panel-line); color:var(--panel-ink)} .btn-ghost:hover{border-color:var(--panel-ink)}

/* opening panel: figure left, text right */
.hero{padding-block:8px 28px}
.hero-panel{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:40px; align-items:center; padding:52px 56px; border-radius:32px; color:var(--panel-ink); background:radial-gradient(110% 130% at 0% 0%,var(--panel-2),var(--panel) 62%)}
.hero .eyebrow{color:var(--panel-muted)}
.hero h1{font-size:clamp(32px,4.4vw,58px); line-height:1.03; font-weight:800; margin-block:18px 20px}
.hero .lead{color:var(--panel-muted)}
.hero .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.fig{width:100%; max-width:460px; height:auto; display:block; margin-inline:auto; overflow:visible}
.fig .ring{fill:var(--panel-fill); stroke:var(--panel-line); stroke-width:1.5; transition:fill .2s}
.fig a:hover .ring, .fig a:focus-visible .ring{fill:rgba(255,255,255,.16)}
.fig a{cursor:pointer; outline:none}
.fig text{font-family:var(--display); font-weight:700; font-size:19px; fill:var(--panel-ink); text-anchor:middle}
.fig .orbit{fill:none; stroke:var(--panel-line); stroke-width:1; stroke-dasharray:2 9; transform-origin:240px 232px; animation:spin 90s linear infinite}
.fig .core{fill:var(--pop)}
.fig .one{font-size:22px; fill:var(--panel); font-weight:800}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .hero-panel{grid-template-columns:minmax(0,1fr); gap:28px; padding:34px 24px 30px; border-radius:24px}
  .hero-text{order:-1}
  .fig{max-width:340px}
}

/* sections */
.sec{padding-block:84px}
.sec-h{display:grid; gap:12px; margin-bottom:36px; max-width:720px}
.h2{font-size:clamp(27px,3.5vw,42px); line-height:1.08; font-weight:800}
@media (max-width:700px){ .sec{padding-block:56px} }

/* areas deck: panels left, tabs right */
.deck{display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:24px; align-items:start}
.tablist{display:grid; gap:10px; position:sticky; top:96px}
.tab{display:grid; gap:2px; text-align:left; font:inherit; color:var(--ink); background:transparent; border:1px solid var(--line-2); border-radius:20px; padding:18px 22px; cursor:pointer; transition:background .15s, border-color .15s, color .15s}
.tab b{font-family:var(--display); font-size:22px; font-weight:700; letter-spacing:-.02em}
.tab small{font-family:var(--mono); font-size:12px; color:var(--muted)}
.tab:hover{border-color:var(--accent)}
.tab[aria-selected="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.tab[aria-selected="true"] small{color:inherit; opacity:.8}
.panel{display:none; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.panel.on{display:grid}
.card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:26px 24px; min-width:0}
.card h4{font-size:20px; font-weight:700; line-height:1.15; margin-bottom:12px}
.card p{font-size:15.5px; color:var(--ink-2)}
.card ul{margin-top:18px; display:grid; gap:9px}
.card li{position:relative; padding-left:18px; font-size:14.5px; font-weight:500}
.card li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--accent)}
@media (max-width:1100px){ .panel{grid-template-columns:minmax(0,1fr)} }
@media (max-width:820px){
  .deck{grid-template-columns:minmax(0,1fr)}
  .tablist{order:-1; position:static; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
  .tab{padding:12px 8px; border-radius:14px; text-align:center}
  .tab b{font-size:14.5px; overflow-wrap:anywhere} .tab small{display:none}
}

/* method */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px}
.steps li{border-top:2px solid var(--accent); padding-top:18px; min-width:0}
.steps .n{display:block; font-family:var(--display); font-weight:800; font-size:54px; line-height:1; color:var(--accent-soft); -webkit-text-stroke:1.5px var(--accent)}
.steps h3{font-size:22px; font-weight:700; margin-block:14px 8px}
.steps p{font-size:15.5px; color:var(--ink-2)}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .steps{grid-template-columns:minmax(0,1fr)} }

/* sectors */
.sectors{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 48px}
.sectors li{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:16px; align-items:baseline; padding:20px 12px; border-top:1px solid var(--line-2); border-radius:0; transition:background .15s; min-width:0}
.sectors li:hover{background:var(--accent-soft)}
.sectors b{font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-.02em; line-height:1.2}
.sectors li > span{font-size:15px; color:var(--ink-2)}
@media (max-width:860px){ .sectors{grid-template-columns:minmax(0,1fr)} }
@media (max-width:480px){ .sectors li{grid-template-columns:minmax(0,1fr); gap:4px; padding-inline:0} }

/* company: data left, text right */
.co{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:56px; align-items:center}
.co p + p{margin-top:14px}
.legal{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:8px 24px}
.legal div{display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; padding-block:14px; font-size:15px}
.legal div + div{border-top:1px solid var(--line)}
.legal dt{color:var(--muted)} .legal dd{overflow-wrap:anywhere}
@media (max-width:900px){ .co{grid-template-columns:minmax(0,1fr); gap:32px} .co-text{order:-1} }
@media (max-width:480px){ .legal div{grid-template-columns:minmax(0,1fr); gap:2px} }

/* contact panel: address left, text right */
.contact{padding-block:0 28px}
.contact-panel{display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:56px; align-items:center; padding:56px; border-radius:32px; color:var(--panel-ink); background:radial-gradient(110% 150% at 100% 100%,var(--panel-2),var(--panel) 62%)}
.contact .eyebrow{color:var(--panel-muted)}
.contact h2{font-size:clamp(30px,4.2vw,54px); line-height:1.03; font-weight:800; margin-block:14px 14px}
.contact .lead{color:var(--panel-muted)}
.reach{display:grid; gap:10px; min-width:0}
.mailbox{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:10px 10px 10px 22px; border:1px solid var(--panel-line); border-radius:999px}
.mailbox code{font-family:var(--mono); font-size:15.5px; user-select:all; overflow-wrap:anywhere}
.mailbox button{font-family:var(--sans); font-weight:600; font-size:14px; padding:9px 18px; border-radius:999px; border:0; background:var(--panel-ink); color:var(--panel); cursor:pointer}
.reach small{font-size:13.5px; color:var(--panel-muted); min-height:20px; padding-left:22px}
@media (max-width:900px){ .contact-panel{grid-template-columns:minmax(0,1fr); gap:28px; padding:36px 24px; border-radius:24px} .contact-text{order:-1} }

.ftr{font-size:14px; color:var(--muted)}
.ftr .wrap{display:flex; flex-wrap:wrap; gap:10px 32px; justify-content:space-between; padding-block:20px 40px}
.ftr nav{display:flex; flex-wrap:wrap; gap:6px 22px}
.ftr a{text-decoration:none} .ftr a:hover{color:var(--accent-text)}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .btn,.tab,.nav a{transition:none} .fig .orbit{animation:none} }

/* pagine secondarie */
.page{padding-block:56px 84px; max-width:820px}
.page h1{font-size:clamp(30px,4vw,48px); font-weight:800; line-height:1.05; margin-block:14px 22px}
.page h2{font-size:22px; font-weight:700; margin-block:34px 10px}
.page p{color:var(--ink-2); margin-top:10px}
.btn-solid{background:var(--accent); color:var(--accent-ink)}

/* logo image */
.brand .logo{display:block; height:44px; width:auto}
@media (max-width:760px){.brand .logo{height:38px}}
@media (prefers-color-scheme:dark){.brand .logo{background:#fff; border-radius:10px; padding:4px 8px}}