:root{
  --bg:#0F171B; --bg-2:#152126; --ink:#EFE8D8; --muted:#BEBCB1; --brass:#C3A468;
  --line:rgba(233,225,207,.16); --plate:#E8E0CF; --sheen:#F6E9C4;
  --serif:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans:"Albert Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F171B; --bg-2:#152126; --ink:#EFE8D8; --muted:#BEBCB1; --brass:#C3A468;
    --line:rgba(233,225,207,.16); color-scheme:dark; --sheen:#F6E9C4;
  }
}
:root[data-theme="dark"]{
  --bg:#0F171B; --bg-2:#152126; --ink:#EFE8D8; --muted:#BEBCB1; --brass:#C3A468;
  --line:rgba(233,225,207,.16); color-scheme:dark; --sheen:#F6E9C4;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:1px solid var(--brass);outline-offset:4px}

/* grana pellicola */
.grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:50;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* barra superiore */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--bg)}
.nav{position:fixed;top:0;left:0;right:0;z-index:40;padding:calc(env(safe-area-inset-top,0px) + 22px) clamp(20px,4vw,56px) 22px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:linear-gradient(var(--bg) 35%, transparent)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.brand .mono{width:44px;height:44px;color:var(--brass);flex:none}
.brand .name{display:block;font-family:var(--serif);font-size:19px;line-height:1.1;letter-spacing:.015em}
.brand .role{display:block;font-size:12px;color:var(--muted);letter-spacing:.04em;margin-top:3px}
footer .brand{margin-bottom:22px}
.nav ul{display:flex;gap:34px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-size:14px;color:var(--muted);transition:color .3s}
.nav ul a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;min-height:46px;padding:0 24px;border:1px solid var(--brass);color:var(--ink);text-decoration:none;font-size:14px;letter-spacing:.02em;transition:background .4s,color .4s}
.btn:hover{background:var(--brass);color:var(--bg)}
.btn.small{min-height:42px;padding:0 18px}
.link{font-size:14px;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px}
.link:hover{color:var(--ink)}

/* il quadrante */
.dial-wrap{position:fixed;left:50%;top:50%;width:min(86vmin,740px);aspect-ratio:1;margin:calc(min(86vmin,740px)/-2) 0 0 calc(min(86vmin,740px)/-2);z-index:0;pointer-events:none;color:var(--brass)}
.dial-wrap svg{width:100%;height:100%;overflow:visible}
.dial-wrap .faint{stroke:currentColor;stroke-opacity:.28;fill:none;stroke-width:.8}
.dial-wrap .ring{stroke:currentColor;fill:none;stroke-width:1.3}
.dial-wrap .tick{stroke:currentColor;stroke-width:.8}
.dial-wrap .tick.major{stroke-width:1.4}
.dial-wrap text{fill:currentColor;font-family:var(--serif);font-size:15px;font-style:italic}
.dial-wrap .needle{stroke:currentColor;stroke-width:1.2;fill:none}

main{position:relative;z-index:1}
/* velo: separa il testo dal quadrante quando ci passa sotto */
.veil{position:relative}
.veil::before{content:"";position:absolute;inset:-20% -16%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,var(--bg) 76%,transparent)}
.step h3,.svc h3,.facts h3,.journal li span,.brand .name{font-weight:500}
.brand .mono.seal{width:58px;height:58px}
.brand .mono.knot{width:52px;height:45px}
.brand .mono.frame{width:37px;height:46px}
.brand.lettering .name{font-size:22px}
.brand .rule{display:block;width:150px;height:8px;color:var(--brass);margin:7px 0 5px}
.brand.lettering .role{margin-top:0}
.brand .name{text-transform:uppercase;letter-spacing:.24em;font-size:14px;font-weight:500}
.nav .brand .role{display:block;margin-top:5px;font-size:12.5px;letter-spacing:.06em}
footer .brand .role{margin-top:6px}
.brand .mono{animation:breath 6s ease-in-out infinite}
@keyframes breath{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--brass) 55%,transparent))}}
@media (max-width:560px){.brand .name{font-size:12px;letter-spacing:.18em}}
@media (prefers-reduced-motion:reduce){.brand .mono{animation:none}}
.brand .mono.portico{width:36px;height:47px}
.brand .mono.qdial{width:46px;height:46px}
.brand .mono.needle{width:26px;height:45px}
.brand .mono.init{width:54px;height:36px}
.brand.wordonly .name{font-size:16px;letter-spacing:.3em;background:linear-gradient(100deg,var(--brass) 40%,var(--sheen) 50%,var(--brass) 60%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheenText 9s linear infinite}
@keyframes sheenText{0%,72%{background-position:100% 0}100%{background-position:0 0}}
@media (max-width:560px){.brand.wordonly .name{font-size:13px;letter-spacing:.22em}}
@media (prefers-reduced-motion:reduce){.brand.wordonly .name{animation:none}}
.brand .sep{width:1px;height:36px;background:var(--brass);opacity:.6;flex:none}
.finale-in{display:flex;flex-direction:column;align-items:center}
section{position:relative;padding:0 clamp(20px,6vw,96px)}

/* apertura */
.hero{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:6vw;padding-top:120px;padding-bottom:80px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.6vw,104px);line-height:1.02;letter-spacing:-.015em;margin:0 0 36px}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .l span{display:block}
.hero p.lead{max-width:30em;color:var(--muted);margin:0 0 44px;font-size:18px}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.plate{position:relative;justify-self:center;width:min(100%,400px)}
.plate::before{content:"";position:absolute;inset:-14px;border:1px solid var(--brass);opacity:.6}
.plate img{width:100%;aspect-ratio:4/5;object-fit:cover}
.plate figcaption{margin-top:22px;font-size:14px;color:var(--muted);text-align:center;letter-spacing:.02em}

