.method-section{position:relative;overflow:hidden;background:#e7e5db}.method-stage{position:relative;margin-top:56px;padding-bottom:20px}.method-stage:before{content:'';position:absolute;right:-10%;top:-100px;width:55vw;height:480px;opacity:.28;background:radial-gradient(ellipse at 70% 45%,#d18a7040 0 1px,transparent 2px),radial-gradient(ellipse at 35% 70%,#a44b3940 0 1px,transparent 2px);background-size:22px 22px,31px 31px;mask-image:linear-gradient(90deg,transparent,#000 28%,#000 80%,transparent);animation:method-drift 18s linear infinite;pointer-events:none}.method-list{position:relative;z-index:1;margin-top:0}.method-step{display:grid;grid-template-columns:50px .8fr 1.2fr 1fr;gap:30px;border-top:1px solid #b6b2a5;padding:35px 0;align-items:start;position:relative;cursor:pointer;transition:background .5s,border-color .5s,transform .5s,padding .5s;outline:none}.method-step:last-child{border-bottom:1px solid #b6b2a5}.method-step>span{color:#c53d2d;font-size:16px;transition:color .4s}.method-step h3{font-size:36px;margin:0;transition:color .4s,transform .5s}.method-step p{font-size:18px;margin:0;max-width:510px;transition:color .4s}.method-step small{font-size:16px;color:#655e52;border-left:1px solid #b6b2a5;padding-left:25px;transition:color .4s,border-color .4s}.method-step small b{font-weight:400;color:#9d4433}.method-step:after{content:'↗';position:absolute;right:18px;top:32px;font-size:25px;color:#b66a54;opacity:0;transform:translate(-10px,10px);transition:opacity .4s,transform .4s}.method-step:hover,.method-step:focus-visible,.method-step.is-active{background:#ead5c9;border-color:#a95b47;padding-left:18px;padding-right:45px}.method-step:hover h3,.method-step:focus-visible h3,.method-step.is-active h3{color:#9d4433;transform:translateX(7px)}.method-step:hover:after,.method-step:focus-visible:after,.method-step.is-active:after{opacity:1;transform:none}.method-step.is-active{box-shadow:inset 5px 0 #a34e3c}.method-progress{height:1px;background:#c3b8ac;margin:25px 0 0;display:flex;justify-content:space-between;position:relative}.method-progress:before{content:'';height:3px;background:#a34e3c;position:absolute;left:0;top:-1px;width:var(--method-progress,25%);transition:width .7s cubic-bezier(.2,.7,.15,1)}.method-progress span{width:10px;height:10px;border:1px solid #a34e3c;background:#e7e5db;border-radius:50%;transform:translateY(-4px);transition:background .4s,box-shadow .4s}.method-progress span.is-active{background:#a34e3c;box-shadow:0 0 0 5px #a34e3c1c}.method-hint{font-size:14px;color:#725f54;margin:22px 0 0;position:relative}.method-hint span{color:#a34e3c;display:inline-block;animation:method-arrow 1.7s ease-in-out infinite}@keyframes method-drift{from{transform:translate3d(0,0,0)}50%{transform:translate3d(-25px,16px,0)}to{transform:translate3d(0,0,0)}}@keyframes method-arrow{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}@media(max-width:850px){.method-stage{margin-top:38px}.method-step{grid-template-columns:32px 1fr;gap:12px;padding:25px 0}.method-step h3{font-size:31px}.method-step p,.method-step small{grid-column:2}.method-step p{font-size:17px;margin-top:4px}.method-step small{font-size:15px;border-left:0;padding:0;margin-top:5px}.method-step:after{right:8px;top:25px}.method-step:hover,.method-step:focus-visible,.method-step.is-active{padding-left:12px;padding-right:34px}.method-stage:before{width:100vw;right:-35%;top:0}.method-hint{font-size:13px}}@media(prefers-reduced-motion:reduce){.method-section *{animation:none!important;transition:none!important}}