/* manifesto */
.manifesto{height:170vh}
.manifesto .sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;text-align:center}
.manifesto blockquote{margin:0;max-width:16em;font-family:var(--serif);font-size:clamp(34px,5.2vw,78px);line-height:1.12;letter-spacing:-.01em}
.manifesto .w{opacity:.24;transition:opacity .7s ease,color 1s ease,text-shadow 1.4s ease}
.manifesto .w.lit{opacity:1;color:var(--brass);text-shadow:0 0 34px color-mix(in srgb,var(--brass) 55%,transparent),0 0 2px color-mix(in srgb,var(--sheen) 40%,transparent)}
html.static .manifesto .w{opacity:1;color:var(--brass)}

/* metodo */
.metodo .pin{height:100vh;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.metodo .steps{grid-column:2;position:relative;min-height:340px;max-width:30em}
.metodo h2,.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,50px);line-height:1.1;margin:0 0 40px}
.step{position:absolute;inset:auto 0 0 0;top:110px;opacity:0}
.step:first-of-type{opacity:1}
.step .n{font-family:var(--serif);font-style:italic;color:var(--brass);font-size:18px}
.step h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,38px);margin:6px 0 14px}
.step p{margin:0;color:var(--muted)}
.progress{position:absolute;left:0;top:76px;display:flex;gap:10px}
.progress i{width:28px;height:1px;background:var(--line)}
.progress i.on{background:var(--brass)}
html.static .step{position:static;opacity:1;margin-bottom:36px}
html.static .metodo .steps{min-height:0}
html.static .progress{display:none}

/* per chi lavoro */
.perchi{padding-top:14vh;padding-bottom:14vh}
.perchi-in{max-width:1180px;margin:0 auto}
.perchi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.perchi-grid div{border-top:1px solid var(--brass);padding-top:22px}
.perchi-grid h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,1.9vw,27px);margin:0 0 10px;line-height:1.2}
.perchi-grid p{margin:0;color:var(--muted)}
@media (max-width:1100px){.perchi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.perchi-grid{grid-template-columns:1fr}}
.svc-more{display:inline-block;margin-top:16px;min-height:28px}
/* servizi */
.servizi{padding-top:18vh;padding-bottom:18vh}
.servizi .inner{max-width:560px}
.svc{position:relative;padding:46px 0;border-top:1px solid var(--line);opacity:.62;transition:opacity .8s}
.svc::before{content:"";position:absolute;inset:-6px -56px;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.1s;
  background:radial-gradient(60% 75% at 22% 50%,color-mix(in srgb,var(--brass) 22%,transparent),transparent 72%)}
.svc::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.svc h3{transition:color .8s,text-shadow .8s}
.svc.on::before{opacity:1}
.svc.on::after{transform:scaleX(1)}
.svc.on h3{color:var(--brass);text-shadow:0 0 28px color-mix(in srgb,var(--brass) 45%,transparent)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc.on{opacity:1}
html.static .svc{opacity:1}
.svc h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,38px);margin:0 0 12px}
.svc p{margin:0;color:var(--muted);max-width:30em}

/* perché io */
.perche{padding-top:16vh;padding-bottom:16vh;display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:center}
.perche .plate{width:min(100%,340px)}
.facts{display:grid;gap:34px;margin-top:8px}
.facts div{border-left:1px solid var(--brass);padding-left:22px}
.facts h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 6px}
.facts p{margin:0;color:var(--muted)}
.cred{margin-top:44px;font-size:14px;color:var(--muted);max-width:34em}

/* voci */
.voci{padding-top:14vh;padding-bottom:14vh}
.voci .grid{display:grid;gap:12vh;max-width:980px;margin:0 auto}
.voci figure{margin:0}
.voci figure:nth-child(2){margin-left:auto;text-align:right}
.voci blockquote{margin:0 0 20px;font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.7vw,38px);line-height:1.3;max-width:24em}
.voci figure:nth-child(2) blockquote{margin-left:auto}
.voci figcaption{font-size:14px;color:var(--muted)}

/* journal */
.journal{padding-top:12vh;padding-bottom:12vh}
.journal .head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;max-width:1100px;margin:0 auto 40px}
.journal ul{list-style:none;margin:0 auto;padding:0;max-width:1100px}
.journal li a{display:grid;grid-template-columns:160px 1fr;gap:30px;padding:30px 0;border-top:1px solid var(--line);text-decoration:none;transition:padding .5s}
.journal li:last-child a{border-bottom:1px solid var(--line)}
.journal li a:hover{padding-left:14px}
.journal time{font-size:14px;color:var(--muted);padding-top:8px}
.journal li span{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.25}

/* finale */
.finale{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:10vh;padding-bottom:10vh}
.finale h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,68px);line-height:1.08;margin:0 0 26px;max-width:11em}
.finale p{color:var(--muted);max-width:26em;margin:0 0 40px}

footer{position:relative;z-index:1;padding:50px clamp(20px,6vw,96px) 40px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:grid;grid-template-columns:1fr auto;gap:30px;background:var(--bg)}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer nav a{text-decoration:none}
footer nav a:hover{color:var(--ink)}
footer p{margin:0 0 6px;max-width:60em}

@media (max-width:820px){
  body{font-size:17px}
  .hero{grid-template-columns:1fr;padding-top:130px;gap:64px}
  .plate{width:min(78%,340px)}
  .metodo .pin{grid-template-columns:1fr}
  .metodo .steps{grid-column:1;background:transparent}
  .perche{grid-template-columns:1fr}
  .journal li a{grid-template-columns:1fr;gap:6px}
  footer{grid-template-columns:1fr}
  .voci figure:nth-child(2){text-align:left;margin-left:0}
  .voci figure:nth-child(2) blockquote{margin-left:0}
}
/* menu per telefono e tablet */
.nav-r{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;width:44px;height:44px;border:0;background:none;color:var(--ink);position:relative;cursor:pointer;padding:0}
.menu-btn span{position:absolute;left:10px;right:10px;height:1px;background:currentColor;transition:transform .4s}
.menu-btn span:first-child{top:18px}.menu-btn span:last-child{top:26px}
html.menu-open .menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}
html.menu-open .menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:39;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:0 clamp(24px,8vw,64px);gap:6px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
html.menu-open .menu{opacity:1;visibility:visible}
.menu .big{font-family:var(--serif);font-size:clamp(34px,8vw,54px);text-decoration:none;line-height:1.35}
.menu .btn{margin-top:30px;align-self:flex-start}
/* scelta del logo (solo per la demo) */
.picker{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;background:var(--bg-2);border:1px solid var(--line);padding:10px 14px 12px;max-width:calc(100vw - 32px);font-size:13px}
.picker-head{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--muted)}
.picker-close{width:44px;height:32px;border:0;background:none;color:var(--ink);font-size:18px;cursor:pointer}
.picker-opts{display:flex;gap:6px;overflow-x:auto;margin-top:6px}
.picker-opts button{flex:none;min-height:44px;padding:0 14px;border:1px solid var(--line);background:none;color:var(--ink);font:inherit;cursor:pointer}
.picker-opts button[aria-pressed="true"]{border-color:var(--brass);color:var(--brass)}
.picker.min .picker-opts{display:none}
@media (max-width:1100px){
  .nav ul{display:none}
  .menu-btn{display:block}
  .hero{gap:4vw}
  .plate{width:min(100%,340px)}
}
@media (max-width:560px){
  .nav .btn.small{display:none}
  .brand .role{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .svc,.journal li a,.btn{transition:none}
}
.totop{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:38;width:48px;height:48px;border-radius:50%;border:1px solid var(--brass);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--brass);display:grid;place-items:center;cursor:pointer;padding:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s,visibility .4s,transform .4s,background .4s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--brass);color:var(--bg)}
.totop svg{width:20px;height:20px}
main{overflow-x:clip}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}
.hero h1 .kick{display:block;font-family:var(--sans);font-size:15px;letter-spacing:.02em;color:var(--brass);margin:0 0 22px;line-height:1.4}
.plate img{height:auto}